Inscrições não estão abertas no momento. Inscreva-se para ser informado(a) sobre novas turmas.
Aprenda com o maior time de mentores do Brasil, de empresas como:
O objetivo do curso é que você aprenda a criar interfaces incríveis com tecnologias web modernas, desde a estruturação com HTML, estilização com CSS, programação em JavaScript até a construção de interfaces completas com a biblioteca React.js.
Ao final desse curso, você será capaz de criar interfaces responsivas, otimizadas e acessíveis por meio de tecnologias front-end líderes de mercado, além de consumir APIs, testar seu código e adotar boas práticas de desenvolvimento.
Feita por especialistas, pensada no mundo real
Nós temos um comprometimento com a qualidade de nossos cursos, e nossa grade curricular é a mais completa do mercado sobre o tema. Ela foi criada por especialistas e pensada desde o primeiro dia em sua aplicabilidade prática.
1
Inicie sua Jornada aqui!
Hora de iniciar a jornada: saiba tudo sobre o curso, como se matricular para as aulas ao vivo e a organização do curso.
Tudo Sobre o Curso
Vídeo: Escolhendo uma Turma e se matriculando nas Aulas ao Vivo
Vídeo: Se Inscrevendo em MasterClasses
Vídeo: Boas-Vindas!
2
Introdução a Front-End
Conheça a programação front-end e construa interfaces de sites e web apps eficientes e robustos, começando na prática com sua primeira página HTML.
Roteiro da 1ª Aula
Vídeo: A Evolução das Tecnologias Front End
Slides: Introdução a Front-End
Prática: Hello World!
Artigo: O que é Front-End?
Artigo: Pensando como "Dev"
Faça para a 2ª Aula
3
Git e Versionamento
Aprenda a usar o serviço Git e a plataforma GitHub, ferramentas que permitem gerir versões de seus códigos e compartilhá-los com colegas e times.
Roteiro da 2ª Aula
Slides: Git e Versionamento
Prática: Página Web com Artigos
Vídeo: Ferramentas Úteis ao Desenvolvimento Web
Artigo: Git, GitHub e Versionamento
Faça para a 3ª Aula
4
Tecnologias Web
Entenda a evolução das tecnologias web, como os navegadores influenciaram o desenvolvimento front-end e como chegamos até aqui, com a stack atual da área.
Roteiro da 3ª Aula
Slides: Tecnologias Web
Prática: Formulário de Contato
Vídeo: Linguagens de Programação
Artigo: Internet, Web, Sites e Web Apps
Artigo: Principais Tecnologias Front-End
Faça para a 4ª Aula
5
HTML: a Estrutura da Web
HTML fornece os “blocos de construção” de absolutamente tudo o que você vê e utiliza na web. Aprenda a usar essa linguagem de marcação na prática.
Roteiro da 4ª Aula
Slides: HTML: a Estrutura da Web
Vídeo: Marcação com HTML
Prática: Mini Blog Dinâmico
Tutorial: Conhecendo HTML
Faça para a 5ª Aula
6
CSS: Estilos e Formatação
CSS permite a estilização, como colorir, criar espaçamentos e dar outras características às páginas web. Aprenda a usar seus seletores e propriedades.
Roteiro da 5ª Aula
Slides: CSS: Estilos e Formatação
Prática: Layout com CSS Flexbox
Prática: Layout com CSS Grid
Vídeo: Padrões em CSS
Vídeo: Estilo com CSS
Tutorial: Estilos e Formatação com CSS
Faça para a 6ª Aula
7
Programação em JavaScript
JavaScript é a linguagem de programação nativa dos browsers, nascida com o front-end. Dê os primeiros passos em seus comandos e sua lógica.
Roteiro da 6ª Aula
Slides: Programação em JavaScript
Demonstração: Conceitos de JavaScript
Vídeo: Programação com JavaScript
Prática: Lógica de Programação
Artigo: Introdução a JavaScript
Tutorial: Recursos da Linguagem
Faça para a 7ª Aula
8
Começando com React.js
Comece a criar web apps com React.js, lib JavaScript mais popular para front-end na atualidade, usada desde startups a big techs como Google e Facebook.
Roteiro da 7ª Aula
Slides: Começando com React.js
Demonstração: Instalação do React
Prática: Lista de Usuários
Artigo: Fundamentos de React.js
Tutorial: Primeiros Passos em React.js
Tutorial: Instalação e Configuração
Artigo: Elementos e Renderização
Faça para a 8ª Aula
9
Estruturando Apps React.js
Avance em React.js com Hooks, padrão moderno da biblioteca, que simplifica e permite gerenciar estados de aplicações por meio de funções.
Roteiro da 8ª Aula
Slides: Estruturando Apps React.js
Prática: Lista de Usuários com Navegação
Artigo: Entendendo Componentes
Tutorial: Criando Componentes
Tutorial: Props (Propriedades)
Artigo: Estados e Eventos
Tutorial: Lidando com Estados
Artigo: Introdução a Hooks
Tutorial: State Hook
Tutorial: Effect Hook
Faça para a 9ª Aula
10
Boas Práticas com React.js
Conheça ferramentas como ESLint e Husky, que permitem revisar código e tornam a programação front-end muito mais fácil, confortável e profissional.
Roteiro da 9ª Aula
Slides: Boas Práticas com React.js
Prática: Lista de Usuários Aprimorada
Artigo: Princípios SOLID, DRY e KISS
Faça para a 10ª Aula
11
Consumindo APIs
Por meio da PokéAPI, uma API que fornece uma lista de pokémons, aprenda a usar dados externos para criar o front-end de uma aplicação, como em casos reais.
Roteiro da 10ª Aula
Slides: Consumindo APIs
Prática: Lista de Pokémons
Artigo: O que é uma API?
Artigo: JSON
Artigo: Arquitetura REST
Artigo: Consultas em GraphQL
Artigo: Fetch e Axios
Faça para a 11ª Aula
12
Conceitos Avançados de React.js
Aprenda Context API e Redux, recursos que permitem ganho de produtividade no gerenciamento do estado de aplicações em larga escala com React.js.
Roteiro da 11ª Aula
Slides: Conceitos Avançados em React.js
Prática: Pokémons Favoritos com Context API
Prática: Pokémons Favoritos com Redux
Faça para a 12ª Aula
13
Testes Unitários
Saiba como implementar e entenda a importância de testes unitários, que permitem verificar se funções e outros blocos de códigos de programas estão corretos.
Roteiro da 12ª Aula
Slides: Testes Unitários
Prática: Implementando Unit Tests
Artigo: Testes de Software
Faça para a 13ª Aula
14
Testes End-to-End
Verifique o fluxo completo de uma aplicação, como se fosse um usuário real usando o web app ou site que você criou, por meio de ferramentas como Cypress.
Roteiro da 13ª Aula
Slides: Testes End-to-End
Prática: E2E Tests com Cypress
Faça para a 14ª Aula
15
Documentação de Software
Programar também envolve documentar o que está sendo feito, seja para você, colegas ou mesmo para outros "devs" entenderem o seu código depois.
Roteiro da 14ª Aula
Slides: Documentação
Prática: Documentação com Storybook
Vídeo: Pensando e Organizando como um Dev
Faça para a 15ª Aula
16
Otimização e SEO
Faça com que sites e web apps em React.js e JavaScript consigam ser indexados por mecanismos de buscas, como se fossem páginas HTML simples.
Roteiro da 15ª Aula
Slides: Otimização e SEO
Prática: Otimizando App com Google Lighthouse
Artigo: Acessibilidade e SEO com React
Faça para a 16ª Aula
17
Próximos Passos
Revise tudo o que foi visto e tenha um overview de mais ferramentas, além de entender trilhas e possibilidades para a evolução contínua em front-end.
Roteiro da 16ª Aula
Slides: Próximos Passos
Prática: Recomendações para Evoluir
Artigo: Posicionamento de Carreira
Artigo: Livros e Influencers da Área
Artigo: Encontrando a Comunidade
Continue a se Desenvolver!
Materiais de apoio
Elas ficam gravadas pra você assistir depois. Além disso, você vai ter acesso aos materiais da plataforma – são artigos, vídeo-aulas e outros conteúdos para complementar seu aprendizado.
Receba seu
No total, a carga horária do curso é de 120h. Ao fim do curso você receberá um certificado com o selo da ABED, Associação Brasileira de Ensino à Distância.
O inglês é o idioma estrangeiro mais estudado pelos brasileiros, porém muitas vezes, as pessoas não sabem aplicá-lo a situações reais. As mentorias individuais são uma prática essencial para a prática do vocabulário e gramática com ênfase no mercado de tecnologia, de acordo com as suas demandas profissionais específicas.
Saiba mais sobre Inglês na Awari →Já são milhares de histórias de sucesso com a Awari
Em nossa comunidade você vai participar de eventos exclusivos e encontrar os profissionais que definem o mercado.
Confira todos os depoimentos →Não encontrou sua dúvida abaixo? Nosso time está pronto para te atender:
Fale ConoscoComo funciona o processo de candidatura?
Nosso processo de candidatura consiste em duas etapas: um formulário inicial e uma entrevista com nosso time.
Nosso objetivo é entender seu momento profissional e avaliar se é um fit interessante com o que buscamos para nossa comunidade.
Qual plataforma de ensino é utilizada pela Awari?
O curso é realizado através da nossa própria plataforma de ensino, desenvolvida internamente.
É através dela que você vai agendar mentorias, acessar aulas ao vivo, conferir os materiais de apoio e mais.
Esse é um curso pago?
Sim, você precisa ter um plano ativo da Awari para matricular-se nesse curso e agendar mentorias individuais.
Para consultar os valores e opções de pagamento, entre em contato conosco ou envie sua inscrição.
Qual a política de reembolso?
Você pode solicitar o reembolso total do valor pago no prazo de até 7 (sete) dias corridos após a data de compra.
Como funcionam as mentorias individuais?
As mentorias são chamadas de vídeos realizadas através da nossa plataforma, e têm duração de 30 (trinta) minutos.
Você pode usar as ligações para tirar dúvidas, receber feedback sobre suas tarefas e aprender mais sobre o dia a dia do especialista da área.
Quantas mentorias eu posso agendar?
Isso vai depender do plano que você escolher! Nosso plano base começa com 8 mentorias incluídas, mas também temos a opção de você agendar mentorias ilimitadas.
Qual é a carga horária do curso?
O curso de Programação Front-End tem carga horária total de 120 horas.