Frontend Mentor - Contact form 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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Live Site URL: accessible-contact-form
• Solution URL: null

My process

Built with

• Semantic HTML5 markup
• CSS custom utility classes
• Mobile-first workflow
• Flexbox

What I learned

1. Accessibility implementation

<h1>Allow screen readers to announce legend</h1>
<fieldset aria-labelledby="query-type">
    <legend id="query-type" class="labels d-block">
        Query Type
    </legend>
</fieldset>

<h2>Add radio buttons' wrapper to tab order and make it focusable.</h2>
<p tabindex="0">
    <input type="radio"/>
    <label></label>
</p>

/* Add focus to button when user is on keyboard only */
button:focus-visible {
	outline-color: #8fe8b9;
}

2. How to reduce css redundancy

• Implemented Inheritance, group selectors, utility and reusable classes shown below:
  1. Utility Classes Defined:
     • .d-block: Sets the display property to block.
     • .field-txt: Sets the font size to 1.2rem.
     • .width-100: Sets the width to 100%.
     • .txt-centered: Aligns text to the center.
     • .align-vertical: Aligns items vertically in a flex container.
  2. Reusuable Classes Defined:
     • .labels: Styles labels in the form.
     • .button: Styles the button element.
     • .unique-label: Styles unique labels.
     • .radio: Styles the wrapper of radio inputs and their labels

Continued development

• Practice more responsive designs, media queries and flex: ; shorthand property
• Javascript form validation

Author

• LinkedIn - Amina Yahaya
• Frontend Mentor - @Amiyahayadev
• Twitter - @ami_dev
• Medium - @the-intoverts-ikigai