HTML e CSS: responsividade com mobile-first

Aplicando a metodologia mobile-first - Apresentação

Boas-vindas ao curso HTML e CSS: responsividade com mobile-first! Meu nome é Mônica Hillman, mas você pode me chamar de Moni. Serei a instrutora que vai te acompanhar durante toda essa jornada de aprendizado e de desenvolvimento desse projeto utilizando a abordagem mobile-first.

Contexto atual

Antes de falar sobre o projeto, vamos analisar o contexto atual em que vivemos. Em dezembro de 2020, a Anatel detectou 234 milhões de acessos móveis à internet.

É um número muito grande, são muitas pessoas que acessam a internet por meio de celulares, tablets, dispositivos que podem levar na bolsa.

Em 2015, o Google já priorizava em seu buscador sites que se adaptassem a diversos tamanhos de tela, sites responsivos. Então, buscando abranger todo tipo de pessoa usuária e querendo um lugar melhor na busca, que tipo de abordagem podemos utilizar para facilitar isso e ajudar no desenvolvimento?

Essa abordagem é a mobile-first, e vamos aplicá-la no projeto AluraBooks.

Projeto no Figma

Vamos abrir o Figma para analisar o projeto. Temos três tipos de tamanho de layout: o 428, o 1024 e o 1728, que seriam os de mobile, tablet e desktop, respectivamente. Vamos focar no de mobile, porque começaremos por ele para aplicar a metodologia do mobile-first.

A AluraBooks é uma empresa de venda de livros técnicos do Grupo Alura. Ela conta com muitos recursos, tem um carrossel, um card, um menu hambúrguer, entre outros. Você vai construir tudo isso e ainda vai aumentar para os outros tamanhos de telas, então, aprenderemos muita coisa nova!

O que vamos aprender?

Vamos aprender a iniciar um projeto front-end, vamos fazer toda a base HTML, criar variáveis CSS, além de pegar informações do Figma para nos aproximar do dia a dia de uma pessoa desenvolvedora, porque ela recebe o protótipo da pessoa designer e pega dele todas as informações que precisa.

Também vamos conhecer novos elementos HTML, cuidar questões de semântica, de acessibilidade, além de aprender coisas novas sobre propriedades CSS. Vamos usar fontes, colorir essas escritas, colocar cor de fundo, usar flexbox, e muito mais.

Vamos usar plugins externos, porque o carrossel que temos no projeto será importado do plugin SwiperJS. Também aprenderemos bastante sobre media queries, que é o que vamos usar para deixar o site responsivo.

Ele é como a maior fatia do bolo que estamos construindo, é a parte mais importante de pegar, porque depois você poderá usar esse aprendizado em todos os seus projetos.

Vamos aprender muito mais coisas, mas deixaremos você descobrir enquanto faz o curso!

Pré-requisitos

Quais são os pré-requisitos para fazer este curso? Você precisa ter um básico de HTML e CSS. Para isso, você pode ter feito os cursos iniciais da formação.

Além disso, é importante ter muita vontade de aprender; isso é o principal, porque vamos explicar tudo, detalhe por detalhe, para ter certeza de que você sairá daqui entendendo.

Como sempre, se precisar, temos o fórum e o Discord para te ajudar a aprender 100% do que falamos aqui.

Caso tenha sentido interesse, nos encontramos no próximo vídeo!

Aplicando a metodologia mobile-first - Conhecendo o projeto

No vídeo anterior, estudamos sobre a metodologia mobile-first, qual é a sua necessidade, de onde surgiu e analisamos o contexto nacional. Neste vídeo, vamos conhecer o projeto que desenvolveremos juntos durante todo o curso, seguindo essa mesma metodologia.

Conhecendo o projeto

Suponha que somos uma equipe de desenvolvimento da Alura. O projeto é uma demanda de uma empresa do Grupo Alura, a AluraBooks, um site que vende livros técnicos da área de tecnologia.

A pessoa responsável pelo design do projeto nos apresentou três versões dele: mobile, tablet e desktop. Durante a transição entre esses formatos, muitas alterações ocorrem. Vamos analisar as diferenças.

Layout mobile

Com o Figma aberto, vamos analisar o Layout 428, que é o tamanho de tela do celular. Esse Figma estará disponível na atividade anterior a este vídeo. Se quiser acompanhar, você pode abri-lo no seu computador e seguir de acordo com a fala.

No layout mobile, temos um menu superior bem responsivo. Ele possui diversos ícones, pois se fossem escritos, ficariam muito pequenos para a tela do celular. Conta com o menu hambúrguer, que mostra categorias de livros, o logo da AluraBooks, o ícone de favoritos, o carrinho de compras e o usuário.

Em seguida, temos um banner com uma opção de pesquisa, para facilitar a busca por um livro específico. Depois, temos um carrossel de últimos lançamentos e um card de sugestão de outro livro da empresa. Após essa seção, temos outra dedicada aos livros mais vendidos, que também conta com um carrossel, e um card da autora do mês, que no protótipo é Juliana Agarikov.

Depois, há uma lista de tópicos visitados recentemente e, quase no final, um campo para contato, que funciona como uma newsletter, onde a pessoa usuária insere o e-mail. Em seguida, temos um rodapé com o nome do Grupo Alura.

Layout tablet

Agora, vamos analisar o Layout 1024, que é o de tablet. Nele, o cabeçalho muda bastante. Em vez do menu hambúrguer, temos três links: "CATEGORIAS", "FAVORITOS" e "MINHA ESTANTE".

Ao passar o mouse sobre "CATEGORIA", ele abre também a lista de opções com as categorias de livro. Além disso, temos o nome da empresa, AluraBooks, ao lado direito do logo. Os ícones de usuário e de compras ainda estão presentes.

O restante não muda muito, temos o carrossel, o card, depois carrossel e card novamente, tópicos visitados recentemente. O campo da newsletter mudou de posição: o input que estava abaixo do texto, agora está ao lado direito. O rodapé é o que mais mudou; agora ele mostra todas as empresas e produtos do Grupo Alura, enquanto antes só aparecia o nome "Grupo Alura".

Layout desktop

Por fim, vamos para o Layout 1728 de desktop. Pouca coisa muda no cabeçalho: agora, as categorias vão para a esquerda, e onde eram os ícones de sacola e perfil, além do ícone, temos a descrição escrita do que eles significam.

O restante é um pouco igual, mas agora o card fica ao lado direito do carrossel. Na sequência, temos a lista de tópicos visitados recentemente, um campo de newsletter e aquele rodapé completo que já havíamos aumentado no tablet.

Conclusão

Esse é o projeto que vamos desenvolver durante todo o curso, com várias diferenças em vários tipos de tela. Será um desafio muito interessante para aprender de vez essa metodologia mobile-first, e para você avaliar se faz sentido para o seu método de desenvolvimento.

No próximo vídeo, vamos começar esse desenvolvimento. Até lá!

Aplicando a metodologia mobile-first - A base do projeto

No último vídeo, vimos o resultado final que pretendemos alcançar com este curso, tanto no layout mobile, quanto no tablet e no desktop. Porém, nada melhor do que começar a construir e colocar a mão na massa neste projeto!

A base do projeto

A primeira etapa é criar uma pasta para o projeto no nosso computador. Para isso, vamos na pasta "Documentos", e dentro da pasta "dev", clicaremos com o botão direito e vamos até "Novo > Pasta". Vamos nomear a pasta como "alurabooks".

Após criar a pasta no computador, vamos abri-la no editor de código. Utilizaremos o Visual Studio Code, então se quiser acompanhar exatamente o que faremos, você pode instalá-lo no seu computador, caso ainda não tenha. Caso tenha familiaridade com outro editor de código, como o Sublime Text, o Atom ou outro, pode usar o que se sentir mais confortável para desenvolver o projeto.

Com o Visual Studio Code aberto, vamos ao menu superior, à esquerda, onde temos a opção "Arquivo". A quinta opção é "Abrir Pasta…", então vamos abrir a pasta que criamos. Para isso, vamos em "Documentos > dev > alurabooks > Selecionar pasta".

Criamos a pasta com antecedência para evitar o risco de criá-la em algum lugar cheio de outros arquivos e perdê-la ou causar confusão. É sempre importante ter consciência de onde estamos criando, para que seja fácil encontrar depois.

Com a pasta exibida no explorador à esquerda, vamos passar o mouse sobre o nome dela. Aparecerão algumas opções; vamos em "Novo Arquivo". Criaremos os arquivos index.html e styles.css.

Criando o arquivo index.html

Dentro do index.html, vamos inserir a tag <!DOCTYPE html> na primeira linha. Em seguida, a tag <html>, e dentro dela, vamos criar a tag <head>; abaixo da <head>, o <body>.

Dentro da tag <head>, vamos retornar à linha 4 e inserir a tag <meta charset="UTF-8">. Depois dela, teremos a tag <meta name="viewport" content="width=device-width, initial-scale=1.0">. Por fim, adicionaremos a tag <title> contendo o nome "AluraBooks".

index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
</head>

<body>

</body>

</html>

O que fizemos até agora foi construir a base, o corpo do HTML. Temos as tags <!DOCTYPE html> e <html>, que reforçam para o navegador que este é um código HTML. Inserimos a <head> e o <body>, que são a cabeça e o corpo do projeto.

A cabeça não é algo muito visual, é como se fossem nossos pensamentos. Tem conteúdo, mas não conseguimos visualizar. Quem interpreta é o navegador. O <body> será o visual, mas não vamos inserir agora.

Explicaremos cada uma das tags que colocamos dentro da <head>. A tag <meta charset="UTF-8"> informa a codificação de caracteres da nossa página. Por exemplo: temos um texto e ele tem vários caracteres que são comuns no Brasil, como o cedilha e alguns acentos.

Porém, eles não são comuns em alguns outros países. O cedilha é difícil de ser visto, e não podemos garantir que somente pessoas brasileiras vão acessar o site. Então, para evitar problemas na impressão do caractere, declaramos que a codificação que ele deve usar para carregar toda a escrita é UTF-8.

Também temos a <meta name="viewport" content="width=device-width, initial-scale=1.0">, que informa o tamanho da tela acessada. Tanto que, dentro de content, tem width=device-width.

width é a largura, e device-width é a largura do dispositivo. Então, ele já detecta qual é a largura do dispositivo usado, isto é, a largura do celular, do computador, e assim por diante.

O initial-scale é a escala acessada. Inserimos 1.0 para dizer que não estamos com zoom nem nada; estamos com o tamanho padrão de quando entramos.

Por fim, temos a tag <title>AluraBooks</title>, correspondente à escrita que fica em cima da janela ou da aba do navegador na página. Ao abrir a página, estará escrito "AluraBooks" no topo.

Associando ao arquivo styles.css

Agora podemos associar o arquivo styles.css à nossa página. Para isso, vamos abrir a tag <link rel="stylesheet" href="styles.css"> abaixo de <title>.

Essa linha faz justamente o link, essa união de outro arquivo com o index.html. Agora eles estão associados. A relação deles é a folha de estilo, que é o stylesheet. Em href, colocamos o diretório onde está este arquivo. Como ele está na mesma pasta que o index.html, apenas colocamos o nome dele e o formato.

index.html:

<!-- código omitido -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
</head>

<!-- código omitido -->

Criando o arquivo styles.css

Após salvar, vamos começar a colocar algumas coisas no arquivo styles.css, para construir a base dele e testar se funciona. Começaremos com :root na primeira linha, seguido de abertura e fechamento de chaves. Entre elas, vamos criar uma variável chamada --cor-de-fundo.

Para pegar a cor, vamos no Figma. Queremos pegar o tom de cinza que está atrás do carrossel. Damos dois cliques e, à direita, haverá um menu de várias opções próprias do Figma.

Na parte inferior, encontramos a seção "Colors" e uma hashtag seguida de várias letras ou números. Dessa vez, o código só tem letras: #EBECEE. Essa é a cor que vamos usar. Ao clicar em cima, o código é copiado. Vamos colar após a variável --cor-de-fundo.

styles.css:

:root {
    --cor-de-fundo: #EBECEE;
}

Já temos uma variável. Para testar, vamos inserir no body essa cor. Então, abrimos a tag body, abrimos e fechamos as chaves, e inserimos background-color: var(--cor-de-fundo);.

body {
    background-color: var(--cor-de-fundo);
}

Para conferir como ficou, usaremos a extensão Live Server que já temos instalada no Visual Studio Code. Se você ainda não tem ela instalada, basta teclar o atalho "Ctrl + Shift + X", procurar por "Live Server", e instalar a primeira opção que aparece.

Uma vez instalada, para ativá-la, no canto inferior direito, encontraremos a opção "Go Live". Ao clicar em "Go Live", ele abre uma aba no navegador para um servidor local com o resultado.

Ele já não está aquele branco puro, mas um tom de cinza que desejávamos. Então, funcionou a integração do arquivo styles.css. Vamos analisar o que fizemos para ativar isso?

Inserimos o seletor :root, que é a raiz do HTML. É o seletor mais específico possível, que vai bem no fundo. Dentro dele, declaramos uma variável usando o padrão de variáveis do CSS. As variáveis podem ser cores, fontes, tamanhos; é uma gama bem grande de opções.

Para chamá-la, inserimos o seletor body e adicionamos a propriedade background-color, cuja tradução é "cor de fundo". Para chamar as variáveis, temos uma estrutura parecida com funções no JavaScript.

Inclusive, ela funciona como uma função, sendo var seguido do nome da variável. Ele sempre irá chamar a função do var e mandar o nome da variável, puxando o valor definido na raiz.

Testando outros elementos

Podemos inserir mais um elemento, só para destacar mais e conferir se funciona de verdade. Então, dentro da tag <body> no arquivo index.html, vamos testar colocar um <h1>AluraBooks</h1>.

index.html:

<body>
    <h1>AluraBooks</h1>
</body>

Após salvar com "Ctrl + S", vamos abrir a aba do navegador no Live Server, e podemos verificar que entrou o texto "AluraBooks". Agora vamos inserir uma cor de fundo nesse texto também. Para isso, inserimos o seletor de h1 dentro do arquivo styles.css, e adicionamos a propriedade background-color: white;.

styles.css:

h1 {
    background-color: white;
}

Feito isso, vamos abrir novamente a aba do navegador com o projeto. Temos o mesmo texto, agora com um fundo branco.

Conclusão

Note que o elemento de texto está com uma margem padrão que não definimos, em cima e na lateral esquerda. No próximo vídeo, vamos descobrir como tirar essas configurações padrões do navegador, porque queremos construir esse CSS, e não reutilizar outros que não escolhemos e podem atrapalhar no futuro.

Te vejo lá!

Sobre o curso HTML e CSS: responsividade com mobile-first

O curso HTML e CSS: responsividade com mobile-first possui 235 minutos de vídeos, em um total de 101 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:

• Iniciando o projeto
• Construindo o AluraBook
• Decolando com o projeto
• Adaptando ao tablet
• Transformando no desktop
• Compartilhando o projeto