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 Schwarzmüller 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. ITCSS - A talk on CSS Specificity and working with CSS instead of against it, I use this approach on literally every project
4. CSS Layout Basics - CSS Tutorial
5. CSS Sushi - CSS Selector game
6. Flexbox Game - Interactive CSS Flexbox Tutorial
7. Flexbox Froggies - CSS Flexbox Game
8. Flexbox Tower Defence - CSS Flexbox Game
9. CSS Grid Garden - CSS Grids Game
10. Grid By Example - CSS Grids Video Tutorials
11. WTF HTML & CSS - Common issues people run into with HTML/CSS and their solutions

UX Basics

1. UX Checklist
2. Luke Wroblewski - Honestly just watch any talk by him
3. Don't Make Me Think - Book
4. Nielsen Normal Group - Published UX Research

Photo credit:

• Rocket - Maciej Ruminkiewicz