Create a Responsive Blog Card with React JS

By Faraz - September 06, 2024

Learn how to create a responsive blog card using ReactJS in this easy-to-follow guide.

Join us on Telegram

Read Also how-to-create-a-scrollable-sticky-sidebar-with-html-css-and-javascript.webp

How to Create a Scrollable Sticky Sidebar with HTML, CSS, and JavaScript

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:

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.
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.

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;

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 ⟶

Read Also Creating a Fast Food Restaurant Landing Page with HTML and CSS.webp

Creating a Fast Food Restaurant Website with HTML and CSS

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 😊

Tags: create a responsive blog card using reactjs, how to build a blog card with reactjs, responsive blog card design in reactjs, reactjs, blog card, responsive design, css card component

End of the article

Latest Post

Create Car Registration System Using HTML, CSS, and JavaScript

by Faraz - December 08, 2024

Learn how to create a simple car registration system with HTML, CSS, and JavaScript in this easy step-by-step guide. Build a functional and attractive form with minimal code.