Primeiras aulas do curso Layouts Responsivos: trabalhando com layouts mobile

Layouts Responsivos: trabalhando com layouts mobile

Ferramentas, unidades e imagens - Introdução

Olá! Seja bem-vindo ao curso de Mobile First! Meu nome é Matheus Alberto e eu vou te mostrar uma parte muito importante na jornada de desenvolvimento front-end.

Nesse curso nós vamos montar a apeperia e vamos fazer uma responsiva, ou seja, que se adapta a diversos dispositivos.

Vamos também ver o processo de desenvolvimento a partir de um layout pronto no Figma.

E vamos ver as vantagens de se utilizar o conceito de Mobile First.

Também vamos ver outras ferramentas que vão ajudar no nosso processo de desenvolvimento, como o plugin Emmet e variáveis CSS.

Vou falar também dos tipos de imagens, semântica e mídia types.

Depois desse curso você vai poder criar páginas a partir de layouts prontos, vindos da equipe de designer, e vai poder também criar páginas que se adaptam a diversos dispositivos.

Então abra a sua visualização de Code, seu Atom e vamos começar nossos estudos!

Ferramentas, unidades e imagens - Introdução ao Emmet

Para começar nós vamos precisar dos arquivos do projeto. Caso você ainda não tenha baixado, pode pular esse vídeo e voltar na atividade onde disponibilizamos os arquivos para download, lá temos todos os materiais necessários para montarmos o site.

Eu vou utilizar aqui o editor de texto Visual Studio Code no decorrer do curso, mas você pode acompanhar o curso com qualquer editor de texto. Eu só recomendo fortemente que você utilize um editor de texto que possua o plugin Emmet. O Visual Studio Code, Sublime e Atom já possuem o plugin Emmet nativo, então se você quiser escolher qualquer um desses editores, não vai precisar se preocupar em baixar o plugin depois.

Então antes de começar a escrever, antes de visualizar o layout, eu vou criar um arquivo novo aqui que vai ser o arquivo “index.html”. Nesse arquivo eu vou colocar toda a estrutura básica de um documento “HTML, só para ter a base do documento pronto já.

Vou puxar aqui a barra lateral, então eu vou lá, para baixo do documento, o “DOCTYPE”, a tag “HTML”, dentro da “HTML” a tag “head”. Eu já vou colocar o encode do “utf-8”, a tag “meta charset+ “utf-8”..

Uma tag obrigatória da tag “head”, que é a tag “title”. Vou colocar aqui “HOME | Apeperia”, agora abaixo de “head” eu venho e coloco a tag “body”. Muito bem, então agora nós temos a estrutura de um documento HTML pronta. Agora sim podemos pegar o nosso layout e analisarmos e desmembrarmos ele.

Então eu vou pegar aqui no Figma, esse aqui é o layout que nós vamos nos basear para montar o site, então é o layout mobile.

Então, o que nós temos aqui? Vamos ver, nós temos o cabeçalho que tem o logotipo da Speperia, uma lista de links, que são uma barra de navegação. Na verdade, temos um título, uma seção aqui, chamada na verdade, de “APLICATIVOS NA MEDIDA”.

Temos um parágrafo, nós temos um botão aqui - que olhe só, esse botão aqui é só tomar um cuidado porque não é bem um botão, ele tem a aparência de um botão, mas ele vai ligar para outra parte da página. Vamos ver mais para frente.

Aqui é a seção de destaques onde temos alguns posts falando sobre texto de logotipo e fotografia. Mais um botão aqui, temos uma outra seção de diferenciais. Vamos ver o que mais temos aqui. Uma seção de sobre, alguns textos aqui, parágrafos e ícones.

Olhe só: agora nós temos a seção de planos, que é onde aquele botão vai “linkar”. Temos os cards com botões. Beleza! Eu vou descer mais um pouco, aqui a seção de contato, seção institucional - onde tem algumas informações da empresa - e um vídeo falando um pouco mais sobre a apeperia, e lá no final nós temos o rodapé, lá no final da página.

Por hora vamos focar apenas no cabeçalho e na chamada, essas duas partes aqui em cima. Eu vou tirar um print aqui só para podermos ver melhor. Então vamos começar pelo cabeçalho. No cabeçalho nós temos a logotipo e nós temos essa navegação com uma lista de links aqui dentro. Então vamos fazer o código, eu vou voltar aqui para o editor de texto.

Olhe só: antes de começar a escrever, “header”, e dentro de “header” vou colocar aqui uma “img”. Depois da “img” vou colocar uma “nav”. Depois da “nave”, “ul” e assim por diante. Agora vamos utilizar o Emmet ao nosso favor.

Então eu vou voltar aqui tudo e vou escrever “header”. Nós sabemos que a estrutura do “header” tem uma “img” e uma “nav”, que são do mesmo nível hierárquico entre si, e essas duas tags são filhas da tag “header”.

Então, para dizer que alguma tag é filha de outra tag, eu vou utilizar o operador de maior que(...) Então, o “head” é a “tag” mãe de quais tags? Tag “img” e eu uso o sinal de “+” para dizer “e”. Então eu tenho “header”, tag “img” e a tag “nav”.

Então olhe só que legal: eu estou dizendo que desde a tag “header” eu tenho uma “img” e uma tag “nav”. Beleza! Agora vamos fazer então que dentro dessa tag “nav” nós temos a lista, dentro dessas listas os itens das listas e depois os links. Então eu vou utilizar o operador de novo maior que, e agora eu falo: “o que tem dentro desse “nav”?

Dentro desse “nav” tem uma “ul”, e dentro dessa “ul” eu vou ter “li”. Mas quantas “li”? Vamos ver aqui. Eu vou voltar para o layout, uma, duas, três, quatro, cinco, seis, eu tenho seis itens na lista. Mas olhe só, ao invés de eu escrever “li + li + li + li” e assim por diante, eu vou utilizar o operador de multiplicação, que é o símbolo aqui no teclado, que é a tecla “*” ou asterisco.

Então eu uso o sinal de multiplicação e corro aqui, “6”, então eu vou ter dentro de uma “ul”, seis “li”, e dentro de cada “li” eu vou ter uma tag “a”. Eu pressiono a tecla “Enter” e olhe só que legal: o Emmet já nos cospe todo o HTML pronto.

Mas olhe rapidinho, antes de continuarmos aqui, eu só vou voltar um pouco o código. Vamos supor que no lugar de “nav” nós acabamos escrevendo “nan”, e nós reparamos no final do código que está escrito “nan” ali. Eu vou arrumar, então eu volto para cá e arrumo para “nav”, vou para o final da linha pressiono a tecla “Enter” e “i”. Olhe só o que aconteceu, ele não executou o código, ele não fez aquilo que aconteceu antes!

Quando isso acontecer, podemos fazer o seguinte: vamos até o final da linha e pressionamos as teclas “Ctrl + Espaço”, que vai aparecer esse menu contextual aqui em baixo. Então quando aparecer este menu, basta pressionar a tecla “Enter”, que ele vai e executa o código novamente.

Alguns editores de texto podem usar outro tipo de combinação de atalho, ou as teclas “Ctrl + Espaço”, ou então “Tab”, é que no Visual Studio Code a tecla “Tab” não funciona, mas em alguns podem usar “Tab”. Alguns podem utilizar “Ctrl ”. Então isso vai depender um pouco do editor de texto que você está utilizando, mas “Ctrl + Espaço” é um pouco genérico para maioria dos editores de texto.

Então, agora sim, pressionei a tecla “Enter”. Agora é fácil! Agora é só preencher o restante das informações que faltam. Então “img”, “logo-apeperia.svg”, a tecla “Alt”, texto alternativo (“alt”), ele está dentro de um arquivo que veio junto com os arquivos do projeto. Vou abrir aqui a barra lateral, olhe aqui, “textos.txt”.

Vou fechar a barra tudo de novo. Dentro desse “texto.txt” eu tenho informações como por exemplo: “Texto alternativo da logo: Logo da Apeperia”. Então eu só vou aqui, copiar isso e colocar dentro do “alt” da “img”.

Então agora dentro da tag “a” eu vou colocar cada um desses links. Então “Sobre”, “Planos”, “Blog”, “Destaques”, “Institucional” e agora “Contato”. Esses links, eu não tenho nenhuma referencia para nenhuma dessas páginas ainda, então dentro de cada “href” eu vou colocar aqui um “#”. Então “#” dentro de “Planos”, “Blog”, “Destaque”, “Institucional”, “Contato” e “Sobre” também.

Então terminamos aqui a estrutura do “header”, vamos para a próxima parte. Dentro também nós vamos colocar aqui a “section”, mas antes eu vou para cá, para nós podermos montar a estrutura primeiro. Então eu vou voltar aqui para o print screen que eu tirei e vou trocar de cor.

Então agora vamos para essa parte aqui de baixo que vai ser a “chamada”, dentro da seção “chamada” nós temos um título, “APLICATIVOS NA MEDIDA”, um parágrafo com um texto aqui e logo abaixo um botão de “Conheça os planos” - mas lembrando, esse botão não é um botão de verdade, ele tem a aparência de um botão, mas na verdade ele é um link. Então isso aqui vai ser um link e depois no CSS nós vamos mudar a visualização dele para parecer um botão.

Então vamos escrever aqui o código, agora que já sabemos a estrutura vamos lá em “section”, “section>h1+p+a”, então pressiono meu contextual ali, apareceu o menu contextual ali. Pressiono a tecla “Enter” e pronto! O Emmet cospe todo o HTML para nós.

Então agora os títulos. Eu vou voltar aqui na parte de textos, “chamada”, “APLICATIVOS NA MEDIDA”. Aperto as teclas “Ctrl + C”. Parágrafo, está aqui o parágrafo embaixo. Teclas “Ctrl + C”, voltei aqui, teclas “Ctrl + V” e agora eu conheço os planos dentro da tag “a”.

Olhe só: essa tag “a”, esse botão com esses planos, também não temos a referência ainda, dos planos ali embaixo. Então enquanto eu não tenho essa referência, vamos colocar a “#” dentro do “href” desse “a”.

Então beleza, montamos toda a estrutura aqui. Eu vou salvar o arquivo, teclas “Ctrl + S” e pronto. Terminamos toda a estrutura do cabeçalho e da chamada, então vamos para a próxima parte agora.

Ferramentas, unidades e imagens - Aplicando estilos

Então, agora que acabamos a estrutura aqui do cabeçalho e da chamada, vamos olhar aqui o Figma.

Uma coisa muito importante de se fazer nessa fase do projeto é justamente recolher todos os recursos que vamos utilizar na página, podemos fazer isso com as cores e as fontes, por exemplo.

Então vamos começar pelas fontes. Vamos usar a fonte “Open Sans” como corpo de toda página, então os textos, todos os textos, dentro do botão, dentro dos diferenciais e todos esses textos aqui vão ter a fonte “Open Sans”. E os títulos, aplicativos da medida e destaques vão utilizar a fonte “Montserrat”. Ambas vão ser nos pesos “300”, “400” e “700”.

Essas fontes e famílias, costumam vir para a nossa equipe de designer que elabora o produto, mas o nosso trabalho vai ser só incorporar isso. Como nesse caso nós não temos os arquivos de fonte separados, nós vamos pegar essas fontes no Google Fontes. Então eu vou abrir uma aba no navegador, vou colocar aqui na tela para nós vermos e vou escrever “fonte.google.com”.

Vou dar um pouco de zoom para enxergarmos um pouco melhor. Perfeito! Então agora vamos procurar as fontes “Open Sans” e “Montserrat”, então eu desci um pouco aqui e já tem a “Open Sans” aqui. Cliquei na fonte. E precisamos os pesos “300”, vou selecionar nesse estilo. Precisamos a “400”, vou selecionar esse estilo. E da “700”, vou selecionar esse estilo. Beleza!

Vou clicar aqui em cima no Google Fontes para voltar para a raiz da página. Agora vamos procurar aqui “Montserrat”. Beleza, eu já achei, está aqui. “Monserrat”, de novo, “light”, “300”, “regular”, 400” e “bold”, 700”.

Agora vamos clicar na segunda aba que tem aqui do lado. Nessa barra lateral que abriu, “Embed” aqui, e olha só: já temos um link “href” pronto, gerado. Já para poder importar essas fontes, essas famílias na verdade, de fontes.

Então basta copiar isso aqui, esse link, copiar, voltar aqui para o nosso código no Visual Studio Code, e logo abaixo de “title” eu vou apertar as teclas “Ctrl +V” para poder importar essas fontes.

Agora podemos ir para as cores. Nesses casos o que eu costumo fazer é pegar um arquivo de texto e colocar todas as cores com nomes que eu acho que fazem sentido para mim. Eu já criei esse arquivo antes, esse arquivo inclusive encontra-se junto com os arquivos do projeto que você baixou, que é esse arquivo “cores.ext”.

E dentro desse arquivo tem todas as cores já reunidas em um lugar só, com os nomes - como eu falei - que fazem sentido para mim. Então, com esse arquivo já em mãos fica mais fácil saber quando eu for utilizar certas cores; e eu não preciso ficar decorando os valores hexadecimais. Eu posso simplesmente lembrar. “Isso aqui é um azul claro” e simplesmente vou ali no nome, procuro azul claro, vejo a hexadecimal, copio e colo.

Então agora vamos voltar para a estilização do cabeçalho. Eu vou fechar aqui a barra lateral do cabeçalho e da seção “chamada”. Nós temos dois arquivos que já tem essa estilização pronta, então basta importá-los no nosso documento. Então os arquivos que nós vamos importar são os chamados: “cabeçalho.css” e “chamada.css”.

Vou fechar a barra lateral de novo aqui. Então logo abaixo do importe da fonte eu vou colocar: “” e agora, “<link href=”css/chamada.css” rel “stylesheet”>”. Estou ruim para escrever. Pronto!

Salvei o arquivo e agora nós vamos abrir esse arquivo para ver como é que ficou essa estilização. Então eu vou pegar aqui, botão direito em cima do arquivo “index” - ele tem uma opção aqui, “Reveal in Fli Explorer” e ele já me dá o arquivo. Pronto!

Olhe só, nada aconteceu ainda! Então, o que faltou aqui para fazermos? Faltou importar as classes. Então eu vou abrir aqui os arquivos, fechar a barra lateral - então o cabeçalho, olhe só, faltou colocarmos essas classes no nosso documento HTML. Então vamos utilizar “cabecalho”, “cabecalho_logo”, “cabecalho_navegacao”, “cabecalho_link”.

Estamos dentro de “index”, o “header” é o nosso cabeçalho, a nossa imagem vai ser a nossa logo, então é “cabecalho_logo”. Dentro de “nav” é a nossa navegação então “<nav class=”cabecalho_navegacao”.

E o que mais agora? São os links, então dentro de cada “li” eu vou colocar: “

Sobre o curso Layouts Responsivos: trabalhando com layouts mobile

O curso Layouts Responsivos: trabalhando com layouts mobile possui 139 minutos de vídeos, em um total de 49 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!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    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.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    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.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas