mntando / Responsive-webpage

Responsive webpage

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
• Author

Overview

Building a responsive webpage is a challenge that requires a lot of planning and thinking. This challenge is a great way to get started with the planning process.

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

Links

• Solution URL: Solution

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I found out that in css you can add conditions for the size of the screen. This is a great way to make your website responsive.

@media screen and (max-width: 600px) {    
    .main {
        height: 90%;
        width: 87%;
    }
    ...
}

Continued development

• Correct padding and margin
• Correct positioning of elements
• Correct overflow

Author

• Frontend Mentor - Ntando
• Discord - mntan
• GitHub - mntando