Diseño Responsivo

- `@media`: Regla para aplicar estilos según las características del dispositivo. - `max-width`: Aplica estilos si el ancho de la pantalla es menor que el valor especificado.

Box Model
Box Model

Mobile First significa diseñar para dispositivos móviles antes de diseñar para computadoras de escritorio o cualquier otro dispositivo (esto hará que la página se muestre más rápido en dispositivos más pequeños).

Buenas Prácticas en HTML y CSS

Declara el DOCTYPE
Cerrar las etiquetas
Utiliza Etiquetas en Minúsculas

Mantén una Indentación Consistente
Separar HTML de CSS
Evita el Uso Excesivo de Etiquetas div

Incluir siempre atributos ALT en las imagenes
Especifica la Codificación de Caracteres

Uso de etiquetas semánticas header, footer, article, section.

Mejoran la comprensión del contenido por parte de los motores de búsqueda
Mejoran la usabilidad

Box Model
Box Model

Las etiquetas semánticas estructurales en HTML5 son aquellas que se utilizan para definir la estructura general y la organización del contenido de una página web

Etiquetas semanticas

Accesibilidad

- Uso de atributos `alt` en imágenes.

Etiquetas semanticas

Se puede hacer accesible una gran cantidad de contenido web solo asegurándose de que se utilizan los elementos HTML con el propósito correcto todo el tiempo.

- Etiquetas `label` asociadas a campos de formulario.

Etiquetas semanticas

**SEO Básico:**.

El diseño web influye en el SEO, en tanto que la configuración puede afectar el posicionamiento del sitio. En ese sentido, utilizar HTML y CSS permite que el sitio sea legible para los motores de búsqueda.

- Investigación de palabras clave
- Uso adecuado de etiquetas de encabezado (`h1` a `h6`)

- Metaetiquetas (`meta`). Mejora de la Visibilidad
Incremento del CTR
Prevención de Contenido Duplicado

Meta título (Title Tag): Este es el título que aparece en los resultados de búsqueda y en la pestaña del navegador. Es una de las señales más importantes para los motores de búsqueda y debe ser conciso, descriptivo y contener las palabras clave relevantes.
Meta descripción (Meta Description): Este es un breve resumen del contenido de la página. Aunque no influye directamente en el ranking, una descripción bien escrita puede aumentar la tasa de clics (CTR) desde los resultados de búsqueda.
Meta palabras clave (Meta Keywords): Anteriormente, estas eran utilizadas por los motores de búsqueda para entender el contenido de una página. Sin embargo, su relevancia ha disminuido debido al abuso y a la evolución de los algoritmos de búsqueda.
Meta robots: Indica a los motores de búsqueda qué páginas indexar y seguir. Comúnmente se utiliza para evitar que ciertas páginas sean indexadas.
Canonical Tag: Ayuda a prevenir problemas de contenido duplicado indicando la URL canónica de una página.

Comentarios claros y concisos en el código.

Box Model
Etiquetas semanticas