Week 7 — Layout Systems: Flexbox, Grid, and Responsive Design

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

Flexbox, CSS Grid, responsive breakpoints, and mobile-first testing

Project files and folder structure

Create week-07/index.html and week-07/css/styles.css.

Syntax to practice

display: flex, gap, justify-content, align-items, display: grid, grid-template-columns, minmax(), and @media queries.

Build it

Build at least three cards using Grid or Flexbox. Add a breakpoint that changes the layout from multiple columns to one column. Test at approximately 375px, 768px, and 1280px.

Code along: Build a three-card grid and stack it on narrow screens.

Open in Sublime Text: week-07/css/styles.css

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.card { padding: 24px; background: white; border: 1px solid #cbd5e1; }
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
}

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: week-07/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Card Layout</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main class="card-grid">
    <article class="card"><h2>Design</h2><p>Explore visual ideas and layouts.</p></article>
    <article class="card"><h2>Develop</h2><p>Build pages with HTML and CSS.</p></article>
    <article class="card"><h2>Test</h2><p>Check designs on different screens.</p></article>
  </main>
</body>
</html>

CSS file: week-07/css/styles.css

body { margin: 0; padding: 24px; font-family: Arial, sans-serif; background: #f1f5f9; color: #172033; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { padding: 24px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; }
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Change to two columns, then change the breakpoint from 600px to 800px. Test at 375px, 768px, and 1280px.

Save and test

1. Save the file in the exact folder shown above.
2. Open the HTML file in a browser, or refresh it after saving if it is already open.
3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

• week-07/index.html and week-07/css/styles.css — responsive page with at least three cards and a media query.
• week-07/responsive-tests.pdf or .png — screenshots at approximately 375px, 768px, and 1280px.
• week-07/README.txt — layout technique, breakpoint, and one issue corrected.

Submission checklist

• Three cards; no horizontal overflow at three widths; Flexbox or Grid and at least one media query.
• Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
• Open the HTML file in a browser before submitting and confirm linked CSS and images load.