Nós usamos cookies para criar uma experiência de navegação melhor. Ao acessar o site da MENTORAMA, você concorda com nossa Política de Cookies.
Entendi
Close
Nós usamos cookies para criar uma experiência de navegação melhor. Ao acessar o site da MENTORAMA, você concorda com nossa Política de Cookies.
Entendi
Close
Deixe um pedido de consulta e teste
o acesso ao curso "Desenvolvimento Front-End do zero ao PRO" totalmente gratuito por 3 dias!
Ao clicar no botão de "Enviar", declaro que li e estou ciente das condições presentes na Política de Privacidade e concordo com os Termos de uso aplicáveis à empresa Mentorama e seus serviços.

Desenvolvimento Front-End do zero ao PRO

Você aprenderá a marcação com o HTML, a estilização com o CSS e os básicos de interatividade com o JavaScript. Poderá criar as interfaces fáceis de usar e rápidas de carregar, que os usuários vão adorar.

3 projetos

para seu portfólio

6 meses

de aprendizagem na prática

20 módulos

descrevendo cada passo

Um mentor expert

da área
até 4 de julho
-40%
CURSO ONLINE DE

Desenvolvedor Front-end — a carreira promissora e bem paga

R$ 79.735,00
por 3 anos consecutivos
por ano
o salário médio de um desenvolvedor Front-end no Brasil, segundo o indeed.com
a profissão de um Desenvolvedor Front-end foi a mais procurada no Brasil
$(document).ready(function(){ $(document).ready(function (){. $(document).ready(function(){ $(document).ready(function(){str2 = txtSecondName.getText(); $(document).ready(function(){ $(document).ready(function (){. $(document).ready(function(){ $(document).ready(function(){str2 = txtSecondName.getText(); $(document).ready(function(){ $(document).ready(function (){. $(document).ready(function(){ $(document).ready(function(){str2 = txtSecondName.getText(); $(document).ready(function(){ $(document).ready(function (){. $(document).ready(function(){ $(document).ready(function(){str2 = txtSecondName.getText();
str2 = txtSecondName.getText();str2 = txtSecondName.getText(); str2 = txtSecondName.getText(); str2 = txtSecondName.getText(); str2 = txtSecondName.getText(); str2 = txtSecondName.getText(); str2 = txtSecondName.getText(); str2 = txtSecondName.getText(); str2 = txtSecondName.getText(); str2 = txtSecondName.getText();
Para quem é o curso
Iniciantes
Designers UX/UI
Devs Back-end
Você quer dominar uma profissão moderna e procurada e tem interesse por programação?
Você cria interfaces da web lindas e fáceis de usar e quer ampliar seus conhecimentos e passar para o desenho Fullstack ?
Você tem experiência em programação com PHP, JavaScript ou outras linguagens e quer tornar-se um desenvolvedor Fullstack?
Para quem é esse curso
Iniciantes
Você quer dominar uma profissão moderna e procurada e tem interesse por programação? Torne-se um Desenvolvedor Front-end para criar as interfaces convenientes e atrativas. Durante o curso você aprenderá a#nbsptrabalhar com o HTML, CSS, JavaScript, e todas as ferramentas necessárias — e apenas em seis meses se tornará um especialista demandado com um portfólio impressionante.
Designers UX/UI
Você cria interfaces da web lindas e fáceis de usar e quer ampliar seus conhecimentos e passar para o desenho Fullstack. No curso, você aprenderá os princípios de desenvolvimento web e poderá montar seus projetos por si mesmo do início ao fim. Assim, se tornará um especialista bem pago e levará sua carreira para o próximo nível.
Desenvolvedores Back-end
Você tem experiência em programação com PHP, JavaScript ou outras linguagens e quer tornar-se um desenvolvedor Fullstack. No curso, você receberá os conhecimentos e competências faltantes, avançará para o próximo nível da criação dos serviços web e poderá se desenvolver na profissão que gosta ganhando mais dinheiro.

Sua experiência pós-treinamento

Marcação e estilização do layout

Conhecerá as linguagens HTML e СSS, poderá criar interfaces convenientes e apresentar a informação da melhor maneira possível.
Dominará o JavaScript e poderá habilitá-lo em suas interfaces para que sejam funcionais e interativas.
Aprenderá a criar as páginas web que serão igualmente lindas em qualquer navegador e qualquer dispositivo, desktop ou aparelho móvel.

Adaptatividade e acessibilidade

Aprenderá a trabalhar com o sistema de controle de versões — aplicar câmbios ao projeto ao mesmo tempo com outros desenvolvedores.

Git

Conhecerá como tornar as páginas web mais atrativas e melhorar o UX com animações.

Animações

Entenderá que influi a velocidade de carregamento dos sites e aprenderá as técnicas para prevenir o carregamento lento.

Otimização de desempenho

JavaScript

Como acontece o treinamento
Você assiste palestras online
Faz sua lição de casa
Eles corrigem suas lições de casa e dão recomendações sobre seu desenvolvimento
Defende seu projeto de tese

Cumpra uma ordem real no fim do curso
De qualquer dispositivo em um momento conveniente
Trabalho prático semelhante a um pedido real
Recebe comentários de tutores

Processo laboral real, e não simulação

Realizando as tarefas para casa, você vai ganhar experiência do processo real do desenvolvimento Front End, ao final do treinamento poderá entrar no time sem problemas.

Processo

Você criará o código e conseguirá carregá-lo para o Git.

Resultado

Três projetos para seu portfólio: as landings interativas e adaptativas, com as formas de pedido e os elementos animados.

Victor Nery

Software Engineer e Fundador da maior comunidade de Front-end do Nordeste, já atuou nas maiores agências de publicidade da região, desenvolvendo soluções digitais em e-commerce usando plataformas como VTEX e Shopify - além de ter participado de grandes cases de sucesso. Foi Front-end Techinical Lead na Decode, empresa de data analytics do BTG Pactual, executando importantes projetos em React e Vue para grandes empresas como BTG Pactual, Chilli Beans e Banco Pan. Hoje, atua como Front-end Tech Lead na zFlow, desenvolvendo soluções digitais para grandes players como Itaú Unibanco e iCarros.
Mentor

Jean Livino

Palestrante e coordenador da comunidade Front-End CE, o engenheiro de software faz parte do Grupo Boticário, onde participa efetivamente das atividades de Front-End da maior plataforma de Ecommerce de beleza do Brasil.
Mentor
Já trabalhou em projetos de grandes empresas como Febracis e Arco Educação. Foi co-fundador de uma agência de marketing digital em Fortaleza, onde atuou na área de desenvolvimento web e design.
Curioso e atento às novas tendências tecnológicas, se considera um estudante em busca de constante evolução.
As páginas que você vai criar durante o curso
Trabalhos dos alunos
Desenvolvimento passo a passo
Programação
Front-End para iniciantes
1
Introdução.
Ferramentas de desenvolvedor Front-End.
Como ponto de partida, o aluno será introduzido à profissão desenvolvedor front-end, aos principais termos e conceitos relacionados a desenvolvimento web: front-end e back-end, as linguagens principais e sua área de uso. Além disso, o aluno aprenderá a preparar o ambiente de trabalho, instalar e utilizar o Git e o GitLab e o editor de código.
- Quem é desenvolvedor front-end?
- Linguagens principais
- Ferramentas de desenvolvedor
Atividade
Quiz de fixação e atividade prática – preparação do ambiente de trabalho pessoal e instalação do Git para trabalho em time.
2
Marcação de páginas.
Introdução ao HTML.
O HTML é a linguagem usada para descrever a estrutura de conteúdo na página web, os sites não poderiam funcionar sem ela! Os alunos aprenderão os conceitos básicos da linguagem e criarão sua primeira página web.
Atividade:
Quiz de fixação e atividade prática –
marcação HTML de um formulário.
Estrutura de código
Marcação básica
Estilo de marcação
3
Estrutura do layout e conteúdo.
Neste módulo, discutimos a semântica do conteúdo e a estrutura de uma página web. Aprendemos o que são header, footer e body da página e aprendemos a estruturar a informação com as tags correspondentes.
Atividade:
Quiz de fixação e atividade prática –
estilização básica de dois layouts.
SEO
Semântica de conteúdo
Elementos básicos do layout
4
Ferramentas da edição
Ferramentas da edição: Figma, Sketch e Photoshop.
Os devs front-end não só trabalham com o código, eles também devem entender como funcionam as ferramentas do desenho, que os designer usam para criar interfaces para a marcação. Neste módulo, discutiremos essas ferramentas e aprendemos a criar um desenho simples.
Atividade:
Quiz de fixação e atividade prática –
criação do seu próprio layout em Figma
Exportação das imagens
Por que aprender as ferramentas do desenho?
Gráficos de conteúdo e decoração
5
Estilos e formatação
Estilos e formatação: Introdução ao CSS.
Neste módulo, os alunos começarão a se familiarizar com o CSS - uma linguagem de descrição dos estilos de uma página web, que define como se vê a página.
Atividade:
Quiz de fixação e atividade prática –
próximos passos em estilização
Seletores e classes
Estilos na web: cores, fontes e posicionamento
Formatação
6
FlexBox e Grid.
Os alunos poderão criar os grids micro e macro, posicionar os elementos do layout corretamente e aprender os básicos de adaptatividade.
Atividade:
Quiz de fixação e atividade prática –
aplicar as metodologias de construção de layout com Flex aos nossos projetos
Posicionamento e alongamento
Conceito do Grid
Modelo de caixa, paddings e margins
7
Estilização do layout.
Continuamos a estilização dos layouts e aprendemos os conceitos mais avançados do CSS.
Atividade:
Quiz de fixação e atividade prática – estilização avançada de dois projetos.
Fontes externos
Conceitos avançados do grid
Normalização
8
Formulários e Acessibilidade.
Os alunos aprenderão os conceitos de acessibilidade e aplicarão seus conhecimentos fazendo a marcação e estilização avançada de um formulário.
Atividade:
Quiz de fixação e atividade prática – criar o formulário de checkout do carrinho de compras e estilizá-lo, estando atento a Acessibilidade.
Formulários
Acessibilidade
Tipos de campos
9
Conteúdo e decoração.
Nesse módulo, falaremos sobre os gráficos de conteúdo e decoração e adicionaremos os elementos decorativos aos layouts dos nossos projetos.
Atividade:
Quiz de fixação e atividade prática – adicionar o modal com formulário criado no módulo anterior.
Gráficos de decoração
Gráficos de conteúdo
Estilização avançada
10
JavaScript para Front-End.
Os alunos aprenderão os básicos de interatividade da interface com as bibliotecas do Javascript - a linguagem mais requisitada do mundo do desenvolvimento web.
Atividade:
Quiz de fixação e atividade prática – adicionar o Javascript para realizar a mudança de classes "toggle de classes" e, consequentemente, mostrar ou esconder o modal com o formulário.
Animações básicas
jQuery
Interatividade com o usuário
Baixe o programa completo
Front-End PRO

1
Princípios de adaptatividade.
Neste módulo, os alunos aprenderão como adaptar o seu Front-End conforme o dispositivo do usuário. Verificando tamanhos, tipos, características e posicionamento.
Atividade:
Quiz de fixação e atividade prática – Coloque em ação as media queries para criar a seção de um landing page adaptada para desktop e tablet.
2
Adaptatividade: aparelhos móveis.
Iremos mais a fundo sobre como criar regras específicas para dispositivos móveis. Veremos também as ferramentas que lhe ajudarão a verificar se o seu front está adaptativo.
Atividade:
Quiz de fixação e atividade prática – Continuando a lição anterior, você criará a versão para dispositivos móveis da seção.
3
Compatibilidade: navegadores.
Neste módulo, você irá entender como o seu front poderá ser interpretado de forma diferente dependendo do navegador que o usuário utilizar, e como evitar inconsistências.
Atividade:
Quiz de fixação
4
Gráficos vetoriais.
Entenda a diferença entre vetores e bitmaps, como trazer acessibilidade para os vetores e como utilizar sprites para melhorar performance e animações.
Atividade:
Quiz de fixação e atividade prática – Sua atividade será utilizar svg sprites para ajudar na performance do seu Front-End
5
Animações.
Você irá aprender como criar animações simples no design no Figma e levar para o código do seu front-end utilizando CSS puro ou com bibliotecas externas.
Atividade:
Quiz de fixação e atividade prática – Você será desafiado a criar animações nos elementos da página conforme a interação do usuário
6
Pré-Processadores e Post-Processadores.
Neste módulo iremos trazer a programação para dentro do CSS com novas possibilidades para automatizar os estilos utilizando o SASS, SCSS e LESS.
Atividade:
Quiz de fixação e atividade prática – Sua missão será transformar o css criado nas Aulas 1 e 2 em SCSS, SASS ou LESS utilizando as possibilidades que essas linguagens trazem.
7
Automação de compilação.
Vamos conhecer as principais ferramentas para automatizar os arquivos do nosso front e criar um servidor local para visualizar as alterações em tempo real.
Atividade:
Quiz de fixação.
8
Otimização de desempenho.
Nesse módulo, iremos focar em como melhorar a performance do nosso front, garantindo uma experiência rápida para os usuários.
Atividade:
Quiz de fixação e atividade prática – Depois de trazer novas linguagens para o seu Front, você utilizará a automação no seu código, melhorando ainda mais a sua experiência de desenvolvimento.
9
CMS.
Conheça as principais ferramentas de gerenciamento de conteúdo do mercado e a importância delas para o Front-End.
Atividade:
Quiz de fixação.
10
Bônus
Bônus: dicas e truques. Futuro de Front-End. Nesse módulo, você irá conhecer ferramentas de IDE que vão ajudar no desenvolvimento, quais caminhos tomar após o curso e como está o mercado Front-End hoje.
Atividade:
Baixe o programa completo
Faça projetos reais e entre diretamente no mercado com nossos parceiros!
Parceiro do curso
A PRTi Digital é uma empresa prestadora de serviços digitais na área de Gestão de Dados e Documentos que são partes fundamentais nos processos de negócios das empresas corporativas, educacionais e governamentais.
Seu currículo pós curso
Habilidades profissionais:
Desenvolvedor Front-End Junior
Posição
Marcação de páginas web com HTML
Marcação semântica
Posicionamento e estilização dos elementos com CSS
Marcação de páginas adaptivas com Flexbox
Habilitação do JavaScript na interface
Gestão de dependências e montagem de testes
Garantia do nível alto da interface do usuário
R$ 4.575,00
Salário de:
Animações de interfaces