health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
Objective: Enhance visual appeal using color theory, typography, and core design principles to create clean, user-friendly pages.
Good design improves clarity, usability, and emotion. Great design uses consistent colors & type, strong hierarchy, and generous spacing.
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 |
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 |
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
/* then */
body { font-family: 'Poppins', sans-serif; }| 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; |
h1{
font-size:2.5rem;
font-weight:700;
letter-spacing:1px;
text-align:center;
}h1 { font-size:36px; color:#0E477B; }
h2 { font-size:28px; color:#333; }
p { font-size:16px; line-height:1.6; }section { background-color:#e6f0ff; }section { background:linear-gradient(135deg,#0E477B,#6EC1E4); }section.hero{
background-image:url('images/banner.jpg');
background-size:cover;
background-position:center;
color:#fff;
}.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.
✅ 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; }font-family and font-weight?rgba() allow that rgb() does not?Design a “Course Promo Section” with:
.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);
}Next up: 👉 MODULE 9: Responsive Web Design — make your site adapt beautifully to any device.