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!
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.
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.
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:
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas