HTML e CSS: responsividade em layouts

Entendendo o projeto e configurando o ambiente - Apresentação

Apresentando a instrutora e o curso

Seja bem-vindo ao curso de HTML e CSS Responsividade. Eu me chamo Dani Castilho, sou instrutora na Alura e trabalho com tecnologia há 14 anos.

Audiodescrição: Dani é uma mulher branca, com cabelos lisos e compridos. Ela veste uma blusa preta, tem um piercing no nariz e algumas tatuagens no braço. Ao fundo, há uma parede iluminada nas cores azul e rosa.

Se estamos na jornada de aprendizado para nos tornarmos pessoas desenvolvedoras front-end, este curso certamente agregará muito ao nosso conhecimento. Vamos aprender bastante sobre responsividade.

Criando um site responsivo

Primeiramente, vamos criar um site completo, utilizando técnicas de responsividade para que funcione perfeitamente em celulares, tablets e computadores, independentemente do tamanho da tela. Aprenderemos a estruturar um projeto do zero, considerando como esses elementos evoluirão. Também abordaremos a gestão dos arquivos à medida que escrevemos o código.

Vamos aprender a usar variáveis no CSS, criando uma espécie de central de controle onde todas as informações e estilos do tema ficam concentrados. Isso permitirá que tenhamos apenas um local de modificação quando necessário.

Explorando o conceito de Mobile First

Discutiremos também o conceito de Mobile First (primeiro o móvel), que significa começar pelo que é mais importante: a menor tela. Desenvolveremos inicialmente para celulares, já que representam o maior percentual de acessos à web atualmente, e depois aprimoraremos para telas maiores.

Conforme o espaço na tela aumenta, incrementamos até chegar em um desktop. Vamos discutir também como controlar os estilos de acordo com esses dispositivos. Assim, conseguimos identificar o tamanho do dispositivo e aplicar um estilo apropriado para ele.

Adotando uma abordagem componentizada

Vamos adotar uma abordagem componentizada para que possamos reaproveitar código e evitar duplicações desnecessárias, reduzindo a repetição na escrita de código. Trabalharemos bastante com layouts flexíveis, utilizando CSS Flexbox e CSS Grid.

Enquanto aprendemos tudo isso, desenvolveremos o site da agência de viagens "Jornada Viagens". Trata-se de um site completo, que inclui várias seções, como um banner estético de fundo, um menu com diversas opções, uma seção de ofertas da semana com cards promocionais, uma seção de busca por categoria, destinos populares e condições de pagamento. É um site profissional e completo que funcionará em todos os dispositivos.

Garantindo a adaptação em diferentes dispositivos

Se acessarmos de um dispositivo móvel, ele se comportará de forma adequada, com um menu que abre e fecha. Em um tablet, tudo ficará tranquilo, e no desktop, tanto nos menores quanto nos maiores, tudo se adaptará perfeitamente.

Há muito para aprender, com conceitos importantes, e estamos animados para começar. É importante que já tenhamos um conhecimento prévio intermediário de HTML e CSS para aproveitar bem o conteúdo.

Vamos desenvolver este site juntos? Estamos ansiosos para nos encontrar no próximo vídeo. Até já!

Entendendo o projeto e configurando o ambiente - Apresentando o projeto Jornada Viagens

Introduzindo o projeto do curso

Olá! Estamos felizes por você ter dado mais um passo em sua jornada de conhecimento. A proposta aqui é discutirmos o projeto que desenvolveremos ao longo do curso e entendermos os temas nos quais nos aprofundaremos para alcançar esse resultado.

Nosso objetivo é construir o site de uma agência de viagens chamada Jornada Viagens, garantindo que ele seja 100% responsivo. O tema central deste curso será a responsividade. Mas o que é responsividade? É quando nossos sites se adaptam a qualquer tamanho de tela do usuário. Não importa se está em um celular menor ou maior, na vertical ou horizontal, tablet ou desktop; o site será apresentado de forma esteticamente adequada para cada tipo de dispositivo.

Explorando tecnologias e boas práticas

Para alcançarmos esse resultado, precisaremos nos aprofundar em CSS, conhecer novos seletores e recursos. Também exploraremos mais o HTML5, além das boas práticas de semântica, SEO e acessibilidade, abordaremos estratégias de construção de layout. Conheceremos algumas outras tags auxiliares para estruturar o HTML e, em seguida, utilizaremos o CSS3 com esses novos recursos para atingir o resultado final.

Descrevendo a versão desktop do site

Vamos desenvolver este site. Na versão desktop, temos um menu superior com fundo preto, um logo à esquerda e três links à direita: blog, pacotes de viagem e contato. Logo abaixo, há uma imagem de uma pessoa em um barco, entre árvores, em um rio muito azul, com árvores ao redor. Abaixo, há uma descrição sobre a agência, destacando que somos uma agência apaixonada por criar viagens inesquecíveis e mencionando a missão da agência.

Em seguida, temos um bloco sobre as ofertas da semana, com duas linhas e duas colunas, totalizando quatro cards de informação. Cada card contém o pacote, hotel mais aéreo, destino, valor e um botão de ver detalhes, totalizando quatro ofertas.

Apresentando seções adicionais do site

Na sequência, há uma seção de categorias, com quatro categorias, onde temos ícones e descrições: pacotes nacionais, pacotes internacionais, transferes, seguro e viagem.

Logo após a sessão inicial, temos a seção de destinos populares, onde apresentamos dois destinos lado a lado. Cada destino é composto por uma imagem, como a de Tóquio e a de Osaka. A imagem de Tóquio é mais escura, mostrando uma cidade à noite com várias luzes acesas, enquanto a imagem de Osaka destaca as flores de cerejeira já floridas. Abaixo das imagens, temos o título, a descrição e o botão "ver detalhes". A ideia é que, ao clicarmos em "ver detalhes", sejamos direcionados para a página do destino.

Detalhando condições de pagamento e depoimentos

Em seguida, temos a seção de condições de pagamento, que inclui imagens de mala de viagem e passaporte. À esquerda, há uma descrição, e à direita, as imagens. A seção de depoimentos apresenta o depoimento em si, a imagem da pessoa usuária, seu nome e a quantidade de estrelas atribuídas ao depoimento de qualidade. Ao final, há uma imagem de uma cidade bonita que antecede o rodapé. O rodapé é preto e contém o logotipo do jornal de viagens, informações de atendimento, redes sociais e créditos de desenvolvimento.

Adaptando o site para tablet e dispositivos móveis

Essa é a versão para desktop. Também temos a versão para tablet, onde a principal mudança está no menu superior. Ele não é mais um menu contínuo, mas sim um ícone mais conciso, apenas com a bússola, e um menu de três linhas, conhecido como menu hambúrguer. A partir daí, o comportamento muda. A imagem também tem outras dimensões, com a segunda imagem mais alta. A descrição permanece a mesma, e as ofertas da semana estão distribuídas do mesmo modo. As categorias mudaram um pouco na distribuição: antes eram quatro em uma linha, agora são duas por linha. Destinos populares, que antes estavam lado a lado, agora estão um acima do outro. As condições de pagamento também mudaram: a descrição, que ficava à esquerda, agora está na parte superior. Os depoimentos, que estavam lado a lado em uma linha, agora estão um sobre o outro. A imagem que antecede o rodapé também foi reduzida.

Além disso, temos a versão para dispositivos móveis, que segue quase o mesmo princípio do tablet. A diferença é que não teremos mais duas colunas em algumas áreas, como a área de ofertas da semana, que antes tinha duas colunas com duas linhas. Agora, é tudo em uma única coluna, com uma informação abaixo da outra. Esse é o tipo de técnica que aplicaremos na construção do projeto, ou seja, o objetivo é ocupar da melhor forma possível o espaço disponível para a pessoa usuária, mostrando apenas as informações mais importantes e ordenando-as com mais intenção.

Concluindo a introdução do projeto

Por ora, esse é o projeto que vamos construir. Esperamos vocês no próximo vídeo, onde começaremos a preparar o setup, organizar nossa estrutura e criar nosso repositório para, em seguida, colocarmos a mão na massa. Nos vemos no próximo vídeo.

Entendendo o projeto e configurando o ambiente - Primeiras configurações

Organizando o projeto e criando o repositório no GitHub

Dando continuidade, vamos organizar o projeto para que possamos focar apenas na codificação posteriormente. Agora, adotaremos um processo diferente. Anteriormente, criávamos um projeto em nosso computador, adicionávamos o git com git init, criávamos um repositório no GitHub e fazíamos a conexão entre os dois, finalizando com o push. Desta vez, faremos de forma diferente, utilizando um método mais fácil para iniciar um projeto.

Primeiramente, acessamos nosso GitHub e clicamos no botão para criar um novo repositório. Vamos criar um repositório chamado "Jornada Viagens" e adicionar uma breve descrição: "Site da agência, site Jornada Viagens, desenvolvido durante o curso de responsividade da formação front-end Alura." Não alteraremos as configurações, mantendo o repositório como público, e clicaremos no botão "Create Repository".

Clonando o repositório e configurando a estrutura inicial

Após criar o repositório, algumas opções serão apresentadas. Anteriormente, utilizávamos a opção de fazer push de um repositório já existente, mas hoje faremos diferente. No "Quick Setup", selecionamos a opção HTTPS e copiamos a URL gerada. No terminal, já estamos dentro de uma pasta criada chamada "Curso Responsividade". Dentro dessa pasta, ou onde quer que o projeto "Jornada Viagens" seja armazenado, digitamos o comando git clone seguido da URL copiada do GitHub.

git clone https://github.com/DaniCastilho/jornada-viagens.git

O comando git clone clonará o repositório já criado em nossa máquina, criando automaticamente uma pasta "Jornada Viagens" com o git já iniciado. Ao executar o comando, recebemos um aviso de que aparentemente clonamos um repositório vazio. Isso é esperado, pois vamos preenchê-lo agora. A pasta "Jornada Viagens" já está criada.

Criando arquivos e pastas essenciais

Dentro da pasta "Jornada Viagens", sabemos o que criar. Vamos criar o arquivo index.html e, dentro dele, utilizaremos um atalho para criar a estrutura básica do HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Agora, alteramos o título para "Jornada Viagens".

<title>Jornada Viagens</title>

Após isso, salvamos a estrutura. Também precisaremos de uma pasta chamada "css" e outra chamada "img". Certificamo-nos de que a pasta "img" esteja fora da pasta "css". Assim, dentro de "Jornada Viagens", teremos as pastas "css", "img" e o arquivo index.html. Dentro da pasta "css", criaremos o arquivo style.css.

Adicionando CSS reset e realizando o primeiro commit

Aqui, podemos também incluir um reset simples, que é o mesmo CSS que utilizamos no desenvolvimento do formulário. Trata-se de um CSS reset que faz o ajuste básico nesses elementos.

/* CSS RESET */
body, img, h1, p, fieldset, legend, label, input, select, textarea, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Realizamos o commit, inserimos o reset inicialmente, criamos o index, a pasta "img", e isso é o necessário para começarmos a fazer configurações mais avançadas. Estamos no curso de Responsividade no Terminal, e vamos entrar na pasta do "Jornada Viagens" usando o comando cd.

cd jornada-viagens

Adicionamos todos os arquivos com git add . e realizamos o commit com a mensagem apropriada.

git add .
git commit -m "Adiciona configuração inicial do projeto"

Verificando o repositório e corrigindo a estrutura de pastas

Este primeiro commit foi feito na branch main, o que não é um problema. O setup inicial pode ser feito na branch main, especialmente porque o projeto ainda não foi publicado. Quando o projeto for publicado ou quando realmente começarmos o desenvolvimento, criaremos as branches adequadas.

Após o commit, realizamos o git push e verificamos no GitHub se tudo foi atualizado.

git push

Os arquivos apareceram lá, e atualizamos a página do repositório. Tudo está certo até agora. Adicionamos a configuração inicial do projeto, o index, o CSS, mas a pasta "img" não apareceu. Verificamos o que aconteceu e percebemos que a pasta "img" estava dentro da pasta "css". Precisamos movê-la para fora, para dentro da pasta "Jornada Viagens", para que fique no mesmo nível. Adicionamos novamente com git add e realizamos o commit com a mensagem apropriada.

git add .
git commit -m "Adiciona pasta img"

Lidando com pastas vazias e finalizando a configuração inicial

Interessantemente, tentamos comitar uma pasta vazia. Mesmo após mover a pasta para a raiz do projeto, tentamos comitar uma pasta sem arquivos. O Git e o GitHub não aceitam commit de pastas vazias. Se precisarmos comitar uma pasta vazia, devemos incluir um arquivo com a extensão .gitkeep. No entanto, não temos essa necessidade agora, pois era apenas para facilitar o setup inicial. O terminal nos avisou que não há nada para comitar. Quando adicionarmos arquivos de imagem nessa pasta, poderemos comitá-la normalmente.

Concluímos a configuração inicial. Criamos o repositório no GitHub, o projeto, o index e o CSS. No próximo vídeo, começaremos a fazer as configurações globais do projeto. Fizemos o setup básico e passaremos para uma configuração global. Até lá!

Sobre o curso HTML e CSS: responsividade em layouts

O curso HTML e CSS: responsividade em layouts possui 426 minutos de vídeos, em um total de 73 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:

• Entendendo o projeto e configurando o ambiente
• Aplicando mobile first, flexbox e boas práticas
• Criando layouts responsivos com imagens
• Avançando em técnicas de responsividade e componentização
• Aplicando técnicas de CSS Grid
• SEO e acessibilidade na prática
• Desafio avançando o projeto