Alura > Cursos de Front-end > Cursos de HTML e CSS > Conteúdos de HTML e CSS > Primeiras aulas do curso Arquitetura CSS: descomplicando os problemas

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 :

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:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

Conheça os Planos para Empresas