Development Resources

Emmet Cheat Sheet

Emmet Cheat Sheet

Check out this useful Emmet Cheat Sheet for VSCode

VSCode Download

VSCode Logo

VSCode is the only editor I use in class and it is recommended you use this.

My VS-Code Settings


This is a link to my VSCode settings. It is recommended you install my extensions and copy my settings.

CSS Resources

Cubic Bezier

Logo For Cubic Bezier, Parabola Shape

Cubic Bezier can help you nail down animation timings.


Type Scale Logo

Visual Calculator for Typography

Wes Bos

Wes Bos offers a combination of free and paid courses. His courses of CSS Grid and flexbox are amazing free courses sponsored by Mozilla


CSS Logo

Easily create CSS clip paths with a handy GUI.

Flexbox cheatsheet

Flexbox Cheatsheet

Interactive cheatsheet for all flexbox attributes


codepen logo

Codepen is an amazing resource for prototyping but also for getting inspiration. I often fin myself scrolling codepen to see how other developers create interesting UI

30 CSS Selectors

30 CSS Selectors

This a great resource of various CSS selectors that you may find useful in a pinch

CSS Tricks

CSS Tricks Logo

Great blog with amazing contributions for web development.

SCSS Documentation


Offical SCSS documentation for your referance


MDN Logo

MDN Should be your first stop to troubleshoot or look up CSS or JS information.

JavaScript Resources

Vue Documentation

Logo for Vue JS

Vue is my go to framework for JavaScript projects. The documentation is great for getting started. VueJS is taught in our AP Course in January through June

Stack Overflow

Stack OverFlow Logo, Orange bars escaping box

Stackoverflow is great resource for programming questions and answers by the community


Firebase Logo

Firebase is an incredibly powerful and easy backend tool by google. Get easy authentication and a real-time database.

Dev Ed

Youtube Logo

Dev Ed is another tremendous youtube channel for JavaScript as well as interesting designs and animations.

Traversy Media

Traversy Media

Traversy Media is youtube channel dedicated to educating viewers in various web technologies.


Design Course Logo

This YouTube channel as all the amazing design and animation tutorials you could want from a YouTube channel.

JavaScript MDN Resource


MDN is my go to resource for JS documentation

Design Resources

Undraw Logo

Undraw provides tons of quality, free SVG's that you can customize the color of before downloading

UI Gradients

UI Gradients Logo

Create Amazing and Simple Gradients


Font Joy

FontJoy uses AI to create matching typography



Pexels offers free stock videos and images

Font Squirrel

Font Squirrel Logo

Font Squirrel is a great resource for converting and downloading web fonts


Flaticon Logo

Access to over 3 Million Icons for free


unsplash logo

Unsplash offers free stock images


Pixabay Logo

Pixabay offers free stock images for your site

Material Design Palette

Material Palette

Great Resource for Palette Creation

Google Fonts


Google Fonts is the ultimate free front library