Há um ditado popular que diz que um computador seguro é aquele que está desligado. Isso é inteligente, mas é falso: O hacker convencerá alguém a entrar no escritório e ligar aquele computador. Tudo é uma questão de tempo, paciência, personalidade e persistência. Kevin David Mitnick.
Inspirado pelo repositório developer roadmap e pelo post do Trey Huffini falando sobre desenvolvimento web de uma forma mais completa e robusta, e é claro peguei emprestado o design do YJDev que desenhou e falou um pouco sobre esse roadmap de frontend.
Só que eu vou dar um pouco da minha visão sobre esse roadmap para você que já é front algum tempo ou que está começando agora fazer os seus primeiros html’s da vida. Lembrando que a minha visão não está certa nem errada, somente é a minha visão e qual o melhor caminho para ter um bom desenvolvimento como front.
Aqui estou assumindo que você já sabe alguns conceitos de lógica e tenha praticado bastante 😃
Básico
Todo dev(a) que inicia no frontend tem sempre um caminho lógico, que é, aprender html, css e javascript.
HTML
Não basta saber simplesmente html e sair enchendo o seu site ou projeto de divs e h1. Então precisamos escrever html semântico e com boa acessibilidade.
CSS
Já passei por projetos e eu já fiz isso em algumas vezes 😅 que é usar o !important para sobrepor algum estilo que não sabia como ele tinha chegado até aquela tag. Então para não cometer o mesmo erro é legal você entender como que funciona a hierarquia no css, conhecer os pseudo-elementos, flex box e grid, media query e layout responsivo.
Javascript
Já errei muito com esse cara 🎃 pois tive o prazer de começar como desenvolvedor em um projeto react/redux ou seja, fui fazendo as coisas, depois fui perceber que conhecia pouco sobre javascript puro. Então para não cometer o mesmo erro que eu aprenda sobre, sintaxe da linguagem, o que é e manipulação do DOM, shadow DOM, escopo, hoisting, o this e o seu conceito no javascript, fetch.
Intermediário
HTML
Aqui você já pode começar buscar informações sobre, SEO e meta tags.
CSS
Nesse caso eu indico um pré-processador, e investir bastante tempo em layout responsivo e animações.
Javascript
Strict mode, como funcionam os browsers, e os verbos https.
Avançado
Aqui vou dar mais um resumo geral do que podemos começar a trabalhar nesse caso.
Conhecer uma arquitetura css (BEM, SMACSS) ou usar css-in-js, investir em um framework javascript (React, Vue, Svelte ou Angular). Conhecer uma lib de controle de estado (Redux, Mobx), aprender sobre alguns linters e formaters (manter o código padronizado de acordo com algumas regras). Module bundlers (eu só trabalhei e conheço o webpack).
Conhecer uma query language (GraphQl, React Query).
Avançado 2
Coloquei esse nível por que acho que ele é um pouco mais profundo do que os anteriores.
Nextjs ou Gatsby entenda a diferença entre eles, TypeScript (comece tipando aos poucos, depois suba a régua), SSR e SSG.
A última dica que tenho para dar é aprenda sobre micro-frontend, isso tem se tornado cada vez mais importante. Aqui tem um site bem legal para você buscar mais informações sobre micro-frontend e como sua arquitetura funciona.
Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa me mandem mensagem. Se esse artigo foi útil ficarei feliz. Abraços quentinhos para vocês!!