Build a Article Card

Build a Article Card

Introduction

Hello, developers! I’m thrilled to introduce my latest project: an Article Card web component. This project is a great addition to any website, providing a visually appealing way to display articles, blog posts, or news updates. It’s an excellent opportunity to sharpen your frontend development skills using HTML, CSS, and JavaScript while creating a practical and reusable component.

Project Overview

The Article Card component is designed to showcase articles with an image, title, description, and author information. With a clean and modern layout, it enhances user engagement by making content more visually appealing and accessible. This project demonstrates how to create an elegant article card that can be easily integrated into various web applications.

Features

  • Responsive Design: The Article Card is fully responsive, ensuring it looks great on both desktop and mobile devices.

  • Hover Effects: Subtle hover effects are applied to enhance the interactivity of the card.

  • Customizable Layout: The layout can be easily customized to fit different types of content, making it versatile for various use cases.

Technologies Used

  • HTML: Provides the structure for the Article Card component.

  • CSS: Styles the component to create a visually appealing and responsive design.

  • JavaScript: (Optional) Can be used for additional interactivity, such as expanding content on click or integrating with other components.

Project Structure

Here’s an overview of the project structure:

Article-Card/
├── index.html
├── style.css
└── script.js (optional)
  • index.html: Contains the HTML structure for the Article Card component.

  • style.css: Includes CSS styles to create an engaging and responsive design.

  • script.js: (Optional) Can be used to add interactivity, such as expanding content on click.

Installation

To get started with the project, follow these steps:

  1. Clone the repository:

     git clone https://github.com/abhishekgurjar-in/Article-Card.git
    
  2. Open the project directory:

     cd Article-Card
    
  3. Run the project:

    • Open the index.html file in a web browser to view the Article Card component.

Usage

  1. Open the application in a web browser.

  2. Hover over the card to see the interactive effects.

  3. Customize the content by editing the HTML and CSS files to fit your specific use case.

  4. Add more cards if needed to create a grid or list of articles.

Code Explanation

HTML

The index.html file defines the structure of the Article Card component. Here’s a snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article Card</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="article-card">
        <img src="./assets/images/article-image.jpg" alt="Article Image" class="article-image">
        <div class="article-content">
            <h2 class="article-title">The Future of Web Development</h2>
            <p class="article-description">
                Web development is evolving rapidly with new technologies and frameworks emerging all the time...
            </p>
            <div class="article-author">
                <img src="./assets/images/author.jpg" alt="Author" class="author-image">
                <p class="author-name">John Doe</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS

The style.css file styles the Article Card component, ensuring it’s visually appealing and responsive. Below are some key styles:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.article-card {
    width: 300px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.article-card:hover {
    transform: translateY(-10px);
}

.article-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-content {
    padding: 20px;
}

.article-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.article-description {
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
}

.article-author {
    display: flex;
    align-items: center;
}

.author-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.author-name {
    font-size: 1em;
    font-weight: bold;
}

JavaScript (Optional)

The script.js file can be used to add additional interactivity, such as expanding or collapsing content. Here’s a simple example:

const articleCard = document.querySelector(".article-card");

articleCard.addEventListener("click", () => {
    articleCard.classList.toggle("expanded");
});

Live Demo

You can check out the live demo of the Article Card project here.

Conclusion

Building the Article Card component was a great experience in designing a reusable and visually appealing web component. This project highlights the importance of clean design and responsive layouts in modern web development. By applying HTML, CSS, and optionally JavaScript, we’ve created a component that can enhance the visual appeal and usability of any website. I hope this project inspires you to build your own custom components. Happy coding!

Credits

This project was developed as part of my continuous learning journey in web development.

Author