Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/paatre/product-preview-card-component-main

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/paatre/product-preview-card-component-main
Owner: paatre
Created: 2022-08-18T17:39:56.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-08-19T20:59:56.000Z (over 2 years ago)
Last Synced: 2023-10-08T08:32:49.637Z (about 1 year ago)
Language: CSS
Size: 282 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

- [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:

- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements

### Screenshot

![Screenshot of the page](./screenshot.jpg)

### Links

- Solution URL: [GitHub](https://github.com/paatre/product-preview-card-component-main)
- Live Site URL: [GitHub Pages](https://paatre.github.io/product-preview-card-component-main)

## My process

### Built with

- Semantic HTML5 markup
- CSS custom properties
- BEM naming convention
- SCSS
- Flexbox
- Mobile-first workflow

### What I learned

There's a lot what I learned. I took my time learning the things I needed for this challenge. Here's some of them:

#### BEM naming convention

This was the first time I tried the BEM naming convention. Also, in the [last challenge](https://github.com/paatre/qr-code-component-main), I decided I'm going to go with SCSS, which I love to use for stylesheets, in all upcoming challenges. I didn't expect how well these two go together! The SCSS file is concise and easy to read. This was something I'm really eager to add to my developer toolbox in later projects.

```html

Gabrielle perfume from CHANEL

Perfume

Gabrielle Essence Eau De Parfum

A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.

$149.99
$169.99

Add to Cart

```
```scss
.product-card {
...

&__image {
...
}

&__info {
...
}

&__category {
...
}

&__name {
...
}

&__description {
...
}

&__price-group {
...
}

&__discounted-price {
...
}

&__original-price {
...
}

&__button {
...
}
```

#### How to make responsive images

First I learned about `img` tag's `srcset` attribute. Then I understood it's not going to work in this project which is when I found the `picture` tag. It was the answer to my needs so I used it with choosing different images to desktop and mobile. I did have some problems with the `img` inside `picture`, though. The `picture` element had bigger height than the `img` element and for some time I didn't know how to solve the problem. Until I found the answer from Stack Overflow: [https://stackoverflow.com/questions/66087045/picture-element-has-bigger-height-than-the-img](https://stackoverflow.com/questions/66087045/picture-element-has-bigger-height-than-the-img)

> Because as an inline-element, the image is vertically aligned at the baseline, which leaves some space below it. Just add `display: block` to the image to avoid that.

Need to remember this in the future! That said, setting `vertical-align` to `middle` works also. If I need an inline `img` element that I can't transform as a block element, the first solution doesn't work. But in this project it did!

This was something I also learned about `source` element:

> Required if the `source` element's parent is a element, but not allowed if the `source` element's parent is an `audio` or `video` element.

How about that!

### Continued development

I noticed nesting blocks with BEM and SCSS is an area which may have a better way of doing it than what I did. I found resources that helped me forward with it but I need to check if there's more advanced syntaxes for it.

Horizontal responsive design is something that usually gets a lot of notice but I want to be better with vertical responsiveness.

### Useful resources

- [BEM and SASS: A Perfect Match](https://andrew-barnes.medium.com/bem-and-sass-a-perfect-match-5e48d9bc3894) - The resource that made me realize the possibilities with BEM and SCSS.
- [BEM CSS Tip: Dealing with grandchild elements](https://andrew-barnes.medium.com/bem-css-tip-dealing-with-grandchild-elements-d7378b51e722) - Helped me with nesting BEM elements.
- [MDN: Responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) - The definitive information I needed to make responsive images work in this project. A great help!

## Author

- GitHub - [@paatre](https://github.com/paatre/)
- Frontend Mentor - [@paatre](https://www.frontendmentor.io/profile/paatre)
- Twitter - [@teemuviikeri](https://twitter.com/TeemuViikeri)