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.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

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 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

Links

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow
• React - JS library

What I learned

During the course of this project, i understand more on the use of component and state management. Also, i waa able to grasp how styles affect the general layout of the pages,and the individual component. There are of course little victories i was able to have, but the major ones are already listed.

Continued development

For continued development of this project, id like to try the use of the context api with hooks to properly pass around states and funnctions

Author

• Website - Ndulue Paschal
• Frontend Mentor - @Haybuka
• Twitter - @haybukarh