Front End Developer Roadmap 2024

[@freecodecamp]

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_banerjee]

❤❤❤

[@Khadi-C]

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]

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

[@freecodecamp]

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]

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

[@rishabhdwivedi8904]

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]

Thank you

[@rishabhdwivedi8904]

@@GabrielaLish welcome 🤗

[@EL_OMARI]

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

[@alinaeem9156]

nice thanks a lot😊

[@faizanansari4889]

How much time will it take to learn these all steps

[@not-me45288]

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

[@dominikawojewska3985]

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]

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

[@sudarrshang8922]

Yes this is what should be happen in real path

[@funny-ne3ky]

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]

@@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]

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

[@jontar5970]

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

[@teddy6326]

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

[@AjayKumar-fd9mv]

Yes we need

[@wassupbaby8634]

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

[@carloschu7127]

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.

[@FlezZyt]

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]

Keep it upt!

[@lifotechnologies814]

dont see video and do it in your system 😂😂

[@Mosaweractivities]

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

[@rahrah4610]

@@Mosaweractivitiesbruh you’re literally on KZbin

[@swara9499]

Keep it up buddy

[@DanyPellerin]

Ignorance is bliss. Looking at this almost makes it sound easy to learn all these thing. Sure basic HTML and CSS is easy (some could even argue css can be challenging). Getting into JS is a different story, learning the foundation, the patterns, the pitfalls, learning some framework is far more challenging than it seems and will take easily take years to master. How to even debug properly, use the dev tools. Accessibility? Did we even mention that? You also need to learn to collaborate and there's a lot of tooling around that, Figma, Miro, etc. Then you need to learn the domain you're working in, the business logic. You also need to learn to write clean code and learn to work with other's people code. And how to refactor legacy code. How to write code that is low coupling with high cohesion? Sounds easy, right? Then you need to learn some architecture, how to design a solution, how everything connects together, the different development environments, UAT, preprod, prod, QA. Ah right, how are we tracking the code and getting customer feedback? Oh and I forgot, what about the methodology, how to be truly agile. I didn't even cover how testing can be challenging. How do you debug those tests, how to write meaningful tests. Oh and the metrics. Then to prepare for interviewing you better know some data structure and algorithms, and be able to communicate your thought process clearly, under pressure. Many other things I'm not even talking about and some I barely scratched the surface. Did I even mention security? Being a developer is a bumpy road and it's extremely challenging. Everything you learn now will be outdated in a couple year so better focus on the foundation. But still, there's just so much to know and it's always evolving. Good luck with all that, hope you get good seniors to guide you gently and not some hardcore PMs with impossible deadlines!

[@davidg5898]

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]

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

[@davidg5898]

@@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?

[@abdrahman-d7]

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]

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

[@AbdallahAttiaA]

yeah i was too

[@bdp-racing]

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

[@ovskihouse5271]

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

[@yahiazakaria-mk6xm]

And we need Roadmap about CyberSecurity

[@BeepBoop2221]

Good luck with that lol

[@ResetUE]

This

[@abhayprajapati4981]

Yessss

[@naranyala_dev]

yes please

[@IvanRandomDude]

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

[@eriikelnino6545]

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]

Can you provide link of this course?

[@Conditory]

Leaving this comment here to mark the start of my journey! Will update! (Today is September 18, 2024)

[@kaoutarrachdi4574]

good luck

[@أيوب-و9ص]

after almost 15 day where you are now at learining

[@Conditory]

right now I am very comfortable with HTML and I'm trying to get better with CSS

[@أيوب-و9ص]

keep going

[@tumishangpraising]

@@Conditory How far are you now

[@qonitchiwa]

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

[@ConnorXCX]

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

[@vamshikrishna2297]

8:42 Typescript is the superset of the Javascript but was mentioned as subset

[@anchuriakshaykumar7118]

Hey vamshi what a sudden suppaai

[@vamshikrishna2297]

😂

[@russiatraveladvisor1168]

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!

[@paulosoler7173]

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!

[@manipurihunabopa]

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

[@Khadi-C]

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

[@rajesh_nambi]

how much progress have u done brother?

[@dalilah444_]

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

[@hiennguyen-lw6eu]

We need backend roadmap .Who agree with me ❤?

[@lpg2313]

agrees

[@RuotKhansprogeny]

I agree

[@srisaranya]

Yes.. we do need one.

[@Adam-kk7nw]

We need skynet to take over 🎉🎉🎉

[@Vaishnavi_KK_]

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

[@RhodaOgungbemi]

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

[@Nastaranosmani]

Спасибо за такой полезный и бесплатный гайд! В наше время найти стоящее видео с бесплатным обучением - нереально

[@codingSanjay]

We need a full stack developer roadmap.

[@3polygons]

Definitely

[@Matty100]

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]

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]

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

[@cheesypizzajokes]

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

[@greatfiredragon]

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

[@PayalGoyal0]

Этот канал действительно шарит в арбитраже. Всегда интересно смотреть

[@Ghulatz]

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

[@beyzanuruğur-w4r]

Спасибо, всё работает. Ждём новых связок.

[@lorettaowusu-ansah7767]

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 😇

[@poilapan]

I believe that there is a technical error at 7:58. The video states that "Byte" is a "next generation front-end tooling solution". It should be "Vite", as in ViteJS, by Evan You and contributers.

[@GODiKING]

Currently doing my Responsive Web Design Courses.

[@thiagofraga3578]

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

[@dialunganavango]

Great video about frontend development roadmap. Consistent practice, engagement with the community and continuous learning really are some great tips but the need of specialization is equally important. I advice to not be jumping from technologies after technologies. Learn something well, get super good at it and scale.

[@Rrr-mw3kb]

Nice! Now we need a roadmap for backend

[@aronoprisan]

God bless you for your work!

[@dorayakiwn6072]

Вот это толковая связка!)Спасибо, поясних просто и удобно

[@aryanambastha4050]

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

[@spicythunder4020]

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

[@recursion.]

Need a roadmap for Backend development too. 🙌

[@DTsertsvadze]

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

[@heatherfeather1293]

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

[@LouiseJosephine]

6-12 months for beginners 😮 i feel very stupid then because I have barely moved through HTML, CSS and just started basic JavaScript...let alone everything else mentioned in the video and it's already been 2 months 😅 I hope I can speed up my learning with this roadmap. Thanks guys!

[@thanuj_rndima]

be consistant. Thats the key

[@iAbdulah0]

It took me 4 months to start with JavaScript 😂

[@DesazMusicYt]

I've been programming for 2 months and all I know how to do in javascript is change innerHTML 🥲 theres so much to learn

[@russiatraveladvisor1168]

you are not alone, i am studding during 2 years, mostly practicing for 6 month gave up and start again. I only start to understand React and Typescript, and there comes 10 more new techs.

[@BeastMode-oz8qc]

How’s progress now? I learn html and css pretty fast but that’s only because I’ve studied it before, I just started again to learn everything I can so I’m definitely learning as much and as fast as I can I started a few days ago and I’m already pretty much done with the fundamentals of html. Moving to css next week. I know it’s going to take a little longer but I am committed to learn want to get a job in web dev

[@roachnoorzadh2243]

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!

[@ImaginmationArt]

I have a personal project that i want to work on so i want to start my frontend developer journey, if i succeed i would comeback in 5 months time, i pray life's fair to me

[@jonamitham]

i am also starting today frontend development journey from today onwards .

[@Steve21_harris]

@@jonamitham gl bro

[@Steve21_harris]

gl

[@misheltanvirhabib2261]

7:55 it's supposed to be *VITE* not *BYTE* 8:42 Typescript is *NOT* a subset of Javascript. You can call it an almost superset of Javascript. Because not all JS code will compile in a TS compiler. Overall a great video. Thanks a lot for the effort.

[@GB-Focus_Programmer-yx9yx]

Thank you. I thought Byte was wrong.

[@romeumello3248]

Best content in the web about programming

[@theakchannels]

Today marks my journey of front end development . will update you later on

[@bambydeluxe]

I am a frontend-developer for about 20 years now... I am not "done learning" yet.

[@marananoobie]

Share some experience as a frontend developer

[@akintekercibasi3189]

​@@marananoobieif you ask how to get a job... just learn html & css, some advanced basics in javascript and then react or vue.... you are ready to apply :) If you have those basics learn how to do templating for magento2 for the e-commerce sector and/or typo3(mainly used in germany/europe) for platforms and you can earn something between 55 to 90k € per anno.

[@godwinfelicity1747]

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

[@ak.murodov]

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

[@ebenezergodwyll9902]

Thankyou so much. We need a Backend Developer Roadmap.

[@adrian-4767]

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

[@rozerdgmre1645]

Comming back here after 6 months from now and i will share my progress on this 6 months !! hope for me to do great and learn good skills 🙏

[@DipakBajracharya-v2h]

Даже если связку закроют - я могу быть рад, что успел 3 раза и все, спокойно себе больше не переживаю, заработал без азарта, но так даже лучше)

[@knight7385]

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

[@ayaanhussain8416]

Backend developer roadmap would be so helpful.

[@ITseNano_YT]

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

[@MuslimbekGiyozov-q4m]

Your course is best one 👍👍👍👍

[@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!

[@AntonKrukov-t9y]

Thank you so much for your helpful tips. I tried them out and managed to get 5 out of 6 - a personal best! Your guidance has given me the confidence to keep working on my trading skills🏠

[@siriusplayz5871]

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]

How's going buddy?

[@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]

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

[@siriusplayz5871]

@@_Dalpat I'm from Pakistan brother

[@_Dalpat]

@@siriusplayz5871 Garmi kesi hain bhaiG

[@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

[@KevinCastillo-hh1fn]

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

[@cliffash1513]

I will come back to this comment in a year to see whether I failed myself or not.

[@ikrammaizi8678]

keep going!

[@raw2057]

Hows it going now ?

[@MaxWell-p9i]

You are still consistent?

[@Chris-b4w8t]

I hope you’ve been consistent!

[@karthikramesh4985]

Hwz it going

[@zainmulaudzi7250]

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

[@a7mdbest15]

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.

[@FMATheQuiet]

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

[@Manojshankar36]

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?

[@ButterflyCreativity]

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

[@Phronesis1037]

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.

[@Siri_Vicken]

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

[@darrienjames30]

This was very informative. Thank you Free code camp !

[@FRESHxLEMONxSLICES]

We need Roadmap for this roadmap

[@Kay-qg1vn]

A backend engineering roadmap please.

[@andreighita8762]

Do a backend roadmap also please

[@bernardtalbert6729]

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

[@kaibeka]

#include int main(void) { . . . .printf("thank you"); . . . . return 0; }

[@Ryguy12543]

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

[@getrelax893]

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

[@gjsrobot4936]

Вообще классный обменник, мне удобно переводить usdt, спасибо ЛАБА

[@aadilmallick911]

19 and already finished the roadmap we came so far fr

[@harshit6106]

One of the best youtube channel

[@SenorPotato2]

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

[@Android-17]

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

[@sheikhruhul375]

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

[@TheOliverluca]

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

[@nicomartina]

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

[@osamaasi3251]

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❤🙏🏿.

[@sonne1958]

In these times of dire needs 🇵🇸 thank you for giving us great content. Hoping for peace everywhere

[@isma-bj8uo]

We need roadmap for cybersecurity and back-end please ! Thanx for All

[@John001Edheke]

Thanks alot Mr. Beau Carnes💯

[@arqui002]

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

[@learn_through_building]

Thank you may god bless you team ❤

[@mujonnj9692]

As an absolute beginner, all these names and explanations made me a bit confused. Hope I understand them better along the way

[@duyhung.30]

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

[@abdulsamiabbasi767]

Very very nice video about the roadmap of the front End

[@dmitryboldyrev7364]

Is it worth to learn frontend in 2024? I'm complete beginner and have absolutely no experience in programming.

[@citylovesme]

Did you finished your learning???