Formação Front-end

Passo a passo

1. 1 HTML & CSS

   Vamos molhar os pés começando com uma conhecimento sólido de HTML, afinal essa é a base de toda Web. Mais que aprender sobre as tags, precisamos entender a importância de um código semântico e bem estruturado e como ter uma boa estrutura para os estilos com CSS .

   Como a web é um lugar para todos é essencial que seus sites estejam adaptados para qualquer pessoa, pensando nisso veremos como estruturar nosso pensamento ao redor de acessibilidade e como o código que criamos influencia o quão acessível um site é.

   • 

     Curso HTML5 e CSS3 parte 1: A primeira página da Web

     Curso | 08h

   Faça esse curso e:

   • Aprenda o que é o HTML e o CSS
   • Entenda a estrutura básica de um arquivo HTML
   • Utilize o navegador para inspecionar elementos
   • Aprenda a definir estilos para elementos usando o CSS
   • Desenvolva um página Web

   Mais detalhesdo curso HTML5 e CSS3 parte 1: A primeira página da Web

   • 

     Site Alura Live: como ser um bom dev front-end

   • 

     Curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação

     Curso | 08h

   Faça esse curso e:

   • Aprenda a estrutura da página HTML
   • Navegue entre páginas web
   • Conheça reset.css e o posicionamento pelo CSS
   • Entenda a diferença entre inline e block
   • Lide com bordas e pseudo-classes CSS

   Mais detalhesdo curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação

   • 

     Artigo Guia de Unidades no CSS - Blog da Alura

   • 

     Curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas

     Curso | 08h

   Faça esse curso e:

   • Crie formulários complexos
   • Trabalhe com campos para celulares
   • Apresente informações em tabelas
   • Use estilos para formulários, campos e tabelas
   • Entenda a hierarquia no CSS
   • Trabalhe com transformações e transições

   Mais detalhesdo curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas

   • 

     Curso HTML5 e CSS3 parte 4: Avançando no CSS

     Curso | 08h

   Faça esse curso e:

   • Importe conteúdo externo na sua página HTML, como fontes, vídeos e mapas
   • Conheça pseudo-classes e pseudo-elementos
   • Use seletores de CSS avançados
   • Saiba como lidar com opacidade e sombra
   • Entenda sobre o Viewport e design responsivo

   Mais detalhesdo curso HTML5 e CSS3 parte 4: Avançando no CSS

   • 

     Podcast CSS: Cansei de Ser Simples – Hipsters #09

   • 

     Site Bootstrap e frameworks CSS (opcional)

   • 

     Curso Acessibilidade web parte 1: tornando seu front-end inclusivo

     Curso | 06h

   Faça esse curso e:

   • Melhore seu site para usuários de leitor de tela;
   • Entenda como uma pessoa cega usa a internet;
   • Aprenda a testar seu site usando o NVDA;
   • Perceba como detalhes no código podem impactar as pessoas;
   • Faça técnicas front-end que podem ajudar seus usuários;
   • Deixe seu projeto ainda mais inclusivo.

   Mais detalhesdo curso Acessibilidade web parte 1: tornando seu front-end inclusivo

2. 2 JavaScript a linguagem da Web

   Chegou o momento de nos aprofundarmos na linguagem que torna a Web dinâmica e que é responsável pela maioria das interações entre as pessoas e nossos sites

   Aqui vamos entender a fundo como o JavaScript se comporta como linguagem, mas ainda não veremos como fazer a integração dele com os sites. Isso porque existe uma separação de conceitos entre o que é parte da linguagem JS e o que são as WebAPIs que veremos em módulos mais pra frente.

   Como existe essa separação, é muito importante você ter conhecimentos aprofundados de JavaScript que irão facilitar sua vida ao aprender um novo framework.

   • 

     Curso JavaScript: primeiros passos com a linguagem

     Curso | 10h

   Faça esse curso e:

   • Execute código JS em sua máquina
   • Aprenda a usar o VSCode e seu Debbuger
   • Saiba como funciona variáveis, controle de fluxo, condicionais e laços de repetição
   • Conheças os tipos básicos dentro do JS

   Mais detalhesdo curso JavaScript: primeiros passos com a linguagem

   • 

     Artigo JavaScript replace: manipulando Strings e regex | Alura Cursos Online

   • 

     Artigo Tagged Template Literals | Alura Cursos Online

   • 

     Site Alura Live: JavaScript

   • 

     Alura+ Classes e funções em JavaScript

   • 

     Curso JavaScript: Programando a Orientação a Objetos

     Curso | 10h

   Faça esse curso e:

   • Domine o paradigma de programação mais usado no mercado
   • Entenda o que são referências e objetos
   • Use atributos, métodos da instância e da classe
   • Defina objetos através de construtores
   • Aprenda sobre encapsulamento

   Mais detalhesdo curso JavaScript: Programando a Orientação a Objetos

   • 

     Alura+ JS Linter

   • 

     Podcast O Reino encantado do JavaScript – Hipsters #38

   • 

     Curso JavaScript: Interfaces e Herança em Orientação a Objetos

     Curso | 12h

   Faça esse curso e:

   • Aprofunde seus conhecimentos em Orientação a objetos
   • Saiba o que é o "DuckType"
   • Entenda quando e como usar herança dentro de seus projetos
   • Conheça boas práticas de programação
   • Veja código JavaScript moderno que você pode utilizar em seus projetos

   Mais detalhesdo curso JavaScript: Interfaces e Herança em Orientação a Objetos

   • 

     Artigo Conhecendo Arrow Functions | Alura Cursos Online

   • 

     Artigo Preenchendo formulário HTML automaticamente com AJAX

3. 3 Front end UI

   Agora você vai mergulhar em técnicas e tecnologias mais recentes e profundas de quando tratamos de CSS, que vão te trazer um outro olhar ao desenvolvimento front-end.

   Desde plugins para fazer checagem e padronização de códigos, passando por layouts responsivos e maneiras de posicionar elementos com Flexbox e Grid CSS . Veremos como o CSS cresceu hoje oferece um mar de possibilidades para designers.

   • 

     Artigo Como funciona o import e export do JavaScript? | Alura Cursos Online

   • 

     Site Alura Live: Pré-processadores

   • 

     Alura+ EMMET: Instalação e comandos no Atom

   • 

     Alura+ Instalando CSS Linter para Atom

   • 

     Curso Layouts Responsivos: Trabalhando com layouts mobile

     Curso | 07h

   Faça esse curso e:

   • Entenda o processo de desenvolvimento de páginas web.
   • Conheça o Emmet, ferramenta para agilizar a escrita de códigos.
   • Melhore a manutenção de códigos com variáveis CSS.
   • Escreva códigos semânticos que ajudam na acessibilidade e SEO.
   • Aprenda a lidar com adaptação de diferentes layouts.
   • Aprimore seu conhecimento de responsividade.

   Mais detalhesdo curso Layouts Responsivos: Trabalhando com layouts mobile

   • 

     Artigo Como lidar com os limites de resolução em sites responsivos?

   • 

     Curso Arquitetura CSS: Descomplicando os problemas

     Curso | 08h

   Faça esse curso e:

   • Simplifique a organização de seus arquivos CSS.
   • Crie arquiteturas CSS simples e robusta.
   • Aprenda boas práticas e metodologias sobre CSS.
   • Deixe o seu site responsivo.

   Mais detalhesdo curso Arquitetura CSS: Descomplicando os problemas

   • 

     Artigo Criando componentes CSS com o padrão BEM (opcional)

   • 

     Curso Fundamentos de SEO: Primeiros passos para ranquear seu site na Busca Orgânica

     Curso | 08h

   Faça esse curso e:

   • Entenda como o Google funciona e ranqueia seus resultados
   • Melhore o conteúdo do seu site para ranqueá-lo melhor no Google
   • Construa uma autoridade externa para o seu site
   • Otimize e organize melhor as informações internas no seu site
   • Conheça os indicadores básicos para gerenciar o trabalho de SEO

   Mais detalhesdo 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

   • 

     Alura+ CSS FlexBox: Dicas para começar

   • 

     Curso Flexbox: Posicione elementos na tela

     Curso | 09h

   Faça esse curso e:

   • Aprenda a famosa especificação flexible box para posicionar seus elementos na página
   • Entenda as diversas propriedades do flexbox e como usá-las
   • Entenda como as propriedades do flexbox substituem float, inline e inline-block
   • Elabore um site responsivo com flexbox

   Mais detalhesdo curso Flexbox: Posicione elementos na tela

   • 

     Curso CSS Grid: Simplificando layouts

     Curso | 08h

   Faça esse curso e:

   • Simplifique a criação de layouts complexos.
   • Posicione elementos com mais facilidade.
   • Utilize grid para calcular e alinhar elementos.
   • Crie templates com mais eficiência e simplicidade.
   • Diga para os elementos onde eles devem se posicionar.
   • Diga para os elementos onde eles devem começar e terminar.

   Mais detalhesdo curso CSS Grid: Simplificando layouts

   • 

     Artigo Criando Layouts com CSS Grid Layout (opcional)

4. 4 Sites interativos, itegrando o JavaScript ao Navegador

   Chegou o momento de juntarmos tudo que aprendemos até agora e montarmos uma página web dinâmica, utilizando HTML e CSS para a criação de elementos gráficos, junto com o JavaScript para a manipulação dos componentes da página, permitindo modificação e interação.

   Aqui também vamos aprender sobre as WebAPIs que estendem as funcionalidades do JavaScript e são responsáveis por tornar possível a manipulação de elementos HTML e faz com que possamos usar todos os recursos presentes em navegadores modernos!

   • 

     Curso JS na Web: Manipule o DOM com JavaScript

     Curso | 06h

   Faça esse curso e:

   • Aprenda como funciona o DOM
   • Manipule o DOM para alterar, adicionar, remover e criar novos elementos na árvore de objetos
   • Trabalhe com componentização para facilitar a organização do projeto
   • Utilize o sistema de módulos do Javascript para proteger os arquivos

   Mais detalhesdo curso JS na Web: Manipule o DOM com JavaScript

   • 

     Alura+ JavaScript Strict Mode

   • 

     Artigo Manipulação de array com map, filter e reduce

   • 

     Curso JS na Web: Armazenando dados no navegador

     Curso | 08h

   Faça esse curso e:

   • Aprenda como funciona a API de armazenamento
   • Manipule o Local Storage para guardar dados
   • Trabalhe com datas no JavaScript
   • Utilize o sistema de módulos do JavaScript para proteger os arquivos

   Mais detalhesdo curso JS na Web: Armazenando dados no navegador

   • 

     Curso Expressões regulares: Capturando textos de forma mágica

     Curso | 12h

   Faça esse curso e:

   • Entenda o que são expressões regulares
   • Valide formulários HTML
   • Aprenda a identificar CPF, CEP, emails e outros documentos
   • Crie expressões regulares eficientes
   • Use classes, âncoras, quantifiers e grupos
   • Execute expressões regulares na sua linguagem

   Mais detalhesdo curso Expressões regulares: Capturando textos de forma mágica

   • 

     Curso JS na web: CRUD com JavaScript assíncrono

     Curso | 08h

   Faça esse curso e:

   • Crie um CRUD utilizando o método fetch e os verbos HTTP
   • Aprenda a consumir dados de uma API e exibir no seu front-end
   • Entenda como utilizar o método fetch para consumir dados de uma API
   • Manipule os verbos HTTP através do método fetch
   • Aprenda como funcionam as promises no JavaScript

   Mais detalhesdo curso JS na web: CRUD com JavaScript assíncrono

   • 

     Alura+ JavaScript assíncrono e Fetch

   • 

     Curso JavaScript na Web: Validação de Formulários e HTML5

     Curso | 08h

   Faça esse curso e:

   • Valide formulários utilizando as ferramentas do próprio HTML5
   • Crie suas próprias validações customizadas utilizando técnicas atuais com JavaScript
   • Aprenda como preencher campos de endereço automaticamente com requisições à API da ViaCEP
   • Aplique uma máscara monetária em campos de preço

   Mais detalhesdo curso JavaScript na Web: Validação de Formulários e HTML5

   • 

     Artigo Trabalhando com datas em JavaScript | Alura Cursos Online