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é 16 de maio
-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
Desenvolvimento Front-End para iniciantes
Módulo 1 - Introdução. Ferramentas de desenvolvedor Front-End.
  • Introdução ao curso.

  • O que é desenvolvimento web.

  • Linguagens principais: HTML, CSS, JavaScript.

  • Ferramentas de desenvolvedor. Desenho e gráfica.

  • Ferramentas de desenvolvedor. Editores de código.

  • Ferramentas de desenvolvedor. Controle de versões.

  • Lição de casa.

Módulo 2 - Marcação de páginas. Introdução ao HTML.
  • Criando o primeiro repositório.

  • Estrutura de código (1)

  • Estrutura de código (2)

  • Formulários

  • Estilizando HTML.

  • Lição de casa.

Módulo 3 - Estrutura do layout e conteúdo.
  • Semântica de conteúdo.

  • Elementos básicos do layout.

  • Marcação do layout do header.

  • Marcação do layout básico (main). Parte 1.

  • Marcação do layout básico (main). Parte 2.
  • Marcação do layout do footer.

  • Lição de casa.

Módulo 4 - Estilos e formatação. Introdução ao CSS.
  • Estilos em HTML. Adicionando o CSS
  • Seletores. Classes.
  • Unidades de medida em CSS.
  • Estilização: fontes, cores, imagens.
  • Posicionamento.
  • Display.
  • Lição de casa.
Módulo 5 - Ferramentas da edição: Figma, Sketch, Photoshop, Illustrator.
  • Formatos das imagens.

  • Exportação das imagens.

  • Gráfica de conteúdo e de decoração.

  • Ferramentas da criação do layout. Parte 1.

  • Ferramentas da criação do layout. Parte 2.
  • Lição de casa.
Módulo 6 - FlexBox e Grid.
  • Modelo de caixa. Paddings. Margins.

  • O conceito do Grid.

  • O que é o Flexbox. Axis.

  • Aplicação dos Flex Boxes ao layout. Parte 1.

  • Aplicação dos Flex Boxes ao layout. Parte 2.

  • Lição de casa.

Módulo 7 - Estilização do layout.
  • Como trabalhar com o layout.

  • Habilitação de fontes. Normalize.css.

  • Aplicação dos estilos ao layout. Parte 1.
  • Aplicação dos estilos ao layout. Parte 2.

  • Lição de casa.

Módulo 8 - Acessibilidade e formas.
  • Estrutura de formulários.

  • Estilização. Placeholders.

  • O que é acessibilidade?

  • Acessibilidade: teclado.

  • Acessibilidade: leitores de tela.

  • Lição de casa.

Módulo 9 - Conteúdo e decoração.
  • Tags de som e vídeo.

  • Outras tags adicionais.

  • Tipos de importação das imagens.

  • Pop-ups. Parte 1.

  • Pop-ups. Parte 2.
  • Lição de casa.

Módulo 10 - JavaScript para Front-End.
  • O que é JavaScript. Para que se usa o JS em Front-End.

  • Variáveis, DOM e tipos de variáveis.

  • Eventos e interatividade.

  • Habilitação das bibliotecas externas.

  • Lição de casa.
Módulo 1 - Introdução. Ferramentas de desenvolvedor Front-End.
  • Introdução ao curso.

  • O que é desenvolvimento web.

  • Linguagens principais: HTML, CSS, JavaScript.

  • Ferramentas de desenvolvedor. Desenho e gráfica.

  • Ferramentas de desenvolvedor. Editores de código.

  • Ferramentas de desenvolvedor. Controle de versões.

  • Lição de casa.

Módulo 2 - Marcação de páginas. Introdução ao HTML.
  • Criando o primeiro repositório.

  • Estrutura de código (1)

  • Estrutura de código (2)

  • Formulários

  • Estilizando HTML.

  • Lição de casa.

Módulo 3 - Estrutura do layout e conteúdo.
  • Semântica de conteúdo.

  • Elementos básicos do layout.

  • Marcação do layout do header.

  • Marcação do layout básico (main). Parte 1.

  • Marcação do layout básico (main). Parte 2.
  • Marcação do layout do footer.

  • Lição de casa.

Módulo 4 - Estilos e formatação. Introdução ao CSS.
  • Estilos em HTML. Adicionando o CSS.

  • Seletores. Classes.

  • Unidades de medida em CSS.

  • Estilização: fontes, cores, imagens.

  • Posicionamento.

  • Display.

  • Lição de casa.

Módulo 5 - Ferramentas da edição: Figma, Sketch, Photoshop, Illustrator.
  • Formatos das imagens.

  • Exportação das imagens.

  • Gráfica de conteúdo e de decoração.

  • Ferramentas da criação do layout. Parte 1.

  • Ferramentas da criação do layout. Parte 2.

  • Lição de casa.
Módulo 6 - FlexBox e Grid.
  • Modelo de caixa. Paddings. Margins.

  • O conceito do Grid.

  • O que é o Flexbox. Axis.

  • Aplicação dos Flex Boxes ao layout. Parte 1.

  • Aplicação dos Flex Boxes ao layout. Parte 2.

  • Lição de casa.

Módulo 7 - Estilização do layout.
  • Como trabalhar com o layout.

  • Habilitação de fontes. Normalize.css.

  • Aplicação dos estilos ao layout. Parte 1.

  • Aplicação dos estilos ao layout. Parte 2.
  • Lição de casa.

Módulo 8 - Acessibilidade e formas.
  • Estrutura de formulários.

  • Estilização. Placeholders.

  • O que é acessibilidade?

  • Acessibilidade: teclado.

  • Acessibilidade: leitores de tela.

  • Lição de casa.

Módulo 9 - Conteúdo e decoração.
  • Tags de som e vídeo.

  • Outras tags adicionais.

  • Tipos de importação das imagens.

  • Pop-ups. Parte 1.
  • Pop-ups. Parte 2.

  • Lição de casa.

Módulo 10 - JavaScript para Front-End.
  • O que é JavaScript. Para que se usa o JS em Front-End.

  • Variáveis, DOM e tipos de variáveis.

  • Eventos e interatividade.

  • Habilitação das bibliotecas externas.

  • Lição de casa.
Desenvolvimento Front-End PRO
Módulo 1 - Princípios de adaptatividade.
  • Introdução.
  • A importância da adaptatividade.
  • @media. Breakpoints. Orientação. Print.

  • Imagens adaptativas. Retina.

  • Melhores práticas de adaptatividade.
  • Prática: aplicação de media queries ao layout.
  • Marcação Pixel Perfect.
  • Lição de casa.
Módulo 2 - Adaptatividade: aparelhos móveis.
  • Metodológias Mobile First e Desktop First.

  • Verificação de adaptatividade: DevTools e sizzy.

  • Css no móvel.

  • Lição de casa.

Módulo 3 - Compatibilidade: navegadores.
  • Historia de navegadores. Navegadores mais populares.

  • Dando suporte aos navegadores.

  • Polyfills.

  • Lição de casa.
Módulo 4 - Gráficos vetoriais.
  • Gráficos bitmap e vetoriais. Formato SVG.

  • Acessibilidade de gráficos SVG.

  • SVG sprites.

  • Prática: uso de gráficos vetoriais.
Módulo 5 - Animações.
  • Para que usar animações.

  • Animações em UX.

  • Animações em CSS.

  • Bibliotecas de animações em CSS. Animate.Style.
Módulo 6 - Pré-Processadores e Post-Processadores.
  • O que são Pré-Processadores em CSS, HTML e JS. Less e Sass, SCSS.

  • Importação (habilitação) em CSS, Less e Sass.

  • Variáveis em pré-processadores. Interpolação.

  • Operações matemáticas.

  • Operações com cores.

  • Aninhamento (nesting).

  • Mixins e Include.

  • Automatização em CSS.
Módulo 7 - Automação de compilação.
  • Ferramentas de desenvolvedor: nmp

  • Gulp.

  • Webpack.
Módulo 8 - Otimização de desempenho.
  • Minificação de CSS.

  • Otimização de imagens.

  • Formato WebP.
  • Automatização de SVG sprite.
  • Compilação do projeto.
Módulo 9 - CMS.
  • O que é CMS?
  • CMS Headless
  • Principais CMS e como funcionam
Bônus: dicas e truques. Futuro de Front-End.
  • Ferramentas para IDE
  • O que fazer após o curso
  • O futuro do Front-End
  • O mercado de Front-End
Módulo 1 - Princípios de adaptatividade.
  • Introdução.

  • A importância da adaptatividade.

  • @media. Breakpoints. Orientação. Print.

  • Imagens adaptativas. Retina.

  • Melhores práticas de adaptatividade.

  • Prática: aplicação de media queries ao layout.

  • Marcação Pixel Perfect.
  • Lição de casa.
Módulo 2 - Adaptatividade: aparelhos móveis.
  • Metodológias Mobile First e Desktop First.

  • Verificação de adaptatividade: DevTools e sizzy.

  • Css no móvel.

  • Lição de casa.

Módulo 3 - Compatibilidade: navegadores.
  • Historia de navegadores. Navegadores mais populares.

  • Dando suporte aos navegadores.

  • Polyfills.

  • Lição de casa.
Módulo 4 - Gráficos vetoriais.
  • Gráficos bitmap e vetoriais. Formato SVG.

  • Acessibilidade de gráficos SVG.

  • SVG sprites.

  • Prática: uso de gráficos vetoriais.
Módulo 5 - Animações.
  • Para que usar animações.

  • Animações em UX.

  • Animações em CSS.

  • Bibliotecas de animações em CSS. Animate.Style.
Módulo 6 - Pré-Processadores e Post-Processadores.
  • O que são Pré-Processadores em CSS, HTML e JS. Less e Sass, SCSS.

  • Importação (habilitação) em CSS, Less e Sass.

  • Variáveis em pré-processadores. Interpolação.

  • Operações matemáticas.

  • Operações com cores.

  • Aninhamento (nesting).

  • Mixins e Include.

  • Automatização em CSS.
Módulo 7 - Automação de compilação.
  • Ferramentas de desenvolvedor: nmp

  • Gulp.

  • Webpack.
Módulo 8 - Otimização de desempenho.
  • Minificação de CSS.

  • Otimização de imagens.
  • Formato WebP.
  • Automatização de SVG sprite.

  • Compilação do projeto.
Módulo 9 - CMS.
  • O que é CMS?
  • CMS Headless
  • Principais CMS e como funcionam
Bônus: dicas e truques. Futuro de Front-End.
  • Ferramentas para IDE

  • O que fazer após o curso
  • O futuro do Front-End
  • O mercado de Front-End

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
Confirma que você concluiu o curso e se torna um argumento adicional ao se candidatar a um emprego.
Certificado Mentorama
Avaliações do curso Front-End do zero ao PRO
Сrédito Estudantil em parceria com a fintech Provi
Programa de crédito
de um parceiro 100% confiável
Crédito descomplicado, parcelamento no boleto em até 12 vezes
Qualquer pessoa física, maior de 18 anos
Resposta em 24 horas via SMS, WhatApp ou e-mail
Você pode pagar o curso em prestações ou integralmente. Deixe uma solicitação, o assistente ligará para você e o ajudará na escolha da melhor forma de pagamento.
Início
16 de maio
Restam
12 vagas
de desconto
40%
Inscreva-se no curso
R$ 172,98*
R$ 6.000,00
Até 24 vezes de
Preço total sem desconto
Preço total a vista
R$ 3.600,00
*Crédito sujeito à aprovação pelo parceiro financeiro com incidência de juros.
Perguntas e respostas
Devo aprender a desenhar layouts (design)?
No curso você vai trabalhar com os layouts prontos, desenhados por Mentorama. O processo laboral normal é assim - a representação visual (a imagem) é o trabalho do designer, a página real na web - o trabalho do desenvolvedor.
Qual o mínimo aceitável de conhecimento que eu tenho que ter pra tentar arrumar emprego nessa área?
O mínimo exigido do desenvolvedor Front-End é o conhecimento de marcação HTML e estilização CSS. Conhecendo os básicos do Javascript, a gente consegue já salário muito maior.
Como estudar, praticar e conseguir oportunidades como (Front-end) Developer?
O mercado do desenvolvimento Front-End é muito amplo. Além dos recursos habituais como o LinkedIn, a gente pode conseguir oportunidades nas plataformas dedicadas ao desenvolvimento, como o GitHub.
Não sei programar, posso começar nesse curso?
Sim. O curso é desenhado para iniciantes na área de programação sem conhecimento algum.
Quais programas vou precisar instalar?
No curso, você vai usar a tecnologia de controle de versões Git e a plataforma web correspondente GitLab, o editor de código Visual Studio Code e a ferramenta de desenho de interfaces Figma (na web, sem instalar). Todas as plataformas e ferramentas são gratuitas e podem ser usadas tanto em Windows como em MacOS ou Linux.
Devo aprender a desenhar layouts (design)?
No curso você vai trabalhar com os layouts prontos, desenhados por Mentorama. O processo laboral normal é assim - a representação visual (a imagem) é o trabalho do designer, a página real na web - o trabalho do desenvolvedor.
Qual o mínimo aceitável de conhecimento que eu tenho que ter pra tentar arrumar emprego nessa área?
O mínimo exigido do desenvolvedor Front-End é o conhecimento de marcação HTML e estilização CSS. Conhecendo os básicos do Javascript, a gente consegue já salário muito maior.
Como estudar, praticar e conseguir oportunidades como (Front-end) Developer?
O mercado do desenvolvimento Front-End é muito amplo. Além dos recursos habituais como o LinkedIn, a gente pode conseguir oportunidades nas plataformas dedicadas ao desenvolvimento, como o GitHub.
Não sei programar, posso começar nesse curso?
Sim. O curso é desenhado para iniciantes na área de programação sem conhecimento algum.
Quais programas vou precisar instalar?
No curso, você vai usar a tecnologia de controle de versões Git e a plataforma web correspondente GitLab, o editor de código Visual Studio Code e a ferramenta de desenho de interfaces Figma (na web, sem instalar). Todas as plataformas e ferramentas são gratuitas e podem ser usadas tanto em Windows como em MacOS ou Linux.
Adquira uma nova profissão e mude a sua vida
Design
Programação
Gamedev
Aprenda com os melhores profissionais do mercado, domine as habilidades aplicadas e aprimore-as em projetos reais. Assuma o controle do seu tempo, estudando quando for conveniente.
65%
dos alunos conseguiram emprego após o curso
50 000
estudantes em todo o mundo
Marketing
Escola online das profissões mais procuradas
Av. Brg. Faria Lima, 2369 - São Paulo -SP
© Mentorama, 2020-2021 | CNPJ: 36.860.664/0001-78