Keys for You to Become a Better Frontend Web Developer

Abdelrhman Yousry on June 25, 2020

I keep getting asked from a fair amount of people who happen to have a good experience in learning Web Development but got stuck in making tens of ... [Read Full]
markdown guide

Interesting post, I like it.

I think web developers, no matter if they are front-end or backend, should learn SQL, it's pretty useful.

One of the reasons I haven't learned how to use module bundlers is because I think it's a pain in the ass to configure them. It takes longer than the usual for me to memorize things so, I don't bother learning something I consider difficult to learn.


Thank your for liking the post and reading it to the end it means a lot to me.
SQL is really vital and mind-opener for Developers to have a sense of how the data is stored there and related to each other, and not to get satisfied with json objects and API that are back to them.

Getting to know Module bundlers and read their documentations is similar to that, and a real eye-opener too, we as developers we don't stop with knowing that something is hosting our framework whether vue-cli or create-react-app, or template engines, or any way of making FE projects, and we don't try to know how it works, even just a shallow knowledge about that really helps completing the big picture.

And for the difficulty thing, always try to visit the topic multiple times, you will be amazed how every time will be easer than the last one.
Good luck, and have a good day!


I think this is what I just need to be doing
Because I always get Stucked


I agree with you for the configuration part,
That's why I use tools like npmjs.com/package/@symfony/webpack... that I highly recommend to you.

It's a kind of wrapper around webpack and made it easy to configure


Great article!
I really think my next frontend project is gonna be better than all my past ones!


You are welcome, glad to hear that.


Great article! I learned a lot from this, especially the second and fifth points about version control and module bundlers. Most articles with a topic similar to this article don't mention anything about module bundlers. I think learning how they work and learning how to use concepts like code-splitting is pretty useful.

The version control section also points out some good topics to search like no -ff and checkout -b which I don't know how to use.


That's exactly the purpose of this article, to throw definitions and you get into searching about them, thank you for doing that, Good luck.


Nice article ! Can't agree more on scoping and hoisting !

I would definitely add: learn dev functionnality of your browser. Writing multi line CSS or JS in browser, save modifications, define breakpoints etc. console.log() and f5 are not the only tools!


Thank you dear Abdelrhman,
It is useful, but Front end skills on its own it huge and takes a lot of time to be master in Vanilla js, Css and HTML. so next we move to concepts and the best practices. next tools. next frameworks and ...
With all this effort I think there is not much time left for us to learn SQL, wordpress and these stuff.
Also technology is moving forward rapidly and in my learning period JS 2020 and bootstrap 5 was released and you should also put some time for these essential new versions.

not to mention some employers ask us to have some knowledge in graphic side of the development like Photoshop, sketch and...

And if you want to done projects in between that gets overwhelmed, at least for me.

I'll be glad to hear your opinions and advice on it and how we can solve this problem in shortest time


First of all, thank you for your comment, FE is a huge topic for sure but I'm here addressing that layer of Software Engineers that are working on the FE web side and create Dynamic Web Apps, the ones that transfer data and come with login and signup, Apps like Facebook, Twitter, etc.
I didn't mention WordPress and I don't use it personally, I believe it's for projects that marketers and designers want quick deliverables for clients with control of content and some builtin functionality, so actually it's not in our stack.
Bootstrap too is not mandatory itself, CSS is, you need to know how Bootstrap works and what it offers like grid system and stuff like that, but not to save its class names by heart.
I don't either believe that Developers that focus on functionality and making Dynamic Apps should know the design aspect, just how to use photoshop, and know colors and how to get measures, in some companies, styling the Web App is a different job and another person's responsibility other than the FE Engineer, they may be called UI Engineers.
So you can decide and focus on what part you actually like and you're good at, and having an idea of how everything else works is a great advantage.


Thank you so much dear Abdelrhman,
Yeah I'm also not into learning all these stuff, but If I want to work on freelance route I have to learn WP, and you can achieve bootstrap effects just with pure CSS and Js and for sure there's no need for a front end developer to know about Sketch or Photoshop becuz that's UI designer's task.
But the problem is that employers demand it, and if we look at some frontend job listings, almost all of them listed bootstrap and some mentioned Photoshop/sketch
The other day I had a customer in freelancing market and he didn't have a design but wanted design and code altogether. So I told him it's two different tasks and areas done with two different people and he replied that every other developer in the industry that he had talked with would do the design task too!
Not surprisingly, I couldn't get the job :D
I mean that although you and I have same meaning for someone as a front end developer, the market demands more of us and that takes huge time and making it harder to move forward.


"Hoisting: The language offers solutions to read and execute your code, in a very unique way and order" - There's nothing unique about it. Almost every programming language parses the code and initializes the declarations first.

"map, find, filter, reduce ... you won't pass a day as a skilled JS developer without using them." - Using them the wrong way is worse than not them.

front-end, back-end... these are all just meaningless separations. A true programmer knows how to program.


Good article/chat and would like to add one note:
As a backend-first developer, TypeScript has been the lifesaver. It brought me closer to JS than anything else. So yes, choosing one framework (in this case, TypeScript) to learn things before fully diving into the world of JS, is also a useful thing to do.


Your post it's one of the most valuable things (at work value level) I have read in the last months, keep up the good


Your words mean the world to me! Thank you!


This is absolutely what I needed to hear.

Amazing write-up


Printed to keep over my desk near PC.
I really like designers world struggling with colors fonts and brief animations, so I will have to balance some of your wise tips :)



Thank you for such a warm comment!


Great article. Thanks a lot


You're welcome, glad you liked it.


You just covered all the needed information thanks!


This was a Great article. Thanks for the guide.


Really helpful for my FE career. Thanks for the inspiration!


You're welcome, happy it helped!


Thank you, so happy you liked it!


Really amazing stuff. Thanks for sharing.


You're welcome, thanks for reading


I would recommend to try hqjs.org this smart server and build tool require no configuration, yet support all kind of frameworks and metalanguages. It will boost you in your Frontend career.


Nicely written, appreciate the thoughts sounds like what I need to hear in many ways. I think I would start with learning more on bundlers.


This is a good article. You should do a similar one for backend devs, not to take anything away from this, it’s fantastic.


Thank you, I'm glad you liked it, will do my research and try to make a follow-up soon.


Thanks man, very good article.


Oh my! This is a great article! Thank you so much!


You're welcome, glad you liked it!


As a junior dev, this can serve as a tremendously useful checklist for leveling up. Thank you!


Hey guys, i love designing and i'm expert somehow but i can't understand frontend at all. I tried a lot :(


Front end (Well, JavaScript) has a whole lot of additional tooling / frameworks / lingo that you have to deal with: Babel, TypeScript, Webpack, ES20XX, AMD vs ESM, Vue / React / Angular / Ember / whateverJS... the list goes on and on and on and it's all... so... exhausting...

code of conduct - report abuse