Cover Image

WesleyMaik/frontend-roadmap

Front-end Roadmap

Translated using Google Translate.

PT-BR Version

This is a repository for a study trail based on my experience as a Front-end developer, with only free content. All content rights are fully reserved to the creators, this repository has no commercial purpose.

Do you want to collaborate with this ropository or correct some wrong information? Excellent! All issues are welcome. Click here to see the issues.

The contents marked with star indicate that I had the best experience and/or the most didactic I found, both for beginners and for those who are already developing.

Follow me on Twitter Twitter Follow

Smmary

Internet Internet

The Internet is a global system of interconnected computer networks that use their own set of protocols with the purpose of progressively serving users worldwide.

HTML HTML5

HTML is a markup language made for structuring websites and web applications.

CSS CSS3

CSS is a styling language that styles HTML Tags. It is written in a waterfall form and is very simple to learn.

Javascript JavaScript

Javascript is a high-level, structured and scripting programming language, responsible for making websites and web applications dynamic.

Git and Github Git GitHub

Git is a distributed version control system, primarily used in software development, but it can be used to record edit history of any type of file.

GitHub is a source code and file hosting platform with version control using Git. It allows programmers, utilities or any user registered on the platform to contribute to private and/or Open Source projects from anywhere in the world.

Typescript TypeScript

Typescript is a programming language derived from Javascript. It's a superset of new utilities and strong optional typing. It is a trend to use Typescript to work with medium and large projects.

NodeJS NodeJS

Node.js is a Javascript runtime that takes the rendering and processing of code to the server side, completely decoupled from the browser, allowing you to develop fast and stable applications.

Pre-Processors CSS SASS Less

CSS Pre-Processors are code interpreters that read all generated code and convert it to common CSS capable of running in (almost) all browsers. Productivity, organization and speed in code maintenance justify the use of preprocessors, not to mention that they can minify the CSS code to make it lighter.

Bundles e Builders Webpack Vite

Bundles are packagers of modules for Javascript. A Bundle receives modules with dependencies and generates static assets representing these modules, typically in HTML, CSS and Javascript.

Builders are development tools that significantly improve the front-end development experience. It consists of two main parts: A server that serves your source files in native ES modules and a compiler that bundles your code to generate highly production-optimized static assets.

Libraries and Frameworks

From here, you can choose a library or a framework to follow your studies or even learn more than one, it's up to you, but what I would recommend is to focus on just one until you have a nice mastery before moving on to another..

React React

ReactJS is one of the most famous JavaScript libraries focused on creating user interfaces on web pages.

React makes creating interactive UIs an easy task. React is component based and these encapsulated components manage their own states and functions and React will efficiently update and render only the necessary components as the data changes.

It is worth remembering that React is maintained by Facebook and used by large companies such as Instagram, AirBnB, Netflix and others.

Vue Vue.js

VueJS is one of the most famous Javascript frameworks for creating progressive and reactive interfaces. Vue is perfectly capable of powering Single Page Applications when used in conjunction with modern tools and supporting libraries.

Vue provides a declarative, component-based programming model and has a very simple structure and learning. Betting on a lean architecture, Vue requires minimal configuration when creating a project and can be easily integrated with an existing application through a simple script tag. And because it's progressive it can be used in just one piece of an application that needs to optimize the UI, like Laravel.

Vue was created by Evan You, a former Google developer, and the framework is used by big companies like Alibaba, Nintendo, Baidu and others.

NextJS Next JS

NextJS is a fully pre-configured framework for React that brings together several features to speed up app development: we're talking hybrid and static rendering, TypeScript support, route manipulation services, and more. Created by Vercel, Next.js is an open source platform.

NuxtJS Nuxtjs

NuxtJS is a framework for VueJS (Yes, a framework for another framework) that has the same principles as NextJS: simplify development, file routing, scalable structure and much more. Its benefits are reduced interactivity time and improved SEO compared to SPAs.

Mobile

Mobile application development tool.

React Native React Native

React Native allows you to create truly native apps for both Android and IOS, using React and doesn't compromise your users' experience. It provides a core set of native components that map directly to the platform's native UI building blocks.

Flutter Flutter

Flutter is a development kit created by Google in 2015, based on the Dart programming language, allowing you to create apps for Android and IOS natively, based on Widgets.

Unitary tests

Basically unit tests help you think with the expectations of your code in an organized way, minimize the risk and effort when changing code, and encourage modular design. The idea of unit testing is to test a small, standalone unit of code before integrating it into the larger system.

Thank you for coming here. If you liked it, consider giving this repository a star and share it with someone who is starting or developing in the Front-end area.

Follow me on social networks:

Twitter Instagram LinkedIn Dev.to blog