Frontend Mentor - Crowdfunding product page solution

This is a solution to the Crowdfunding product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

The challenge

• No access to design files, attemp pixel-perfect

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements
• Make a selection of which pledge to make
• See an updated progress bar and total money raised based on their pledge total after confirming a pledge
• See the number of total backers increment by one after confirming a pledge
• Toggle whether or not the product is bookmarked (not possible)

Solution

• Built with: HTML CSS JS
• Mobile-first workflow

Working in fm-crowdfunding-product-page repository

Clone this project to your machine

Make sure you have Git + NodeJS installed in your system, open new terminal, run the following command:

git clone https://github.com/haquanq/fm-crowdfunding-product-page.git

Then, run npm install to install all dependencies.

npm install

Development workflow

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

npm run dev