Sobre O Curso
“Desenvolvimento Web Frontend” é um curso projetado para jovens e adultos que desejam conquistar uma posição como Desenvolvedor Web Frontend no competitivo mercado de programação. Durante o treinamento, você aprenderá a dominar 12 linguagens, bibliotecas e frameworks amplamente utilizados, adquirindo as habilidades necessárias para criar sites profissionais do zero.
O curso abrange uma ampla variedade de ferramentas e tecnologias essenciais para o mercado de trabalho, garantindo que você esteja preparado para atender às demandas do setor e construir projetos de alta qualidade.
O curso oferece suporte completo, tanto presencialmente no campus da Codi Academy quanto de forma virtual, por meio de um grupo exclusivo no WhatsApp ⚙.
Além de uma base teórica sólida, você terá a oportunidade de desenvolver projetos práticos que demonstram, na prática, como linguagens, bibliotecas e frameworks se conectam e interagem para criar soluções reais. Confira algumas imagens de projetos realizados ao longo do curso!.
O Que Você Vai Aprender?
- HTML e CSS: Criação de páginas estruturadas e estilizadas, incluindo layouts modernos e responsivos.
- JavaScript: Programação interativa, manipulação do DOM e criação de animações dinâmicas.
- Frameworks Frontend: Domínio de ferramentas como React, Angular ou Vue.js, amplamente utilizadas no mercado.
- Bibliotecas de Estilo: Uso de frameworks como Bootstrap e Tailwind CSS para acelerar o desenvolvimento de interfaces.
- Controle de Versão: Utilização do Git e GitHub para gerenciar seus projetos e colaborar em equipe.
- Integração com APIs: Conexão do frontend a dados externos para criar aplicativos dinâmicos e funcionais.
- Ferramentas de Desenvolvimento: Configuração de ambientes, depuração de código e uso de extensões que facilitam o trabalho.
- Práticas de Mercado: Desenvolvimento de projetos reais e soluções completas para diferentes tipos de clientes.
Materiais inclusos
- O curso inclui os códigos de resolução dos exercícios.
Requisitos
- Não há pré requisitos para este curso.
Público
- Curso voltado para pessoas que querem aprimorar os conhecimentos na área Frontend da Programação.
Conteúdo Do Curso
Avisos
-
Monitoria Online: Tire as suas dúvidas
-
Plano de Estudos: Frontend
Módulo 1: HTML 5
-
Apostila de HTML
-
Download dos Materiais
-
Aula 1: Introdução ao HTML
11:58 -
Aula 2: Hello World
06:36 -
Aula 3: Títulos
05:10 -
Aula 4: Parágrafos
05:03 -
Aula 5: Formatação de Texto
12:02 -
Aula 6: Links
08:41 -
Aula 7: Imagens
08:57 -
Aula 8: Listas
06:59 -
Aula 9: Formulários (parte 1)
12:04 -
Aula 10: Formulários (parte 2)
09:07 -
Aula 11: Tabelas
07:01 -
Aula 12: Áudio
08:51 -
Aula 13: Vídeo
02:36 -
Aula 14: Tags importantes
09:01 -
Aulão de Revisão
-
HTML | Prova
Módulo 2: CSS 3
-
Apostila de CSS
-
Download dos Materiais
-
Aula 1: Introdução ao CSS
-
Aula 2: Ids
-
Aula 3: Classes
-
Aula 4: Box Model
-
Aula 5: Margin
-
Aula 6: Align
-
Aula 7: Fonts
-
Aulão de Revisão
-
Aula 8: Flexbox: Flex Container e Flex Itens
-
Aula 9: Flexbox: Flex Direction
-
Aula 10: Flexbox: Flex Wrap
-
Aula 11: Flexbox: Flex Flow
-
Aula 12: Flexbox: Justify Content
-
Aula 13: Flexbox: Align Items
-
Aula 14: Flexbox: Align Content
-
Aula 15: Flexbox: Flex Grow
-
Aula 16: Flexbox: Flex Basis
-
Aula 17: Flexbox: Flex Shrink
-
Aula 18: Flexbox: Flex & Order
-
Aula 19: Flexbox: Align Self
-
CSS | Prova
Práticas em HTML+CSS
-
P1: Criando a Landing Page da Netflix
-
P2.1: Criando um Site Completo (parte 1)
-
P2.2: Criando um Site Completo (parte 2)
-
P2.3: Criando um Site Completo (parte 3)
-
P3.1: Criando o Youtube (parte 1 HTML)
-
P3.2: Criando o Youtube (parte 1 CSS)
-
P3.3: Criando o Youtube (parte 2 HTML)
-
P3.4: Criando o Youtube (parte 2 CSS)
-
P3.5: Criando o Youtube (parte 3 HTML)
-
P3.6: Criando o Youtube (parte 3 CSS)
-
P4: Aulão Criando o Google
-
P5.1: Criando o Twitter (parte 1)
-
P5.2: Criando o Twitter (parte 2)
-
P6.1: Criando o Linkedin (introdução)
-
P6.2: Criando o Linkedin (Header)
-
P6.3: Criando o Linkedin (Sidebar)
-
P6.4: Criando o Linkedin (Input)
-
P6.5: Criando o Linkedin (Posts)
-
P6.6: Criando o Linkedin (Widgets)
Módulo 3: JavaScript
-
Aula 1: Introdução ao JavaScript
03:07 -
Aula 2: Variáveis e Operadores
10:54 -
Aula 2: Exercícios
-
Aula 3A: Estruturas de Controle: Condicionais: IF e ELSE
14:02 -
Aula 3A: Exercícios
-
Aula 3B: Estruturas de Controle: Condicionais: Switch
04:01 -
Aula 3B: Exercícios
-
Aula 3C: Estruturas de Controle: Laços de Repetição: For
09:11 -
Aula 3C: Exercícios
-
Aula 3D: Estruturas de Controle: Laços de Repetição: While
08:00 -
Aula 3D: Exercícios
-
Aula 3E: Estruturas de Controle: Controle de Fluxo
08:02 -
Aula 3E: Exercícios
-
Aula 4: Funções
11:23 -
Aula 4: Exercícios
-
Aula 5: Arrays
19:28 -
Aula 5: Exercícios
-
Aula 6: Objetos
08:19 -
Aula 6: Exercícios
-
Aula 7: Manipulação de Strings
15:45 -
Aula 7: Exercícios
-
Aula 8: Manipulação de números
11:32 -
Aula 8: Exercícios
-
Aula 9: Tipos de Dados e Conversão
07:14 -
Aula 9: Exercícios
-
Aula 10: Arrays e objetos avançados
09:27 -
Aula 10: Exercícios
-
Aula 11: Escopo e Closures
09:54 -
Aula 11: Exercícios
-
Aula 12: Document Object Model (DOM)
14:12 -
Aula 12: Exercícios
-
Aula 13: Eventos
12:17 -
Aula 13: Exercícios
-
Aula 14: Async e Await
04:21 -
Aula 14: Exercício
-
Aula 15: Manipulação de formulários
09:29 -
Aula 15: Exercício
-
Aula 16: Trabalhando com JSON
06:01 -
Aula 16: Exercícios
-
Aula 17: Programação Orientada a Objetos
10:57 -
Aula 17: Exercícios
-
Aula 18: O que são APIs?
16:39 -
Aula 18: Exercícios
-
JavaScript | Prova
Práticas em HTML+CSS+JS
-
P1: Recriando a Netflix
-
P2.1 Flappy Bird: Introdução
-
P2.2 Flappy Bird: Cenário
-
P2.3 Flappy Bird: Cenário
-
P2.4 Flappy Bird: Mecânica
-
P3.1 Codi Memory: Introdução
-
P3.2 Codi Memory: Criando a Tela de Jogo
-
P3.3 Codi Memory: Revelando Cards
-
P3.4 Codi Memory: Conferindo Pares
-
P4.1 Dino: Introdução
-
P4.2 Dino: Pulo
-
P4.3 Dino: Obstáculos
-
P5.1 Notefy: Introdução
-
P5.2 Notefy: Lógica
-
P5.3 Notefy: Memória
-
P6: Recriando o TikTok
-
P7: Campo Minado
Módulo 4: Bootstrap
-
Apostila de Bootstrap
-
Aula 1: Introdução
-
Aula 2: Hello World
-
Aula 3: Grid
-
Aula 4: Componentes: Botões
-
Aula 5: Componentes: Menu Suspenso
-
Aula 6: Componentes: Carrossel
-
Aula 7: Portfólio: Introdução
-
Aula 8: Portfólio: Cabeçalho
-
Aula 9: Portfólio: About
-
Aula 10: Portfólio: Serviços
-
Aula 11: Portfólio: Ajuste da Navbar
-
Aula 12: Portfólio: Seção projetos
-
Aula 13: Portfólio: Contato
-
Aula 14: Portfólio: Rodapé e Ajustes
-
Bootstrap | Prova
Módulo 5: React
-
Apostila de React
-
Aula 1: Criando o projeto com Vite
-
Aula 2: Layout base com Tailwind
-
Aula 3: Componentização
-
Aula 4: Props e renderização de de Listas
-
Aula 5: Usestate e formulário de busca
-
Aula 6: Filtragem avançada e estados derivados
-
Aula 7: React Router Dom: Rotas Básicas
-
Aula 8: Página de Detalhes
-
Aula 9: Consulmindo API FAKE (Json Server)
-
Aula 10: UseEfect, Loading e Tratamentos de Erros
-
Aula 11: Estado Global simples com context API (Favoritos)
-
Aula 12: Finalização, Deploy
-
P1: Quiz com React
-
P2: Revisão do React + Vite
-
P3: Lidando com eventos no React
-
P4: Divulgação de vagas de emprego – Projeto React
-
P5: Tela de Login – Projeto React
-
P6: Landing Page para carros – Projeto React
-
P7: Consumindo uma API do Backend, no React
-
P8 – Criando um site com formulário de contato
-
P9 – Consumindo API REST COUNTRIES
-
P10 – Coffee Delivery
-
React | Prova
Módulo 6: TypeScript
-
Apostila de Typescript
-
Aula 1: Introdução
-
Aula 2: Variáveis
-
Aula 3: Funções
-
Aula 4: Prática 1: Sistema de E-commerce
-
Aula 5: Desestruturação
-
Aula 6: Generics
-
Aula 7: Introdução as Classes
-
Aula 8: Pratica II: Sistema de e-commerce
-
Aula 9: Encapsulamento de Dados
-
Aula 10: Classes (Get e Set)
-
Aula 11: Classes (Somente Leitura e Estático)
-
Aula 12: Questões de Recrutamento
-
TypeScript | Prova
Módulo 7: Vue Js
-
Apostila de Vue
-
Aula 1: Introdução
-
Aula 2: Instâncias
-
Aula 3: Condicionais
-
Aula 4: Loops
-
Aula 5: Manipulação de Eventos
-
Aula 6: Métodos
-
Aula 7: Slider
-
Aula 8: Componentes: Introdução
-
Aula 9: Componentes: Modelo XT
-
Aula 10: Componentes: Raiz única
-
Aula 11: Props
-
Aula 12: Avançando em Props
-
Aula 13: Avançando em Props (parte 2)
-
Aula 14: Componentes Globais e Locais
-
Vue JS | Prova
Módulo 8: Tailwind
-
Aula 1: Introdução
07:57 -
Aula 2: Fundamentos do Sistema de Classes
05:09 -
Aula 3: Flexbox e Grid
08:11 -
Aula 4: Espaçamento e Dimensionamento
08:31 -
Aula 5: Tipografia
10:18 -
Aula 6: Cores e Backgrounds
08:02 -
Aula 7: Bordas e Sombras
05:09 -
Aula 8: Responsividade
07:06 -
Aula 9: Estados e Pseudo-classes
06:48 -
Aula 10: Componentes
07:51 -
Aula 11: Dark Mode
04:26 -
Aula 12: Customização
06:03 -
Aula 13: Animações
04:55 -
Aula 14: Recriando o Spotify
-
Tailwind CSS | Prova
Módulo 9: UI/UX
-
Apostila de UX/UI
-
Aula 1: User Stories
-
Aula 2: Principais Leis UX
-
Aula 3: Gestalt
-
UI/UX | Prova
Módulo 10: Git Github
-
Apostila de Git/GitHub
-
Aula 1: Fundamentos do Git e Configuração Inicial
-
Aula 2: Instalação e Configuração Inicial do Git
-
Aula 3: Criando e Gerenciando Repositórios Locais
-
Aula 4: Salvando Alterações com Git
-
Aula 5: Ignorando Arquivos com .gitignore
-
Aula 6: Introdução aos Repositórios Remotos
-
Aula 7: Configurando Repositórios Remotos
-
Aula 8: Enviando Alterações para o Repositório Remoto
-
Aula 9: Recebendo Alterações do Repositório Remoto
-
Aula 10: Clonando Repositórios Existentes
-
Aula 11: Fork no GitHub
-
Atividade Prática
-
Aula 12: Introdução às Branches no Git
-
Aula 13: Criando e Alternando entre Branches
-
Aula 14: Fundindo Alterações com git merge
-
Aula 15: Colaboração no GitHub com Forks e Pull Requests
-
Aula 16: Trabalhando com Issues no GitHub
-
Atividade Prática
-
Aula 17: Boas Práticas para Mensagens de Commit
-
Aula 18: Organização de Branches em Projetos Reais
-
Aula 19: Fluxo de Trabalho Essencial com Feature Branch e Pull Requests
-
Projeto Prático de Desenvolvimento Colaborativo
-
Git & GitHub | Prova
Instrutores
Feedback
5.0
Total 2 Classificações
100%
0%
0%
0%
0%
Edgar Evangelista de Souza
Helisson Roberto