Animação Loader
Estrela
curso online

Front-end descomplicado e direto ao ponto!

Aprenda a desenvolver interfaces de alta qualidade através de uma metodologia simples e com exemplos práticos.

Fazer parte da lista de espera Arrow
Macbook Bar Vscode Explorer Code Shadow
Mac Mobile
  • Icone - Calendario

    A 2ª turma será lançada no dia 25.11.2021 às 10h

  • Icone - Dinheiro

    Valor:
    R$ 997,00

  • Icone - Mentor

    Produzido por Will Moreira Lead Tech - Insany

  • Icone - Hotmart

    Curso será disponibilizado na Hotmart

  • Icone - Pix

    Pague com PIX, boleto ou cartão em até 12x

Estrela
torne-se um jedi front-end

Ideal pra quem deseja conquistar uma nova habilidade

Domine as principais técnicas para se tornar um front-end capaz de codificar qualquer tipo de layout.

Animação Techs
  • HTML
  • CSS
  • javascript
  • perfomance
  • wordpress
  • sass
  • gulp
  • react
  • Icone - Lampada

    Quem busca mais conhecimento

    Para quem deseja aprender uma
    nova habilidade e ser reconhecido como profissional front-end.

  • Icone - Code

    Desenvolvedores Iniciantes

    Para desenvolvedores iniciantes
    que buscam aperfeiçoar suas
    técnicas de desenvolvimento
    front-end.

  • Icone - Expert

    Desenvolvedores Experientes

    Que desejam aprofundar em
    técnicas de estilo voltadas
    para o layout.

Mentor

William Moreira
Logo - Codeboost Pequeno

William Moreira

Formado em Ciência da Computação, Desenvolvedor Front-end e Tech Lead na Insany Design. Criador da metodologia do curso online de Front-end Codeboost.

Você pode encontrar os trabalhos desenvolvidos por @wiimoreira em www.willmoreira.com.br.

Conteúdo do curso

  • Módulo 1
  • Introdução
Icone - Arrow
  • Aula 1 - Apresentação
  • Aula 2 - Ferramentas
  • Aula 3 - A base de tudo
  • Aula 4 - Estrutura Web
  • Aula 5 - Plugins VsCode
  • Aula 6 - O Figma
  • Módulo 2
  • HTML
Icone - Arrow
  • Aula 1 - Estrutura HTML
  • Aula 2 - Principais Tag | Parte 01
  • Aula 3 - Principais Tag | Parte 02
  • Aula 4 - Elementos estruturais
  • Aula 5 - Formulários
  • Módulo 3
  • CSS
  • Aula 1 - Introdução
  • Aula 2 - Seletores
  • Aula 3 - Propriedades de texto
  • Aula 4 - Box Model
  • Aula 5 - Shorthands
  • Aula 6 - Unidades de medida
  • Aula 7 - Entendendo o Display
  • Aula 8 - Position CSS
  • Aula 9 - Z-Index
  • Aula 10 - Variáveis CSS
  • Aula 11 - Fontes personalizadas
  • Aula 12 - CSS Transitions
  • Aula 13 - O que é responsividade?
  • Aula 14 - Media Queries
  • Aula 15 - Dicas para Responsividade
  • Módulo 4
  • CSS Flexbox
  • Aula 1 - O que é Flexbox?
  • Aula 2 - Display Flex
  • Aula 3 - Flex Direction
  • Aula 4 - Flex-wrap
  • Aula 5 - Justify Content
  • Aula 6 - Align Items
  • Aula 7 - Order
  • Aula 8 - Conclusão
  • Módulo 5
  • Projeto Wireframe em HTML5 + CSS3
Icone - Arrow
  • Aula 1 - Apresentação do Projeto
  • Aula 2 - Reset, grid e padrões
  • Aula 3 - Header
  • Aula 4 - Section Hero
  • Aula 5 - Section Cards
  • Aula 6 - Section Multiple Cards
  • Aula 7 - Section Text and Button
  • Aula 08 - Footer
  • Aula 09 - Header (Responsivo)
  • Aula 10 - Section Hero (Responsivo)
  • Aula 11 - Section Cards (Responsivo)
  • Aula 12 - Section Multiple Cards (Responsivo)
  • Aula 13 - Section Text and Button (Responsivo)
  • Aula 14 - Footer (Responsivo)
  • Módulo 6
  • SASS
  • Aula 1 - Introdução
  • Aula 2 - Instalando o sass
  • Aula 3 - Import
  • Aula 4 - Variáveis
  • Aula 5 - Encadeamentos
  • Aula 6 - Mixins
  • Aula 7 - Responsivo | Media Queries
  • Aula 08 - Apresentando o Projeto Prático
  • Aula 09 - Estrutura do projeto
  • Aula 10 - Configurações iniciais
  • Aula 11 - Header
  • Aula 12 - Hero Section
  • Aula 13 - Resources Section
  • Aula 14 - Conclusão
  • Módulo 7
  • Projeto NEON em HTML5, CSS3 e JS
  • Aula 1 - Apresentação do projeto
  • Aula 2 - Preparando o ambiente
  • Aula 3 - Resets, Variáveis, Mixins, Grid e Fonts
  • Aula 4 - Exportando os assets
  • Aula 5 - Criando os componentes
  • Aula 6 - Header
  • Aula 7 - Section Hero
  • Aula 08 - Section cartão Neon - Parte 01
  • Aula 09 - Section cartão Neon - Parte 02
  • Aula 10 - Section Depoimentos
  • Aula 11 - Section conta digital
  • Aula 12 - Footer
  • Aula 13 - Header (responsivo)
  • Aula 14 - Section Hero (Responsivo)
  • Aula 15 - Section Hero (Responsivo)
  • Aula 16 - Section cartão Neon (Responsivo)
  • Aula 17 - Section Depoimentos (Responsivo)
  • Aula 18 - Section Conta Digital (Responsivo)
  • Aula 19 - Footer (Responsivo)
  • Aula 20 - AOS Animate
  • Aula 21 - Animações com keyframes
  • Aula 22 - Colocando o projeto na Web
  • Aula 23 - Meta Tags de Compartilhamento
  • Aula 24 - Favicon
  • Aula 25 - Conclusão Projeto Neon - Parte 01
  • Módulo 8
  • Projeto NEON em Wordpress
  • Aula 1 - O que é o Wordpress?
  • Aula 2 - Apresentando o projeto
  • Aula 3 - Wordpress.org Vs Wordpress.com
  • Aula 4 - Instalando o Local WP
  • Aula 5 - Configurando nosso tema
  • Aula 6 - Ajustando nossos diretórios
  • Aula 7 - Get Header e Get Footer
  • Aula 8 - Wp Head e Wp Footer
  • Aula 9 - Bloginfo e Wp title
  • Aula 10 - Configurando nossas rotas
  • Aula 11 - Hierarquia dos templates em wordpress
  • Aula 12 - Criando nossos templates
  • Aula 13 - Funções : get_permalink e get_page_by_path
  • Aula 14 - Nosso arquivo de funções do tema
  • Aula 15 - Boas práticas nos templates.
  • Aula 16 - Função: Is_page
  • Aula 17 - Menu gerenciáveis
  • Aula 18 - Função Include
  • Aula 19 - Advanced custom fields
  • Aula 20 - Gerenciamento Section Hero
  • Aula 21 - Gerenciamento Section App Neon
  • Aula 22 - Gerenciamento Section Depoimentos
  • Aula 23 - Gerenciamento Section Conta Digital
  • Aula 24 - Gerenciamento Footer
  • Aula 25 - Pagina 404
  • Aula 26 - Funcionalidade extra com ACF
  • Aula 27 - Plugins para Performance
  • Aula 28 - Plugins para segurança
  • Aula 29 - Migrar projetos Wordpress com plugins
  • Aula 30 - Contact form 7
  • Aula 31 - Conclusão
  • Módulo 9
  • Javascript ES6+
  • Aula 1 - O que é javascript?
  • Aula 2 - Hello World
  • Aula 3 - Variáveis
  • Aula 4 - Tipo de dados
  • Aula 5 - Números e Operadores
  • Aula 6 - Boolean e Condicionais
  • Aula 7 - Funções
  • Aula 8 - Objetos
  • Aula 9 - Arrays e Loops
  • Aula 10 - Escopo de função
  • Aula 11 - O que é o DOM?
  • Aula 12 - Selecionando os Elementos
  • Aula 13 - Foreach e Arrow Function
  • Aula 14 - Classes e atributos
  • Aula 15 - Eventos
  • Aula 16 - OuterHTML, InnerHTML e InnerText
  • Aula 17 - Transversing
  • Aula 18 - Navegação em Tabs
  • Aula 19 - Accordion
  • Aula 20 - Navegação suave de links internos
  • Aula 21 - Modal
  • Aula 22 - setTimeout e setInterval
  • Aula 23 - Upgrade Projeto Neon
  • Aula 24 - Dropdown Neon
  • Aula 25 - Menu fixo
  • Módulo 10
  • Automatização front-end - GULP
em produção
  • Módulo 11
  • Projeto Blog em HTML5, CSS3 e Javascript
em produção
  • Módulo 12
  • Projeto Blog em Wordpress
em produção
  • Módulo 13
  • ReactJs/NextJs
em produção
  • Módulo 14
  • Projeto Portfólio em NextJs
em produção
  • Desafios
  • Projetos práticos
  • Desafio 1 - C6 Bank
  • Desafio 2 - Wireframes
  • Desafio 3 - SuperGet
  • Desafio 4 - Uiboost

Vamos criar estes e outros projetos juntos!

Mockup Macbook
Projeto Plui Projeto Neon Projeto Blog Codeboost
Logo Codeboost Pequeno
Icone - Faq

Perguntas Frequentes

  • Icone - Base

    Desenvolvimento HTML3 + CSS3 + JS

  • Icone - Wordpress

    Desenvolvimento Wordpress

  • Icone - React

    Desenvolvimento React JS

  • Icone - Slack

    Suporte aos alunos através do grupo exclusivo no Slasck

Preciso ter conhecimento prévio para fazer o curso? Icone - Arrow

Não. Será ensinado tudo o que você precisa saber para se tornar um desenvolvedor front-end.

Já atuo na área de Design, o curso serve para mim? Icone - Arrow

Sim. Além de você adquirir uma nova habilidade, você irá entender todo o processo de codificação para criar seus próprios layouts e/ou adquirir um nível de conhecimento capaz de poder argumentar de igual pra igual com outros desenvolvedores.

Quais são as formas de pagamento? Icone - Arrow

Aceitamos pagamento por boleto à vista, cartão de crédito ou PIX.

O curso tem certificado?

Sim. Você receberá um certificado digital após o teste avaliativo que será aplicado no final do curso.

As aulas são gravadas?

Sim. Serão gravadas e liberadas gradativamente para que você possa assimilar o conteúdo da melhor forma possível.

O acesso é vitalício?

Sim. Será vitalício e o aluno terá direito a todas as atualizações futuras que houver.

Alunos do UiBoost terão desconto?

Sim. Alunos do UiBoost terão 5% de desconto.

As vagas serão limitadas?

Sim. Terá uma quantidade disputada de vagas para a 1ª turma.

Já sou experiente na área, o curso é pra mim?

Sim. Pelo que se percebe na comunidade, muitos desenvolvedores experientes não sabem criar da forma correta um front-end de qualidade. No curso iremos desenvolver na prática layout funcionais para você aplicar no seu dia a dia.

Todas as aulas do curso estarão liberadas no lançamento?

Não. Os módulos ainda estão sendo gravados e serão disponibilizados gradativamente.

Posso desistir da compra? Icone - Arrow

Sim! Você tem até 7 dias para experimentar o curso. Caso não seja o que busca, você poderá solicitar o reembolso para plataforma.