https://github.com/je-jo/blog-preview-card

Frontend Mentor Challenge #14
https://github.com/je-jo/blog-preview-card

css frontend-mentor html

Last synced: 3 days ago
JSON representation

Frontend Mentor Challenge #14

• Host: GitHub
• URL: https://github.com/je-jo/blog-preview-card
• Owner: je-jo
• License: mit
• Created: 2024-02-11T18:57:42.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-02-16T18:57:03.000Z (9 months ago)
• Last Synced: 2024-02-17T11:37:44.949Z (9 months ago)
• Topics: css, frontend-mentor, html
• Language: CSS
• Homepage: https://je-jo.github.io/blog-preview-card/
• Size: 181 KB
• Stars: 0
• 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)

  - [Observations](#obsevations)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

### The challenge

Users should be able to:

- [x] See hover states for interactive elements

### Screenshot

![](./screenshot.png)

### Links

- [Solution](...)

- [Live](https://je-jo.github.io/blog-preview-card/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

### Observations

I used this small project to get back on track after a long pause.

### Useful resources

- [google web fonts helper](https://gwfh.mranftl.com/fonts) - A Hassle-Free Way to Self-Host Google Fonts.

- [Box Shadows](https://box-shadow.dev/) - a simple tool to generate box shadows.

- [Fluid Typography Tool](https://fluidtypography.com/) - for easily calculating fluid font sizes.

- [Solutions to Replace the 12-Column Grid](https://moderncss.dev/solutions-to-replace-the-12-column-grid/) - a great article by Stephanie Eckless on fluid grid containers.

- [PerfectPixel](https://www.welldonecode.com/perfectpixel/) - a Chrome extension for comparing website with design image.

## Author

- [Github](https://github.com/je-jo)

- [LinkedIn](https://www.linkedin.com/in/jelena-jovicic/)

- [Frontend Mentor](https://www.frontendmentor.io/profile/je-jo)

- [Codepen](https://codepen.io/je-jo)

- [Twitter](https://twitter.com/jelena_jo_)