Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

Introduction

This is my first practice on building a webpage with Front-End Mentor. This project was to hone in my skills on HTML, CSS and JS.

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

This is a current screen shot of what the page looks like.

Links

• Solution URL: (https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa)
• Live Site URL: (https://imcbee.github.io/Front-End_Mentor-Product_Preview_Card_Component/)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• a little but of JS

What I learned

What I learned was putting together what HTML and CSS understanding that I know from the time I started and completed this project. I would like to get better at HTML, CSS and JS and I will continue with more projects from Front-End Mentor.

Useful resources

• W3 Schools

Author

• Frontend Mentor - @imcbee

Acknowledgments

Thank you friends in the GA SEI program for teaching me how to work through CSS challenges!!