Free HTML & CSS Coding Project for Students: Build a Kindness Card

Posted by123codingwithmePosted inFree Coding ProjectsTags:, , ,

FREE 45-MINUTE LESSON • GRADES 6–10 • BEGINNER

Build a kindness card with real HTML and CSS

Students create a colorful digital card for someone who helped them, then personalize the message, colors, and animation. No coding experience, account, or special software is required.

Try the Kindness Wheel ↗
Start the lesson

Looking for a short HTML and CSS project for middle school or early high school? This activity gives students a finished result they can understand, customize, and share in one class period. Teachers can use it in a computer science class, coding club, advisory period, or independent-learning day.

Time35–45 minutes
LevelBeginner
SkillsHTML structure, CSS styling, testing
MaterialsComputer, browser, text editor
Final productA personalized digital kindness card

What students will build

A MESSAGE FOR YOU

You make our class brighter.

Thank you for helping people feel welcome and included.

♥

Learning objectives

  • Identify the purpose of common HTML elements such as main, h1, and p.
  • Connect an HTML file to an external CSS stylesheet.
  • Change color, spacing, type size, and layout with CSS.
  • Test a webpage and correct simple errors.
  • Use design choices to communicate a positive message.

Step 1: Create the HTML

Create a folder named kindness-card. Inside it, create a file named index.html. Copy this code into the file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Kindness Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="kindness-card">
    <p class="eyebrow">A MESSAGE FOR YOU</p>
    <h1>You make our class brighter.</h1>
    <p>Thank you for helping people feel welcome and included.</p>
    <span class="heart" aria-hidden="true">♥</span>
  </main>
</body>
</html>

Save the file and open it in a browser. The message will appear, but it will still look plain. CSS will add the visual design.

Step 2: Add the CSS

Create a second file in the same folder named style.css. Add this code:

* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef8f7;
  color: #17353b;
}
.kindness-card {
  width: min(100%, 620px);
  padding: 48px 36px;
  text-align: center;
  background: #fff4d8;
  border: 3px solid #17353b;
  border-radius: 24px;
  box-shadow: 10px 10px 0 #8fd3cd;
  transition: transform 200ms ease;
}
.kindness-card:hover {
  transform: translateY(-6px);
}
.eyebrow {
  color: #9a5d00;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
h1 {
  margin: 14px 0;
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.05;
}
.kindness-card > p:last-of-type {
  font-size: 1.15rem;
  line-height: 1.6;
}
.heart {
  display: block;
  margin-top: 22px;
  color: #e85d75;
  font-size: 2rem;
}

Save style.css, then refresh the browser. If the design does not appear, check that both files are in the same folder and that the stylesheet is named exactly style.css.

Step 3: Make it yours

Every student should change the starter project. Ask them to complete at least three challenges:

  1. Write a specific kindness message for a classmate, teacher, coach, or family member.
  2. Create a new three-color palette.
  3. Change the border, shadow, or corner shape.
  4. Replace the heart with another meaningful symbol.
  5. Adjust the hover movement without making the message difficult to read.

Teacher tip: require explanation, not just decoration

Ask students to explain one HTML choice and one CSS choice. This turns copying into learning and makes their work easier to assess.

A simple 45-minute lesson plan

  • 5 minutes: Show the finished card and discuss how design affects the feeling of a message.
  • 10 minutes: Build and review the HTML structure.
  • 10 minutes: Add the CSS and test the page.
  • 15 minutes: Students complete three customization challenges.
  • 5 minutes: Pair-share and complete the exit ticket.

Accessibility checklist

  • Keep strong contrast between the text and background.
  • Use a clear message instead of relying on color alone.
  • Keep the text large enough to read on a phone or Chromebook.
  • Use the lang and viewport settings included in the starter HTML.
  • Do not add fast flashing or distracting animation.

Exit ticket

What did HTML control? What did CSS control? Which design choice best supported your message, and why?

Continue learning

Review the HTML and CSS beginner lessons, explore more student coding projects, or use the Kindness Wheel to choose the message for your next card.

Create something useful with code

Start with one message, make three design decisions, and leave the web a little kinder than you found it.

Explore free coding lessons

One thought on “Free HTML & CSS Coding Project for Students: Build a Kindness Card”

  1. Pingback: Free JavaScript Mood Tracker Project for Students – 123 CODING WITH ME

Leave a comment