Topic 15 of 48 · Full Stack Essentials

Recreate Task (External CSS)

Lesson TL;DRTopic 7: Recreate Task (External CSS) 📖 11 min read · 🎯 intermediate · 🧭 Prerequisites: calculatelogicaloperationtableprint, javascriptcookies Why this matters Up until now, you've been practising ...
11 min read·intermediate·external-css · html-structure · flexbox · css-grid

Topic 7: Recreate Task (External CSS)

📖 11 min read · 🎯 intermediate · 🧭 Prerequisites: calculate-logical-operation-table-print, javascript-cookies

Why this matters

Up until now, you've been practising individual CSS properties — a colour here, a margin there. But when someone hands you a real screenshot and says "build this," it's a different feeling. Suddenly you have to look at a full layout — a navbar, a hero section, a sidebar, a footer — and figure out where to even start. That's exactly what this lesson is about. We're going to recreate a complete page design using an external stylesheet, so your CSS lives in its own file, stays organised, and is ready for any real project.

What You'll Learn

  • How to analyze a visual design and break it into HTML structure
  • How to set up and link an external CSS file to an HTML document
  • How to use Flexbox or CSS Grid to match a page layout
  • How to apply typography, color schemes, and spacing that mirror a reference design
  • How to add media queries for responsive behavior across device sizes

The Analogy

Think of a home architect receiving a hand-drawn blueprint from their client. Before pouring a single drop of concrete, they study every room, every window, every corridor — noting proportions, materials, and flow. Only then do they order the lumber and lay the foundation. Recreating a webpage from a screenshot works exactly the same way: you are the architect, the screenshot is the blueprint, your HTML is the framing, and your external CSS file is the finishing — the paint, trim, and fixtures that make the structure match the vision. Rushing straight to the keyboard without that study phase is like pouring concrete before reading the plans.

Chapter 1: Why Recreate a Design?

Recreating an existing design is one of the highest-leverage exercises in a web developer's toolkit. It is about more than copying a look — it trains three interconnected skills simultaneously:

  1. Translation — converting visual language (spacing, hierarchy, weight) into code properties
  2. Attention to detail — noticing that a heading is font-size: 2rem not 1.8rem, or that a button's padding is 12px 24px not 10px 20px
  3. Stylesheet discipline — keeping styles in an external CSS file makes them reusable across pages and separates concerns cleanly

The deliverable for this task is a fully responsive homepage built with HTML and external CSS that matches a given screenshot as closely as possible.

Chapter 2: Preparation — Analyze Before You Code

Before writing a single line of HTML, spend time studying the screenshot. Work through this checklist:

  • Layout zones — How many major regions are there? (header, hero, content columns, sidebar, footer?)
  • Colors — Note hex codes where visible; approximate the rest. Is the background white #ffffff or off-white #f5f5f5?
  • Typography — What font families are used? What are approximate sizes for headings, body text, captions?
  • Spacing — Are sections padded or do they bleed edge-to-edge? Is there a visible margin between columns?
  • Interactive elements — Are there buttons, links, hover states visible in the design?

Answering these questions on paper (or in a comment block) before touching your editor saves hours of rework.

Chapter 3: Setting Up Your Files

Every recreate task starts with two files and one <link> tag.

File structure:

project/
├── index.html
└── styles.css

index.html boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Recreate Task</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- Your HTML goes here -->
</body>
</html>

The <link rel="stylesheet" href="styles.css" /> line is what makes this external CSS. Styles written directly inside a <style> tag are internal; styles on a style="" attribute are inline. External CSS wins for maintainability because one file controls the look of the entire site.

Chapter 4: Building the HTML Structure

Map every visual zone of the screenshot to a semantic HTML element. A typical homepage breaks down like this:

<header>
  <nav>
    <a href="#">Logo</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="hero">
    <h1>Welcome to Our Site</h1>
    <p>A short tagline goes here.</p>
    <a href="#" class="btn">Get Started</a>
  </section>

  <div class="content-wrapper">
    <article class="main-content">
      <h2>Featured Article</h2>
      <p>Article body text goes here.</p>
    </article>

    <aside class="sidebar">
      <h3>Quick Links</h3>
      <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
      </ul>
    </aside>
  </div>
</main>

<footer>
  <p>&copy; 2024 Recreate Task. All rights reserved.</p>
</footer>

Use <header>, <nav>, <main>, <article>, <aside>, and <footer> — these semantic elements communicate meaning to browsers, screen readers, and search engines, not just visual structure.

Chapter 5: Writing the CSS — Layout First

Once the HTML skeleton is solid, open styles.css and style from the top of the page downward. Always resolve layout before decorating with colors and fonts.

Global resets and base styles:

body {
  font-family: Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
}

header,
nav,
main,
footer {
  padding: 20px;
  text-align: center;
}

Navigation bar with Flexbox:

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1a1a2e;
  padding: 16px 40px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

Hero section:

.hero {
  background-color: #16213e;
  color: #ffffff;
  padding: 80px 40px;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 32px;
}

.btn {
  display: inline-block;
  background-color: #e94560;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #c73652;
}

Two-column layout (article + sidebar) with CSS Grid:

.content-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.main-content {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sidebar {
  background-color: #f0f0f0;
  padding: 24px;
  border-radius: 8px;
}

Footer:

footer {
  background-color: #1a1a2e;
  color: #aaaaaa;
  text-align: center;
  padding: 24px;
  font-size: 0.9rem;
}

Chapter 6: Typography

Font choices, sizes, and alignment are among the first things a user notices. Match them carefully.

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 1.8rem;
  font-weight: 600;
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
}

p {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
}

If the reference design uses a Google Font (e.g., Roboto or Lato), add the import at the very top of styles.css:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap');

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

Chapter 7: Color Scheme

Use exact hex codes wherever possible. Build a small variable block at the top of styles.css using CSS custom properties so colors stay consistent and easy to tweak:

:root {
  --color-primary: #1a1a2e;
  --color-accent:  #e94560;
  --color-text:    #333333;
  --color-muted:   #aaaaaa;
  --color-bg:      #ffffff;
  --color-surface: #f0f0f0;
}

Then reference them throughout:

header {
  background-color: var(--color-primary);
}

.btn {
  background-color: var(--color-accent);
}

This approach mirrors professional design systems and makes color updates instantaneous.

Chapter 8: Responsiveness with Media Queries

A desktop layout that breaks on mobile is an incomplete recreation. Add media queries after your base styles:

@media (max-width: 768px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }

  nav {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 48px 20px;
  }

  .content-wrapper {
    padding: 20px;
  }
}

The breakpoint at 768px is the standard tablet threshold; 480px catches small phones. Always test by resizing the browser window, not just by guessing.

Chapter 9: Putting It Together — The Full Workflow

Here is the recommended sequence to complete any recreate task:

flowchart TD
    A[Study the screenshot] --> B[Annotate layout zones, colors, fonts]
    B --> C[Create index.html + styles.css]
    C --> D[Write semantic HTML structure]
    D --> E[Add global resets and base styles]
    E --> F[Build layout with Flexbox / Grid]
    F --> G[Style typography and color scheme]
    G --> H[Add interactive states — hover, focus]
    H --> I[Test responsiveness with media queries]
    I --> J[Compare side-by-side with screenshot]
    J --> K{Close enough?}
    K -- No --> G
    K -- Yes --> L[Done]

The loop between J and G is normal — professional developers iterate multiple times before declaring a recreation complete.

🧪 Try It Yourself

Task: Build the two-column homepage layout described in this lesson from scratch.

Steps:

  1. Create index.html and styles.css in a new folder.
  2. Paste the HTML structure from Chapter 4.
  3. Add all CSS rules from Chapters 5–8 into styles.css.
  4. Open index.html in your browser.

Success criteria:

  • The navigation bar spans the full width with logo on the left and links on the right.
  • The hero section has a dark background with centered white text and a red button.
  • Below the hero, the page shows a two-column grid: wide article on the left, narrow sidebar on the right.
  • When you resize the browser below 768px, both columns stack vertically.

Starter snippet (styles.css top section):

:root {
  --color-primary: #1a1a2e;
  --color-accent:  #e94560;
  --color-text:    #333333;
  --color-bg:      #ffffff;
  --color-surface: #f0f0f0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  color: var(--color-text);
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
}

🔍 Checkpoint Quiz

Q1. What is the primary advantage of using an external CSS file over writing styles inside a <style> tag in the HTML?

A) External CSS loads faster on first visit
B) Styles in an external file can be shared across multiple pages without repetition
C) External CSS supports more properties than internal CSS
D) Browsers only apply external CSS when JavaScript is disabled

Q2. Given this CSS, what will happen when a user hovers over .btn?

.btn {
  background-color: #e94560;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #c73652;
}

A) The button disappears for 0.3 seconds then reappears
B) The background color changes instantly from #e94560 to #c73652
C) The background color smoothly transitions from #e94560 to #c73652 over 0.3 seconds
D) The button gains a 0.3px border

Q3. You want a layout with a main content area taking two-thirds of the width and a sidebar taking one-third. Which CSS Grid declaration produces this?

A) grid-template-columns: 1fr 2fr;
B) grid-template-columns: 2fr 1fr;
C) grid-template-columns: 66% 34%;
D) Both B and C are valid approaches

Q4. A student's homepage looks perfect on a 1440px monitor but the navigation links overflow off-screen on a 375px phone. What is the most appropriate fix?

A) Add overflow: hidden to the nav element
B) Write a @media (max-width: 480px) rule that switches the nav to flex-direction: column
C) Set font-size: 0.1px on the nav links so they fit
D) Remove the nav links on mobile using display: none

A1. B — An external stylesheet is linked once but applies to every page that includes the <link> tag, eliminating duplicated style blocks and making site-wide updates a single-file change.

A2. C — The transition: background-color 0.3s ease declaration instructs the browser to animate the property change over 300 milliseconds with an ease timing function instead of switching it instantly.

A3. D — grid-template-columns: 2fr 1fr uses fractional units (2 parts + 1 part = 3 parts total, so 66.6% and 33.3%), while 66% 34% achieves almost the same split with explicit percentages. Both are valid; fr units are generally preferred because they adapt more cleanly with gap.

A4. B — A media query targeting narrow viewports that switches flex-direction to column is the standard responsive pattern. It stacks the links vertically so they remain accessible without breaking the layout. Hiding them entirely (D) is only appropriate when a hamburger menu is provided as a replacement.

🪞 Recap

  • Recreating a design trains translation, attention to detail, and stylesheet discipline simultaneously.
  • Always analyze the screenshot for layout zones, colors, typography, and spacing before writing any code.
  • Link an external CSS file with <link rel="stylesheet" href="styles.css" /> in the <head>.
  • Use semantic HTML elements (<header>, <nav>, <main>, <article>, <aside>, <footer>) to give your structure meaning.
  • Build layout with Flexbox or CSS Grid first, then layer in typography, color, and interactive states.
  • Add @media queries at the end to ensure the layout works at tablet (768px) and mobile (480px) breakpoints.

📚 Further Reading

Like this topic? It’s one of 48 in Full Stack Essentials.

Block your seat for ₹2,500 and join the next cohort.

Course detailsBlock your seat →