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

VS-Code

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

Type Scale Logo

Visual Calculator for Typography

WesBos.com

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

Clippy

CSS Logo

Easily create CSS clip paths with a handy GUI.

Flexbox cheatsheet

Flexbox Cheatsheet

Interactive cheatsheet for all flexbox attributes

Codepen

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

SCSS Logo

Offical SCSS documentation for your referance

MDN

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

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.

DesignCourse

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

MDN is my go to resource for JS documentation

Design Resources

Undraw

Undraw.io 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

FontJoy

Font Joy

FontJoy uses AI to create matching typography

Pexels

Pexels

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

Flaticon Logo

Access to over 3 Million Icons for free

Unsplash

unsplash logo

Unsplash offers free stock images

Pixabay

Pixabay Logo

Pixabay offers free stock images for your site

Material Design Palette

Material Palette

Great Resource for Palette Creation

Google Fonts

Google

Google Fonts is the ultimate free front library