Documentation Index
Fetch the complete documentation index at: https://mintlify.com/midudev/jscamp/llms.txt
Use this file to discover all available pages before exploring further.
En este primer módulo construimos desde cero la maquetación estática de DevJobs, una plataforma de búsqueda de empleo para desarrolladores. El objetivo es asentar las bases del frontend: estructura semántica con HTML5 y estilos modernos con CSS puro, sin ninguna librería ni framework. Al terminar tendrás una página de inicio completamente maquetada y responsive, lista para añadir interactividad en módulos posteriores.
Lo que aprenderás
- HTML5 semántico: uso correcto de
<header>, <main>, <section>, <article>, <footer> y <nav>.
- CSS Flexbox y Grid: para construir layouts de una y varias columnas de forma declarativa.
- Variables CSS (
custom properties): definición de una paleta de colores y tokens de diseño reutilizables.
- Imágenes en formato
webp: cómo integrar imágenes optimizadas como fondo de hero con object-fit y mask-image.
- Estructura de proyecto web: organización de archivos HTML, CSS y assets en un proyecto sin build step.
Estructura del Módulo
00-html-css/
├── index.html # Página principal de la aplicación
├── styles.css # Todos los estilos globales del proyecto
└── background.webp # Imagen hero optimizada en formato WebP
El Archivo HTML
El documento index.html sigue una estructura semántica completa. El <header> contiene el logotipo SVG, la navegación principal y el botón de acción, mientras que el <main> divide el contenido en dos secciones: el hero con buscador y la sección de características.
<!DOCTYPE html>
<html lang="es">
<head>
<title>DevJobs - Inicio</title>
<meta charset="UTF-8" />
<meta name="description" content="Encuentra las mejores ofertas de trabajo para desarrolladores en DevJobs.">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
<h1>
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
DevJobs
</h1>
<nav>
<a href="empleos.html">Empleos</a>
</nav>
<div>
<a href="">Publicar un empleo</a>
</div>
</header>
<main>
<!-- Hero section con buscador -->
<section>
<img src="./background.webp" width="200" />
<h1>Encuentra el trabajo de tus sueños</h1>
<p>Únete a la comunidad más grande de desarrolladores y encuentra tu próxima oportunidad.</p>
<form role="search">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-search">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
<path d="M21 21l-6 -6" />
</svg>
<input required type="text" placeholder="Buscar empleos por título, habilidad o empresa">
<button disabled type="submit">Buscar</button>
</div>
</form>
</section>
<!-- Sección de características -->
<section>
<header>
<h2>¿Por qué DevJobs?</h2>
<p>DevJobs es la principal plataforma de búsqueda de empleo para desarrolladores.</p>
</header>
<footer>
<article>...</article>
<article>...</article>
<article>...</article>
</footer>
</section>
</main>
<footer>
<small>© 2025 DevJobs. Todos los derechos reservados.</small>
</footer>
</body>
</html>
- El atributo
lang="es" en <html> mejora la accesibilidad y el SEO.
- La imagen hero usa
width="200" como atributo de hint; el tamaño real se controla desde CSS con object-fit: cover.
- El formulario lleva
role="search" para indicar semánticamente su propósito.
- El botón
<button disabled> refleja el estado inicial antes de añadir JavaScript.
Estilos CSS
El archivo styles.css define todos los estilos del proyecto. Comienza con un reset CSS y luego declara las custom properties (variables CSS) en :root, que sirven como tokens de diseño centralizados.
:root {
--primary: #3b4550;
--primary-dark: #0a3d66;
--primary-hover: #0d5ba8;
--primary-light: #09f;
--background: #06182a;
--text-primary: #ffffff;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--border: rgba(255, 255, 255, 0.1);
--card-bg: #1e293b;
--shadow: rgba(0, 0, 0, 0.3);
--input-bg: #1e293b;
--hsla-example: hsla(210, 100%, 56%, 1);
}
mask-image para crear el efecto de degradado:
/* Hero */
main > section:nth-child(1) {
height: 500px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h1 {
padding-top: 36px;
}
& > img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
left: 0;
right: 0;
mask-image: linear-gradient(to bottom, rgba(16, 25, 34, 1) 5%, rgba(16, 25, 34, 0) 80%);
}
}
auto-fit con minmax para ser responsive sin media queries:
/* Grid de Features */
main > section:nth-child(2) footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
@font-face y la declaración font-weight: 100 900 para soportar todos los pesos con un único archivo woff2-variations.
Cómo Ejecutar
Navega a la carpeta del módulo
Abre una terminal y accede al directorio del módulo: Abre index.html con Live Preview
En Visual Studio Code, instala la extensión Live Preview (Microsoft). Luego haz clic derecho sobre index.html en el explorador de archivos y selecciona “Show Preview”, o usa el comando:Live Preview: Show Preview (External Browser)
Visualiza el resultado en el navegador
Verás la página de inicio de DevJobs con el hero, la barra de búsqueda y las tarjetas de características. Cualquier cambio que guardes en index.html o styles.css se refleja automáticamente en el navegador gracias a Live Preview.
Este módulo es HTML y CSS puro: no hay JavaScript, no hay Node.js y no hay paso de compilación. Basta con abrir el archivo directamente en el navegador o usar la extensión Live Preview de VS Code. Toda la interactividad (filtros, fetch de datos, etc.) se añadirá en el módulo siguiente.