Free
1 - Beginner
Price Comparison Page
Pricing page with cards listing prices and features for 3 tiers
📝 Overview
Design a professional Pricing Page for a fitness tracking website, Fitpulse, to showcase subscription plans.
This beginner-friendly challenge includes:
• A navbar with links, a search input, and the Fitpulse logo.
• Three pricing cards—Basic, Professional, and Athlete—with the Professional card highlighted as "Best Value."
• A green pricing label, title, and subtitle at the top.
• A footer with navigation links and copyright text.
You'll learn essential layout techniques, component design, and interactivity with CSS or Tailwind. 💡📦
🎓 Learnings
- 💡 Structuring layouts using Flexbox or Grid.
- ✍️ Working with typography for titles, subtitles, and labels.
- 🔁 Creating reusable components like pricing cards.
- 🔀 Building interactive UI elements using JS or React.
- 🎨 Styling visually appealing UI with CSS or Tailwind.
✅ Project Checklist
Navbar includes links, a search bar, and the Fitpulse logo.
Footer includes links, copyright text, and the Fitpulse logo.
Pricing label, title, and subtitle are at the top.
Toggle to switch between monthly and yearly pricing is present.
Three pricing cards are present with Professional emphasized as 'Best Value.'
Each card includes plan name, price, features, and a buy button.
🎓 Learnings
- 💡 Structuring layouts using Flexbox or Grid.
- ✍️ Working with typography for titles, subtitles, and labels.
- 🔁 Creating reusable components like pricing cards.
- 🔀 Building interactive UI elements using JS or React.
- 🎨 Styling visually appealing UI with CSS or Tailwind.
🌟 Bonus Features
Implement a working yearly/monthly pricing toggle.
Add a dark mode toggle for the page.
Animate the pricing cards on page load.
Add hover effects to the 'Buy Now' buttons.
Ensure responsive design for all screen sizes.
🛠️ Instructions
- Click on the 'Download Design' button to get the .fig file.
- Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
- Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
- Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
- Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
- Submit your solution link here and try to get a perfect score!
🔎 Check out the FAQ page for any questions regarding challenges and solutions.