FREE LESSON 2 OF 8 · BEGINNER
Meet HTML, CSS, and JavaScript
Learn the three parts of a simple web page.
Three jobs, one page
HTML gives a page its parts: titles, words, links, forms, and buttons. CSS sets its look: colors, size, space, and layout. JavaScript adds actions: a counter, a menu, or a check on a form.
A page can start with one HTML file. You do not need a large framework to learn these three parts. Use clear labels and real buttons. Make text easy to read.
Try a tiny change
Change a title. Change a color. Press a button. Watch which part of the code controls each result. Small changes help you see cause and effect.
Keep the page usable with a keyboard and on a phone. A pretty button is not enough. People must be able to see its text, reach it, and tell what it does.
Try these steps
- Try the page lab below. Change the title and button color.
- Click the button and watch the count change.
- Read the sample code. Find the title, style, and action.
A real-world example
A price card uses HTML for the name and price. CSS keeps the card neat. JavaScript can open a booking form. Start with the card before adding the form.
Try a tiny page
Change the words and color. Press the button. This runs here in your browser. It does not create a project or use paid AI.
My first useful page
0 clicks
See the small code example
<!-- HTML: the parts -->
<h2>My first useful page</h2>
<button id="try">Try it</button>
<p id="count">0 clicks</p>
<!-- CSS: the look -->
<style>button { background: #664399; color: white; }</style>
<!-- JavaScript: the action -->
<script>
let clicks = 0;
document.getElementById('try').onclick = () => {
clicks += 1;
document.getElementById('count').textContent = clicks + ' clicks';
};
</script>The example starts at zero when you open it. Your preview count above shows what you have tried here.
Ask AI for help
Copy this prompt into the tool you use. Fill in the blanks. Check what it gives you.
Show me a tiny HTML page with a heading and a button. Explain the HTML, CSS, and JavaScript in simple words. Keep the example small.
Your turn
In the lab, make a clear title and press the button three times. Explain what changed.
Notes are saved on this device only. Avoid adding private details or keys.
Read from the source
These maker and public guides help you check the details. Tools and rules can change.