Frontend Mentor - Product preview card component solution

Hello there, and welcome to my solution for the Frontend Product Preview Card Component Challenge! I've added a touch of magic to make it look fantastic. Take a stroll through and share your thoughts. Happy coding and have a wonderful day!

This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• 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

Desktop Preview

Desktop Actions Preview

Mobile Preview

Links

• Live Site Solution URL: Add live site URL here

My process

So I basically start by adjusting, tweaking and editing the HTML document to my liking,this is where I add divs and wrap plain text with various html tags, until everything is basically wrapped up nicely, and it looks neat.

My process of making websites from that point is usually a little bit messy, and by that I mean that I sometimes tend to write code possibly overcomplicated than it should be, leave duplicate code in different breakpoints, but HEY! it matters that it works and looks almost identical.

Anyways, then I move onto writing the CSS file. This time I used SCSS(SAAS), I wanted to experiment with new stuff, while I have not used it to its full potential with this website, I plan to explore its features in my future projects. Not so long ago, I would start styling my website from Desktop to Mobile, now I do it the opposite way like I should've in the past, cause it's much easier. Throughout thie part, I just style elements bit by bit, add breakpoints one by one, and when I'm nearly reaching the end, then it's just adjusting and tweaking things.

Built with

• HTML5 markup
• SCSS
• Flexbox
• Mobile-first workflow
• React - SCSS (SAAS)

What I learned

Not gonna lie, but I just started with SCSS, I haven't learned much, but for now I learned about custom variables, which I have used to name my colours

    $this-is-a-test:hsl(H, S, L);

.proud-of-this-css {
  color: $this-is-a-test;
}

Apart from that I have learned some cool trick with flex layout, that I just discovered in the previous project I think. Anyways here's how it works I think:

.proud-of-this-div {
    display: inline-flex;
    align-items: center;
    text-align: center;
}

So what this essentially does, is that it acts as flex, but it keeps elements in one line I think, I had to add two aligns so it's perfectly inline with my shopping icon.

Continued development

I am definitely looking forward to exploring the features of SCSS in the future projects. Maybe clean my code in my future projects, remove unused duplicates, etc.

I am also looking forward to trying couple of new stuff:

• PHP
• Node.js
• React.js (I have a book about it, so I'll give it a read)

Useful resources

I havent' used any resources, for making this website, just stackoverflow, but if I find some useful stuff I'll link it down here in the future.

Author

• Website - No portfolio website for now, but I plan to add it and edit all readme files in the future. 😃
• Frontend Mentor - @Dominik Subocz