Create a Mobile-Friendly Blog Card Using HTML and CSS - Tutorial

By Faraz - January 06, 2024

Learn how to build a stunning blog card with pure CSS and HTML in this step-by-step tutorial. Achieve responsive design for an optimal user experience across devices.

Join us on Telegram

Create a Mobile-Friendly Blog Card Using HTML and CSS Tutorial.jpg

Read Also create an eye-catching pricing table with just html, css, and javascript.jpg

Create an Eye-Catching Pricing Table with Just HTML, CSS, and Javascript

Welcome to our tutorial on creating a pure CSS responsive blog card. In this guide, we'll walk you through each step to build a visually appealing and mobile-friendly blog card using only HTML and CSS. Whether you're a beginner or an aspiring web designer, this tutorial is designed to help you understand the intricacies of front-end development while creating a sleek and functional blog card. Let's dive in and unlock the secrets of crafting an impressive web design with ease.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

Start by creating a new HTML file and defining the basic structure.

Define a container for the blog card content, including the title, image, and description. Let me break down the code:

1. <!DOCTYPE html>: This declaration specifies the HTML version being used, and in this case, it's HTML5.

2. <html lang="en">: This opening tag marks the beginning of the HTML document, and it also declares the language of the document as English (en).

3. <head>: This section contains meta-information about the HTML document, such as the character set, viewport settings, and the title of the page.

<meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures that Internet Explorer uses the latest rendering engine available.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport settings for responsive design.
<title>Responsive Blog Card</title>: Sets the title of the web page.
<link rel="stylesheet" href="styles.css">: Links an external stylesheet (CSS file) named "styles.css" to apply styles to the HTML content.

4. <body>: This is the main content of the HTML document.

<div class="container">: A container element to group the content for styling or layout purposes.
<section class="paper border shadow shadow-large">: A section element with multiple classes for styling, creating a paper-like, bordered, and shadowed appearance.
<h1>: The main heading of the page, which includes a link to the "Bejamas blog."
<ul class="card-list">: An unordered list that contains a series of list items representing blog cards.
Each <li> (list item) represents a blog card, consisting of an image, a heading (<h2>), and a link to a specific blog post.
<img src="...">: An image element with a source pointing to the URL of the blog post's featured image.
<h2>: Heading 2 element representing the title of the blog post.
<a href="...">: An anchor element (link) wrapping the blog post title, and the href attribute contains the URL to the corresponding blog post.

5. The closing tags </ul> and </section> mark the end of the unordered list and the section, respectively.

6. The closing tags </div> and </body> signify the end of the container and the body of the HTML document.

7. The closing tag </html> marks the end of the HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Blog Card</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <section class="paper border shadow shadow-large">
      <h1>
        <a href="https://bejamas.io/blog/">Bejamas blog</a>
      </h1>
        <ul class="card-list">
          <li class="paper border shadow shadow-large shadow-hover">          
            <img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2Ff31810d13e2e27f7f502218b8f4f28e0008e1ed7-3000x3000.png&w=640&q=75" alt="">
            <h2>
              <a href="https://bejamas.io/blog/guide-to-remix-framework/">Remix: a practical guide</a>            
            </h2>
          </li>
          <li class="paper border shadow shadow-large shadow-hover">          
            <img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2Fadffce6e572b1e67f8301c0cd45ea0019a9e0be8-4167x4167.png&w=640&q=75" alt="">
            <h2>
              <a href="https://bejamas.io/blog/practical-guide-to-nuxt-js/">Nuxt: a practical guide</a>            
            </h2>
          </li>
          <li class="paper border shadow shadow-large shadow-hover">          
            <img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2Fa4b233016f4737136b37909f3c480361c25eb63c-3000x3000.png&w=640&q=75" alt="">
            <h2>
              <a href="https://bejamas.io/blog/practical-guide-to-solidjs-library/">Solid: a practical guide</a>            
            </h2>
          </li>
          <li class="paper border shadow shadow-large shadow-hover">          
            <img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2F2d2ed3cab93b818475e7a9d45608c0f9767f5a8f-3000x3000.png&w=640&q=75" alt="">
            <h2>
              <a href="https://bejamas.io/blog/practical-guide-to-astro-js-framework/">Astro: a practical guide</a>            
            </h2>
          </li>
          <li class="paper border shadow shadow-large shadow-hover">          
            <img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2Fbb266c02a530bc5858ef34ba20680f10ffb8929c-3000x3000.png&w=640&q=75" alt="">
            <h2>
              <a href="https://bejamas.io/blog/build-a-quiz-application-with-qwik-framework/">Qwik: a practical guide</a>            
            </h2>
          </li>
          <li class="paper border shadow shadow-large shadow-hover">          
            <img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2F274fc43c57a8ba8d4e20d2709776232cf365c014-3000x3000.png&w=640&q=75" alt="">
            <h2>
              <a href="https://bejamas.io/blog/how-to-create-next-js-blog-using-notion-as-a-cms/">Next: a practical guide</a>            
            </h2>
          </li>        
      </ul>
    </section>
  </div>
</body>
</html>

Read Also

Creating a Tile Spinner Using HTML and CSS.jpg

Creating a Tile Spinner Using HTML and CSS (Source Code)

Step 2 (CSS Code):

Now, let's add style to our blog card. We'll cover basic styling and ensure responsiveness.

Let's break down the CSS code:

1. @import url("https://unpkg.com/[email protected]/dist/paper.css") layer(csspaper);:

This line is using the @import rule to include an external CSS file from the specified URL. The imported file is "paper.css" from the "papercss" library, and it is assigned to the layer named "csspaper". This adds a predefined set of styles to the current stylesheet.

2. .card-list:has(li:hover) li:not(:hover) { filter: blur(4px) }:

This selector is applying a CSS filter to the list items within an element with the class "card-list". The filter is a blur effect of 4 pixels, but it is only applied to list items (li) that are not being hovered (:not(:hover)) within a "card-list" that has a list item being hovered (:has(li:hover)). This rule essentially adds a blur effect to non-hovered list items when any list item inside the ".card-list" is being hovered.

3. Demo styles:

Various styles are applied to create a demo look for the webpage. These include background color, background image (repeating linear gradient), padding, and text color.

4. .card-list:

This class styles an element with the class "card-list" as a grid with three columns (grid-template-columns: 1fr 1fr 1fr), a 1-rem gap between grid items, and no margin or padding.

5. li:

List items (li) have their margin set to 0 and a smooth transition effect over 150 milliseconds for all properties.

6. img:

Images (img) are set to display as a block, taking up 100% of their parent container's width, with minimum width set to 0, and a margin-bottom of 0.6 rem.

7. a:

Anchor (a) elements have their background set to none.

8. .paper:

Elements with the class "paper" have padding of 1.5 rem.

9. li a:

Anchor (a) elements within list items (li) have padding-inline-start set to 1rem.

@import url("https://unpkg.com/[email protected]/dist/paper.css") layer(csspaper);

.card-list:has(li:hover) li:not(:hover) {
  filter: blur(4px)
}

/* Demo style */
body {
  min-height: 100vh;
  background-color: #f6eee3;
  background-size: 20px 20px;
  background-image:  repeating-linear-gradient(0deg, #e5decf, #e5decf 1px, #f6eee3 1px, #f6eee3);
  padding: 1rem;
  color: var(--text-color);
}

h1 {
  font-size: 2.2rem;
  color: var(--primary-color);
  margin: 0 0 2rem;  
}

h2 {
  font-size: 1.2rem;
  margin: 0;
}

.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  transition: all 150ms ease-in-out;
}

li::before {
  content: "";
}

img {
  display: block;
  min-width: 0;
  width: 100%;
  margin-bottom: .6rem;
}

a {
  background: none;
}

.paper {
  padding: 1.5rem;
}

li a {
  padding-inline-start: 1rem;
}

Final Output:

Create a Mobile-Friendly Blog Card Using HTML and CSS Tutorial.gif

Read Also

Create a Social Media Carousel with HTML, CSS, and JavaScript

Conclusion:

Congratulations! You've completed our tutorial on creating a pure CSS responsive blog card. Throughout this guide, you've learned essential HTML and CSS techniques to design a visually appealing and mobile-friendly blog card. From understanding the structure to implementing responsive design and adding interactive elements, you've gained valuable insights into front-end development.

Now armed with these skills, you're well-equipped to apply them in your future web design projects. Remember to test and debug your creations across different devices for a seamless user experience. Front-end magic awaits, and we encourage you to explore further possibilities in the exciting world of web development.

Thank you for joining us on this journey. Happy coding!

Code by: Mojtaba Seyedi

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: css responsive blog card, html and css tutorial, web design, front-end development, responsive design, source code, pure css blog card implementation, step-by-step html css tutorial, mobile-friendly blog card design, front-end web development techniques

End of the article