From 0 to Front-End Developer in 12 Months: The Complete Roadmap

The essential skills and latest technologies to become a front-end developer in 2024. We'll cover each skill and the time needed to learn it.
Download the FREE roadmap PDF here: mosh.link/frontend-roadmap
✋ Stay connected
- Complete courses: codewithmosh.com
- Twitter: / moshhamedani
- Facebook: / programmingwithmosh
- Instagram: / codewithmosh.official
- LinkedIn: / codewithmosh
🔗 Other roadmaps
• From 0 to Back-End Dev...
📚 Tutorials
• HTML Tutorial for Begi...
• JavaScript Tutorial fo...
• TypeScript Tutorial fo...
• Git Tutorial for Begin...
• React Tutorial for Beg...
• Next js Tutorial for B...
• JavaScript Unit Testin...
• React Native Tutorial ...
📖 Chapters
00:00 - Introduction
00:23 - Basics of web development
00:56 - How long it takes to become a front-end developer
01:10 - The complete front-end roadmap (PDF)
01:33 - Basics of front-end development
03:33 - Version control (Git)
03:53 - TypeScript
04:18 - UI libraries/frameworks
05:41 - CSS preprocessors
06:22 - CSS frameworks
07:01 - Automated testing frameworks
07:43 - Meta-frameworks
08:20 - Mobile development
#programming #webdevelopment #frontend #coding

[@programmingwithmosh]

📕Download the FREE roadmap PDF here: mosh.link/frontend-roadmap 👍Subscribe for more useful videos: goo.gl/6PYaGF

[@shreyaschillal]

✓HTML : structuring ✓CSS: CSS Prepocessors(SAAS),CSS framework (Tailwind,bootstrap) ✓JavaScript': Js framework (React, ✓Typescript: static typing ✓Git (vs system)& GitHub (collaboration) ✓Atomated Testing: Jest & Vtest ✓Meta framework: Next.js(React applications).

[@Mubashar783]

you mean you it ?

[@abdulraufmirani]

Thank you so much, Mosh! I hope you can create a similar video outlining a roadmap for becoming a Full-Stack Developer as well. 😃❤

[@larbesabdellah7079]

The most comprehensive explanation, I'm a new subscriber, I liked how simple and clear the roadmap was

[@user-qe3fp1hv8n]

Mosh, you're truly one of the best and most unique content creators I've ever come across. Thank you so much for everything you do! 🙏

[@amankosariya9979]

Please make a video on what a full-stack developer actually does in a company, like how they get projects and deploy them. Or any other type of work a developer should also do, show in video. On KZbin, a software engineer uploads a video of a day in the life of a software engineer or web developer, but they just show his daily routine. So please tell what actually a developer do . Thankyou

[@bogdanpetre4181]

the 'day in the life' videos only show you that because in most cases filming what you're actually doing for work and making it public is forbidden by companies through nda's or other kind of legal documents. What a developer is 'actually doing' you won't be able to see unless you are one or live with one. In any other case there will be filters. I don't think Mosh is going to be able to show you that either, as every developer job is pretty diverse in daily activities and everyone's day can look drastically different.

[@amankosariya9979]

Oh, that's why SE 's 'A Day in a Life' type video fast-forwards their office work. Because it violates the company rules . But I'll wait to see what mosh view

[@programmingwithmosh]

That's an interesting suggestion I never thought about before. I'll have to see if/how I can present that in a video!

[@amankosariya9979]

​@@programmingwithmosh waiting for that video. 🤞

[@IamAtashi]

@@programmingwithmosh I would eagerly wait for you to upload it soon :))

[@Muheshemsu]

Thanks a lot, especially for the road map

[@user-tt8ek6rw5g]

So excited! Let's go1

[@jorgeperalta1973]

The Oracle is on it again!!!💯💯💯

[@nemeesview]

The best channel I've ever met. Easy to understand bcz you use very simple English. Highly recommend

[@user-ty4he7no7m]

Wow thank you Mosh, please go for the Back-end ASAP please.

[@jaimeallende9290]

Thank you for the road map. This video just came from heaven!!!

[@LANRIE-DEV21]

Thanks, Mosh, really appreciate this🙏🙏🙏

[@BeginnerBitsHQ]

wow! thank you for your hard work Mosh

[@kzmn941]

Awesome. Waiting for a roadmap for backend developer too.

[@riceburnerthenpc]

do the one for backend soon

[@FinishLine1984]

This is extremely helpful. Thank you 🙂

[@Saibentos]

Sometimes you feel like saying thank you to a people who help when you were in need isn't enough. Sir Mosh , may God continue to bless you. Thank you🙏

[@mistersir3185]

Hell yeah! Thank you Mosh! I hope you can do a similar video for Back-End Development. Best, Mr.Sir

[@programmingwithmosh]

Sure thing!

[@codegenius757]

@@programmingwithmosh Please Mosh! Make a video about Full Stack Development too. I will wait so

[@mistersir3185]

@@programmingwithmosh you’re simply the best!

[@user-lf4pb8jq3i]

The way of presenting video makes more interesting the colors and video effects makes feels simple to learn things

[@TareqAhmed072]

All of your videos have so much acceptancy to the aspirant programmers people, Mosh! Hope to have a similar video on a roadmap for becoming a Data Scientist/AI & ML Engineer.

[@ranspst6476]

Awesome , thank you..

[@muchamadfaiz2391]

its outstanding explanation video as always mosh!! please make it for backend development too

[@siddanthimaukthika9323]

Thank you so much for the road map!. I hope can you create a similar video for becoming back-end developer and also for Full-Stack Developer as well!.

[@dangerjoystick2784]

thanks brother!!!!!! it was very helpful

[@techthief3278]

Thank you so much, Mosh! I hope you can create a similar video outlining a roadmap for becoming a Backend & Full-Stack Developer as well.

[@programmingwithmosh]

It’s coming!

[@IamAtashi]

Thanks, at the same time, you are the best programmer,teacher,youtuber and a human that many look up to you! :)

[@HMOsman-ml9qp]

This is the most straightforward web development roadmap....

[@user-nv9mq7ls3s]

Thanks Mosh ❤️

[@svag_g]

These are the tools to become frontend developer. Learning to design sites is also important according to me. I know html , css, js but I still struggle cause I don't know where to start. There are many sites which provides UI templates but I think it's good to know how to design.

[@JawaCodePro]

Thank you

[@alemumulu]

Thankyou very much Mr.Mosh you are real showing the clear map of frontend developer

[@MDTALKIES]

Great video sir ❤❤

[@kurosai0]

Thanks for this great video mosh! i hope you make a video on sass soon ❤

[@erraticgraphicdesign7189]

thank you sir mosh, i needed this road map

[@dadi_vlogs3254]

Hello Mr. Mosh, I think you underestimated the period of learning these technologies. Because, all in all, the whole period is 12 months and this period is dedicated to having a solid knowledge of JavaScript as far as I know at least. In any, have a bucket of fun to you for your presented efforts.

[@saeedabdollahi7405]

great as always ❤

[@GrowWithme66]

Thank you for a beautiful content ❤️ And create a video for full stack developer roadmap ❤

[@programmingwithmosh]

Will do!

[@godhandinfamous]

this map will guide us to the promise land, thank you Mosh

[@codewizetv270]

Thank you ❤

[@Yourboyspeedruns]

Still in 9th grade and after 2 months i got the concept of html and css and made a clone of KZbin so i am currently on track 👍

[@martapfahl940]

Nice keep it up!

[@Yourboyspeedruns]

@@martapfahl940 thanks man hope you achieve any goals you have as well

[@yeabuca]

You got it👍

[@anilpandey581]

Tell me channel name bro ..

[@aruniagam9442]

SuperSimpleDev​@@anilpandey581

[@hv6411]

Awesome!

[@sabuein]

Thank you.

[@claudiap2298]

Thank you😊

[@idealist21]

I would appreciate your answers regarding the potential of doing a project or getting a job at the end of 12 months. Thank you. The video was very good.

[@user-bw2qh6hy1w]

Thank you boss

[@user-yn7jg5to3u]

hey Josh, thanks a lot for all your wonderful videos! it would be wonderful, if you could also make a Springboot course. thanks!

[@rezaeyvazi.ir1992]

❤❤❤❤you are fantastic

[@TechTrails8715]

Good job ❤❤

[@user-ko1cw6mv4q]

Awesome ❤

[@dilshadanimationmovies769]

Nice Guiding ❤❤

[@rashmikadk6796]

Hope you will bring a video about backend too❤

[@programmingwithmosh]

Yes, soon! Stay tuned!

[@ashahab007]

Dear Mosh, loved your videos & eagerly waiting for your new videos. Didn't get the pdf from the description box link.

[@-riazkhanVlogs143]

Very interesting content dear sir

[@user-gn3uc9sh7f]

amazing roadmap according to you which is better for mobile development react native or flutter

[@ademineshat]

I wouldn't say react native over flutter but it is a good way to start as a web developer.

[@NullPointerExceptionHighSchool]

Hey Mosh, thanks for the roadmap, I wish I knew this before, but I quit web dev mid-js and moved to game development, I now know C++, but there is nothing I can do with it besides fail leetcode problems. What should I do next?

[@MostafaAhmed-kl2yw]

Firstly, Thanks for your effort even in this video or even for courses. Secondly, Can you please have more courses for Data Science like R, Power BI, and Tableau?

[@userrr22244]

Just in time !

[@Al-ameenAbdulazeez]

Thanks man

[@sankarpsa4478]

Awesome and nice video for a newbies whom they are so interested in FrontEnd Development. Additionally make a Detailed roadmap for a Python Full Stack Developer if it is possible. It will be helpful for many of them including me.....

[@Mr18_meow]

Worth subscribing.

[@Jov3r]

Thanks #Mosh

[@carsonjamesiv2512]

NICE!😃👍

[@syuhadaramadhan8246]

Mosh, how about learning Data structure and algorithm? Has the front end dev never learned data structures and algorithms?

[@toneranger]

Thanks Mosh. Wen you say "2 weeks" etc. how many hours a day would that be ? Thanks for a great video

[@rufaromugabe7357]

Did you manage to come up with a flutter course as promised earlier, is there hope of getting it any soon ???

[@veechannel.]

Please do for cyber security. This is the best video so far

[@midnightdemon9157]

hello mosh ❤ i was wondering is front end development worth learning now after the Ai thing and is it a good paying career ?

[@gawd6261]

Please make a video on resume tips and tricks in the software industry

[@ponleuphon544]

hope I can do it for my future (FullStack)

[@user-qm5fv3fb8v]

Hi Mosh 👋 I am Hossein from Iran. I want to start learning react. Which course do you have? On your website, one course was react 18 for beginners. Another one is mastering react 16 Which one should I learn?

[@harryindaclub89]

Thanks a lot for your Video. I learn at the moment JS and it blow my mind. When I see your roadmap…I think I give up😅😢

[@privatprivat7772]

what about Data structures & algorithms, do you need them for frontend, or only for backend?

[@meditatingmind9018]

Thank you. Can you do it for DSA with JavaScript too.

[@zealousprogrammer4539]

Please do a similar roadmap for Backend Developer, I understand code logic but bad at design. Everybody does even experience programmers like the create of Redux and Core developer of React had problem centering - haha Thank you!

[@chrisduo1098]

hi mosh , i cant open the site of link that include the roadmap about Front-End Deo , is it a problem only for me

[@streamingluffyofficial7005]

10Q! I love it

[@Pareshbpatel]

Nice Frontend Developer Roadmap. Thanks Mosh. I hope to use it to fill in the gaps in my skill set. {2024-06-08}

[@suiiii784]

Hi Sir, just started to watch your videos and I have an interest in programming but as there are so many videos I dont know where to start

[@BobChief]

Adding a backend roadmap would be helpful. Thumbs up!

[@programmingwithmosh]

Done! It's now on my channel. kzbin.info/www/bejne/hZaoeX2dr9aGZ80si=W2f9fM-l95QIhVG-

[@ThomasKelvinWorkspace]

Hi Josh, thank you for all you do, Pls do you have roadmap for backend developers?

[@programmingwithmosh]

Yes, just published yesterday!

[@MahdiMahdavi-ru2dk]

داداشم دمت گرم

[@erkansaid8081]

Thanks for another great video. When you say, for example, 2-weeks of learning, does that assume 1hr a day for 2-weeks, or 8 hours a day for 2-weeks?

[@userrr22244]

yes that`s also my question and the most critical one?

[@programmingwithmosh]

I'd say 3 to 5 hours a day.

[@userrr22244]

@@programmingwithmosh i`ll do it thanks a lot

[@Saibentos]

Woow! We're still waiting for Roadmap in backend even full stack developer also

[@erkansaid8081]

@@programmingwithmosh great, Thanks Mosh!

[@arFarhaan]

Please add similar videos for BACK END

[@EvolutionWendy]

Yep he said it's in the pipeline

[@programmingwithmosh]

Will do!

[@rahulchourasiya4148]

Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website

[@GGaemer]

can u do one on cyber security? I want to get into it from ground 0 but dont know what to do or where to start

[@bayardkudy2453]

Please Mosh, is having a degree in software engineering actually of any importance in a a developer's journey? If yes how is it important and how one conciliate college studies with online courses at the same time? By the way thanks very much for the work you have been doing so far. You are really a great soul.

[@devbasit]

Whats your next course? I have given poll for spring boot. What you have decided finally?

[@RusiruAbilashX]

Sir can you made road map like this for ai engineers ,cyber security engineers and others related job roles please 🥺🥺🥺🥺🥺🖤🖤

[@Idowu_Adeleke]

What's the proper way to use Sass in VS code in 2024 please. Because most of the contents out there are outdated.

[@zeeshan3703]

@Mosh please make a video on the backend roadmap. Thanks.

[@programmingwithmosh]

Done! Watch it here: kzbin.info/www/bejne/hZaoeX2dr9aGZ80si=W2f9fM-l95QIhVG-

[@kavyaseeramsetty5620]

very helpful

[@Edris-fy7th]

Cute mosh, love you so much ❤❤❤❤❤❤❤❤

[@siamakut]

How did you creat this video? I mean which software has been used to creat this video, I like the idea behind that ❤

[@petevichy9068]

Nice Advice :-)

[@SayedMohmmadHashimyan]

Please make a video on future of front end developers with the emerge of AI

[@selvarajr7580]

Hi @mosh, the pdf is not received to my email after so many tries. Can you share a link or something?

[@ahmadjehangir1356]

I love the MONKEY SOUND and JUMPS when MOSH was talking about PROGRAMMING LOGIC. I don't understand the CONNECTION but it is Hilarious 😅😅

[@jayashan_b]

please do a video on Back-end as well. thank you so much

[@programmingwithmosh]

Working on it! Coming next week!

[@user-dj6vj7hy3m]

I don't receive the roadmap

[@secondchance598]

I thought I didn’t either but you have to check “all mail”.