Resources for Learning Web Dev

One of the questions I get the most often from people who want to be a self-taught developer is “how?“. It’s easy to get overwhelmed by the amount of resources available and the amount of things you’re supposed to know - that’s discouraging to most people!

To top it off, learning a new skill is harder the less you know - your 3rd programming language will take a lot less time to get good with than your first.

That’s why it’s important to find tutorial videos you find knowledgeable + easy to listen to, and resources that you find easy to understand. What works for one person doesn’t work for everyone, but here’s what worked for me:

Youtube Channels

For most topics, I learn about it first through youtube before I dive into the documentation websites and try it myself. However, that only works if you already have an understanding of the absolute basics.

If you don’t have a solid grasp of HTML/CSS/JavaScript, most video content will be hard to follow. I would recommend starting with the websites section if you feel like this applies to you.

There are 2 important things to remember when browsing for youtube tutorials: information changes over time, as does the knowledge level/personal interest of each youtuber. What that means is:

  • Older tutorials have a higher chance of teaching you outdated information/concepts
  • Newer videos by specific youtubers may be more complex/advanced than their older videos

It’s easy to write things off as being outdated, but it’s easier to fall into a trap of “I don’t understand this youtuber’s video, so I won’t understand their older/simpler stuff either”. So with each channel I recommend, I will also try to include a few of their earlier / more beginner friendly videos.

Fireship

This guy is probably the most important programming influencer today. He posts a lot about AI more recently, as well as general tech industry news in fast-paced high-information meme-filled videos.

He has a lot of instructional videos, a “X technology in 100 seconds” series of videos, separate channels for more niche topics and he sells his own programming course. If that sounds interesting, check out his main channel [here.

A few of his videos that I strongly recommend watching:

Fireship is the only youtube channel where I can definitively say that I’ve watched all their videos for the past 2 years.

Web Dev Simplified

Mostly does instructional videos or other content aimed at beginning programmers. The technology he showcases in newer videos can be a bit more advanced than older videos, but it’s very well-focused on the most popular industry standards.

He also has a lot of instructional videos on how to build something with specific technology. You may think that typing along with someone else who is making a project is cheating, but a lot of people find that an amazing way to learn.

Since his channel is more beginner-focused I will link some of the older more focused on explaining must-know concepts to beginners.

Matt Pocock

The god of TypeScript tutorials. The language can be a little intimidating for people who have just started with html/css/js, but Matt makes it look simple. And if you’re already familiar with TypeScript, he has a lot of advanced usage tips too!

  • He has a LOT of videos focused on specific TypeScript topics that are all worth watching
  • For people just starting out with TypeScript, I really like The TSConfig Cheat Sheet
  • It wasn’t that long ago that I published my first serious package on npm, which was made 10x easier thanks to Blazing Fast Tips: Publishing to NPM

Theo

A “tech influencer” that covers topics more in-depth / high-level. Also does a lot of tech news. Not recommended for beginners, but I personally get a lot of information out of him so I feel like I shouldn’t leave it out.

Here’s a few of his older videos; some of them are a bit simpler, some a bit more complex. See if something strikes your fancy!

Honorable Mentions

These are just a few of my most-watched youtubers, but there are many more. I can’t possibly list them all, but here are some honorable mentions

I am subscribed to all of the youtubers linked above.

Websites and Other Tools

There are too many online resources to name them all, and what resources people you often comes down to personal preference. I will ofcourse list mine here too, but I will also try to emphasize the resources that I think are industry standard - the ones you really should be learning.

Written Resources and Guides

The following 3 online written resources are known by practically every web developer

  • W3schools is a very beginner-friendly website, and it contains 2 types of content:

    • step-by-step guides about specific tpics such as HTML / CSS / JS / Git etc. While the content of these guides is good, not all guides provide a good overview of their length / it can be intimidating to see the amount of guides.
    • an online reference, similar to a dictionary. You can use this to look up technical details. What does a certain CSS property do again? Which browser support it, and which don’t? The only time this isn’t useful is when you’re in your school exams. The w3schools is sold when you’re starting out since it is rather beginner-friendly, but most developers eventually abandon it in favour of a different resource…

  • MDN Web Docs - formerly known as the Mozilla Developer Network. MDN is an absolutely incredibly resource with so much technical information, it can be dazzling. But if you don’t know what all that technical information is useful for, it can feel a little overly complex.

  • There is one other part of MDN which IS very useful for beginners, and that is MDN Learn. Just like the rest of the website, it can be a bit more technical - so why recommend it to beginners? Because unlike w3schools, it has a lot more guidance in what topics you need to learn in what order. I may not agree with all the details of its’ step-by-step plan, but the broad strokes are very solid. And it’s 100% free!

  • My final recommendation is not an entire website, but a specific guide on a website - the CSS-tricks guide to flexbox. Flexbox is a collection of some of the most widely used CSS properties in modern web development - knowing how those work is absolutely crucial if you want to work as a front-end web developer. And whether you’re learning it for the first time, orlooking up technical details that you’ll forget many times over - this resource is a go-to for an absurd amount of web developers. It even has a poster!

    • CSS-tricks has a lot of other solid guides too, but it was sold sometime in 2022 and sadly it has not been maintained well since

Practice Tools

There are a few sites meant as “gamey” tools to practice small-scale programming problems - here are my top 3:

  • Flexbox Froggy is an amazing way to learn CSS
  • Learn Git Branching is an incredible tool to learn and practice Git with
  • LeetCode is probably the most famous JavaScript coding practice website, but there are a lot of others like it

Drawing and Design Tools

This might seem like a weird category to list, but being familiar with one or more of the following tools is very standard for web developers. I’ll explain why for each one individually:

  • Figma is the industry standard for front-end web development. If you plan to work in this field, you will work with this tool. Either you are visually oriented in which case you might be making a design yourself, or you are not visually oriented and you will be working with designers who make one for you. And how will those designers share their work with you? That’s right, they’ll do it through Figma (and maybe Google Drive 😅)
  • Miro - this is more oriented towards making graphs / schematics for complicated computer systems. Often used by back-end developers, but there are other tools similar to it
  • Excalidraw - this is a bit more of a personal favorite, and it’s relatively simple to use. Great for adding visuals to an explanation on the fly

Developer Surveys

Ofcourse, you shouldn’t just take my word for what’s good / popular / nice and what isn’t. You should see what other developers think! And that’s why my final resources to share are the most common sites where developers fill out yearly surveys. These can give you an idea where the market is going, and what technology is used by other people. There’s 2 major yearly surveys like this:

  • The Stack Overflow Developer Survey. If you haven’t used stackoverflow yet, you’ve probably been programming for less than a week. Most programmers google things and end up here for the answer - it’s just that popular. Here’s their latest survey.
  • State of JavaScript is more focused on the yearly survey itself, and the topic is also less broad than stackoverflow’s survey. This makes it better web-development specific information, but less worthwhile than stackoverflow from a general programming perspective

Closing Thoughts

None of us can make it alone.
— Arnold Schwarzenegger1

In the end, the most important resource you can ever have is a community. Programming is like solving puzzles, and humans are social animals. That means you need to vent your frustration when the puzzle gets hard, and you need someone to share it with when your puzzle gets solved!

The best way to find a community is to join a bootcamp and learn alongside other people. If that doesn’t work, there are still many online discord servers, subreddits and communities of all skill levels! And if you really don’t have anyone to reach out to, you can always find me at ojdomela@gmail.com. If you’ve read this entire post you’re welcome to ask me any question you like!

Footnotes

  1. Arnold Schwarzenegger’s quote is from his Univerity of Houston 2017 Commencement Address. ↩