How to Become a Frontend Developer in 2022 (Full Roadmap)

This is how you can become a frontend developer this year.👩🏻‍💻 The roadmap focuses on explaining the basics of each individual technology needed so you can get a extreme basic understanding of each step when you start your journey.
--
💬 JOIN MY DISCORD
/ discord
--
CONNECT WITH ME ON SOCIAL
📸 Instagram:
/ lewismenelaws
🎚 TikTok:
/ lewismenelaws
🐣 Twitter:
/ lewismenelaws
--
0:00 Intro
0:43 HTML & CSS
2:00 JavaScript
3:09 Package Managers & Build Tools
4:02 CSS Preprocessors & Frameworks
4:56 JavaScript Frameworks
5:58 TypeScript
6:42 Serverside Rendering
7:36 Expand
8:13 Outro
Roadmap.sh: roadmap.sh/roadmaps

[@CodingWithLewis]

Thanks for waiting everyone :) what roadmap should I do next?

[@mohamedshahin260]

cyder security

[@mohdfarhannawaz]

Android Developer

[@shiftyishmam9640]

Game developer???

[@CodingWithLewis]

@@mohamedshahin260 Great idea!

[@CodingWithLewis]

@@shiftyishmam9640 Would love to do that!

[@haamidfarhaan1681]

It's been a while since I saw a roadmap like this. Straight to the point, no BS. Keep it up man!

[@azy3929]

There is so much to work on Thanks for this immense introduction!

[@BrixPointC]

I've been having doubts about this career that I chose. Thank you for making these contents. Your contents is a great help to me. Thank you so much Lewis

[@mazanch1863]

Thank you for making this roadmap. I really needed it to clear my doubts, thank you.

[@aghilannathan8169]

When picking front end framework. If you are in doubt, pick React.

[@CodingWithLewis]

Agreed!

[@oldcrowboy]

I'm new and want to learn, my question is why pick React? Is it big in the industry? Or is it easier than others?

[@wellyesorno]

@@oldcrowboy iya bang

[@shahbazkhan-ek7hp]

Its both

[@exotwd]

No. no no. If in doubt, pick Vue

[@user-nm2jf4wo3f]

thanks for the video !! great job

[@riverofcustard5027]

This is awesome, I have experience already but will definitely recommend this roadmap to a couple of friends :)

[@coderboy2346]

This is actually really helpful can we get a detailed game dev roadmap plz your videos are and clear a lot of doubts which one may have in their mind

[@anikamartclair3026]

THANK YOU SO MUCH😃😊😊🙂🙃☺It's the best roadmap, that I've seen!

[@Fridayy.Blessed]

Thank You Lewis Looking forward to venture in into Front end development This is the exact video I've been looking for 💕💕💕💕 Very short, concise and straight forward

[@CodingWithLewis]

Good 😊 I’m glad it helped!

[@gajendra721]

This is what I actually needed to quick start my front end developer journey 😍 thanks Lewis, always grateful to u 🤗

[@CodingWithLewis]

Pleasure is mine :D

[@shihabdsr]

How are you keeping up now?

[@MrNotSoPociu]

For someone who just started a foundation of JavaScript on Odin Project you couldn't have had a better timing with this ❤️

[@CodingWithLewis]

🥰🥰🥰

[@howtopassthat]

how did it go ?

[@vigneshm6922]

1.HTML CSS 2.JS 3.Css frameworks like sass and bootstrap 4. React 5.npm package managers 6.Typescript 7. End , now you're a complete front end developer 🙌

[@CodingWithLewis]

Great analogy :D

[@aayushx1610]

@@CodingWithLewis Which language should i learn if i am complete noob in coding

[@urreallysus]

@@aayushx1610 even though it doesn't have anything to do with Fe dev I would recommend python.

[@user-dd2kc8wo4e]

Css frameworks are not important. Also npm package managers AFTER react?

[@tinabee4195]

@@CodingWithLewis what about Figma

[@eduard289]

1:50 I was thinking about taking my take on html and css, ty for confirmation Good videoclip dude

[@MayukhSaikia]

Awesome roadmap. I will follow this and fill in my gaps.

[@CodingWithLewis]

Thats amazing :)

[@OHIYO]

Thanks for the awesome info!

[@kephiob]

👆👆send a direct message for support and guidance . .

[@kalebwendwessen1537]

great road map the way you explain things is so beautiful keep it up 👍👍👍

[@CodingWithLewis]

Thank you so much 😀

[@lmtr0]

Btw, for better memory and performance, use Tauri instead of electron

[@dipokchandra264]

Happy to see you, my friend! The video is very helpful. I have downloaded the "Eloquent JavaScript" ebook that you said. The book will help me to learn more. Thank you for your information. And thank you for your hard work for us. 🥰🥰🥰

[@CodingWithLewis]

Pleasure is mine Dipok 😊

[@lmtr0]

Btw, Pnpm is disk efficient, It will not allow your dependencies to have a massive size on your disk

[@Fridayy.Blessed]

Great video Lewis 💕

[@CodingWithLewis]

Thank you 😊

[@0xtz_]

Thanks man ❤️

[@CodingWithLewis]

My pleasure :)

[@philangcamu]

Another great video🔥

[@CodingWithLewis]

Cheers 🍻

[@abhishekc1458]

This is Helpful

[@sqwert654]

Preferring Angular for now over React. Uses typescript and I do prefer strongly typed

[@coffeefps]

Great vid! Makes me realize what stage I am now as a frontend developer. Is Devops roadmap already done?

[@mohammedhasan9404]

The best programming KZbinr ever

[@abhishekvyas5981]

Your way of explaining is very nice sir 👍 .

[@CodingWithLewis]

Thanks so much :)

[@engineerlawalhamzatademola4267]

He was like "40 thousand subscribers 😲" and now after a month it's already more double, that what happens when you do your assignment well. Thanks alot for the meaning content

[@yan2410]

Thank you sir

[@citizen320]

My current plan: build a bunch of little projects. stick with plain vanilla html, css, and js until my brains stops hurting. THEN move on to react, next, and node

[@user-te8rg2lv4x]

Did it work out for you?

[@sarapaul9201]

Love ur content

[@CodingWithLewis]

I love you 😍

[@moderngames8892]

Do full stack developer roadmap and also detailed devops roadmap

[@TechleadConsulting]

Can you please make videos on lightening Web Components in Salesforce

[@trentonconner485]

love the video

[@CodingWithLewis]

Thank you 😊

[@varriyateeshhemanth2567]

It would be helpful if you can tell full stack web developer road map.

[@danish7335]

Make a video on Full stack development

[@WeirdDev69]

Please make a video on Blockchain project ideas

[@DevlogBill]

You asked what road map you should create next? Why not make a full stack C# developer road map? I think there would be a lot of people interested in viewing this one.

[@graystuff]

Thanks

[@arundevcricketworld]

Can you share the github repository to prepare for web development

[@tony-go-code]

good guideline

[@kephiob]

👆send a direct message for support and guidance . . .

[@EDC.EveryDayCode]

on the typescript part, what about how svelte dropped it for jsdoc? do u feel like typescript could be reversing its meteoric rise?

[@phonenaing1149]

Hi Lewis, great video. Why do recommend learning Typescript after Javascript if Typescript is more robust? Do you also think platforms like Webflow are making Javasript skills more important than HTML/CSS for FE devs?

[@CodingWithLewis]

I think it's important to understand the use of TypeScript before using TypeScript. :) I think Webflow is good for people who dont want to learn code, but dont bother if you are learning code :)

[@Geomaverick124]

because most code bases are in regular javascript and dont need typescript...also if you learn only Typescript you may wind up having to work with old legacy code. It would be like learning React or Angular before regular javascript

[@lpmc1182]

in terms of projects, what would a job-getter resume look like? how many projects ? what projects?

[@X3NOGLADIAT0R850]

The only two things i use for building websites are react and tailwind

[@sanusihassan7125]

4:25 well actually I built a tool that let's me write sass in tags directly in html

[@CodingWithLewis]

👑

[@nebyudawit4126]

whats your thought on quasar

[@ikhsannudinlathief3515]

Nice video

[@CodingWithLewis]

Thank you so much :)

[@stefanj5823]

Yay thank you so much👁️👄👁️👋🏻

[@CodingWithLewis]

Pleasure is mine Stefan :D

[@danielochoja8507]

I think it's Pinia for Vue.js developers not Vuex

[@IAMCHIDERA]

Can you make a web app with just front end development?

[@KingYhan]

Are JS and Python close enough for me to read the book and still use those JS teaching in Python?

[@aka_slendy]

i hate JavaScript but it's becoming more and more clear that i have to learn it. *sighs* okay

[@kephiob]

👆👆send a direct message for support and guidance . . .

[@lukas.webdev]

You're absolutely right... 😉

[@Techpro99]

Hello when u upload ur own coding courses???I am waiting for ur coding courses.

[@thestreamer1481]

Nice, but there is one "issue" with the order :if someone chose to learn angular then he must learn TypeScript b4 not after angular.

[@kephiob]

👆👆send a direct message for support and guidance . .

[@lukas.webdev]

Good call! 😉

[@abolfazlghaderi4224]

Is there any problem with learning front end while I'm learning WordPress Because I'm student and college has its costs so I have to earn money Can I learn WordPress basics then start learning front end while I'm learning that because just fundamentals gonna take something like more than 6 months just Html Css JavaScript but WP is gonna take something bout 2 to 3 months and some months of marketing advertising portfolio and CV building so then I can actually start earning while I have to learn react tailwind and next js to land my first job and my first job relatively is in low range of salary so I guess WP will help it to enhance What you think ? Can you make a video on it ?

[@thunderskull258]

Python roadmap

[@farukmuhammad9657]

a roadmap for blochain

[@dharsanr6504]

Could you suggest any course to learn web development for beginners?

[@CodingWithLewis]

I can make a vid on that!

[@dharsanr6504]

@@CodingWithLewis 👍👍

[@vivekvitthaljadhav]

Try SolidJS

[@chawaphiri1196]

How many years did it take you to learn all of this stuff?

[@CodingWithLewis]

Still learning :) but so far over 4-5 years but that’s because I learned much more technology! You could do this WAY faster :)

[@chawaphiri1196]

@@CodingWithLewis thank you. I just completed CS50 web programming with python and JavaScript like a month ago. But I still don't feel confident in my abilities because I have to Google things all the time. Plus balancing coding with being a student is hard 😭

[@abdalasad8289]

My head is blowing....

[@kephiob]

👆👆send a direct message for support and guidance . . .

[@rudythorns8411]

I have eloquent js from pdf drive😂

[@Mmvexxx]

Can anyone suggest some Js resources?

[@user-te8rg2lv4x]

Did u find any good sources?

[@podcastcluster]

why is there rusian ln cmd?

[@kephiob]

👆send a direct message for support and guidance . . .

[@developer2522]

i am 1000 like 😁

[@TheShmrsh]

Yeah like um... Front is really so much simpler than back

[@kephiob]

👆👆send a direct message for support and guidance . .

[@laxmanadhikari3989]

Waiting for "how do I become a better programmer"😃

[@TheConstantLearnerGuy]

:)

[@mrs8683]

gîte: i am a joke to you ?

[@hsrtdvhffe]

Sap mm consultant

[@hirokurosaki1368]

You look like Luka Doncic.

[@jesseliverless9811]

It's veeeeet

[@jhonname8180]

The most underrated guy on KZbin

[@CodingWithLewis]

Thank you so much 🥺