DEV Community

Cover image for 180 Days of Frontend Development Challenge Day 43 – Design a Landing Page from a Mockup
CodeWithDhanian
CodeWithDhanian

Posted on

180 Days of Frontend Development Challenge Day 43 – Design a Landing Page from a Mockup

#frontend #webdev #frontendchallenge

Objective

Today’s challenge is to transform a static mockup into a functional, responsive landing page. We’ll break the process into planning, structuring, styling, and refining — ensuring pixel-perfect accuracy and clean, maintainable code.

By the end, you’ll have a fully coded landing page that matches the design and works seamlessly on all screen sizes.

Step 1 – Understanding the Mockup

Before coding, study the mockup as if you’re an architect reading blueprints:

  1. Identify Sections:
  • Header & Navigation
  • Hero (Main Call-to-Action)
  • Features/Benefits
  • Testimonials/Social Proof
  • Pricing or Plans (if included)
  • Footer
  1. Extract Design Properties:
  • Fonts: Check font family, weight, and sizes.
  • Colors: Note hex codes for backgrounds, text, and buttons.
  • Spacing: Measure padding/margins between elements.
  • Images: Export all assets (logo, icons, product images).
  1. Tools You Might Use:
  • Figma/Adobe XD – Inspect elements & get exact CSS values.
  • Coolors.co – Store and preview your color palette.

Step 2 – Setting Up the Project

Folder Structure: 

landing-page/
│── index.html
│── style.css
│── script.js
└── assets/
    │── images/
    │── icons/
Enter fullscreen mode Exit fullscreen mode

Basic HTML Starter: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="style.css">
    <!-- Google Fonts Example -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>

    <!-- Header -->
    <header>
        <nav>
            <div class="logo">BrandName</div>
            <ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#pricing">Pricing</a></li>
                <li><a class="btn" href="#signup">Sign Up</a></li>
            </ul>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-text">
            <h1>Your Product’s Big Value Proposition</h1>
            <p>Describe in one sentence what makes your product special.</p>
            <a href="#signup" class="btn-primary">Get Started</a>
        </div>
        <div class="hero-image">
            <img src="assets/images/hero.png" alt="Product Mockup">
        </div>
    </section>

    <!-- Additional Sections Will Go Here -->

    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 3 – Applying Styles

Global Styles & Reset: 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* Utility Classes */
.btn {
    padding: 0.7em 1.5em;
    border: none;
    background: #333;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.btn-primary {
    background-color: #4CAF50;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 2em;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1em;
}

.nav-links a {
    text-decoration: none;
    color: #333;
}
Enter fullscreen mode Exit fullscreen mode

Hero Section Layout: 

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em;
}

.hero-text {
    max-width: 500px;
}

.hero-text h1 {
    font-size: 2.5rem;
    margin-bottom: 1em;
}

.hero-text p {
    margin-bottom: 1.5em;
    color: #666;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}
Enter fullscreen mode Exit fullscreen mode

Step 4 – Making It Responsive

We’ll adjust layout for tablets and mobile:

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    nav {
        flex-direction: column;
    }

    .nav-links {
        flex-direction: column;
        gap: 0.
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 5 – Adding More Sections

Example Features Section:

<section id="features" class="features">
    <div class="feature">
        <img src="assets/icons/fast.svg" alt="Fast">
        <h3>Fast Performance</h3>
        <p>Our product is optimized for blazing speed.</p>
    </div>
    <div class="feature">
        <img src="assets/icons/secure.svg" alt="Secure">
        <h3>Secure</h3>
        <p>Your data is protected with top-grade encryption.</p>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode

CSS:

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2em;
    padding: 2em;
    background-color: #f9f9f9;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Step 6 – Final Review Checklist

✔ Match fonts, colors, and spacing from the mockup.
✔ Test responsiveness on mobile, tablet, and desktop.
✔ Optimize images for faster load times.
✔ Validate HTML & CSS for clean code.

💡 Pro Tip:
If you want to master frontend development faster, my Frontend Development Ebook will guide you through real-world projects, best practices, and advanced techniques to make your pages stand out.

📖 Grab your copy → https://codewithdhanian.gumroad.com/l/sxpyzb
It will help you tackle any challenge like this with confidence.

Top comments (0)