Arquitetura CSS: descomplicando os problemas
Layout base e Estilização de cabeçalho - Introdução
Boas vindas ao curso Arquitetura CSS: Descomplicando os problemas da Alura! Meu nome é Matheus Castiglioni e serei o seu instrutor durante esse treinamento, no qual desenvolveremos o site de receitas Fruta & Fruto, incluindo :
- cabeçalho;
- banner;
- seção Sobre;
- listagem de receitas;
- seção *Quem somos, com as pessoas envolvidas na empresa;
- rodapé com informações de contatos
Se diminuirmos o tamanho da tela, veremos que o site é responsivo, se adaptando às alterações. Com isso, também será possível acessá-lo de maneira agradável mesmo em um celular, tablet ou desktop. Para o desenvolvimento desse site usaremos algumas boas práticas de CSS, como a metodologia Atomic Design, com a qual organizaremos e arquitetaremos nosso projeto de maneira mais eficiente e de fácil manutenção.
Além disso, conheceremos metodologias de nomenclatura das classes, de modo a mantermos um padrão. Com esses fatores, outros desenvolvedores que utilizarem nosso código terão mais facilidade para entendê-lo e modificá-lo.
Ansioso(a) para conhecer as metodologias e padrões que vamos utilizar? No próximo vídeo começaremos a apresentar o conteúdo!
Bons estudos!
Layout base e Estilização de cabeçalho - Conhecendo o projeto
Para iniciarmos o curso é necessário ter seguido os passos da atividade Preparando o ambiente, ou seja, ter instalado o seu editor de código preferido (como o Visual Studio Code, que utilizaremos ao longo do treinamento) e feito o download do projeto inicial.
Primeiramente, arrastaremos a pasta "arquitetura-css-assets", baixada anteriormente, para o Visual Studio Code. Normalmente quando estamos trabalhando com aplicações Front-end, existem pessoas responsáveis por criar todo o protótipo - ou seja, a parte visual do site ainda não codificada. A partir desse é que fazemos a criação do site em si. O nosso protótipo, feito por meio da aplicação Figma, pode ser encontrado no link abaixo:
Protótipo do site: https://www.figma.com/file/0gMF5BPgplPYqQA6Om1T1sk9/alura-bootstrap?type=design&node-id=0-1&mode=design&t=VNMMQfUK209BIfXz-0 O protótipo servirá como base para que saibamos o que fazer durante o projeto, mas algumas coisas podem ficar diferentes. Com o projeto base e o protótipo aberto, vem a pergunta: como começamos o desenvolvimento de uma aplicação Front-end? Quais arquivos e pastas criamos primeiro?
No VS Code encontraremos algumas pastas pré-configuradas. A primeira delas é a "assets", onde geralmente colocamos todos os arquivos estáticos, como CSS (os arquivos de estilo), imagens (logo, imagens do produto, fotos de pessoas), arquivos JavaScript, ícones, fontes e assim por diante. Dentro dela encontraremos subpastas especificando cada conteúdo, como "css", referente aos arquivos de estilo, e "img", referente às imagens do projeto.
Temos também o arquivo index.html, que geralmente é o arquivo principal renderizado quando abrimos um site - seja ele da Google, da Alura, da Caelum e afins. Esse é o código atual do nosso arquivo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" rel="stylesheet" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fruta & Fruto</title>
<link href="./assets/css/normalize.css" rel="stylesheet" />
<link href="./assets/css/reset.css" rel="stylesheet" />
</head>
<body></body>
</html>
Nele temos algumas marcações HTML. Por exemplo, estamos usando a tag <link> para importarmos algumas fontes do Google que utilizaremos no projeto. Em seguida, definimos o <meta charset> utilizado, que é UTF-8; temos uma tag <meta name> referente ao design responsivo, que explicaremos mais a fundo no futuro; uma tag para compatibilidade com o Edge; o título Fruta & Fruto; e dois arquivos padrão sendo importados, o normalize.css e o reset.css, ambos presentes na pasta "assets/css".
O arquivo normalize.css é o responsável por resetar estilos do nosso navegador. Normalmente, por padrão, cada navegador tem uma implementação própria dos elementos - ou seja, o Chrome tem uma implementação default para as tags <h1>, <h2>, <link>, <button> e assim por diante, assim como o Mozilla Firefox, o Edge, o Opera e qualquer outro navegador têm as suas regras visuais padrão para cada elemento.
Isso acarreta em uma situação complicada, afinal não é interessante abrirmos um site no Chrome e termos um botão com as bordas redondas, mas que no Firefox possui as quadradas. Para eliminarmos a diferença de estilo entre navegadores, surgiu o conceito de resetar o CSS. Imagine que nosso <h1> tem um espaçamento interno de 10 px no Chrome, mas de 20 px no Firefox. O normalize.css substitui ambos pelo valor que configuramos no nosso projeto.
Geralmente o normalize.css é o primeiro arquivo a ser importado na página, de modo que ele primeiro resete todos os padrões e nos permita fazer as configurações necessárias. Dessa forma, qualquer seja o navegador, a importação do normalize.css fará com que o estilo que criamos seja respeitado.
Já o arquivo reset.css é referente aos estilos que desejamos que sejam padrão em todos os navegadores, mas que não estão presentes no normalize.css. Por exemplo, usaremos na nossa aplicação a fonte padrão Roboto.
body {
font-family: Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
ul, li {
padding: 0;
}
Definindo essa fonte como padrão do body da nossa página, não será necessário a especificarmos novamente em todos os elementos em que ela é utilizada. O mesmo foi feito para as tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Aqui definimos que elas não têm espaçamentos externos (margin: 0) ou internos (padding: 0). Nas tags <ul> e <li>, definimos ue o espaçamento interno também será zerado (padding: 0).
Tendo conhecido o protótipo e o projeto inicial, podemos começar efetivamente o desenvolvimento do nosso site.
Layout base e Estilização de cabeçalho - Criando o cabeçalho
Agora que temos o necessário para começarmos o projeto, vamos dar uma olhada no layout construído no Figma. Nele, temos um cabeçalho, um banner com um título, informações referentes ao site, uma lista de receitas, a seção "Quem somos" e, por fim, o rodapé. São muitos elementos, portanto de onde podemos começar a desenvolvê-los?
Geralmente a construção de um site começa de cima para baixo - ou seja, do cabeçalho até o rodapé. Sendo assim, construiremos o cabeçalho com o logo do site e o menu, depois adicionaremos o banner e o título, a explicação do que é o site, passando pelos cards de receitas, a seção "Quem somos" e finalmente o rodapé.
Analisando a proposta do site, vemos que o cabeçalho possui um logo e alguns menus de navegação, e são esses elementos que começaremos a codificar. Voltaremos então ao VS Code, onde abriremos o arquivo index.html.
Dica: o atalho "Ctrl + B" permite esconder ou exibir os arquivos do projeto no menu à esquerda. Não se esqueça que em sistemas operacionais MacOS a tecla "Ctrl" é substituída por "Command".
No corpo da página (<body>) adicionaremos uma tag <cabecalho> que, por sua vez, incluirá um <logo> e um <menu>. Esse menu conterá uma <lista>, e esta conterá um <item> que armazenará o <link> de navegação.
<body>
<cabecalho>
<logo>
</logo>
<menu>
<lista>
<item><link></item>
</lista>
</menu>
</cabecalho>
</body>Essa é a estrutura que desejamos, mas o código está errado. Primeiramente, o HTML não entende português, portanto esses não serão os nomes das nossas tags. Para criarmos um cabeçalho no HTML, por exemplo, usamos a tag <header>; o logo é uma imagem, e carregamos imagens usando a tag <img>, que não precisa ser fechada; o menu de navegação é construído usando a tag <nav>; listas são construídas com a tag <ul>, de unordered list (lista não ordenada); itens de uma lista utilizam a tag <li>, de list item; e o link é expresso por uma tag <a>, de anchor (âncora).
<body>
<header>
<img>
<nav>
<ul>
<li><a></a></li>
</ul>
</nav>
</header>
</body>No protótipo, o primeiro link do menu é "Início". Sendo assim, incluiremos essa palavra dentro da tag <a>. Esta, por sua vez, receberá um parâmetro href representando a sua referência, que no momento manteremos apenas como #. Repetiremos esse processo para os outros itens - receitas, quem somos e comunidade.
Dica: os comandos "Ctrl + C" e "Ctrl + V" podem ser usados para copiar e colar trechos de código, facilitando o trabalho de construção de alguns elementos.
<body>
<header>
<img>
<nav>
<ul>
<li><a href=#>Início</a></li>
<li><a href=#>Receitas</a></li>
<li><a href=#>Quem somos</a></li>
<li><a href=#>Comunidade</a></li>
</ul>
</nav>
</header>
</body>Feitas essas alterações, abriremos o navegador e usaremos oo atalho "Ctrl + O" para abrirmos o arquivo index.html, que se encontra no diretório do nosso projeto. Os títulos das nossas páginas de navegação serão exibidos na tela, já no formato de link.
A tag <img> receberá um parâmetro alt que representa um texto a ser exibido quando o navegador não conseguir renderizar a imagem - nesse caso, o texto "Fruta & Fruta". Além disso, receberá também um parâmetro src (de source, ou "fonte"), indicando de onde buscaremos a imagem. O arquivo logo.jpg está localizado na pasta "assets/img". Como o arquivo index.html está na mesma hierarquia de pastas que o diretório "assets", passaremos o endereço ./assets/img/logo.jpg.
<body>
<header>
<img alt="Fruto & Fruta" src="./assets/img/logo.jpg"/>
<nav>
<ul>
<li><a href=#>Início</a></li>
<li><a href=#>Receitas</a></li>
<li><a href=#>Quem somos</a></li>
<li><a href=#>Comunidade</a></li>
</ul>
</nav>
</header>
</body>Salvando as alterações e recarregando a página no navegador (F5), o logo passará a ser exibido na tela:
Já temos o cabeçalho feito, e agora precisamos fazer a sua estilização.
Sobre o curso Arquitetura CSS: descomplicando os problemas
O curso Arquitetura CSS: descomplicando os problemas possui 124 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
- Layout base e Estilização de cabeçalho
- Banner e Sobre
- Estilização das receitas
- Estilização do quem somos
- Estilização do rodapé e Responsividade do site