What technologies should you know to become a Front-End Developer in 2022.
Tags: webdev, beginners, programming, javascript
Published: 2022-01-15 13:43:57


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.
![HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29tnnbrzjz95yynjmzcu.jpg)

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. 
![CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh1umtpqpvjakc6ocf71.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtzpcep2nru3mv6vrxgu.jpg)

**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 and GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfz3w0nubem1ndc6ya26.png)

**[Git](https://git-scm.com)** 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](https://github.com)** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6i1ci8o3yeqqk87iwl6.jpg)

**[npm](https://www.npmjs.com)** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hop7ytfavbu52466kdfz.png)

**[Sass](https://sass-lang.com)** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5drejxxbo7sxjkmz3gd.png)

**[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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvrvbyiat76p1idx0j02.jpg)

**[React](https://reactjs.org)** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4biol65vigty70z739ha.png)

**[Chakra UI](https://chakra-ui.com)** is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

##Redux 
![Redux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4khilxo0q9cw9bwr6nv.png)

**[Redux](https://redux.js.org)** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba6eks8ybauab09oxhmj.jpeg)

**[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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tw3xhib6y8x0qdm7fmof.png)

[TypeScript](https://www.typescriptlang.org) 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](https://roadmap.sh)**