Front End Developer Roadmap 2024

Learn what technologies you should learn first to become a front end web developer.
Watch the full learning front end learning path: • Front End Developer Le...
✏️ This video was developed by ‪@beau‬
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 561

  • @freecodecamp
    @freecodecamp9 ай бұрын

    Learning the technologies covered in this video and course will prepare you to be a front end developer. But there is alway more to learn. Let others know in the comments what other technologies are helpful to learn as a front end developer.

  • @soumadip_skyy_banerjee

    @soumadip_skyy_banerjee

    9 ай бұрын

    ❤❤❤

  • @Khadi-C

    @Khadi-C

    9 ай бұрын

    Do you need to learn all of these technologies in the road map before applying for jobs? I feel like completing the entire road map would take about ten years!

  • @wdcodes

    @wdcodes

    9 ай бұрын

    ​@@Khadi-Csadly, the getting into tech is harder than ever.

  • @freecodecamp

    @freecodecamp

    9 ай бұрын

    You may be able to get an entry level job before learning all of the technologies, especially the ones toward the end of this video. But you will still have to put in a lot of hard work to learn the basics.

  • @osamaasi3251

    @osamaasi3251

    9 ай бұрын

    @@Khadi-C you can make some money as a freelancer after learning HTML and CSS and be able to create simple static websites like a landing page or simple portfolios and you can enhance that by learning a CMS while learning the rest of the technologies.

  • @aladeadeseun5288
    @aladeadeseun52888 ай бұрын

    You guys at Free code camp have done a lot for humanity. Prosperity and history will be kind to you. Keep it up.

  • @rishabhdwivedi8904
    @rishabhdwivedi89049 ай бұрын

    2:58 How the internet works? 3:25 HTML 3:52 Code Editor 4:13 CSS 4:37 JavaScript 5:35 Version Control Systems ( Git) 5:48 Github 6:05 Package Managers 6:26 Bootstrap 6:37 SASS 6:59 React, Vue or Angular 7:16 Tailwind CSS 7:55 Byte (front end tooling solution) 8:18 JS testing tools (Jest, Cypress) 8:42 Typescript 9:21 OWASP 9:29 Restful API 9:39 GraphQL 9:58 Next.js 10:15 Astro 10:43 optimization and efficiency 10:55 Google Lighthouse 11:03 React Native

  • @GabrielaLish

    @GabrielaLish

    9 ай бұрын

    Thank you

  • @rishabhdwivedi8904

    @rishabhdwivedi8904

    9 ай бұрын

    @@GabrielaLish welcome 🤗

  • @EL_OMARI

    @EL_OMARI

    9 ай бұрын

    @@rishabhdwivedi8904 5:04 LLM large language model (chatgp...t)

  • @alinaeem9156

    @alinaeem9156

    9 ай бұрын

    nice thanks a lot😊

  • @faizanansari4889

    @faizanansari4889

    9 ай бұрын

    How much time will it take to learn these all steps

  • @ConnorXCX
    @ConnorXCX9 ай бұрын

    Thank you so much for this video, you came thru right when I was feeling overwhelmed while getting introduced to front-end development.

  • @techwithdipufrom0ton621
    @techwithdipufrom0ton6219 ай бұрын

    Thank you Beau. This video has really helped me visualize and understand the roadmap to front end development

  • @greatfiredragon
    @greatfiredragon9 ай бұрын

    Thank you! I've just learned basics of react, started to learn typescript and tailwind. And felt kinda lost. Now I know on what i will concentrate my resources next^^

  • @bdp-racing
    @bdp-racing9 ай бұрын

    Crazy how much you can learn while eating a bowl of cereal. Thank you for making it easy to learn with these videos

  • @jontar5970
    @jontar59709 ай бұрын

    I woud love to see this for other careers! Such as backend or machine learning

  • @teddy6326

    @teddy6326

    9 ай бұрын

    which one are demands front end , back end or full stack?

  • @AjayKumar-fd9mv

    @AjayKumar-fd9mv

    8 ай бұрын

    Yes we need

  • @wassupbaby8634

    @wassupbaby8634

    7 ай бұрын

    @@teddy6326 Both back end and front end are in demand but front end has slightly more in demand than the backend.

  • @carloschu7127

    @carloschu7127

    7 ай бұрын

    1. Fullstack: Frond end + Back end. 2. Data Sciencie + Data Analyst or Bussiness Analyst 3. Machine Learning 4. AI training. ( This is the inverted pyramid ). To my understanding, small startups, due to limited budget, they will hire 1 to 3 guys to do all those thing interchangeably. But for middle sized to huge companies, AI and Machine Learning are reserved for bachelors with Ph.D in Computer Sciencies. If I am not mistaken. If we have time, we should learn Cibersecurity. But I dont think, companies will allow to get a job at junior level for cibersecurity. At fullstack level, is where the client data starts to compile. This is where the " job " starts. But, as of writting, circa 2023 December, interest rate still high by the FED, if there are mass layoffs by tech companies, they will only keep seniors devop. Wait for the FED lower interest rate, so borrowing become cheaper, and companies start to expand their bussiness, so they will higher more " junior " entry level jobs.

  • @lorettaowusu-ansah7767
    @lorettaowusu-ansah77678 ай бұрын

    Thank you so much for this video. It has really given me a clear headway on this incredible journey. Just started Javascript and I can't wait to learn more 😇

  • @ovskihouse5270
    @ovskihouse52709 ай бұрын

    Im newbie, mean beginner in front end development with Freecodecamp association. I love what you do teaching amazing stuff big thanks 🙏

  • @Ghulatz
    @Ghulatz9 ай бұрын

    Well done my friend, the update this road map provides is really great.

  • @godwinfelicity1747
    @godwinfelicity17479 ай бұрын

    Thank you very much for this. I have been confused on what to do next for a while. This is really helpful.

  • @dominikawojewska3985
    @dominikawojewska39859 ай бұрын

    I'm sorry but this is not a roadmap. It's more of an overview of what's out there with a rough order in which to learn each thing. A roadmap would be more like this: 1. learn HTML and CSS 2. learn some JavaScript 3. learn git 4. build some projects, use git, deploy to web 5. learn DOM manipulation and async JavaScript 6. build more projects 7. pick some CSS preprocessor and/or framework and build some projects 8. pick a JS framework, build some projects 9. learn a state management framework for that framework from point 8., build some projects 10. learn some databases 11. build a project that looks and feels like a real world app, learn anything else that is needed for this project, then repeat

  • @mihaichildesco8276

    @mihaichildesco8276

    9 ай бұрын

    I share the same opinion, and I am disappointed that such a so-called roadmap comes from freecodecamp. I expected something more serious.

  • @sudarrshang8922

    @sudarrshang8922

    9 ай бұрын

    Yes this is what should be happen in real path

  • @funny-ne3ky

    @funny-ne3ky

    9 ай бұрын

    The roam map start like this : html - css are the easy part ... learning JS is the hard one and most of the people quit . If you learn the main programming language of the dev job that are you searching for and you are good , then you have the skills and everything will be much more easier .

  • @ipodtouch470

    @ipodtouch470

    9 ай бұрын

    @@funny-ne3kyfor me js and html where the easy part but making a design and then using css is the hard part for me.

  • @luzaw4957

    @luzaw4957

    9 ай бұрын

    You're mentioning those topics again in the video, except for the database. The database is for backend developers.

  • @a7mdbest15
    @a7mdbest159 ай бұрын

    dude, this came just in time, im already a backend developer, and I know just a little about frontend, specially styling is not my strong point, anyway I needed to know where am I at the moment and what is the direction. thanks a lot for this.

  • @FlezZyt
    @FlezZyt9 ай бұрын

    I started with html and its now been 2 months, I'm learning css advanced and I'm really excited to continue this journey

  • @ItsGabo

    @ItsGabo

    9 ай бұрын

    Keep it upt!

  • @lifotechnologies814

    @lifotechnologies814

    8 ай бұрын

    dont see video and do it in your system 😂😂

  • @Mosaweractivities

    @Mosaweractivities

    7 ай бұрын

    where you learned html and now.css ? I want to learn it too if it's good course

  • @rahrah4610

    @rahrah4610

    6 ай бұрын

    @@Mosaweractivitiesbruh you’re literally on KZread

  • @swara9499

    @swara9499

    5 ай бұрын

    Keep it up buddy

  • @heatherfeather1293
    @heatherfeather12939 ай бұрын

    You guys are awesome! I have learned so much from your courses

  • @Rrr-mw3kb
    @Rrr-mw3kb9 ай бұрын

    Nice! Now we need a roadmap for backend

  • @davidg5898
    @davidg58989 ай бұрын

    Love your courses. As someone who is self-taught, your videos have helped me fill in some gaps and better standardize/organize my practices. The most difficult part of front end for me is the visual design. I can make very intuitive and efficient interfaces, but making them look pretty is never my strong suit.

  • @mujonnj9692

    @mujonnj9692

    6 ай бұрын

    maybe watching design videos on KZread can help you. Like color theory, design basics, ...

  • @davidg5898

    @davidg5898

    6 ай бұрын

    @@mujonnj9692I've been a visual art/design lover all my life but, while I have great appreciation for it, I have limited aptitude for it. I know I'm not the only one, though, and that's why so many companies exist that sell/lease site templates. Everyone has their strengths and weaknesses. It's important to know your own so you know when to seek outside help when necessary, right?

  • @SenorPotato2
    @SenorPotato29 ай бұрын

    This video is amazing! All the relevant info condensed in just a few minutes! You deserve the best! Godddd, amazing!

  • @RhodaOgungbemi
    @RhodaOgungbemi6 ай бұрын

    This looks like a lot but also helps one know where to start and what to research about. Thank you

  • @roachnoorzadh2243
    @roachnoorzadh22438 ай бұрын

    We will really appreciate the same video but covering the Backend roadmap! If anyone knows anything about it, I could use your help! Thanks for the amazing videos and tutorials. I wish you guys the best!

  • @Khadi-C
    @Khadi-C9 ай бұрын

    Thank you for this! My goal is to be a front-end developer! This is great!

  • @rajesh_nambi

    @rajesh_nambi

    3 ай бұрын

    how much progress have u done brother?

  • @dalilah444_
    @dalilah444_6 ай бұрын

    I’m currently studying computer science and following this road map. I’m striving to be employed by the end of this year. 🙏

  • @ak.murodov
    @ak.murodov9 ай бұрын

    Thanks for so useful video. I will also wait for the backend roadmap

  • @boithickums
    @boithickums9 ай бұрын

    Will start following and using this on the side. I start courses 1/2st week of December with UCF for front end web developer

  • @Manojshankar36
    @Manojshankar369 ай бұрын

    Great videos! Could you also create videos for mock interviews in JavaScript, React, Angular, Node.js, Express.js, and cover both junior and senior positions?

  • @Ryguy12543
    @Ryguy125437 ай бұрын

    Excellent video. So clear. Wish I had this chat when i was first learning.

  • @ebenezergodwyll9902
    @ebenezergodwyll99022 ай бұрын

    Thankyou so much. We need a Backend Developer Roadmap.

  • @siriusplayz5871
    @siriusplayz58718 ай бұрын

    Man Love you bro! So grateful to have been blessed with such powerful knowledge. Thanks a TON. Just started on self learning path, only youtube for now... I have written down every single point of this video in my sticky notes, and marked the parts I've learnt/Practiced already... Obviously will keep practicing until the end of time to improve myself and keep learning these tools and technologies that you mentioned. You are GOD-sent... Can never thank you enough. This will definitely help me a lot as I'm hoping to get a job soon. Eternally grateful for this "precious knowledge" ❤

  • @_Dalpat

    @_Dalpat

    Ай бұрын

    How's going buddy?

  • @siriusplayz5871

    @siriusplayz5871

    Ай бұрын

    @@_Dalpat it's going okay brother, got a job... got kicked out.. got another job.. got kicked out again. Applying for 3rd one now... I'm trying to improve myself bit by bit. Currently working on a MERN stack app for doctor's appointment. Wish me luck landing a good job. I just need to improve myself drastically considering the current market situation. Thanks for asking mate ❤

  • @_Dalpat

    @_Dalpat

    Ай бұрын

    @@siriusplayz5871 welcome mate, by any chance are u from india?

  • @siriusplayz5871

    @siriusplayz5871

    Ай бұрын

    @@_Dalpat I'm from Pakistan brother

  • @_Dalpat

    @_Dalpat

    Ай бұрын

    @@siriusplayz5871 Garmi kesi hain bhaiG

  • @952a259
    @952a2599 ай бұрын

    Thanks a lot for your job and for a helpfull content! Already study 👍

  • @ahmedabdelrahman4034
    @ahmedabdelrahman40349 ай бұрын

    Although I'm not a beginner and have a good grasp of most of the technology mentioned in the video, I felt overwhelmed by the multitude of technologies in the video

  • @OccupiedMuffins

    @OccupiedMuffins

    2 ай бұрын

    as you should, its a crash course meant to give you an idea not go in depth about them. Its all about starting.

  • @AbdallahAttiaA

    @AbdallahAttiaA

    28 күн бұрын

    yeah i was too

  • @Android-17
    @Android-179 ай бұрын

    Wow Beau's content after a long time. Reminds me of 2019

  • @darrienjames30
    @darrienjames309 ай бұрын

    This was very informative. Thank you Free code camp !

  • @zainmulaudzi7250
    @zainmulaudzi72509 ай бұрын

    just finished html course today, this video feels like it was made for me

  • @ITseNano_YT
    @ITseNano_YT9 ай бұрын

    Very thankful for this One.. thanks a lot.. Even a nobody 😅like me (for now) got hopes for frontend!!!

  • @Siri_Vicken
    @Siri_Vicken9 ай бұрын

    Your videos have helped me get better but still finding it difficult to get better at JavaScript

  • @pedrolgon108
    @pedrolgon1089 ай бұрын

    Great video. Would be great to see other carrers too.

  • @yahiazakaria-mk6xm
    @yahiazakaria-mk6xm9 ай бұрын

    And we need Roadmap about CyberSecurity

  • @BeepBoop2221

    @BeepBoop2221

    9 ай бұрын

    Good luck with that lol

  • @ResetUE

    @ResetUE

    9 ай бұрын

    This

  • @abhayprajapati4981

    @abhayprajapati4981

    9 ай бұрын

    Yessss

  • @naranyala_dev

    @naranyala_dev

    9 ай бұрын

    yes please

  • @IvanRandomDude

    @IvanRandomDude

    9 ай бұрын

    Cyber Security is too broad of a topic. Need to be more specific.

  • @bernardtalbert6729
    @bernardtalbert67299 ай бұрын

    Thank you for doing this can you also do roadmaps for back-end developer, mobile app developer and cybersecurity expert.

  • @Vaishnavi_KK_
    @Vaishnavi_KK_9 ай бұрын

    Please make a video on road map for becoming a Backend developer as well!!

  • @aronoprisan
    @aronoprisan8 ай бұрын

    God bless you for your work!

  • @duyhung.30
    @duyhung.309 ай бұрын

    cool video. it would be great to see about backend roadmap too

  • @recursion.
    @recursion.9 ай бұрын

    Need a roadmap for Backend development too. 🙌

  • @Minibix
    @Minibix9 ай бұрын

    Interesting video. Hope you'll release one for backend too

  • @hiennguyen-lw6eu
    @hiennguyen-lw6eu9 ай бұрын

    We need backend roadmap .Who agree with me ❤?

  • @lpg2313

    @lpg2313

    5 ай бұрын

    agrees

  • @user-vx3ce3gd2c

    @user-vx3ce3gd2c

    4 ай бұрын

    I agree

  • @srisaranya

    @srisaranya

    3 ай бұрын

    Yes.. we do need one.

  • @aryanambastha4050
    @aryanambastha40509 ай бұрын

    Can you make a video on a roadmap for a Data Scientist? It would be really helpful. Thanks!

  • @arqui002
    @arqui0029 ай бұрын

    This video is very good! Can you guys do more Roadmap videos?

  • @TheOliverluca
    @TheOliverluca8 ай бұрын

    thanks for sharing this information, this guide our path , and the short explanation gives a view of tecnology.

  • @osamaasi3251
    @osamaasi32519 ай бұрын

    Mister if you could try to add more of Kevin Powell CSS courses on the channel like the introduction to responsive design video🤗, thanks a lot for the efforts❤🙏🏿.

  • @sheikhruhul375
    @sheikhruhul3758 ай бұрын

    Thank you so much for giving the information....

  • @DTsertsvadze
    @DTsertsvadze9 ай бұрын

    The fact that nut dropped on his shoulder at the end of the video was the most exciting

  • @dreamisover9813
    @dreamisover98139 ай бұрын

    Thanks a lot for the overview!

  • @paulosoler7173
    @paulosoler71733 ай бұрын

    O comentário em português que você procurava. Após um belo esclarecimento na voz feminina vendo o barbada, é hora de se planejar para uma maratona de estudos. Sucesso a todos!

  • @GODiKING
    @GODiKING9 ай бұрын

    Currently doing my Responsive Web Design Courses.

  • @spicythunder4020
    @spicythunder40209 ай бұрын

    And we need back end version of this. Pls and thank you.

  • @ayaanhussain8416
    @ayaanhussain84168 ай бұрын

    Backend developer roadmap would be so helpful.

  • @hammingus
    @hammingus9 ай бұрын

    That is great and highly helpful! Thanks a lot!

  • @adrian-4767
    @adrian-47679 ай бұрын

    freecodecamp we need a video like this one but for backend development roadmap

  • @ButterflyCreativity
    @ButterflyCreativity8 ай бұрын

    Awesome! Thank you for this! Do you also have one for Backend?

  • @Phronesis1037
    @Phronesis10378 ай бұрын

    hi man! God Bless You! Right now the best thing I can do is to pray, I hope in the future I can meet you in person and find various opportunities to thank you in person. I wish you and your family the best, may God protect you.

  • @KevinCastillo-hh1fn
    @KevinCastillo-hh1fn9 ай бұрын

    will you make an backend developer roadman? it would be great!! thx for the video and resources! :D

  • @abdulsamiabbasi767
    @abdulsamiabbasi7679 ай бұрын

    Very very nice video about the roadmap of the front End

  • @Radu
    @Radu9 ай бұрын

    Very useful. Nice work!

  • @qonitchiwa
    @qonitchiwa9 ай бұрын

    7:54 it's actually 'vite' for those who may not know

  • @aadilmallick911
    @aadilmallick9119 ай бұрын

    19 and already finished the roadmap we came so far fr

  • @JakubGaniaSoftware
    @JakubGaniaSoftware9 ай бұрын

    Nice summary, thanks!

  • @kisen7990
    @kisen79909 ай бұрын

    Would love to see for backend roadmap.

  • @codingSanjay
    @codingSanjay9 ай бұрын

    We need a full stack developer roadmap.

  • @3polygons

    @3polygons

    9 ай бұрын

    Definitely

  • @Matty100

    @Matty100

    9 ай бұрын

    I'm wondering about this as well. I thought MERN stack seems pretty legit but I see most job posts wanting java or c#.

  • @ninjagortech

    @ninjagortech

    9 ай бұрын

    Yeah, MERN stack is good for learning and smaller projects, but it is not very scalable. I personally enjoy using NextJS, any postgresql or MySQL db, and prisma. And depending on how many people are going to use my application I choose between using nestjs or the built in NextJS route handlers. But MERN stack is a great place to start! Job offers with c# are for companies that use the .NET framework. I personally recommend mastering JS/TS first. Hope this helped, good luck on your learning journey!

  • @longrolstral

    @longrolstral

    9 ай бұрын

    Look at jobs sites and see what the common requirements are.

  • @cheesypizzajokes

    @cheesypizzajokes

    9 ай бұрын

    Traversy Media did a 3h+ one for this year, I recommend

  • @arslanshah7472
    @arslanshah74729 ай бұрын

    Thank you so much for sharing your knowledge❤

  • @getrelax893
    @getrelax8939 ай бұрын

    This the Chanel giving best for everyone great job 👏 🙌 👌

  • @saddamahmed.1200
    @saddamahmed.12009 ай бұрын

    Thank you so much , sir!

  • @nicomartina
    @nicomartinaАй бұрын

    I love it! do you guys have one as well for backend ? I'd love that!

  • @fredmurithi9545
    @fredmurithi95459 ай бұрын

    Thank you for the lesson.

  • @paraglide01
    @paraglide015 ай бұрын

    Thanks man, great stuff, very helpfull.

  • @masterbits5751
    @masterbits57519 ай бұрын

    Good Video, now I need a road map por backend

  • @eriikelnino6545
    @eriikelnino65459 ай бұрын

    The Zero to mastery Course (React Developer 2023 on udemy) contains All these Technologies in One Course building a massive project ..i love these roadmap

  • @scoa01aishwarya2

    @scoa01aishwarya2

    9 ай бұрын

    Can you provide link of this course?

  • @thiagofraga3578
    @thiagofraga35789 ай бұрын

    Bora galera BR que vai se tornar Programador em 2024! 🇧🇷🇧🇷🇧🇷

  • @shaikhafeez2609
    @shaikhafeez26098 ай бұрын

    Please provide backend developer playlist also all at one place will be very helpful

  • @Raoul_Moula
    @Raoul_Moula2 ай бұрын

    Thank you so much!

  • @romeumello3248
    @romeumello32488 ай бұрын

    Best content in the web about programming

  • @samadanverysamadanvery2360
    @samadanverysamadanvery23609 ай бұрын

    Thank you for this information

  • @jhosepdavila2661
    @jhosepdavila26619 ай бұрын

    Thank you for this!

  • @user-yu3sq6vf9f
    @user-yu3sq6vf9f6 ай бұрын

    Thanks alot Mr. Beau Carnes💯

  • @littlesuzue
    @littlesuzueАй бұрын

    Hello, I am currently oriented towards software programming. I am very grateful for your instructional video series on front-end and back-end 2024 development. I plan to study your front-end and back-end video series in order to become a full-stack developer, but currently I am unsure of the optimal learning path to take. I would greatly appreciate if you could assist me in creating a reasonable learning roadmap (I already have basic knowledge of programming, data structures and algorithms, object-oriented programming, databases, etc.) Thank you so much!

  • @user-uz8gf1eq2g
    @user-uz8gf1eq2g9 ай бұрын

    I wish the React course on freecodecamp could be revised to functional components.

  • @laizuakram
    @laizuakram8 ай бұрын

    Great advice for beginner's developer

  • @eleah2665
    @eleah26659 ай бұрын

    Good overview. Thanks.

  • @Gadrawingz
    @Gadrawingz8 ай бұрын

    Inspiring as usual!

  • @harshit6106
    @harshit61069 ай бұрын

    One of the best youtube channel

  • @rusul.994
    @rusul.9949 ай бұрын

    Amazing, thank you 🎉❤

  • @Alejandro00710
    @Alejandro007109 ай бұрын

    Can you create a roadmap video of back end development, this was great.

  • @FMATheQuiet
    @FMATheQuiet9 ай бұрын

    This video is not only about front end tech stack, but back end too! This video is about fullstack web dev roadmap!

  • @Kay-qg1vn
    @Kay-qg1vn9 ай бұрын

    A backend engineering roadmap please.

  • @knight7385
    @knight73859 ай бұрын

    Please make a backend developer, devops, data analyst, data engineer, data scentist roadmaps

  • @andreighita8762
    @andreighita87629 ай бұрын

    Do a backend roadmap also please

  • @TomatoTom83
    @TomatoTom83Ай бұрын

    you guys are heroes!

  • @russiatraveladvisor1168
    @russiatraveladvisor11688 ай бұрын

    learn JS, html, css, flex, grid, bootstrap, react, node, git, next, react native, tillwind and 10 more technologies build 5+ projects of your own, learn entire JS and React documentation and this will be not enough to get a free internship, everytime you finally deepen your knowledge you open the site with jobs and the requirement are insane! They ask you to have 12 month of experience and 5 more new techs to know. This roadmap has no end i swear!

  • @clarax_
    @clarax_9 ай бұрын

    love this, thank you

  • @tiio6883
    @tiio6883Ай бұрын

    This already gave me an headache which gets worse everytime I ask myself how much each tool costs 😂 Ty for providing a course for free, really appreciate it

  • @SnobbyLion
    @SnobbyLion9 ай бұрын

    Thanks Beau!