Curso Desenvolvimento Web com HTML, CSS e JavaScript

FD9E034F-C706-472D-ABA4-310433A703E5 Created with sketchtool. 40 horas/aula
Veja as próximas turmas

O que você vai fazer

Para quem é esse curso?

Este curso é focado em pessoas que queiram dar os primeiros passos nesse fantástico mundo de desenvolvimento web criando páginas responsivas e semânticas.

Para aproveitar melhor o curso recomendamos que você tenha conhecimento em

Curso Lógica de Programação com JavaScript

Conheça todos os cursos que fazem parte da Formação Front-end

Conteúdo detalhado do curso WD-43

    Sobre o curso - o complexo mundo do front-end

  1. O curso e os exercícios
  2. O projeto de e-commerce
  3. Tirando dúvidas com instrutor
  4. Tirando dúvidas online no GUJ
  5. Bibliografia
  6. Para onde ir depois?

    Introdução a HTML e CSS

  1. Exibindo informações na Web
  2. Sintaxe do HTML
  3. Estrutura de um documento HTML
  4. Tags HTML
  5. Imagens
  6. A estrutura dos arquivos de um projeto
  7. Editores e IDEs
  8. Primeira página
  9. Exercício: primeiros passos com HTML
  10. Estilizando com CSS
  11. Sintaxe e inclusão de CSS
  12. Propriedades tipográficas e fontes
  13. Alinhamento e decoração de texto
  14. Imagem de fundo
  15. Bordas
  16. Exercício: primeiros passos com CSS
  17. Cores na Web
  18. Listas HTML
  19. Espaçamento e margem
  20. Exercícios: listas e margens
  21. Links HTML
  22. Exercícios: links
  23. Elementos estruturais
  24. CSS: Seletores de ID e filho
  25. Fluxo do documento e float
  26. Exercícios: seletores CSS e flutuação de elementos
  27. O futuro e presente da Web com o HTML5

    HTML semântico e posicionamento no CSS

  1. O processo de desenvolvimento de uma tela
  2. O projeto Mirror Fashion
  3. Analisando o Layout
  4. HTML semântico
  5. Pensando no header
  6. Estilização com classes
  7. Exercícios: header semântico
  8. CSS Reset
  9. Block vs Inline
  10. Exercícios: reset e display
  11. Position: static, relative, absolute
  12. Exercícios: posicionamento
  13. Para saber mais: suporte HTML5 no Internet Explorer antigo
  14. Exercícios opcionais

    Mais HTML e CSS

  1. Analisando o miolo da página
  2. Formulários
  3. Posicionamento com float e clear
  4. Decoração de texto com CSS
  5. Cascata e herança no CSS
  6. Para saber mais: o valor inherit
  7. Exercícios: menu e destaque
  8. Display inline-block
  9. Exercícios: painéis flutuantes
  10. Seletores de atributo do CSS3
  11. Rodapé
  12. Substituição por Imagem
  13. Estilização e posicionamento do rodapé
  14. Exercícios: rodapé
  15. Exercícios opcionais

    CSS Avançado

  1. Seletores avançados
  2. Pseudo-classes
  3. Pseudo elementos
  4. Exercícios: seletores e pseudo-classes
  5. Exercícios opcionais
  6. CSS3: border-radius
  7. CSS3: text-shadow
  8. CSS3: box-shadow
  9. Opacidade e RGBA
  10. Prefixos
  11. CSS3: Gradientes
  12. Progressive Enhancement
  13. Exercícios: visual CSS3
  14. CSS3 Transitions
  15. CSS3 Transforms
  16. Exercícios: CSS3 transform e transition
  17. Para saber mais: especificidade de seletores CSS

    Web para dispositivos móveis

  1. Site mobile ou mesmo site?
  2. CSS media types
  3. CSS3 media queries
  4. Viewport
  5. Exercícios: adaptações para mobile
  6. Responsive Web Design
  7. Mobile-first
  8. Exercícios opcionais: versão tablet

    Introdução a PHP

  1. Libertando o HTML de suas limitações
  2. Como funciona um servidor HTTP
  3. Como funciona o PHP no servidor
  4. Para saber mais: instalação do PHP em casa
  5. Exercícios: executando o PHP
  6. Reaproveitamento de código com include
  7. Exercícios: include
  8. Para saber mais: ainda mais flexibilidade com variáveis
  9. Exercícios opcionais: variáveis em PHP

    Progressive enhancement e mobile-first

  1. Formulário de compra
  2. Exercício: formulário da página de produto
  3. Design mobile-first
  4. Progressive enhancement
  5. Box model e box-sizing
  6. Exercícios: página de produto
  7. Evoluindo o design para desktop
  8. Media queries de conteúdo
  9. Exercícios: responsive design
  10. HTML5 Input range
  11. Exercícios: seletor de tamanho
  12. Tabelas
  13. Exercícios: detalhes
  14. Exercícios opcionais: fundo
  15. Discussão em aula: importância do Progressive Enhancement na Web atual

    PHP: parâmetros e páginas dinâmicas

  1. Submissão do formulário
  2. Parâmetros com PHP
  3. Listas de definição no HTML
  4. Exercícios: checkout da compra
  5. Exercícios opcionais

    Bootstrap e formulários HTML5

  1. Bootstrap e frameworks de CSS
  2. Estilo e componentes base
  3. A página de checkout da Mirror Fashion
  4. Exercício opcional: início do checkout sem PHP
  5. Exercícios: página de checkout
  6. Formulários a fundo
  7. Novos componentes do HTML5
  8. Novos atributos HTML5 em elementos de formulário
  9. Ícones com glyphicons
  10. Exercícios: formulários
  11. Validação HTML5
  12. Para saber mais: controlando as validações HTML5
  13. Exercícios: validação com HTML5
  14. Grid responsivo do Bootstrap
  15. Exercícios: grids
  16. Para saber mais: componentes JS do Bootstrap
  17. Exercícios opcionais: navbar e JavaScript
  18. Para saber mais: outros frameworks CSS
  19. Discussão em aula: os problemas do Bootstrap e quando não usá-lo

    JavaScript e interatividade na Web

  1. Características da linguagem
  2. A tag script
  3. Console do navegador
  4. Sintaxe básica
  5. Operadores
  6. Tipos de dados
  7. Exercícios opcionais: fixação de sintaxe
  8. Exercícios: formatando um número
  9. Comparações
  10. Blocos condicionais
  11. Funções
  12. Exercícios: tornando nosso formatador reutilizável
  13. Interatividade na Web
  14. Exercício: Calculando o total da compra
  15. Array
  16. Blocos de Repetição
  17. Funções temporais
  18. Exercício opcional: banner rotativo
  19. Para saber mais: vários callbacks no mesmo elemento

    jQuery

  1. jQuery - A função $
  2. jQuery Selectors
  3. Filtros customizados e por DOM
  4. Utilitário de iteração do jQuery
  5. Características de execução
  6. Mais produtos na home
  7. Exercícios: jQuery na home
  8. O elemento output do HTML5
  9. Exercícios: mostrando tamanho do produto com jQuery
  10. Plugins jQuery
  11. Exercícios: plugin
  12. Exercícios opcionais

    Integrações com serviços Web

  1. Web 2.0 e integrações
  2. iframes
  3. Vídeo embutido com YouTube
  4. Exercícios: iframe
  5. Exercício opcional: Google Maps
  6. Fontes customizadas com @font-face
  7. Serviços de web fonts
  8. Exercícios: Google Web Fonts

    Apêndice - Otimizações de front-end

  1. HTML e HTTP - Como funciona a World Wide Web?
  2. Princípios de programação distribuída
  3. Ferramentas de diagnóstico - YSlow e PageSpeed
  4. Compressão e minificação de CSS e JavaScript
  5. Compressão de imagens
  6. Diminuir o número de requests
  7. Juntar arquivos CSS e JS
  8. Image Sprites
  9. Para saber mais
  10. Exercícios: otimizações Web

    Apêndice - LESS

  1. Variáveis
  2. Contas
  3. Hierarquia
  4. Funções de cores e palhetas automáticas
  5. Reaproveitamento com mixins
  6. Executando o LESS
  7. Para saber mais: recursos avançados e alternativas
  8. Exercícios: LESS

    Apêndice - PHP: Banco de dados e SQL

  1. MySQL e phpMyAdmin
  2. Para saber mais: instalação do MySQL em casa
  3. Buscas no MySQL com PHP
  4. Refinando as buscas com WHERE
  5. Exercícios: phpMyAdmin
  6. Exercícios: PHP com MySQL
  7. Busca de muitos resultados
  8. Ordenação dos resultados
  9. Exercícios: mais buscas com PHP
  10. Exercícios opcionais

    Apêndice - Subindo sua aplicação no cloud

  1. Como escolher um provedor
  2. O Jelastic Cloud Locaweb
  3. Criando a conta
  4. Importando dados no MySQL
  5. Preparando o projeto
  6. Enviando o projeto e inicializando servidor

    Apêndice - Mais integrações com serviços Web

  1. Botão de curtir do Facebook
  2. Exercícios: Facebook
  3. Para saber mais: Twitter
  4. Para saber mais: Google+
  5. Exercícios opcionais: Twitter e Google+

O que os alunos falam

Beatriz Accioly

Adorei o curso. A metodologia é ótima, aulas dinamicas e estimulantes, estou cada vez mais apaixonada por desenvolvimento, vou continuar me aprofundan...

Aline Spiecker

Professor demonstrou muito conhecimento em todo o conteúdo que foi abordado no curso, isso ajudou muito no entendimento num todo.

Richard Morales

O conhecimento da professora e a maneira dela ensinar, muito didático, eu que sei quase nada pude aprender e absorver muita coisa

Próximas turmas

Selecione a cidade e os períodos de sua preferência

Qual cidade você pode ir?
Quais períodos você prefere?
Ver turmas encontradas

Nós encontramos essas turmas:

Não achou a turma ideal pra você? Consulte outras turmas e horários.

Entre em contato

Apostila de Desenvolvimento Web com HTML, CSS e JavaScript

Este curso possui apostila aberta, faça o download gratuitamente!

Fale com a gente!

Não encontrou o curso que procura? Conheça a Alura, a plataforma online da Caelum

Conheça a Alura