https://github.com/qms85/blogpreviewcard
Blog Preview Card
https://github.com/qms85/blogpreviewcard
challenge front-end-development frontend-mentor frontend-mentor-challenge html-css
Last synced: about 1 year ago
JSON representation
Blog Preview Card
- Host: GitHub
- URL: https://github.com/qms85/blogpreviewcard
- Owner: QMS85
- License: gpl-3.0
- Created: 2025-04-08T09:06:34.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-08T10:39:58.000Z (about 1 year ago)
- Last Synced: 2025-05-04T21:06:16.377Z (about 1 year ago)
- Topics: challenge, front-end-development, frontend-mentor, frontend-mentor-challenge, html-css
- Language: CSS
- Homepage: https://qms85.github.io/BlogPreviewCard/
- Size: 336 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Blog preview card solution
This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Tab
# Overview
## The challenge:
Users should be able to:
See hover and focus states for all interactive elements on the page
Desktop View:
Mobile View:
# Links
Solution URL: https://github.com/QMS85/BlogPreviewCard.git
Live Site URL: https://qms85.github.io/BlogPreviewCard/
My process
Built with
Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
# What I learned
Looking at your blog preview card project, there are several impressive aspects worth highlighting:
## 1. Clean and Semantic HTML Structure:
The HTML in index.html is well-organized using semantic elements like ``````, ``````, and appropriate content hierarchy.
This shows good attention to accessibility and SEO practices.
## 2. Sophisticated CSS Hover Effects:
The card hover animation in style.css is particularly elegant:
```
.card:hover {
box-shadow: 12px 12px 0 var(--gray-950);
transform: translate(-4px, -4px);
}
```
This creates a smooth, engaging lift effect that enhances user interaction while maintaining simplicity.
## 3. Responsive Design:
The mobile-first approach with a clean media query breakpoint at 375px shows good responsive design practices.
## 4. CSS Custom Properties:
The use of CSS variables (custom properties) for colors makes the code more maintainable and consistent:
```
:root {
--yellow: hsl(47, 88%, 63%);
--white: hsl(0, 0%, 100%);
--gray-500: hsl(0, 0%, 42%);
--gray-950: hsl(0, 0%, 7%);
}
```
## 5. Performance Optimization:
Using modern image formats (webp) for the avatar image and SVG for illustrations shows consideration for performance.
## Challenges I Faced:
Looking at the blog preview card project, some of the key challenges were:
## 1. Responsive Design Implementation:
The challenge was creating a card that looks good on both mobile (375px) and desktop screens.
This was solved through:
~ Using relative units and max-width constraints
~ Implementing a clean mobile-first approach
~ Creating appropriate breakpoints in the media queries
~ Interactive States
Implementing smooth hover animations was tricky but effectively achieved with:
```
.card:hover {
box-shadow: 12px 12px 0 var(--gray-950);
transform: translate(-4px, -4px);
}
```
This creates an elegant lift effect without disrupting the layout.
## 2. Font Management
~ Handling custom fonts required careful implementation:
~ Using variable fonts for flexibility
~ Ensuring proper font-weight distribution
~ Managing font loading performance
## 3. Accessibility Considerations
The project required attention to:
~ Semantic HTML structure
~ Proper color contrast ratios
~ Interactive element states
## 4. CSS Custom Properties
Setting up a maintainable color system using CSS variables required planning but provided consistency:
```
:root {
--yellow: hsl(47, 88%, 63%);
--white: hsl(0, 0%, 100%);
--gray-500: hsl(0, 0%, 42%);
--gray-950: hsl(0, 0%, 7%);
}
```
# Continued development:
Advanced CSS, Javascript integration, Web Accessibility, Performance optimisation & testing
Author: Jonathan Peters
Website: https://qms85.github.io/MyPortfolio/
Frontend Mentor: https://www.frontendmentor.io/profile/QMS85
Twitter - @yDJJOnnas85
Facebook: https://www.facebook.com/2jonathanpeters
Linkedin: https://www.linkedin/in/2jonathanpeters