# Building My First Responsive Landing Page with HTML & CSS

Today marks my **30th day** of the #100DaysOfCode challenge—a milestone I'm really proud of.

Instead of learning a new CSS concept, I challenged myself to build my **first complete Responsive Landing Page** using everything I've learned over the past month.

This project wasn't just about writing HTML and CSS—it was about applying those concepts together to create a real-world webpage.

* * *

# What is a Landing Page?

A landing page is a standalone webpage designed to introduce a product, service, portfolio, or idea.

Its purpose is to grab attention, present information clearly, and encourage visitors to take action.

Most modern websites begin with a well-designed landing page.

* * *

# Features I Built

My landing page includes:

*   🏠 Hero Section
    
*   🧭 Responsive Navigation Bar
    
*   ✨ Call-to-Action Button
    
*   👨 About Section
    
*   💡 Features Section
    
*   📞 Contact Section
    
*   📄 Footer
    

Everything was built using only **HTML** and **CSS**.

* * *

# Concepts I Applied

This project allowed me to revise almost everything I learned during the HTML and CSS modules.

### HTML

*   Semantic HTML
    
*   Forms
    
*   Images
    
*   Links
    
*   Lists
    
*   Meta Tags
    
*   Accessibility
    

### CSS

*   Selectors
    
*   Colors
    
*   Units
    
*   Backgrounds
    
*   Box Model
    
*   Display & Positioning
    
*   Flexbox
    
*   CSS Grid
    
*   Media Queries
    
*   Transitions & Animations
    

Seeing all these concepts work together made the project feel much more rewarding.

* * *

# Making It Responsive

One of my biggest goals was ensuring the website looked good on different screen sizes.

To achieve this, I used:

*   Flexbox for navigation and content alignment
    
*   CSS Grid for layout sections
    
*   Media Queries for smaller screens
    
*   Relative units like `%`, `rem`, and `fr`
    
*   Responsive images
    

The result was a layout that adapts smoothly across mobile, tablet, and desktop devices.

* * *

# Challenges I Faced

Like every project, this one came with its own learning moments.

Some of the challenges included:

*   Organizing the layout structure
    
*   Making sections responsive
    
*   Aligning elements consistently
    
*   Choosing proper spacing
    
*   Keeping the CSS clean and reusable
    

Solving these issues helped me understand that real learning happens while building projects.

* * *

# What I Learned

Over the last 30 days, I learned much more than HTML tags and CSS properties.

I learned how to think about webpage structure, responsive layouts, accessibility, and user experience.

Building this landing page made me realize that web development is about solving problems—not just writing code.

* * *

# My Biggest Takeaway

Thirty days ago, I was learning basic HTML tags.

Today, I've built a complete responsive landing page using modern HTML and CSS.

There's still a long journey ahead, but looking back at Day 1 reminds me how much consistent practice can improve your skills.

This project is a small milestone, but it's proof that learning one concept every day truly adds up.