Desenvolvimento Web com HTML, CSS e JavaScript

Aprenda HTML5, CSS3 e JavaScript e programe a Web do futuro. Veja boas práticas como performance e design responsivo, e frameworks modernos como jQuery e Bootstrap. Este material gratuito é o que usamos no curso de HTML, CSS e JavaScript da Caelum e esperamos que seja útil no seu aprendizado. Não deixe também de compartilhar essa apostila com seus amigos.
A Caelum oferece cursos de TI desde 2004 em todo o Brasil. É conhecida por seus cursos nas áreas de Java, Ruby, mobile, front-end, .NET e agile, além de cursos online. Temos diversasapostilas abertas para download e consulta gratuita. E, se estiver interessado em nossos cursos, não deixe de entrar em contato.

Sumário

  1. 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?
  2. 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
  3. 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. Exercícios opcionais
  4. 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. Para saber mais: suporte HTML5 no Internet Explorer antigo
    16. Exercícios opcionais
  5. JavaScript e interatividade na Web
    1. Introdução ao JavaScript
    2. Console do navegador
    3. Sintaxe básica
    4. Exercícios opcionais: fixação de sintaxe
    5. Interatividade na Web
    6. Exercício: validação na busca com JS
    7. Funções temporais
    8. Exercício: banner rotativo
    9. Para saber mais: sugestão para o desafio de pause/play
    10. Para saber mais: vários callbacks no mesmo elemento
  6. 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
  7. 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
  8. 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
  9. 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
  10. PHP: parâmetros e bancos de dados
    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
    6. Banco de dados e SQL
    7. MySQL e phpMyAdmin
    8. Para saber mais: instalação do MySQL em casa
    9. Buscas no MySQL com PHP
    10. Refinando as buscas com WHERE
    11. Exercícios: phpMyAdmin
    12. Exercícios: PHP com MySQL
    13. Busca de muitos resultados
    14. Ordenação dos resultados
    15. Exercícios: mais buscas com PHP
    16. Exercícios opcionais
  11. 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
  12. 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
  13. 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. Botão de curtir do Facebook
    7. Exercícios: Facebook
    8. Para saber mais: Twitter
    9. Para saber mais: Google+
    10. Exercícios opcionais: Twitter e Google+
    11. Fontes customizadas com @font-face
    12. Serviços de web fonts
    13. Exercícios: Google Web Fonts
  14. 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
  15. 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
  16. 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

 
Fonte: http://www.caelum.com.br/

Facebook Twitter Youtube
Copyright © 2022 Blog de Tecnologia - Todos os direitos reservados