zoxabbasi/product-preview-card_frontend-mentor

Frontend Mentor - Product Preview Card

This is a solution to the Product Preview Card on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

• Used CSS grid and flex to style the page, alongue with variables and locally scoped variables and many other CSS properties.

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS GRID
• CSS FLEXBOX
• Mobile-first workflow

What I learned

What I have learned the most, is the use of picture element and how source tag works with it.

Continued development

I should work more with CSS grid to get a better understanding of it.

Useful resources

• Kevin Powell - Kevin's video tutorial on the same challenge was very helpfull. The way he approches design and styles everything was a great learning experience.

Author

• Website - Talal Abbasi
• Frontend Mentor - @zoxabbasi
• Twitter - @zoxabbasi