🧠 Module 8

Colors, Fonts & Visual Design

Objective: Enhance visual appeal using color theory, typography, and core design principles to create clean, user-friendly pages.

🎨 1. Why Design Matters

Good design improves clarity, usability, and emotion. Great design uses consistent colors & type, strong hierarchy, and generous spacing.

Consistent colors and typography
Intentional spacing and hierarchy
Focus on readability

🧩 2. Adding Color with CSS

body {
  background-color: #f5f5f5;
  color: #333333;
}
h1 {
  color: #0E477B; /* StreetGeek blue */
}

Format	Example	Description
Name	`red`	Simple named colors
HEX	`#FF5733`	Common hex format
RGB	`rgb(255,87,51)`	Red, Green, Blue values
HSL	`hsl(12,100%,60%)`	Hue, Saturation, Lightness
Opacity	`rgba(255,87,51,.5)`	RGB + alpha transparency

🌈 3. Color Theory Basics

Primary Principles

Complementary: Opposites on the color wheel (blue/orange)
Analogous: Neighbors (blue/teal/green)
Monochromatic: Shades of one hue

Pro Tips

Use 1 primary, 1 secondary, 1 accent
Keep text contrast high for readability
Helpful tools: coolors.co (palettes), contrast-ratio.com (accessibility)

🧱 4. Typography (Fonts & Readability)

body {
  font-family: 'Roboto', sans-serif;
}

Type	Examples	Best For
Serif	Times New Roman, Georgia	Traditional, formal
Sans-serif	Arial, Roboto, Open Sans	Modern, clean
Monospace	Courier, Consolas	Code samples
Cursive/Display	Pacifico, Lobster	Decorative headings

Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
/* then */
body { font-family: 'Poppins', sans-serif; }

✍️ 5. Font Styling Properties

Property	Description	Example
`font-size`	Controls text size	`font-size:16px;`
`font-weight`	Text thickness	`font-weight:700;`
`line-height`	Vertical spacing	`line-height:1.6;`
`letter-spacing`	Space between letters	`letter-spacing:1px;`
`text-transform`	Upper/lowercase	`text-transform:uppercase;`
`text-align`	Horizontal alignment	`text-align:center;`

Example

h1{
  font-size:2.5rem;
  font-weight:700;
  letter-spacing:1px;
  text-align:center;
}

💡 6. Using Visual Hierarchy

Headings should stand out
Scale size for importance
Use color/weight sparingly
Group related items with spacing

h1 { font-size:36px; color:#0E477B; }
h2 { font-size:28px; color:#333; }
p  { font-size:16px; line-height:1.6; }

🖼️ 7. Backgrounds, Gradients & Images

Solid

section { background-color:#e6f0ff; }

Gradient

section { background:linear-gradient(135deg,#0E477B,#6EC1E4); }

Image

section.hero{
  background-image:url('images/banner.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}

🔲 8. Box Shadows and Borders

.card{
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  background:#fff;
  padding:20px;
}

Keep shadows soft and subtle — heavy shadows feel dated.

💻 9. Hands-On Practice

✅ Exercise: Style a “Landing Page Hero Section”

<section class="hero">
  <h1>Welcome to StreetGeek Academy</h1>
  <p>Learn to build and design websites from scratch.</p>
  <a href="#" class="btn">Get Started</a>
</section>

/* CSS */
.hero{
  background:linear-gradient(120deg,#0E477B,#6EC1E4);
  color:#fff; text-align:center;
  padding:100px 20px; border-radius:16px;
}
.btn{
  background:#fff; color:#0E477B;
  padding:10px 20px; border-radius:6px; text-decoration:none; font-weight:700;
}
.btn:hover{ background:#FFB71B; color:#fff; }

Welcome to StreetGeek Academy

Learn to build and design websites from scratch.

Get Started

🧠 10. Quiz Time

What CSS property changes the background color?
How do you link a Google Font to your website?
What’s the difference between font-family and font-weight?
What does rgba() allow that rgb() does not?
Why is color contrast important for accessibility?

🚀 Challenge Task

Design a “Course Promo Section” with:

Gradient background
Heading, paragraph, and button
Custom Google Font
Rounded corners + shadow on button
Centered, legible text
Bonus: Animated hover effect

.promo{
  background:linear-gradient(135deg,#0E477B,#6EC1E4);
  color:#fff; padding:48px 24px; text-align:center; border-radius:16px;
}
.promo .btn{
  background:#fff; color:#0E477B; border-radius:10px; padding:12px 22px; text-decoration:none; font-weight:800;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.promo .btn:hover{
  background:#FFB71B; color:#fff; transform:scale(1.05);
}

🏁 Module 8 Summary

How to use colors effectively
How to import and style fonts
Establishing visual hierarchy
Using gradients, shadows, and borders
Building clean, professional designs

Next up: 👉 MODULE 9: Responsive Web Design — make your site adapt beautifully to any device.