InicioCurso de Frontend Developer
Curso de Frontend Developer
1

🤗 Cómo implementar un diseño responsivo con Flexbox y CSS Grid 💯

Kevin
kv_95_3
1764

¿Quieres que tu sitio web se vea buenísimo en cualquier dispositivo? Implementar un diseño responsivo es clave para ofrecer una experiencia de usuario óptima tanto en móviles como en escritorio. En este tutorial aprenderás, paso a paso y desde cero, a crear una maqueta simple que se adapte a diferentes anchos de pantalla usando Flexbox y CSS Grid.

Requisitos

Ser miembro Pro de Platzi (bromas jaja😂)

Conocimientos básicos de HTML y CSS

  1. Estructura HTML semántica
    Objetivo: Armar el esqueleto de la página usando etiquetas semánticas.

<htmllang="es">
<head>
  <metacharset="UTF-8" />
  <metaname="viewport"content="width=device-width, initial-scale=1.0" />
  <title>Mi página responsivatitle>
  <linkrel="stylesheet"href="styles.css" />
head>
<body>
  <headerclass="site-header">
    <h1>Mi Sitio Webh1>
    <navclass="nav">
      <ul><li><ahref="#">Inicioa>li>
        <li><ahref="#">Serviciosa>li>
        <li><ahref="#">Contactoa>li>
      ul>
    nav>
  header>

  <mainclass="main-content">
    <sectionclass="hero">
      <h2>Bienvenido a mi tutorialh2>
      <p>Aprende diseño responsivo con ejemplos claros.p>
    section>

    <sectionclass="cards">
      <articleclass="card">Tarjeta 1article>
      <articleclass="card">Tarjeta 2article>
      <articleclass="card">Tarjeta 3article>
    section>
  main>

  <footerclass="site-footer">
    <p>© 2025 Kevin Valladaresp>
  footer>
body>
html>

Puntos clave:

Usamos

<header>,

<nav>,

<main>,

<section>y

<footer>para mejorar la accesibilidad y el SEO.

Todos los bloques tienen clases que luego estilaremos en CSS.

  1. Reset y box-sizing global
    Objetivo: Eliminar márgenes y paddings por defecto y usar border-box para un cálculo de ancho/alto más predecible.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Por qué:

Evita que las diferencias entre navegadores afecten tu diseño.

Con box-sizing: border-box, el width y height incluyen padding y border.

  1. Diseño móvil con Flexbox
    Objetivo: Hacer que la navegación y las tarjetas se apilen de forma amigable en pantallas pequeñas.
.site-header {
  background: #333;
  color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navul {
  display: flex;
  gap: 1rem;
  list-style: none;
}

.main-content {
  padding: 1rem;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 8px;
}
  1. Punto de quiebre: media query
    Objetivo: A partir de cierto ancho, cambiar el layout de vertical a horizontal.
@media (min-width: 768px) {
  .cards {
    flex-direction: row;
  }
}
  1. Diseño de escritorio con CSS Grid
    Objetivo: Crear un grid de tres columnas para las tarjetas en pantallas grandes.
@media (min-width: 1024px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
  1. Ajustes finales y optimización
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}
a {
  color: #0066cc;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Imágenes responsivas

<img src="mi-imagen.jpg" alt="Descripción" style="max-width: 100%; height: auto;" />

¡En hora buena! Creaste un diseño responsivo que se adapta desde el móvil hasta el escritorio, combinando Flexbox y CSS Grid.

</footer>

</section>

</main>

</nav>

</header>

0
hace 3 días
Escribe tu comentario
+ 2

Entradas relacionadas

9

Como crear una tarjeta personal con HTML y CSS

Una tarjeta personal es una gran iniciativa para empezar a incorporar los conocimientos adquiridos en HTML y CSS. Aqui detallo los pasos par
marcosdelinglesgmailcom
marcosdelinglesgmailcom
12

Notas del curso en Notion 🐱‍🏍

Hola comunidad, les quiero compartir mis notas de este maravilloso curso en Notion, están hechas con el método Cornell, para que puedan repa
fabiantcc
fabiantcc
14

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos
robledocorrea
robledocorrea
1

Como implementar un diseño responsivo

¿Alguna vez has entrado a una página web desde tu celular y se ve desordenada o difícil de usar? Eso sucede cuando no tiene un diseño respon
barrerodaniela2345
barrerodaniela2345