Você não odeia quando começa a desenvolver uma página nova, mas do nada trava por não saber como estruturar alguma parte?
Quer saber um segredo?
Eu conheço o sentimento, passar um bom tempo olhando para a seção tentando entender como passar tal layout para o código.
Agora me conte, não seria muito bom se você tivesse uma maneira de estruturar a pagina toda na sua cabeça antes de começar a desenvolver?
Bem, acredite ou não, existe sim, uma maneira, um processo mental de transformar um layout em HTML.
Esse processo eu costumo chamar de Leitura de Layout.
Leitura de Layout – como diminuir o tempo de desenvolvimento
O processo consiste em, visualizar toda a estrutura do layout, e antes de colocar a mão no código, separar mentalmente ( ou anotar ) cada seção ( section ) do layout e todo o seu conteúdo.
Seguindo o layout do post, temos o primeiro scroll de uma página, que consiste no header e a dobra principal, que chamamos de hero.
É um modelo de layout bem comum na atualidade, com o header posicionado no topo da tela, por cima do background do hero.
Mesmo com esse tipo de posicionamento sobreposto, podemos ter uma estrutura de marcação HTML separada em blocos.
Primeiro, temos o bloco do header com os componentes de logo e menu de navegação, além do conteúdo centralizado no grid.
O posicionamento do header é fixo no topo da página ( position: fixed / top: 0 ).
Depois temos o hero, com a chamada principal, chamada secundária, botão de ação e informativo de telefone, também com o conteúdo centralizado no grid.
O hero está tomando 85% da tela ( height: 85vh / background: #403D39 ).
Se você conseguir separar cada parte de um layout em caixinhas, a sua marcação HTML vai ser sempre exata e na hora de estilizar, vai tudo fluir de forma simples e rápida.
Acompanhe o conteúdo para aprender mais sobre a Leitura de Layout e como esse processo pode poupar algumas horas de desenvolvimento.