Week 3: CSS and Commercial Page Design

This week in plain English

ObjectiveUse CSS to make a plain business site look polished and professional.

Why this mattersCommercial websites must look trustworthy. CSS controls the visual impression.

What she will makeA styled landing page for a pretend product or service.

What “done” looks likeThe page has colours, spacing, cards, buttons and a professional layout.

At the end, she should be able to say:
“CSS changes how a website looks. It can make a basic page feel like a real business page.”

Fortnight project: Commercial Project 2 starts: One-Page Sales Landing Page.

Skills: CSS, visual design, buttons, cards, landing page layout, ChatGPT design prompts

Suggested session structure: 10 minutes objective, 10 minutes ChatGPT planning, 25 minutes building, 10 minutes testing, 5 minutes recap.

Commercial objective for Weeks 3–4

Two-week commercial outcome: Build a one-page landing page that could sell or promote a simple offer, such as a kids safety kit, tutoring session, pet sitting offer or lemonade stand kit.

Step-by-step

Create a new folder called landing-page-project.
Create index.html.
Create assets/style.css.
Choose a pretend offer.
Ask ChatGPT for landing page section ideas.
Create hero, benefits and call-to-action sections.
Add CSS for buttons, cards, backgrounds and spacing.
Open on desktop and phone size.

ChatGPT prompt for planning

Prompt:
I am building a one-page landing page for a pretend kids safety kit. Please suggest the sections I need on the page. Keep it beginner-friendly. Include hero, benefits, what is included, testimonials, FAQ and call-to-action.

Landing page HTML skeleton

<header class="hero">
  <h1>Kids Safety Starter Kit</h1>
  <p>A simple kit that helps kids learn basic home and personal safety.</p>
  <a class="button" href="#included">See what is included</a>
</header>

<main>
  <section class="section">
    <h2>Why families like it</h2>
    <div class="card-grid">
      <article class="card">
        <h3>Easy to understand</h3>
        <p>Simple activities for kids.</p>
      </article>
      <article class="card">
        <h3>Practical</h3>
        <p>Useful items and checklists.</p>
      </article>
      <article class="card">
        <h3>Fun</h3>
        <p>Worksheets, stickers and challenges.</p>
      </article>
    </div>
  </section>
</main>

CSS starter

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #1f2937;
  background: #f8fbff;
}

.hero {
  background: linear-gradient(135deg, #e8f1ff, #e7fff5);
  padding: 50px 24px;
  text-align: center;
}

.button {
  display: inline-block;
  background: #2563eb;
  color: white;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
}

.section {
  max-width: 1000px;
  margin: auto;
  padding: 32px 24px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card {
  background: white;
  border: 1px solid #d9e2ec;
  border-radius: 16px;
  padding: 20px;
}

@media (max-width: 800px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

End of week check

The page looks better than plain HTML.
There is a clear offer.
There is a button.
There are benefit cards.
The layout works on mobile.