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
  • Screenshot
    • Reference Images
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

To build out a crowdfunding product page and get it looking as close to the design as possible.

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

Screenshot

• Mobile
• Desktop

Reference Images

• Mobile
• Desktop

Links

• Solution URL
• Repository URL
• Live Site URL

My process

• I started with just the HTML and CSS.
• In the first version of adding the interactivity I used AlpineJS.
• I switched to Vue.js v2 so that I would have rendered HTML without the template directives.
• NOTE: Because I started with AlpineJS and then switched to Vue.js I did not refactor the HTML into composable Vue components, I simply converted the script and template directives to use Vue.js. If I had started from the beginning with Vue.js then the structure would be very different.
• 2023-05-20 Upgraded to Vue 3 using the composition API.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vue.js - JS library

What I learned

1. How to style the HTML5 progress element

/* Most of these settings affect the progress element for Firefox and removes
 * the defaults (appearance: none) for other browsers.
 *
 * The background-color and border-radius style those parts of the
 * progress element in Firefox.
 *
 * The height and width affects all browsers once the defaults are disabled.
 */
.project__stats-funding-progress progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: rgba(47, 47, 47, 0.05);
  border-radius: 0.5em;
  border: none;
  height: 0.75rem;
  width: 17.4375rem;
}

/* Style the progress value for Firefox. */
.project__stats-funding-progress progress[value]::-moz-progress-bar {
  background-color: #3cb3ab;
  border-radius: 0.5em;
  position: relative;
}

/* Style the progress value for Webkit/Blink. */
.project__stats-funding-progress progress[value]::-webkit-progress-value,
.project__stats-funding-progress progress::-webkit-progress-value {
  background-color: #3cb3ab;
  border-radius: 0.5em;
}

/* Style the progress bar for Webkit/Blink. */
.project__stats-funding-progress progress[value]::-webkit-progress-bar {
  background-color: rgba(47, 47, 47, 0.05);
  border-radius: 0.5em;
}

2. The gradient overlay for the mobile menu was adapted for AlpineJS from work I did on another project. The original work was learned in the Wes Bos JavaScript30 course.
3. When migrating to Vue 3 and the composition API, re-implementing the scroll to the selected pledge proved to be tricky. Using the information from Exploring Vue Refs: A Step-by-Step Tutorial on Vue.js Refs and Best Practices, I was able to devise a way to implement the functionality while using Pinia for state management.

Useful resources

• A Modern CSS Reset
• A Complete Guide to Flexbox
• A Complete Guide to Grid
• The HTML5 Progress Element
• How to use and style progress element in HTML5
• Vue.js
• Responsive Menu Toggle with Alpine JS
• An accessible Alpine.js menu toggle
• Custom Styling Form Inputs With Modern CSS Features
• CSS Button Styling Guide
• Pure CSS Custom Styled Radio Buttons
• Custom CSS Styles for Form Inputs and Textareas
• VueJS Components using scrollIntoView()
• Exploring Vue Refs: A Step-by-Step Tutorial on Vue.js Refs and Best Practices

Author

• Website - www.richardcyrus.com
• Frontend Mentor - @richardcyrus