Skip to content

This is a solution to the [card page challenge on Frontend Mentor]

Notifications You must be signed in to change notification settings

NeilNeel/Interactive-card-form

Repository files navigation

Frontend Mentor - Interactive card details form solution

This is a solution to the Interactive card details form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

The challenge

Users should be able to:

  • Fill in the form and see the card details update in real-time
  • Receive error messages when the form is submitted if:
    • Any input field is empty
    • The card number, expiry date, or CVC fields are in the wrong format
  • View the optimal layout depending on their device's screen size
  • See hover, active, and focus states for interactive elements on the page

Screenshot

Links

  • Live Site URL: 🌐

My process

What I learned

This project marked a significant learning journey for me, especially in terms of web development and design. Here are some key takeaways:

Tailwind CSS Deployment For the first time, I successfully deployed a project that utilized Tailwind CSS. Understanding how to set up Tailwind and then deploy the project allowed me to harness the power of Tailwind's utility-first approach for designing and styling my web page.

Author

Acknowledgments

This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.

Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.

About

This is a solution to the [card page challenge on Frontend Mentor]

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published