The Ultimate Web Developer Roadmap For 2024

Поделиться
HTML-код
  • Опубликовано: 9 май 2024
  • FREE 2024 Web Dev Roadmap: webdevsimplified.com/web-dev-...
    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:
    FREE 2024 Web Dev Roadmap: webdevsimplified.com/web-dev-...
    JavaScript Simplified Course: javascriptsimplified.com/?utm...
    React Simplified Course: reactsimplified.com/?...
    TypeScript Simplified Course: courses.webdevsimplified.com/...
    Learn CSS Today Course: courses.webdevsimplified.com/...
    Node.js Course: • Full Stack Web Develop...
    🌎 Find Me Here:
    My Blog: blog.webdevsimplified.com
    My Courses: courses.webdevsimplified.com
    Patreon: / webdevsimplified
    Twitter: / devsimplified
    Discord: / discord
    GitHub: github.com/WebDevSimplified
    CodePen: codepen.io/WebDevSimplified
    ⏱️ Timestamps:
    00:00 - Introduction
    00:46 - FREE Roadmap
    01:26 - Frontend vs Backend
    02:56 - Frontend Roadmap
    13:32 - Backend Roadmap
    #WebDevelopmentRoadmap #WDS #WebDev2024

Комментарии • 334

  • @tiger_of_kai
    @tiger_of_kai 3 месяца назад +116

    "Both light and dark mode available" what a G

  • @rara2ra2yrra3racjj2
    @rara2ra2yrra3racjj2 3 месяца назад +19

    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.

  • @AyoubNachat-wm4no
    @AyoubNachat-wm4no 3 месяца назад +317

    - 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))

    • @kuldeepgogoi9270
      @kuldeepgogoi9270 3 месяца назад +11

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

    • @duztv5370
      @duztv5370 3 месяца назад +1

      Thanks man

    • @deshi-sukuna
      @deshi-sukuna 3 месяца назад

      You forgot to mention GO which an extremely powerful and most recommended backend language of modern day. And on top of that very beginner friendly.

    • @worldoftheweb
      @worldoftheweb 3 месяца назад

      if you want to learn from the basics, you can join us.

    • @vickys40
      @vickys40 3 месяца назад

      Ily

  • @diegoh987
    @diegoh987 3 месяца назад +15

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

  • @sheenabarnes6485
    @sheenabarnes6485 3 месяца назад +2

    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!

  • @deanlane
    @deanlane 3 месяца назад +2

    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.

  • @theisoj
    @theisoj 3 месяца назад +6

    I need this! Thanks Kyle as always! 👍

  • @lingtoone3719
    @lingtoone3719 3 месяца назад +5

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

  • @filippotinnirello
    @filippotinnirello 3 месяца назад +2

    Thank you Kyle, awesome video as usual

  • @Lovecoolstuff
    @Lovecoolstuff 3 месяца назад +1

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

  • @thinhnguyen1287
    @thinhnguyen1287 3 месяца назад

    Watched so many of your videos and every single one is great.
    Thank you so much!

  • @FlashDazz
    @FlashDazz 3 месяца назад

    Thanks For Your Roadmap !! , I actually following it .

  • @buraxta_
    @buraxta_ 3 месяца назад +12

    You do an amazing job 🎉🎉

  • @tranvuhao6246
    @tranvuhao6246 2 месяца назад

    Thank you so much for roadmap, bro.

  • @isaacagboola9652
    @isaacagboola9652 3 месяца назад

    Woooowww!!! This is amazing. Thank you so much

  • @TheTechSurfPodcast
    @TheTechSurfPodcast 3 месяца назад +1

    Informative content! Thank you !

  • @MonkeyD_Luthy
    @MonkeyD_Luthy 3 месяца назад

    Always appreciate the guide

  • @FirasMohamed96
    @FirasMohamed96 3 месяца назад +3

    Great content as always thanks! - Would you please make a course and projects on Headless CMS (Strapi)?

  • @iyimogajosephnana1801
    @iyimogajosephnana1801 3 месяца назад

    Thank you for this. You are a matchless Teacher.

  • @___-----___youtube_.location
    @___-----___youtube_.location 3 месяца назад

    Wonderful resources, thanks a lot!
    Hair is looking good B)

  • @LouisVanAntwerp
    @LouisVanAntwerp Месяц назад

    Brilliant Kyle! much appreciated

  • @SFgamer
    @SFgamer Месяц назад

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

  • @user-on4ov9kd2o
    @user-on4ov9kd2o Месяц назад

    Thank you so much for your effort and all content in general 🤩, it is super helpful to move on 🙏

  • @ibrahimwayou4614
    @ibrahimwayou4614 3 месяца назад

    This is what I was looking for, thanks a lot.

  • @user-kc7uk6vf1z
    @user-kc7uk6vf1z 3 месяца назад +2

    Great timing 👏

  • @abdellahi03
    @abdellahi03 3 месяца назад

    Thank you Kyle, Thank you so much, you are really a nice and great person indeed

  • @dand4485
    @dand4485 3 месяца назад +7

    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... 😊

    • @jasperburchfield2028
      @jasperburchfield2028 2 месяца назад +1

      CSS was hard enough to learn in the old days, but they keep adding extra layers of complexity.

  • @TheMasculineUrgency
    @TheMasculineUrgency 3 месяца назад

    I've been following you for about 3 years now and I have to say you are amazing.

  • @codybarker9942
    @codybarker9942 3 месяца назад

    Thank you for doing this!

  • @jameralist
    @jameralist 3 месяца назад

    Bro this is amazing, this would be so helpful ❤

  • @ikazak
    @ikazak 3 месяца назад

    thanks for the content!

  • @alimihakeem841
    @alimihakeem841 3 месяца назад

    Thanks for sharing. Your content is valuable

  • @thewrongascendancy
    @thewrongascendancy 3 месяца назад

    Thank you for this!!! 😁

  • @MChiemelie
    @MChiemelie 3 месяца назад +2

    Thank you very much man.

  • @tinongnjong1305
    @tinongnjong1305 3 месяца назад

    Amazing, everything said in details, now I've got.to put in the work.

  • @LorsExtremadura
    @LorsExtremadura 2 месяца назад +1

    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 RUclips 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!

  • @aloklimbasiya6781
    @aloklimbasiya6781 3 месяца назад +1

    Thankyou for explaining it clearly

  • @vsnei
    @vsnei 2 месяца назад

    thank you for this knowledge brother

  • @Finnigan527
    @Finnigan527 2 месяца назад

    i liked this video, and now i'm gonna check the roadmap and i hope i will follow this. thanks man you inspired me

  • @sagardutta1057
    @sagardutta1057 3 месяца назад

    Thanks for the roadmap

  • @klarcgamer206
    @klarcgamer206 27 дней назад

    amazing video, the best i have seen in Roadmap videos, and believe me i have seen a LOT, i am confused how this thing is free, great work man.

  • @natarajan.p6544
    @natarajan.p6544 3 месяца назад

    Thank you for the road map bro

  • @1st.Ugeeee
    @1st.Ugeeee 3 месяца назад

    Super grateful to you man.

  • @inhocsignovinces8061
    @inhocsignovinces8061 3 месяца назад

    Fantastic roadmap!

  • @mmuzamil2890
    @mmuzamil2890 27 дней назад

    Thank you❤

  • @Valzeth
    @Valzeth 21 день назад +1

    Great video!!

  • @user-xv2pt3et1f
    @user-xv2pt3et1f 18 дней назад

    thank you ❤

  • @dimitmoto1716
    @dimitmoto1716 3 месяца назад +22

    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.

    • @Xraxus_
      @Xraxus_ 3 месяца назад +7

      Thank you.
      After watching this video I got a big FOMO and felt bad.
      I'm currently learning React and can actually do all these things.
      I haven't started applying yet, as I need to build my portfolio.
      So, your words actually made me feel better about my skills :)

    • @dimitmoto1716
      @dimitmoto1716 3 месяца назад +5

      @@Xraxus_ No problem, I wrote that from my personal experience, at least for my country ( where there are not so many jobs like usa, germany, uk etc). When you build the projects for your portfolio ( they don't need to be very fancy), start applying to jobs even if you don't know all the staff they ask. You don't have anything to lose. If they call you for an interview you win even if they will not offer you a job, because you ll get free interview practice and useful experience for the future interviews.
      Also do connections with people that are already web developers for example friends or people you meet in programming meetups. In my country for most entry level positions they don't do job posting, but they rely on referrals. I have a friend who got his first programming job as a programmer ( backend developer) without knowing html, css, javascript. He knew only Java and core java, not java frameworks. He just had a friend in a company where they needed a junior developer. Then he learned the Spring framework basics in his first 2 months as part of his job training ( and he was paid the same time) .

    • @Handlebrake2
      @Handlebrake2 3 месяца назад +2

      ​@@Xraxus_I can do these things too
      But don't feel like it's enough!

    • @chetan9533
      @chetan9533 3 месяца назад +2

      ​@@Handlebrake2 it's very common to not feel ready ❤. Don't stop learning, but also know that there'll always be something you feel you need to know "to be ready". New tools/frameworks/libs are releasing so frequently. So don't make too many plans which require you to "be ready" first.

    • @mohd.kayfshaikh6587
      @mohd.kayfshaikh6587 3 месяца назад +1

      @@dimitmoto1716 mate, which country are u from ?

  • @dudesimulator218
    @dudesimulator218 3 месяца назад

    Thank you ❤

  • @bitashahsavan7993
    @bitashahsavan7993 3 месяца назад

    Waaaooo,that was fullof expreince and that video is so practical ,i had mistake on my roadmap and now i gonna come back and focus on js again and get deep
    I really appretiate to you ❤❤❤❤

  • @kamaleshparmar1352
    @kamaleshparmar1352 3 месяца назад

    Thank you 🙏🙏

  • @autoinsider4158
    @autoinsider4158 3 месяца назад +205

    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

    • @justcurious1940
      @justcurious1940 3 месяца назад +29

      Maybe youtube timing is not that accurate.

    • @lucascampos4237
      @lucascampos4237 3 месяца назад +15

      youtube doesnt store the moment you upload a video, it kinda guess with the timing of the interations. I might be wrong

    • @clevermissfox
      @clevermissfox 3 месяца назад +12

      Maybe he gives early access to patreon members or course members .

    • @Thelukkest
      @Thelukkest 3 месяца назад +8

      Maybe just bots

    • @wlockuz4467
      @wlockuz4467 3 месяца назад +14

      You can setup early access so that your members or Patreon supporters get early access to videos compared to normal viewers

  • @odebroqueville
    @odebroqueville 3 месяца назад

    Thanks, Kyle.

  • @adhishankar4701
    @adhishankar4701 Месяц назад

    thanks bro i really appretiate it well done

  • @Salah-YT
    @Salah-YT 3 месяца назад +15

    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!

  • @dermensch2553
    @dermensch2553 2 месяца назад

    Awesome bro... thanks!

  • @schauschau2552
    @schauschau2552 3 месяца назад +1

    i started learning again and you are honestly my savior with learning from the very basics!

    • @worldoftheweb
      @worldoftheweb 3 месяца назад

      If you want to learn from the basics, you can join us.

    • @salitechworld3716
      @salitechworld3716 3 месяца назад

      ​@@worldofthewebhow bro I am interested

  • @user-ls4nn4jn9q
    @user-ls4nn4jn9q 3 месяца назад

    Amazing ! ❤❤

  • @user-gd8sd8dd8f
    @user-gd8sd8dd8f 3 месяца назад +44

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

  • @flashback4588
    @flashback4588 3 месяца назад +1

    Aspnet for backend and angular for frontend has been my favorite stack for years

  • @ipi_.
    @ipi_. 3 месяца назад

    Thanks !

  • @kenson_csofficial8246
    @kenson_csofficial8246 3 месяца назад

    Thanks Man for the Video and resources u gave, it's price less ...

  • @neozoid7009
    @neozoid7009 3 месяца назад +1

    soo perfect for 2024

  • @mitreedi
    @mitreedi 3 месяца назад +1

    Percentage of companies using nextjs for be maybe 10% , companies using java or php for be 200% and if someone want a full framework for fe angular for example is a great choice because react is just another library

  • @carlandres3319
    @carlandres3319 2 месяца назад

    Thanks 🙏💯🎉

  • @ibrahimakalilsacko1009
    @ibrahimakalilsacko1009 3 месяца назад

    So wonderful thanks a lot

  • @benibabic2647
    @benibabic2647 3 месяца назад

    Awesome video!

  • @aytacg26
    @aytacg26 3 месяца назад

    One of my favorite channels. I can say he is great to get very nice info and tutors

  • @zonegamma8197
    @zonegamma8197 18 дней назад

    thanks a lot

  • @mustafayazlmc3973
    @mustafayazlmc3973 3 месяца назад

    thanks man

  • @ramisultana3325
    @ramisultana3325 3 месяца назад

    Thanks a lot for your content. I want to ask you is redux essential in learning react.

  • @tripunify
    @tripunify 3 месяца назад +6

    not ultimate, not just for 2024, other than that, it makes sense.

  • @tegacreatives1673
    @tegacreatives1673 3 месяца назад

    Honestly I think the best thing to do is lookup job descriptions and learn the most common technologies that are requested

  • @musazahoor
    @musazahoor 3 месяца назад

    appreciated Dear!!! peace

  • @Rose-gb1ku
    @Rose-gb1ku Месяц назад

    Thank you so much

  • @TayambaMwanza
    @TayambaMwanza 3 месяца назад

    Even if one is going to learn React picking up Angular is also a good idea, theres still a ton of jobs out there, Angular is having a Renaissance and also since its a stricter framework, when you get to React it might help you with your intiution on what solutions you might need, just my 2 cents.

  • @jjdjdkdjfj174
    @jjdjdkdjfj174 3 месяца назад +1

    Hi Kyle, Does your React simplified Beginner course teach me enough to move onto Backend and next or it's mandatory to take the complete version?

  • @fuligjimmy8181
    @fuligjimmy8181 Месяц назад

    omg thank you

  • @meheraabarvy4134
    @meheraabarvy4134 3 месяца назад

    Thank you

  • @syncosota
    @syncosota 3 месяца назад

    thank you kayal

  • @user-lb4xt2vr9o
    @user-lb4xt2vr9o 3 месяца назад +1

    this is the most helpful roadmap out of all the other stuff out there this is guy amazing and really thought full !! a lot more to learn from you thank you !!!!!!

  • @1CreativeDeveloper
    @1CreativeDeveloper 19 дней назад

    I feel like learning something about performance, seo and accessibility is something that is overlooked and that frontend devs should spend more time on these basic concepts, which can be useful to know about no matter what frameworks they en up using.

  • @kvngaeinie9941
    @kvngaeinie9941 3 месяца назад

    You are amazing♥️

  • @peteryoung3524
    @peteryoung3524 27 дней назад

    "(By learning those frameworks) in one year you will be a completely different person" true, and in one year the job market will also be a completely a different one.

  • @jubayerhasanasif3726
    @jubayerhasanasif3726 3 месяца назад

    Well, I'am following this.

  • @deatho0ne587
    @deatho0ne587 3 месяца назад +1

    Frontend
    Skip CSS for the most part, using something like UnoCSS. Can edit it after to make it more custom
    - Suggestation for UnoCSS since Tailwind is basically CSS in the HTML and UnoCSS gives you something decent looking out the box
    - Maybe later going into Tailwind and/or Bootstrap
    React and Angular have roughly equal in enterprise, React is generally liked better by most DEVs though
    Would almost recomend TS out the gate, you can use pure JS then have a bit type safety which is great for practice
    - Depending what is in your IDE, TS will not complain enough to matter either
    Backend - No real order on this
    Languages - Java, C++, Rust, Go
    - These are based on what I have seen in different enterpise solutions
    Some FE/BE Frameworks
    - Astro - closer to FE, can also use most likely any FE framework in it
    - HTMX - some extra HTML stuff to handle most of the JS, likes getting HTML instead of JSON
    Would also look into WebAssembly

    • @Default_-ij5oc
      @Default_-ij5oc 3 месяца назад +5

      Terrible advise knowing fundamentals of html css is a must

    • @deatho0ne587
      @deatho0ne587 3 месяца назад

      Think of UnoCSS as a corporations project style.css and the user is a new Dev, meaning even Hello World will have some basic style to it.
      First request of the new Dev is either a new component or a new page. Two most important parts is can they get data from an API (JS) and can they have it display at all on the page (HTML) in a logical way? If not the CSS does not matter, if so make it pretty.
      The biggest issue I have had with CSS is other DEVs complex changes that could have been a few lines instead of a few 100. Think some of it comes from the mentality of "how to center a div".
      CSS key things to learn
      - Do not do anything, your site will be responsive (kevin powell). Another way to say is do as little as you can with CSS
      - Learn display grid and flex with the things that go with them, this should cover most layouts.
      - Height should almost never be touched unless it is on an image. Font-size should handle the size for the most part
      - There are other things to learn example font-size, width, padding, margin. There is also things like px, em, rem, ch
      - Look for modern CSS meaning post 2020 though

  • @lolikpof
    @lolikpof 2 месяца назад

    htmx, _hyperscript, scss, sanic - all u need (assumes knowledge of html, javascript, css, python)

  • @krishkumar6488
    @krishkumar6488 Месяц назад

    it is worth downloading the roadmap it's good

  • @sethwright2518
    @sethwright2518 3 месяца назад +7

    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. 🎉

    • @edhahaz
      @edhahaz 3 месяца назад

      "Wow that animation is sick! this guy rocks... but can I use it blind" - probably at least one guy

    • @richardmellor3833
      @richardmellor3833 3 месяца назад

      it's law in some countries
      @@edhahaz

  • @Mrfrontend
    @Mrfrontend 21 день назад

    I feel some of the advice in this video is not global. For example where I live NextJS / Remix are generally considered must haves. Additionally, I don't feel CSS is optional and should go hand-in-hand while learning HTML. Great video, like the effort you put into the content of this video.

  • @Dziejkoo
    @Dziejkoo 3 месяца назад

    Bro you are best teacher I've ever seen but still missing redux/ts tutorial from you

  • @arcanelore168
    @arcanelore168 2 месяца назад

    The jacksons keep up!

  • @rpf23543
    @rpf23543 3 месяца назад +1

    I’m missing Ruby on Rails in the frontend section. It still plays a key role and is an awesome framework, even though not as hyped as react. But why always following the hype? With rails 7 it is more up to date than ever and does not need to hide…

  • @tomaszkula9077
    @tomaszkula9077 3 месяца назад

    thanks

  • @Jedimastur01
    @Jedimastur01 Месяц назад

    As someone who is COMPLETELY shifting career fields, can anyone shed some light on the importance of getting "certificates" to put on your resume/profile from places like udemy/coursera? I've really been digging the way Kyle explains things and would love to take his courses but didn't notice anything on the subject of certs, so I am genuinely curious! Thank you so much for the info you put together here for people like me trying to switch up life!

  • @sunsetdxnny
    @sunsetdxnny Месяц назад

    Going to be following this roadmap starting now 03/29/2024. I’m going to be doing this part time hours with while taking the Computer Science program at WGU part time hours too and working full time. Let’s see if I can get my first dev job and have my BSCS by my 25th b day in Jan 2026. Let me know y’all’s path too, we can keep each other accountable 💪.

    • @cuanokingstephenict12b63
      @cuanokingstephenict12b63 Месяц назад

      lets go bro, i started learning web dev april 1. im a computer engineering student tho haha

  • @VladislavSnegurov
    @VladislavSnegurov 3 месяца назад

    Hey Kyle, could you recommend a course for front end and backend security?

  • @cavemutt
    @cavemutt 3 месяца назад

    I know most of what you've recommended, and I've applied for almost a hundred jobs without even so much as an initial interview. All the jobs that say "entry-level" still ask for 3+, 5+ or more years of paid experience in some form of development. Frustrating to say the least. I'm working on a better portfolio and personal website in between what I have to do to survive until I get a dev job.

  • @hansschenker
    @hansschenker 3 месяца назад +1

    You need at least 4 years to be comfortable with with all the topics you mentioned in the video! I started seriously in 2016 and I am still learning!

  • @Misathebotter
    @Misathebotter 3 месяца назад +25

    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

    • @shivamexplainer1122
      @shivamexplainer1122 3 месяца назад +1

      Why is it hard for web developer?

    • @Pure_117
      @Pure_117 3 месяца назад

      @@shivamexplainer1122probably bc the hiring pool is bigger compared to other programming jobs

    • @neoruss3553
      @neoruss3553 3 месяца назад

      @@shivamexplainer1122 Market to saturated. To much people for much less positions. Programming is not dead, but i would get into something else than front end - web.

    • @jimbernard3289
      @jimbernard3289 3 месяца назад

      @@shivamexplainer1122 Oh a few reasons, AI, job cuts, Obama...

    • @salem8909
      @salem8909 3 месяца назад

      Very competitive and shortage of positions (This mainly applies to entry level).@@shivamexplainer1122