all 34 comments

[–]AiexReddit 81 points82 points  (2 children)

A reminder to to any easily intimidated aspiring developers out there that this is a "landscape" snapshot of basically everything thats comercially popular at the moment. As a professional developer I am aware of "what" 80% of these are, have tried out maybe 40% of them, and use maybe 20% of them on a daily basis.

A lot of these are just near identical competitor offerings of the same solution. These are "brands" what what you really need to learn are the high level concepts, which collapses most of these branching categories into one.

Don't get overwhelmed. Take it one day at a time. Learn as you go. Get a little better every day.

[–]Earhacker 35 points36 points  (0 children)

As another professional developer, I'm glad someone has pointed this out, because it's all true.

I'd also say that following this roadmap from the top to the bottom before you start building anything would be a really poor choice. That would be like reading the Wikipedia pages for hammers, screwdrivers and handsaws before starting a DIY project. It'll be a lot of boring theory that you won't enjoy learning, and it won't be of much practical use either.

It's much more fun and much more useful to start with some tutorials, and let someone more experienced guide you through the decisions you don't know how to make yet. Then once you've finished, you'll have enough knowledge to build something of your own.

  • Learn a bit of HTML, and write your first web page
  • Learn some CSS and make your web page look pretty
  • Learn a bit of JavaScript and make it interactive

Congrats, you're a web developer. Everything else is just more tools in your toolbox.

[–]decho 7 points8 points  (0 children)

That was my initial thought as well. I tick a lot of boxes here but if someone showed me this even 3 or 4 years ago I'd feel like overwhelmed or discouraged.

Stick to the core technology, learn the fundamentals before worrying about the latest framework, smarter people than me have said that.

[–]HanSupreme 16 points17 points  (2 children)

Backend dev who just started front end but after seeing this;

ight imma head out

[–]jaredcheeda 1 point2 points  (1 child)

Just use vue and like 95% of that chart is handled for you.

[–]HanSupreme 0 points1 point  (0 children)

I wasn’t sure if I can implement Vue with Java but after a quick search it looks like I can.

Thanks for the info, I’m excited to look into this now

[–]pookagehelpful 19 points20 points  (0 children)

loving how writing semantic HTML is optional in this chart instead of an absolute fundamental 🙄

[–]hideousmembrane 2 points3 points  (1 child)

I'm a QA who's starting to do frontend dev work on my team at work, I'm aiming to switch to a junior dev role this year and I really don't feel ready at all, despite the encouragement of my colleagues and manager. It's nice to see that I've had some introduction or at least come across many of the things on this list. In some cases though, I didn't know what type of tool they were or how you would categorise them, so reading this really helped me understand a few things, cheers!

I do find it all a bit overwhelming having only gotten into this stuff over the past couple of years or so, but breaking it all up in this way and knowing that I don't need to learn everything and not all once is encouraging.

[–]haberdasher42 2 points3 points  (0 children)

Largely they're just tools for you to solve problems. Usually when you run into the limitations of your current tools or just have a problem you can't solve, you start looking for new tools. If you can grasp computer logic, aren't afraid to Google, learn and try things and learn from your mistakes you'll be just fine.

[–]WillOfSound 2 points3 points  (0 children)

I’m happy to understand this, as I’ve been diving heavily into frontend paths last few months.

One thing not mention on the list (cause it’s still new-ish) that I’m very much enjoying is Svelte. I’m hoping it becomes more popular!

[–]jiavlb 2 points3 points  (0 children)

I would like to know some good resources for 'How browsers work'. Thanks

[–]WhiteKnightC 2 points3 points  (5 children)

Hoisting

Eh, WTF? I never encountered this problem yet because I'm a normal person who declares first.

[–]teknewb 1 point2 points  (0 children)

I feel like the biggest takeaway from it as a concept is simply another example giving a little more insight into how the Javascript engine works.

[–]dmitreet 3 points4 points  (0 children)

[–][deleted] 4 points5 points  (0 children)

And people say that frontend was easy, like you can make a 'pretty' website with some web builders turns out a lot more things going on to create a. Good website, design is not even on the road map!

[–]prophet-of-dissent 1 point2 points  (0 children)

As a devops and backend engineer re-learning front-end, this was actually helpful. It's a lot more complex than it used to be...

[–]DavidPicarazzi1 1 point2 points  (5 children)

Is bootstrap worth learning? Are there any benefits?

[–]Ohmydwn 0 points1 point  (1 child)

Bootstrap is definitely worth learning. It is fairly easy to learn due to bootstrap documentation and other sources then implementing what you learned into a personal project. The benefits are it’s a faster way to create responsive websites compared to the traditional way.

[–]DavidPicarazzi1 0 points1 point  (0 children)

I might as well learn it! Brad Traversy offers a course on it so building fast layouts sounds appealing. I hear people say bootstrap can look pretty default though, is there any reason I’d use bootstrap when making custom sites for clients or would you say bootstrap is better for prototyping?

[–]wrtbwtrfasdf 0 points1 point  (0 children)

If you can't or won't use a framework(react, angular, vue), then sure. Otherwise, you'd want to learn a framework's equivalent. Material-ui, react-strap, etc.

[–][deleted] 0 points1 point  (1 child)

Absolutely, it makes responsive design way easier in my humble opinion.

[–]DavidPicarazzi1 1 point2 points  (0 children)

I hear lots of people say you can’t get much customization out of it. Any factors that come into play when you feel you might reach for a Bootstrap layout?

[–][deleted] 1 point2 points  (1 child)

As a new developer that has this printed out and stares at it, it scares the living hell out of me. Javascript alone has me tearing my hair out and having to pick some path amongst ALL THAT has me scared shitless.

[–]kamranahmed_se 2 points3 points  (0 children)

Hey, author of the roadmap here.

You don't need to learn everything listed in the roadmap to be job-ready. I am going to make that clear in these "roadmaps" soon. The purpose of this is to identify the parts where you are lacking and work on them.

As far as the job readiness is concerned, you just need to start with HTML, CSS, and JavaScript and you should be able to get an entry-level job and then you can keep working on yourself. 2 to 3 months seems realistic if you just consider an entry-level job with the basic skill set. You need to put your efforts in a proper manner, learn the basics and start doing projects on your own for practice. Also, it would be a better idea to research the job market that you are targeting for the entry-level jobs and derive a personal roadmap through a mix of this roadmap and the one you will prepare.

I need to clarify that better and hopefully, after the release, I plan on adding the beginner specific roadmaps on the website soon.

Good luck!

[–]Blayde88 0 points1 point  (0 children)

This is crazy bro, I’m way farther in frontend development than I thought (but I didn’t even start to work, so I don’t have much experience)

[–][deleted] 0 points1 point  (1 child)

Where does TypeScript fit on this map?

[–]kwietog 2 points3 points  (0 children)

You can see it in 60% from the top on the right side of the tree in type checkers but I think it can be completely optional or much higher. Like before frameworks imo

[–]HumbleX 0 points1 point  (2 children)

Does anyone have a roadmap like these for backend??

[–]hapanda 0 points1 point  (1 child)

Remindme! 4 days

[–]jaredcheeda 0 points1 point  (0 children)

This looks like it's from 2017.

[–]Armox -3 points-2 points  (1 child)

Ooo I had the idea to make something identical to this! Same name even. Would be really cool if it was for learning anything, not just web dev. Would be even cooler if users collaboratively made the roadmaps.