When you go online looking for resources on how to become a better front-end developer, you most probably would see things like learn HTML, CSS and JavaScript, then pick a JavaScript framework.....This is actually very solid advice, and it should be enough to get you started.
But in reality, it's much more than that, and in this article, I'll be sharing some tips on how you can become a better front-end developer.
1. The devtools is your friend
Whichever browser you use, it could be chrome, firefox, edge, opera, or anyone really. There's usually a form of developer tool or inspector that you could use to easily debug your websites, test the responsiveness, throttle network connection, and so much more. Familiarize yourself with the features of the devtools you're using as it's going to be a very good companion throughout your journey as a front-end developer.
2. Don't get too attached to your work
No matter how long it took you to implement a feature, or how amazing you think your work looks, you could be asked at any moment to change it.
Imagine working on a feature overnight, then you make a pull request in the morning, only to be told "This won't work, let's change the implementation". If you're too attached to your work, you might begin to feel sad or angry or depressed, but the truth is most times these changes are actually necessary, but due to how attached we were to our work, we might have missed it. So try not to get too attached to your work.
3. Be open to reviews
The client facing part of a web application is usually the first thing a user sees and interacts with when they visit your web page and you also have alpha and beta testers running several tests on it. Regardless of your position or how much you think you know, you cannot cover everything 100%, so try to accept reviews, even if it's coming from a back-end developer or a junior developer or anyone who you might feel don't know as much as you do regarding front-end development.
4. Test, Test, Test
This cannot be overemphasized. Before you push that feature, test it. Test it on all possible viewports, test it on different browsers. It might look okay on chrome but slightly distorted on edge, or it could work in safari and not work on opera. So test across browsers, test across viewports (extra small to extra wide screens), try to throttle your network to see how fast your page loads and also, make sure to test your website on an actual mobile device. A website might look good for a particular screen width on your browser, but breaks when you check it on an actual device. So try not to get tired of testing 😉😉.
5. Try to understand basic design concepts
Now some people might argue that this is not necessary, but understanding basic design concepts as a front-end developer would allow you replicate UI designs properly. Try to understand how spacings, colors, typography etc works and you'll appreciate and replicate UI's better. I personally have issues particularly with font-sizes and font-weights, but I'm improving everyday, and I hope you do too.
I'm sure there are several other tips out there, you could drop them in the comment section. I hope you learnt a lot from this article. Do share with fellow developers and tech enthusiasts, let's help each other become world class😊😊
Top comments (5)
My tip: learn to not assume that the way you use the internet is the way everyone else uses it. This includes a lot of simple things, but is awfully hard to master because it means you have to prioritise others over yourself. That means a lot of thinking and studying.
People may prefer keyboard access over mouse or touch, they may prefer NOT having animations/transitions, people may not understand a feature just by seeing a specific icon... and a lot more that I just can't get to my head right now :)
One of the best ways you can learn to be humble is to make the best UI ever. And then have a usability test on it! Make 6 people of varying backgrounds use the site, give them a task to do, don't help them at all, and record the session.
Just a little addition...
➡ Why not start that work from a simple hand sketch or a wireframe design and let the review start from there. I will definitely reduce the changes you may have to implement later.
All the best in your journey?
Thanks bro. Very important tips.
I would like to add that another thing that can make one a better front end developer is to build projects. Apply as many of the core principles/tools available in your framework of choice (Vue or React or Angular or Svelte) and build at least one project with them.
Number 2 is sha hard sometimes 😪
These are helpful tips