Topic 15 of 26 · UI Designer

Topic 7 : Recreate Task (External CSS)

Lesson TL;DRTopic 7: Recreate Task (External CSS) 📖 5 min read · 🎯 advanced · 🧭 Prerequisites: javascriptvalidation, javascriptcookies Why this matters Here's the thing — knowing CSS syntax is one skill, but b...
5 min read·advanced·external-css · html-structure · layout · flexbox

Topic 7: Recreate Task (External CSS)

📖 5 min read · 🎯 advanced · 🧭 Prerequisites: javascript-validation, javascript-cookies

Why this matters

Here's the thing — knowing CSS syntax is one skill, but being able to look at a finished design and rebuild it from scratch is a completely different muscle. That's what real UI work feels like. A designer hands you a screenshot, a mockup, or a reference page, and your job is to match it — the spacing, the colors, the layout — using clean HTML and an external CSS file. This lesson is your first real test of that skill. No hints, no starter styles. Just you, a reference design, and what you've learned so far.

What You'll Learn

  • How to analyze a visual design before writing a single line of code
  • How to set up an HTML file correctly linked to an external CSS stylesheet
  • How to build a semantic HTML skeleton using <header>, <nav>, <main>, <aside>, and <footer>
  • How to apply Flexbox or Grid, typography, color schemes, and media queries to match a target design

The Analogy

Think of a recreation task like a skilled tradesperson studying a master blueprint before cutting a single piece of wood. The blueprint doesn't tell you how to hold the saw — it tells you exactly where every beam must land. You read the blueprint first: you note the proportions, the materials, the spacing. Only then do you pick up your tools. Rushing into the lumber without reading the plans produces a house that almost looks right but leans to one side. The same is true of recreating a design — analysis before code is what separates a professional build from a lucky guess.

Chapter 1: Why Recreate a Design?

This task is about more than copying a look. It trains three critical skills simultaneously:

  • Translation — converting visual design elements into the precise CSS properties that produce them
  • Attention to detail — noticing that a heading is 1.5rem, not 1rem, or that a gap is 24px, not 20px
  • Style management — learning to use an external CSS file so that one stylesheet governs an entire site, rather than scattering inline styles across dozens of elements

Designers hand developers screenshots, Figma files, and mockups every day. Being able to close the gap between what a designer drew and what a browser renders is a core professional skill.

Chapter 2: Preparation Steps

Before touching a code editor, work through these four steps in order.

Step 1 — Analyze the Design

Spend time examining the screenshot or mockup. Ask yourself:

  • What is the overall layout? (Single column? Sidebar + main? Grid of cards?)
  • What colors dominate, and what are the accent colors?
  • What fonts are used — serif, sans-serif, monospace? What sizes and weights?
  • What spacing exists between sections?
  • Are there interactive elements like buttons, hover states, or navigation links?

Write your observations down. This pre-flight analysis prevents you from discovering halfway through that you built the wrong grid structure.

Step 2 — Set Up Your Files

Create two files: an HTML file and an external CSS file. Link the CSS file inside the HTML <head> using a <link> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Recreate Task</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Your HTML goes here -->
  </body>
</html>

The href="styles.css" value assumes both files live in the same directory. Adjust the path if your structure differs (e.g., href="css/styles.css").

Step 3 — Build the HTML Structure

Lay out the structural elements using semantic HTML5 tags. Semantics matter because they communicate meaning to browsers, screen readers, and search engines — not just to other developers.

Key tags to use:

TagPurpose
<header>Site logo, top navigation, hero banner
<nav>Primary navigation links
<main>The page's primary content area
<aside>Sidebars, secondary content, ads
<footer>Copyright, links, contact info

Build the full HTML skeleton before writing any CSS. Styling an unfinished structure leads to rework.

Step 4 — Write Your CSS Top-Down

Start styling from the top of the page and work downward. A proven sequence:

  1. Global resets and base styles (body, *)
  2. Layout (header, nav, main, aside, footer)
  3. Typography (headings, body text, links)
  4. Color and backgrounds
  5. Components (buttons, cards, forms)
  6. Responsive adjustments (media queries last)

Chapter 3: Key Areas to Focus On

Layout

Use Flexbox for one-dimensional layouts (navigation bars, card rows, centered hero sections) and CSS Grid for two-dimensional layouts (page-level column structures with sidebars). Ensure your header, content areas, sidebars, and footers are positioned exactly as shown in the design.

/* Two-column layout: main content + sidebar */
.page-wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

Typography

Font choice, size, weight, and text alignment are the most visible parts of any design. Differences in typography are immediately noticeable to a trained eye.

  • Match font-family — if the design uses a Google Font, import it
  • Match font-size and font-weight for each heading level
  • Match line-height and letter-spacing for body copy
  • Match text-align — left, center, or right per section

Color Scheme

Use exact hex codes wherever possible. If you are working from a screenshot without access to design tokens:

  • Use a browser color picker extension to sample colors from the screenshot
  • Approximate with HSL values if exact codes are unavailable
  • Keep all color values in the CSS file, never inline

Responsiveness

Use media queries to adapt the layout at each breakpoint. Common breakpoints:

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

/* Mobile */
@media (max-width: 480px) {
  nav {
    flex-direction: column;
  }
}

Adjust layouts, font sizes, and spacing so the design renders correctly on phones, tablets, and desktops.

Chapter 4: Putting It Together

Here is a working base to build from. It wires together the HTML structure, external CSS link, and a small set of foundational styles that cover the global reset, semantic sections, and a starting point for typography:

<!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>
    <header>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <section class="hero">
        <h1>Welcome</h1>
        <p>Recreated from the design.</p>
      </section>
    </main>

    <aside>
      <p>Sidebar content</p>
    </aside>

    <footer>
      <p>&copy; 2026 Recreate Task</p>
    </footer>
  </body>
</html>

/* styles.css */

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

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

nav {
  display: flex;
  justify-content: center;
  gap: 16px;
}

nav a {
  text-decoration: none;
  color: #333;
}

nav a:hover {
  color: #0070f3;
}

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

footer {
  background-color: #f4f4f4;
  padding: 20px;
}

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

flowchart TD
    A[Analyze Screenshot] --> B[Set Up HTML + CSS Files]
    B --> C[Build Semantic HTML Skeleton]
    C --> D[Style: Global Reset + Base]
    D --> E[Style: Layout — Flexbox / Grid]
    E --> F[Style: Typography]
    F --> G[Style: Colors + Backgrounds]
    G --> H[Style: Components]
    H --> I[Style: Media Queries]
    I --> J[Compare Output to Screenshot]
    J -->|Differences found| D
    J -->|Matches design| K[Done ✅]

🧪 Try It Yourself

Task: Recreate this three-section homepage layout using external CSS only (no inline styles).

The page must include:

  • A <header> with a centered <nav> containing three links: Home, About, Contact
  • A <main> section with a hero <h1> and a short paragraph, centered
  • A <footer> with a light gray background (#f4f4f4) and copyright text

Success criterion: Open index.html in a browser. The nav links should be horizontally centered and turn blue (#0070f3) on hover. The footer background must be visibly lighter than the page body. No styles should appear inside the HTML file — all rules live in styles.css.

Starter snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Recreate</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- build your header, main, footer here -->
  </body>
</html>

/* styles.css — add all your rules here */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
}

🔍 Checkpoint Quiz

Q1. Why is it better to use an external CSS file rather than inline styles when recreating a multi-page website design?

A) External CSS loads faster on every request
B) It centralizes styles so changes apply site-wide from one file
C) Inline styles are not valid CSS
D) Browsers ignore inline styles on <header> elements

Q2. Given this CSS, what will the .page-wrapper look like on a screen narrower than 768px?

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr 280px;
}

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

A) Two columns: one flexible, one 280px wide
B) One full-width column
C) The grid is disabled entirely
D) The layout switches to Flexbox

Q3. What is the bug in this nav CSS?

nav {
  display: flex;
  justifyContent: center;
  gap: 16px;
}

A) display: flex is not valid inside a <nav>
B) justifyContent is camelCase — CSS uses justify-content
C) gap is not supported in Flexbox
D) The selector should be nav > *

Q4. You are recreating a design that uses a sidebar on desktop but a single column on mobile. Which approach is correct?

A) Use display: none to hide the sidebar on mobile
B) Use CSS Grid with a media query that changes grid-template-columns at the mobile breakpoint
C) Build two separate HTML files — one for desktop, one for mobile
D) Add a mobile="true" attribute to the <aside> tag

A1. B — A single external stylesheet controls styles for the whole site; update one rule and every page reflects it. Inline styles are scoped to a single element and make maintenance painful at scale.

A2. B — The media query overrides grid-template-columns to 1fr when the viewport is 768px or narrower, collapsing the two-column grid into one full-width column.

A3. B — CSS property names use kebab-case, not camelCase. The correct property is justify-content: center;. The camelCase version is silently ignored by the browser.

A4. B — CSS Grid combined with a media query is the standard approach. Changing grid-template-columns at a breakpoint stacks the sidebar below the main content without hiding or duplicating any HTML.

🪞 Recap

  • Analyze the target design for layout, typography, colors, and spacing before writing any code
  • Always link styles via an external CSS file — never scatter inline styles across HTML elements
  • Build a complete semantic HTML skeleton (<header>, <nav>, <main>, <aside>, <footer>) before touching CSS
  • Apply styles in order: global reset → layout → typography → color → components → media queries
  • Use Flexbox for one-dimensional alignment and CSS Grid for two-dimensional page structure

📚 Further Reading

Like this topic? It’s one of 26 in UI Designer.

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

Course detailsBlock your seat →