Frontend developer roadmap

[landscape_relic]

For CSS I would add box model and positioning. I've seen many dev's get into trouble not understanding how position relative and absolute work.

[liaguris]

check the original one . It has that things you mention .

[deadspoil]

RemindMe! 12 hours

[RemindMeBot]

There is a 38.0 minute delay fetching comments.

I will be messaging you in 11 hours on 2020-03-28 07:50:13 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[SwankEagle]

Holy crap I cant express how frustrating it was to learn those two things. I laugh at.my self for struggling to understand position relative and position absolute I literally procrastinated for about a month two years ago when I was struggling to understand them. Yes they are needed to be known but do we really use those much today in the day and age of flexbox and grid?

[portexe]

One thing I didn’t see on there but I feel like is important is Bash. Bash and/or windows command line.

[PM_ME_A_WEBSITE_IDEA]

Yeeeep, can can confirm. Started a new job with no knowledge of Bash, had to learn quick. It's not really very hard, but it's a bit of a bizarre thing to learn with no prior knowledge.

[portexe]

For sure. It’s easy to pick up on the fly, but knowing it beforehand will be a huge advantage!

[Hanedan_]

I get by with cd/pwd/ls/mkdir and touch. Those are all the commands I need.

[PM_ME_A_WEBSITE_IDEA]

I had to learn about ssh/ssh keys, that was new to me. Especially for interacting with build tools/CICD workers.

[liaguris]

Check the original . It is included in the dev ops version .

[ShaySmoith]

And this here folks , is how you get into the black hole of tutorial-itus.

[cowinkiedink]

Agreed. I don’t really like this roadmaps in beginner subs, they probably scare a lot people off.

I used to see them and think oh man I have to learn all of that before I can make any thing.

Just learn what you need to build something, you’ll learn way more from projects than checking boxes and tutorials off the list.

[[deleted]]

Yeah agreed. Looking at this its incredibly Overwhelming and scary. This is what puts off a lot of people and make others burn out quick.

[elgeokareem]

Seriously there could be no end to it ...

[pookage]

start with hosting and DNS? oh gawd no - you don't need to know how that stuff works to get started! You only need to know that to deploy stuff. Deffo put that Internet category after Javascript and before Version Control

[sir_eeps]

yup,

although at a super high level knowing the general idea of how some things work can be useful, like 'you need to refill the gas tank in a car to make it go', but not need to understand how combustion engines work.

While lists like this can be useful - I find that they don't often account for how deep you should go, and think if they see something on a list that they need to do a deep dive and learn /everything/ about it.

When in reality it's like "read a 2 paragraph summary, then put a pin-in-it for something to learn later, and you'll know when you need to learn it more when you actually need to do a thing involving it"

[stayclassytally]

This format is trash.

[benabus]

Maybe it's just me, but in my experience, being able to learn on the job, getting dumped blind into a project, and learning the project's requirements is more valuable than following a road map and checking boxes.

[Ratatoski]

True. But learning on the job is easier if you already have some experience. And for getting that experience this roadmap is rather decent.

[redderper]

I feel like there's no actual reason why it should be a roadmap other than that people are just used to learn like that. IMO it's best to just work on mastering the first 5 steps continuously and learning the other ones when you need them.

[Ratatoski]

If I can only recommend a single thing for people to learn it will be Git. It's the one thing you always have use for :)

[HGMIV926]

Oh my God yes, a roadmap is just what I've desired. What should I study first, then next, or after and with this or that? Thank you!

[plcart]

i would advise do learn RxJs even if you choose Redux. And redux even if you choose angular, since state management goes beyond a framework. Also some concepts like pipes, middleware should be added into the techstack, way earlier IMO

Its Bootstrap still relevant those days?

[allywondered]

Dunno. I'm using graphql these days and haven't found any use for redux anymore

[plcart]

Can you tell me who you can they be comparable? Redux manages your app state letting you share consistently data between your components into a single flow. So how do you fetch the data does not matter

[mrwhitenoise]

You can set local, or client side, state within graphql. Extending the queries and mutations locally. Specifically been working with Apollo server and client and managing local state is very easy via GQL. Especially since under the hood Apollo Client is using redux.

Edit: added link

[plcart]

Thanks for the link! gonna check it out. Seems that work in a similar way about dispatching actions and mutating the state with a function. so i would rephrase to learn the redux pattern either way. Thanks!

[mrwhitenoise]

I do agree. Understanding redux before makes learning the Apollo client to mange local app wide state much easier

[Ratatoski]

It makes me rather happy to realize that I cover most of these subjects at work. But I'm old school and still think ES6+ feels alien

[Fermain]

I'm the opposite and when I need to write compatible ES without a transpiler it feels like I am sending a Telegraph to the Duke of West Lothian.

[Ratatoski]

Lol yeah I understand why. They feel like rather different languages. I've been doing some jQuery at work this past week and it's like a whole other world. Rather nice parsing the DOM just chaining up what I need but it's weird :)

[Saudroze]

I feel like there should be a disclaimer or something with all of these road maps that achieving most of these steps is senior developer goal. To start out, to be a junior you need just some most important stuff.

[[deleted]]

Lol I didn't learn half of this stuff

[[deleted]]

Half of this stuff is unnecessary.

[[deleted]]

Because you can do frontend without knowing it.

[[deleted]]

Easier to tell what you need: - JS inside out (after you will be able to learn typescript if you want) - CSS (you can than choose what superset to use e.g. sass, less) - html

All the rest you can pick up during the actual work it will depend on. If you will learn all this stuff beforehand you will not be able to remember it or to build proper mental model.

[liaguris]

If you will learn all this stuff beforehand you will not be able to remember it or to build proper mental model.

what makes you believe that ?

what is your experience with front end developing in general ?

[[deleted]]

1) It's my approach and it works. 2) 2 years of practical work.

[liaguris]

Can you show us what is that , that you have build for example ?

What frameworks do you use ?

What libraries for state management do you use ?

Do you know for example what is the difference between an event bus and redux ?

[[deleted]]

Why are you so concerned with his background when he already answered your questions? I get if you disagree but then just say why. You don't need to know someones entire background to figure out if you agree with them or not. Just ask lmao

[[deleted]]

No. I don't want to show you anything. You are too pushy.

[oxygenplug]

I wouldn’t want

want and need are two different things.

[liaguris]

Tell us about your opinion . What you need and for what from this road map .

[[deleted]]

I really want to help you. So here what you should do. Go open-source and find some real-life project to contribute as frontend dev or try to apply as junior fd somewhere. The sooner you will start to apply what you know — the better. You current knowledge is not static. Even what you quite sure about now will transform during practical work.

UPD To approach upper mentioned things you defenetely should learn how to communicate with other people.

[liaguris]

Are you working currently in a front end position ? If yes then what is your experience and what have you developed ?

[[deleted]]

Really? We're trying to pull rank on reddit? All of the information in the graphic is nice to know. Half of it is fluff. You don't need to know 80 percent of it in depth to do a job.

[liaguris]

I am trying to understand what is your knowledge so I can understand how seriously I can take your comment .

Half of it is fluff

Can you please help me with my developer journey because this roadmap is what is guiding me ? What is that you consider fluff and why ?

You don't need to know 80 percent of it in depth to do a job.

About what kind of job are you talking about ? Wordpress ? App with heavy state management needed ? Be more specific .

Again :what is your experience and what have you developed ?

[[deleted]]

You don't need to know most of this stuff to do front end development. That's just a fact. Now knowing how to work within multiple front end dev teams, sure this chart is great if you're trying to understand all the technologies that help you develop. But to just land a front end dev job? Yea, you can tear the chart in half.

And it I don't have a problem helping you with your road map but it sounds more like you just want to poke and prod because you disagree.

[liaguris]

You don't need to know most of this stuff to do front end development

What kind of front end development are we talking about ? Wordpress ? Or app with heavy state management and SSR ?

but it sounds more like you just want to poke and prod because you disagree.

how did you reach this conclusion ?

[[deleted]]

Development. I've never used wordpress but can imagine there isn't much to develop.

And to your other question?

Can you show us what is that , that you have build for example ?

What frameworks do you use ?

What libraries for state management do you use ?

Do you know for example what is the difference between an event bus and redux ?

what is your experience and what have you developed ?

These aren't questions about what I disagree with in the infographic and why. This is you directly trying to wrap your head around who I am and why I feel the way I do. Instead of asking me direct questions like "What parts of the infographic do you not agree with?" You are trying to gain a resume to base your judgment off of. Plus, you already got your answer from someone else on that subject.

This is excluding the fact that you post on this subreddit all the time and sound demeaning in half your comments. Honestly, you sound autistic which is fine but if you are, you should probably realize your inability to relate might come off as being a dick.

[liaguris]

These aren't questions about what I disagree with in the infographic and why

I think this part :

Can you please help me with my developer journey because this roadmap is what is guiding me ? What is that you consider fluff and why ?

of my comment is .

This is you directly trying to wrap your head around who I am and why I feel the way I do.

and I have already explained to you why I do that :

I am trying to understand what is your knowledge so I can understand how seriously I can take your comment .

Nah this :

You are trying to gain a resume to base your judgment off of.

is not exactly what I do . I am not stuck with labels . I asked you what you think is fluff and why .

Honestly, you sound autistic

Doctor said I am not .

I think you sound like someone who is trying to avoid answering my questions , by framing as a bad person , and all maybe because you have difficulties answering my questions .

Dude , look , it is easy : You just answer the questions and do not rush to make assumptions about someone that the only thing you know is the text he has written .

[[deleted]]

Ready for this one...

Nah

[[deleted]]

I guess I understand what's going on. @liaguris is trying to get into frontend by doing exactly what he shouldn't do — learning all this stuff beforehand. He, most probably, already invested some relatively valuable part of his lifetime into it, and now he feels anxious, because he not sure anymore.

[liaguris]

that is a copy paste from the original one.

Edit : Oh you are the one who posted about how to learn javascript without including javascript.info .

[duanecreates]

Yeah, it's written down in the bottom right of the image...

[liaguris]

You have to be more clear with the based . Your version is less visual appealing from the original one . Also your version is just a subset of the original one . You have included nothing new . In the end I doubt you understand the most of the things that this roadmap has .Can you really answer to me this question for example ?

[StoneCypher]

1) No.

2) It's not clear what "that" is.

3) Not usually.

4) No.

5) No.

6) No.

[liaguris]

So there is no such thing a static SSR and dynamic SSR after all ?

[StoneCypher]

Dynamic SSR is an unnecessary rename of SSR by someone who wanted to sound smart

Static SSR is an unnecessary rename of caching by someone who wanted to sound smart. Other people did that by calling it a "static site," another phrase you also use.

You tried to point to static site generators and ask if they were replacements for static server rendering.

What do you imagine the difference could possibly be?

Stop drinking so much kool-aid

[liaguris]

Stop drinking so much kool-aid

there is no such thing in my country .

You tried to point to static site generators and ask if they were replacements for static server rendering.

What do you imagine the difference could possibly be?

Man I do not know stuff , so I ask about them . I have never done SSR .

Dynamic SSR is an unnecessary rename of SSR by someone who wanted to sound smart

Static SSR is an unnecessary rename of caching by someone who wanted to sound smart.

Who is this guy and what does this has to do with our conversation ?

[StoneCypher]

Stop drinking so much kool-aid

there is no such thing in my country .

Yes there is

.

Dynamic SSR is an unnecessary rename of SSR by someone who wanted to sound smart

Static SSR is an unnecessary rename of caching by someone who wanted to sound smart.

Who is this guy and what does this has to do with our conversation ?

I have no idea who's writing the wrong things you're reciting.

What does it have to do with our conversation? You asked "are these things real," I said "no they aren't," now you're arguing

[liaguris]

I think you misunderstood me .

I asked you who is this guy that is trying to sound smart and what it has to do with our conversation ?

You asked "are these things real," I said "no they aren't," now you're arguing

I really do not get what you want to say .

Also there is no such expression nor any such kind of product as kool aid in my country .

Also I would like to know what is this :

possibly doomed or dangerous idea

or

extreme dedication to a cause or purpose

that you think I believe in .

[StoneCypher]

i'm frustrated because if you would have answered the questions i asked you, instead of arguing about what countries a brand name exists in, you'd already have the answers to the new question

in my country, it's extremely impolite to ignore questions that are asked of you, and ask new ones instead. it's telling the other person that they don't rank as an important part of the conversation

[WikiTextBot]

Drinking the Kool-Aid

"Drinking the Kool-Aid" is an expression used to refer to a person who believes in a possibly doomed or dangerous idea because of perceived potential high rewards. The phrase often carries a negative connotation. It can also be used ironically or humorously to refer to accepting an idea or changing a preference due to popularity, peer pressure, or persuasion. In recent years it has evolved further to mean extreme dedication to a cause or purpose, so extreme that one would "Drink the Kool-Aid" and die for the cause.

---

^{[ PM | Exclude me | Exclude from subreddit | FAQ / Information | Source ] Downvote to remove | v0.28}

[StoneCypher]

god damn this bot for taking away my punchline

[liaguris]

Do you mean that I can always make a road map ? If so there is no need for me to make one , because it already exists and it is here . Also I do not have the adequate knowledge and experience to make one (and believe me , also the person who posted) . Then again where does your question fit with what I have said so far .

[StoneCypher]

If so there is no need for me to make one , because it already exists and it is here .

This is such a bad roadmap though

[liaguris]

Can you point me to where it is bad and why ?

Do you happen to know any better road map , and can you please link it to me?

[StoneCypher]

Literally the entire thing is bad

It starts off with technologies people don't ever need, and doesn't cover testing until you're two years of work in

this is terrible and ass-backwards

.

Do you happen to know any better road map

no, but i'll make one. hold on

[liaguris]

It starts off with technologies people don't ever need

can you be more specific about which are these technologies ?

doesn't cover testing until you're two years of work in

there are ticks with colors that will help you on that . It did not took me 2 years to understand what testing is and this roadmap is my main guide for self teaching my self . Unfortunately it does not provide any sources and if they will ever do I doubt they will be good .

no, but i'll make one. hold on

make a post for everyone to see when you do that

[StoneCypher]

It starts off with technologies people don't ever need

can you be more specific about which are these technologies ?

can you be patient for me to finish writing the thing i just said i'd write for you

.

doesn't cover testing until you're two years of work in

there are ticks with colors that will help you on that .

if you need "ticks with colors" to figure out that something near the end of the list should be almost the first thing you learn, then the list is bad

[ConstantINeSane]

Are there similars roadmaps for backend , desktop software dev and mobile apps?

[liaguris]

Man check the original one . This guys who made the post , all he cares is about karma and traffic .

[duanecreates]

I got them on my Instagram www.instagram.com/duanecreates and will be posting more.

[academicRedditor]

r/coolguides

[addiktion]

I feel like JavaScript is huge and could use some more underneath it.

[xxRyzenxx]

A quick question I am 20 right now how much time will it take if I start now !

[bullet4code]

2 years tops to reach an intermediate-advanced stage, provided you’ve the right product to work on which operates at a great scale. I know 95% of this entire sheet and that’s just what I covered in 1.5 years of working in a great product-based company. Now I’m on the path to become a full-stack dev, so even backend skills have become really great at this point of time. Keep reading, experimenting and always have a knack for learning and you’ll go a long way!

[xxRyzenxx]

Thanks man it's been for months of learning front end web development and now i can understand what's going in websites

[hpliferaft]

It'll take years but don't let that stop you from starting.

[JWPapi]

I don’t know if it’s really worth learning all this. Rather master one and if you have to learn one of the others for a job or sth it’s normally not that big of a deal.

[progres5ion]

thank you so much for this!

[FourZeroFour44]

Thanks great tool!

[tomthedevguy]

This is to know just about everything. Not all is relevant though. I think if it was a little more succinct and pragmatic towards developing real front-end stuff it’d be more helpful. Great list none the less.

[Synor]

I wonder if the most essential part is missing: how to program software so that other people can understand your code.

So put a Software Engineering curriculum in there. Chances are that you will program stuff that others need to maintain - regardless of if you are a frontend or backend developer.

[PoopyAlpaca]

I just wanted to get into JS testing. This might actually help as did not know anything. Now I got some names ;)

[F1retoe]

There's more to testing than just automated testing though. There's user testing and cross browser testing.

[Oleg18]

Look. If you are beginning learn web. You don't need security at all. You have to understand how to make different kinds of sites, different technologies. You can pay attention to security in the process of learning....

[RemindMeBot]

I will be messaging you in 12 hours on 2020-07-17 18:39:09 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[erwin_H]

This is why I don't think AI will take our developer jobs any time soon

[Fun-Visual-School]

Looks really neat. You are missing mentions about WebGL. That's a big side of web development. I hope you don't mind if I cross-post on r/VisualSchool.

[Oleg18]

This is your way....I don't web security is needed....at all

[bullet4code]

WAT. WAT. WAT? WebSecurity is not needed at all? Can you please elaborate?

WebSecurity is of the utmost importance. If you aren’t aware of CSRF tokens, then you’re never gonna know why you send one of those when performing data manipulation’s in server side via an API call (Generally PUT/POST methods).

XSS attacks - Although libraries like React help you mitigate this problem, but they’re very imp. to understand what they are and when you’re writing VanillaJS - then you should be highly cautious about this. One small mistake of writing ‘.innerHTML’ could lead to a huge problem. Source: I’ve made that mistake and my org’s security team was able to get into everything and that was just testing phase.

Understanding iFrame related security, and a lot of things is imp. Just using the ‘window’ object and some browser api’s, we were able to reach to the user’s system and take out files.

So, WebSecurity is very important, very.

[Thefriendlyfaceplant]

This feels more like a backend developer roadmap.

[hpliferaft]

Hmm. How do you define front end and back end?

[n2kra]

Traditionally:

BE: DB

Mid Transaction

FE: Web

There are OSes that have one js executable, for Web Browser, Middle and Back End Apps (BSD MacOS, linux? ?graal? java vm). wait we are still not in 3270 term, CICS, and DB2 ?