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.
Inscreva-se na lista de espera
-
Turma #3 Vagas encerradas
Produzido por Will Moreira
Lead Tech na Insany Design
O curso está disponibilizado na
plataforma da Hotmart
Pagamento com PIX, boleto ou
cartão em até 12x
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.
- HTML
- CSS
- javascript
- perfomance
- wordpress
- sass
- gulp
- react
-
Quem busca mais conhecimento
Para quem deseja aprender uma
nova habilidade e ser reconhecido como profissional front-end. -
Desenvolvedores Iniciantes
Para desenvolvedores iniciantes
que buscam aperfeiçoar suas
técnicas de desenvolvimento
front-end. -
Desenvolvedores Experientes
Que desejam aprofundar em
técnicas de estilo voltadas
para o layout.
Mentor
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
- 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
- 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
- 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
- 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 prático - Pokémon
- Aula 1 - Apresentando o projeto
- Aula 2 - Configurações iniciais
- Aula 3 - Exportando os assets
- Aula 4 - Criando componentes - Parte 01
- Aula 5 - Criando componentes - Parte 02
- Aula 6 - Variáveis de cores
- Aula 7 - Modal de detalhes do pokemon
- Aula 8 - Header
- Aula 9 - Section Slide hero
- Aula 10 - Section listagem de pokemons
- Aula 11 - Header (Responsivo)
- Aula 12 - Section Listagem de pokemons (Responsivo)
- Aula 13 - Footer (Responsivo)
- Aula 14 - Modal de detalhes do pokemon (Responsivo)
- Aula 15 - O que é API ?
- Aula 16 - O que é JSON ?
- Aula 17 - Requisições HTTP
- Aula 18 - Consumindo API
- Aula 19 - Exercício API
- Aula 20 - Axios
- Aula 21 - Apresentando a PokeApi
- Aula 22 - Listando os pokemons
- Aula 23 - Listando os tipos
- Aula 24 - Funcionalidade - Load More
- Aula 25 - Filtrando os pokemons
- Aula 26 - Pesquisando os pokemons
- Aula 27 - Detalhes do pokemon - Parte 01
- Aula 28 - Detalhes do pokemon - Parte 02
- Aula 29 - Desafios e Conclusão
- Módulo 12
- Projeto Blog Codeboost
- Aula 1 - Apresentando o projeto
- Aula 2 - Exportando os assets
- Aula 3 - Configurações iniciais
- Aula 4 - Style Guide do projeto
- Aula 5 - Criando os componentes
- Aula 6 - Header
- Aula 7 - Section - Posts destaques
- Aula 8 - Section - Artigos
- Aula 9 - Section - Podcasts
- Aula 10 - Section - Playlists
- Aula 11 - Footer
- Aula 12 - Breadcrumbs - Detalhes do post
- Aula 13 - Imagem & Titulo - Detalhes do post
- Aula 14 - Conteúdo geral - Detalhes do post
- Aula 15 - Artigos semelhantes - Detalhes do post
- Aula 16 - Header (Responsivo)
- Aula 17 - Section - Posts destaques (Responsivo)
- Aula 18 - Section - Artigos (Responsivo)
- Aula 19 - Section - Podcasts (Responsivo)
- Aula 20 - Section - Playlists (Responsivo)
- Aula 21 - Footer (Responsivo)
- Aula 22 - Breadcrumbs - Detalhes do post (Responsivo)
- Aula 23 - Imagem & Titulo - Detalhes do post (Responsivo)
- Aula 24 - Conteúdo geral - Detalhes do post (Responsivo)
- Aula 25 - Artigos semelhantes - Detalhes do post (Responsivo)
- Aula 26 - Menu mobile (Responsivo)
- Aula 27 - Criando o ambiente Wordpress
- Aula 28 - Configurando o tema do projeto
- Aula 29 - Entendendo a estrutura de um blog
- Aula 30 - O que é o WP_Query?
- Aula 31 - Configurando o Advanced Custom Fields
- Aula 32 - Criando e listando os posts
- Aula 33 - Funcionalidade - Carregar mais posts
- Aula 34 - Criando o detalhes do post
- Aula 35 - Compartilhando nas redes sociais
- Aula 36 - Funcionalidade - Posts semelhantes
- Aula 37 - Funcionalidade - Posts por categoria
- Aula 38 - Funcionalidade - Resultado de pesquisa
- Aula 39 - Funcionalidade - Posts mais vistos
- Aula 40 - Funcionalidade - Navegação por tópicos
- Aula 41 - Funcionalidade - Tempo de leitura
- Aula 42 - Dicas de SEO para o blog
- Aula 43 - Subindo o site para produção
- Aula 44 - O que são os Custom Post Type ?
- Módulo 13
- ReactJs
- Módulo 14
- NextJs
- Desafios
- Projetos práticos
- Desafio 1 - C6 Bank
- Desafio 2 - Wireframes
- Desafio 3 - SuperGet
- Desafio 4 - Uiboost
- Desafio 5 - Itaú
- Desafio 6 - Rede
