Getting Started in Web Dev
Tags: beginners, webdev, css, resources
Published: 2022-01-18 01:33:03

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](https://www.youtube.com/watch?v=EqzUcMzfV1w)** - MANDATORY WATCHING
1. **[MarkSheet](http://marksheet.io)** - HTML/CSS/Sass
1. **[JSFiddle](http://JSFiddle.net)** - Use this when you are having trouble getting code to work and need help from someone
1. **[CodePen](http://CodePen.io)** - Create an account. Use this for stuff you want to keep track of, or to search for existing examples.
1. **[Free Code Camp](http://freecodecamp.com)** - Bootstrap, JS, and more
1. **[Can I Use](http://caniuse.com)** - Tells you what browser support specific web features have.
1. **[Learn Chrome Dev Tools](https://developers.google.com/web/tools/chrome-devtools)** - Basically the same for other browsers as well.
1. **[Why learning to code is so damn hard](https://www.vikingcodeschool.com/posts/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.
1. **[You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)** - Free online book
1. **[Eloquent JavaScript](http://eloquentjavascript.net)** - Free online book
1. **[ExploringJS](https://exploringjs.com)** - Several free online books that stick close to the ES spec
1. **[JavaScript.info](https://javascript.info)** - Online JS resource, little easier to read than MDN


## Getting Started with Vue.js

1. Open [JSFiddle.net](https://jsfiddle.net/mnc0ekyw/), then follow the official [Getting Started](https://vuejs.org/v2/guide) guide.
1. [Vue Mastery](https://www.vuemastery.com) (Intro to Vue is free, advanced classes are not, but they have free weekends occasionally you can look out for)
1. Anything from Maximilian Schwarzmüller is good:
   * [Vue.js - Getting Started](https://www.youtube.com/watch?v=nyJSd6V2DRI&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07) (Free)
   * [Vue.js & Vuex (Basics)](https://www.youtube.com/watch?v=2CSr2vBApSI&list=PL55RiY5tL51pT0DNJraU93FhMzhXxtDAo) (Free)
   * [Udemy Course: Vue + Router + Vuex](https://www.udemy.com/vuejs-2-the-complete-guide/?couponCode=YOUTUBE_2)
1. Sarah Drasner is one of the core members of the Vue team, she has a decent course on [Intro to Vue](https://frontendmasters.com/courses/vue), and is an expert in web animation.
1. [CodeSandbox.io/s/vue](https://codesandbox.io/s/vue) - Like JSFiddle but for large webpack based projects.


## CSS Fun Time

1. **[MarkSheet](http://marksheet.io)** - HTML/CSS/Sass
1. **[CSS Fundementals](https://www.jqueryuk.com/2015/videos/mdo-ular-css)** - Conference Talk from Bootstrap creator
1. **[ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4&t=525s)** - A talk on CSS Specificity and working with CSS instead of against it, I use this approach on literally every project
1. **[CSS Layout Basics](http://www.dontfeartheinternet.com)** - CSS Tutorial
1. **[CSS Sushi](https://flukeout.github.io)** - CSS Selector game
1. **[Flexbox Game](http://flexboxgame.com)** - Interactive CSS Flexbox Tutorial
1. **[Flexbox Froggies](https://flexboxfroggy.com)** - CSS Flexbox Game
1. **[Flexbox Tower Defence](http://www.flexboxdefense.com)** - CSS Flexbox Game
1. **[CSS Grid Garden](https://cssgridgarden.com)** - CSS Grids Game
1. **[Grid By Example](https://gridbyexample.com/video)** - CSS Grids Video Tutorials
1. **[WTF HTML & CSS](http://wtfhtmlcss.com)** - Common issues people run into with HTML/CSS and their solutions


## UX Basics

1. **[UX Checklist](https://uxchecklist.github.io)**
1. **[Luke Wroblewski](https://www.youtube.com/watch?v=mAiNdU1go1A)** - Honestly just watch any talk by him
1. **Don't Make Me Think** - Book
1. **[Nielsen Normal Group](https://nngroup.com)** - Published UX Research


* * *


**Photo credit:**

* [Rocket - Maciej Ruminkiewicz](https://unsplash.com/photos/l2ioLM9iOuY)