DEV Community

Cover image for Step By Step Guide To Become Modern Frontend Developer In 2021
Nick Bull
Nick Bull

Posted on • Originally published at blog.nickbulljs.com

Step By Step Guide To Become Modern Frontend Developer In 2021

Innspired by roadmap.sh/frontend, here is my take:

1. Start

Frame 1.png

2. Computer Science Fundamentals

Frame 2.png

3. Internet

Frame 3.png

4. HTML & CSS

Frame 4.png

5. JavaScript

Frame 5.png

6. Ecosystem

Frame 7.png

7. Git

Frame 6.png

8. NodeJS

Frame 10.png

9. ReactJS

Frame 8.png

10. Modern CSS

Frame 9.png

11. GraphQL

Frame 11.png

12. TypeScript

Frame 12.png


Happy coding, Nick

If you want to learn the 6th step, JavaScript, then I'm working on a JavaScript course that fixes One thing that 97% of other courses lack: a combination of modern and practical JavaScript theory with real-world practice.

Try to get it here: javascriptcoursethatworks.com

And also, every Monday, I send my "3-2-1" newsletter for Web Developers with 3 hand-picked articles from me, 2 web development guides from others, and 1 Tweet of the week.

Join 2,900+ web developers here 💫

Top comments (34)

Collapse
 
lucagrandicelli profile image
Luca

Why React and not Vue/Angular? :)

Collapse
 
houdinii profile image
Brian B.

I always figure you just have to pick, based on what you know about what you want. It's probably not the most serious selection on this list, though, because once you know everything else on this roadmap, switching to Vue/Angular and understanding why things are different is way less of a challenge. There are still many millions more downloads of React over Angular, though. It's still king of the roost for now.

Collapse
 
nickbulljs profile image
Nick Bull

Right now React has more market share, more demand, and higher salaries than Vue & Angular.

Collapse
 
danleetech profile image
Daniel Lee

I think it is because React has the most market share.

But it's all location dependent of course!

Your city / town might have more of a need for other frameworks.

Collapse
 
oo1john profile image
John

Yeah ... it's www location, dependent :)

Collapse
 
ehsanesil profile image
Ehsan adibpouya

it can be any framework u like

Collapse
 
leoloopy profile image
Leoloopy

Is data structures and algorithm not of much importance?

Collapse
 
vybhav profile image
vybhav72954

DSA is important!

Not as a direct application, but to develop your understanding and logic.

You can code without DSA, but it won't be optimised at all.

Collapse
 
leoloopy profile image
Leoloopy

Thanks

Collapse
 
eecolor profile image
EECOLOR

What is DSA? Wikipedia lists a lot of different options: en.wikipedia.org/wiki/DSA

Collapse
 
oniichan profile image
yoquiale

Isn't DSA pretty difficult to learn? I tried to learn it but didn't retain the information because I had no actual uses for most of the data structures besides arrays and maybe maps

Collapse
 
tipizzo profile image
KABANGA David

Why Node and not Python, PHP, Java or Ruby?

Collapse
 
oo1john profile image
John

Because:

  • php it's old tech and no one it's interesting in using it, anymore
  • python it's mainly focus it is on AI and data science
  • java should be dead, until now ... oh no, it's used only in big enterprise comp.
  • regards ruby, everybody who's using it's thinking to change with NodeJs :)
Collapse
 
tipizzo profile image
KABANGA David

I think you are wrong... Okay, let consider that it is your own opinion. We can share the same point of view if and only if we talk about frontend dev. But when it comes to build backend, it is no a must to use only Nodejs. People also use django, flask, ruby, and of course java,.... Actually you can say that PHP is an old tech tool but I definitely disagree. It is up to date.

Thread Thread
 
oo1john profile image
John • Edited

People using: django, laravel, ruby, java, etc, etc because it's hart to change peoples' habits and old systems :)

Let's say like NodeJs come with somethin' new for "old back-end technology" and all others try to catch up;
and I think everybody see advantages using one language for frontend and backend on long-term and maintain distributed systems.

PS:

  1. with "old tehcnology" I want to point that the others have better build / modern features in trend with the times
  2. and of course is my opinion and I maintain :)
Thread Thread
 
tipizzo profile image
KABANGA David

And I respect your opinion. I know, Using a single language for both frontend and backend is a crucial advantage of course, I do not deny it. But there are still much more powerful languages for the backend than NodeJs. And this should remain optional according to how each developer syncronizes with the language in question. All this just to try to prove that there is not only one and unique process or technique if I may say so, to become a good developer and that much less the steps which have been enumerated in that post.

Thread Thread
 
oo1john profile image
John

Of course, there are more languages and approaches, I don't deny ... the only think I wanted to point it's that some are better than others :) no offence, peace and build something interesting :D ( no matter what tools you're using it )

Thread Thread
 
tipizzo profile image
KABANGA David

We totally agree 🤝

Thread Thread
 
oo1john profile image
John

🤝 and send to you greetings from other side of the world.

Collapse
 
viacheslavzyrianov profile image
Zyrianov Viacheslav

Looks like there are mistakes at points 5,6,8,9,19. Pictures are not related to headlines.

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Yeah I noticed that too.

Collapse
 
nickbulljs profile image
Nick Bull

Fixed! thanks

Collapse
 
skut29 profile image
skut29

do fullstack next

Collapse
 
zhengmao profile image
mao.zheng

or focus to cross-platform developing

Collapse
 
adeborat profile image
adeborat

Why need to understand node.js if your goal is frontend dev?

Collapse
 
oo1john profile image
John

Because font-end it's more complicated than we're thinking :) client-side rendering!

Collapse
 
dfkuro profile image
izmir sanchez

For this 2021 I already know reactjs, so I'm changing to vuejs this year (and probably play around with svelte), funny thing, I was rejected for a job because I didn't answer how to center a div.

Collapse
 
nickbulljs profile image
Nick Bull

"I didn't answer how to center a div"

It's really sad that some people determine your skills by not answering this. There can be a ton of reasons why you didn't answer, simply because of feeling nervous during an interview. Look at it not as a failure, but as a lesson from which you can learn. Keep going!

Collapse
 
mdalaminroni22 profile image
mdalaminroni22

Fantastic post really good information but you not share node.js

Collapse
 
jonyeezs profile image
Jonathan Yee

Hmm wonder why none mentions on animation and user interaction

Collapse
 
eduardonwa profile image
Eduardo Cookie Lifter

Nice article I see some concepts that I myself haven't reviewed or read about but no PHP eh? When did Javascript "bought" the web?

Collapse
 
kovarpavel profile image
Pavel Kovar

I would disagree with TypeScript

Some comments may only be visible to logged-in visitors. Sign in to view all comments.