Formação Front End
Do zero a uma carreira de sucesso no mercado web, com HTML, CSS, JavaScript!
Assista o vídeo
veja nossa apresentação da Formação e uma Alura Live sobre a Carreira em Front-end
O front-end domina o mundo
A Formação Frontend da Alura foi pensada para você começar do zero e se tornar um profissional de ponta. É um guia de estudos com um passo a passo pensado com carinho pela equipe da Alura.
- O que é Front-End?
A Web é a plataforma de programação mais importante do mundo. Suas tecnologias principais, o HTML, o CSS e o JavaScript, são as linguagens mais usadas. E quem domina essas tecnologias, suas boas práticas e seus recursos mais avançados, hoje está no mercado de Front-End.
- O que faz um(a) desenvolvedor(a) Front-End?
Praticamente todo produto digital precisa de um Front-end Web, por isso é um mercado imenso no Brasil e no mundo. Mas se engana quem acha que aprender um pouco de HTML, CSS e arranhar um pouco de JavaScript são suficientes. O bom profissional de Front-end tem que lidar com desafios enormes. Precisa saber as boas práticas de código, como lidar com múltiplos navegadores e saber escrever sites resilientes. Precisa estar antenado nas novidades do JavaScript moderno e do CSS.
Pré-requisitos
Lógica de programação com JavaScript e noções de Git para submissão dos projetos. Aqui na Alura, curso de lógica I e curso de lógica II, além do curso de git.
Por que estudar esta formação?
-
Guia de aprendizado
Conteúdos pensados para facilitar seu estudo
-
Do básico ao avançado
Formação completa para o mercado
-
Você dentro do mercado
Do zero ao sonhado emprego em sua área de interesse
Comece essa formação agora mesmo e capacite-se para seu próximo projeto!
Conheça os planosCom quem você irá aprender
-
Flavio Henrique de Souza Almeida
-
Matheus Castiglioni
-
Natan Souza
-
Pedro Marins
-
Ricardo Bugan Debs
-
Yuri Padilha
Passo a passo
1 HTML & CSS
A base de todo desenvolvimento Web é um bom HTML. Mais que aprender tagzinhas, é saber a importância de um código semântico e bem estruturado. Em cima disso, aplicamos o layout CSS que também é muito mais que apenas colocar uma cores e firulas por aí. É muito fácil escrever códigos HTML e CSS ruins. E é muito fácil não dar a atenção devida a esses fundamentos da Web. Mas não é o que recomendamos. Bons estudos!
-
Curso HTML5 e CSS3 parte 1: A primeira página da Web
Curso | 08h - 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
-
Curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação
Curso | 08h - 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
-
Curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas
Curso | 08h - 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
-
Curso HTML5 e CSS3 parte 4: Avançando no CSS
Curso | 08h - 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
-
Site Alura Live: como ser um bom dev front-end
-
Site CSS: Cansei de Ser Simples - Hipsters #09
-
Post Seu código CSS pode ser mais limpo, flexível e reaproveitável
-
Post Guia de Unidades no CSS - Blog da Alura
-
Post Começando a organizar seu CSS
-
Site Bootstrap e frameworks CSS (opcional)
Faça esse curso e:
Mais detalhesdo curso HTML5 e CSS3 parte 1: A primeira página da Web
Faça esse curso e:
Mais detalhesdo curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação
Faça esse curso e:
Mais detalhesdo curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas
Faça esse curso e:
Mais detalhesdo curso HTML5 e CSS3 parte 4: Avançando no CSS
-
2 JavaScript a linguagem da Web
Sites modernos são muito mais que páginas estáticas com layouts bonitos, são interativos, dinâmicos. É aí que entra o JavaScript, a linguagem de programação mais utilizada atualmente. Agora você vai aprender os fundamentos e boas práticas dessa linguagem, e o paradigma de orientação a objetos
-
Curso JavaScript: primeiros passos com a linguagem
Curso | 10h - 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
-
Site Alura Live: JavaScript
-
Curso JavaScript: Programando a Orientação a Objetos
Curso | 10h - 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
-
Site O Reino encantado do JavaScript - Hipsters #38
-
Curso JavaScript: Interfaces e Herança em Orientação a Objetos
Curso | 12h - 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
-
Post Organize seu código JavaScript
-
Post Preenchendo formulário HTML automaticamente com AJAX
-
Post Aplicando o progressive enhancement
Faça esse curso e:
Mais detalhesdo curso JavaScript: primeiros passos com a linguagem
Faça esse curso e:
Mais detalhesdo curso JavaScript: Programando a Orientação a Objetos
Faça esse curso e:
Mais detalhesdo curso JavaScript: Interfaces e Herança em Orientação a Objetos
-
3 Front end UI
A Web raiz de antigamente parava em algumas poucas propriedades do CSS. Mas não mais. O mundo evoluiu, novas exigências surgiram, e a Web cresceu junto. Agora você vai mergulhar em técnicas e tecnologias mais recentes e profundas, que vão te trazer um outro olhar ao desenvolvimento front-end.
Desde pré-processamento de CSS com SASS até o uso de ferramentas de debug, passando por layouts avançados com Flexbox e Grid CSS. E, o mais importante, como lidar com o mundo multidispositivo que temos hoje com a criação de sites responsivos e mobile-first.
-
Post Como funciona o import e export do JavaScript? | Alura Cursos Online
-
Site Alura Live: Pré-processadores
-
Curso Sass e Compass: Descomplicando o CSS
Curso | 08h - Descubra o poder do pré processador mais utilizado no mundo
- Use variáveis em seu código CSS
- CSS de fácil manutenção e com super poderes
- Aprenda a extender seu CSS e evitar repetições
-
Post 10 mixins em Sass que você deveria usar em seus projetos
-
Curso Flexbox: Posicione elementos na tela
Curso | 09h - 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
-
Curso CSS Grid: Simplificando layouts
Curso | 08h - 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.
-
Post Porque usar ‘em’ no seu CSS hoje em dia?
-
Post Como lidar com os limites de resolução em sites responsivos?
-
Post Criando Layouts com CSS Grid Layout (opcional)
-
Post Criando componentes CSS com o padrão BEM (opcional)
-
Curso Arquitetura CSS: Descomplicando os problemas
Curso | 08h - 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.
Faça esse curso e:
Faça esse curso e:
Faça esse curso e:
Faça esse curso e:
Mais detalhesdo curso Arquitetura CSS: Descomplicando os problemas
-
4 Sites interativos, itegrando o JavaScript ao Navegador
Agora que já vimos como montar layouts utilizando ferramentas modernas e já conhecemos a linguagem de programação mais utilizada no mundo, chegou a hora de juntarmos tudo isso e criarmos sites interativos.
Com o poder o JavaScript seu site pode responder as ações do usuário e tornar a experiência dele muito mais interessante.
-
Curso JavaScript: Conhecendo o Browser e padrões de projeto
Curso | 12h - Una o paradigma orientado a objetos ao funcional para resolver problemas
- Aplique novos recursos do ECMASCRIPT 6
- Estruture sua aplicação no modelo MVC
- Utilize padrões de projeto
-
Curso JavaScript: Aprofundando em MVC, padrão Proxy e Factory
Curso | 12h - Una o paradigma orientado a objetos ao funcional para resolver problemas
- Aplique novos recursos do ECMASCRIPT 6
- Estruture sua aplicação no modelo MVC
- Programe assincronamente com promises
- Utilize padrões de projeto
- Implemente uma solução de data binding
-
Site Evolução e Especificação do JavaScript Moderno - Hipsters #58
-
Curso JavaScript: Salvando dados localmente com IndexedDB
Curso | 12h - Aprenda a armazenar dados offline com IndexedDB
- Encante-se com a Fetch API
- Use Babel e garanta compatibilidade máxima de seu código
- Use e entenda as vantagens do ECMASCRIPT 2015 (ES2015) modules
- Torne seu código ainda mais elegante com novos padrões de projeto
Faça esse curso e:
Mais detalhesdo curso JavaScript: Conhecendo o Browser e padrões de projeto
Faça esse curso e:
Mais detalhesdo curso JavaScript: Aprofundando em MVC, padrão Proxy e Factory
Faça esse curso e:
Mais detalhesdo curso JavaScript: Salvando dados localmente com IndexedDB
-
Front-end
Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...
