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.
1. ReactJS Doc
The React documentation can’t be overemphasized as far as .earning React is concerned. This gets you really up to learning ReactJS more efficiently with constant practices.
2. 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.
3. Firefox Dev Tools
Before now, the Chrome DevTools have 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.
4. 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
- Bracket Pair Colorizer
5. 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 the download it for Firefox here.
6. 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 stucked with something, we all don’t have it figured out.
