HTML and CSS course · Module 4: Flexbox

Main Task: Virtual Flexbox Temple

5 min read · Updated March 31, 2026

In this lesson7

Time for the main module task! As Mohamed says: "A true architect can build a complete temple by combining all the techniques they've learned." In this task, you will create a complete web page with a header, navigation, main section, and footer - all built using Flexbox. The page structure will be responsive and flexible, like the blueprint of a perfect Egyptian temple.

Step 1: Create a Basic HTML Document Structure

Create a new HTML file and add a basic HTML document structure. Add <header>, <nav>, <main>, and <footer> elements to create page sections.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
  <title>My Website</title>
</head>
<body>
  <header class="header">
    <h1>My Website</h1>
    <nav class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <section class="content">
      <h2>Welcome to Our Website</h2>
      <p>This is sample text in the main section of the page. You can add more information about your company, products, or services here.</p>
    </section>
    <aside class="sidebar">
      <h2>News</h2>
      <p>The latest information about our company and industry.</p>
    </aside>
  </main>
  <footer class="footer">
    <p>&copy; 2023 My Website. All rights reserved.</p>
  </footer>
</body>
</html>

Step 2: Create a CSS File

Open or create a new CSS file and save it as styles.css.

Step 3: Basic Styling

Add basic styles for the .header, .nav, .main, .content, .sidebar, and .footer elements.

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

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 15px;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
}

.content {
  flex: 1;
  min-width: 60%;
  padding: 20px;
}

.sidebar {
  flex: 1;
  min-width: 30%;
  padding: 20px;
  background-color: #f9f9f9;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

Step 4: Add Media Queries for Responsiveness

To make the page responsive, add media queries to adapt the layout on smaller screens.

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }

  .content, .sidebar {
    min-width: 100%;
    margin-bottom: 20px;
  }

  .footer {
    position: static;
  }
}

Step 5: Finalization

After completing all the steps, your HTML and CSS files should look as follows:

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
  <title>My Website</title>
</head>
<body>
  <header class="header">
    <h1>My Website</h1>
    <nav class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <section class="content">
      <h2>Welcome to Our Website</h2>
      <p>This is sample text in the main section of the page. You can add more information about your company, products, or services here.</p>
    </section>
    <aside class="sidebar">
      <h2>News</h2>
      <p>The latest information about our company and industry.</p>
    </aside>
  </main>
  <footer class="footer">
    <p>&copy; 2023 My Website. All rights reserved.</p>
  </footer>
</body>
</html>

CSS File (styles.css)

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

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 15px;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
}

.content {
  flex: 1;
  min-width: 60%;
  padding: 20px;
}

.sidebar {
  flex: 1;
  min-width: 30%;
  padding: 20px;
  background-color: #f9f9f9;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }

  .content, .sidebar {
    min-width: 100%;
    margin-bottom: 20px;
  }

  .footer {
    position: static;
  }
}

Additional Task

Add more sections to the main content, such as additional articles or image galleries.
Test your skills by adding more elements to the navigation and adapting them to smaller screens.
Add different styles to your page, such as changing colors, font sizes, and other element properties to better understand how the different CSS options work.
Add animations to the navigation and other page elements to add interactivity and a better user experience.

Flexbox Module Summary

In this module, you learned the complete Flexbox toolkit:

display: flex - activating Flexbox on a container
flex-direction - main axis direction (row, column, row-reverse, column-reverse)
justify-content - distribution along the main axis
align-items - alignment along the cross axis
flex-wrap - wrapping elements to new lines
gap - spacing between elements
flex-grow, flex-shrink, flex-basis - element size control
order - changing visual order
align-self - individual element alignment

Flexbox is a powerful tool that allows creating flexible layouts without the need for float, position, or complicated hacks. As the pyramid architects say: "Flexibility in planning is the key to a lasting construction!"

Create your page in the editor below:

Code for this lesson: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox - Align Self</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Align Self - Individual Alignment</h1>
        <p class="subtitle">Override align-items for individual elements</p>

        <section class="demo-section">
            <h2>One element aligned differently</h2>
            <div class="flex-container">
                <div class="flex-item">Normal</div>
                <div class="flex-item self-start">align-self: flex-start</div>
                <div class="flex-item">Normal</div>
            </div>
            <p class="description">Middle element aligned to top independently of the rest</p>
        </section>

        <section class="demo-section">
            <h2>All align-self properties</h2>
            <div class="flex-container tall">
                <div class="flex-item self-auto">auto (inherits)</div>
                <div class="flex-item self-start">flex-start</div>
                <div class="flex-item self-center">center</div>
                <div class="flex-item self-end">flex-end</div>
                <div class="flex-item self-stretch">stretch</div>
                <div class="flex-item self-baseline">baseline</div>
            </div>
            <p class="description">Each element with different alignment</p>
        </section>

        <section class="demo-section practice">
            <h2>Practice: Egyptian procession</h2>
            <p class="practice-description">Pharaoh and his subjects in procession - each at their own level</p>

            <div class="procession">
                <div class="person peasant">
                    <div class="figure">◉</div>
                    <div class="label">Peasant</div>
                </div>

                <div class="person scribe">
                    <div class="figure">◉</div>
                    <div class="label">Scribe</div>
                </div>

                <div class="person pharaoh">
                    <div class="figure">◉</div>
                    <div class="label">Pharaoh</div>
                </div>

                <div class="person priest">
                    <div class="figure">◉</div>
                    <div class="label">Priest</div>
                </div>

                <div class="person warrior">
                    <div class="figure">◉</div>
                    <div class="label">Warrior</div>
                </div>

                <div class="person servant">
                    <div class="figure">◉</div>
                    <div class="label">Servant</div>
                </div>
            </div>

            <div class="legend">
                <h3>Social hierarchy:</h3>
                <ul>
                    <li><span class="status pharaoh-status">Pharaoh</span> - highest (flex-end)</li>
                    <li><span class="status priest-status">Priest</span> - high (center-high)</li>
                    <li><span class="status scribe-status">Scribe</span> - medium (center)</li>
                    <li><span class="status warrior-status">Warrior</span> - medium-low (center-low)</li>
                    <li><span class="status peasant-status">Peasant</span> - low (flex-start)</li>
                    <li><span class="status servant-status">Servant</span> - lowest (stretch)</li>
                </ul>
            </div>
        </section>
    </div>
</body>
</html>

Docs entries used in this lesson

Spotted a mistake in this lesson?