Skip to content

luckyszakul0/FM-product-preview-card-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Note: Delete this note and update the table of contents based on what sections you keep.

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

My process

  1. I took the mobile-first approach to this challenge.
  2. I've done the majority of HTML first, only adding minor things to it later, like the desktop source for picture tag or class names.
  3. Then, I've done the CSS while adding some comments and added CSS reset and a special class for elements that make it easier to use screen readers. Creators of those things are credited in the comments in the code.
  4. After that I done the desktop design with a @media query.

Built with

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

What I learned

During this challenge I mainly polished my CSS and HTML skills a little bit.
Also, I learned some semantic tags in HTML and the picture and source tags. In CSS I used more rems and ems than usual. When I started learning those languages I picked up a habit of sizing everything with pixels and sometimes percents, so the rems and ems skill might come in handy.

<picture>
    <source media="(min-width: 675px)" srcset="images/image-product-desktop.jpg">
    <img src="images/image-product-mobile.jpg" alt="Gabrielle Chanel Perfume preview photo">
</picture>

Continued development

In future projects I plan to learn some more CSS and start Tailwind learning.
If JS is needed I will use jQuery as I'm learning it at the moment. If I will adapt any framework in the future I think it will be Svelte but it's a distant future.

Useful resources

Author

Acknowledgments

Kevin Powell's video Taking on a Frontend Mentor challenge | Responsive Product Preview Card Component on this Frontend Mentor challenge really helped me with optimizing it and adding some semantics to the HTML. I also got to know the resources listed in the Useful resources section.

About

This repo is for a product preview card frontend challenge that can be found on frontendmentor.io

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published