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

• Project overview
• Development workflow
• Working in this repository

🌅 Project overview

Challenge equirements

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Todo

Accessibility

• Responsive accross different devices
• Interactive elements have clear indicator when focused
• Content such as price is announced properly

Preview

🌠 Development workflow

Approach

Site built with mobile-first workflow to prioritize mobile devices, made accessible using ARIA Authoring Practices Guide (APG).

Tools

• HTML + CSS: vanilla CSS for styling.
• Browsersync: live development server (sync files changes).

Deployment

• Deployed on github page using Github Actions (manually triggered).

🧑‍🚀 Working in this repository

Presequisites

Having these tools installed:

• Git (prefer lastest LTS version)
• NodeJS (prefer latest LTS version)

Clone this project to your machine

Open new terminal, run the following command:

git clone https://github.com/haquanq/fm-product-preview-card-component.git

Then, run npm install to install all dependencies.

npm install

Start development server

In terminal, run npm run dev to start development server:

npm run dev