Diseño web responsivo | Tutorial del sitio web de Gulp.js

Introducción

En este proyecto, aprenderás a implementar un diseño de página web responsivo, similar al sitio web oficial de Gulp.js. Utilizarás consultas media para ajustar el diseño y los estilos de la página web según el tamaño de la pantalla.

👀 Vista previa

vista previa de diseño responsivo

🎯 Tareas

En este proyecto, aprenderás:

Cómo agregar reglas de consulta media al archivo HTML para crear un diseño responsivo
Cómo ajustar el ancho y la visibilidad de los elementos de la página según diferentes tamaños de pantalla
Cómo probar el diseño responsivo redimensionando la ventana del navegador

🏆 Logros

Después de completar este proyecto, podrás:

Implementar un diseño web responsivo utilizando consultas media
Ajustar el diseño y los estilos según el tamaño de la pantalla
Probar y optimizar eficazmente las páginas web para diferentes dispositivos y resoluciones de pantalla

Configurar el proyecto

En este paso, configurarás el proyecto y abrirás los archivos en el editor.

Abre la carpeta del proyecto, que contiene los siguientes archivos y directorios:

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

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Botón Go Live de WebIDE

Ahora puedes ver la página estática del sitio web de Gulp, que aún no es responsiva. Cambia manualmente el tamaño de la ventana y verás el siguiente efecto.

Diseño de página web no responsiva

Agregar consultas media

En este paso, aprenderás a agregar consultas media al archivo HTML para que la página sea responsiva.

Abre el archivo index.html en el editor de código.
Encuentra la primera sección <style> en el <head> del documento.
Agrega la siguiente regla de consulta media debajo de /* TODO */ en <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;
  }
}

Estas consultas media aplicarán estilos específicos a la página según el ancho de la pantalla. La primera consulta media establece el ancho del contenido y la sección principal en 900px cuando el ancho de la pantalla es menor o igual a 1400px. La segunda consulta media establece el ancho en 700px cuando el ancho de la pantalla es menor o igual a 900px. La tercera consulta media oculta la lista de navegación, muestra un icono de menú y establece el ancho de la sección principal y los elementos de lista en 100% cuando el ancho de la pantalla es menor o igual a 650px.

Probar el diseño responsivo

En este paso, probarás el diseño responsivo y harás cualquier refinamiento necesario.

Guarda el archivo index.html.
Actualiza la página web en el navegador.
Cambia el tamaño de la ventana del navegador a diferentes anchos para ver los cambios en el diseño responsivo.
Verifica que el diseño de la página coincida con los resultados esperados mostrados en las imágenes proporcionadas.

En este momento, has completado la implementación del diseño responsivo para el sitio web de Gulp.js. La página ahora debería adaptarse a diferentes tamaños de pantalla según los requisitos.

El resultado final en móvil se muestra a continuación:

Efecto completado

¡Felicidades! Has implementado con éxito un diseño responsivo para el sitio web de Gulp.js.