Plano de Estudo
Frontend Roadmap
141 cursos
42 posts
Passo a passo, guia para se tornar um frontend moderno em 2021
Passo a passo
-
1
Conteúdo do plano
-
Curso HTTP: Entendendo a web por baixo dos panos -
Curso DNS: entenda a resolução de nomes na internet -
Artigo As engines de renderização dos browsers -
Artigo Métodos de requisição do HTTP
-
Formação HTML e CSS -
Curso HTML5 e CSS3 parte 1: crie uma página da Web -
Curso HTML5 e CSS3 parte 4: avançando no CSS -
Curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação -
Curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas -
Artigo Mascarando campos de um formulário usando Java para Desktop
-
Artigo Preenchendo formulário HTML automaticamente com AJAX
-
Artigo Formulário com form validation do HTML5
-
Artigo Coletando informações do usuário através de Wizards
-
Artigo Salvando informações do formulário no Android
-
Formação Desenvolva aplicações Web Acessíveis
-
Curso Acessibilidade web: crie designs inclusivos -
Curso Acessibilidade web parte 1: tornando seu front-end inclusivo -
Curso Acessibilidade web parte 2: componentes acessíveis com um pouco de JavaScript -
Alura+ Acessibilidade para interfaces -
Artigo O que é acessibilidade na web?
-
Alura+ Acessibilidade nas cores
-
Artigo Acessibilidade na Web
-
Alura+ O que é acessibilidade?
-
Podcast Acessibilidade web – Hipsters #21 -
Artigo Sprites ou imagens separadas?
-
Podcast Programar sem enxergar – Hipsters #82
-
Formação SEO -
Site SEO -
Curso SEO: métricas e relatórios -
Curso Planejamento Avançado de SEO: da Estratégia ao Operacional -
Curso Fundamentos de SEO: Primeiros passos para ranquear seu site na Busca Orgânica -
Artigo Dicas de SEO que eu devia ter escutado no início de minha carreira
-
Artigo Potencializando meus estudos e práticas de SEO
-
Artigo Noções básicas de SEO
-
Artigo SEO: Ferramentas gratuitas para seu site rankear melhor
-
Artigo Qual é a importância do SEO para o marketing de conteúdo?
-
Artigo SEO: Conheça o Fred, a nova atualização do Google
-
Alura+ Fronteiras do Front-end | EP 03: SEO do ponto de vista Front End
-
Podcast CSS: Cansei de Ser Simples – Hipsters #09
-
Curso CSS Grid: simplificando layouts -
Curso Vetores e Animação com SVG: trabalhando com CSS e JavaScript -
Curso Guia de estilos: montando páginas com componentes -
Curso Arquitetura CSS: descomplicando os problemas -
Alura+ Grids para telas
-
Artigo CSS: Grids e tabelas com responsividade na Web
-
Artigo Criando Layouts com CSS Grid Layout
-
Curso Flexbox: posicione elementos na tela -
Alura+ CSS FlexBox: Dicas para começar
-
Artigo CSS FlexBox: Um Guia Visual
-
Curso Layouts Responsivos: trabalhando com layouts mobile -
Curso JavaScript: interfaces e Herança em Orientação a Objetos -
Curso JavaScript na Web: validação de Formulários e HTML5 -
Curso JavaScript: conhecendo o Browser e padrões de projeto -
Curso JavaScript: programando na linguagem da web -
Curso JavaScript: aprofundando em MVC, padrão Proxy e Factory -
Curso JavaScript: desenvolvedor poliglota -
Site JavaScript
-
Curso Expressões regulares: capturando textos de forma mágica -
Curso JavaScript: programando a Orientação a Objetos -
Curso JavaScript: projeto de conclusão -
Curso JavaScript na Web: manipule o DOM com JavaScript -
Curso JavaScript: Arrays -
Podcast Evolução e Especificação do JavaScript Moderno – Hipsters #58
-
Site JavaScript
-
Curso JavaScript: salvando dados localmente com IndexedDB -
Artigo ES6 - Desestruturando objetos
-
Artigo Tagged Template Literals
-
Curso JavaScript: de padrões a uma abordagem funcional -
Podcast Single Page Applications – Hipsters #16
-
Podcast O Reino encantado do JavaScript – Hipsters #38
-
Alura+ Como fazer AJAX com a Fetch API
-
Alura+ Entenda os comandos git restore e switch
-
Alura+ Git amend: editando uma mensagem de commit
-
Alura+ Recuperando commits com git reflog
-
Alura+ Git e Github para gerentes
-
Alura+ Compartilhar projeto com Git e GitHub
-
Alura+ Gerando ZIP a partir de tags Git
-
Artigo Git e Github: o que são e primeiros passos
-
Alura+ Git e Github para Sobrevivência | EP 04: Issues, PullRequests, Templates e features legais do Github
-
Curso Git e Github: estratégias de ramificação, Conflitos e Pull Requests -
Curso Git e Github: controle e compartilhe seu código -
Alura+ Git e Github para Sobrevivência | EP 09: Entendendo fluxos de trabalho com Git
-
Artigo Git: Os novos comandos git restore e git switch
-
Podcast Git e Github – Hipsters #109
-
Site Builds e Controle de versão
-
Podcast Guia do Iniciante em Github – Hipsters #184
-
Alura+ Git e Github para Sobrevivência | EP 02: Como o merge funciona?
-
Alura+ Git e Github para Sobrevivência | EP 05: Como editar o último commit feito?
-
Alura+ Git e Github para Sobrevivência | EP 08: Melhorando seu histórico com squash e !fixup
-
Alura+ Git e Github para Sobrevivência | EP 03: Como o rebase funciona?
-
Alura+ Git e Github para Sobrevivência | EP 06: Como apagar um commit? Como reverter um bug na master?
-
Artigo Começando com Git: Aprendendo a versionar
-
Alura+ Git e Github para Sobrevivência | EP 10: Os poderes do git reflog
-
Alura+ Git e Github para Sobrevivência | EP 01: Como o git funciona?
-
Alura+ Git e Github para Sobrevivência | EP 07: Lidando com problemas de sincronização
-
Podcast Integração Contínua, Deploy Contínuo e Github Actions – Hipsters #213
-
Alura+ Git e Github para Sobrevivência | EP 11: Dicas Gerais
-
Alura+ Como usar o highlight.js
-
Artigo Criando e publicando uma biblioteca Javascript no NPM
-
Alura+ Melhore a performance das suas listas em React
-
Alura+ Entendendo CORS
-
Formação Segurança de software com OWASP -
Curso Segurança Web: vulnerabilidades do seu sistema e OWASP -
Curso OWASP Top 10: Security misconfiguration, logging e monitoramento -
Curso OWASP: melhorando a segurança com Clojure -
Curso OWASP: padrão de verificação de segurança de aplicações V9 a V14 -
Curso OWASP: padrão de verificação de segurança de aplicações -
Curso OWASP: padrão de verificação de segurança de aplicações V5 a V8 -
Curso OWASP Top 10: de Injections a Broken Access Control -
Curso Sass: O CSS com superpoderes -
Artigo Criando pseudo-elementos mais rapidamente com Sass
-
Curso Gulp: automação de tarefas front-end -
Formação Front-end
-
Curso Webpack: trabalhando com módulos na sua webapp -
Site Automação e Performance
-
Alura+ Domain-Driven Design (DDD) - O que é?
-
Curso Agilidade e TDD: um dia no desenvolvimento de software -
Podcast Testes Automatizados – Hipsters #51
-
Alura+ Fronteiras do Front-end | EP 06: Testes para Front End, faz sentido?
-
Alura+ O que é Behavior-Driven Development (BDD)?
-
Site React
-
Formação React JS
-
Curso React: entendendo como a biblioteca funciona -
Alura+ Virtual DOM e React devTools
-
Curso React Router: navegação em uma SPA -
Alura+ Como preparar uma aplicação React para o Deploy
-
Curso React: automatizando os testes em aplicações front-end -
Curso React: Function Components, uma abordagem moderna -
Curso React: abstraindo seu CSS com Styled Components -
Curso React: ciclo de vida dos componentes -
Curso React Native: Design System no seu app -
Curso React: Hooks, Contextos e boas práticas -
Artigo #002 Como deixar multi linguagem/i18n uma aplicação React?
-
Podcast React e React Native na Novatics – Hipsters On The Road #23
-
Artigo Prop Drilling: o que é?
-
Artigo React: componentes com Styled Components
-
Podcast React: o framework onipresente – Hipsters #66
-
Artigo Configurando rotas com Next.js e Link
-
Podcast Angular vs React – Hipsters #142
-
Artigo React, front end e o mercado
-
Artigo NextJS: por que usar?
-
Alura+ Como funciona o Redux por debaixo dos panos?
-
Podcast Guia do iniciante em React – Hipsters #209
-
Formação Angular
-
Curso Protractor: testando sua aplicação de ponta a ponta -
Curso Angular parte 1: produtividade e organização com framework SPA -
Site Angular
-
Curso Angular: design de componentes com acessibilidade -
Artigo AngularJS, Angular 1, Angular 2 ou Angular 4? Que confusão!
-
Curso Angular: avançando no design de componentes com acessibilidade -
Curso Angular: avançando com testes automatizados -
Curso Angular: controle o fluxo de navegação -
Curso Angular: explorando o framework -
Curso Angular parte 3: upload, build e novos componentes -
Curso Angular parte 2: Autenticação, Forms e lazy loading -
Curso Angular: testes automatizados com Jasmine e Karma -
Curso Angular e RxJS: programação reativa -
Artigo Criando aplicações Angular com Angular CLI
-
Curso Angular parte 4: lapidando o projeto -
Curso Angular: boas práticas em arquiteturas e formulários -
Curso MEAN Stack: criando aplicações completas com Javascript -
Site Frameworks MVC
-
Artigo Angular 2.0 final é lançado
-
Site Front-end
-
Podcast Design Systems, Angular e open source na TOTVS – Hipsters On The Road #21
-
Alura+ Fronteiras do Front-end | EP 01: A guerra dos frameworks - Angular vs React vs Vue?
-
Podcast Web Components – Hipsters #06
-
Curso Bootstrap 4: criando uma landing page responsiva -
Curso Bootstrap: criação de uma single-page responsiva -
Curso NestJS: criando uma API Rest com TypeScript -
Curso TypeScript parte 2: avançando na linguagem -
Curso TypeScript parte 1: evoluindo seu JavaScript -
Curso Typescript parte 3: mais técnicas e boas práticas -
Artigo Javascript ou Typescript?
-
Podcast O Hype do TypeScript – Hipsters #207
-
Podcast Typescript, APIs e PIX na GerenciaNet – Hispters On The Road #55
-
Podcast Progressive Web Apps – Hipsters #03
-
Artigo Quando usar progressive web apps?
-
Curso Progressive Web Apps: crie apps offline -
Curso Chrome DevTools: analise, inspecione e depure suas páginas Web -
Artigo i18n no NextJS?
-
Artigo CSS com NextJS
-
Podcast Nextjs – Hipsters Ponto Tech #220
-
Curso GraphQL parte 3: integrando com sua aplicação -
Curso GraphQL: integração de dados e relacionamentos -
Curso GraphQL: construindo uma API com Apollo Server -
Curso GraphQL: criação de APIs com Prisma 2 e Nexus -
Alura+ Criando seu hello world com GraphQL
-
Podcast Python, GraphQL e Serverless no Zé Delivery – Hipsters On The Road #53
-
Podcast Node, Serverless, Elixir: a stack da Kovi – Hipsters On The Road #11
-
Podcast React Native – Hipsters #148
-
Artigo React Native - Utilizando styled-components
-
Artigo Como começar com React Native?
-
Artigo React Native - O mercado para desenvolvedores júnior
-
Curso React Native com Expo: navegação com menu e suporte às telas -
Site Multiplataforma
-
Site Mobile
-
Curso Electron: crie aplicativos Desktop com as tecnologias da Web -
Alura+ O que é Assembly?
-