Project 2: Simple School Club Landing Page0%

Project 3: Modern Responsive Navigation Bar & Dropdown

Project 2: Simple School Club Landing Page

Beginner12 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Project 2: Simple School Club Landing Page

In Project 1, we built an individual component: a student profile card. 📱

Now, we are taking the next leap: building an entire Full-Page Website Layout!

In this project, you will design and code a complete School Coding & Robotics Club Landing Page featuring:

1
A clean brand header with navigational links
2
An eye-catching Hero Banner with primary and secondary call-to-action buttons
3
An urgent announcement alert strip with an accent border
4
A 3-Column Feature Cards Section powered by Flexbox
5
A dark, modern website footer

Page Architecture & Wireframe 📐

Here is the blueprint of our landing page:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
| [HEADER & NAVBAR]                                                       |
| Logo: DPS Coding Club                 Links: [ About ] [ Projects ] [ Join ]
+-------------------------------------------------------------------------+
| [HERO SECTION (Navy Gradient)]                                          |
|                                                                         |
|            Ignite Your Passion for Code & Robotics 🤖                   |
|      Learn Python, build smart Arduino robots, and compete              |
|              in national inter-school hackathons!                       |
|                                                                         |
|           [ Join the Club (CTA) ]     [ View Projects ]                 |
+-------------------------------------------------------------------------+
| [ALERT STRIP: Upcoming Hackathon Announcement (Left Accent Border)]     |
+-------------------------------------------------------------------------+
| [3-COLUMN FEATURE CARDS (Flexbox with Gap)]                             |
| +---------------------+  +---------------------+  +-------------------+ |
| | 🐍 Python & Web     |  | 🤖 Robotics & IoT   |  | 🏆 Olympiads      | |
| | Learn HTML5 & CSS3  |  | Sensors & Circuits  |  | Win State Trophies| |
| +---------------------+  +---------------------+  +-------------------+ |
+-------------------------------------------------------------------------+
| [FOOTER: Copyright & Social Links]                                      |
+-------------------------------------------------------------------------+

Key CSS Concepts Applied

1
The Container Pattern:

 .container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 20px;
 }

This prevents content from stretching awkwardly to the extreme edges on wide desktop monitors!

1
Hero Section Styling: Deep linear gradient (linear-gradient(135deg, #0f172a, #1e3a8a)), white contrasting text, and spacious vertical padding.
2
Accent Left Border Alert: border-left: 6px solid #2563eb; with a soft tinted background.
3
Flexbox 3-Card Grid: display: flex; gap: 24px; with flex: 1; so all 3 cards match heights and share width equally.
4
Interactive Card Hover: Smooth lift with transform: translateY(-5px); and elevation shadow.

Complete Project Code

Create a file named school-club-landing-page.html in your editor and paste the following complete code:

Architecture Breakdown: What Makes It Professional?

1
The Container Pattern: Notice how .container is reused inside the header, hero, alert strip, features, and footer. It enforces consistent alignment across the entire page.
2
The Floating Alert Box: Setting margin-top: -25px; and position: relative; z-index: 10; pulls the white alert strip partially over the bottom of the navy hero banner, giving depth and layering!
3
Flexbox 3-Card Grid: .features-grid { display: flex; gap: 24px; } guarantees equal gutters between the cards without requiring fragile column percentages or floats.

⚠️ Beginner Project Production Best Practices

1
Avoid Rigid Pixel Heights: Let containers grow organically with their content using padding rather than hardcoding height: 400px.
2
Add Smooth Transitions to Hover States: Always include transition: all 0.2s ease; on interactive buttons and cards to avoid jarring visual jumps.
3
Keep Accessible Contrast: Ensure text colors maintain a high contrast ratio against backgrounds (minimum 4.5:1 for standard body text).

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What is the main purpose of the .container { max-width: 1100px; margin: 0 auto; } pattern?

Question 2

How is the announcement alert box given a stylish colored stripe on its left side?

Question 3

Which Flexbox property and value applied to .features-grid creates equal 24px spaces between the three feature cards?

Question 4

What CSS technique pulls the alert box upward so that it partially overlaps the bottom edge of the hero banner?

Question 5

Why do all three feature cards have equal height in this layout?

Practice Challenge (Try It Yourself)

1
Open school-club-landing-page.html in your browser and resize the window to see how it responds.
2
Customize the hero heading and subtitle for your own school or sports club.
3
Add a fourth card to the .features-grid (for example, "Game Design & Unity") and observe how Flexbox automatically adapts the layout! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Project 3: Modern Responsive Navigation Bar & Dropdown (Beginner Projects).

👉 Continue to Next Lesson: Project 3: Modern Responsive Navigation Bar & Dropdown →

Next Lesson

Project 3: Modern Responsive Navigation Bar & Dropdown

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Project 1: Styled Student Profile & ID Card	Project 3: Modern Responsive Navigation Bar & Dropdown

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Project 3: Modern Responsive Navigation Bar & Dropdown

Project 2: Simple School Club Landing Page

Beginner12 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Project 2: Simple School Club Landing Page

In Project 1, we built an individual component: a student profile card. 📱

Now, we are taking the next leap: building an entire Full-Page Website Layout!

In this project, you will design and code a complete School Coding & Robotics Club Landing Page featuring:

1
A clean brand header with navigational links
2
An eye-catching Hero Banner with primary and secondary call-to-action buttons
3
An urgent announcement alert strip with an accent border
4
A 3-Column Feature Cards Section powered by Flexbox
5
A dark, modern website footer

Page Architecture & Wireframe 📐

Here is the blueprint of our landing page:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
| [HEADER & NAVBAR]                                                       |
| Logo: DPS Coding Club                 Links: [ About ] [ Projects ] [ Join ]
+-------------------------------------------------------------------------+
| [HERO SECTION (Navy Gradient)]                                          |
|                                                                         |
|            Ignite Your Passion for Code & Robotics 🤖                   |
|      Learn Python, build smart Arduino robots, and compete              |
|              in national inter-school hackathons!                       |
|                                                                         |
|           [ Join the Club (CTA) ]     [ View Projects ]                 |
+-------------------------------------------------------------------------+
| [ALERT STRIP: Upcoming Hackathon Announcement (Left Accent Border)]     |
+-------------------------------------------------------------------------+
| [3-COLUMN FEATURE CARDS (Flexbox with Gap)]                             |
| +---------------------+  +---------------------+  +-------------------+ |
| | 🐍 Python & Web     |  | 🤖 Robotics & IoT   |  | 🏆 Olympiads      | |
| | Learn HTML5 & CSS3  |  | Sensors & Circuits  |  | Win State Trophies| |
| +---------------------+  +---------------------+  +-------------------+ |
+-------------------------------------------------------------------------+
| [FOOTER: Copyright & Social Links]                                      |
+-------------------------------------------------------------------------+

Key CSS Concepts Applied

1
The Container Pattern:

 .container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 20px;
 }

This prevents content from stretching awkwardly to the extreme edges on wide desktop monitors!

1
Hero Section Styling: Deep linear gradient (linear-gradient(135deg, #0f172a, #1e3a8a)), white contrasting text, and spacious vertical padding.
2
Accent Left Border Alert: border-left: 6px solid #2563eb; with a soft tinted background.
3
Flexbox 3-Card Grid: display: flex; gap: 24px; with flex: 1; so all 3 cards match heights and share width equally.
4
Interactive Card Hover: Smooth lift with transform: translateY(-5px); and elevation shadow.

Complete Project Code

Create a file named school-club-landing-page.html in your editor and paste the following complete code:

Architecture Breakdown: What Makes It Professional?

1
The Container Pattern: Notice how .container is reused inside the header, hero, alert strip, features, and footer. It enforces consistent alignment across the entire page.
2
The Floating Alert Box: Setting margin-top: -25px; and position: relative; z-index: 10; pulls the white alert strip partially over the bottom of the navy hero banner, giving depth and layering!
3
Flexbox 3-Card Grid: .features-grid { display: flex; gap: 24px; } guarantees equal gutters between the cards without requiring fragile column percentages or floats.

⚠️ Beginner Project Production Best Practices

1
Avoid Rigid Pixel Heights: Let containers grow organically with their content using padding rather than hardcoding height: 400px.
2
Add Smooth Transitions to Hover States: Always include transition: all 0.2s ease; on interactive buttons and cards to avoid jarring visual jumps.
3
Keep Accessible Contrast: Ensure text colors maintain a high contrast ratio against backgrounds (minimum 4.5:1 for standard body text).

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What is the main purpose of the .container { max-width: 1100px; margin: 0 auto; } pattern?

Question 2

How is the announcement alert box given a stylish colored stripe on its left side?

Question 3

Which Flexbox property and value applied to .features-grid creates equal 24px spaces between the three feature cards?

Question 4

What CSS technique pulls the alert box upward so that it partially overlaps the bottom edge of the hero banner?

Question 5

Why do all three feature cards have equal height in this layout?

Practice Challenge (Try It Yourself)

1
Open school-club-landing-page.html in your browser and resize the window to see how it responds.
2
Customize the hero heading and subtitle for your own school or sports club.
3
Add a fourth card to the .features-grid (for example, "Game Design & Unity") and observe how Flexbox automatically adapts the layout! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Project 3: Modern Responsive Navigation Bar & Dropdown (Beginner Projects).

👉 Continue to Next Lesson: Project 3: Modern Responsive Navigation Bar & Dropdown →

Next Lesson

Project 3: Modern Responsive Navigation Bar & Dropdown

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Project 1: Styled Student Profile & ID Card	Project 3: Modern Responsive Navigation Bar & Dropdown

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next