Search⌘ K
AI Features
Home
Courses
Designing Web Layouts with CSS and Flexbox

Page Layout

Explore how to design mobile-first web page layouts using Flexbox. Understand dividing tasks into subtasks and applying breakpoints to control content display. This lesson helps you build adaptable layouts by identifying page areas and composing responsive content for different screen sizes.

We'll cover the following...

Creation of layout

When creating a website, the best path for beginners is the act of dividing the task into smaller subtasks in a top-down fashion, and then building the individual subtasks from the bottom-up.

If a task seems hard for you, then divide the task into smaller subtasks. If a task seems easy enough for you, it is worth building it in a bottom-up fashion.

When creating a website, the first recommended step is the creation of a layout. Identify the different areas of the page, and create individual small boxes.

In the example below, we set two breakpoints at 600px and at 800px. Check out the code and the output for more details.

You may need to resize your browser width from time to time to see the effect of the breakpoints. You can do this by resizing your browser window, or by opening the Google Chrome Developer Tools by right-clicking on the page and selecting Inspect. You can then set up the developer tools such that it appears on the right of your screen, and you can move the developer tools to the left.

Displaying the blog posts

Below the screen width of 600px, we only display the first three posts. At or above 600px, the fourth, fifth, and sixth blog posts are displayed too.

<section class="blogposts">
    <div class="blogpost">First post</div>
    <div class="blogpost">Second post</div>
    <div class="blogpost">Third post</div> 
    <div class="blogpost d-none d-sm-block">Fourth post</div>
    <div class="blogpost d-none d-sm-block">Fifth post</div> 
    <div class="blogpost d-none d-sm-block">Sixth post</div>
</section>

We use the principles of composition to compose the behavior of the last three blogposts on different screen sizes:

.d-none {
  display: none;
}
@media only screen and (min-width: 600px) {
    .d-sm-block {
      display: block;
    }
}

This way, we can use the HTML markup to describe what our website looks like, without making the CSS code too convoluted.