https://github.com/taannn/frontendmentor-io-card-preview

frontend mentor challenge #2
https://github.com/taannn/frontendmentor-io-card-preview

card css html less

Last synced: 3 days ago
JSON representation

frontend mentor challenge #2

• Host: GitHub
• URL: https://github.com/taannn/frontendmentor-io-card-preview
• Owner: Taannn
• Created: 2023-12-07T07:12:34.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-08T11:56:03.000Z (8 months ago)
• Last Synced: 2025-01-19T16:09:39.575Z (3 days ago)
• Topics: card, css, html, less
• Language: Less
• Homepage: https://taannn.github.io/frontendmentor-io-card-preview/
• Size: 1.07 MB
• 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

![Example Image](./assets/images/live-view.png)

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.

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Desktop-first workflow

- less.css

### What I learned

I discovered less yesterday through the bootcamp I'm in and used it for this frontendmentor challenge, I struggled a lot figuring out how to override styles mostly on the mobile quesry since im still new to less and wanted to try the nesting features so bad, there's variables too but maybe next time. I had fun using it nonetheless and that, the fix i found is that, nesting a lot kind of adds to the specificity of said selector so I think that was the reason I cannot override my desktop styles when i start setting up the mobile version.

### Continued development

Umm I think I will come back to this in a couple of months to fix a couple of code snippets, make it kind of more efficient maybe