Understand
Learn every idea four ways
Start with a plain definition. Connect it to a familiar analogy, see a visual, then prove it with code.
Learn web development
by building for real life.
Learn each concept four ways, then use it in projects shaped by everyday life in the Philippines. Finish with working pages and apps you can inspect, explain, and improve.
No credit card required. No sign-up. Your work saves in this browser.
Built for practice
A clear path from explanation to working code
CodeDaddy connects explanations, familiar projects, and browser checks in one learning loop. You always know what you are changing and why it matters.
Build
Work on projects that feel familiar
Build sari-sari store pages, barangay tools, fare calculators, and other projects rooted in everyday Filipino life.
Remember
Review ideas before they fade
Short review sessions bring back concepts from earlier courses while you keep working on new projects.
Prove
Keep working proof
Each check points to a real requirement. Your completed projects stay available for you to inspect and improve.
The Workspace
Read one clear task, edit real code, and compare it with a live browser preview. You work in a real editor inside your browser.
Instructions
Task 4: Build the Price List
In this step you add a readable list of products and prices to Lola's sari-sari store page using <ul> and <li>.
Goal: group each product and price in its own list item.
index.htmlstyles.css
1
2
3
4
5
6
7
8
9
10
<header>
<h1>Lola's Sari-Sari Store</h1>
</header>
<main>
<h2>Price List</h2>
<ul>
<li>Chichiria - ₱10</li>
<li>Softdrinks - ₱20</li>
</ul>
</main>Preview
Chippy Garlic
Qty: 1₱15.00
Preview Updated
The Learning Loop
1. Read Task
Clear instructions focus on one small feature and explain why the change matters.
2. Edit Code
Write real code in a keyboard-friendly editor and watch the page update beside it.
3. See Results
Instant checks show what passed and what to inspect before your next attempt.
Before you start
Common questions
What is CodeDaddy?
CodeDaddy is a free front-end learning platform that runs in your browser. You read one short task, write real HTML, CSS, JavaScript, React, or TypeScript, and see the page update beside your code. The projects are built around everyday Filipino life, like sari-sari store pages and jeepney fare calculators.
Is CodeDaddy free?
Yes. Every course, project, and certificate is free. There is no paid tier, no trial that expires, and no card to enter. Donations are optional and change nothing about what you can access.
Do I need an account to start learning?
No. You can open a course and start writing code right away. Your work saves in your own browser. Signing in with GitHub or an email link is only for keeping progress across devices.
What do I learn on CodeDaddy?
Ten courses in order: HTML, design foundations, CSS, JavaScript, JavaScript on a page, real app data, Tailwind CSS, React, TypeScript with React, and testing with browser devtools. Each course is a set of small projects built one step at a time.
Do I need to install anything?
No. The editor, the live preview, and the checks all run inside your browser tab. There is nothing to download, no local setup, and no server that runs your code.
Do I need coding experience to start?
No. The first course starts with what a web page is made of and assumes you have never written a line of code. Every new word gets an explanation, a familiar comparison, a picture, and a working example before it is used.
How long does the full path take?
About 2,760 small steps across ten courses. Most steps take a few minutes, so an hour a day gets most learners through the path in a few months. There is no schedule and no deadline.
Do I get a certificate?
Yes. Finishing a course issues a certificate automatically once its checks pass. No one reviews or approves it by hand, and you can save it as an image or share the link.
Does CodeDaddy work on a phone or with a slow connection?
Yes. The workspace is built for a small screen and a metered connection, and it installs like an app. Once a course has loaded, you can keep working on it offline.