Project

Pricing Page Design

Design and implement a responsive login component with fields for username and password, and basic form validation.

Frontend
</>
JavaScript
3-5 hours

Start Building

About This Project

Instructions

In this practice project, you will develop a Pricing Card Component for the creator services app, CreativSync. This app supports creators in managing various aspects of their business, such as invoicing, CRM, revenue tracking, messaging, and brand partnerships.

Your assignment is to build a pricing component layout consisting of a set of pricing cards that match the design provided in the image. These cards will display different subscription plans available to users of CreativSync, detailing the features and costs associated with each plan.

This project can be completed using HTML, CSS, and vanilla JavaScript. You can also use frameworks like React, Vue, or Angular to practice using these technologies, or TypeScript for strongly-typed JavaScript.

Ensure your final product is as close to the design provided as possible.

As you complete the project, focus on writing professional-grade code. Refactor your code for efficiency and adhere to best practices. Practice writing clean, DRY code, choose descriptive variable names, and ensure comments are clear and necessary.

User Stories

Your solution should provide the following functionality to users:

  1. View Pricing Plans: As a potential subscriber, I want to see all available plans, so I can decide which one suits my needs best.
  2. Select a Plan: As a user, I want to easily select a subscription plan, so that I can start using the premium features as soon as possible.
  3. Responsive Design: As a user, I want a similar experience when viewing pricing information on different devices, with the design adjusting dynamically.

Stretch Goals

To enhance the project, consider implementing the following:

  • Plan Upgrade Prompts: Implement a feature that detects when a user is viewing a higher-tier plan and provides a prompt or modal that highlights the advantages of upgrading from their current plan (if logged in and already subscribed to a lower-tier plan). This feature can dynamically suggest the upgrade based on the user's current subscription level.
  • Dynamic Loading: Add functionality where plan details expand dynamically when clicked, providing a smoother user experience.
  • Animated Transitions: Add subtle animations when transitioning between different states in the UI, such as hovering over a plan, selecting a plan, or expanding plan details. This can enhance the visual appeal and make the interaction feel more dynamic and responsive.

Let's Start Building!

This project and many others like it are available with a Curricular account. Get started today.

Sign Up

Already have an account? Sign In

Includes

  • Detailed User Stories
  • Figma Design File
  • Image files of the target layout
  • Starter Code and README file

Skills Practiced

Core HTML, CSS, and JavaScript

  • Semantic HTML and Document Structure
  • CSS Styling
  • Event Handling

Code Quality

  • Clean Code
  • DRY Principle
  • Accessibility

Version Control

Regularly commit your changes to Git, providing clear and concise commit messages.

FAQ

Why should I build this project instead of one from scratch?

In a professional context, you're rarely starting from scratch. Curricular Projects are designed to give you a constrained real world problem so you can focus on practicing the essential skills you'll use as a professional developer, and to surface specific areas to continue studying.

Can I get help if I'm stuck on a project?

Our projects are designed to be a real world assessment of your skills, like the take home assignment during a job interview. Getting yourself unstuck is part of the skills measured. As a result, we offer very little help and direction.

However, if you encounter issues with the setup, or if you find something isn't working right that should be working, you can contact us at support@curricular.dev and we'll help you out.

Do you provide official solutions to projects?

We do not provide official solutions to projects. There are many ways to solve each of our projects. Coding is a journey, so our goal isn't for you to get the "right answer." Instead, our projects are about you flexing your skills to arrive at a solution, practicing talking about your code, and giving you helpful feedback on ways to improve.

Can I get feedback on my work?

Currently, we only provide feedback on capstone projects, through our Code Review service.

The Code Review is a premium service available as an add-on purchase, combining an in-depth review of your code and a practice interview. If your project passes the review and meets all specifications, you'll receive a certificate of completion.

Where can I ask a question that isn't answered here?

Email us at support@curricular.dev or chat with us.

It's Time to Level Up

Start Building