It is now an opportune moment to engage in the practical application and implementation of the knowledge and skills that have been acquired.
Our goal
We aim to implement the following diagram using HTML and CSS.
Let's open our online editor in the playground.
Let's start by adding the basic structure of HTML first. Below, is the basic html structure.
<!-- copy this in editor -->
<html>
<head>
</head>
<body>
</body>
</html>
Understanding the problem
We can divide this problem into three smaller parts.
- Display Header element.
- Display Center element, with three child sections.
- Display Footer element.
Let's add the elements under the body tag.
<!-- add this in editor -->
<header> Header </header>
<main>
<section >Left Side bar</section>
<section >Center</section>
<section >Right Side bar</section>
</main>
<footer> Footer </footer>
You should be able to see all elements in the output. Now, let's add CSS styles.
<!-- add this in CSS editor -->
header, footer {
background: seagreen;
height: 30px;
margin: 5px 0
}
main {
height: 300px;
width: 100%;
display: table;
}
section {
display: table-cell;
}
Now, let's add some class to center the content in the element.
<!-- add the class to section in HTML editor -->
<section class="sideBar">Left Side bar</section>
<section class="centerContent">Center</section>
<section class="sideBar">Right Side bar</section><!-- add this in CSS editor -->
.sideBar {
width: 25%;
background: darkcyan;
}
.centerContent {
width: 50%;
background: mediumturquoise;
}You should be able to see a similar implementation, with a few refinements. Check out the complete solution below.
Try experimenting with this in the online playground. Different approaches can lead to the same implementation; see if you can find an alternative method.
Want to practice more? Click here for more hands-on exercise.
References: