Quartz 4

Web Design Agency Website

5 min read

Metadata

Notes

🌐 Project Overview: Building a Creative Web Design Agency Website

In this project, you’re tasked with designing and coding a beautiful and responsive website for a Creative Web Design Agency. The main focus is not just on design but also on responsive behavior and layout management using CSS.

🎯 Goal:

Create a clean, minimal, and beautiful website for a fictional agency at dev.com with:

  • A prominent heading and short descriptions

  • Two separate content blocks with images and text

  • A simple footer with the motto: "Create, Develop, Design"

  • Fully responsive layout that adjusts gracefully for smaller screens (like iPhones)

🧱 Starter Files & Workflow

  • You’re given a starter HTML file (index.html) and an optional solution.html to view a sample solution.

  • Do not jump to the solution immediately. Try building it yourself first.

  • Use your browser’s “Open in Browser” or “Live Preview” feature to see your progress as you code.

🔧 What You’ll Be Practicing

This project combines everything you’ve learned so far in CSS and HTML:

✅ Layout Techniques

  • Block vs. Inline vs. Inline-block

  • Float (float: left, float: right)

  • Clearfixing floated elements

✅ Responsiveness

  • Media Queries

  • Responsive image and text alignment

  • Percentage-based width

  • Stacking content vertically on smaller screens

🛠 Step-by-Step Breakdown

1. The Main Structure of the Website

Your website should include:

  • A hero section with a large heading

  • Two content “cards” with images and accompanying text

  • A footer with your motto

You’ll be using HTML for structure and CSS for layout and design.

Example HTML Layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Creative Design Agency</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1><span class="creative">Creative</span> Design Agency</h1>
 
  <div class="card card-left">
    <img src="image1.jpg" alt="Project Image 1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
 
  <div class="card card-right">
    <img src="image2.jpg" alt="Project Image 2">
    <p>Curabitur venenatis, justo nec varius cursus, metus sapien.</p>
  </div>
 
  <footer>
    <p>Create, Develop, Design</p>
  </footer>
</body>
</html>

2. Using CSS for Layout and Design

Your layout will mainly be controlled with CSS. Key techniques include:

🧩 Float-Based Layout

Use float to place images and text side by side.

.card-left {
  float: left;
  width: 45%;
  margin: 2.5%;
}
 
.card-right {
  float: right;
  width: 45%;
  margin: 2.5%;
}

💡 Remember to clear your floats:

.card::after {
  content: "";
  display: table;
  clear: both;
}

🎨 Styling Inline Elements Differently

You can color specific words using <span>:

<h1><span class="creative">Creative</span> Design Agency</h1>
.creative {
  color: #007BFF; /* Blue tone */
}

<span> is inline by default, so it won’t disrupt the flow of the heading.

3. Adding Responsiveness with Media Queries

This is one of the most crucial parts of this project.

When the screen becomes smaller (e.g., on phones), you want the layout to stack vertically. Use a media query to override layout styles when the screen is narrow.

@media (max-width: 680px) {
  .card-left, .card-right {
    float: none;
    width: 100%;
    text-align: justify;
  }
}

What’s happening here:

  • float: none removes the horizontal placement.

  • width: 100% ensures each card spans the full width.

  • text-align: justify aligns both sides of the paragraph, creating a neat block look.

4. Image Handling with object-fit

In the solution, object-fit: cover is used to make images fit their containers nicely.

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
  • object-fit: cover ensures the image fills the box without stretching (it may crop, but it looks good).

A minimalist footer:

<footer>
  <p>Create, Develop, Design</p>
</footer>
footer {
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
  font-weight: bold;
}

🧠 Tips & Concepts to Remember

📦 Box Model Refresher

  • margin, border, padding, and content make up every box.

  • Use percentages for fluid, responsive widths.

🧱 Display Property Recap

  • block: Takes full width. Starts on new line.

  • inline: Doesn’t break line. Can’t set width/height.

  • inline-block: Behaves like inline but allows width/height.

  • none: Hides the element.

📐 Float Recap

  • float: left/right positions elements to the side.

  • After float, use clear: both or clearfix to prevent overlapping.

  • Avoid float overuse in modern layouts — flexbox and grid are better — but float is still foundational knowledge.

📱 Media Queries Basics

@media (max-width: 680px) {
  /* styles for smaller screens */
}

  • max-width: Styles apply up to 680px.

  • You can have multiple breakpoints for different screen sizes.

🔎 Debugging & Learning Resources

🖌️ Creative Freedom

Don’t feel limited to recreating the example layout — you’re free to:

  • Change images

  • Reorganize text

  • Use different color palettes or fonts

  • Add animations or transitions

  • Build a completely new layout

Just make sure to:

  • Use floats or inline-blocks somewhere

  • Make it responsive with at least one media query

  • Practice the concepts you’ve learned

✅ Final Checklist

  • Used at least two content sections (cards) with image + text

  • Website is responsive for smaller screens (cards stack)

  • Applied floats or inline-block for layout

  • Styled a specific word or element with a <span>

  • Footer contains motto

  • Clean, minimal and readable design

  • Used object-fit: cover (optional, but helpful)

  • Tried building before checking the solution

References

Graph View

Backlinks