14 ms·

Roadmap to becoming a web developer in 2019

255 points by nkjoep 8y ago

sixQuarks 8y ago
I remember back in the day when I was referred to as a "web master" - and I didn't even know how tables worked in HTML at the time.
- fargo 8y ago
  I still have to google how they work 15 years later...
  - rectang 8y ago
    /me googles... It seems they made things "simpler" by replacing all tags with `div`.
    - Kye 8y ago
      I made one perfect template that loads right in everything so I can make a new site without relearning web dev every time. I will never modify it out of fear of breaking it.
- mscasts 8y ago
  I am too young to have ever used tables for anything else than table data. I am almost 30 years old today and have worked as a dev my whole career. We sure have made some progress!
  - adamcccc 8y ago
    I take it, that you've never had to work with html emails then? groans You lucky soul!
    - mscasts 8y ago
      I have, but I have always used normal html+css?
      - sosborn 8y ago
        That works for simple emails, but when you start creating more complex designs tables are an essential tool to ensuring that every element behaves as you would expect: https://templates.mailchimp.com/getting-started/html-email-basics/ https://templates.mailchimp.com/getting-started/html-email-b... Building these types of emails without tables is doable, but you are going to get a lot of inconsistency depending on the device/client/browser.
        jermaustin1 8y ago
        I had worked on a project in 2010. It was a service that let you pick email stationary, customize it, and had a Outlook add-in and a bookmarklet. It "worked" in Outlook (2003, 2007, 2010), Yahoo, Hotmail, and Gmail. And had to display correctly to the recipient in each of those clients. It was by far the biggest pain in the ass I've ever worked on. Tables weren't enough to make it work outright. Outlook 2007+ couldn't do background images on a table cell, gmail would collapse empty cells, hotmail would remove certain inline styles, and yahoo was actually pretty nice. The company I worked for took the project on for an equity split + payment plan, we saw a few hundred dollars from it before they went out of business.
    - rurp 8y ago
      Creating HTML emails for Outlook is what I imagine the entire web was like several decades ago.
      - dwd 8y ago
        Not so much as you didn't end up trying stuff only to find it didn't work for some client and you could get away with just targeting Netscape and IE on an 800x600 screen. My first website in '96 had a repeatable background image with text over the top. That's still problematic in email templates and easiest to avoid.
  - arethuza 8y ago
    Do a View Source on a HN page!
    - folkrav 8y ago
      Oh my god
  - robohoe 8y ago
    Count yourself as lucky for not having to build designs/layouts in tables! Oh what a travesty that was.
  - Semaphor 8y ago
    I'd say you started too late, I'm only 2 years older and when I took my first steps, tables were still a layout tool ;)
onion2k 8y ago
That chart is less about becoming a web developer and more about the author showing off their knowledge of the web developer tools space.
- asien 8y ago
  And getting some GitHub stars.
axvk 8y ago
Charts like these are guaranteed to scare anyone trying to enter the web development field. A junior position requires much less than is shown there.
- tabtab 8y ago
  As I interpret it, it mostly is a graphical representation of what's related to what. I don't see anything wrong with that goal. If you mean the sheer quantity of the possibilities will scare people away, then that may not be a bad thing. Software is growing into a messy conglomerate of technologies where each org selects what to put on their own stack(s). One must be aware of that nature of the biz because it's not growing simpler. In the old days, the big vendors gave you a tool-set and you mastered whatever that gizmo was. Those days are probably dead. Most modern programmers are multi-sub-gizmo gluers. As a sales tool for STEM, yes it's bad, but it's good as a reality-check about the industry.
- deleted 8y ago
  [deleted]
- gdulli 8y ago
  And as you get truly senior you've picked out the stack you like best out of the ones you've tried, the stack that lets you do anything you want to do with the least friction for your own personal style. And you realize there's little value to always being on the treadmill of replacing skills to swap their various pros and cons while your overall capabilities don't grow.
- normal_man 8y ago
  True, but it's helpful for a junior to know the lay of the land even if they don't know how to use every one of these technologies. It does a junior no good to keep their head down and focus entirely on PHP, then when they look for their first job they find all the listings want React (not saying there aren't PHP jobs)
sudofail 8y ago
I'm currently teaching my brother web development and I guarantee if I were to show him this, he'd just quit. This is way too much information. All a beginner needs to know is JS and the basics of HTML/CSS/SQL. If they have a mentor, the mentor should draw out and explain how frontend, backend and databases relate, and the general lifecycle of a request to a webpage. That's all you really need to start building stuff. The next thing will probably be a basic understanding of DNS and how requests get routed. Anything much more than that is overkill.
- protonimitate 8y ago
  It's a good reference resource to have. It's great to see what X technology is, and how it relates to everything else. I would agree that handing this to a beginner would be over kill. This is probably best suited for people who are in the 'I know the basics, but want to know what this technology-of-the-month is and how it fits in to what I already know' stage.
  - jaredcwhite 8y ago
    I would posit that it's a valuable skill at this point in time to intentionally not seek out the flavor-of-the-month web technology. I'm of the opinion it's good to wait a year or two before adopting any new framework or technique, because it seems almost all of them are passé within that timeframe. (Case in point: BOY am I glad I never bothered to learn Angular 1!)
- JChase2 8y ago
  Ya, I've got a CS degree and I'm slowly learning web dev. Learning JS is really nice, but I feel like I need to know so many frameworks and other things, not to mention algorithms, to land an actually decent job. Idk how accurate this is but most requirements on job sites seem fairly thorough.
  - sudofail 8y ago
    I'm planning to introduce react after he has a few small js projects under his belt. I agree vanilla JS is not enough to land a job.
getsomeboi 8y ago
If you know everything on the chart and have done this shit for Fortune 500 companies over the span of a 10 year career How much money should you command
- zaphar 8y ago
  200k minimum would be my estimate.
- lurkertroll 8y ago
  1000 monies
- megaman8 8y ago
  Depends on where. Location, can increase your salary by 50% or more and increase your cost of living by 200% to 600% or more.
- imhoguy 8y ago
  If you know 10% of the chart and have much more soft skills you can earn more than than someone who knows 100% and neglects people skills. Most of that stuff will be legacy tech in a few years.
Svoka 8y ago
Didn't know .NET is a functional programming language, right after Haskell and Java.
- forgueam 8y ago
  It's hard to see, but I think Java and .NET are linked to the "Other Options" box in the chart.
  - aasasd 8y ago
    Yeah, alas the proximity principle isn't on the map.
- deleted 8y ago
  [deleted]
pgm8705 8y ago
This feels overwelming. While I realize Rails isn't the cool thing in the web space anymore, I'm still convinced the best way to get someone into web development is to sit them down with Michael Hartl's Ruby on Rails tutorial and have them go through it any number of times. I've turned several zero-experience friends and/or interns into career web developers this way.
- Blaiz0r 8y ago
  Is Why's The Lucky Stiff not the thing anymore? Or was that just for Ruby...
  - a-priori 8y ago
    No, _why disappeared from the internet a while ago... https://en.wikipedia.org/wiki/Why_the_lucky_stiff https://en.wikipedia.org/wiki/Why_the_lucky_stiff In fact, we're coming up on ten years now! Holy shit I feel old now.
- clairity 8y ago
  agreed. i find it odd that node and php are called out as the easy way to get into backend. ruby seems more intuitive and friendly than either javascript or php (not so much that they're hard, but they have more non-intuitive quirks and weirdnesses). i like rails a lot, but i can somewhat sympathize with the view that the magic underlying it might hinder learning for a beginner. but having learned other languages/frameworks first, rails seemed much cleaner (and welcome) in comparison.
megaman8 8y ago
Seems quite comprehensive, perhaps more than any web developer needs to know, but a good resource nonetheless. For FE, I'm glad DOM manipulation is in there somewhere. These days with modern frameworks becoming a big thing an all, I feel DOM manipulation as a skill is falling by the wayside.
- emmanueloga_ 8y ago
  Agreed about DOM manipulation. I feel like they should emphasize that a bit more in this roadmap. Also, apparently you only need to learn about HTTP/S is you are doing DevOps... I still recommend http://domenlightenment.com/ http://domenlightenment.com/ to ppl to get a nice base line of what you can do with the browser (a 2013 book but the browser APIs don't change much, they mostly keep adding stuff). https://hpbn.co/ https://hpbn.co/ is a good resource for the networking side of things, if maybe a bit advanced, not sure what would be a more gentle resource to start with. With regard to CSS, I don't really have any good book recommendation, maybe someone can chime in.
- deleted 8y ago
  [deleted]
aasasd 8y ago
Notably even the frontend path omits anything on how websites should function―even though it's in a different field if you're for strict ultra-specialization, it's still recommended to learn how to not accidentally make sites that are hostile to users. Arguably, it should be learned before the programming part, so it's ingrained from the start. E.g. for me the defining text is Jakob Nielsen's “Designing Web Usability: The Practice of Simplicity,” which probably didn't lose any value in the time since publication, because humans don't change so fast. P.S. I'm also of firm belief that the proximity principle is by far the most important tool of graphic design and that everyone should learn to see and use it. To, ahem, not make diagrams where everything is lumped together. (I'm a backend coder, by the way.)
jaredcwhite 8y ago
I was convinced for a while there as I scrolled down that this was a joke. "Good parody!" I thought to myself. Then I realized to my horror this is actually serious. As a web developer since 1997, currently working in both the Rails & JAMstack spaces, I can assure any and all beginners out there you don't need to know anything about at least 50% of this stuff, probably closer to 70%. I also deeply resent the notion that you have to "choose a path." Depending on the task at hand and what I'm trying to accomplish, I'm working on the backend, the frontend, and/or the devops side. I jump between all of those daily. If your stack, website, or web app is so complicated that you simply have no ability to understand how it's built bottom-to-top, back-to-front, and how to deploy it easily, then either (a) you're in a massive team at a gigantic software company, or (b) you're doing it wrong!
- abrahamepton 8y ago
  I had a slightly different perspective, as someone who's been a web-ish developer for the last ~8-10 years: I've picked up a lot of this as I've gone, and it's fun to see it all listed out this way and think about it holistically. I think it could be intimidating for a beginner to think, "Damn, I've gotta learn all these things" and you totally, totally don't. But as you work in this space for a while, you'll encounter a lot of this, and the more you learn about the different pieces, the better code you'll write everywhere.
  - ergothus 8y ago
    Agreed - what I like about these is that they give a scope - you can hear a term, check it here and say "oh, I'm way not ready for this" or "oh, it's in this scope that I already understand, I can go look it up without frying my brain".
  - darepublic 8y ago
    Yea, I don't quite agree with those saying this is all baloney. It can be daunting though, but you can do a lot just on the power of html, css and vanilla js + text editor, so take heart beginners.
- imhoguy 8y ago
throwaway928192 8y ago
"solving" simple problems by creating more complexity
- deleted 8y ago
  [deleted]
blue4 8y ago
I think this is perfect for people that have experience and just don't know the path forward. Also I enjoy seeing cross overs that you can compare such as you could make a transition into dev ops if you choose an appropriate back end, scripting language. Everyone here is too critical, I think it's a lot of information, but it's very useful to see the goal and steps in front of you.
Uptrenda 8y ago
Maybe an experienced senior front-end dev would know most of that. But lets be real here. Most of us started out by learning how to get notepad.exe to save .html files and trying out a tag or two. It's a good resource but I'd be looking more at using this to stay up to date with modern web dev work flows (which seems to have become insane over the past few years.)
whizzkid 8y ago
For those who would like to have a solid understanding of how Web works, I would definitely recommend David J. Malan's CS75 lecture 0. (the first lecture). He has a positive vibe and the pace is optimal, so you will really enjoy the lecture. I also would like to thank him and Harvard Uni. for making this available to everyone for free. I sure would not be able to afford studying there, but these lectures helped me a lot. https://www.youtube.com/watch?v=8KuO4r5CHjM https://www.youtube.com/watch?v=8KuO4r5CHjM I think it is important to understand how basics work before jumping into details. You will not enjoy the best tools available if you don't know how to use them either.
SimeVidas 8y ago
PostCSS should be a recommendation.
a-priori 8y ago
I've worked as a web developer for about half of the last fifteen years, and work as a senior front-end developer at a large web-focused company (Shopify). So I guess I'm fairly good at it? Here's a list of things I have never even heard of just from the "Front-end Roadmap" section: BEM, OOCSS, SMACSS, Bulma, JSCS, ngrx, Vuex, Ava, Protractor, Cypress, Emotion, Radium, Glamorous, After.js, Universal, Nuxt.js, Carlo. That's only the ones I've never even heard of until today. There's a bunch more I've heard of but never used. This page is completely the wrong way of thinking about how to become a web developer.
- ashelmire 8y ago
  I haven't heard of any of those except BEM. Which you are using at Shopify, you just might not know it's called that. And it's not really a tech, it's just the style of naming css classes, "block element modifier" like on your home page: "marketing-form__fallback-cta" - marketing-form is the block, "__fallback-cta" is the element (only has meaning within the block), and if you had something like "--purplesmoke" that would be the modifier. Super simple, link here: http://getbem.com/naming/ http://getbem.com/naming/
  - a-priori 8y ago
    Ah, thanks! Yes, in that case I have actually heard of BEM before then because I've followed that convention on a few projects.
- imPndy 8y ago
  I don't think it's purpose is for you to learn it all, but get the general concept of what to do/where to go next. Kinda like in css frameworks, you probably know what bootstrap is, so Bulma is basically alternative to that, but you don't actually need to know/learn them all
robgering 8y ago
These roadmaps are always hilarious to me. The real roadmap to becoming a web developer is "write code and convince someone to pay you." I suppose you could even leave the paying part off, if you are contributing to open source or writing code for yourself. Of course, you should do a great job, dedicate regular time to learning, and explore things that interest you. These maxims are probably true for success in many other careers. I suppose that charts like this could be useful to find new things to learn? But you certainly don't need to know all of this to get a job. Trying to tick every box on a learning list like this amounts to procrastinating the real tasks of finding work and writing code.
- johnmarcus 8y ago
  I guess that’s why it’s a path. As you walk it, you learn it.
- deleted 8y ago
  [deleted]
robjan 8y ago
Analyse the problem then find the correct tools to solve it. There is no need to frontload all of this knowledge.
president 8y ago
This infographic reminded me that I need to make the transition to management before I become even more irrelevant.
bennettfeely 8y ago
Roadmap to becoming a web developer in 2019: Learn HTML, CSS, JS, and work from there.
anotheryou 8y ago
I'm roughly right around or after "pick a framework" in the front-end guide (and can do some android stuff too). What level of a front-end dev am I? (I actually transitioned to product/project management at that point, just wondered)
edwinjm 8y ago
Be aware that if you want to follow this roadmap, everything in it will be different when you're half way through.
gorpomon 8y ago
The front-end dev chart is only mislabeled, that's the amount of knowledge one needs to become a senior front-end dev. I'm in my seventh year of this career, and recently obtained a senior front-end role. I've worked my way through the front-end chart and it's not wrong. To write really solid web applications that work for you, other devs, users and users of limited ability, you should know all that stuff. Only lately have I gotten my skills up to the point where I can write high quality JS, CSS, HTML, and test it fully, automation test it, organize my CSS effectively, make sure it's accessible and make sure I am at least aware of possible security issues. It's a lot of work that requires a lot of knowledge that takes years to develop, but it's not wrong.
rkido 8y ago
Even if treating this not as a roadmap to becoming a web developer, but more as a map of what an expert-level web developer might be familiar with, it's still scary. Why does modern web development have to be so convoluted? Here is a wishlist of what I want from ONE language: - A package manager like nix so that each project folder doesn't have to be hundreds of megabytes - Static typing with minimally expressive (i.e. ADTs) type system, type inference - Built in immutable data by default, so you don't have to pile on 3 different immutable data libraries - A better alternative to HTML+CSS like Elm UI [0] - One very high quality backend framework (exactly like Phoenix) - One very high quality frontend framework like Elm but with better component reusability, that makes fewer allocations, and that compiles to efficient WASM The benefits of a "one language to rule them all approach" should be extremely obvious to JavaScript developers who are following this approach with Node.js, React, etc. This huge mess of tools that they use now is a hairball of workarounds for JavaScript's many deficiencies. We essentially just need a better JavaScript. [0]: https://github.com/mdgriffith/elm-ui https://github.com/mdgriffith/elm-ui
enraged_camel 8y ago
In my opinion, "top-down" learning based on one's needs and wants works better. I want to write some text and show it on my browser. (Learn some basic HTML) I want to add some styling to the text I just wrote. (Learn some basic CSS and understand how it relates to the HTML you wrote previously.) OK, now I want to publish what I wrote so I can show off to my friends. (Learn basics of static hosting and uploading files to a web server.) I want to add a timestamp to the page that automatically updates when the page loads. (Learn what JavaScript is and how it relates to web pages.) And so on. Travel down the rabbit hole and pick up new concepts and tools as you need them. This will keep you motivated, unlike "bottom-up" learning where you learn concepts first without a clear idea of when and why you might need them (if ever).
- MilanoCookie 8y ago
  Yeah the approach you mentioned is very effective, it’s a deductive learning approach.
Townley 8y ago
In case anyone is as acronym-deficient as I am, and was confused by the supposedly-essential skills of "SOLID/KISS/YAGNI": SOLID (https://en.wikipedia.org/wiki/SOLID https://en.wikipedia.org/wiki/SOLID): - Single Repository Principle - Open/Closed Principle - Liskov Substitution Principle - Interface Segregation Principle - Dependency Inversion Principle KISS (https://en.wikipedia.org/wiki/KISS_principle https://en.wikipedia.org/wiki/KISS_principle): - Keep - It - Simple - Stupid YAGNI (https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it): - You - Aren't - Gonna - Need - It
- baconomatic 8y ago
  S in SOLID should be single responsibility principle.
amelius 8y ago
Since nowadays everything is connected to the web somehow, should we not look for a better term than "web developer"?
JDiculous 8y ago
What's the best path from a career perspective? I spent 3 years in front end, largely because I didn't have a CS degree and didn't want to study for those "invert a binary tree" style Google interview questions (I don't have a problem with theory, I just prefer working on real-world problems than studying for interviews). I was making a good six-figure salary before taking a sabbatical, but may be re-entering the workforce in the not too distant future. I need to decide whether to pursue front-end/full-stack jobs again, or to specialize in something else. Although front-end would seem to be the most logical since it was my specialty (specifically React), I'm afraid that the influx of bootcamp grads pumping out React devs will saturate the front end talent pool and make jobs more competitive and limit salaries. That and front end still seems to have this stigma of being "easier" than backend, and I don't see that changing. I don't want to invest my career in a field that doesn't garner any respect or have any long-term job security. Is there any truth to this, or am I being overly pessimistic?
- cmorgan31 8y ago
  It is relatively easy to spot someone with Bootcamp experience versus those with practical experience. The market demand in any relatively large city for React/JavaScriptFramework is quite high at the moment. I've seen salaries in Atlanta normalize without favoring one side over the other. The only exception is mid-senior DevOps which currently pays 25% more than either 'specialty' track mentioned.
sneakernets 8y ago
If you want to be a web dev startup hipster, this list is for you!
- BigJono 8y ago
  The ironic thing is that your average JS toolbox has the power to sink a startup. You need to be able to iterate fast by utilizing the basics. When you're brand new and facing 30 competitors you're going to get rolled by the 2-man team that doesn't waste all their time burdening themselves with all this bullshit. Meanwhile the other 28 are probably busy reading these flowcharts, doing resume driven design, and speaking at low tier JS conferences.
deleted 8y ago
[deleted]
michaelper22 8y ago
Nice to see relational DBs before NoSQL (learning the old and tried before the new). To follow that same pattern, SOAP should be earlier than REST. Taking a WSDL and running it through a client code generator is a fast and type-safe way to develop.
dwaltrip 8y ago
Very thorough with a nice visual design. The major issue with this roadmap is that many of the listed items are not necessary for a junior web developer, can be learned later on, or not at all, etc. I don't see any distinction between these different categories of topics. You only need to master the fundamentals of a small subset of the graphic to get your first job as a web developer.
deleted 8y ago
[deleted]
nogbit 8y ago
Following this chart would be the anti-pattern to KISS. Instead, learn how to ask people "what sucks the most?" and then go and build solutions. I've been doing that for more than 20 years for CxO's, product owners, developers themselves and consumers. One thing that has been constant is the solution is always different and the technology and tools come and go. I would also add understanding the underlying protocols will help you immensely in any front/back/ops/busdev roles. They stick around a whole lot longer than tooling or frameworks/abstractions.
5_minutes 8y ago
There are some basics you need to know: css/html/sql/php (or python) Depending on your goal, the thing is that none of these you need to know as an expert, but need to know the knowledge to collaborate with other people on it. But yes, the times that you could make “top notch” websites on your own: doing a photoshop design, doing the css/html and code it in bare php are over :) This diagram is scrary and gives a feeling of overkill.

255 points by nkjoep 8y ago

I remember back in the day when I was referred to as a "web master" - and I didn't even know how tables worked in HTML at the time.

fargo 8y ago
I still have to google how they work 15 years later...
- rectang 8y ago
  /me googles... It seems they made things "simpler" by replacing all tags with `div`.
  - Kye 8y ago
    I made one perfect template that loads right in everything so I can make a new site without relearning web dev every time. I will never modify it out of fear of breaking it.
mscasts 8y ago
I am too young to have ever used tables for anything else than table data. I am almost 30 years old today and have worked as a dev my whole career. We sure have made some progress!
- adamcccc 8y ago
  I take it, that you've never had to work with html emails then? groans You lucky soul!
  - mscasts 8y ago
    I have, but I have always used normal html+css?
    - sosborn 8y ago
      That works for simple emails, but when you start creating more complex designs tables are an essential tool to ensuring that every element behaves as you would expect: https://templates.mailchimp.com/getting-started/html-email-basics/ https://templates.mailchimp.com/getting-started/html-email-b... Building these types of emails without tables is doable, but you are going to get a lot of inconsistency depending on the device/client/browser.
      - jermaustin1 8y ago
        I had worked on a project in 2010. It was a service that let you pick email stationary, customize it, and had a Outlook add-in and a bookmarklet. It "worked" in Outlook (2003, 2007, 2010), Yahoo, Hotmail, and Gmail. And had to display correctly to the recipient in each of those clients. It was by far the biggest pain in the ass I've ever worked on. Tables weren't enough to make it work outright. Outlook 2007+ couldn't do background images on a table cell, gmail would collapse empty cells, hotmail would remove certain inline styles, and yahoo was actually pretty nice. The company I worked for took the project on for an equity split + payment plan, we saw a few hundred dollars from it before they went out of business.
  - rurp 8y ago
    Creating HTML emails for Outlook is what I imagine the entire web was like several decades ago.
    - dwd 8y ago
      Not so much as you didn't end up trying stuff only to find it didn't work for some client and you could get away with just targeting Netscape and IE on an 800x600 screen. My first website in '96 had a repeatable background image with text over the top. That's still problematic in email templates and easiest to avoid.
- arethuza 8y ago
  Do a View Source on a HN page!
  - folkrav 8y ago
    Oh my god
- robohoe 8y ago
  Count yourself as lucky for not having to build designs/layouts in tables! Oh what a travesty that was.
- Semaphor 8y ago
  I'd say you started too late, I'm only 2 years older and when I took my first steps, tables were still a layout tool ;)

onion2k 8y ago

That chart is less about becoming a web developer and more about the author showing off their knowledge of the web developer tools space.

asien 8y ago
And getting some GitHub stars.

axvk 8y ago

Charts like these are guaranteed to scare anyone trying to enter the web development field. A junior position requires much less than is shown there.

tabtab 8y ago
As I interpret it, it mostly is a graphical representation of what's related to what. I don't see anything wrong with that goal. If you mean the sheer quantity of the possibilities will scare people away, then that may not be a bad thing. Software is growing into a messy conglomerate of technologies where each org selects what to put on their own stack(s). One must be aware of that nature of the biz because it's not growing simpler. In the old days, the big vendors gave you a tool-set and you mastered whatever that gizmo was. Those days are probably dead. Most modern programmers are multi-sub-gizmo gluers. As a sales tool for STEM, yes it's bad, but it's good as a reality-check about the industry.
deleted 8y ago
[deleted]
gdulli 8y ago
And as you get truly senior you've picked out the stack you like best out of the ones you've tried, the stack that lets you do anything you want to do with the least friction for your own personal style. And you realize there's little value to always being on the treadmill of replacing skills to swap their various pros and cons while your overall capabilities don't grow.
normal_man 8y ago
True, but it's helpful for a junior to know the lay of the land even if they don't know how to use every one of these technologies. It does a junior no good to keep their head down and focus entirely on PHP, then when they look for their first job they find all the listings want React (not saying there aren't PHP jobs)

sudofail 8y ago

I'm currently teaching my brother web development and I guarantee if I were to show him this, he'd just quit. This is way too much information. All a beginner needs to know is JS and the basics of HTML/CSS/SQL. If they have a mentor, the mentor should draw out and explain how frontend, backend and databases relate, and the general lifecycle of a request to a webpage. That's all you really need to start building stuff. The next thing will probably be a basic understanding of DNS and how requests get routed. Anything much more than that is overkill.

protonimitate 8y ago
It's a good reference resource to have. It's great to see what X technology is, and how it relates to everything else. I would agree that handing this to a beginner would be over kill. This is probably best suited for people who are in the 'I know the basics, but want to know what this technology-of-the-month is and how it fits in to what I already know' stage.
- jaredcwhite 8y ago
  I would posit that it's a valuable skill at this point in time to intentionally not seek out the flavor-of-the-month web technology. I'm of the opinion it's good to wait a year or two before adopting any new framework or technique, because it seems almost all of them are passé within that timeframe. (Case in point: BOY am I glad I never bothered to learn Angular 1!)
JChase2 8y ago
Ya, I've got a CS degree and I'm slowly learning web dev. Learning JS is really nice, but I feel like I need to know so many frameworks and other things, not to mention algorithms, to land an actually decent job. Idk how accurate this is but most requirements on job sites seem fairly thorough.
- sudofail 8y ago
  I'm planning to introduce react after he has a few small js projects under his belt. I agree vanilla JS is not enough to land a job.

getsomeboi 8y ago

If you know everything on the chart and have done this shit for Fortune 500 companies over the span of a 10 year career How much money should you command

zaphar 8y ago
200k minimum would be my estimate.
lurkertroll 8y ago
1000 monies
megaman8 8y ago
Depends on where. Location, can increase your salary by 50% or more and increase your cost of living by 200% to 600% or more.
imhoguy 8y ago
If you know 10% of the chart and have much more soft skills you can earn more than than someone who knows 100% and neglects people skills. Most of that stuff will be legacy tech in a few years.

Svoka 8y ago

Didn't know .NET is a functional programming language, right after Haskell and Java.

forgueam 8y ago
It's hard to see, but I think Java and .NET are linked to the "Other Options" box in the chart.
- aasasd 8y ago
  Yeah, alas the proximity principle isn't on the map.
deleted 8y ago
[deleted]

pgm8705 8y ago

This feels overwelming. While I realize Rails isn't the cool thing in the web space anymore, I'm still convinced the best way to get someone into web development is to sit them down with Michael Hartl's Ruby on Rails tutorial and have them go through it any number of times. I've turned several zero-experience friends and/or interns into career web developers this way.

Blaiz0r 8y ago
Is Why's The Lucky Stiff not the thing anymore? Or was that just for Ruby...
- a-priori 8y ago
  No, _why disappeared from the internet a while ago... https://en.wikipedia.org/wiki/Why_the_lucky_stiff https://en.wikipedia.org/wiki/Why_the_lucky_stiff In fact, we're coming up on ten years now! Holy shit I feel old now.
clairity 8y ago
agreed. i find it odd that node and php are called out as the easy way to get into backend. ruby seems more intuitive and friendly than either javascript or php (not so much that they're hard, but they have more non-intuitive quirks and weirdnesses). i like rails a lot, but i can somewhat sympathize with the view that the magic underlying it might hinder learning for a beginner. but having learned other languages/frameworks first, rails seemed much cleaner (and welcome) in comparison.

megaman8 8y ago

Seems quite comprehensive, perhaps more than any web developer needs to know, but a good resource nonetheless. For FE, I'm glad DOM manipulation is in there somewhere. These days with modern frameworks becoming a big thing an all, I feel DOM manipulation as a skill is falling by the wayside.

emmanueloga_ 8y ago
Agreed about DOM manipulation. I feel like they should emphasize that a bit more in this roadmap. Also, apparently you only need to learn about HTTP/S is you are doing DevOps... I still recommend http://domenlightenment.com/ http://domenlightenment.com/ to ppl to get a nice base line of what you can do with the browser (a 2013 book but the browser APIs don't change much, they mostly keep adding stuff). https://hpbn.co/ https://hpbn.co/ is a good resource for the networking side of things, if maybe a bit advanced, not sure what would be a more gentle resource to start with. With regard to CSS, I don't really have any good book recommendation, maybe someone can chime in.
deleted 8y ago
[deleted]

aasasd 8y ago

Notably even the frontend path omits anything on how websites should function―even though it's in a different field if you're for strict ultra-specialization, it's still recommended to learn how to not accidentally make sites that are hostile to users. Arguably, it should be learned before the programming part, so it's ingrained from the start. E.g. for me the defining text is Jakob Nielsen's “Designing Web Usability: The Practice of Simplicity,” which probably didn't lose any value in the time since publication, because humans don't change so fast. P.S. I'm also of firm belief that the proximity principle is by far the most important tool of graphic design and that everyone should learn to see and use it. To, ahem, not make diagrams where everything is lumped together. (I'm a backend coder, by the way.)

jaredcwhite 8y ago

I was convinced for a while there as I scrolled down that this was a joke. "Good parody!" I thought to myself. Then I realized to my horror this is actually serious. As a web developer since 1997, currently working in both the Rails & JAMstack spaces, I can assure any and all beginners out there you don't need to know anything about at least 50% of this stuff, probably closer to 70%. I also deeply resent the notion that you have to "choose a path." Depending on the task at hand and what I'm trying to accomplish, I'm working on the backend, the frontend, and/or the devops side. I jump between all of those daily. If your stack, website, or web app is so complicated that you simply have no ability to understand how it's built bottom-to-top, back-to-front, and how to deploy it easily, then either (a) you're in a massive team at a gigantic software company, or (b) you're doing it wrong!

abrahamepton 8y ago
I had a slightly different perspective, as someone who's been a web-ish developer for the last ~8-10 years: I've picked up a lot of this as I've gone, and it's fun to see it all listed out this way and think about it holistically. I think it could be intimidating for a beginner to think, "Damn, I've gotta learn all these things" and you totally, totally don't. But as you work in this space for a while, you'll encounter a lot of this, and the more you learn about the different pieces, the better code you'll write everywhere.
- ergothus 8y ago
  Agreed - what I like about these is that they give a scope - you can hear a term, check it here and say "oh, I'm way not ready for this" or "oh, it's in this scope that I already understand, I can go look it up without frying my brain".
- darepublic 8y ago
  Yea, I don't quite agree with those saying this is all baloney. It can be daunting though, but you can do a lot just on the power of html, css and vanilla js + text editor, so take heart beginners.
imhoguy 8y ago

throwaway928192 8y ago

"solving" simple problems by creating more complexity

deleted 8y ago
[deleted]

blue4 8y ago

I think this is perfect for people that have experience and just don't know the path forward. Also I enjoy seeing cross overs that you can compare such as you could make a transition into dev ops if you choose an appropriate back end, scripting language. Everyone here is too critical, I think it's a lot of information, but it's very useful to see the goal and steps in front of you.

Uptrenda 8y ago

Maybe an experienced senior front-end dev would know most of that. But lets be real here. Most of us started out by learning how to get notepad.exe to save .html files and trying out a tag or two. It's a good resource but I'd be looking more at using this to stay up to date with modern web dev work flows (which seems to have become insane over the past few years.)

whizzkid 8y ago

For those who would like to have a solid understanding of how Web works, I would definitely recommend David J. Malan's CS75 lecture 0. (the first lecture). He has a positive vibe and the pace is optimal, so you will really enjoy the lecture. I also would like to thank him and Harvard Uni. for making this available to everyone for free. I sure would not be able to afford studying there, but these lectures helped me a lot. https://www.youtube.com/watch?v=8KuO4r5CHjM https://www.youtube.com/watch?v=8KuO4r5CHjM I think it is important to understand how basics work before jumping into details. You will not enjoy the best tools available if you don't know how to use them either.

SimeVidas 8y ago

PostCSS should be a recommendation.

a-priori 8y ago

I've worked as a web developer for about half of the last fifteen years, and work as a senior front-end developer at a large web-focused company (Shopify). So I guess I'm fairly good at it? Here's a list of things I have never even heard of just from the "Front-end Roadmap" section: BEM, OOCSS, SMACSS, Bulma, JSCS, ngrx, Vuex, Ava, Protractor, Cypress, Emotion, Radium, Glamorous, After.js, Universal, Nuxt.js, Carlo. That's only the ones I've never even heard of until today. There's a bunch more I've heard of but never used. This page is completely the wrong way of thinking about how to become a web developer.

ashelmire 8y ago
I haven't heard of any of those except BEM. Which you are using at Shopify, you just might not know it's called that. And it's not really a tech, it's just the style of naming css classes, "block element modifier" like on your home page: "marketing-form__fallback-cta" - marketing-form is the block, "__fallback-cta" is the element (only has meaning within the block), and if you had something like "--purplesmoke" that would be the modifier. Super simple, link here: http://getbem.com/naming/ http://getbem.com/naming/
- a-priori 8y ago
  Ah, thanks! Yes, in that case I have actually heard of BEM before then because I've followed that convention on a few projects.
imPndy 8y ago
I don't think it's purpose is for you to learn it all, but get the general concept of what to do/where to go next. Kinda like in css frameworks, you probably know what bootstrap is, so Bulma is basically alternative to that, but you don't actually need to know/learn them all

robgering 8y ago

These roadmaps are always hilarious to me. The real roadmap to becoming a web developer is "write code and convince someone to pay you." I suppose you could even leave the paying part off, if you are contributing to open source or writing code for yourself. Of course, you should do a great job, dedicate regular time to learning, and explore things that interest you. These maxims are probably true for success in many other careers. I suppose that charts like this could be useful to find new things to learn? But you certainly don't need to know all of this to get a job. Trying to tick every box on a learning list like this amounts to procrastinating the real tasks of finding work and writing code.

johnmarcus 8y ago
I guess that’s why it’s a path. As you walk it, you learn it.
deleted 8y ago
[deleted]

robjan 8y ago

Analyse the problem then find the correct tools to solve it. There is no need to frontload all of this knowledge.

president 8y ago

This infographic reminded me that I need to make the transition to management before I become even more irrelevant.

bennettfeely 8y ago

Roadmap to becoming a web developer in 2019: Learn HTML, CSS, JS, and work from there.

anotheryou 8y ago

I'm roughly right around or after "pick a framework" in the front-end guide (and can do some android stuff too). What level of a front-end dev am I? (I actually transitioned to product/project management at that point, just wondered)

edwinjm 8y ago

Be aware that if you want to follow this roadmap, everything in it will be different when you're half way through.

gorpomon 8y ago

The front-end dev chart is only mislabeled, that's the amount of knowledge one needs to become a senior front-end dev. I'm in my seventh year of this career, and recently obtained a senior front-end role. I've worked my way through the front-end chart and it's not wrong. To write really solid web applications that work for you, other devs, users and users of limited ability, you should know all that stuff. Only lately have I gotten my skills up to the point where I can write high quality JS, CSS, HTML, and test it fully, automation test it, organize my CSS effectively, make sure it's accessible and make sure I am at least aware of possible security issues. It's a lot of work that requires a lot of knowledge that takes years to develop, but it's not wrong.

rkido 8y ago

Even if treating this not as a roadmap to becoming a web developer, but more as a map of what an expert-level web developer might be familiar with, it's still scary. Why does modern web development have to be so convoluted? Here is a wishlist of what I want from ONE language: - A package manager like nix so that each project folder doesn't have to be hundreds of megabytes - Static typing with minimally expressive (i.e. ADTs) type system, type inference - Built in immutable data by default, so you don't have to pile on 3 different immutable data libraries - A better alternative to HTML+CSS like Elm UI [0] - One very high quality backend framework (exactly like Phoenix) - One very high quality frontend framework like Elm but with better component reusability, that makes fewer allocations, and that compiles to efficient WASM The benefits of a "one language to rule them all approach" should be extremely obvious to JavaScript developers who are following this approach with Node.js, React, etc. This huge mess of tools that they use now is a hairball of workarounds for JavaScript's many deficiencies. We essentially just need a better JavaScript. [0]: https://github.com/mdgriffith/elm-ui https://github.com/mdgriffith/elm-ui

enraged_camel 8y ago

In my opinion, "top-down" learning based on one's needs and wants works better. I want to write some text and show it on my browser. (Learn some basic HTML) I want to add some styling to the text I just wrote. (Learn some basic CSS and understand how it relates to the HTML you wrote previously.) OK, now I want to publish what I wrote so I can show off to my friends. (Learn basics of static hosting and uploading files to a web server.) I want to add a timestamp to the page that automatically updates when the page loads. (Learn what JavaScript is and how it relates to web pages.) And so on. Travel down the rabbit hole and pick up new concepts and tools as you need them. This will keep you motivated, unlike "bottom-up" learning where you learn concepts first without a clear idea of when and why you might need them (if ever).

MilanoCookie 8y ago
Yeah the approach you mentioned is very effective, it’s a deductive learning approach.

Townley 8y ago

In case anyone is as acronym-deficient as I am, and was confused by the supposedly-essential skills of "SOLID/KISS/YAGNI": SOLID (https://en.wikipedia.org/wiki/SOLID https://en.wikipedia.org/wiki/SOLID): - Single Repository Principle - Open/Closed Principle - Liskov Substitution Principle - Interface Segregation Principle - Dependency Inversion Principle KISS (https://en.wikipedia.org/wiki/KISS_principle https://en.wikipedia.org/wiki/KISS_principle): - Keep - It - Simple - Stupid YAGNI (https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it): - You - Aren't - Gonna - Need - It

baconomatic 8y ago
S in SOLID should be single responsibility principle.

amelius 8y ago

Since nowadays everything is connected to the web somehow, should we not look for a better term than "web developer"?

JDiculous 8y ago

What's the best path from a career perspective? I spent 3 years in front end, largely because I didn't have a CS degree and didn't want to study for those "invert a binary tree" style Google interview questions (I don't have a problem with theory, I just prefer working on real-world problems than studying for interviews). I was making a good six-figure salary before taking a sabbatical, but may be re-entering the workforce in the not too distant future. I need to decide whether to pursue front-end/full-stack jobs again, or to specialize in something else. Although front-end would seem to be the most logical since it was my specialty (specifically React), I'm afraid that the influx of bootcamp grads pumping out React devs will saturate the front end talent pool and make jobs more competitive and limit salaries. That and front end still seems to have this stigma of being "easier" than backend, and I don't see that changing. I don't want to invest my career in a field that doesn't garner any respect or have any long-term job security. Is there any truth to this, or am I being overly pessimistic?

cmorgan31 8y ago
It is relatively easy to spot someone with Bootcamp experience versus those with practical experience. The market demand in any relatively large city for React/JavaScriptFramework is quite high at the moment. I've seen salaries in Atlanta normalize without favoring one side over the other. The only exception is mid-senior DevOps which currently pays 25% more than either 'specialty' track mentioned.

sneakernets 8y ago

If you want to be a web dev startup hipster, this list is for you!

BigJono 8y ago
The ironic thing is that your average JS toolbox has the power to sink a startup. You need to be able to iterate fast by utilizing the basics. When you're brand new and facing 30 competitors you're going to get rolled by the 2-man team that doesn't waste all their time burdening themselves with all this bullshit. Meanwhile the other 28 are probably busy reading these flowcharts, doing resume driven design, and speaking at low tier JS conferences.

deleted 8y ago

[deleted]

michaelper22 8y ago

Nice to see relational DBs before NoSQL (learning the old and tried before the new). To follow that same pattern, SOAP should be earlier than REST. Taking a WSDL and running it through a client code generator is a fast and type-safe way to develop.

dwaltrip 8y ago

Very thorough with a nice visual design. The major issue with this roadmap is that many of the listed items are not necessary for a junior web developer, can be learned later on, or not at all, etc. I don't see any distinction between these different categories of topics. You only need to master the fundamentals of a small subset of the graphic to get your first job as a web developer.

deleted 8y ago

[deleted]

nogbit 8y ago

Following this chart would be the anti-pattern to KISS. Instead, learn how to ask people "what sucks the most?" and then go and build solutions. I've been doing that for more than 20 years for CxO's, product owners, developers themselves and consumers. One thing that has been constant is the solution is always different and the technology and tools come and go. I would also add understanding the underlying protocols will help you immensely in any front/back/ops/busdev roles. They stick around a whole lot longer than tooling or frameworks/abstractions.

5_minutes 8y ago

There are some basics you need to know: css/html/sql/php (or python) Depending on your goal, the thing is that none of these you need to know as an expert, but need to know the knowledge to collaborate with other people on it. But yes, the times that you could make “top notch” websites on your own: doing a photoshop design, doing the css/html and code it in bare php are over :) This diagram is scrary and gives a feeling of overkill.