Academy / Intermediate Level: HTML and CSS

Intermediate Level Practice: HTML and CSS

Part 1: CSS Flexbox Practice Exercise

Exercise: Create a Flexbox-based Responsive Layout

In this exercise, you'll create a simple webpage layout using Flexbox. The layout will include a header, a navigation bar, a main content area, a sidebar, and a footer.

Task:

1. Use Flexbox to arrange the layout into two columns for larger screens: a sidebar on the left and main content on the right.
2. For smaller screens, stack the sidebar and main content vertically.
3. Make sure the header, footer, and navigation stay at the top and bottom, respectively.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Website Header</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="container">
    <aside class="sidebar">Sidebar</aside>
    <main class="content">Main Content</main>
  </div>
  <footer>
    <p>Website Footer</p>
  </footer>
</body>
</html>

CSS:

Add your CSS to create a responsive layout. Use Flexbox to arrange the sidebar and content next to each other on larger screens, and stack them vertically on smaller screens.

• Use the @media query to create a responsive design.
• Add some padding, colors, and margins to style the elements.