THE FUTURE MARKETACADEMY
Your classroomRoom 07 · Tech Lab
School of Data & Tech

Desarrollo web básico (HTML, CSS, JavaScript)

Step 5 of 8 in Tech Lab

Next in your path: 7.9 Cloud Basics (what AWS/Google Cloud/Azure do)

What you'll be able to do
  • Explicar qué hace cada uno: HTML, CSS y JavaScript.
  • Escribir una página HTML válida con títulos, enlaces, listas, imágenes y secciones.
  • Darle estilo con CSS: colores, fuentes, espacios y un diseño que funcione en teléfonos.
  • Agregar interacción con JavaScript: responder al clic de un botón y cambiar la página.
  • Usar las herramientas para desarrolladores de tu navegador para inspeccionar y depurar.
  • Publicar gratis un sitio pequeño con GitHub Pages.

Solo necesitas una computadora, un editor de código gratuito (por ejemplo Visual Studio Code) y un navegador web. El código de este curso fue probado.

Words in this course 27Open the Vocabulary Hall
01

Los tres lenguajes de la web

In simple words

Una página web es como una casa. HTML son las paredes y los cuartos (la estructura). CSS es la pintura y los muebles (cómo se ve). JavaScript es la electricidad: hace que las luces se prendan cuando aprietas el interruptor.

Key facts
  • HTML (HyperText Markup Language) describe el contenido y la estructura usando etiquetas como <h1> (título principal) y <p> (párrafo).
  • CSS (Cascading Style Sheets, hojas de estilo en cascada) controla cómo se ven las cosas: colores, fuentes, espacios, diseño.
  • JavaScript agrega comportamiento: reaccionar a clics, mostrar y ocultar cosas, revisar formularios.
  • Un navegador (Chrome, Firefox, Safari, Edge) descarga estos archivos de un servidor y dibuja la página.
  • MDN Web Docs (de Mozilla) es una referencia gratuita y confiable para los tres lenguajes. Cuando olvides cómo funciona algo, búscalo ahí.
  • Un sitio pequeño típico tiene tres archivos en una carpeta: index.html, style.css y script.js. La página de inicio normalmente se llama index.html.
Watch on YouTube
HTML, CSS and JavaScript explained in 4 minutesDanielle Thé · YouTube · youtube.com

Videos by other creators on YouTube, for reference. They are not made by or affiliated with The Future Market.

LESSON 01Los tres lenguajes de la web
LESSON 01 / ANIMATED LESSON / ENGLISH VOICE00:00 / 01:00
Read the video script
[Host] "Todos los sitios web que has visitado están hechos con tres lenguajes."
[Text on screen: HTML = estructura, CSS = estilo, JavaScript = comportamiento] "HTML son las paredes. CSS es la pintura. JavaScript es el interruptor de la luz."
[Screen: carpeta con index.html, style.css, script.js] "Tres archivos en una carpeta. Eso es un sitio web."
Try it now

Instala un editor de código. Crea una carpeta llamada my-site con tres archivos vacíos: index.html, style.css y script.js.

ClaudeStuck? Copy a ready-made prompt for Claude

Copy this, open Claude, paste it, and Claude will walk you through the lesson step by step.

For a grown-up: Claude is for adults (18+). Copy this, paste it into Claude, and use the answer to explain the lesson to your child.

I'm learning "Desarrollo web básico (HTML, CSS, JavaScript)" on The Future Market. Lesson 1: "Los tres lenguajes de la web".

What the lesson teaches:
- HTML (HyperText Markup Language) describe el contenido y la estructura usando etiquetas como <h1> (título principal) y <p> (párrafo).
- CSS (Cascading Style Sheets, hojas de estilo en cascada) controla cómo se ven las cosas: colores, fuentes, espacios, diseño.
- JavaScript agrega comportamiento: reaccionar a clics, mostrar y ocultar cosas, revisar formularios.
- Un navegador (Chrome, Firefox, Safari, Edge) descarga estos archivos de un servidor y dibuja la página.
- MDN Web Docs (de Mozilla) es una referencia gratuita y confiable para los tres lenguajes. Cuando olvides cómo funciona algo, búscalo ahí.
- Un sitio pequeño típico tiene tres archivos en una carpeta: index.html, style.css y script.js. La página de inicio normalmente se llama index.html.

The exercise I'm working on:
Instala un editor de código. Crea una carpeta llamada my-site con tres archivos vacíos: index.html, style.css y script.js.

I'm stuck. Please:
1. Explain the main idea in plain, simple words with one everyday example.
2. Walk me through the exercise one small step at a time. Ask me what I've done so far before giving the next step.
3. Don't just give me the final answer. Help me do it myself, and check my work when I share it.
I'm a parent helping my child (about 8 years old) with a lesson called "Los tres lenguajes de la web" from the course "Desarrollo web básico (HTML, CSS, JavaScript)".

Here's what the lesson says:
Una página web es como una casa. HTML son las paredes y los cuartos (la estructura). CSS es la pintura y los muebles (cómo se ve). JavaScript es la electricidad: hace que las luces se prendan cuando aprietas el interruptor.

The activity:
Instala un editor de código. Crea una carpeta llamada my-site con tres archivos vacíos: index.html, style.css y script.js.

Please explain this so an 8-year-old understands: short sentences, a fun everyday example, and no hard words.
Then give me 3 simple questions I can ask my child to check they understood, and a way to do the activity together, one tiny step at a time.
Open Claude
Sources
My notes
02

HTML: la estructura

This lesson is part of full access: every course and every level for one payment.

03

CSS: el estilo

This lesson is part of full access: every course and every level for one payment.

04

JavaScript: el comportamiento

This lesson is part of full access: every course and every level for one payment.

05

Herramientas para desarrolladores: mira por dentro cualquier página

This lesson is part of full access: every course and every level for one payment.

06

Publica tu sitio gratis

This lesson is part of full access: every course and every level for one payment.

++

Final project

This lesson is part of full access: every course and every level for one payment.

??

Quiz

  1. ¿Qué lenguaje controla la estructura, cuál el estilo y cuál el comportamiento?

  2. ¿Cuál es el nombre de archivo habitual de la página de inicio de un sitio?

  3. ¿Por qué cada imagen necesita un atributo alt?

  4. En la regla de CSS h1 { color: navy; }, ¿cuál es el selector?

  5. ¿Qué hace una media query como @media (max-width: 600px)?

  6. ¿Cuál es la diferencia entre let y const?

  7. ¿Qué da 5 + "5" en JavaScript?

  8. ¿Qué método encuentra un elemento en la página?

  9. ¿Cómo abres Chrome DevTools en Windows?

  10. ¿Puedes usar GitHub Pages para manejar una tienda en línea?

EX

Final exam

This lesson is part of full access: every course and every level for one payment.

CE

Certificate

This lesson is part of full access: every course and every level for one payment.