Create a Responsive Blog Card with React JS

Introduction

Creating a responsive blog card using ReactJS is an excellent way to showcase your web development skills. In this tutorial, we'll guide you through every step of the process to build a modern, flexible blog card. This design will automatically adjust to fit various screen sizes, making it perfect for any device. Whether you're a beginner or looking to refine your ReactJS skills, this detailed guide will help you create an impressive blog card.

Setup Environment

Before starting, ensure you have the following tools installed:

1. Node.js: Install Node.js from nodejs.org. Node.js provides the runtime environment for ReactJS and includes npm (Node Package Manager) to manage your project’s dependencies.
2. Code Editor: Use a code editor like Visual Studio Code for a smooth coding experience.

Step-by-Step Guide

Step 1: Create a New React Project

Start by creating a new React project. Open your terminal or command prompt and run the following command:

npx create-react-app card-component

This command sets up a new React project with all the necessary files and configurations. Navigate into your project directory:

cd card-component

Step 2: Create the Blog Card Component

Inside your project, create a new file for your blog card component.

1. Create the Component File

   In the src directory, create a new file named BlogCard.js. This file will contain the React component for your blog card.

   import React from 'react';
   import './BlogCard.css'; 
   
   const BlogCard = () => {
     return (
       <div className="container">
         <div className="row align-items-stretch retro-layout">
           <div className="col-md-4">
             <a href="#" className="h-entry mb-30 v-height gradient">
               <div
                 className="featured-img"
                 style={{
                   backgroundImage: "url('https://images.unsplash.com/photo-1603380353725-f8a4d39cc41e')"
                 }}
               ></div>
               <div className="text">
                 <span className="date">Apr. 14th, 2022</span>
                 <h2>Exploring Python for Data Science: Beginner to Advanced</h2>
               </div>
             </a>
   
             <a href="#" className="h-entry v-height gradient">
               <div
                 className="featured-img"
                 style={{
                   backgroundImage: "url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d')"
                 }}
               ></div>
               <div className="text">
                 <span className="date">Apr. 14th, 2022</span>
                 <h2>Mastering JavaScript: A Comprehensive Guide</h2>
               </div>
             </a>
           </div>
   
           <div className="col-md-4">
             <a href="#" className="h-entry img-5 h-100 gradient">
               <div
                 className="featured-img"
                 style={{
                   backgroundImage: "url('https://images.unsplash.com/photo-1628258334105-2a0b3d6efee1')"
                 }}
               ></div>
               <div className="text">
                 <span className="date">Apr. 14th, 2022</span>
                 <h2>Web Development Best Practices for 2024: A Full Guide</h2>
               </div>
             </a>
           </div>
   
           <div className="col-md-4">
             <a href="#" className="h-entry mb-30 v-height gradient">
               <div
                 className="featured-img"
                 style={{
                   backgroundImage: "url('https://images.unsplash.com/photo-1640187128454-1d7c462ede26')"
                 }}
               ></div>
               <div className="text">
                 <span className="date">Apr. 14th, 2022</span>
                 <h2>The Future of AI in Gaming: Trends and Predictions</h2>
               </div>
             </a>
   
             <a href="#" className="h-entry v-height gradient">
               <div
                 className="featured-img"
                 style={{
                   backgroundImage: "url('https://images.unsplash.com/photo-1593305841991-05c297ba4575')"
                 }}
               ></div>
               <div className="text">
                 <span className="date">Apr. 14th, 2022</span>
                 <h2>Building Your First Mobile Game: Tips and Tricks</h2>
               </div>
             </a>
           </div>
         </div>
       </div>
     );
   };
   
   export default BlogCard;

2. Style the Blog Card

   Create a new file named BlogCard.css in the src directory to add styles for your blog card.

   *,
   *::before,
   *::after {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
   }
   
   body {
     font-family: 'Poppins', sans-serif;
     overflow-x: hidden;
     background: #e7e7e7;
   }
   
   .container {
     width: 100%;
     padding-right: 1.5rem, 0.75rem;
     padding-left: 1.5rem, 0.75rem;
     margin: 2rem auto;
   }
   
   @media (min-width: 576px) {
     .container {
       max-width: 540px;
     }
   }
   
   @media (min-width: 768px) {
     .container {
       max-width: 720px;
     }
   }
   
   @media (min-width: 992px) {
     .container {
       max-width: 960px;
     }
   }
   
   @media (min-width: 1200px) {
     .container {
       max-width: 1140px;
     }
   }
   
   @media (min-width: 1400px) {
     .container {
       max-width: 1320px;
     }
   }
   
   .row {
     display: flex;
     flex-wrap: wrap;
     margin-top: calc(-1 * 0);
     margin-right: calc(-0.5 * 1.5rem);
     margin-left: calc(-0.5 * 1.5rem);
   }
   
   .row > * {
     -ms-flex-negative: 0;
     flex-shrink: 0;
     width: 100%;
     max-width: 100%;
     padding-right: calc(1.5rem * 0.5);
     padding-left: calc(1.5rem * 0.5);
     margin-top: 0;
   }
   
   @media (min-width: 768px) {
     .col-md-4 {
       -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
       flex: 0 0 auto;
       width: 33.33333%;
     }
   }
   
   .h-100 {
     height: 100% !important;
   }
   
   .align-items-stretch {
     align-items: stretch !important;
   }
   
   .retro-layout .v-height {
     height: 240px;
   }
   
   .retro-layout .h-entry {
     display: block;
     position: relative;
     border-radius: 10px;
     overflow: hidden;
   }
   .retro-layout .h-entry .featured-img {
     position: absolute;
     height: 100%;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     -webkit-transform: scale(1.05);
     transform: scale(1.05);
     -webkit-transition: 0.3s all ease;
     transition: 0.3s all ease;
   }
   .retro-layout .h-entry:hover .featured-img {
     -webkit-transform: scale(1);
     transform: scale(1);
   }
   .retro-layout .h-entry.mb-30 {
     margin-bottom: 30px;
   }
   .retro-layout .h-entry .date {
     font-size: 15px;
   }
   
   .retro-layout .text {
     position: absolute;
     bottom: 0;
     z-index: 10;
     padding: 20px;
     max-width: 350px;
   }
   .retro-layout .text h2 {
     color: #fff;
     font-size: 18px;
     line-height: 1.2;
     margin-bottom: 0;
   }
   .retro-layout .text span {
     color: rgba(255, 255, 255, 0.7);
     font-size: 12px;
     display: block;
     margin-bottom: 5px;
   }
   
   .retro-layout .gradient {
     position: relative;
   }
   .retro-layout .gradient:before {
     z-index: 1;
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: -webkit-linear-gradient(
       top,
       transparent 0%,
       transparent 18%,
       rgba(0, 0, 0, 0.8) 99%,
       rgba(0, 0, 0, 0.8) 100%
     );
     background: -webkit-gradient(
       linear,
       left top,
       left bottom,
       from(transparent),
       color-stop(18%, transparent),
       color-stop(99%, rgba(0, 0, 0, 0.8)),
       to(rgba(0, 0, 0, 0.8))
     );
     background: linear-gradient(
       to bottom,
       transparent 0%,
       transparent 18%,
       rgba(0, 0, 0, 0.8) 99%,
       rgba(0, 0, 0, 0.8) 100%
     );
   }
   
   @media (max-width: 767.98px) {
     .retro-layout .img-5 {
       height: 240px !important;
       margin-bottom: 30px;
       margin-top: 30px;
     }
   }

Step 3: Use the Blog Card Component

Now that you’ve created your BlogCard component, you need to use it in your application. Open src/App.js and replace its content with the following code to display your blog card:

import './App.css';
import BlogCard from './BlogCard';

function App() {
  return (
    <div className="App">
      < BlogCard />
    </div>
  );
}

export default App;

Conclusion

You’ve successfully created a responsive blog card using ReactJS! This card adjusts automatically to different screen sizes, providing a great user experience on both mobile and desktop devices. Feel free to customize the design further or integrate it into your projects. Keep practicing with ReactJS to build even more dynamic and responsive components. If you have any questions or need further assistance, don't hesitate to ask.

Blog Card Live Demo ⟶

That’s a wrap!

I hope you enjoyed this article

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 😊