
Roadmap to becoming a web developer in 2019 - nkjoep
https://github.com/kamranahmedse/developer-roadmap
======
jaredcwhite
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!

~~~
peckrob
> I also deeply resent the notion that you have to "choose a path."

Yup. Been doing this since 1999.

The whole "front end"/"back end" thing is an incredibly unrealistic and
unnecessary division. Real life work is much more complicated and nuanced than
that. I don't know of anyone, maybe outside of (as you said) huge companies,
who works that way, having "picked a path" and entirely focusing on one side
of the stack. Even if you are a "front end" developer, you are going to need
at least passing familiarity with the other side, and vice versa.

Right now, I have back end code open in one split, front end JS in another,
HTML in another, an ORM model for reference, and Paw with some API calls. All
of these things go together, and I would have a hard time understanding any
single part without being familiar with the others.

After you've been doing this for a few years you realize that code is code,
whether it's running on a server, or in a browser, or on a desktop or mobile
device. It's just code. Once you understand how to "think" like a developer
(which in my experience is the biggest hurdle people face), the differences
between any of them aren't nearly as large as they seem, and almost all of
those things in that graphic are just abstractions over code.

~~~
Domenic_S
Given the trajectory of front-end frameworks like React, I'm pretty sure
front-end and back-end are going to be two very separate tracks about 5 years
from now. Front end is just getting too complicated to be a complete expert in
while also being an expert in writing microservices too.

~~~
cronix
Yes, the axiom fits pretty nicely here: "Jack of all trades, master of none."
It's _extremely_ rare to find someone who is a master of all, can keep on top
of current tech (in all domains), etc. Web development is becoming like the
medical profession, where every single subfield is specialized. Yes, there are
people who can do that, but they are far and few between. Most back end devs
are typically not visually creative types like are typically needed for the
front end, and vice versa. How many good back end devs are also good graphic
artists and at layout (beyond adding a background image to bootstrap)? How
many front end devs are good with SQL?

------
sudofail
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.

~~~
MuffinFlavored
Mentioning SQL means backend which implies they need to understand that a
network connection is incoming to a server bound on a port with a method, URL,
list of cookies/headers, etc. with the purpose of serving a request with a
response

CORS potentially might be worth mentioning to get a beginner familiar with
security (why can't I just scrape Facebook cookies from my personal website),
yada yada.

I think that's kind of still high level to hold limited attention spans
without overwhelming but deep enough to prove that there's a bit more going on
beneath the scenes.

I feel most new web developers in those jumpstart "become a programmer in 60
days" classes probably know a bit too much about React and probably not enough
about the sockets/IPs/networking serving the static assets. Probably not a
requirement on day one, but I bet it might make their first "I have to debug
this all the way through the stack" problem less painful.

All hypothetical, at least.

~~~
sudofail
I completely agree. The basics of networking, sockets, and the like are
probably better taught before frameworks even come into the picture.

To me, the idea is to get a shallow understanding of everything involved from
hitting a page, submitting some data, and having it be displayed back to you.
Once you have that picture in your mind, adding things like frameworks, git,
docker, etc, will be easier for the person to grasp.

~~~
wasted_intel
While I agree that knowledge of what's below those abstractions is important,
you also need to cater to your audience. Getting something working on the
screen in front of you is exciting for new folks; lining up little victories
with increasing complexity feels like a path that would be more enjoyable to
follow. As long as the person maintains a curiosity about the underlying
technology, they can work down into the lower layers as their interest
dictates.

~~~
MuffinFlavored
I think they might be overstimulated.

Hello, world from a compiler in a terminal is a good start.

You should show them how many lines of code a web browser is and say "here is
what it takes to get <p>Hello!</p> on the page" lol

Scare everybody away :)

------
robgering
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
I guess that’s why it’s a path. As you walk it, you learn it.

------
a-priori
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
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
Ah, thanks! Yes, in that case I have actually heard of BEM before then because
I've followed that convention on a few projects.

------
onion2k
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
And getting some GitHub stars.

------
axvk
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.

~~~
gdulli
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.

------
nogbit
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.

------
rkido
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)

------
megaman8
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_
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.

------
aasasd
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.)

------
pgm8705
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
Is Why's The Lucky Stiff not the thing anymore? Or was that just for Ruby...

~~~
a-priori
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.

------
enraged_camel
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
Yeah the approach you mentioned is very effective, it’s a deductive learning
approach.

------
gorpomon
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.

------
sixQuarks
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.

~~~
mscasts
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
I take it, that you've never had to work with html emails then? _groans_ You
lucky soul!

~~~
rurp
Creating HTML emails for Outlook is what I imagine the entire web was like
several decades ago.

~~~
dwd
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.

------
whizzkid
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.

------
JDiculous
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
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.

------
Uptrenda
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.)

------
dwaltrip
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.

------
bennettfeely
Roadmap to becoming a web developer in 2019:

Learn HTML, CSS, JS, and work from there.

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

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

~~~
BigJono
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.

------
Townley
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
S in SOLID should be single responsibility principle.

------
5_minutes
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.

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

------
michaelper22
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.

------
anotheryou
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)

------
getsomeboi
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

~~~
imhoguy
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.

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

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

------
blue4
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.

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

~~~
forgueam
It's hard to see, but I think Java and .NET are linked to the "Other Options"
box in the chart.

~~~
aasasd
Yeah, alas the proximity principle isn't on the map.

------
throwaway928192
"solving" simple problems by creating more complexity

------
SimeVidas
PostCSS should be a recommendation.

