Build the Wireframe with Flexbox In Visual Code

Question

Build the Wireframe with Flexbox In Visual Code

Britani Peeples 0

Instructions

Create your project and its GitHub repository with the name of flexbox-wireframe-practice

Create index.html at the root level of your project.

In index.html, change the title element's text to Flexbox Wireframe Practice

Create a folder called css

Create a file within the css folder named style.css

Create a file within the css folder named reset.css

Paste the CSS from the reset below into reset.css

Link your reset to either your HTML or import it at the beginning of your style.css file. There are examples below of how to do this.

Save the following image as mobile-wireframe.png and place it in the root level of your project.

Recreate and style the layout from the wireframe below as best as you can.

Submit the link to your repository once all work is completed and pushed to GitHub

IMPORTANT: While working on this assignment, please choose one of the mobile-device emulators that your browser’s developer tools provide when working on this project.

Right-click the wireframe image and click "Save image as..." to download the image. Rename it to mobile-wireframe.png and store it in your project's root level.

0 comments

1 answer

Your answer

Answer 1

Use Visual Studio Code and GitHub together with basic HTML/CSS skills and flexbox layout techniques.

Create the project and repository

On GitHub, create a new repository named flexbox-wireframe-practice (no README if planning to push an existing folder).
On the local machine, create a folder with the same name.
Initialize Git in that folder and connect it to the GitHub repository (for example, by following the steps in the GitHub guided project module).

Create the basic HTML structure

In the project root, create index.html.
Add a basic HTML5 skeleton and set the title:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox Wireframe Practice</title>
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <!-- layout content will go here -->
</body>
</html>

Create CSS folder and files

In the project root, create a folder named css.
Inside css, create reset.css and style.css.
Paste the provided reset CSS into reset.css.
Ensure index.html links to both CSS files as shown above, or alternatively import the reset at the top of style.css:

/* at the very top of style.css */
@import url('reset.css');

Use only one of these approaches, not both.

Add the wireframe image

Save the provided wireframe image as mobile-wireframe.png.
Place mobile-wireframe.png in the project root (same level as index.html).
Optionally, keep it just as a design reference (no need to use it in the page), or include it in the HTML for comparison while developing.

Build the layout with flexbox Use flex containers to structure the page similar to the wireframe. A typical mobile wireframe might have:

A header (logo/title and maybe a nav icon).
A main content area with stacked sections or cards.
A footer.

Example structure:

<body>
  <header class="header">
    <div class="header__logo">Logo</div>
    <div class="header__icon">≡</div>
  </header>

  <main class="main">
    <section class="hero">Hero</section>

    <section class="cards">
      <article class="card">Card 1</article>
      <article class="card">Card 2</article>
      <article class="card">Card 3</article>
    </section>
  </main>

  <footer class="footer">Footer</footer>
</body>

In style.css, turn these into flex layouts:

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #fff;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.hero {
  background-color: #ddd;
  height: 150px;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card {
  background-color: #fff;
  padding: 1rem;
  min-height: 80px;
}

.footer {
  background-color: #fff;
  padding: 1rem;
  text-align: center;
}

Adjust sizes, colors, spacing, and the number of sections to match the wireframe as closely as possible.

Use mobile-device emulation

Open index.html in a browser.
Open Developer Tools.
Turn on device emulation and select a mobile device preset.
Refresh and tweak CSS until the layout matches the wireframe at mobile width.

Commit and push to GitHub

Stage all files (index.html, css/reset.css, css/style.css, mobile-wireframe.png).
Commit with a clear message (for example, Initial flexbox wireframe layout).
Push to the GitHub repository.
Submit the repository URL as required.

For additional practice with HTML and CSS structure and using Visual Studio Code, the HTML-focused modules in the context can be used to reinforce the basics.

References:

Share via

Build the Wireframe with Flexbox In Visual Code

1 answer

Your answer