PRIMER TRIMESTRE · ADSO · WORLD SKILLS 2025

World Skills
Mis primeros proyectos.

Junio – Julio 2025. Desde mis primeras líneas de HTML hasta una API REST con Laravel. Cada carpeta representa una victoria pequeña, un concepto asimilado, una chispa de curiosidad. Este es mi archivo académico.

20 ejercicios en 8 semanas Competencia WorldSkills HTML · CSS · JS · PHP · Laravel

El origen de todo

Durante mi participación en WorldSkills 2025, mientras cursaba el primer trimestre de ADSO se realizaron los siguentes 20 proyectos que marcan mi evolución: desde maquetación básica hasta un CRUD completo con Laravel.

Cada proyecto tiene su propia historia, su dificultad y su momento “ajá”. Las capturas que ves son testimonios visuales de ese proceso.

Semana 1-2

HTML, CSS, Flexbox, Grid, BEM, primeras maquetaciones

Semana 3-4

JavaScript: lógica, DOM, eventos, drag & drop, cronómetros

Semana 5-6

PHP, formularios, introducción a backend

Semana 7-8

Laravel, API REST, base de datos SQLite

Los 20 proyectos

Cada tarjeta te lleva al código fuente. Haz clic en “Ver Proyecto” para explorar el ejercicio en tu navegador.

Vista previa de Lorem Cards

Lorem Cards

Mi primer contacto con HTML/CSS: tarjetas de texto de relleno. Aprendí estructura básica y modelos de caja.

HTMLCSS
Aprendizaje: etiquetas semánticas y estilos iniciales
Ver Proyecto
Vista previa de Social Cards

Social Cards

Tarjetas de perfil de usuario. Practiqué organización con divs y selectores CSS.

HTMLCSS
Aprendizaje: disposición de elementos y sombras
Ver Proyecto
Vista previa de Metodología BEM

Metodología BEM

Aplicación de la convención Bloque–Elemento–Modificador para nombrar clases CSS.

HTMLCSS (BEM)
Aprendizaje: código mantenible y legible
Ver Proyecto
Vista previa de Social Cards Washington

Social Cards (W)

Tarea autónoma: replicar una tarjeta de perfil del instructor. Primer ejercicio sin guía.

HTMLCSS
Aprendizaje: tomar decisiones de diseño por mí mismo
Ver Proyecto
Vista previa de Granero

Granero

Maquetación básica de un ecommerce: productos, precios, área de login y pedidos.

HTMLCSS
Aprendizaje: estructura de tienda virtual
Ver Proyecto
Vista previa de CSS Grid y Flexbox

CSS Grid & Flex

Laboratorio de layouts modernos y animaciones CSS. Primer asombro con keyframes.

GridFlexboxAnimaciones
Aprendizaje: diseño responsivo y movimiento con CSS
Ver Proyecto
Vista previa de Palíndromo

Palíndromo

Validador de palabras o frases palíndromas. Primer algoritmo con JavaScript.

HTMLCSSJS
Aprendizaje: manipulación de strings y eventos
Ver Proyecto
Vista previa de Login PHP

Login PHP

Primer contacto con PHP: formulario de autenticación básico. Antesala de Laravel.

HTMLCSSPHP
Aprendizaje: procesamiento de formularios en el servidor
Ver Proyecto
Vista previa de Pantalla

Pantalla

JavaScript para obtener dimensiones de la ventana y URL actual.

HTMLCSSJS
Aprendizaje: objetos window, screen, location
Ver Proyecto
Vista previa de ClessLab

ClessLab

Mi primera página web completa hecha por mí solo. Me costó bastante, pero fue mi punto de partida real.

HTMLCSS
Aprendizaje: organización de secciones y formularios
Ver Proyecto
Vista previa de Fecha y Hora

Fecha y Hora

Reloj y calendario dinámico con JavaScript. Actualización en tiempo real.

HTMLCSSJS (Date)
Aprendizaje: setInterval y formato de fechas
Ver Proyecto
Vista previa de Tablas de Multiplicar

Tablas de Multiplicar

Generador dinámico de tablas del 1 al 30 usando bucles for.

HTMLCSSJS (bucles)
Aprendizaje: renderizado dinámico con innerHTML
Ver Proyecto
Vista previa de Almacén de Cajas

Almacén de Cajas

Interfaz Drag & Drop nativo. Apareció en la competencia.

HTMLCSSJS (drag events)
Aprendizaje: ciclo de eventos de arrastre
Ver Proyecto
Vista previa de Menú Cuadrícula

Menú Cuadrícula

Práctica de Grid y Flexbox para organizar secciones. Aunque no me gustó visualmente, fue muy importante para aprender.

CSS GridFlexbox
Aprendizaje: combinación de Grid y Flexbox
Ver Proyecto
Vista previa de Cronómetro WorldSkills

Cronómetro WorldSkills

Cronómetro interactivo con PHP y JavaScript. Requiere XAMPP.

HTMLCSSJSPHP
Aprendizaje: integración frontend-backend
Ver Proyecto
Vista previa de Rompecabezas WorldSkills

Rompecabezas Módulo A

Puzzle con imágenes de WorldSkills usando Drag & Drop. Muy satisfactorio de ver funcionando.

HTMLCSSJS (drag & drop)
Aprendizaje: lógica de ordenamiento y validación
Ver Proyecto
Vista previa de Órbita Celestial

Órbita Celestial

Sistema planetario animado solo con HTML y CSS. Apareció en la competencia.

HTMLCSS (keyframes)
Aprendizaje: posicionamiento absoluto y animaciones continuas
Ver Proyecto
Vista previa de Interactive Rating Component

Interactive Rating

Desafío de Frontend Mentor. El instructor Washington nos recomendó la página.

HTMLCSSJS
Aprendizaje: interpretar requerimientos y manejar estados
Ver Proyecto
Vista previa de Simon Say

Simon Say

Juego de memoria basado en un tutorial. Mi versión personal.

HTMLCSSJS
Aprendizaje: secuencias, temporizadores y lógica de juego
Ver Proyecto
Vista previa de Laravel

Laravel - Gestión de Estudiantes

CRUD completo con Laravel 11, API REST y SQLite. El proyecto más completo de backend.

LaravelPHPSQLiteAPI REST
Aprendizaje: MVC, migraciones, validaciones y consumo de API
Ver Proyecto