README.md

Frontend Mentor - Base Apparel coming soon page solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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: github.com/andresgrdn/base-apparel-coming-soon
• Live Site URL: andresgrdn.github.io/base-apparel-coming-soon/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Javascript

What I learned

Form validation process

I have used form invalid event to make a change from normal form style to warning form styles to visualy inform the user that the input is invalid. And I learned about the validity process that occurs when a form is submitted.

Form pseudo classes :valid :invalid and its use

Toggle custom style clases from js file

With the DOMTokenList toggle method I've toggle a class to hidden an element from the DOM. With some help from the DOM and JS.

.hidden {
  display: none;
}

get & post methods from the http protocol:

• The post method works when I have a server listening to the data. It appends the data to the request body and then it's sended to the server. It's recommended to create or update data from a resource.
• The get method works adding the data submited with the URI address as unicode characters & then it's send this new URI to the action address specified into the form action attribute. It's useful to get data from a specified resource.

Button aria label for accesability

I had an accessibility issue when I wanted to use an icon image instead of a text label inside the submit button and searching for a solution, I found the aria-label attribute, this attribute fixed the issue and it opens a new way to think on web development.

<button type="submit" aria-label="Submit email"></button>

Continued development

Toggle custom style clases from js file

This would allow me to make more complex ui without merging styles with functionality.

Useful resources

• height property | MDN docs - This help me when I have troubles with sizing an image whit respect to the parent element.
• form docs | MDN docs - This is an amazing article which helped me understand how to use the form element.
• letter spacing docs | MDN docs - From this article I learn to spacing letters from the styling file.
• background image drawing order | CSSWG drafts - I could fixed an issue with the hover pseudo class on the submit button. When hover the button wasn't changing the background gradient.
• picture element | MDN docs - On this page I learned about responsive image loading, The picture element allows to load different images for different viewport sizes, using the meta attribute.
• Writting a form's user interface | Whatwg - A useful resource to write forms ui.

Author

• Website - Andres Gordon
• Frontend Mentor - @andresgrdn
• Twitter - @andresgrdn