We use cookies to enhance your experience on the site
Privacy Policy
OK
CodeWorlds

Main Task: Virtual Flexbox Temple

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.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>My Website</title>
8</head>
9<body>
10  <header class="header">
11    <h1>My Website</h1>
12    <nav class="nav">
13      <ul>
14        <li><a href="#">Home</a></li>
15        <li><a href="#">About Us</a></li>
16        <li><a href="#">Services</a></li>
17        <li><a href="#">Contact</a></li>
18      </ul>
19    </nav>
20  </header>
21  <main class="main">
22    <section class="content">
23      <h2>Welcome to Our Website</h2>
24      <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>
25    </section>
26    <aside class="sidebar">
27      <h2>News</h2>
28      <p>The latest information about our company and industry.</p>
29    </aside>
30  </main>
31  <footer class="footer">
32    <p>&copy; 2023 My Website. All rights reserved.</p>
33  </footer>
34</body>
35</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.

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.nav ul {
16  list-style-type: none;
17  padding: 0;
18  display: flex;
19  justify-content: center;
20}
21
22.nav li {
23  margin: 0 15px;
24}
25
26.nav a {
27  color: #fff;
28  text-decoration: none;
29  font-weight: bold;
30}
31
32.main {
33  display: flex;
34  flex-wrap: wrap;
35  justify-content: space-between;
36  padding: 20px;
37  background-color: #fff;
38}
39
40.content {
41  flex: 1;
42  min-width: 60%;
43  padding: 20px;
44}
45
46.sidebar {
47  flex: 1;
48  min-width: 30%;
49  padding: 20px;
50  background-color: #f9f9f9;
51}
52
53.footer {
54  background-color: #333;
55  color: #fff;
56  text-align: center;
57  padding: 10px;
58  position: absolute;
59  bottom: 0;
60  width: 100%;
61}

Step 4: Add Media Queries for Responsiveness

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

1@media (max-width: 768px) {
2  .main {
3    flex-direction: column;
4  }
5
6  .content, .sidebar {
7    min-width: 100%;
8    margin-bottom: 20px;
9  }
10
11  .footer {
12    position: static;
13  }
14}

Step 5: Finalization

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

HTML File (index.html)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>My Website</title>
8</head>
9<body>
10  <header class="header">
11    <h1>My Website</h1>
12    <nav class="nav">
13      <ul>
14        <li><a href="#">Home</a></li>
15        <li><a href="#">About Us</a></li>
16        <li><a href="#">Services</a></li>
17        <li><a href="#">Contact</a></li>
18      </ul>
19    </nav>
20  </header>
21  <main class="main">
22    <section class="content">
23      <h2>Welcome to Our Website</h2>
24      <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>
25    </section>
26    <aside class="sidebar">
27      <h2>News</h2>
28      <p>The latest information about our company and industry.</p>
29    </aside>
30  </main>
31  <footer class="footer">
32    <p>&copy; 2023 My Website. All rights reserved.</p>
33  </footer>
34</body>
35</html>

CSS File (styles.css)

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.nav ul {
16  list-style-type: none;
17  padding: 0;
18  display: flex;
19  justify-content: center;
20}
21
22.nav li {
23  margin: 0 15px;
24}
25
26.nav a {
27  color: #fff;
28  text-decoration: none;
29  font-weight: bold;
30}
31
32.main {
33  display: flex;
34  flex-wrap: wrap;
35  justify-content: space-between;
36  padding: 20px;
37  background-color: #fff;
38}
39
40.content {
41  flex: 1;
42  min-width: 60%;
43  padding: 20px;
44}
45
46.sidebar {
47  flex: 1;
48  min-width: 30%;
49  padding: 20px;
50  background-color: #f9f9f9;
51}
52
53.footer {
54  background-color: #333;
55  color: #fff;
56  text-align: center;
57  padding: 10px;
58  position: absolute;
59  bottom: 0;
60  width: 100%;
61}
62
63@media (max-width: 768px) {
64  .main {
65    flex-direction: column;
66  }
67
68  .content, .sidebar {
69    min-width: 100%;
70    margin-bottom: 20px;
71  }
72
73  .footer {
74    position: static;
75  }
76}

Additional Task

  1. Add more sections to the main content, such as additional articles or image galleries.
  2. Test your skills by adding more elements to the navigation and adapting them to smaller screens.
  3. 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.
  4. 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:

Go to CodeWorlds→