#O objetivo dessa lista é guiar companheiros da área e incentivá-los a se tornarem melhores profissionais. #Sei que alguns visitantes deste repositório vieram pelo Linkedin ou pelo meu portfólio, portanto, saibam que essa lista não é absoluta e sim uma base para nunca mais se sentir estagnado em seus estudos.
#Uma boa vida a todos!!!
#Lista de tópicos e subtópicos do roadmap para desenvolvedor front-end, baseada em https://roadmap.sh/frontend
- Fundamentos do desenvolvimento web • HTML • CSS • JavaScript
- Bibliotecas e frameworks JavaScript • React • Angular • Vue.js • jQuery • TypeScript
- Gerenciamento de estado • Redux • Vuex
- Pré-processadores de CSS • Sass • Less • Stylus
- Testes de unidade • Jest • Enzyme
- Automatização de tarefas • Gulp • Grunt • Webpack
- APIs e serviços web • RESTful APIs • GraphQL • AJAX • JSON
- Design responsivo • Media queries • Flexbox • Grid layout • Mobile-first design
- Acessibilidade • WAI-ARIA • Técnicas de marcação acessível • Contraste de cor
- Performance web • Otimização de imagens • Caching • Minificação de arquivos • Carregamento assíncrono
- Gerenciamento de pacotes • NPM • Yarn
- Controle de versão • Git • GitHub • Bitbucket
- Habilidades de design • UI/UX design • Design thinking • Prototipagem • Ferramentas de design gráfico
- Outras habilidades importantes • Programação orientada a objetos • Arquitetura de software • Princípios SOLID • Padrões de design
Exemplos de subtópicos para cada um dos tópicos do roadmap:
- Fundamentos do desenvolvimento web
HTML • Semântica • Formulários • Elementos multimídia
CSS • Box model • Seletores • Layouts
JavaScript • Tipos de dados • Estruturas de controle de fluxo • Funções
- Bibliotecas e frameworks JavaScript
React • Componentes • Props e state • Ciclo de vida
Angular • Injeção de dependência • Diretivas • RxJS
Vue.js • Diretivas • Computed properties e watchers • Mixins
- Gerenciamento de estado
Redux • Store • Actions • Reducers
Vuex • State • Mutations • Actions
- Pré-processadores de CSS
Sass • Variáveis • Mixins • Funções
Less • Variáveis • Mixins • Funções
Stylus • Variáveis • Mixins • Funções
- Testes de unidade
Jest • Matchers • Testes assíncronos • Configuração de testes
Enzyme • Renderização de componentes • Simulação de eventos • Acesso ao estado e props
- Automatização de tarefas
Gulp • Tasks • Plugins • Watchers
Grunt • Tasks • Plugins • Watchers
Webpack • Configuração • Loaders • Plugins
- APIs e serviços web
RESTful APIs • Métodos HTTP • Autenticação • Versionamento
GraphQL • Esquema de tipos • Resolvers • Consultas e mutações
AJAX • XMLHttpRequest • Fetch API • Axios
- Design responsivo
Media queries • Sintaxe • Exemplos de uso • Aninhamento
Flexbox • Propriedades • Flex containers e flex items • Layouts responsivos
Grid layout • Propriedades • Grid containers e grid items • Layouts responsivos
- Acessibilidade
WAI-ARIA • Roles • States e properties • Atributos
Técnicas de marcação acessível • Títulos e cabeçalhos • Alternativas de texto • Navegação via teclado
Contraste de cor • Ratio mínimo recomendado • Ferramentas de verificação • Exemplos de uso
- Performance web
Otimização de imagens • Compressão • Formatos de imagem • Lazy loading
Caching • HTTP cache headers • Service workers • Cache busting
Minificação de arquivos • CSS • JavaScript • HTML
- Gerenciamento de pacotes
NPM • Instalação de pacotes • Scripts NPM • Publicação de pacotes
Yarn • Instalação de pacotes • Scripts Yarn • Gerenciamento de versões
Package.json • Configuração de projetos • Dependências • Scripts personalizados
Node.js • Ambiente de tempo de execução • Uso de módulos • Interação com o sistema de arquivos
- Versionamento de código
Git • Configuração do Git • Inicialização de um repositório • Branches e commits
GitHub • Repositórios remotos • Colaboração em projetos • Fluxo de trabalho com Pull Requests
GitLab • Repositórios remotos • Fluxo de trabalho com Merge Requests • Integração contínua
- SEO
Otimização para mecanismos de busca • Conteúdo de qualidade • Palavras-chave e tags • Meta-descrições
Sitemaps • Criação e configuração • Envio para mecanismos de busca • Monitoramento de erros
Ferramentas de análise • Google Analytics • Google Search Console • SEMrush
- Desenvolvimento web responsivo
Mobile first • Estratégia de desenvolvimento • Design responsivo • Testes em dispositivos móveis
Frameworks responsivos • Bootstrap • Materialize • Foundation
Padrões de design • Padrão de design Material • Padrão de design Flat • Padrão de design Minimalista
- Desenvolvimento de aplicações web progressivas
Conceito de PWA • Características e benefícios • Instalação em dispositivos móveis • Uso de APIs nativas
Frameworks PWA • Ionic • React Native • Xamarin
Service workers • Configuração • Uso de caches • Comunicação com o servidor
- Arquitetura de software
MVC • Conceito e benefícios • Implementação em JavaScript • Frameworks que utilizam MVC
Flux • Conceito e benefícios • Implementação em JavaScript • Frameworks que utilizam Flux
Arquitetura de micro-serviços • Conceito e benefícios • Implementação em JavaScript • Tecnologias relacionadas
- DevOps
Integração contínua • Conceito e benefícios • Configuração do ambiente • Uso de ferramentas
Entrega contínua • Conceito e benefícios • Configuração do ambiente • Uso de ferramentas
Monitoramento de aplicações • Ferramentas de monitoramento • Análise de logs • Correção de problemas em produção.
- Segurança
Cross-Site Scripting (XSS) • Tipos de XSS • Prevenção • Testes de vulnerabilidades
Injeção de SQL • Tipos de injeção de SQL • Prevenção • Testes de vulnerabilidades
Autenticação e Autorização • Conceitos básicos • Métodos de autenticação • Gerenciamento de permissões
- Acessibilidade
WCAG • Diretrizes de acessibilidade • Princípios de design inclusivo
Ferramentas de análise de acessibilidade • Axe • Wave • Lighthouse
Técnicas de codificação acessível • Uso correto de tags HTML • Contraste de cores • Navegação por teclado
- Testes
Tipos de testes • Testes unitários • Testes de integração • Testes funcionais
Frameworks de testes • Jest • Mocha • Cypress
Test-Driven Development (TDD) • Conceitos básicos • Fluxo de trabalho TDD • Benefícios do TDD
- Performance
Otimização de carregamento de página • Minificação de arquivos • Concatenação de arquivos • Uso de CDNs
Otimização de imagens • Formatos de imagem • Compactação de imagens • Uso de sprites
Ferramentas de análise de performance • Google PageSpeed Insights • GTmetrix • WebPageTest
- Ferramentas de desenvolvimento
Editores de código • Visual Studio Code • Atom • Sublime Text
Plugins e extensões • Live Server • Prettier • Debugger for Chrome
Ferramentas de depuração • Chrome DevTools • Firefox DevTools • Edge DevTools
- Soft skills
• Comunicação • Comunicação clara e efetiva • Feedback construtivo • Gerenciamento de conflitos • Trabalho em equipe • Colaboração em projetos • Gerenciamento de tarefas • Compartilhamento de conhecimento • Gerenciamento de tempo • Planejamento e priorização de tarefas • Produtividade pessoal • Gerenciamento de prazos.