This is the BEST solution to the Frontend Mentor's Crowdfunding Product Page challenge. Built with HTML, SCSS, and JavaScript, this project features a stunning, pixel-perfect interface and UX. Explore the live project and source code to get inspired and create your own solution.
- HTML
- SCSS
- JavaScript
- Vite
1. Highly optimized for better performance.
- Bundled and minified HTML, SCSS, and JS files for faster load times
- Optimized images to reduce file size without sacrificing quality
- Local fonts used to reduce loading time and improve page speed
- Preloading of fonts and resources to improve perceived performance and reduce latency
- Responsive design for optimal display on all devices.
- Form validation for error-free data submission.
- Updates data after the user pledges for accurate tracking.
- Disables pledge cards after all units have been claimed.
- Beautiful and smooth transitions/animations for a better user experience.
To keep track of my progress, I recorded each task in my Notion database and monitored it on a Kanban board. For each task, I created a new branch with the name of the functionality to be built, merged it with the main or parent branch, and then deleted it. This helped me to stay organized and on top of my workflow.
I began with a mobile-first approach, structured my SCSS files using a modified 7-1 pattern and used BEM convention to name my classes. I then established global variables for design-related values like colors, font-weights, etc. And created some utility mixins, functions, and extends for common tasks.
Afterwards, I created the main layout components of my webpage, including the header, navigation menu, support section, stats section, and about section. After that, I added the functionality for toggling the bookmark button, then created the select reward popup and reward cards with custom radio buttons, a dropdown menu, autofocus on the pledge input and scroll into view functionality, among others, for better UX.
I also created form validations with custom error messages and the thank you popup. Then I set up a global state to track the user’s pledge data and update the stats (total pledge, total backers, units left, progress bar, etc.) every time he entered a pledge.
NOTE: Throughout the development process, I made it a priority to regularly refactor and add comments to the code, ensuring it was fast and easy to understand for my future self.