Everyone getting into web development hears the same trio: HTML, CSS and JavaScript — but few ever see what each of them actually does. In this article we build a working web page from scratch, through a beginner's eyes: a heading, a button, and a counter that brings the page to life.
HTML says what is on the page. Everything starts with a tag and ends with one:
<h1>Hello Web</h1>
<button id="btn">Click me</button>
<p id="out">0 clicks</p>Three lines give us a heading, a button and a result paragraph. Still gray and boring — because the looks aren't its job.
In CSS you first say who you're talking to, then describe it with property–value pairs:
button {
background: #22c55e;
color: white;
padding: 12px 28px;
border-radius: 10px;
cursor: pointer;
}Green background, white text, rounded corners, and a hand cursor on hover. A text-align: center on the body and a smooth transition take the page from plain to modern in seconds.
HTML said what's on the page, CSS said how it looks — JavaScript says what it does. We grab the button with querySelector and attach a listener with addEventListener:
btn.addEventListener('click', () => {
n++;
out.textContent = n + ' clicks';
});From this point the page talks with you: every click raises the counter, and a Reset button clears it whenever you like.
The most joyful part of learning the web is the instant bridge between code and result. Change a color, press Run, see it. Broke it? Undo. This fast loop turns learning code into an experiment instead of memorization.
Once this frame settles in your head, no web page feels overwhelming — they're all combinations of the same three layers. In the companion video you can watch every step live, with the code appearing and the browser reacting in real time.
Website and Web Design: Pricing and the Relationship with SEO Introductio...
Devamını oku →
Building a Website in 2025: Modern Solutions and Approaches Website c...
Devamını oku →