🚀 CodeQuest

Domina desarrollo web con 25 niveles | HTML · CSS · JavaScript

0
Completados
📚
25
Niveles
🏆
0
Logros
🎮
3
Proyectos
0%

🏗️ HTML - Estructura

01 📄

Mi Primera Página

Aprende la estructura básica: DOCTYPE, html, head y body. ¡Tu primer código!

DOCTYPE html head body
02 🏷️

Metadatos y Título

Configura el título en la pestaña, charset y viewport para móviles.

title meta charset viewport
03 📝

Textos y Encabezados

Crea títulos h1-h6, párrafos, negritas y texto con formato.

h1-h6 p strong em
04 🧭

Navegación y Enlaces

Construye menús con listas y enlaces para navegar.

nav ul / li a href
05 🖼️

Imágenes y Multimedia

Añade imágenes y videos de YouTube a tu página.

img src / alt iframe
06 📊

Tablas de Datos

Organiza información en filas y columnas como horarios.

table tr / th / td thead / tbody
07 📋

Formularios

Crea formularios de contacto con campos y botones.

form input select button

🎨 CSS - Estilos

08 🎨

Colores y Fuentes

Dale color a tu página: fondos, textos y tipografías.

color background font-family
09 📦

Box Model

Entiende margin, padding, border y las cajas CSS.

margin padding border
10 📐

Flexbox Layout

Organiza elementos en filas y columnas fácilmente.

display: flex justify-content align-items
11

JavaScript Básico

Variables, operadores, condiciones y bucles.

let / const if / else for
12 🌳

DOM y Manipulación

Modifica elementos HTML con JavaScript.

querySelector innerHTML classList
13 📐

CSS Grid

Crea layouts en cuadrícula poderosos.

grid columns rows gap
14 📱

Diseño Responsive

Páginas que se ven bien en móvil y desktop.

media queries viewport breakpoints

⚡ JavaScript Avanzado

15 🎯

Eventos JavaScript

Click, hover, teclado y más interactividad.

addEventListener click input
16 💾

LocalStorage

Guarda datos en el navegador del usuario.

setItem getItem JSON
17 🌈

Animaciones CSS

Da vida a tu web con animaciones fluidas.

@keyframes animation transition

🏆 Proyecto Intermedio

18 🎓

Proyecto Portafolio

Elige entre 4 proyectos: Portafolio, Juego, Galería o App de Tareas.

Portafolio Mini Juego Galería Todo App

🚀 Niveles Avanzados

19 🌐

APIs y Fetch

Conecta con servidores y obtén datos de Internet en tiempo real.

Fetch API async/await JSON
20 📦

JSON y Datos

Aprende a trabajar con datos estructurados y almacenamiento.

JSON parse stringify
21

Validación de Formularios

Valida entradas de usuario en tiempo real con JavaScript.

Validación RegEx Formularios
22 🎨

CSS Variables

Crea temas dinámicos y personaliza estilos con variables CSS.

Variables Temas Personalización
23 🔊

Audio y Efectos

Crea sonidos, animaciones de partículas y cronómetros.

Web Audio Partículas Timers
24 🎮

Programación de Juegos

Crea juegos interactivos con Canvas y aprende game loops.

Canvas Game Loop Colisiones
25 🏆

Proyecto Final Maestro

¡Completa tu maestría web y obtén tu certificado oficial!

Proyecto Final Certificado Maestría

🎉 Graduación

🏆

Centro de Logros

¡Revisa todos tus logros y obtén tu certificado de graduación!

Certificado Logros Proyectos