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

Highlighted Blogposts

Explore how to highlight the third blogpost using a distinct background color and reorder posts with Flexbox. Understand layout changes for mobile views and breakpoints to create a consistent, mobile-responsive web layout.

We'll cover the following...

Formatting the third blogpost

Let’s make the third blogpost highlighted by adding a highlighted class to it:

<div class="blogpost highlighted">
  <img
    src="https://www.educative.io/udata/WPVy7kaW8e6/720x480.png" 
    alt="placeholder image"
    class="blogpost-thumbnail" />
  <h3 class="blogpost-title">Third post</h3>
  <p class="blogpost-preview">This is an example post.</p>
</div>

We will use a lightskyblue background color to differentiate between the highlighted and ...