Web Design Responsivo com HTML5, CSS3 e BEM

Aprenda a criar páginas web responsivas do zero e com uma metodologia que possibilite escalar o seu código.

Comprar agora Acesso imediato

Conteúdo Programático

  1. Introdução

    1. Introdução ao curso 7m 17s
    2. Apresentando o projeto 2m 38s
    3. Preparando o ambiente de desenvolvimento 3m 37s

  2. Começando com HTML

    1. O que é HTML? 15m 6s
    2. Estrutura básica do documento 19m 35s
    3. DOCTYPE e codificação 9m 14s
    4. Primeiras tags: títulos, quebras de linhas e parágrafos 14m 33s
    5. Comentários 2m 48s
    6. Ênfase, importância e marcação 6m 21s
    7. Imagens 9m 56s
    8. Âncoras (links) 5m 51s
    9. Elementos estruturais 15m 13s

  3. Começando com CSS

    1. O que é CSS 4m 25s
    2. Estilos incorporados e Regras CSS 8m 46s
    3. Estilos em arquivos externos 4m 23s
    4. Seletores de tipo, classe e ID 12m 39s
    5. Agrupando seletores 2m 50s
    6. Seletores descendentes 7m 17s
    7. Seletores de filhos diretos 5m 45s
    8. Cores 18m 45s
    9. Formatação de textos 16m 38s
    10. Inspecionando com Chrome DevTools 4m 44s
    11. Entendendo a propriedade display 15m 19s
    12. Adicionando bordas 11m 8s
    13. Espaçamento interno (padding) 5m 27s
    14. Margens de elementos 11m 32s
    15. Box model e a propriedade box-sizing 15m 51s

  4. Iniciando o projeto do curso

    1. Preparando o projeto 4m 50s
    2. Criando o cabeçalho da página 11m 26s
    3. Listas ordenadas e não-ordenadas 9m 32s
    4. Adicionando os planos 20m 24s
    5. Flutuando elementos 12m 0s
    6. Usando pseudo-elementos 7m 33s
    7. Configurando os planos lado a lado com float 7m 36s
    8. Criando um botão 2m 43s
    9. As pseudo-classes :focus e :hover 3m 3s
    10. Reset CSS e Normalize.css 9m 26s

  5. Web Design Responsivo

    1. O que é Responsive Web Design? 10m 11s
    2. Unidade de medida: pixel 14m 15s
    3. Unidade de medida: percentual 25m 24s
    4. Meta tag viewport 11m 55s
    5. Layout fixo e fluído 6m 50s
    6. Layout responsivo e media queries 12m 37s
    7. Como funciona um sistema de Grid CSS 10m 20s
    8. Sistema de grid do Bootstrap 28m 47s
    9. Ajustando o projeto para usar Grid CSS 6m 48s

  6. Especificidade, BEM e boas práticas

    1. Especificidade do CSS 21m 16s
    2. Caos no CSS: porque uma metodologia é importante? 22m 34s
    3. A Metodologia BEM: seu código escalável 18m 12s
    4. Como usar BEM na prática - parte 1 18m 56s
    5. Como usar BEM na prática - parte 2 10m 55s
    6. Ajustando o projeto do curso com BEM 27m 44s
    7. Mais organização: CSS com Guidelines 10m 49s

  7. Encerrando o projeto e mais CSS

    1. Unidades de medida: em e rem 24m 53s
    2. Ajustando unidades de medida no projeto 18m 40s
    3. Adicionando chamada principal 25m 17s
    4. Adicionando depoimento 10m 21s
    5. Adicionando rodapé 3m 2s
    6. Posicionamento estático e fixo 10m 55s
    7. Posicionamento relativo 4m 41s
    8. Posicionamento absoluto 7m 17s
    9. Adicionando rótulo no plano 7m 25s
    10. Ajustando margem do plano 6m 39s
    11. Adicionando aspas no depoimento 9m 46s
    12. Adicionando o bloco de navegação 7m 53s
    13. Adicionando o menu para telas pequenas 7m 55s
    14. Ajustando o menu para telas médias e grandes 5m 7s
    15. JavaScript Hook: chaveando o menu 10m 30s
    16. Criando um formulário: assinatura de plano 19m 1s
    17. Concluindo o formulário de assinatura de plano 15m 48s
    18. Entendendo as tabelas do HTML 4m 8s
    19. Aplicando estilos em tabelas com CSS 7m 55s
    20. Conclusão e próximos passos 4m 46s

Instrutores

Thiago Faria de Andrade

Fundador e instrutor da AlgaWorks. Graduado em Sistemas de Informação e certificado SCJP.

Iniciou seu interesse por programação aos 14 anos, quando desenvolveu um software para entretenimento e se tornou um dos mais populares no Brasil e outros países de língua portuguesa.

Já foi sócio e trabalhou em outras empresas de software como programador, gerente e diretor de tecnologia, mas nunca deixou de programar.