Animação Loader

curso online

Front-end descomplicado e direto ao ponto!

Aprenda a desenvolver interfaces modernas e de alta qualidade com quem está na área atuando com projetos altamente renomados.

Turma #2 - Inscrições abertas!

Aproveite o valor promocional

20% off

De R$ 1.197,00 por

R$ 957,00

Ou parcele em até 12x de R$ 93,24

  • ✓ Acesso vitalício
  • ✓ 14 módulos
  • ✓ Slack de 300 membros
COMPRAR
NO CARTÃO Parcele em até 12x
COMPRAR
NO BOLETO Parcele em até 24x *sujeito à análise
Icone de uma 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.

Vendas encerradas Icone de uma seta
Macbook Bar Vscode Explorer Code Shadow
Mac Mobile
  • Icone de Calendario

    Turma #2 dia 25.11.2021 . Vendas encerradas!

Icone do React

Produzido por Will Moreira
Lead Tech na Insany Design

Icone da Hotmart

O curso está disponibilizado na
plataforma da Hotmart

Icone do PIX

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

Icone de uma 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
Icone - Arrow
  • 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
Icone - Arrow
  • 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
Icone - Arrow
  • 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
Icone - Arrow
  • 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
Icone - Arrow
  • 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+
Icone - Arrow
  • 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
Icone - Arrow
  • Aula 1 - Introdução
  • Aula 2 - NodeJs e Yarn
  • Aula 3 - Instalando o Gulp
  • Aula 4 - Gulp Sass
  • Aula 5 - Gulp Autoprefixer
  • Aula 6 - Gulp Watch
  • Aula 7 - BrowserSync
  • Aula 8 - Gulp Concat
  • Aula 9 - Gulp Babel
  • Aula 10 - Gulp Uglify
  • Aula 11 - Bibliotecas externas
  • Aula 12 - Projeto prático
  • Aula 13 - Exportando os Assets
  • Aula 14 - Configurações Iniciais
  • Aula 15 - Header
  • Aula 16 - Slide Hero - Parte 01
  • Aula 17 - Slide Hero - Parte 02
  • Aula 18 - Section Games
  • Aula 19 - Section Downloads
  • Aula 20 - Modal Login
  • Aula 21 - Dropdowns
  • Aula 22 - Header - Responsivo
  • Aula 23 - Slide Hero - Responsivo
  • Aula 24 - Section games - Responsivo
  • Aula 25 - Section downloads - Responsivo
  • Aula 26 - Progressbar Slide hero
  • Aula 27 - Desafios
  • 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
Icone - Arrow
  • Desafio 1 - C6 Bank
  • Desafio 2 - Wireframes
  • Desafio 3 - SuperGet
  • Desafio 4 - Uiboost
Icone de uma estrela
projetos desenvolvidos no curso

Projeto Wireframe

Neste projeto colocaremos em prática a importância de ter uma estrutura HTML bem feita para conseguirmos criar qualquer tipo de layout, sendo ele o mais simples ou o mais complexo.

Ver projeto completo Icone de uma seta para direita
Projeto Wireframe
Icone de uma estrela
projetos desenvolvidos no curso

KingHost

Com o Hostinger realizaremos todos os ensinamentos do módulo de SASS. Veremos o quanto é importante para nossa produtividade ter um pré-processador de CSS para nos ajudar.

Ver projeto completo Icone de uma seta para direita
Projeto Kinghost
Icone de uma estrela
projetos desenvolvidos no curso

Banco Neon

Aqui iremos criar o processo do início ao fim, desde a estruturação HTML e CSS até o gerenciador do conteúdo do site em Wordpress.

Ver projeto completo Icone de uma seta para direita
Projeto Neon
Icone de uma estrela
projetos desenvolvidos no curso

Blizzard

Esse projeto será dedicado à prática de tudo que foi aprendido no módulo de Gulp.

Ver projeto completo Icone de uma seta para direita
Projeto Blizzard
Icone de uma estrela
projetos desenvolvidos no curso

Pokémon

Esse projeto será dedicado à prática de tudo que foi aprendido no módulo de Javascript. Além do layout bem trabalhado, o projeto em si se baseará em consultas de API’s para trazer as informações que o usuário interage.

Projeto Pokemon
Icone de mensagens

O que os alunos estão dizendo

Depoimentos que aquecem o coração ❤️

Icone de aspas

Olá, tenho muito agradecer o Will e o curso Codeboost em si. Pois eu estava realmente querendo saber se eu queria continuar no Front-end porque eu nunca tinha resultado nas telas que fazia, nunca conseguia tirar um layout para colocar na web. Mas depois que comecei o curso, tive muito o apoio do Will que ajuda todos seus alunos até mesmo uma dúvida que não seja do curso e conseguir realizar todas as telas eu queria e ainda conseguir meu primeiro emprego como Front-end em uma empresa de São Paulo. O curso é top demais, recomendo!!

< Gabriel Guímel /> @_gabrielg4
Icone de aspas

As explicações são excelentes, porém o que torna o curso diferenciado são os desafios, com certeza se for seguir o curso do jeito certo, fazendo todos desafios que são propostos uma forte base na linguagem vai ser adquirida e você estará no próximo nivel num piscar de olhos. Sempre via esses cursos sendo vendidos e não dava muita credibilidade por pensar que era "só mais uma jogada de marketing", foi aí onde eu errei. Além do Will ter me convencido pela honestidade em suas palavras, tem uma didática incrível e é um monstro haha. Ele te ensina não só coisas técnicas (que são exatamente o que o mercado está pedindo), mas também muda o seu jeito de pensar. Recomendo a todos os profissionais que ja trabalham na área, e também a todos que querem ingressar na carreida como Front End.

< Hallef Santos /> @haallefs
Icone de aspas

Trabalho como Designer Digital faz mais de 10 anos, e já fiz milhares de cursos de nome no segmento web; mas o curso do Will é didático e vai direto ao ponto. Ele não complica os conteúdos e mostra como é fácil e ao mesmo divertido fazer uma página web trabalhando com códigos. Mesmo para quem é iniciante na área de web, pode sim com toda certeza fazer o curso do CodeBoost. Do básico até o avançando, você pode desenvolver passo a passo uma landing page e um site. O Will além de ser um grande professor e tem um conhecimento amplo dentro da área, ele é uma pessoa muito humilde e preocupado em trazer resultado e entregar o seu melhor para todo os alunos com muita excelência.

< Robson Leonel /> @robleonel
Icone de aspas

O curso do codeboost aprimorou meu conhecimento em front, abriu minha mente para o novo e modernizou minhas skills. Hoje consigo codar websites muito mais evoluídos e com navegação dinâmica incrível. A didática do Will é muito boa e recomendo o curso de olhos fechados.

< Vinícius Vaz /> @vncsvaz
Icone de aspas

Trabalho com desenvolvimento web tem 3 anos , porém depois do codeboost sinto que foi uma evolução incrível na minha carreira , projetos reais e didática excelente melhor curso frontend no Brasil!

< Wagner Paulo /> @wagner.paulo89
Icone de aspas

Will antes de fazer o codeboost, eu ficava muito perdido quando tentava codificar algum layout ou projeto com html e css, apenas olhava os tutoriais e aplicava sem entender muito bem o que estava acontecendo por trás do código, e logo após os primeiros módulos do seu curso, eu já tive uma evolução muito grande durante minha transição de carreira, seus ensinamentos me ajudaram a entender perfeitamente o que estou fazendo no código, e hoje posso dizer que consigo desenvolver um layout com muito mais confiança e facilidade, e tudo isso agradeço ao seu curso e a forma didática e pratica que você nos ensina. Muito obrigado mesmo!

< Anderson Santana /> @and_santana3
Icone de aspas

Em suma o Codeboost é INSANO! Foi o melhor investimento que fiz esse ano na minha carreira, está sendo uma experiência única, é o conteúdo mais didático, direto ao ponto que já encontrei, o Will é um mentor de mão cheia, tudo é repassado de uma forma leve e muito bem explicado (contando com várias dicas e macetes que fazem toda a diferença). Já no primeiro módulo é mão na massa, aliando a teoria e a prática como deve ser. Valeu Will pelo CodeBoost! 🤘👊🚀

< Julcenei Cardoso /> @julcenei
Icone de aspas

Meu nome é Rui, sou estudante de Ciências da Computação na universidade Staffordshire na Inglaterra e aluno do Will Moreira. Eu super recomendo o CodeBoost para todos alunos da área de Desenvolvimento Web, o conteúdo é prático e fácil de entender, desde que comecei o curso melhorei muito minha forma de desenvolver e a disponibilidade que o Will tem no slack é incrível, sem contar o contato com a comunidade que está fazendo o curso. Tudo isso agrega muito no fim!

< Rui Vergani Neto /> @rui.vergani
Icone - Faq

Perguntas Frequentes

  • Icone dos 3 Pilares do front-end

    Desenvolvimento HTML3 + CSS3 + JS

  • Icone do 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? Icone - Arrow

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

As aulas são gravadas? Icone - Arrow

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

O acesso é vitalício? Icone - Arrow

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

Alunos do UiBoost terão desconto? Icone - Arrow

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

As vagas serão limitadas? Icone - Arrow

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

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

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? Icone - Arrow

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.