Skip to content

Latest commit

 

History

History
49 lines (30 loc) · 1.93 KB

README.md

File metadata and controls

49 lines (30 loc) · 1.93 KB

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.