10 Easy HTML & CSS Projects for Beginners (With Source Code)

Here's a pattern I see constantly: someone finishes an HTML course, knows what a `<div>` is, and then freezes when they open a blank editor. The fix isn't another course — it's a *small project* with a clear finish line. Every project below takes between 20 minutes and 2 hours, teaches exactly one skill, and can be built right now in a free online editor with live preview. Type the starter code, then make it yours.

1. Personal intro page

The classic first project. One headline with your name, a paragraph about you, and a list of three hobbies. It teaches document structure: headings, paragraphs and lists working together.

<h1>Hi, I'm Alex</h1>
<p>I'm learning web development, one project at a time.</p>
<h2>Things I like</h2>
<ul>
  <li>Football</li>
  <li>Cooking (badly)</li>
  <li>Old video games</li>
</ul>

Next step: give the `<h1>` a color and the body a background color in the CSS tab.

2. Button collection

Build five buttons that look completely different using only CSS: one with rounded corners, one with a shadow, one that changes color on hover, one with a gradient, one that's just outlined. This is the single best CSS-selectors-and-pseudo-classes exercise there is, and you'll reuse every technique here in every future project.

button {
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.ghost {
  background: white;
  border: 2px solid #10b981;
  color: #10b981;
}
.ghost:hover {
  background: #10b981;
  color: white;
}

3. Recipe card

Pick a dish you can actually cook. Structure it properly: an `<h1>` for the dish, an unordered list for ingredients, an ordered list for the steps (order matters!), and maybe a nested list for optional toppings. This project quietly teaches you HTML semantics — which tag is right for which content.

4. Pricing card

One card: plan name, big price, five feature lines, a signup button. Then style it — centered text, a subtle border, padding, a hover lift effect. When you're done, duplicate the card and make the middle one 'featured' with a different border. Congratulations, you've just built the core of every SaaS pricing page on the internet.

5. Digital clock

Your first JavaScript project should be small and satisfying. This one shows the current time, updating every second:

function tick() {
  const now = new Date();
  document.getElementById("clock").textContent =
    now.toLocaleTimeString();
}
setInterval(tick, 1000);
tick();

Pair it with `<h1 id="clock"></h1>` in the HTML tab. If you want to understand exactly why this works, the JavaScript playground guide walks through testing JS like this step by step.

6. Contact form (the honest kind)

Build a form with a name field, email field, textarea and submit button. Style the inputs with matching borders and focus colors. It won't send anywhere yet — and that's fine, because this project teaches form markup, labels and input types. Add `required` to the fields and notice how the browser gives you free validation.

7. Color palette showcase

Design five rounded squares, each filled with a different color, each labeled with its hex code. Then add a click handler that copies the hex code to the clipboard using `navigator.clipboard.writeText()`. Designers will actually use this — it might be the first thing you build that a stranger would find useful.

8. Simple photo gallery

Use CSS Grid — `display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));` — to lay out six images that wrap responsively with no media queries at all. Resize the preview panel in your editor and watch the grid reflow. This one project is the fastest route to understanding why CSS Grid changed everything.

9. Quiz with a score

Three multiple-choice questions as buttons. Track a score variable, give feedback on each click, show the result at the end. You'll touch arrays, conditionals and DOM updates — the three pillars of practical JavaScript. If you get stuck on the styling, the CSS editor guide covers centering things, which is somehow always harder than expected.

10. Your own start page

The project that stays useful forever: a personal start page for your browser with links to the sites you use daily, a search box and the current date. It combines everything above — layout, styling, a bit of JavaScript — and unlike a tutorial clone, it's *yours*, so you'll keep improving it for months.

How to actually finish these projects

1. Build each one in one sitting. Momentum beats perfection — a finished ugly project beats an abandoned perfect one.
2. Change at least one thing the tutorial didn't show. One. That's where learning happens.
3. When it works, download the HTML file and look at it offline. Then, when you break something later, you'll know it was the code, not the editor.
4. After three projects, redo project #1 from scratch without looking. You'll be shocked how much stuck.

You don't need 30 projects. You need three that you actually finished, and one that you're a little bit proud of.

If you're not sure where HTML ends and CSS begins yet, pair this list with the 30-day HTML & CSS learning roadmap — the projects above slot directly into weeks two through four.