It’s 2022 and maybe you’re looking for a new profession and you’ve seen the IT market boom. One of the gateways to this market and just one of the most sought-after professionals in the market! The frontend programmer, who in practice is responsible for creating the web application interface. Currently, a good starting point to get first place in the job market is to start as a frontend programmer and in this article, I will show you the steps to become a frontend developer in 2022.

But what does a Front-end developer do?

As a front-end developer, you will likely be working on one of the following options:

• Designing layouts
• Styling
• State management
• Asynchronous data handling and rendering

Below are the steps that will help you start from scratch and grow.

Learn HTML

HTML is the basics for anyone wanting to work with the frontend, it defines the meaning and structure of web content. You don’t need to know everything about HTML or all the tags, but I’ll leave a few key points that you might want to focus on:

• The basics for building an HTML page;
• Add and format a text in HTML;
• Create lists, tables, and forms;
• Embed links, images, and videos on web pages;

Learn CSS

A web page without CSS is like a sheet with a white background, so we need to use CSS (Cascading Style Sheets) to style and bring the HTML to life. CSS tells how HTML elements should behave on the screen.

Below are some important concepts:

• CSS selectors (how to select a specific element or group in HTML);
• Units in CSS (pixels, percentage, em+rem, vh+vw);
• Positioning in CSS (static, relative, absolute, fixed and sticky)
• CSS box model;
• CSS Flexbox;
• CSS grids;

CSS Frameworks

This is an optional point, but it can be a big difference when trying to enter the job market. Knowing some of the great tools for quick website creation and UIs can be a plus on your resume. Keep in mind that CSS frameworks provide ready-to-use templates/components and classes that you can import into your codebase and get beautiful responsive components without having to write any extra CSS.

Below are some of the most popular frameworks.

• Tailwind CSS;
• Bootstrap 5;
• Materialize;

Learn JavaScript

By that point, you will be able to create beautiful websites with HTML and CSS. But that alone is not enough, you need to create websites that are functional, for that you need JavaScript.

JavaScript is a scripting language that can be used on either the client-side (Frontend) or the server-side (Backend), so there are many advantages when writing the entire application in the same language, thus making the development experience smooth. and streamlining the application.

That’s why JavaScript is so popular and loved on the web and every programmer who wants to break into this market should at least know about it. Below are the basics of JavaScript for you to learn:

• Variables, data types, loops, and functions;
• DOM (Document Object Model);
• Difference between var, let, and const keywords;
• Array methods (foreach, map, filter, reduce, etc);
• ES6 (arrow functions, template literals, destructuring);
• Asynchronous programming (async/await)

JavaScript Frameworks

Similar to CSS frameworks, in the sense of making the developer’s life easier, JavaScript frameworks bring libraries, boilerplate, and provide common resources for building web applications.

The most popular are React, Angular, and Vue.js, but I recommend choosing and studying one of them. React and Vue is similar and have the same level of difficulty. Angular has a longer learning curve but has some interesting features.

If you want to know a little more about each one, [access this article where I make a comparison between them](https://thexcodes.com/qual-framework-escolher-para-estudar-em-2021-react-x-angular-x-vue-js/).

Learn Git

Git is by far the most used modern version control system in the world. This is an important skill that every frontend and backend developer should know. It is widely used in most software development companies and that is why it is a very important skill.

Furthermore, storing your projects on GitHub (the most popular service for storing and versioning code) so that the community has access and especially people who are ahead of selective processes can bring you great benefits.

Extra Things You Should Know

By now, you are ready to look for your first job offer as a front-end developer. But we can always improve and that’s why I’m going to give you a few more steps that can be a differential in your search for your first vacancy and, moreover, when you are in the professional work environment, it will certainly help you to solve some problems.

Global State Management

State management is an important point when working with large web applications, below is a list of what to study for each of the frameworks mentioned above.

• React: Context API, Redux, MobX;
• Angular: Shared service, NgRx;
• Vue.js: Vuex

Server-side Rendering

SSR solves a series of problems mainly in relation to SEO (Search Engine Optimization) that the SPA (Single Page Application) brought, so study:

• React: Next.js
• Vue.js: Nuxt.js
• Angular: Universal Angular

Optional

Now items that are completely optional but will help you to be more complete as a frontend programmer.

• Deploy and host projects (Netlify, Github pages, Heroku);
• Learn TypeScript, seriously you should learn it urgently, as this will make you a better programmer, your code will be more robust and with fewer errors.
• Learn about testing frameworks (Jest or Mocha for JavaScript);

Conclusion

I tried in this article to synthesize everything that is necessary for someone to go from zero to advanced to become a frontend developer, I hope this roadmap helps you to reach your goals.

Good luck with studies and projects, if you need any help, don’t let me check the other posts on the blog