Web Design Responsivo
com HTML5, CSS3 e BEM

Conteúdo Programático

1. Introdução

1.1 Introdução ao curso
1.2 Apresentando o projeto
1.3 Preparando o ambiente de desenvolvimento

2. Começando com HTML

2.1 O que é HTML?
2.2 Estrutura básica do documento
2.3 DOCTYPE e codificação
2.4 Primeiras tags: títulos, quebras de linhas e parágrafos
2.5 Comentários
2.6 Ênfase, importância e marcação
2.7 Imagens
2.8 Âncoras (links)
2.9 Elementos estruturais

3. Começando com CSS

3.1 O que é CSS
3.2 Estilos incorporados e Regras CSS
3.3 Estilos em arquivos externos
3.4 Seletores de tipo, classe e ID
3.5 Agrupando seletores
3.6 Seletores descendentes
3.7 Seletores de filhos diretos
3.8 Cores
3.9 Formatação de textos
3.10 Inspecionando com Chrome DevTools
3.11 Entendendo a propriedade display
3.12 Adicionando bordas
3.13 Espaçamento interno (padding)
3.14 Margens de elementos
3.15 Box model e a propriedade box-sizing

4. Iniciando o projeto do curso

4.1 Preparando o projeto
4.2 Criando o cabeçalho da página
4.3 Listas ordenadas e não-ordenadas
4.4 Adicionando os planos
4.5 Flutuando elementos
4.6 Usando pseudo-elementos
4.7 Configurando os planos lado a lado com float
4.8 Criando um botão
4.9 As pseudo-classes :focus e :hover
4.10 Reset CSS e Normalize.css

5. Web Design Responsivo

5.1 O que é Responsive Web Design?
5.2 Unidade de medida: pixel
5.3 Unidade de medida: percentual
5.4 Meta tag viewport
5.5 Layout fixo e fluído
5.6 Layout responsivo e media queries
5.7 Como funciona um sistema de Grid CSS
5.8 Sistema de grid do Bootstrap
5.9 Ajustando o projeto para usar Grid CSS

6. Especificidade, BEM e boas práticas

6.1 Especificidade do CSS
6.2 Caos no CSS: porque uma metodologia é importante?
6.3 A Metodologia BEM: seu código escalável
6.4 Como usar BEM na prática – parte 1
6.5 Como usar BEM na prática – parte 2
6.6 Ajustando o projeto do curso com BEM
6.7 Mais organização: CSS com Guidelines

7. Encerrando o projeto e mais CSS

7.1 Unidades de medida: em e rem
7.2 Ajustando unidades de medida no projeto
7.3 Adicionando chamada principal
7.4 Adicionando depoimento
7.5 Adicionando rodapé
7.6 Posicionamento estático e fixo
7.7 Posicionamento relativo
7.8 Posicionamento absoluto
7.9 Adicionando rótulo no plano
7.10 Ajustando margem do plano
7.11 Adicionando aspas no depoimento
7.12 Adicionando o bloco de navegação
7.13 Adicionando o menu para telas pequenas
7.14 Ajustando o menu para telas médias e grandes
7.15 JavaScript Hook: chaveando o menu
7.16 Criando um formulário: assinatura de plano
7.17 Concluindo o formulário de assinatura de plano
7.18 Entendendo as tabelas do HTML
7.19 Aplicando estilos em tabelas com CSS
7.20 Conclusão e próximos passos

Benefícios de Estudar com a AlgaWorks

Acesso para sempre

Seu acesso ao curso online será vitalício, ou seja, nunca vai expirar.

Aprenda no seu ritmo

Estude a qualquer hora e assista as videoaulas quantas vezes precisar.

Certificado de conclusão

Ao concluir o curso, você vai receber um certificado de conclusão com validação digital.

Certificado de Conclusão

Vários de nossos alunos já relataram o prestígio que tiveram durante entrevistas de emprego por parte das empresas, quando souberam que são alunos da AlgaWorks. Também já recebemos mensagens de líderes técnicos que dizem dar preferência para candidatos que estudam com a gente.

Sem dúvidas, ter um certificado da AlgaWorks não é um documento qualquer. É um indicador que você investe na sua carreira com treinamentos que realmente capacitam os alunos para resolver problemas reais.

Quando você concluir 100% das aulas do treinamento, vai receber um certificado do curso em seu nome, com validação digital de autenticidade.

A carga horária que constará no certificado é de 36 horas.

Perguntas Frequentes

Ao fazer a minha matrícula, vou ter acesso a todas as aulas?

Sim! Ao efetuar a sua matrícula, você terá acesso imediato.

Qual é a carga horária do curso?

São 36 horas de carga horária (tempo que constará no certificado de conclusão).

AlgaWorks Softwares, Treinamentos e Serviços Ltda

CNPJ: 10.687.566/0001-97