Getting Started in Web Dev

These are the top items to look in to if you are interested in getting started in Web Development (mostly front-end).

This page is meant to be a resource of the most common things I end up linking to people as they are learning web dev. It should be short so it doesn't overwhelm people.

Mandatory Knowledge

1. 2022 Web Dev Getting Started/Career Guide Video - MANDATORY WATCHING
2. MarkSheet - HTML/CSS/Sass
3. JSFiddle - Use this when you are having trouble getting code to work and need help from someone
4. CodePen - Create an account. Use this for stuff you want to keep track of, or to search for existing examples.
5. Free Code Camp - Bootstrap, JS, and more
6. Can I Use - Tells you what browser support specific web features have.
7. Learn Chrome Dev Tools - Basically the same for other browsers as well.
8. Why learning to code is so damn hard - important write up

JavaScript Books

1. JavaScript: The Good Parts - Book. Pay for it on Amazon, pirate it, or just get it from your local library.
2. You Don't Know JS - Free online book
3. Eloquent JavaScript - Free online book
4. ExploringJS - Several free online books that stick close to the ES spec
5. JavaScript.info - Online JS resource, little easier to read than MDN

Getting Started with Vue.js

1. Open JSFiddle.net, then follow the official Getting Started guide.
2. Vue Mastery (Intro to Vue is free, advanced classes are not, but they have free weekends occasionally you can look out for)
3. Anything from Maximilian Schwarzmller is good:
   • Vue.js - Getting Started (Free)
   • Vue.js & Vuex (Basics) (Free)
   • Udemy Course: Vue + Router + Vuex
4. Sarah Drasner is one of the core members of the Vue team, she has a decent course on Intro to Vue, and is an expert in web animation.
5. CodeSandbox.io/s/vue - Like JSFiddle but for large webpack based projects.

CSS Fun Time

1. MarkSheet - HTML/CSS/Sass
2. CSS Fundementals - Conference Talk from Bootstrap creator
3. CSS Layout Basics - CSS Tutorial
4. CSS Sushi - CSS Selector game
5. Flexbox Game - Interactive CSS Flexbox Tutorial
6. Flexbox Froggies - CSS Flexbox Game
7. Flexbox Tower Defence - CSS Flexbox Game
8. CSS Grid Garden - CSS Grids Game
9. Grid By Example - CSS Grids Video Tutorials
10. WTF HTML & CSS - Common issues people run into with HTML/CSS and their solutions

Photo credit:

• Rocket - Maciej Ruminkiewicz