En este tutorial, te guiaré a través del proceso de creación de un sitio web responsivo desde cero utilizando HTML, CSS y media queries. Aprenderás cómo estructurar tu página con HTML, estilizarla con CSS y hacerla adaptable a diferentes dispositivos y tamaños de pantalla utilizando media queries.
1. Configuración del Proyecto:
- Crea un nuevo directorio para tu proyecto.
- Crea un archivo HTML llamado index.html.
- Crea un archivo CSS llamado styles.css.
2. Estructura HTML Básica:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitio Web Responsivo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Mi Sitio Web Responsivo</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<!-- Contenido principal aquí -->
</main>
<footer>
<p>Derechos de autor © 2024 Mi Sitio Web Responsivo</p>
</footer>
</body>
3. Estilización con CSS:
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Estilos del encabezado */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* Estilos del pie de página */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* Media queries para diseño responsivo */
@media screen and (max-width: 768px) {
header {
padding: 10px;
}
nav ul li {
display: block;
margin-bottom: 10px;
}
}
4. Implementación de Media Queries:
En este paso, utilizamos media queries para ajustar el diseño en dispositivos de pantalla más pequeña, como tabletas y teléfonos móviles. En el ejemplo anterior, hemos modificado el tamaño del encabezado y la disposición del menú de navegación para dispositivos con una anchura máxima de 768px.
Si quieres acceder a el proyecto con los archivos creados te dejo el enlace a mi GitHub en donde lo podrás encontrar haz click aquí
.
¡Contáctanos!
Si tienes preguntas, aclaraciones, sugerencias de temas o cualquier otra consulta, ¡no dudes en ponerte en contacto con nosotros! Por favor, completa el formulario de contacto disponible en este enlace, y estaremos encantados de ayudarte.