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's React course has a great, focused introduction.

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' HTML handbook [FREE] - a true, beginner-friendly, comprehensive, and easy read that gets you up and running with HTML quickly
Flavio Copes' CSS handbook [FREE] - a comprehensive CSS resource and easy read
Scrimba's CSS Grid - what I used to nail down CSS Grid, and revisit it
Dev Ed's Responsive Navigation Bar Tutorial | HTML CSS... [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's JavaScript for Beginners - ALL the basics of JS in bitesized, audiovisual format
Code with Mosh's JavaScript OOP - everything you need to know about JS OOP in quick, bite-sized and well-explained audiovisual format
freeCodeCamp.org's 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' Vue.js 2 Handbook [FREE] - great to get you started in Vue 2 (syntax doesn't differ drastically between v2 and v3)
Vue Mastery's courses - choose from a multitude of audiovisual lessons w/ tutorials
Debbie O'Brien's YouTube [FREE] - for AWESOME Nuxt.js 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's Learn Git course

Responsive Web Design

The most necessary skillset you can add to your web design / development career

Kevin Powell's Conquering Responsive Layouts course [FREE] - I promise you this is the BEST and most comprehensive course on responsive web design.
Samantha Ming's Flexbox 30 [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 - 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 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:

How to create named routes in Nuxt.js

Maureen T'O ・ May 19 '21 ・ 2 min read

#nuxt #vue #tutorial

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"

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

(Realistic) List of Web Dev Resources 💻🚀