DEV Community

Cover image for How to Become a Pro 😎 Front End Developer💻

How to Become a Pro 😎 Front End Developer💻

ThemeSelection on October 12, 2020

Are you a starting frontend developer's journey? Then this guide is for you. You'll get to know all the essential aspects and steps.🤩 Wh...
Collapse
 
axiol profile image
Arnaud Delante

That's a very technical path. Absolutely not saying it's a bad one, but I think it's missing something important a frontend dev needs : Empathy. I mean, when you get a client request / a design to work with, you need some kind of sensitivity on how people will use what you're doing. Is the timing of this animation right? Does it even need that animation? Is it ok to have to click there? ... You can learn all the technical info on accessibility and UX, but at some point, it has to feel right

Collapse
 
theme_selection profile image
ThemeSelection

Hello Arnaud,

Thanks for providing your inputs, yes this post does not cover UI/UX and animation related points/topics for a front-end developer and those are very essentials too.

We will improve or create a new post on this subject :)

BTW refer to our article Awesome Design Resources for Every Developers Series' Articles series for more UI/UX related information.

Stay Safe🙏

Collapse
 
perpetual_education profile image
perpetual . education

If you won't say it, then we will! "It's a bad path!"

Unfortunately - it's the path that many take. This is bad for the world.

Collapse
 
rajeshroyal profile image
Rajesh Royal

Its an agency which is trying to gain attention, please ignore such posts. I'm afraid dev will be like medium or any other platform soon.

Collapse
 
rkyoku profile image
Renaud Kyoku

I don't mean to undermine the work that was done here, but I cannot support this opinionated list. Sure, you claim "personal recommendation", but you still limit the options to the only ones you deem worthy, still claiming that "this is the one path to follow to become a front dev" (and no other one).

But guess what? I'm not using any of this (well, except for the common basics of course) and I'm still pretty damn good at my job (full stack for that matter), that I have been doing with passion for 15 years.

Plus, you "forgot" plenty of viable options (like: Svelte, Qt, you name it), and plenty of other paths (like: not using a monolithic framework in the first place, template engines, canvas based options, etc.).

People absolutely, positively, do NOT need to learn everything in this huge (but still incomplete, as it has already been said in the comments) list of yours.

I decided to leave this comment because I think it is NOT okay to scare (or impress?) newcomers in web dev with a huge list of useless technologies (in the sense that you don't need half of them to be proficient as a web dev).

Learn HTML5, CSS, ES6, and then add some technologies into the mix: a preprocessor (LESS is easy and powerful enough), a task runner (Gulp is pretty good), EITHER a template engine (pick your choice... Handlebars for example) + a router, OR a framework (Svelte >> all)... and you can do pretty much anything. That's it.

Yeah sure you could learn what PWAs are, or how to compile to native (mobile/desktop), or dabble with WebAssembly or the Canvas and everything, but in 95% of cases that's not required.

IMHO you'd better split your stack into several levels of progression... Real levels, that is, not a linear progression implying that "you need to know everything".

Well anyway, just my 2 cents, and I did not even dig deep.

Looking forward to see an improved (or at least alternative, because I do not speak the one and only truth) version! 👍

Best,

Collapse
 
johnharding profile image
John Harding • Edited

To be fair the basics you listed out are what a junior dev should learn. This is "how to become a pro" which covers every aspect of front end.

And if you want to target newbies I wouldn't recommend svelte.. that has a long ways to go. And even for advanced devs, svelte is not going to be used in most production sites for the foreseeable future. It's something you'll dabble in on the side for now. It is much less required to be a "pro" than everything else in this list.

Collapse
 
rkyoku profile image
Renaud Kyoku

Well, again, I consider myself a "pro" (unless you assert that I cannot be, just because I do not use the technologies you listed).

I fully agree with you that Svelte will never make you as employable as React or Vue, but it still is an easy to learn and slick framework, where React is a mess and has a steep learning curve that I (personally) do not deem justified.

I think you are mistaking "being employable" and "being a pro". Yeah sure, if your goal is to follow the mass/hype (they tend to go in the same direction), learn yourself some React and you'll be employable. Worse than that: learn yourself some WordPress theming or whatever, and you will be employable.

But you can clearly be a pro and still not follow the HDD that tends to blind people nowadays. I tried React, Vue, Angular... Did not like that. I use a template engine with a compilation feature, and a tiny router, and I am ready to roll in a jifi. No need to learn a framework. No need for the user to download 2MB of framework or whatever. I have a fast, easy to learn, and easily switchable stack. Go and try to switch from React to Angular. With my techs, I do not need to.

That's the power of going framework-less: speed, agility, no need for extra learning, even more devs able to work on the project... Almost only positive sides.

And you still are a pro even if you go framework-less or whatever.

This reminds me of this guy on YouTube that does woodwork with old-timer manual tools (zero power tool, zero screws). (He is a bad ass and his videos are really relaxing). Of course it takes a bit longer and this is not 100% comparable to going framework-less, but my point is: this guy is still a pro. He CAN use power tools if he wanted to. But he ALSO can work without these tools. That makes him better than the average wood worker (or carpenter or whatever) who would be lost and helpless without his precious modern tools :)

Well, that is my humble POV anyway :)

Thread Thread
 
johnharding profile image
John Harding

Yeah I disagree completely. It isn't about following the hype. In fact it sounds like you are going against the hype simply because it is popular. I developed with vanilla JS from about 2008-2014. I then moved to Angular, and then Vue, and now React for the last 4 years. If you are making anything remotely complex and aren't using a framework, then you're doing it wrong.

Thread Thread
 
rkyoku profile image
Renaud Kyoku

I guess you are entitled to you own opinion :)

Collapse
 
damian_cyrus profile image
Damian Cyrus

Each time I see images like this it feels in the end like:

  • Internet
  • HTML
  • CSS
  • JavaScript
  • more JavaScript
  • JavaScript not in browser
  • lot more JavaScript
  • some things missed on the way (mentioned by others each time in comments)
  • keep learning (JavaScript)
Collapse
 
kiril6 profile image
Kiril Delovski

You Deserve a medal for this, bravo for the dedication and tremendous work!

Collapse
 
theme_selection profile image
ThemeSelection

Thank you very much for your appreciation.
It means a lot.

Collapse
 
sativ01 profile image
sativ01

This guide although has an impressive list of tech, but I'm missing here the reason behind learning all of that.

IMO the list of tech you worked with doesn't make you a Pro.
What makes you a Pro is knowledge:

  • why to use this or that tech
  • general app architecture
  • why when and how to manage app state
  • what patterns to use for doing various stuff
  • being able to quickly grasp the app structure to see the best way to implement a particular feature so that your colleagues don't WTF on reviews.

this only comes with experience and continuous learning.
Lurking in the code, participate in open source projects that you use, etc.

By the way, if I find someone who would claim this stack in their CV and 3 years of experience I'd question the proficiency. It's most likely to be a very shallow knowledge of all that stuff.

Collapse
 
louislow profile image
Louis Low

Ho Ho, the frontend is scarier than the backend. But I like it.

Collapse
 
theme_selection profile image
ThemeSelection

😃Thank you very much for your appreciation🙂

Collapse
 
theoarmour profile image
Theo Armour
Collapse
 
neneji profile image
Haozhe • Edited

15 . Practice!

Collapse
 
theme_selection profile image
ThemeSelection

True..!!

Collapse
 
piyushkmr profile image
Piyush Kumar Baliyan

A nicely written article, and though I have to agree with some of the comments, that the list/path is very exhaustive and technical, I also have to say it covers a broad range of technologies.
So, here is what I have to say, there are multiple paths here, and multiple options/alternatives and someone doesn't need to go down all the paths.

However, I'll say that if you want to grow then have a basic knowledge of all the terms listed here, there are popular terms thrown around, and it will help if you know the pro-cons of these technologies.

And what goes into becoming a frontend-developer:

  • performance optimizations
  • good UX/UI (not talking about good visual design here)
  • Scalable and maintainable code
  • and the list goes on...
Collapse
 
ramdoni007 profile image
Anak Esemka Software Engginering 4ever

Iam Vue Js Vue Js Club hehehehehe

Collapse
 
darkeye123 profile image
Matej Leško

I like the list and there are some good resources. But imho it is too wide. Master all of this will take years and when you will be done, it will be in most cases the "old" technology. I mean just look at the JS. To master it to deeply understand what is happening takes some time. And we are talking here even about mobile development which I personally perceive as an extra bonus :)

For general knowledge and basic hands on it is very good. But this list can make an impression that you are not a pro or even employable when you don't know all of this. Which is not true :)

But I like the outline, where you can pick if something took your interest. Big kudos you for that :)

Collapse
 
lucascumsille profile image
Lucas Cumsille M.

Thank you so much for this article! It’s exciting how you can always learn new things ... sometimes seems like the list never ends😅

Collapse
 
theme_selection profile image
ThemeSelection

Thank you very much for your appreciation 👍. We are glad that you find this article useful.🙂

Collapse
 
douglasfugazi profile image
Douglas Fugazi

This is a good selection of items to know if you are thinking to be a Front End developer. Thanks. I will share it.

Collapse
 
theme_selection profile image
ThemeSelection

Thank you very much for your appreciation 👍. We are glad that you find this article useful.🙂

Collapse
 
warengonzaga profile image
Waren Gonzaga

Thank you for sharing this with us!

Collapse
 
theme_selection profile image
ThemeSelection

Thank you for your appreciation.🙂

Collapse
 
piyushkmr profile image
Info Comment hidden by post author - thread only accessible via permalink
Piyush Kumar Baliyan

One more thing I observed.
Just put these 3 images in a comic strip and although it is totally legit, people will easily believe that this is a JOKE...

Collapse
 
kiril6 profile image
Kiril Delovski

Test your javascript knowledge and know if you are ready for a javascript interview by accessing this quick quiz js-quiz.delovski.net/

Some comments have been hidden by the post's author - find out more