Table of contents
Introduction
On my web development journey, I love to collect resources on different topics as I always find myself revising stuff I don't use daily. Below I have a wide range of content that helped me along my journey, which I hope will help anyone wanting to become a web developer.
HTML & CSS
The core of any website is learning HTML and CSS, at first you might find it tricky, but keep at it, and it will all start to make sense the more you learn.
When using long-form videos it is best to watch them in chunks. For each topic you learn, you should pause the video and attempt it yourself, as anyone can just sit there and watch a couple of hours of a video tutorial. Take your time and try to understand each part, maybe even mix other resources to help get a firm understanding before you move on to a new section.
My first video recommendation is the video by Bro Code, he explains each section in detail and tries to make easy as possible to follow. I always come back to his videos for recaps on topics I forget.
HTML & CSS Full Course for free by Bro Code
My second video recommendation is the video by Dave Gray on the freeCodeCamp.org channel. I have watched a lot of Dave's videos on his own channel Dave Gray highly recommend his content on your journey.
Learn HTML – Full Tutorial for Beginners by Learn HTML – by freeCodeCamp.org (Teacher Dave Gray)
If videos are not your cup of tea, these websites have great content on them.
First is the free code camp website, where they have a large database of courses from all areas in the computer science section. Here is their HTML guide that goes into detail on how HTML works.
The Odin Project is a highly recommended resource by most developers. As you learn to become a developer, you work on projects to help solidify your knowledge on a topic. It starts from the beginning of web development and goes all the way to full-stack development.
Once you start your journey, everyone falls into the trap of what to do next. This is a beginner's roadmap for web development that shows how each part is connected and what you can learn next to improve your skills.
Learning CSS is a rocky road, the basics are fine to understand how to make a site look nice. But it can get tricky to understand the deeper you dive into it, as some developers still struggle to understand CSS years into their careers. A beginner-friendly site I picked is w3Schools, as they explain each part in easy to understand way that helped me to get the basics down to start to add design to my websites.
Once you understand the basic CSS, you can start to learn how to structure your website using flexbox and grid. These two layout styles can be tricky to understand as there is a lot to learn and get your head around. But below I have some fun games to help learn them both. They teach you how they work in a fun game-style way that explains how to place sections within the flexbox and grid.
Flexbox Froggy
As you learn a lot of information on a topic you start to forget parts from another topic and that's ok. This isn't a test that you need to memorise everything in each topic, it's knowing that it can be done and having a reference on how to do it. So I have some cheat sheets I use when I forget how something works and need a reference or reminder of what it does.
HTML Cheatsheet
CSS Cheatsheet
Flexbox CheatSheet
Grid CheatSheet
MDN HTML Documentation
MDN CSS Documentation
JavaScript
When you're satisfied with your progress in HTML & CSS, your next challenge is learning how a website can become interactive. JavaScript can be a steep learning curve, as getting to understand the programming concepts and their set rules may take a bit of time to grasp.
Here are some videos I used to learn JavaScript to help understand the basics. The same goes for these videos, take each section bit by bit and pause to try it yourself, as continuous practice is the best way for the concept to stick.
My first video recommendation is the video by Bro Code again. What can I say, he makes good guides. I always come back to his videos for references as he explains each section enough to get a basic understanding without overstaying his welcome. This is the long-form version of his content he also has short-form videos of the same content on his channel Bro Code.
JavaScript Full Course for free 🌐 (2024) by Bro Code
My second video recommendation is from a channel that helped me get into web development. Brad creates a lot of tutorials on his channel on all topics of software development, recently he has started to move some of his content to his website, but still has great content on his channel.
This is the first 12 hours of his paid course, and I feel it's enough to get a strong understanding of the basics of JavaScript.
Modern JavaScript From The Beginning | First 12 Hours by Traversy Media
Videos are not the only way to learn about JavaScript, there is some high-quality content out there and from this content this is some of the material I found helpful with my studies.
With a roadmap I was able to see how everything comes together. Whenever I needed to plan out my next steps this roadmap helped to see the next sections to learn or an alternative way of doing things.
If an interactive approach is more your style Boot.dev has a great course that goes over JavaScript in detail, where you can submit your answers and projects to do to make sure you understand the topic you are working on. Boot.dev is a subscription based website, but all the content on it is free you just won't be able to submit your code or use their helpful AI Boots on the free tier.
JavaScript Info is a book that is converted into a website which is sectioned off into each topic. It starts from starting with JavaScript and dives deep into the language, from understanding what a variable is to working with the DOM to understanding the fetch api.
As I said in the earlier section, it's nice to remember as much as you can, but it's perfectly fine if you forget things as long as you know where to get the information when you need it. Below is a nice cheatsheet with concepts in JavaScript that link to MDN about that topic to get a fresh revision on the topic.
TypeScript
TypeScript is becoming the new preferred language used in organisations, with its type system it makes it easier for developers to debug. It is basically a wrapper on the JavaScript language that has features to help make code more readable and give developers more information on how the code works. TypeScript also helps to debug your code before it's run to prevent errors when the code is executing.
When exploring different topics, I would always come across Hitesh Choudhary channel and when I watched one of his videos I was shocked that not more people have recommended him as he explains topics in detail but in a way that's not too complex and I like to return to his videos when I see a topic im a bit rusty on.
Learn TypeScript – Full Tutorial by freeCodeCamp.org (Teacher Hitesh Choudhary)
Before I started to learn web development, I was learning about Python and I watched a lot of Tim's guides on it. I would throw it on in the background as I was cooking dinner.
TypeScript Full Course - From Beginner to Advanced by Tech With Tim
Matt Pocock is a well-known creator who talks about TypeScript and created this guide on TypeScript on his website. The book on his website guides you on a journey from novice to confident expert, covering everything from installing the TypeScript compiler to advanced type manipulation and real-world application development patterns.
Total TypeScript
If an interactive approach is more your style Boot.dev has a great course that goes over TypeScript in detail, where you can submit your answers and projects to do to make sure you understand the topic you are working on. Boot.dev is a subscription based website, but all the content on it is free you just won't be able to submit your code or use their helpful AI Boots on the free tier.
Boot.dev
Getting your head around TypeScript typing can be a headache in itself, but I found this application that helps with typing JSON for you, as sometimes when you're receiving an api, you don't always know its types when developing, so this tool can come in handy.
Json to TypeScript website
As you can tell by now, I love to use cheat sheets to reference when working on projects. The TypeScript team must feel the same, as on their documentation website, they have a page for cheatsheets.
TypeScript Docs Cheatsheet
FrameWorks
When completing JavaScript or Typescript, you can try your hand at a framework. theses are a set of tools that help developers create more advanced websites without the developer having to create from the ground up. The most common frameworks are Angular, React and Vue.js. As I haven't used Angular as much as the others, I don't have many resources for Angular.
This is another great video guide by Brad on React, where he goes over React from start to finish.
React Crash Course by Traversy Media
This is a quick video on the different concepts in React that Code Bootcamp goes over and explains how they work in React, worth a watch.
Every React Concept Explained in 12 Minutes by Code Bootcamp
I watch Syntax weekly and when CJ created a guide I had to watch it as I had a good understanding of Vue.js, but CJ's guides are usually high quality. I learn a few new things from the video, I didn't know about Vue.js and I highly recommend it.
Modern Vue.js Crash Course 2025 | with TypeScript + script setup + Composition API by Syntax
I found this while listening to a podcast, the creator came on and talked about his projects and this came up in conversation. It compares the different frameworks and shows how they do each part in each framework and shows how the other frameworks do the same part. It's very helpful to transfer over to another framework with this as a guide.
When I was researching React in more depth, I came across this site and found it very helpful.
Angular Documentation
React Documentation
Vue.JS Documentation
Extra Resources
Can I use
33 Concepts Every JavaScript Developer Should Know
906 hand-picked tools & resources for web designers & developers
Markdown Cheatsheet
Try Public APIs for free
I hope you found some new resources to research.
Happy learning.
Top comments (0)