https://github.com/yashi-singh-9/blog-card-component
In this Front-end Challenge, I have build a Blog Card Component. This challenge is perfect for you if you've been learning CSS and want to take your CSS skills to the next level by building something new and beginner-friendly.
https://github.com/yashi-singh-9/blog-card-component
css frontend frontendpro-challenge html
Last synced: 2 months ago
JSON representation
In this Front-end Challenge, I have build a Blog Card Component. This challenge is perfect for you if you've been learning CSS and want to take your CSS skills to the next level by building something new and beginner-friendly.
- Host: GitHub
- URL: https://github.com/yashi-singh-9/blog-card-component
- Owner: Yashi-Singh-9
- License: mit
- Created: 2024-11-24T17:29:59.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-27T08:17:26.000Z (5 months ago)
- Last Synced: 2025-01-30T05:24:30.056Z (4 months ago)
- Topics: css, frontend, frontendpro-challenge, html
- Language: SCSS
- Homepage: https://yashi-singh-9.github.io/Blog-Card-Component/
- Size: 2.35 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Blog Card Component
A visually appealing and responsive **Blog Card Component** designed to showcase blog posts with essential information such as title, category, author details, and more. This project was completed as part of a challenge on the FrontendPro platform.
## 🛠️ Technologies Used
- **HTML5**: Semantic and accessible structure for the component.
- **SCSS**: Modern styling with reusable variables and mixins for maintainable and modular CSS.
- **Bootstrap 5**: For layout and responsive utilities.
- **Google Fonts**: Open Sans for elegant typography.
## 🎨 Features
- **Responsive Design**: The card adapts seamlessly to various screen sizes using SCSS media queries and Bootstrap utilities.
- **Dynamic Styling**: Hover effects and transitions for interactive elements such as the category badge.
- **Clean UI/UX**: Simple yet functional layout with an emphasis on readability and aesthetic appeal.
## 📂 Folder Structure
```
.
├── design/ # Assets such as images and icons
│ ├── icon.svg
│ ├── office-setup.jpg
│ └── user-image.png
├── index.html # Main HTML file
├── styles.css # Compiled CSS from SCSS
├── styles.css.map # Source Map file
├── styles.scss # SCSS source file
└── README.md # Project documentation
```
## 🚀 Live Demo
Check out the live demo of the component here: [Blog Card Component](https://yashi-singh-9.github.io/Blog-Card-Component/)
## 🖼️ Preview
**Desktop Design**
**Mobile Design**
*A clean and modern blog card component with responsive features.*
## 🔧 Installation and SCSS Compilation
Follow these steps to set up the project and compile SCSS:
### 1. Clone the Repository
Clone the project repository from GitHub:
```bash
git clone https://github.com/Yashi-Singh-9/Blog-Card-Component.git
```
### 2. Install SCSS Compiler (if not already installed)
To compile SCSS into CSS, you need to install a SCSS compiler. The recommended tool is `Sass`. Install it globally using npm:
```bash
npm install -g sass
```
### 3. Compile SCSS to CSS
Navigate to the project folder and run the following command to compile the SCSS file into CSS:
```bash
sass styles.scss styles.css
```
This will generate the `styles.css` file in the root directory.
### 4. Watch for SCSS Changes (Optional)
To automatically recompile SCSS whenever you make changes, use the `--watch` flag:
```bash
sass --watch styles.scss:styles.css
```
This will monitor the `styles.scss` file for changes and regenerate `styles.css` on every save.
### 5. Open the Project
After compiling the SCSS, open the `index.html` file in your browser to view the blog card component.
---
## 🌟 Challenge Details
This project was completed as part of a FrontendPro platform challenge. The goal was to build a responsive blog card component with the following requirements:
- Include an image, title, category badge, description, and author details.
- Style it with SCSS and incorporate responsive design principles.
- Use a professional font and minimalistic design.
## ✨ Improvements Made
- Enhanced responsiveness with SCSS media queries.
- Added hover effects for interactivity.
- Optimized layout with Bootstrap utilities for quick and clean alignment.
## 🤝 Contributing
Contributions are welcome! If you find a bug or have an idea to improve the component, feel free to open an issue or submit a pull request. For Contribution Steps please visit [Contributing File](CONTRIBUTING.md)
## 📄 License
This project is open source and available under the MIT License. Feel free to use and adapt it as needed.