The Ultimate Web Developer Roadmap For 2024

Learning to code in 2024 is not an easy task. There are hundreds of things to learn and everyone is telling you to learn different things at different times. It can be overwhelming. This is why I created the ultimate 2024 roadmap that goes over absolutely everything you need to learn in order to become a web developer in 2024 and beyond.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:46 - FREE Roadmap
01:26 - Frontend vs Backend
02:56 - Frontend Roadmap
13:32 - Backend Roadmap

#WebDevelopmentRoadmap #WDS #WebDev2024

[AyoubNachat-wmno]

- Frontend :
2:58 HTML
3:36 CSS
4:57 JavaScript
6:56 Frontend Frameworks
9:45 Next.js
10:55 Typescript
12:46 Git
12:53 Json
13:00 Security & Testing

- Backend :
13:46 JavaScript/php/c#/rust (recommend: JavaScript)
14:20 Express
14:27 Nodejs
15:27 Database (NoSQL & SQL (Recommend: SQL))

[xavi_]

"Both light and dark mode available" what a G

[dimitmoto]

I think that you don't need to learn all that stuff that Kayle says in the video to land your first job. It' a junior position.
In my opinion to find your first job as a frontend developer all you need to know is :
html, css ( included flexbox and mediaqueries), good javascript knowledge, basic react (basic components knowledge, jsx, useState, useEffect, you must be able to create on your own a todo list and to fetch data from an api and render them on the page), git/github, 1-2 portfolio projects. All that is enough, but you need a lot of practice, you must be able to create on your own simple working things.
The rest of the staff referred to the video are good to build a solid background as a developer and you can learn them after getting your first job or learn them the same period you are applying for jobs.

[ArrowGearhead]

I am seeing comments that are written exactly at the time of the video release. How do you guys write comments without even watching few minutes of the video

[JoelMorrison-gh]

Came for the front end development, stayed for the front end of your hair. That's the real story here!!

[rararayrraracjj]

Incredible video! This entire roadmap is so useful, not only as a resource for what's out there to learn and to manage the journey, but also as a motivator for learners to keep going.

[dand]

The one thing i'd add, CSS... There are two things with this, one is the quirks with your classes, i.e. how some properties bleed through, and may say like display: ???? may effect children. That is half the CSS maze... The other side is then understanding and using CSS selectors and might say this also has implications kind of the same but one for styling (i.e. all a tags contained in style x), but understanding selectors when testing stuff with something like Playwright, and more and more jobs for devs require you to write tests be it Playwright, Cypress and others. If you want something that is solid and works, of course you'll use Playwright... 😊

[diegoh]

You are the best teacher I could ever ask for. Thank you a lot for this road map and all this content!❤

[hvesme]

Year and a half since my first 'Hello world!' I can say i have a solid understanding of all these technologies thanks to a 4 completed courses, 1 personal full stack app and 1 nextjs app written in typescript. Currently looking for a full time job but the fight is tough. So many juniors, so few positions 😞

[lingtoone]

This video came at the perfect time. Thank you so much for posting it!!

[Misathebotter]

we had huge layoffs from the 2021 boom and the web developer area is really hard to get in in 2024, be aware of that if you are considering to start now

[SFgamer]

Need more videos like this. Breaks it down to simple matters.

[sheenabarnes]

This video was exactly what I needed today. Your message at the end really moved me; it was just the reminder I needed to keep pushing forward. Thank you so much for these videos and the roadmap. They have been incredibly helpful. Thank you, thank you, thank you!

[LorsExtremadura]

I felt bad after unsuccessfully trying to make some some exercises (I got nothing) so I slept. I woke up after hours in the middle of night and open YouTube for some soul comfort and COME ACROSS this video. Amazing, that is exactly what I needed. Thanks buddy!

p.s Special Gracias for dark mode. I really appreciate it!

[deanlane]

Hey Kyle, I just wanted to say thanks for all the great content over the years. You have made my learning so enjoyable. Your videos, posts and course are so content rich they have accelerated my learning. I’m really looking forward to joining your early bird NextJS course once it’s ready. Thanks Kyle. When you’re next in Toronto I’d love to pick your brain and shout you a beer. Cheers.

[Salah-YT]

Thank you immensely! Your video provided the best roadmap I've ever come across, and the PDF is truly remarkable. I appreciate your effort. Wishing you a life filled with greatness. Thanks again!

[sethwright]

No mention of web accessibility? Tsk tsk..

Great video overall! I cant emphasize enough about the JavaScript part. Learn as much as you can about JS and TS.. many other things will fall into place as you go. 🎉

[Rakesh]

Thanks for the detailed video. One thing I would add to your list is to read web dev job descriptions for where you want to live/work. For example, some parts of America prioritize backend languages like C# and Go over JavaScript. It may be helpful to first learn a strongly typed backend language before immersing one’s self in Typescript.

[Lovecoolstuff]

Awesome road map. Thanks for putting all the effort for it.

[filippotinnirello]

Thank you Kyle, awesome video as usual