Coding gamit ang AI: imong unang project gikan sa ideya hangtod molihok nga app

01

Unsa ang code, ug unsa ang gihimo sa AI coding assistant

In simple words

Ang code usa ka listahan sa mga panudlo nga gisunod sa kompyuter, sama sa recipe. Ang AI coding assistant usa ka katabang nga makasulat sa recipe, makaluto ug makatilaw, apan ikaw ang mohukom unsang pagkaon ang himoon ug kung lami ba.

Key facts

Ang Code mga nasulat nga panudlo para sa kompyuter. Ang program o app code nga nagdagan. Ang bug usa ka sayop sa code nga maoy hinungdan nga sayop ang buhaton sa app.
Ang gamay nga web page naggamit og tulo ka pinulongan nga masabtan sa matag browser:

Pinulongan	Trabaho	Pagtandi sa kusina
HTML	Ang sulod ug estruktura: mga heading, text, buttons, kahon	Ang mga sangkap sa lamesa
CSS	Ang hitsura: kolor, gilay-on, fonts	Kung giunsa pag-areglo ang plato
JavaScript	Ang pamatasan: unsay mahitabo kung mo-click ka	Ang mga lakang sa pagluto

Ang file naghupot og code. Ang folder (gitawag usab og directory) naghupot og mga file. Nakat-onan na nimo kining duha sa Command Line Basics.
Gihubit sa Anthropic ang Claude Code isip agentic coding tool. Kung hatagan nimo kini og trabaho, molihok kini sa tulo ka hugna nga nagkasagol: mangolekta og konteksto (mobasa sa imong mga file), mohimo og aksyon (mo-edit og mga file, mopadagan og commands), ug mo-verify sa resulta (pananglitan pinaagi sa pagpadagan og tests). Mahimo nimo kining paundangon bisan kanus-a.
Ang Claude Code makabasa sa imong project folder, makaedit og mga file ug makapadagan og commands sa imong terminal. Mahimo kining masayop, mao nga ikaw gihapon ang nagdumala: siya mosugyot, ikaw ang mo-aprubar.
Ang Claude Code molihok sa terminal, sa VS Code ug JetBrains, sa desktop app ug sa web sa claude.ai/code. Parehas ang makina sa luyo niini tanan.
Ang AI assistant dili makawagtang sa panginahanglan nga masabtan ang resulta. Makatipig kini og tayp. Ikaw gihapon ang mohukom unsay himoon ug ikaw gihapon ang mo-check kung molihok.

Step by step

Ablihi ang notebook o text file ug isulat ang tulo ka heading: HTML, CSS, JavaScript.
Tapad sa matag heading, isulat sa imong kaugalingong pulong ang trabaho niini (estruktura, hitsura, pamatasan).
Ablihi ang bisan unsang web page sa imong browser, right-click og button ug pilia ang Inspect (mahimong lahi ang ngalan sa matag browser). Pangitaa ang HTML tags.
Isulat ang usa ka butang sa maong page nga HTML (heading), usa nga CSS (kolor) ug usa nga JavaScript (butang nga mausab kung mo-click).
Basaha ang Overview page sa Claude Code docs ug pangitaa ang listahan sa mga lugar nga mahimo nimong gamiton kini.
Check: maipasabot nimo ang tulo ka pinulongan gamit ang pagtandi sa kusina, ug masulti nimo kung unsay buot ipasabot sa "gather context, take action, verify".

Watch on YouTube

What Claude Code is, in a beginner tutorialAyyazTech · YouTube · youtube.com

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

LESSON 01Unsa ang code, ug unsa ang gihimo sa AI coding assistant

LESSON 01 / ANIMATED LESSON / ENGLISH VOICE00:00 / 01:00

Voice

Read the video script

[Host] "Unsa ang code? Usa kini ka listahan sa mga panudlo nga gisunod sa kompyuter, sama sa recipe."
[Text on screen: HTML = estruktura | CSS = hitsura | JavaScript = pamatasan] "Ang web page naggamit og tulo ka pinulongan. Ang HTML mao ang estruktura, ang CSS mao ang hitsura, ang JavaScript mao ang mahitabo kung mo-click ka."
[Screen: Claude Code nagbasa og mga file sa project folder] "Ang AI coding assistant sama sa Claude Code makabasa sa imong mga file, makaedit niini ug makapadagan og commands."
[Text on screen: Gather context, take action, verify] "Molihok kini sa lingin: motan-aw sa palibot, mohimo og usba, mo-check sa resulta."
[Host] "Ikaw gihapon ang boss. Ikaw ang mohukom unsay himoon ug kung molihok ba."

Try it now

Pili og web page nga imong gigamit kada adlaw. Ilista ang tulo ka butang niini nga HTML, duha nga CSS ug duha nga JavaScript. Dayon isulat ang usa ka sentence: "Makatabang ang AI assistant nako sa ___, apan kinahanglan gihapon nakong susihon ang ___."

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 "Coding gamit ang AI: imong unang project gikan sa ideya hangtod molihok nga app" on The Future Market. Lesson 1: "Unsa ang code, ug unsa ang gihimo sa AI coding assistant".

What the lesson teaches:
- Ang Code mga nasulat nga panudlo para sa kompyuter. Ang program o app code nga nagdagan. Ang bug usa ka sayop sa code nga maoy hinungdan nga sayop ang buhaton sa app.
- Ang gamay nga web page naggamit og tulo ka pinulongan nga masabtan sa matag browser:
- Pinulongan - Trabaho - Pagtandi sa kusina
- HTML - Ang sulod ug estruktura: mga heading, text, buttons, kahon - Ang mga sangkap sa lamesa
- CSS - Ang hitsura: kolor, gilay-on, fonts - Kung giunsa pag-areglo ang plato
- JavaScript - Ang pamatasan: unsay mahitabo kung mo-click ka - Ang mga lakang sa pagluto
- Ang file naghupot og code. Ang folder (gitawag usab og directory) naghupot og mga file. Nakat-onan na nimo kining duha sa Command Line Basics.

The exercise I'm working on:
Pili og web page nga imong gigamit kada adlaw. Ilista ang tulo ka butang niini nga HTML, duha nga CSS ug duha nga JavaScript. Dayon isulat ang usa ka sentence: "Makatabang ang AI assistant nako sa ___, apan kinahanglan gihapon nakong susihon ang ___."

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 "Unsa ang code, ug unsa ang gihimo sa AI coding assistant" from the course "Coding gamit ang AI: imong unang project gikan sa ideya hangtod molihok nga app".

Here's what the lesson says:
Ang code usa ka listahan sa mga panudlo nga gisunod sa kompyuter, sama sa recipe. Ang AI coding assistant usa ka katabang nga makasulat sa recipe, makaluto ug makatilaw, apan ikaw ang mohukom unsang pagkaon ang himoon ug kung lami ba.

The activity:
Pili og web page nga imong gigamit kada adlaw. Ilista ang tulo ka butang niini nga HTML, duha nga CSS ug duha nga JavaScript. Dayon isulat ang usa ka sentence: "Makatabang ang AI assistant nako sa ___, apan kinahanglan gihapon nakong susihon ang ___."

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

Claude Code docs, How Claude Code works (the agentic loop): code.claude.com/docs/en/how-claude-code-works
Claude Code docs, Overview: code.claude.com/docs/en/overview
MDN Web Docs, What is JavaScript?: developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/

My notes

I learned this

02