Skip to content

MaracaraCarlos/Contact-Form-Main

Repository files navigation

Frontend Mentor - Todo app solution

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

Table of contents

Overview

The challenge

Users should be able to:

  • Complete the form and see a success toast message upon successful submission
  • Receive form validation messages if:
    • A required field has been missed
    • The email address is not formatted correctly
  • Complete the form only using their keyboard
  • Have inputs, error messages, and the success message announced on their screen reader
  • View the optimal layout for the interface depending on their device's screen size
  • See hover and focus states for all interactive elements on the page

Screenshot

desktop-design

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Typescript
  • React - JS library

What I learned

Use TypeScript to practice

Author