Viewport Meta Tag (¡Fundamental!):
En tu <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">```
Html
Layouts: Usa porcentajes (%) o vw/vh para anchos, en vez de píxeles fijos.
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.columna { width: 50%; /* O usa Flexbox/Grid */ }
Css
Imágenes Flexibles: Evita quese desborden.
img { max-width: 100%; height: auto; }```
Use code with caution.
Css
Media Queries (CSS): Aplica estilos diferentes según el tamaño de pantalla.
/* Estilos base (móvil primero) */
.menu-icon { display: block; }```
/* Para pantallas más grandes (ej. tablets y más) */@media (min-width: 768px) {
.menu-icon { display: none; }
/* …otros estilos para pantallas grandes… */
}```
Use code with caution.
Css
2. Maquetación con Etiquetas HTML
Objetivo: Estructurar tu contenido con significado para navegadores, SEO y accesibilidad.
Etiquetas Semánticas Principales (HTML5):
<header>: Cabecera dela página o sección (logo, título, nav principal).
<nav>: Menú de navegación principal.
<main>: Contenido principal y único dela página.
<article>: Contenido independiente y auto-contenido (un postde blog, una noticia).
<section>: Agrupación temática de contenido (ej: sección"Servicios", "Sobre Nosotros").
<aside>: Contenido complementario o lateral (barra lateral, publicidad).
<footer>: Pie de página (copyright, enlaces secundarios).
<div>: Contenedor genérico en bloque para agrupar y estilizar, cuando no hay una etiqueta semántica mejor.
<span>: Contenedor genérico enlínea para estilizar pequeñas partes de texto.```
Ejemplo de Estructura Básica:
<body>
<header>
<h1>Mi Web</h1>
<nav>…</nav>
</header>
<main>
<article>
<h2>Título del Artículo</h2>
<p>Contenido...</p>
</article>
<section>
<h3>Otra Sección</h3>
<p>Más contenido...</p>
</section>
</main>
<aside>
<p>Contenido lateral.</p>
</aside>
<footer>
<p>© 2023</p>
</footer>
</body>
