Base Apparel coming soon page

This is a solution to the Base Apparel coming soon page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size ✔
• See hover states for all interactive elements on the page ✔
• Receive an error message when the form is submitted if:
  • The input field is empty ✔
  • The email address is not formatted correctly ✔

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Live site

My process

Built with

• HTML5
• Tailwind
• JavaScript
• React

What I learned

During this project, I focused on improving my skills in:

• Responsive Design: Ensuring the layout adapts well to different screen sizes using Tailwind CSS.
• Form Validation: Handling form validation using Formik and Yup for better user feedback.
• Component Reusability: Creating reusable React components and integrating them with Tailwind UI components.

Code Snippets I'm Proud Of:

<!-- HTML for the form -->
<Form onSubmit={handleSubmit} noValidate>
  <label htmlFor="email" className="sr-only">Email Address</label>
  <div className="relative">
    <Field type="email" name="email" placeholder="Email Address" className="peer relative h-12 w-full rounded-full border border-primary-transparent bg-transparent py-3 pl-6 pr-28 text-neutral outline-none placeholder:text-primary placeholder:opacity-50 invalid:border-secondary focus:invalid:border-2" />
    <button type="submit" className="absolute bottom-0 right-0 flex h-full w-16 items-center justify-center rounded-full bg-gradient-secondary text-2xl text-white shadow-md peer-invalid:cursor-not-allowed">
      <img src={iconArrow} alt="icon arrow" />
    </button>
  </div>
</Form>

/* Custom Tailwind CSS utility */
.text-primary {
  color: var(--clr-desaturated-red);
}

Continued development

In future projects, I plan to:

• Deepen my knowledge of TypeScript to improve code quality and reduce bugs.
• Explore advanced React patterns like context and hooks for better state management.
• Enhance form validation by integrating more complex validation rules and user feedback.

Useful resources

• Tailwind CSS Documentation - Essential for understanding utility-first styling.
• Formik Documentation - Great for managing forms and validation in React.
• React Documentation - For React component and state management best practices.

Author

• Website - Smailen Vargas portfolio
• Github - Smailen5
• Frontend Mentor - @ Smailen5
• Linkedin - Smailen Vargas

Acknowledgments

A big thank you to:

• A big thank you to Rupali for the valuable feedback.
• Frontend Mentor: For providing the challenge and valuable feedback.
• The React Community: For their ongoing support and resources.
• Tailwind CSS Team: For the amazing utility-first CSS framework ❤.