https://github.com/dedo-dev/blog-preview-card
Second challenge on Frontend Mentor Learning Path
https://github.com/dedo-dev/blog-preview-card
css-flexbox css3 custom-properties html5 logical-properties
Last synced: about 1 year ago
JSON representation
Second challenge on Frontend Mentor Learning Path
- Host: GitHub
- URL: https://github.com/dedo-dev/blog-preview-card
- Owner: dedo-dev
- Created: 2024-06-24T02:01:06.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-14T18:10:44.000Z (almost 2 years ago)
- Last Synced: 2024-07-15T02:36:25.910Z (almost 2 years ago)
- Topics: css-flexbox, css3, custom-properties, html5, logical-properties
- Language: CSS
- Homepage: https://dz-blog-preview-card.vercel.app/
- Size: 309 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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)
## Overview
### The challenge
Users should be able to:
- See hover and focus states for all interactive elements on the page
### Screenshot
### Links
- Solution URL: (https://www.frontendmentor.io/solutions/blog-card-using-flexbox-logical-properties-and-fluid-typography-C3XGfD0rwK)
- Live Site URL: [https://dz-blog-preview-card.vercel.app/]
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- BEM
- Logical Properties
- Custom Properties
- Variable Fonts
### What I learned
In this Challenge I learn how to work with **Variable Fonts**, I make a muscle memory with **Semantic HTML** to build a card, with **Logical Properties** and **Custom Properties**.
```html
Learning
HTML & CSS foundations
These languages are the backbone of every website, defining structure, content, and presentation.
Greg Hooper
```
```css
@font-face {
font-family: 'Figtree';
font-weight: 500 800;
font-style: normal;
src: url(./assets/fonts/Figtree-VariableFont_wght.woff2) format('woff2');
}
```
### Continued development
In the future I would like to continue to put in practice my HTML, CSS and JavaScript knowledge.
### Useful resources
- [Convert Variable Fonts](https://https://everythingfonts.com/ttf-to-woff2) - Usefull tool to convert Variable Fonts to woff2 format
- [Getting started with Variable Fonts](https://www.youtube.com/watch?v=0fVymQ7SZw0) - A good video by Kevin Powell on how to getting started with Variable Fonts
- [Using web fonts](https://fonts.google.com/knowledge/using_type/using_web_fonts) - An article to understand how to work with Variable Fonts by Google
- [How to use fit-content](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content) - An mdn web docs to use fit-content, I used it to create the tag
- [How to use box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) - An mdn web docs to use box-shadow, I used it to create a perfect box-shadow of the card
## Author
- Frontend Mentor - [@dedo-dev](https://www.frontendmentor.io/profile/dedo-dev)
- Linkedin - [@daniele-zeppieri](https://www.linkedin.com/in/daniele-zeppieri-0b1a36252/)