Project

Testimonial Carousel

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

Frontend
</>
JavaScript
3-5 hours

About This Project

Instructions

In this practice project, you will develop a Testimonial Carousel for the creator services app, CreativSync. This app helps creators manage various aspects of their business, including invoicing, CRM, revenue tracking, messaging, and brand partner discovery.

The carousel will showcase testimonials from creators who have benefited from these features, to help other customers understand the impact the product.

Your assignment is to build an interactive carousel that cycles through customer testimonials. These testimonials should highlight the app's key features and provide real-world insights into how CreativSync is beneficial for creators.

It’s possible to complete this project entirely using HTML, CSS, and vanilla JavaScript. If you wish, you may use a library or framework React, Vue, or Angular if you want to practice any of those, or as an alternative, use TypeScript to practice strongly-typed JavaScript.

Try to make your finished product look as much like the provided designs as possible.

Aim for professional-grade code in your solution. Refactor your code so it's efficient and adheres to best practices. Practice test-driven development, write DRY code, choose clear variable names, ensure all comments are explicitly needed and are clear.

User Stories

Ensure your code delivers the following functionality to your users:

  1. View Testimonials: As a visitor, I want to see various testimonials from creators so that I can understand how others are benefiting from using CreativSync.
  2. Navigate Testimonials: As a visitor, I want to manually navigate through the testimonials using previous and next buttons.
  3. Automatic Play: As a visitor, I expect the testimonials to automatically transition every few seconds so that I can view the testimonials without manual input.

Stretch Goals

To go above and beyond, consider adding one or more of the following features:

  • Add touch swipe functionality for mobile users.
  • Implement accessibility features like keyboard navigation and ARIA roles for better accessibility.
  • Improve the performance of the carousel by implementing lazy loading for images.

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
  • Responsive Design
  • DOM Manipulation
  • Event Handling
  • Arrays and Objects
  • JavaScript Timing

Code Quality

  • Clean Code
  • DRY Principle
  • Accessibility

Version Control

Commit your code frequently, and practice writing good 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