(Realistic) List of Web Dev Resources 💻🚀
Tags: webdev, html, css, javascript
Published: 2021-05-20 00:25:58

Photo by <a href="https://unsplash.com/@lucabravo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Luca Bravo</a> on <a href="https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

----------

I've been finding a lot of articles on DEV lately that garner a TON of reactions, especially ones that provide lists of more than 50+ or 100+ resources!

That's a lot. 🤯

A lot of choice paralysis, too.

In reality, it's not about how popular the resources are, or how many you can add to your archive list (where they collect dust 💨). Instead, it's about **what goal you want these resources help you with**. So, I will do just that!

Keep in mind these are **my own opinions** and by all means, if you like those really long resource lists, do use them. This list is meant to be **accessible, cost-effective, and focused** - they are also resources that have been successful for my learning.

My resources are all **multimodal ways of learning** (audiovisual, reading) - some may not be fully accessible by nature. At the end of the day, you know what works best for you.

Lastly, my resources are **NOT hundreds of hours long**! I studied all I have of frontend web development throughout the latter half of my full-time undergraduate degree, so when it comes to time-management, I've got you covered ☺️


*Disclaimer: I’m a Vue.js fan, so I’m sorry I don’t have as much React.js sources 🥲. However, [freeCodeCamp](https://www.freecodecamp.org)'s [React course](https://www.freecodecamp.org/learn/front-end-development-libraries/#react) has a great, focused introduction.*

----------

#### Skip links 👇🏼
1. [HTML / CSS](#html-css)
2. [JavaScript](#javascript)
3. [Vue.js / Nuxt.js](#vuejs-nuxtjs)
4. [Version Control](#version-control)
5. [Responsive Web Design](#responsive-web-design)
6. [Forums](#forums)
7. [Industry Knowledge](#industry-knowledge)

----------

## HTML / CSS
*Absolute must if you're going into web development, and 100% needed for frontend development. These two are the builders of the visual front of the web*

- [Flavio Copes](https://flaviocopes.com)' [HTML handbook](https://flaviocopes.com/page/html-handbook/) [FREE] - a true, beginner-friendly, comprehensive, and easy read that gets you up and running with HTML quickly
- [Flavio Copes](https://flaviocopes.com)' [CSS handbook](https://flaviocopes.com/page/css-handbook/) [FREE] - a comprehensive CSS resource and easy read
- [Scrimba](https://scrimba.com)'s [CSS Grid](https://scrimba.com/learn/cssgrid) - what I used to nail down CSS Grid, and revisit it
- [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)'s [Responsive Navigation Bar Tutorial | HTML CSS...](https://youtu.be/gXkqy0b4M5g) [FREE] - Don't ask... Start watching at 13:00 mins. I didn't understand HTML hierarchy until the 13 mins! ☺️



## JavaScript
*Literally the language of the modern web. A bit of a Frankenstein language, but you'll definitely need this language to understand the ecosystem of the web and why the web depends on it*

- [Code with Mosh](https://codewithmosh.com)'s [JavaScript for Beginners](https://codewithmosh.com/p/javascript-basics-for-beginners) - ALL the basics of JS in bitesized, audiovisual format
- [Code with Mosh](https://codewithmosh.com)'s [JavaScript OOP](https://codewithmosh.com/p/object-oriented-programming-in-javascript) - everything you need to know about JS OOP in quick, bite-sized and well-explained audiovisual format
- [freeCodeCamp.org](https://www.freecodecamp.org)'s [JavaScript Algorithms and Data Structures ](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/) [FREE] - to practice JS you've learned, and learn DSA



## Vue.js / Nuxt.js
*If you're learning Vue.js, these are the BEST resources I've stuck with, from basics to advanced*

- [Flavio Copes](https://flaviocopes.com)' [Vue.js 2 Handbook](https://thevalleyofcode.com/download/) [FREE] - great to get you started in Vue 2 (syntax doesn't differ drastically between v2 and v3)
- [Vue Mastery](https://www.vuemastery.com)'s courses - choose from a multitude of audiovisual lessons w/ tutorials
- [Debbie O'Brien](https://debbie.codes)'s [YouTube](https://www.youtube.com/c/DebbieOBrien) [FREE] - for AWESOME [Nuxt.js](https://nuxtjs.org) tidbits!

> Note: Vue Mastery has courses on Nuxt.js!



## Version Control
*Must have if you're to work in teams / companies, and track versions of your projects*

- [Codecademy](https://www.codecademy.com)'s [Learn Git](https://www.codecademy.com/learn/learn-git) course



## Responsive Web Design
*The most necessary skillset you can add to your web design / development career*

- [Kevin Powell](https://www.kevinpowell.co)'s [Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) course [FREE] - I promise you this is the BEST and most comprehensive course on responsive web design.
- [Samantha Ming](https://www.samanthaming.com)'s [Flexbox 30](https://www.samanthaming.com/flexbox30/) [FREE] - the one flexbox resource I stuck with through visually engaging and adorable examples of flexbox in action.



## Forums
*When learning anything, you'll almost always get by with a little help from friends and fellow classmates. Take a quick coffee break ☕️ and hop on these places for some help*

- [StackOverFlow](https://stackoverflow.com) - I don't find SO helpful for asking questions (am I the only one that gets shamed for a slightly unclear question? 🥲). Instead, I use SO for finding issues that others have answers for



## Industry Knowledge
*Knowledge doesn't have to be specific! Reading blogs and subscribing to the right newsletters might be the best way to gain practical industry knowledge in tech*

- [Smashing Magazine](https://www.smashingmagazine.com/the-smashing-newsletter/) newsletter - wide range of really interesting topics on design, frontend development and new tech. I HIGHLY RECOMMEND! (Still subscribed in 2022) ☺️


## Conclusion

Alrighty, that's it for today. This post will be updated as I find new info. 2 out of 2 posts today done! ✅

> My first post today if you want to read:
{% link https://dev.to/maureento8888/how-to-create-named-routes-in-nuxt-js-4i94 %}

It's been about time I collected all my resources I've learned **successfully** from into a list so it can be helpful for others! My rule of thumb is I don't learn from the most popular teachers like Wes Bos or Traversy Media because the teaching styles don't always fit.

**This way, I save time sifting through who's most popular and instead focus on my limited time with a course/tutorial that is high impact** 🌟

This method of learning web dev has really helped me…
- reduce anxiety (long resource lists of 50+ scares me 😬);
- focus rather than suffer from ["shiny object syndrome"](https://en.wikipedia.org/wiki/Shiny_object_syndrome)

Have you had any resources you stick by? What learning style works for you? Drop them in the comments below!