REPOSITORY OVERVIEW

Live repository statistics

★ 2Stars

⑂ 0Forks

◯ 0Open issues

◉ 2Watchers

README preview

Fundamentos de Desarrollo Web

Un curso introductorio de HTML y CSS orientado a estudiantes de secundaria (12–17 años)
¡Sin instalaciones! Solo necesitas tu navegador web 🌐

Duración total: ~60 minutos | 7 Lecciones | Nivel: Principiante absoluto

Resumen del Curso

Este curso te enseña a crear sitios web desde cero usando HTML y CSS. Está diseñado especialmente para estudiantes de secundaria sin experiencia previa en programación. Al finalizar, habrás construido tu propia página web personal.

Público objetivo	Estudiantes de 12 a 17 años sin experiencia en programación
Prerrequisitos	Ninguno
Herramientas	Solo tu navegador (Chrome, Firefox, Safari, Edge)
Para Programar	JDoodle — gratuito y en línea
Repositorio	github.com/pethealt/webdev-course-pethealt

🚀 ¿Cómo usar JDoodle? (Guía rápida)

JDoodle es un editor de código 100% en línea y gratuito. No necesitas instalar nada.

Pasos para empezar:

1. Haz clic en el botón "Practicar en JDoodle" de cualquier lección
2. Verás el código de ejemplo ya cargado en pantalla
3. Presiona el botón Execute (▶) para ver tu página web
4. ¡Modifica el código y vuelve a presionar Execute para ver los cambios!

💡 Tip: No necesitas crear cuenta para ver el código. Si quieres guardar tu trabajo, puedes registrarte gratis con tu correo o cuenta de Google.

Estructura del Repositorio

Todo el código fuente del curso está organizado en el siguiente repositorio público de GitHub:

webdev-course-pethealt/
│
├── 📄 README.md                          ← Plan completo del curso (este documento)
│
│
├── 📁 starter-files/                     ← Código BASE que usaremos cada clase en JDoodle
│                                            Cada archivo tiene TODOs guiados paso a paso
│
├── 📁 completed-examples/                ← Código COMPLETO de la clase
│                                           Úsalo como referencia si te atascas
│
└── 📁 scripts/                           ← Guiones de narración para cada video

💡 ¿Cómo usar el repositorio?

Empieza siempre por el archivo en starter-files/ de la lección que estés viendo

Si te atascas en algún TODO, consulta el mismo archivo en completed-examples/

Los scripts/ son los guiones que usaron los presentadores al grabar cada video

Secuencia de Lecciones

Haz clic en la miniatura de cada lección para ver el video en YouTube.

🟢 Lección 1 — ¿Qué es el Desarrollo Web?


Duración	3 minutos
Descripción	Descubre qué son los sitios web, para qué sirven HTML y CSS, y cómo trabajan juntos para crear páginas en internet.
Aprenderás	Qué es HTML y CSS · Cómo trabajan juntos · ¡Cualquier persona puede crear una página web!
Script del Video
Starter File

Un sitio web = Contenido (HTML) + Estilo (CSS).
HTML define la estructura; CSS define la apariencia.
¡Cualquier persona puede crear una página web!

🟢 Lección 2 — Estructura HTML Básica


Duración	4 minutos
Descripción	Aprende las etiquetas fundamentales de HTML y crea la estructura de tu primera página web.
Aprenderás	`<!DOCTYPE html>` · Etiquetas `<html>`, `<head>`, `<body>` · Abrir y cerrar elementos
Script del Video
Starter File

Todo documento HTML comienza con <!DOCTYPE html>.
Las etiquetas básicas: <html>, <head>, <body>.
Los elementos se abren y cierran: <h1>Hola</h1>.

🟢 Lección 3 — Elementos HTML Comunes


Duración	10 minutos
Descripción	Enriquece tu página agregando encabezados, párrafos, listas, imágenes y enlaces.
Aprenderás	Encabezados `<h1>`–`<h6>` · Listas `<ul>` y `<ol>` · Imágenes `<img>` · Enlaces `<a>`
Script del Video
Starter File

Encabezados: <h1> hasta <h6> — del más grande al más pequeño.
Listas: <ul> (sin orden) y <ol> (numerada).
Imágenes: <img src="foto.jpg" alt="descripción"> — ¡siempre incluye alt!
Enlaces: <a href="https://...">Haz clic aquí</a>

🟡 Lección 4 — Introducción a CSS


Duración	6 minutos
Descripción	Dale vida a tu HTML aplicando colores, fuentes y estilos con CSS. Aprende a conectar CSS con tu página HTML.
Aprenderás	Sintaxis CSS · `background-color` · `color` · `font-size` · Vincular CSS con HTML
Script del Video
Starter File

CSS se escribe así: selector { propiedad: valor; }
Cambiar color de fondo: body { background-color: lightblue; }
Cambiar texto: h1 { color: red; font-size: 32px; }

🟡 Lección 5 — Tipografía, Bordes y Centrado


Duración	10 minutos
Descripción	Aprende a cambiar tipografías con fuentes del sistema y Google Fonts, a añadir bordes y a centrar contenido para que tu página se vea profesional.
Aprenderás	`font-family` · Google Fonts · `text-align` · `border` · `padding` · `margin`
Script del Video
Starter File

Fuentes del sistema: font-family: Arial, sans-serif;
Google Fonts: importar con <link> en el <head> y usar con font-family: 'Poppins', sans-serif;
Centrar texto: text-align: center;
Agregar borde: border: 2px solid black;
Espaciado interno: padding: 10px; — espacio dentro del elemento.
Espaciado externo: margin: 20px; — espacio fuera del elemento.

🔵 Lección 6 — Proyecto: Tu Página de Perfil Personal

[![Practicar en JDoodle](https://img.shields.io/badge/💻%20Practicar%20en%20JDoodle-0A7C6E?style=for