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.
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
- The
- Solution URL: github.com/andresgrdn/base-apparel-coming-soon
- Live Site URL: andresgrdn.github.io/base-apparel-coming-soon/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Javascript
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>
Toggle custom style clases from js file
This would allow me to make more complex ui without merging styles with functionality.
- 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.
- Website - Andres Gordon
- Frontend Mentor - @andresgrdn
- Twitter - @andresgrdn