Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jomagene/blog-preview-card
Responsive blog preview card solution using HTML, CSS variables, and media queries. Part of a Frontend Mentor challenge.
https://github.com/jomagene/blog-preview-card
css-mediaquery css-variables html-semantics mobile-first
Last synced: about 2 months ago
JSON representation
Responsive blog preview card solution using HTML, CSS variables, and media queries. Part of a Frontend Mentor challenge.
- Host: GitHub
- URL: https://github.com/jomagene/blog-preview-card
- Owner: Jomagene
- License: mit
- Created: 2024-08-08T02:47:59.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T17:48:32.000Z (5 months ago)
- Last Synced: 2024-08-21T19:56:35.290Z (5 months ago)
- Topics: css-mediaquery, css-variables, html-semantics, mobile-first
- Language: CSS
- Homepage: https://jomagene.github.io/Blog-preview-card/
- Size: 344 KB
- Stars: 2
- 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](https://www.frontendmentor.io/challenges/blog-preview-card-ckPaj01IcS). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- See hover and focus states for all interactive elements on the page
### Screenshot
### Links
- Solution URL: [Add solution URL here](https://your-solution-url.com)
- Live Site URL: [Blog-preview-card](https://jomagene.github.io/Blog-preview-card/)
## My process
### Built with
- Semantic HTML5 markup
- **CSS custom properties (variables)**
- **CSS media queries**
- Flexbox
### What I learned
This project deepened my understanding of CSS custom properties (variables) and media queries, which are crucial for creating maintainable and responsive designs. Here are some examples:
```css
/* Variables */
:root {
--yellow: hsl(47, 88%, 63%);
--white: hsl(0, 0%, 100%);
--gray-500: hsl(0, 0%, 42%);
--gray-950: hsl(0, 0%, 7%);
--bold: 800;
--normal: 500;
}
/* Media Queries */
@media (min-width: 576px) {
.button,
.publish-date,
.name {
font-size: 14px;
}
.title {
font-size: 24px;
}
.description {
font-size: 16px;
}
}
```
### Continued development
In future projects, I plan to continue leveraging CSS variables for theme management and consistency across designs. Additionally, I will focus on refining my use of media queries to ensure optimal responsiveness on a variety of devices.
### Useful resources
- [CSS Tricks](https://css-tricks.com) - This site has been invaluable for understanding and implementing CSS custom properties and media queries.
- [MDN Web Docs](https://developer.mozilla.org) - A comprehensive resource for all things web development, including detailed documentation on CSS variables and media queries.
## Author
I'm Joel Magene. My profile here:
- Frontend Mentor - [@Jomagene](https://www.frontendmentor.io/profile/Jomagene)
- Twitter - [@Jomagene](https://www.twitter.com/Jomagene)
## Acknowledgments
Thanks to Frontend Mentor for providing such an excellent platform for honing web development skills. Also, a shoutout to the community for their constant support and feedback.