¿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
<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.
*,
*::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.
.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;
}
@media (min-width: 768px) {
.cards {
flex-direction: row;
}
}
@media (min-width: 1024px) {
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
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>
