Design Web Responsivo | Tutorial do Site Gulp.js

Introdução

Neste projeto, você aprenderá como implementar um layout responsivo para um site, semelhante ao site oficial do Gulp.js. Você usará media queries para ajustar o layout e os estilos da página web com base no tamanho da tela.

👀 Pré-visualização

responsive layout preview

🎯 Tarefas

Neste projeto, você aprenderá:

Como adicionar regras de media query ao arquivo HTML para criar um layout responsivo
Como ajustar a largura e a visibilidade dos elementos da página com base em diferentes tamanhos de tela
Como testar o layout responsivo redimensionando a janela do navegador

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Implementar um design web responsivo usando media queries
Ajustar o layout e os estilos com base no tamanho da tela
Testar e otimizar efetivamente páginas web para diferentes dispositivos e resoluções de tela

Configurar o Projeto

Nesta etapa, você configurará o projeto e abrirá os arquivos no editor.

Abra a pasta do projeto, que contém os seguintes arquivos e diretórios:

├── css
├── imgs
├── js
└── index.html

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

WebIDE Go Live button

Agora você pode ver a página estática do site Gulp, que ainda não é responsiva. Altere o tamanho da janela manualmente e você verá o seguinte efeito.

Non responsive webpage layout

Adicionar Media Queries

Nesta etapa, você aprenderá como adicionar media queries ao arquivo HTML para tornar a página responsiva.

Abra o arquivo index.html no editor de código.
Encontre a primeira seção <style> no <head> do documento.
Adicione a seguinte regra de media query em /* TODO */ em <style>:

/* TODO */
@media screen and (max-width: 1400px) {
  nav .content,
  main section {
    width: 900px !important;
  }
}

@media screen and (max-width: 900px) {
  nav .content,
  main section {
    width: 700px !important;
  }
}

@media screen and (max-width: 650px) {
  main section,
  main ul li {
    width: 100% !important;
  }

  nav .content .list {
    display: none;
  }

  nav .content .menu {
    display: block;
    position: absolute;
    right: 10px;
  }

  main ul li:nth-child(even) {
    margin-left: 0 !important;
  }
}

Essas media queries aplicarão estilos específicos à página com base na largura da tela. A primeira media query define a largura do conteúdo e da seção principal para 900px quando a largura da tela é menor ou igual a 1400px. A segunda media query define a largura para 700px quando a largura da tela é menor ou igual a 900px. A terceira media query oculta a lista de navegação, exibe um ícone de menu e define a largura da seção principal e dos itens da lista para 100% quando a largura da tela é menor ou igual a 650px.

Testar o Layout Responsivo

Nesta etapa, você testará o design responsivo e fará os refinamentos necessários.

Salve o arquivo index.html.
Atualize a página web no navegador.
Redimensione a janela do navegador para diferentes larguras para ver as mudanças no layout responsivo.
Verifique se o layout da página corresponde aos resultados esperados mostrados nas imagens fornecidas.

Neste ponto, você concluiu a implementação do layout responsivo para o site Gulp.js. A página agora deve se adaptar a diferentes tamanhos de tela de acordo com os requisitos.

O resultado final para dispositivos móveis é mostrado abaixo:

Completed Effect

Parabéns! Você implementou com sucesso um layout responsivo para o site Gulp.js.