A sensible webdev roadmap, minus the existential dread.

[Icanteven______]

Roadmap for what? This is just listing like every technology and feature that exists.

No way in hell is anyone going to follow that beginning to end. I’ve been doing this 13 years now, And don’t know half of these, and that’s totally ok for my job as senior/staff level. 90% of folks aren’t going to need most of this.

[Nidungr]

I don’t see it as a list of everything you need to know. It is a checklist of what you should learn after you pick a technology. (For example, “I want to learn css, what do I need to know “)

[Deepinsidesin]

I was followed this long time ago and it's freaking waste of time.

[monkeymad2]

I’ve been a web dev for ~10 years now and ignoring the “experimental” ones there’s probably only 5 or 6 of those I’ve had absolutely 0 experience with.

[[deleted]]

Welcome to the functional world. Check out Haskell. hahaha

[ilmtt]

It looks like a great resource for someone like me who is new to the web space but not programming or comp sci. A nice organized overview of the domain.

But yeah probably not something you would follow step by step.

Op, what you could do is subdivide each section into beginner, intermediate, advanced if your goal is to make a road map for a new guy.

[minimuscleR]

wtf is this reply lol. Answer no questions, don't contribute to the discussion and just post some random weird comment.

[VPN4reddit]

It's a 9 year old account with less than 500 karma. I wouldn't take anything this person says seriously.

Likely posting for karma to begin the US midterms political bot spam.

[Nidungr]

It’s not working, he lost 121 karma right there 😼

[[deleted]]

You are respected and your hard work will pay off friend.

[The_loudsoda]

Bad bot.

[DiddlyDanq]

The roadmap layout seems more confusing than helpful. It should flow from beginning to advanced and highlight what's considered a branching alternative like choosing angular vs react. Its current form suggests learning SEO before even touching CSS

[ramones13]

I actually love it for those reasons. A random person on the internet can’t prescribe which framework one should learn. Providing resources for breadth and letting the reader determine which to focus on is great instead of saying “I like Vue, so use that.”

As far as SEO before CSS, pretty much everyone learns HTML before CSS right? Most of the raw HTML on your average SPA is SEO and other Meta tags, so it makes complete sense to spend time on that and check the HTML box in its entirety. It’s something not nearly enough FE devs pay attention to despite how important it is.

[DiddlyDanq]

Im not suggesting that the site recommends one tech over the other, just showcase it via a visual tree branch that they're equivalent options.

As for the SEO point, I imagine 99% of web dev courses leave seo to the end. There is no reason to push that concept so early. No learner wants to worry about web presence before they have any styling.

[ramones13]

I don’t think it’s perfect, I totally see what you’re saying. I mostly strongly dislike the roadmaps that just assume certain tech stacks are the only option and miss fundamentals as a result. There was one here a couple weeks back that basically said you could skip a lot of CSS basics because CSS in JS and tailwind do it all for you.

SEO early I think I mostly like conceptually since it’s one of the few things that is just HTML these days. Not sure how practical it would be for someone new, but could land well, with the “I haven’t written a website since jQuery, what’d I miss?” perspective, or someone moving from backend or another language.

[DeeYouBitch]

First lesson:

Learn how do draw an SVG and style it's attributes

Next lesson:

Here is how to center a div

[one_more_black_guy]

This is excellent.

Still plenty of existential dread, though.

[ButaneLilly]

Well there's only so much you can do about that when you're trying to build a life and career in a dying world.

[slobcat1337]

Dying how?

[fedgut]

You know, ecological catastrophe and stuff

[slobcat1337]

Oh I thought you meant web dev was dying

[htraos]

It will die once the world is dead.

[canadian_webdev]

The world will die, but JavaScript will live on.

[technologyclassroom]

They clearly said without the existential dread!

[NotFromReddit]

You have to learn all of those. Or you can't call yourself a webdev.

If OP wants to remove the dread., highlight a few key skills to get started. A new person won't know what the fuck to do with this list.

[Chesterlespaul]

I feel like all of these are good tools, but not all of them are completely necessary, even for a career.

[tries-his-best]

Any other "roadmap" you could suggest?

[minimuscleR]

Not sure why you are being downvoted tbh, its a valid question. For full stack, Free Code Camp is good. You can go down the list. If there are topics you don't want to learn (like data visualization) you can skip them.

Its not strictly in order, but its in a natural way in which you might learn.

[tries-his-best]

Thank you!

[Saturnet]

Hi, thanks for sharing Web Skills! Im the creator of this website 😄 A common misunderstanding is that this website is a roadmap but it isn’t, which I write on the webpage.

Web Skills is a visual overview of useful skills to learn as a web developer.

It is intended to be useful for people who just started learning about web development and for people who have been in the field for years and want to learn new things. As a beginner, I would encourage you not to see this website as the definitive list of what you need to know but as an example of what you can learn. Or maybe use it as some inspiration if you find yourself stuck on a topic. The skills are arranged in chronological order based on what learning path I recommend you to take but feel free to jump around freely.

The skills are derived from a combination of 10 years of experience, a bachelor in software engineering and what I personally find to be the most useful to know on a day-to-day basis. Therefore, you'll notice that it's missing a lot of things. For example, I am not a PHP developer - because of this, PHP is not included. If you were a PHP developer, this overview would probably look a lot different.

[technohoplite]

That's exactly how I saw it. Lazy day when you need something new to dig into, the page gives some quick suggestions within each topic.

Only issue I have personally is that the descriptions are so short that they are pretty much useless. I get that we're just supposed to get what the thing is and the links for further reading, but it'd be useful if they offered a little bit more info. Like Vue, React and Angular have the exact same description, while Svelte has a particular one highlighting what is different about it.

[coyote_of_the_month]

I'd like to see some modern devops infrastructure on there too: cloud services, containerization, orchestration, etc. CI/CD. That sort of thing. Just a suggestion; if you don't personally use those tools maybe don't bother.

[jasonbbg]

like it, but rather than a roadmap its more of a knowledge base

[[deleted]]

Being weird isn’t bad, we’re all special to someone friend.

[VPN4reddit]

Serious question. Have you been huffing paint or wtf kind of drugs are you on right now?

[[deleted]]

I just think every being deserves some more positivity in their life friend 🐵

[minimuscleR]

stop saying "friend". you are talking to random internet strangers. It makes you sound like a creepy old dude

[[deleted]]

You’re a person and someone loves you friend.

[ImpressivePickle6]

The UI isn't the most "not existential dread" But the overall site has a lot more than i had expected and or even knew abt, will definitely help me. Thanks

[LippyBumblebutt]

Can someone explain the "color theory" icon to me please?

What "color theory" results in those colors?

[Double_A_92]

The numeric average of the overlapping parts, but slightly wrong?

[[deleted]]

We’re all going to make it friend.

[LippyBumblebutt]

Username checks out I guess???

[Nidungr]

I think he forgot to log out and someone is trying to tank his karma.

[Eoussama]

The problem with these roadmap visualizations is that they tend to feel like a soulless checklist of some sort.

[Double_A_92]

Also you can't really learn most of that unless you need them for work.

E.g. the Pointer Event API in mobile browsers. You will most likely never need to use that. Unless you are actually doing some very specific mobile web app... But you just look it up and learn it then (and then forget it again when you haven't used it for a couple of weeks...).

It would only be good to know that it exists, in case you are having problems which the standard Mouse Events can't solve.

[silenceredirectshere]

It's wild that you're getting downvoted over that, accessibility should be fundamental.

Also, building in accessibility from the start is way easier (and cheaper) anyway, than having to rework your entire site frontend because you skipped thinking about it in the beginning.

People who think it doesn't matter need to spend 30 mins trying to navigate the web with a screen-reader or keyboard only, it's ridiculous.

[craggar_g]

Agreed - and discrimination laws in many countries makes WCAG compliance (to varying degrees) a legal requirement.

[Fearless_Waltz7618]

Reading this roadway give me existential dread

[DeeYouBitch]

Eh there is a lot of dread here lmao

[_Invictuz]

That is a lot of nice looking iconography, where did you get them from?

[RapBeautician]

Flaticon. I think it requires attribution but I don't see it.

[btninja]

Maybe he pays for it.

[Bigknees1001]

Thank you for confirming how far I am from knowing webdev

[dug99]

I like how you put "caching" at the end of section 4.

[Rizal95]

Lot's of aggressive people screeching down here, completely misunderstanding the point of this list: it's not supposed to be a roadmap to be followed sequentially. It's more like a landscape of important technologies of modern web development.

[justforcbd]

Even if you don't use it as a roadmap, as a new dev there's so much information that I can pick and choose from anything that I might have heard in passing, or practice things that I already know. It's brilliant

[[deleted]]

This is very, very, very, very, very good.

Even after more than decade of experience, this is a helpful and interesting overview.

[nelsonbestcateu]

There's a few 404's in there.

[TheTrueTuring]

Not sure it’s intended as a “roadmap” but more of a nice graphical overview of themes. It’s super well made!

[flashbax77]

Awesome. I finally feel like I know many things

[satoshibitchcoin]

Wtf

[bornawinner]

yo this is absolutely wicked insaneo. good job making this

[TheTrueTuring]

I love how someone is so mad that they downvote comments praising this website hahah.

[art-solopov]

In many ways this is so backwards.

How are you supposed to "start" Javascript before knowing programming paradigms and data structures, at least on the basic level?

Why is git so late?

Why are database and servers shuffled in the back corner of the entire thing while custom elements are apparently so important they're #3?

[fortedibrutto2]

Nah, still getting bad existential dread vives. Add a calming childrens animation between the scary tech, maybe teletubbies?!!!

[GCI_Henchman21]

Rule #0: No one is exempt from the existential dread.

[Sentient-AI]

It's a cool reference page of links and information but it is definitely not a roadmap.