This Article was first written by me on ICODEMAG.COM In this article, I would love to talk more about the assets necessary for beginner Front-End Web Developers. These tools and resources have gone a long way in helping developers both beginners, intermediates and advanced Front-End Web Developers alike.
The most important thing about these tools is how they help you work efficiently and cover a lot without much of your time being wasted on things that can be easily taken care of. Most of these tools can’t be overemphasized, because they help you go a long way while you figure your codes out.
WHAT LEAD ME TO WRITE ABOUT THIS TOPIC?
Anyways, I have a ton of friends who ask me about tools and resources I use in my daily work as a Front-End Developer. So I can say I am writing this here in order to have a place I will direct them to get their answers instead of answering them almost every time.
Enough of the long talk, let us dive right into my list.
NOTE: This list is for junior Front-End Web Developers.
REACTJS DOC The React documentation can’t be overemphasized as far as learning React is concerned. This gets you really up to learning ReactJS more efficiently with constant practices.
CREATE REACT APP This is another great resource I found very helpful when I started my career as a Front-End Developer with ReactJS, so I would encourage beginners to go through it as well.
FIREFOX DEV TOOLS Before now, the Chrome DevTools has been a more powerful tool to debug your JavaScript, HTML and CSS issues right on the browser. Now Firefox Dev Tools have taken the lead, so as you are starting out your career as a Front-End Developer I would suggest using the Firefox Dev Tools in order to help you more efficiently. Read more about it here.
VISUAL STUDIO CODE Of course, I know by now you should already have a text editor you use to write your codes, but I personally love using VS Code. I like it, because there are a bunch of plugins I can install on it to make my workflow more painless. Somehow I can’t really go down deep explaining VS Code to you, I just think you should find out yourself and spread the news afterward.
Here are few VS Code extensions I use:
Auto Import – I use this because the lazy me might be tired of searching for where I want to import from
GitHub – so I have GitHub extension on my editor which help me to easily switch to another branch, pull from the branch and many other things without typing the commands on my command line (not really being lazy, but trying to do away with little things while I focus on my codes)
Live Server – most often when I am not using a Front-End Framework, so use this to start my application quickly from the editor super fast; another great thing is that it auto reloads (but might fail sometimes)
Prettier Code Formatter – this helps to format your code to look more nicely, I think you should have it
Path Intellisense - this extension is one great one for developers using VsCode, in most cases when i write a large application I find it a bit hard to locate a part which I want to import or something, path IntelliSense helps to take care of that, saving you that time.
Bracket Pair Colorizer - Another great extension that helps to colorize your codes, so you know where a particular code began and where it ends which you can easily spot because of the color of the opening/closing brackets.
REACT DEVELOPER TOOLS This is another amazing tool you should have, which helps you to inspect your React components. You can get the link to download it for Firefox here.
MDN WEB DOCS The Mozilla Developer Network is an amazing site you will find pretty much helpful as a Front-End Developer or as one who often plays around with the CSS.
I hope you will get the best out of these resources, but don’t forget people are of more great help when stuck with something, we all don’t have it figured out.