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
Módulo 1: HTML 5
-
Download dos Materiais
-
Aula 1: Introdução ao HTML
-
Aula 2: Hello World
-
Aula 3: Títulos
-
Aula 4: Parágrafos
-
Aula 5: Formatação de Texto
-
Aula 6: Links
-
Aula 7: Imagens
-
Aula 8: Listas
-
Aula 9: Formulários (parte 1)
-
Aula 10: Formulários (parte 2)
-
Aula 11: Tabelas
-
Aula 12: Áudio
-
Aula 13: Vídeo
-
Aulão de Revisão
-
HTML | Prova
Módulo 2: CSS 3
-
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
-
Aula 20: Tailwind (colocar)
-
Aula 21: Tailwind (colocar)
-
Aula 22: Tailwind (colocar)
-
Aula 23: Tailwind 4
-
Aula 24: Tailwind 5
-
Aula 25: Tailwind 6
-
Aula 26: Tailwind 7
-
Aula 27: Tailwind 8
-
Aula 28: Tailwind 9
-
Aula 29: Tailwind 10
-
Aula 30: Tailwind 11
-
Aula 31: Tailwind 12
-
Aula 32: Tailwind 13
-
Aula 33: Tailwind 14
-
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
-
Aula 2: Variáveis e Operadores
-
Aula 2: Exercícios
-
Aula 3A: Estruturas de Controle: Condicionais: IF e ELSE
-
Aula 3A: Exercícios
-
Aula 3B: Estruturas de Controle: Condicionais: Switch
-
Aula 3B: Exercícios
-
Aula 3C: Estruturas de Controle: Laços de Repetição: For
-
Aula 3C: Exercícios
-
Aula 3D: Estruturas de Controle: Laços de Repetição: While
-
Aula 3D: Exercícios
-
Aula 3E: Estruturas de Controle: Controle de Fluxo
-
Aula 3E: Exercícios
-
Aula 4: Funções
-
Aula 4: Exercícios
-
Aula 5: Arrays
-
Aula 5: Exercícios
-
Aula 6: Objetos
-
Aula 6: Exercícios
-
Aula 7: Manipulação de Strings
-
Aula 7: Exercícios
-
Aula 8: Manipulação de números
-
Aula 8: Exercícios
-
Aula 9: Tipos de Dados e Conversão
-
Aula 9: Exercícios
-
Aula 10: Arrays e objetos avançados
-
Aula 10: Exercícios
-
Aula 11: Escopo e Closures
-
Aula 11: Exercícios
-
Aula 12: Document Object Model (DOM)
-
Aula 12: Exercícios
-
Aula 13: Eventos e funções assíncronas
-
Aula 13: Exercícios
-
Aula 14: Manipulação de formulários
-
Aula 14: Exercício
-
Aula 15: Trabalhando com JSON
-
Aula 15: Exercício
-
Aula 16: Programação Orientada a Objetos
-
Aula 16: Exercícios
-
Aula 17: O que são APIs?
-
Aula 17: Exercícios
-
Aula 18: Modularização
-
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
-
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
-
Aula 0: Intensivão
-
Aula 1: Introdução
-
Aula 2: Hello World
-
Aula 3: JSX
-
Aula 4: Planejamentos de Componentes
-
Aula 5: Criando Componentes
-
Aula 6: Estilizando Componentes
-
Aula 7: Hooks (parte 1)
-
Aula 8: Hooks (parte 2)
-
Aula 9: Props
-
Aula 10: Criando Itens
-
Aula 11: Mostrando e Estilizando Itens
-
Aula 12: Criando a CartPage
-
Aula 13: Atualizando Itens do Carrinho
-
Aula 14: Estilizando o Carrinho
-
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
-
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
-
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: Angular JS
-
Aula 1: Introdução
-
Aula 2: Componentes e Templates
-
Aula 3: Diretivas e Pipes básicos
-
Aula 4: Formulários: Template Driven
-
Aula 5: Formulários: Reactive forms
-
Aula 6: Consumindo APIs com HttpClient
-
Aula 7: Serviços e Injeção de Dependências
-
Aula 8: Modularização
-
Aula 9: Rotas e Navegação
-
Aula 10: Comunicação entre Componentes e Services
-
Aula 11: Lazy loading e Performance
-
Aula 12: Diretivas personalizadas
-
Aula 13: Testes com Jasmine e Karma
-
Aula 14: Deploy e Otimização
-
Angular JS | Prova
Módulo 9: UI/UX
-
Aula 1: User Stories
-
Aula 2: Principais Leis UX
-
Aula 3: Gestalt
-
UI/UX | Prova
Módulo 10: 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
