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

Basics ng Web Development (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
  • Maipaliwanag kung ano ang ginagawa ng bawat isa sa HTML, CSS at JavaScript.
  • Makasulat ng valid na HTML page na may headings, links, lists, images at sections.
  • Ma-style ito gamit ang CSS: kulay, font, spacing at layout na gumagana sa cellphone.
  • Makapagdagdag ng interaction gamit ang JavaScript: tumugon sa pag-click ng button at baguhin ang page.
  • Magamit ang developer tools ng browser mo para mag-inspect at mag-debug.
  • Makapag-publish ng maliit na site nang libre gamit ang GitHub Pages.

Ang kailangan mo lang ay computer, libreng code editor (halimbawa Visual Studio Code) at web browser. Na-test ang code sa course na ito.

Words in this course 27Open the Vocabulary Hall
01

Ang tatlong wika ng web

In simple words

Ang web page ay parang bahay. Ang HTML ay ang mga pader at kwarto (ang structure). Ang CSS ay ang pintura at muwebles (ang itsura). Ang JavaScript ay ang kuryente: pinapailaw nito ang ilaw kapag pinindot mo ang switch.

Key facts
  • Inilalarawan ng HTML (HyperText Markup Language) ang content at structure gamit ang mga tag tulad ng <h1> (pangunahing heading) at <p> (paragraph).
  • Kinokontrol ng CSS (Cascading Style Sheets) ang itsura ng mga bagay: kulay, font, spacing, layout.
  • Nagdadagdag ng behaviour ang JavaScript: pagtugon sa mga click, pagpapakita at pagtatago ng mga bagay, pag-check ng mga form.
  • Dina-download ng browser (Chrome, Firefox, Safari, Edge) ang mga file na ito mula sa server at iginuguhit ang page.
  • Ang MDN Web Docs (gawa ng Mozilla) ay libre at mapagkakatiwalaang reference para sa tatlong wika. Kapag nakalimutan mo kung paano gumagana ang isang bagay, hanapin ito roon.
  • Ang karaniwang maliit na site ay may tatlong file sa isang folder: index.html, style.css at script.js. Ang home page ay kadalasang pinangalanang index.html.
Step by step
  1. Magbukas ng kahit anong website sa browser mo.
  2. Itanong: ano ang content at structure? Iyan ang HTML.
  3. Itanong: ano ang mga kulay, font at spacing? Iyan ang CSS.
  4. Itanong: ano ang tumutugon kapag nag-click ako? Iyan ang JavaScript.
  5. Gumawa ng bagong folder sa computer mo na ang pangalan ay my-site.
  6. I-check: kaya mong sabihin kung ano ang ginagawa ng bawat isa sa tatlong wika at kung anong mga file ang idadagdag mo: index.html, style.css, script.js.
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 01Ang tatlong wika ng web
LESSON 01 / ANIMATED LESSON / ENGLISH VOICE00:00 / 01:00
Read the video script
[Host] "Bawat website na nabisita mo ay gawa sa tatlong wika."
[Text on screen: HTML = structure, CSS = style, JavaScript = behaviour] "Ang HTML ay ang mga pader. Ang CSS ay ang pintura. Ang JavaScript ay ang switch ng ilaw."
[Screen: folder na may index.html, style.css, script.js] "Tatlong file sa isang folder. Iyan ang website."
Try it now

Mag-install ng code editor. Gumawa ng folder na my-site na may tatlong walang lamang file: index.html, style.css at 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 "Basics ng Web Development (HTML, CSS, JavaScript)" on The Future Market. Lesson 1: "Ang tatlong wika ng web".

What the lesson teaches:
- Inilalarawan ng HTML (HyperText Markup Language) ang content at structure gamit ang mga tag tulad ng <h1> (pangunahing heading) at <p> (paragraph).
- Kinokontrol ng CSS (Cascading Style Sheets) ang itsura ng mga bagay: kulay, font, spacing, layout.
- Nagdadagdag ng behaviour ang JavaScript: pagtugon sa mga click, pagpapakita at pagtatago ng mga bagay, pag-check ng mga form.
- Dina-download ng browser (Chrome, Firefox, Safari, Edge) ang mga file na ito mula sa server at iginuguhit ang page.
- Ang MDN Web Docs (gawa ng Mozilla) ay libre at mapagkakatiwalaang reference para sa tatlong wika. Kapag nakalimutan mo kung paano gumagana ang isang bagay, hanapin ito roon.
- Ang karaniwang maliit na site ay may tatlong file sa isang folder: index.html, style.css at script.js. Ang home page ay kadalasang pinangalanang index.html.

The exercise I'm working on:
Mag-install ng code editor. Gumawa ng folder na my-site na may tatlong walang lamang file: index.html, style.css at 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 "Ang tatlong wika ng web" from the course "Basics ng Web Development (HTML, CSS, JavaScript)".

Here's what the lesson says:
Ang web page ay parang bahay. Ang HTML ay ang mga pader at kwarto (ang structure). Ang CSS ay ang pintura at muwebles (ang itsura). Ang JavaScript ay ang kuryente: pinapailaw nito ang ilaw kapag pinindot mo ang switch.

The activity:
Mag-install ng code editor. Gumawa ng folder na my-site na may tatlong walang lamang file: index.html, style.css at 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: ang structure

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

03

CSS: ang style

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

04

JavaScript: ang behaviour

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

05

Developer tools: tingnan ang loob ng kahit anong page

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

06

I-publish ang site mo nang libre

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. Aling wika ang kumokontrol sa structure, alin sa style, at alin sa behaviour?

  2. Ano ang karaniwang file name ng home page ng isang site?

  3. Bakit kailangan ng bawat image ng alt attribute?

  4. Sa CSS rule na h1 { color: navy; }, ano ang selector?

  5. Ano ang ginagawa ng media query tulad ng @media (max-width: 600px)?

  6. Ano ang pagkakaiba ng let at const?

  7. Ano ang ibinibigay ng 5 + "5" sa JavaScript?

  8. Aling method ang naghahanap ng element sa page?

  9. Paano buksan ang Chrome DevTools sa Windows?

  10. Puwede mo bang gamitin ang GitHub Pages para magpatakbo ng online store?

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.