Learn Frontend Development in 2024 (7 levels)

In this video, I’m going to break down how to learn frontend web development in 2024 through 7 levels of growth.
Coding Newsletter: thecommit.dev
References:
Eloquent Javascript: eloquentjavasc...
Roadmap.sh: roadmap.sh/
Lodasher Exercise: github.com/com... (github) or replit.com/@ka... (Replit - fork it to edit the code)
JavaScript30: javascript30.com/
00:00 Introduction
00:41 Level 1 - Get Started
03:54 Level 2 - Get Better at JavaScript
06:26 Level 3 - Build Lodash Functions
07:33 Level 4 - Build Frontend Projects with HTML, CSS, & vanilla JavaScript
09:14 Level 5 - Build Frontend Projects with a Popular UI Framework
11:09 Level 6 - Build a Mini Component Library
12:35 Level 7 and beyond...
14:48 Conclusion

[@Johntitor-no8vb]

Added to "rewtatch once in a while" playlist

[@codeathlete]

halfway through the video I realised that it has 217 views and not 217K. damn! Crazy editing and a really nice breakdown of the learning path.

[@kan_adachi]

Thanks!! Appreciate the encouragement :)

[@TheGamingTitan]

The quality of this video is insane for your earlier videos. Can’t wait to see how far you go, but thanks for this video! As someone trying to get more familiar with front end and become great at it, this is a great resource!

[@kan_adachi]

It’s my pleasure!! Thanks for watching 😊

[@tylerbray7693]

Would love a video on part 6, that’s an interesting suggestion I haven’t heard anyone else suggest before!

[@PvsTheWorld]

Didnt expert soo much value from this video , wow man thank you

[@shalidhub]

ohhh man!!!1 why I didn't find you several months ago. I'm from a medical background and have been trying to learn front end development for few months but haven't actually learn that much. but I know this video will help me to become a good front end developer. Thanks for this video.

[@kan_adachi]

I wasn't posting several months ago! :P I'm glad you found it helpful. LMK if you have any Qs.

[@kan_adachi]

Sorry friends, I open the video with "how to learn web development", but I should have said "How to learn frontend development". Although, this is still pretty relevant to anyone who wants to learn web development as a whole... It's not comprehensive for that though. Maybe that'll be a topic for another video :)

[@TheRealMxnny]

I really appreciate this! I used to do a lot of web development, but then college kept me busy with learning other things like Python, Java, etc. Now that I'm returning to the world of web development, this video was just what I needed to get back on track. The web development landscape is constantly changing, with new tools and libraries emerging daily. This video provided a great overview and will help me catch up on what I need to know. Thank you so much for creating it! You've earned a sub from me!

[@kan_adachi]

Thank you!

[@harrisbuild]

Thanks for the unbelievable value per minute in this video!

[@tylerbray7693]

Love the content thanks for posting!

[@levikamado9608]

DAMN the editing goes crazy

[@kan_adachi]

Is it too distracting? I'd appreciate any feedback you have!

[@levikamado9608]

@@kan_adachi nahh man it's dope

[@joel9909]

thank you This is beautiful I will work on all you've pointed out

[@haya3sa]

thank you so much for this guide! i'm a newbie self-taught and really appreciate your points on which part not to deep dig deep/worry yet. definitely will follow your guide! sometimes i go around and my algo got lost into back end dev stuffs. haha. took me awhile to know the difference in front and back end language/framework/tools.

[@kan_adachi]

Glad it was helpful!

[@WealthWhisper39]

I had been looking at a lot of videos that covered that subject but yours is by far the best. apart from this your editing is op Kan. The story telling in editing is really good

[@kan_adachi]

Thanks for the kind words!

[@91dgross]

Yes we also want you to share walkthrough vanilla js videos too plz. thank u. have a happy day

[@kowshiqkattamuri8977]

Hello Kan. I am from India. I feel I am lucky to have your video on my feed. You gave a very good clarity about the actual complexities involved along with the techniques to tackle them. Thank you from the bottom of my heart. Please keep uploading such videos. All the very best.

[@kan_adachi]

Thanks for the encouragement! Great to have you here.

[@user-dk6nc8jo5z]

Needed lodash, and this video is most useful for me 🎉🎉

[@kan_adachi]

Awesome! Happy to hear that.

[@user-dk6nc8jo5z]

@@kan_adachi Now you are replying to comment bro, after some days you will not have the time to reply. You are having that quality. All the best to reach that level bro.

[@TheAthleticCoder]

Great Video! Gives me great insight for someone who just started to learn coding!

[@kan_adachi]

Glad it was helpful!

[@gokulnath7681]

Hello kan, please also make videos on exercises for building mini components library 12:28 . Your video is a gem💎. Along the ways also continue to let us know those valuable resources like eraser blogs.

[@kan_adachi]

Thanks! Will keep in mind for the near future!

[@tapumojumder6090]

quite helpful. I want to learn component UI library with you

[@lastspoil5547]

I beg you, please do a video showing us how to design a mini component library like a button or text input.

[@kan_adachi]

Thanks! I will definitely get around to this soon :)

[@lastspoil5547]

@@kan_adachi this the type of content no other dev is making rn. You can change the world with your teachings!

[@wilder152]

Hey man this video really helped ! You really deserve more subscribers

[@wilder152]

Remember me when you're famous

[@bigisma-il5927]

Thanks bro

[@nested9301]

iwill add learning figma and other design tools , security and seo and Accessibility

[@kan_adachi]

Those are all definitely an important aspect of the job! Good point about design tools - those definitely have a learning curve, although most jobs I've been in haven't required me to actually design anything :)

[@shreyasvaidya9552]

Hey Kan amazing video. I do want to see a good guide on how to build a mini component UI library.

[@kan_adachi]

Great! I'll definitely get around to this in the near future!

[@91dgross]

Yes we would like a video on the breakdown to the solutions for lodash exercises. Thank you making this video and giving me confidence i need to move forward. I have been learning html css and javascript for the last 2 years but i took a 9 month break after getting through js basics and dom manipulation stuff. Recently learned git and github and did some crash courses on html and css and js but and everything is just coming back to me after that 9 month break. im gonna take ur advice and start building projects and on the side im also gonna work on those first 5 chapters of eloquent js just to solidify things with js.Does this sound like a good plan to you? im just ready to start building things that other ppl can use so that i can finally get hired even for maybe a start up. i still know i have a lot to learn (intermediate js as well as front end and back end frameworks) but i think i can wing that stuff for now and get a job after i get a few front end projects on my portfolio.

[@kan_adachi]

Great to hear from you, and welcome back to the coding journey! I always recommend Eloquent JavaScript as a foundational starting point for anyone who's serious about learning the language. It's not the only book or resource out there that's good, but it's certainly one of my favorites and what I personally used as well. So I like your plan! "wing it" and learn as you go is generally a good strategy, as haphazard as it sounds (as long as your actually biasing towards action and building stuff consistently). Weirdly enough, it's hard to construct a perfect roadmap for yourself because you don't know what you don't know. What I do recommend is looking at resources online to see what kind of learning roadmaps people have created for themselves and use that as a loose guideline. Build projects that target concepts along that learning roadmap and you should be generally in the right ballpark. You'll need to make adjustments and stuff for yourself... but you can also just try asking chatGPT what concepts or projects you should build based on what you already know. That might not be a bad idea although I've never tried it myself... doesn't hurt to try! But at the end of the day, deciding to code day-in and day-out is the 20% that yields 80% of the results. So just focus on setting aside time for yourself and coding and you'll go places! Feel free to check back in with any questions!

[@91dgross]

@@kan_adachi thank you! you the best!

[@sagyr]

Yoo kan do that level 6 building a mini component please please, i wanna learn it .

[@kan_adachi]

Awesome! I’ll keep this in mind!

[@shinigamee6886]

Great work man ❤

[@kan_adachi]

Thanks!

[@hasanatahmadzai9079]

Thanks a bunch

[@kan_adachi]

You're welcome!

[@danielarthur8080]

His.a great resource to rely on. How do i engage you one on one

[@kan_adachi]

Thanks! You can email me - [e-mail]

[@lordsnow4029]

What do you think about flutter.. for entry software engineering job

[@kan_adachi]

I don't have any data off hand, but I don't think flutter jobs are very common place, I'd turn to something like React/web development, iOS, or android. But I think web development is still the most rich ecosystem of the 3 I mentioned.

[@lordsnow4029]

@@kan_adachi thank you my guy 😜

[@sangwookim5551]

Do you consider front end developers as software engineers? Honestly curious about your view

[@VishnuVijai_]

It's a subset of Software Engineering. 😊 Even Java and Dot net have frontend paint functions and UI/UX.

[@kan_adachi]

Great description - I agree with @VishnuVijai_. These days, people use the term "software engineer" and "software developer" interchangeably. So if you consider FE developer as a subset of software developer, then yes.

[@sangwookim5551]

@@kan_adachi thats a clean way of putting it. Thanks !!

[@xilluminati]

Step 1: Hire Devin

[@AloneBoy-qr2jj]

😂

[@rickyminj2327]

Plz make a video on a frontend project !!!!!!!

[@kan_adachi]

What kind of project would you like to see?

[@arcsolomon6360]

im stuck with html and css

[@kan_adachi]

What are your specific questions? Maybe I can point you in the right direction :)

[@harshjha7543]

Hello sir Will you become my mentor to become frontend developer? I have zero coding knowledge I want to start my developer journey from 10th april

[@kan_adachi]

Love the ambition! I can't be your personal mentor on a 1-1 basis, but I'd love to chat to see how I can help. Can you email me - [e-mail]?

[@harshjha7543]

@@kan_adachi yes sir I definitely contact you through mail on 9th april

[@views-re2om]

after devin ai demo i lost intrest in learning coding :(

[@kan_adachi]

I have a video on this coming out next week! I get the anxiety though, these are uncertain times!

[@nirajkasar]

how much time its taken to cpmplete all this ???

[@kan_adachi]

It depends on the person really! If you dedicate 90 minutes a day to coding, I think you can get through this within 30 to 45 days with a pretty thorough understanding of everything. Just a rough ballpark guess!

[@vineetagarwalCode]

hey kan can u please leave your discord link down below lets catch up ?

[@kan_adachi]

Email me, I'm not on Discord much! [e-mail]

[@mustafebiko]

l support you subs thank you

[@kan_adachi]

Thanks for the support!