In this article, I will show you everything you need to know to start a career as a Front-end developers in 2022, from the common tools to the advance technologies you will need to learn if you are considering becoming a Front-end developers.

The fundamentals.

There are three technologies that every web developer should know, HTML, CSS and JavaScript, and these technologies are the three building blocks that you'll find in any website.

HTML.

The Hyper Text Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser, HTML is essentially the “skeleton” for your website. HTML is how you structure your website.

CSS.

Cascading Style Sheets, or CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML, CSS is responsible for giving HTML documents and webpages a face. In other words, it describes how an HTML page should look.

JavaScript.

JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior.

Dive into front-end development.

Git and GitHub.

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

GitHub is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.

npm

npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.

Sass

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It lets you write maintainable CSS and provides features like variable, nesting, mixins, extension, functions, loops, conditionals and so on.

Tailwind CSS

Tailwind CSS is a CSS Framework that provides atomic CSS classes to help you style components e.g. flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

React

React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Redux

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Next.js

Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.

Typescript

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Conclusion

There are more and more technologies out there, and you will use some of them based on your projects needs. Based on my opinion the best skill you should have is the ability to read documentations, because technologies change and gets updated day by day, so as a developer, you never going to stop learning.

If you want a more detailed roadmaps check out roadmap.sh