← Back to the Build Your Homepage series

🚀

EPISODE 02

Selectors, colors, layout — all the way to responsive

Make Your Homepage Beautiful with CSS

Transform the plain homepage from Lesson 1 into something you would actually want to share. Learn selectors, color, the box model, Flexbox, and responsive design — enough CSS to make any site look intentional.

CSSSelectorsFlexboxResponsiveBox Model

Duration

⏱ About 3 hours

Level

📊 Beginner (after Lesson 1)

Prerequisite

🎯 Lesson 1 (HTML + GitHub + Vercel)

OUTCOME

A styled, responsive homepage with a real visual hierarchy

What you'll learn

1Connect CSS to HTML using external stylesheets
2Style elements with the right selectors and rules
3Use the box model (padding, margin, border) correctly
4Build flexible layouts with Flexbox
5Adapt the site for phones with media queries

Lesson Flow at a Glance

Time	Step	What you learn
0:00 – 0:15	1. What is CSS?	How a stylesheet talks to HTML
0:15 – 0:45	2. Selectors & properties	How to target the right thing
0:45 – 1:15	3. Color and typography	Make text look intentional
1:15 – 1:45	4. Box model	Spacing without surprises
1:45 – 2:15	5. Flexbox layout	Real layouts, finally
2:15 – 2:45	6. Responsive design	Looks good on phones too
2:45 – 3:00	7. Deploy and wrap-up	Push and admire

1. What is CSS?

CSS (Cascading Style Sheets) controls how HTML looks. HTML says "this is a heading"; CSS says "this heading is blue, 32px, and centered".

Three ways to apply CSS

Method	Example	When
Inline	<h1 style="color:blue">	Quick demos only
Internal	<style>...</style> in <head>	Single small page
External	<link rel="stylesheet" href="style.css">	Real projects (recommended)

We use external CSS — code stays organized and one stylesheet can style many pages.

2. Selectors & Properties

The basic shape

css

selector {
  property: value;
  property: value;
}

h1 {
  color: #2563eb;
  font-size: 32px;
  text-align: center;
}

Common selectors

Selector	Targets
h1, p	All matching tags
.highlight	Elements with class="highlight"
#hero	The element with id="hero" (only one per page)
a:hover	Links being hovered
ul > li	Direct <li> children of <ul>

💡

Reach for classes by default. IDs are for unique elements; tag selectors are too broad.

3. Color & Typography

Color values

css

h1 { color: red; }              /* keyword */
h2 { color: #ff5733; }          /* hex */
p  { color: rgb(255, 87, 51); } /* rgb */
footer { color: rgba(0, 0, 0, 0.5); } /* with alpha */

Web fonts

Use Google Fonts for quality typography in seconds.

html

<!-- in <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

css

body { font-family: "Inter", system-ui, sans-serif; line-height: 1.6; }

4. The Box Model

Every element is a box made of four layers: content, padding, border, margin.

text

┌─ margin ───────────────────────────────┐
│  ┌─ border ──────────────────────────┐ │
│  │  ┌─ padding ──────────────────┐  │ │
│  │  │       content              │  │ │
│  │  └────────────────────────────┘  │ │
│  └──────────────────────────────────┘ │
└────────────────────────────────────────┘

css

* { box-sizing: border-box; }  /* always start with this */

.card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin: 16px 0;
}

⚠️

Without box-sizing: border-box, adding padding makes elements bigger than expected. This one line saves hours.

5. Flexbox

Flexbox makes laying things out a 1-D problem (a row or a column) and solves it elegantly.

css

.navbar {
  display: flex;
  justify-content: space-between;  /* main axis */
  align-items: center;             /* cross axis */
  gap: 16px;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card-grid > .card {
  flex: 1 1 280px;   /* grow, shrink, min-width */
}

Key Flexbox properties

Property	Effect
display: flex	Turn the container into a flex container
flex-direction	row (default) or column
justify-content	Main-axis alignment
align-items	Cross-axis alignment
gap	Space between children (no margins needed)

6. Responsive Design

Make a single layout adapt to phones, tablets, and desktops with media queries.

css

/* Mobile first */
.container { padding: 16px; }

@media (min-width: 768px) {
  .container { padding: 32px; max-width: 720px; margin: 0 auto; }
}

@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

💡

Always include <meta name="viewport" content="width=device-width, initial-scale=1"> in your HTML head, or media queries do not work on mobile.

7. Deploy and Wrap-up

Save style.css next to index.html
Add <link rel="stylesheet" href="style.css"> in <head>
Commit both files on GitHub
Vercel auto-deploys in ~30 seconds

What is next

Next lesson, you stop uploading files through the GitHub web UI and start working like a developer — with git in your terminal.

🛠 Mini Projects

Style your homepage with a clear hero section, a card grid of projects, and a footer