https://github.com/lia-oliveira/fm-product-preview-card-component

Product card project built with semantic HTML5, CSS Grid, Flexbox, and BEM. Features custom properties, CSS variables, and a mobile-first workflow.
https://github.com/lia-oliveira/fm-product-preview-card-component

acessibilidade acessibility css css3 developer-portfolio htm5 html responsive-layout

Last synced: 2 months ago
JSON representation

Product card project built with semantic HTML5, CSS Grid, Flexbox, and BEM. Features custom properties, CSS variables, and a mobile-first workflow.

• Host: GitHub
• URL: https://github.com/lia-oliveira/fm-product-preview-card-component
• Owner: lia-oliveira
• Created: 2024-11-21T18:44:26.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-11-23T03:38:12.000Z (6 months ago)
• Last Synced: 2025-02-07T07:41:32.512Z (4 months ago)
• Topics: acessibilidade, acessibility, css, css3, developer-portfolio, htm5, html, responsive-layout
• Language: CSS
• Homepage: https://fm-product-preview-card-component-theta.vercel.app
• Size: 357 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Product preview card component solution

This is a solution to the [Product preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Frontend Mentor - Product preview card component solution](#frontend-mentor---product-preview-card-component-solution)

  - [Table of contents](#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)

  - [Author](#author)

  - [Acknowledgments](#acknowledgments)

## Overview

### The challenge

Users should be able to:

- View the optimal layout depending on their device's screen size

- See hover and focus states for interactive elements

### Screenshot

Expected result:

![](./solution/desktop-preview.jpg)

Result achieved:

![](./solution/desktop-solution.png)

### Links

- Solution URL: [Product preview card component Repo](https://github.com/lia-oliveira/fm-product-preview-card-component)

- Live Site URL: [Product preview card component Live](https://fm-product-preview-card-component-theta.vercel.app/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- CSS Variables

- BEM

### What I learned

1. When using Google Fonts in an HTML file, if I’m working with font variables, there’s no need to use the classes provided by Google Fonts.

2. Since the default font size for this project is 14px, I set the root font size to 10px using a percentage to simplify converting pixel values to rem.

3. I used BEM for the first time in this project. Since it was small and relatively simple, I took the opportunity to learn this methodology. Initially, I found it verbose, but it made the code much easier to read. I now plan to learn more about it and apply it to future projects.

## Author

- Website - [Github](https://github.com/lia-oliveira)

- Frontend Mentor - [@lia-oliveira](https://www.frontendmentor.io/profile/lia-oliveira)

## Acknowledgments

I’d like to thank [Jye Harry](https://www.frontendmentor.io/profile/jyeharry), a Front-end Mentor user, for providing very constructive feedback on the Recipe Page project and introducing me to BEM.