Este é um curso intermediário com foco nas principais técnicas utilizadas na montagem de layouts HTML/CSS.

O objetivo deste curso é demonstrar ao aluno como analisar, planejar e executar a construção de uma página utilizando as mais modernas técnicas HTML e CSS. Neste curso, são respondidas as principais dúvidas que estudantes enviam para mim, como "Como criar colunas?" ou "Como colocar estas divs posicionadas desta forma"?

Ao final deste curso, você terá aprendido como pensar em HTML e CSS. Ao ver um layout estático, em PSD ou JPG, por exemplo, você já terá uma ideia de por onde deve começar, quais divs criar, de qual forma e usando qual técnica. Enfim, todo o conjunto de conhecimentos que você precisa ter para dar um passo além do básico.

Você irá aprender

• Como os desenvolvedores profissionais trabalham com a montagem de layouts HTML e CSS;
• Como analisar um layout estático em PSD e planejar uma estrutura de código para execução;
• Como dominar as mais novas ferramentas de layout CSS Grid e Flexbox para conseguir montar o layout que deseja;
• Como funciona a propriedade position;
• Como float estruturou layouts durante mais de uma década;
• Como efetivamente transformar uma ideia de layout em algo concreto, com código limpo e objetivo;
• Como construir um sistema de grade moderno e flexível.

Tudo isso já considerando um site responsivo (que se adapta a diversas telas).

Este curso é para você?

Este é um curso intermediário destinado para estudantes que já possuem conhecimento básico de HTML e CSS. Se você já possui um layout que está tentando montar em HTML, podemos usá-lo como exemplo. Assim, você aprende e já sai do curso com o seu projeto pronto.

Software

Para fazer o curso você precisará apenas de um navegador (como Mozilla Firefox ou Google Chrome) e um editor de texto de sua preferência (como Notepad++ ou Sublime Text).

Carga horária

10 aulas de até 2 horas de duração cada.

Visão geral

1. Aula 1

   1. Elementos bloco e em linha (`display`)
   2. Entendendo o Box Model
   3. Propriedade `box-sizing`

2. Aula 2

   1. Propriedade position CSS
   2. position: absolute com position: relative
   3. position: fixed
   4. Aplicando position a layouts

3. Aula 3

   1. Propriedade float CSS
   2. Construindo um menu
   3. Construindo um layout multi-colunas

4. Aula 4

   1. A propriedade display CSS
   2. Usando display: inline-block
   3. Usando display: table

5. Aula 5

   1. Introdução a sistemas de grade
   2. Unidades relativas (como `em` e `rem`)
   3. Construindo um sistema de grade

6. Aula 6

   1. Layouts com flexbox
   2. display: flex, align-items, justify-content e muito mais
   3. Casos práticos

7. Aula 7

   1. Layouts com CSS Grid
   2. display: grid, templates, área e muito mais
   3. Casos práticos

8. Aula 8

   1. Revisão flexbox e grid
   2. Mais casos práticos
   3. Responsividade avançada

9. Aula 9

   1. Análise de um layout
   2. Planejamento e estruturação de código
   3. Montagem de um layout utilizando conceitos aprendidos

10. Aula 10

    1. Dúvidas e esclarecimentos
    2. Tendências na área de front end
    3. Continuando seus estudos