Roadmap for FrontEnd Development in 2022!

This content originally appeared on DEV Community and was authored by lain_js

Hi to all the developers in the community!

Today I want to bring you a road map for those who decide to start in the world of web development. However, here you will also find free resources and courses for those who do not want to spend money on expensive bootcamps or online courses. Let us remember that we can always be self-taught, we just need to look in the ideal place.

Before starting with the real road map, we have to have certain knowledge and requirements to start learning.

A IDE or Code Editor:

An Integrated Development Environment is an application that provides certain advantages for software development and those who write some type of code. On the other hand, a code editor is just a program that allows you to write and edit code with certain basic elements such as code coloring, indentation and other elements that the IDE has by default.

The difference between these lies in the functionalities of each one. While an IDE provides a more professional environment, with hundreds of options, customizations and functionalities that make development much easier; a code editor offers only an environment to write in, basic functions to guide you while you write, and very basic interface modifications.

The best IDE you could find would be Visual Studio Code and the best code editor you can find would be Sublime Text.

Learn to use the console (this is optional):

The console is what many people are afraid of, because they think it is difficult to use it, but with a couple of commands, it could be said that you already have enough experience to handle it.

In case you don't know what the console is, you just need to press WIN + R, type cmd and press enter to enter your computer's console. The console allows us to communicate directly with the computer and perform the tasks we want, but for this we must know some basic commands. Some basic commands would be:

help = will show us a list with all the available commands.

chkdsk = Checks the status of a hard drive / partition / volume and displays a status report. Fix disk errors or find bad sectors and recover information.

shutdown = Shut down, restart or hibernate the local computer.

As you progress on your path in web development, you will see that it will be useful and even mandatory to use the console for certain tasks. For example, I usually use it to open folders with VSCode (Visual Studio Code), create new projects with React or know what version of certain technologies I have on my PC.

Now, let's move on to what's really important.

HTML:

First technology you must learn. HTML (HyperText Markup Language), it is a markup language, but not programming, that will be in charge of giving the structure to your website, it is very important that you know at least the basics, how to create a site with accessibility and a SEO with HTML and create structures that are easy to understand. One recommendation is that as you learn each technology, perform small experiments in CodePen or with your IDE or code editor that you have. That way you can put your knowledge into practice on your own.

Some courses you could take would be:

One hour introductory video to HTML
https://www.youtube.com/watch?v=qz0aGYrrlhU

Responsive web design course with certificate (Includes both HTML and CSS) https://www.freecodecamp.org/learn/responsive-web-design/

CSS:

If HTML is what gives the structure to a website, CSS is what paints and gives that site a beautiful appearance. Its name indicates it, Cascading Style Sheets. With CSS is that we can give a really incredible design to a website, and it is a language that is already close to a programming language (although it is still not). You can continue with the previous HTML course to also learn essential CSS concepts, however, if you need to review or supervise, check out these courses:

Complete six-hour CSS3 course
https://www.youtube.com/watch?v=1Rs2ND1ryYc

CSS Crash Course
https://www.youtube.com/watch?v=KN6oBEOz2ZI

Some CSS framework:

A framework is a previous structure that can be used to develop a project with certain guidelines to follow. These frameworks can contain already defined and concrete artifacts or modules that just by writing and customizing them, we could do an entire complex project in a few lines. A CSS framework is one that is used to facilitate the use of CSS and speed up the creation of designs on web pages. There are a multitude of CSS frameworks but the most recommended are Bootstrap, TailwindCSS and Foundation.

Material to learn to develop in these:

Bootstrap5 Crash Course in one hour
https://www.youtube.com/watch?v=4sosXZsdy-s

TailwindCSS Course of 2 hours
https://www.youtube.com/watch?v=lZp4salRFFc

Certification in Frontend Development with Libraries and Frameworks https://www.freecodecamp.org/learn/front-end-development-libraries

JavaScript (JS):

With HTML we have the structure, with CSS we get the styles, however, a web page is not ready without real interactivity or functionalities. For this, the most used programming language in the world, JavaScript, is used. It is a programming language that was born to be used on the web, easy to learn but very demanding when it comes to writing it. If you want to develop a web page you need to learn if or if JavaScript.

You could get a certificate thanks to freeCodeCamp:

Certification in algorithms and data structures with JS
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

Course of JS Asynchronous
https://www.youtube.com/watch?v=ZYb_ZU8LNxs

Course of seven hourse of JS in freeCodeCamp Channel
https://www.youtube.com/watch?v=jS4aFq5-91M

Git:

Git is the version control system most used by developers when developing any piece of software. Git is a very powerful tool that allows us to have an order when creating development branches, testing functionalities, etc. You can use Git to upload the code of your own projects to GitHub, a page where people share projects, libraries, components, etc. Here you can also set up a web page for free using the GitHub Pages system. It is essential that you learn to use both Git and GitHub.

For learn this:

Git for beginners
https://www.youtube.com/watch?v=8JJ101D3knE

Course of Git and GitHub for freeCodeCamp
https://www.youtube.com/watch?v=RGOj5yH7evk

Some JS framework or library:

It is very useful to use frameworks and libraries for JS as they help to maintain control of any application or web page that you have created and thus, if in the future you find yourself in the need to update it, it will be much easier for you because it is more simple to maintain. But when we talk about libraries we are talking about a collection of functions already programmed that help us to carry out specific actions with a cleaner code that is simpler to learn. Joining frameworks and libraries is highly recommended when programming. As frameworks for JS we can include VueJS, Svelte, Angular and ReactJS (although React was mainly a library).

To learn I recommend these resources:

Continue with the certification in Frontend Development with libraries and frameworks
https://www.freecodecamp.org/learn/front-end-development-libraries/

The Beginner's Guide to React in egghead.io
https://egghead.io/courses/the-beginner-s-guide-to-react

React Course of freeCodeCamp Channel
https://www.youtube.com/watch?v=nTeuhbP7wdE

Crash Course of Svelte
https://www.youtube.com/watch?v=3TVy6GdtNuQ

Crash Course of VueJS
https://www.youtube.com/watch?v=qZXt1Aom3Cs

It should be noted that you only need to learn a single framework. There is no need to learn them all. As you advance in your career, you may decide that another to learn in addition to knowing one, it will be easy for you to learn to handle others even without the need to visit intensive courses.

Some libraries that you should keep in mind:

scrollrevealjs.org (Animations Scroll with JS)
animejs (General Animations with JS)
Chartsjs.org (Charts made with JS)
D3.js (Map of data with JS)
codemirror.net (Include a code editor in your website)

Web3.0:

With the importance that the concept of Web3.0 is gaining right now, you should also keep in mind to learn some things about how to develop from pages to web applications that have some functionalities that would be seen later in web3.0. If you do not know what web3.0 is, soon I will write an article about compiling essential information and a short summary of the history of the web.

For this you should investigate concepts such as:

Blockchain:

Blockchain Explained in 2 hours
https://www.youtube.com/watch?v=qOVAbKKSH10

Course of Blockchain, Solidity (Programming Language of Ethereum) and Smart Contracts of 16 hours
https://www.youtube.com/watch?v=M576WGiDBdQ

Smart contracts:

Explanation of what Smart Contracts are about
https://www.youtube.com/watch?v=pWGLtjG-F5c

Crypto wallet:

Crypto Wallets explained in 16 mminutes:
https://www.youtube.com/watch?v=AQO7KePXUEQ

Learn libraries like:
web3.js
ethers.js
web3.py (this is for Python)

If this article was useful to you, let me know in the discussion section, if you think you should add something else to the route or I should remove something, also let me know.

Until another post ^ - ^

This content originally appeared on DEV Community and was authored by lain_js