There is a saying "as a full-stack developer, you need to learn everything" – pirple.
As it is true for you to learn everything as a full-stack web developer, you also need to be familiar with a lot of tools that will make your job easier and faster.
Full-Stack web development covers both front-end and back-end web development. So this article spans across front-end and back-end web development tools.
For each of the tools I outline, I will not fail to tell you what specific part of web development that tool belongs to.
VSCode (Visual Studio Code) is a text editor that is used to write and manage code. A text editor falls into both a front-end and back-end tool.
VSCode is the most popular text editor so far, is the most used text editor according to the 2019 Stack Overflow Developer Survey.
It is most popular because of its unending extensions that just keep getting better. Its UX is no different as it is very customizable.
VSCode enables intellisense. Intellisense provides smart completions, code hints and suggestions, snippets.
Other text editors are Atom, Sublime Text. Geekflare has an extensive list of the best text editors in 2021.
GitHub is where big companies like Facebook, Google, Twitter, Microsoft, etc host their source codes, build, ship, and maintain their software.
It was voted as the most used collaboration tool in the 2020 Stack Overflow Developer Survery.
GitHub has tools for issue tracking, code review, collaboration, continuous integration, and general code management.
GitHub is for both front-end and back-end web development.
As we have said, GitHub is a Git repository manager. And Git is a distributive version control system. A version control system also called source code management is a software utility that manages and tracks changes to your source code.
Git is the most used version control system. A lot of developers are so used to it that they don’t even know that there are others. I didn’t know before doing this research.
Postman is an API testing tool used to test if APIs meet expectations.
Postman is beyond a testing tool, with Postman you can collaborate to build APIs. This really benefits teams who are building an API.
With tools like this, you do not need to build a front-end interface to test if your APIs are as expected.
An API testing tool is a back-end tool. Nordic APIs has a good list with pros and cons of API testing tools.
Also, there is some very good API testing tool available as extensions in the VSCode text editor like Thunder Client.
With these tools, you can
- View and change the DOM,
- View and change a page’s style,
- Optimize website speed,
- View and change web storage and cookies.
- Inspect network activity,
- Optimize websites for different devices.
Chrome DevTools is a front-end tool.
A CSS framework is a library that eases and speeds up design with the CSS language.
Center aligning a div in CSS has being a pain in the ass for many developers and/or designers. But with CSS frameworks you can do that within a split second.
Bootstrap is one of the most popular CSS frameworks developed by Twitter, Bootstrap has a large community that you can run to for help if there be a need for that.
One beautiful thing about Bootstrap and other CSS frameworks is that it is easy to learn and to adapt to.
Other notable CSS frameworks are TailWind, Foundation. Geekflare has an insightful list of CSS frameworks with pros and cons.
Bootstrap is a front-end tool.
You might be interested in 20+ Places to Learn Programming for Free
Specifically and elaborately, React allows us to create reusable UI components. These components are what make up our website.
There are maintained supporting packages and libraries that make building complex applications with React possible.
These packages can be accessed with NPM and/or yarn – discussed in this article.
React is a front-end tool.
Vue.js is a very light framework that has a positive impact on your SEO. Altexspot has an outlined pros and cons of VueJS.
Vue.js may be for one-page applications, but complex applications that will require routing, state management, and building tooling are offered through officially maintained supporting libraries and packages.
Vue.js is a front-end tool.
Figma is a design tool that helps with mockups, prototyping, and testing. While Figma may not be the best design tool out there, but it is the best option to start with.
Apart from personal use, Figma is reliable because of its enabled real-time collaboration. As a team of designers, you can make use of Figma to collaborate and design great things.
Other design tools that may be best options for personal and professional use are Adobe XD, InVision Studio, Sketch. Creativeblog has listed 22 web design tools in this article.
You might be interested in How to Become a Web Developer in 2021
NPM is where we can find packages to use for our apps, both front-end, and back-end. These packages can also be installed into our projects via NPM CLI.
Yarn is also a very popular package manager, and developers often find it difficult to decide which to use between NPM and yarn. Logrocket has made a comparison between these two package managers.
CSS preprocessors are programs that add new features in CSS such as variables, nesting, mixins, inheritance selector, functions, and mathematical operations.
Sass is a front-end tool.
A farmer without his tools is just another man. But a farmer with his tools but has no idea how it works is yet another dumb man. As a developer you are no different, get acquainted with the tools you NEED.
Alright, have a nice time trying these tools out and sticking with the needed ones. Until next time, if you find this article useful and would love to see more of this, you can support me by becoming a Patron. Or you can buy me a coffee.