Frontend Mentor - Product preview card component solution

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

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

Links

• Solution URL: Github Repository
• Live Site URL: Github Pages

My process

Built with

• HTML5
• CSS
• Mobile-first workflow

What I learned

I learned about how the CSS display properties work and how they interact with other elements. Another thing I learned is about media queries for mobile design. It is incredible how we can create responsive designs by using this CSS property.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: row;
}

.price-container {
  display: flex;
  align-items: center;
}

Continued development

I will be studying and practicing CSS media queries in order to improve my mobile design skills. Also, I will be reading the documentation of HTML, CSS and JavaScript.

Useful resources

• w3schools - This helped me to understand more about CSS display properties and media queries. I'd recommend it to anyone still learning.

Author

• Frontend Mentor - Alan Delgado
• LinkedIn - Alan Delgado