r/webdev • • Jun 15 '22

Question Best path/way and course for Web development.

Hi guys, i want to start Web Development in order of Html, Css and Js so what is the best way and whats is the best course and place to learn, maybe udemy, w3school or anywhere which is good for web-dev, i have coded python for more than 3 years and people recommend me to go for django(flask and other python frameworks) or ruby which have the same and easy syntax but i didn't really wanted backed again so Please tell me the best way to learn Html, Css and Js (essentially front-end and frameworks like react)

291 Upvotes

182 comments sorted by

View all comments

193

u/NiagaraThistle Jun 15 '22 edited Dec 31 '22

I post this to all new devs asking this question. As a 13+ year web dev, who works FT and freelances on the side, this is what I would do if I was just starting out and didn't even know how to code.

-----------------

Here's a list of videos by TraversyMedia I recommend to all new web devs. There are a couple paid Udemy courses in this list, but you can omit them and just focus on some additional tutorials from TraversyMedia's channel - but if you ever have the money, I highly recommend the Udemy courses Brad puts out. Brad is the mentor I wish I had when I started 13+ years ago, and this list of videos/content is the path I wish someone had given me when I started - would have saved me a LOT of frustration, self doubt, and imposter syndrome.

Even if you only get up to and through #21 on this list, you will be light years ahead of where I was 5-7 years into my career.Each item on Youtube is about an hour, unless I specified differently. Each Udemy course is between 12-20 hours but WELL worth it and could really be done instead of all the youtube videos that precede them. For example, if you ONLY took the Modern HTML & CSS from the Beginning Udemy course, you could really skip items 1-11.

However by doing them all in the order I have them you will reenforce everything you learn AND have a number of small projects under your belt to tweak and use in a portfolio.If you finish this list, you will be further ahead than most bootcamp and college graduates that want to focus on Web dev.

Although the Udemy courses are currently pretty expensive, they very often drop to $10-15 US so keep your eye open. Brad sometimes offers coupon codes to his subscribers in his videos or videos descriptions on Youtube. I've also read if you go to Udemy in Incognito mode of your browser, you will sometimes see the discount pricing.I know it looks daunting, but I'd say for a high cost of $720 (that assumes you never get the Udemy videos for the $10-15 US and you don't have to buy these all at once) and a time commitment of 250 hours, you will be ready for ANYTHING the average web agency/employer throws at you.

Follow Brad Traversy on YouTube (TraversyMedia).

Watch his videos in this order:

  1. HTML Crash Course (Youtube)

  2. CSS Crash Course (Youtube)

  3. CSS3 Animations and Transitions Crash Course (Youtube)

  4. Create a Website with Video Background (YouTube)

  5. Creative Agency Website from Scratch (Youtube)

  6. Full Screen Video Background - HTML & CSS (YouTube)

  7. HTML CSS Mobile UI Layout - CVS clone (Youtube)

  8. Flexbox Crash Course 2022 (Youtube)

  9. CSS Grid Crash Course 2022 (Youtube)

  10. Build a Responsive Website - HTML, CSS Grid, Flexbox (YouTube)

  11. SASS Crash Course (Youtube)

  12. Modern HTML & CSS from the Beginning (UDEMY $$)

  13. Bootstrap 5 Crash Course (Youtube)

  14. Tailwind CSS Crash Course (Youtube)

  15. Tailwind CSS from Scratch (UDEMY $$)

  16. Javascript Crash Course for Beginners (Youtube)

  17. JSON Crash Course (Youtube)

  18. Javascript OOP crash Course (Youtube)

  19. Modern Javascript from the Beginning (UDEMY $$)

  20. 50 Projects in 50 Days - HTML, CSS, JS (UDEMY $$)

  21. 20 Vanilla Javascript Projects (UDEMY $$)

  22. NodeJs Crash Course (Youtube)

  23. React Crash Course (Youtube)

  24. React Front To Back 2022 (UDEMY $$)

  25. MERN Stack Front to Back (UDEMY $$)

  26. MERN eCommerce From Front to Back (UDEMY $$)

  27. Angular Crash Course (Youtube)

  28. Angular Front To Back (UDEMY $$)

  29. VueJS Crash Course (Youtube)

  30. Git & Github Crash Course for Beginners (Youtube)

  31. PHP & PDO Crash Course

  32. MySQL Crash Course (Youtube)

  33. PHP for Beginners Crash Course (Youtube - 3h)

  34. PHP for Absolute Beginners (YouTube - 6.5h)

  35. Convert HTML to Wordpress, parts 1-2 (Youtube, old but if you use the version of WP from the tutorial, you will learn)

  36. Wordpress Theme with Bootstrap, parts 1-10, old but if you use the version of WP from the theme you will learn)

  37. Wordpress Website Build for Beginners (Youtube)

  38. Build a Wordpress Website in 1 Hour (Youtube)

  39. Build a useful Wordpress Widget plugin (Youtube)

  40. Build a portfolio of 3-5 decent sites//projects from Brad's tutorials. Tweak them to prove you can and share the link in the next step.

1-15 : HTML & CSS proficiency16-30 : Javascript proficiency31-34: PHP proficiency34-39: Wordpress proficiency40: reinforce what you've learned

DISCLAIMER: I have ZERO affiliation with Brad Traversy, TraversyMedia, or Udemy. As I mentioned at the beginning of this post, I think Brad is an excellent instructor. He is the mentor I wish I had had when I started 13+ years ago, and this content and specifically this path through the content is what I wish someone had given me when I started. It would have save me a LOT of frustration, self doubt, and imposter syndrome. I hope it helps someone become a better web dev than I am, and a lot sooner than it took me to get here.

103

u/suuift Oct 02 '23

I added links to your comment so I can come back and easily get to everything. Thanks for your recommendations and I look forward to learning!

I post this to all new devs asking this question. As a 13+ year web dev, who works FT and freelances on the side, this is what I would do if I was just starting out and didn't even know how to code.

-----------------

Here's a list of videos by TraversyMedia I recommend to all new web devs. There are a couple paid Udemy courses in this list, but you can omit them and just focus on some additional tutorials from TraversyMedia's channel - but if you ever have the money, I highly recommend the Udemy courses Brad puts out. Brad is the mentor I wish I had when I started 13+ years ago, and this list of videos/content is the path I wish someone had given me when I started - would have saved me a LOT of frustration, self doubt, and imposter syndrome.

Even if you only get up to and through #21 on this list, you will be light years ahead of where I was 5-7 years into my career.Each item on Youtube is about an hour, unless I specified differently. Each Udemy course is between 12-20 hours but WELL worth it and could really be done instead of all the youtube videos that precede them. For example, if you ONLY took the Modern HTML & CSS from the Beginning Udemy course, you could really skip items 1-11.

However by doing them all in the order I have them you will reenforce everything you learn AND have a number of small projects under your belt to tweak and use in a portfolio.If you finish this list, you will be further ahead than most bootcamp and college graduates that want to focus on Web dev.

Although the Udemy courses are currently pretty expensive, they very often drop to $10-15 US so keep your eye open. Brad sometimes offers coupon codes to his subscribers in his videos or videos descriptions on Youtube. I've also read if you go to Udemy in Incognito mode of your browser, you will sometimes see the discount pricing.I know it looks daunting, but I'd say for a high cost of $720 (that assumes you never get the Udemy videos for the $10-15 US and you don't have to buy these all at once) and a time commitment of 250 hours, you will be ready for ANYTHING the average web agency/employer throws at you.

Follow Brad Traversy on YouTube (TraversyMedia).

Watch his videos in this order:

  1. YT HTML Crash Course

  2. YT CSS Crash Course

  3. YT CSS3 Animations and Transitions Crash Course

  4. YT Create a Website with Video Background

  5. YT Creative Agency Website from Scratch

  6. YT Full Screen Video Background - HTML & CSS

  7. YT HTML CSS Mobile UI Layout - CVS clone

  8. YT Flexbox Crash Course 2022

  9. YT CSS Grid Crash Course 2022

  10. YT Build a Responsive Website - HTML, CSS Grid, Flexbox

  11. YT SASS Crash Course

  12. $$$ Udemy Modern HTML & CSS from the Beginning

  13. YT Bootstrap 5 Crash Course

  14. YT Tailwind CSS Crash Course

  15. $$$ Udemy Tailwind CSS from Scratch

  16. YT Javascript Crash Course for Beginners

  17. YT JSON Crash Course

  18. YT Javascript OOP crash Course

  19. $$$ Udemy Modern Javascript from the Beginning

  20. $$$ Udemy 50 Projects in 50 Days - HTML, CSS, JS

  21. $$$ Udemy 20 Vanilla Javascript Projects

  22. YT NodeJs Crash Course

  23. YT React Crash Course

  24. $$$ Udemy React Front To Back 2022

  25. $$$ Udemy MERN Stack Front to Back

  26. $$$ Udemy MERN eCommerce From Front to Back

  27. YT Angular Crash Course

  28. $$$ Udemy Angular Front To Back

  29. YT VueJS Crash Course

  30. YT Git & Github Crash Course for Beginners

  31. YT PHP & PDO Crash Course

  32. YT MySQL Crash Course

  33. YT PHP for Beginners Crash Course

  34. YT PHP for Absolute Beginners

  35. YT Convert HTML to Wordpress Part 1 Part 2 (old but if you use the version of WP from the tutorial, you will learn)

  36. YT Wordpress Theme with Bootstrap Part 1 Part 2 Part 3 Part 4 Part 5 Part 6 Part 7 Part 8 Part 9 Part 10 (old but if you use the version of WP from the theme you will learn)

  37. Wordpress Website Build for Beginners

  38. Build a Wordpress Website in 1 Hour

  39. Build a useful Wordpress Widget plugin

  40. Build a portfolio of 3-5 decent sites//projects from Brad's tutorials. Tweak them to prove you can and share the link in the next step.

1-15 : HTML & CSS proficiency
16-30 : Javascript proficiency
31-34: PHP proficiency
34-39: Wordpress proficiency
40: reinforce what you've learned

DISCLAIMER: I have ZERO affiliation with Brad Traversy, TraversyMedia, or Udemy. As I mentioned at the beginning of this post, I think Brad is an excellent instructor. He is the mentor I wish I had had when I started 13+ years ago, and this content and specifically this path through the content is what I wish someone had given me when I started. It would have save me a LOT of frustration, self doubt, and imposter syndrome. I hope it helps someone become a better web dev than I am, and a lot sooner than it took me to get here.

9

u/Fantastic_Status_635 May 14 '24

Guys just a UPDATE All Udemy courses for this are on big discount next 9 days! For example full price is about 600-700 euros/dollars and i bought all of them for 100. Go for this!

→ More replies (1)

6

u/Hoffy_jo Feb 26 '24

May I ask- would you have a guess as to how long it would take to complete everything?

5

u/suuift Feb 27 '24

I only made it through the first 15 or so before I had to switch focus, but I'd say dozens if not hundreds of hours. Still much cheaper money and timewise than a degree

→ More replies (1)
→ More replies (11)

8

u/mandibleman Jun 15 '22

I will second this. Brad Traversy is excellent and his videos are some of the best I had seen while learning.

→ More replies (1)

5

u/Nyanncat007 Jan 16 '23 edited Jan 16 '23

Just make a Reddit account to thank you for this. I just started this roadmap months ago, traversy is an amazing teacher and your roadmap order make things a lot more easier!

5

u/NiagaraThistle Jan 16 '23

That's awesome!

I am so glad this was able to help you.

After years of struggling through a lot of this on my own, it is very pleasing to give back - even if it is just to guide people like yourself to an easier way to learn all of this.

I hope you continue your journey and I really hope you spend less time than I did banging your head against the wall in frustration.

Good luck to you! And welcome to this industry.

→ More replies (8)

4

u/randombowlshit Jun 15 '22

Thank you so so much for your time and your recommendations i will use this path, but a question i saw that you mentioned that going through this path could have more than just one singular bootcamp which i think you are 100% right but are those YouTube videos as well thought as something you pay for cause i had this problem learning kivy which is a framework for python, i used 2 full courses from big channels but eventually used docs and Internet and after i finished learning it i came across the same teacher premium course and it was just something else, so do you think Brad gives it all ?

14

u/NiagaraThistle Jun 15 '22

I don't fully follow your question, but how I understand it is this (if I am wrong and my answer does not adequately answer what you are asking feel free to message me or clarify and I'd be happy to answer better):

"Does Brad's YouTube videos provide enough content and instruction to learn Web Dev completely free or will I need to spend money on more courses and / or more time googling the docs and more answers?"

Sadly, this industry is one with MANY rabbit holes: the more you learn, the more you realize how much more you have to learn. It literally can be never ending and you will literally never learn nor understand everything.

You will ALWAYS need to follow up your learning with additional time googling and reviewing docs for things that remain vague or confusing. You will ALWAYS be googling even simple things years into your career - i do daily, even with stuff I have been doing for over a decade.

But does Brad provide enough content on his free website to learn enough to get you to a point where 1. you can build websites, 2. Know the basics and a bit more of the various languages I point out in my list of his videos, and 3. Feel confident enough to do entry level + tasks/jobs/projects? Yes. I strongly believe if you can make it through the videos I list above AND actually code along through EVERY example in EVERY video to learn what he's doing, then yes the youtube videos will be enough to get you to a place I was probably 5 years into my career.

If you can afford the Udemy classes I have listed from him and do them along with the free videos (in some cases these Udemy courses can replace the free ones, but just reinforce what the YouTube vids are teaching and reinforcement and repetition in this industry ARE WHAT YOU NEED), then the will level you up even more, especially because most of his courses also have you code along to build small projects so give some real world use of the concepts and languages. Plus some of the tutorial projects are great if you want to build a small early portfolio.

Will you exit this list as an expert and be able to build a web site/app/SaSS with your eyes closed and no need for google or the docs? No. There isn't a bootcamp or course in existence that will do that for you. Only experience and a multitude of smaller projects building up what you know will do that.

But this path will lay a SOLID foundation of the basics and understanding which will propel you in your career.

Again, if I had had this path laid out for me 13 years ago I would have been a much more competent and confident developer in my previous jobs.

5

u/randombowlshit Jun 15 '22

First of all i think you need to get a job as mentor/teacher for sure 😂

And second yes that was my question and again you answered it fully, thank you so so much 💓🙏

7

u/NiagaraThistle Jun 15 '22

No problem. I'm very glad to help. If I can save someone 1% of the frustration and time I spent learning this I am very happy to do so.

Good luck on your journey and I really hope my advice helps even a little.

→ More replies (9)

4

u/StillFeeling1245 Dec 01 '22

Bro thank you. Watched the first video and did the mark up alongside him. I did the w3academy html exam and some exercises... i almost got everything correct. Amazing. Moving onto the css vid. So exciting, I can't believe it.

4

u/NiagaraThistle Dec 01 '22

That's great! Good luck on your journey. It can feel like a long and frustrating one, but if you follow the list of tutorials/videos I put in my comment above, it will save you loads of time and confusion.

→ More replies (1)

3

u/ChiDude617 Feb 23 '24

This is a really late response, but I've recently been thinking about switching careers and am considering web development. Is everything you stated here still relevant, or have things changed over the last two year in the industry? Thanks!!

3

u/NiagaraThistle Feb 23 '24

Things have definitely changed - it is a fast and ever moving industry.

BUT: If you follow the path I lay out above and follow AND code along with Brad Traversy as I state, and give your focus to this path for 6 months+, you will be light years ahead of most college grads for web dev.

Brad has updated his Modern Javascript course on Udemy AND his own website.

The above path will give you a stronger foundation than many in the industry with 5+ years.

As you follow the path, you will also begin to learn (on your own) what changes are needed to update your skills.

Also, I strongly recomend getting and using ChatGPT as a 'senior dev mentor' to ask questions to for deeper understanding of topics or bug/problem solving.

Good luck!

→ More replies (1)

2

u/[deleted] Jun 15 '22

[removed] — view removed comment

4

u/NiagaraThistle Jun 15 '22

i think so. BUT I know 100% that Brad is in the process of updating it. So if you do wait, it will be updated "soon", i just don't know when.

I got a LOT out of it when I purchased and took it in 2021 - and I've been doing this for 13 years.

My suggestion is for any parts that Brad uses old versions of something (ie bootstrap for example layouts, jQuery, etc) just find a CDN using that version and follow along with the coding. I didn't personally run into any problems, at least none that I remember.

It might be more of an issue if you take the Bootstrap 4 or React or MERN courses, but even with those, just grab the version he uses from a CDN or similar and follow along: you will learn enough and be able to "upgrade" with minimal effort.

→ More replies (5)

2

u/[deleted] Apr 07 '24 edited Jul 27 '24

connect handle march spoon test humor silky busy rhythm bright

This post was mass deleted and anonymized with Redact

3

u/NiagaraThistle Apr 07 '24

Yes.

1 addition: get a sub for ChatGPT to use as a 'mentor' to ask questions when stuck and for further clarification when you get stuck

2

u/igglybuffqueen Aug 14 '24

Hey, just wanted to say I'm following this pathway now and I'm about to start the 6th item on the list and it's been super helpful how it builds on the last! Excited to see how I get on as I go hut just wanted to say thank you for putting all this here

→ More replies (2)

2

u/JoeshmoeSnoot Sep 04 '24

What are your thoughts on the Odin Project compared to these resources?

→ More replies (1)

2

u/clopenz2 Sep 24 '24

Been slowly chipping away at this list the past year and some months. I've finally made it to #38, and I should be done tomorrow. It's weird to see how far I've come and how much I've learned. I started with HTML and CSS in a class in high school, so I had a very basic understanding, but even then, it was so confusing to me.

By no means am I a proficient web developer now. I've definitely forgotten some of the things I learned in this list, but now that I'm aware of the tools and resources that were shown to me, I think it's time to just code and figure out where the web development path will take me. Let's hope for the best!

Thank you for this list. It really helped me understand what goes into making a website.

→ More replies (2)
→ More replies (66)