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.
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.
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!
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!
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!
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.
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.
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.
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".
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.
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á!
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 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.
index.htmlDentro 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.
styles.cssAgora 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 -->
styles.cssApó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.
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.
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á!
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:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.