Criando seu primeiro projeto Mobile First

Published in

Rocketseat

4 min readSep 7, 2018

A ideia Mobile First é começar a desenvolver e planejar projetos primeiro para dispositivos móveis e depois para tablets/desktops.

O Projeto

Versão Mobile:

Versão Desktop:

Primeiro Passo

Vamos configurar a nossa estrutura de desenvolvimento , criaremos o index.html , style.css e também a pasta img

o nome do nosso projeto é RocketBlog , segue abaixo o exemplo da nossa estrutura

O Desenvolvimento

agora vamos começar configurando o <head> do nosso projeto, este código esta localizado no index.html

Adicionamos o normalize.css no projeto , faça o download do normalize aqui

Coloque o Favicon na pasta img.

favicon.png

Agora vamos criar a nossa seção <header>

> Header

adicione o logo na pasta img

Código do header para adicionar o index.html

Classe css do header para ser adicionado no style.css

ao adicionar esses códigos nossa pagina esta desta maneira no mobile:

Antes de continuarmos no desenvolvimento do nosso projeto, temos que criar uma classe chamada .container , que é responsável por centralizar todo o conteúdo do nosso projeto.

Criamos a classe do .container e também os breakpoints , que iremos precisar no projeto.. utilizamos as medidas em em porque em , é uma medida relativa. O valor é calculado levando sempre em consideração o font-size do pai. Isso quer dizer que um elemento com font-size: 2em vai ter o dobro do tamanho da fonte do pai, seja ele qual for.

Bem como eu calculo o valor em EM?

Você vai pegar o valor que você precisa por exemplo: 1200px e dividir pelo tamanho da fonte do navegador , a maioria dos navegadores utilizam 16px como padrão para o <html>.

Então você pega 1200 / 16 = 75em. ai temos o valor de 1200px em EM.