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

Mga Basic sa 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
  • Ipasabot kon unsa ang buhaton sa HTML, CSS ug JavaScript.
  • Magsulat og husto nga HTML page nga naay mga heading, link, listahan, hulagway ug section.
  • I-istilo kini gamit ang CSS: kolor, font, gilay-on ug layout nga molihok maayo sa telepono.
  • Dugangan og interaksyon gamit ang JavaScript: motubag sa pag-click sa button ug musab sa page.
  • Gamiton ang developer tools sa imong browser aron motan-aw sa sulod ug mag-debug.
  • Mag-publish og gamay nga site nga libre gamit ang GitHub Pages.

Ang kinahanglan ra nimo kay kompyuter, libre nga code editor (pananglitan ang Visual Studio Code) ug web browser. Gitesting na ang code niini nga course.

Words in this course 27Open the Vocabulary Hall
01

Ang tulo ka lengguwahe sa web

In simple words

Ang web page sama sa usa ka balay. Ang HTML mao ang mga bungbong ug kwarto (ang estruktura). Ang CSS mao ang pintura ug mga muwebles (unsaon pagtan-aw niini). Ang JavaScript mao ang kuryente: mao kini ang makapasiga sa suga inig pislit nimo sa switch.

Key facts
  • Ang HTML (HyperText Markup Language) naghulagway sa sulod ug estruktura gamit ang mga tag sama sa <h1> (panguna nga heading) ug <p> (paragraph).
  • Ang CSS (Cascading Style Sheets) mao ang nagkontrol sa dagway: kolor, font, gilay-on, layout.
  • Ang JavaScript nagdugang og kinaiya: motubag sa mga click, mopakita ug mohimo nga tago sa mga butang, mo-check sa mga form.
  • Ang browser (Chrome, Firefox, Safari, Edge) mo-download niini nga mga file gikan sa server ug mo-drawing sa page.
  • Ang MDN Web Docs (gikan sa Mozilla) kay libre ug kasaligan nga reference para sa tanan nga tulo. Kon nakalimot ka kon unsaon ang usa ka butang, didto ka mangita.
  • Ang tipikal nga gamay nga site naay tulo ka file sa usa ka folder: index.html, style.css ug script.js. Ang home page kasagaran gi-ngalan nga index.html.
Step by step
  1. Ablihi ang bisan unsang website sa imong browser.
  2. Pangutana: unsa ang sulod ug estruktura? Kana ang HTML.
  3. Pangutana: unsa ang mga kolor, font ug gilay-on? Kana ang CSS.
  4. Pangutana: unsa ang motubag inig click nako? Kana ang JavaScript.
  5. Himoa og bag-ong folder sa imong kompyuter nga ang ngalan my-site.
  6. Check: masulti nimo kon unsa ang buhaton sa matag usa sa tulo ka lengguwahe ug unsang mga file ang imong idugang: 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 tulo ka lengguwahe sa web
LESSON 01 / ANIMATED LESSON / ENGLISH VOICE00:00 / 01:00
Read the video script
[Host] "Ang matag website nga imong nabisitahan gihimo gikan sa tulo ka lengguwahe."
[Text on screen: HTML = estruktura, CSS = istilo, JavaScript = kinaiya] "Ang HTML mao ang mga bungbong. Ang CSS mao ang pintura. Ang JavaScript mao ang switch sa suga."
[Screen: folder nga naay index.html, style.css, script.js] "Tulo ka file sa usa ka folder. Website na kana."
Try it now

Pag-install og code editor. Himoa ang folder nga my-site nga naay tulo ka walay sulod nga file: index.html, style.css ug 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 "Mga Basic sa Web Development (HTML, CSS, JavaScript)" on The Future Market. Lesson 1: "Ang tulo ka lengguwahe sa web".

What the lesson teaches:
- Ang HTML (HyperText Markup Language) naghulagway sa sulod ug estruktura gamit ang mga tag sama sa <h1> (panguna nga heading) ug <p> (paragraph).
- Ang CSS (Cascading Style Sheets) mao ang nagkontrol sa dagway: kolor, font, gilay-on, layout.
- Ang JavaScript nagdugang og kinaiya: motubag sa mga click, mopakita ug mohimo nga tago sa mga butang, mo-check sa mga form.
- Ang browser (Chrome, Firefox, Safari, Edge) mo-download niini nga mga file gikan sa server ug mo-drawing sa page.
- Ang MDN Web Docs (gikan sa Mozilla) kay libre ug kasaligan nga reference para sa tanan nga tulo. Kon nakalimot ka kon unsaon ang usa ka butang, didto ka mangita.
- Ang tipikal nga gamay nga site naay tulo ka file sa usa ka folder: index.html, style.css ug script.js. Ang home page kasagaran gi-ngalan nga index.html.

The exercise I'm working on:
Pag-install og code editor. Himoa ang folder nga my-site nga naay tulo ka walay sulod nga file: index.html, style.css ug 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 tulo ka lengguwahe sa web" from the course "Mga Basic sa Web Development (HTML, CSS, JavaScript)".

Here's what the lesson says:
Ang web page sama sa usa ka balay. Ang HTML mao ang mga bungbong ug kwarto (ang estruktura). Ang CSS mao ang pintura ug mga muwebles (unsaon pagtan-aw niini). Ang JavaScript mao ang kuryente: mao kini ang makapasiga sa suga inig pislit nimo sa switch.

The activity:
Pag-install og code editor. Himoa ang folder nga my-site nga naay tulo ka walay sulod nga file: index.html, style.css ug 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 estruktura

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

03

CSS: ang istilo

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

04

JavaScript: ang kinaiya

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

05

Developer tools: tan-awa ang sulod sa bisan unsang page

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

06

I-publish ang imong site nga 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. Unsang lengguwahe ang nagkontrol sa estruktura, unsa sa istilo, ug unsa sa kinaiya?

  2. Unsa ang kasagarang ngalan sa file sa home page sa usa ka site?

  3. Nganong ang matag hulagway kinahanglan og alt attribute?

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

  5. Unsa ang buhaton sa media query sama sa @media (max-width: 600px)?

  6. Unsa ang kalahian sa let ug const?

  7. Unsa ang resulta sa 5 + "5" sa JavaScript?

  8. Unsang method ang mangita og elemento sa page?

  9. Unsaon pag-abli sa Chrome DevTools sa Windows?

  10. Pwede ba gamiton ang GitHub Pages sa pagpadagan og 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.