Previews
Preview image #1
Preview image #2
Preview image #3
Preview image #4
The challenge
Users should be able to:
- Add their email and submit the form
- See a success message with their email after successfully submitting the form
- See form validation messages if:
- The field is left empty
- The email address is not formatted correctly
- 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
What I learned
- Styling bullet points with
background-image
gives more control over styling withlist-style-type
andlist-style-position
or::marker
. - No way to have a
<picture>
equivalence for<svg>
apparently, and default to usingimg
tag for SVGs. Not as fast as using inline SVGs, but still great to use media queries with.
Continued development
I took a bit too long with the responsive design. I need a lot of practice here.
Useful resources
- Styling list - MDN Docs - Helped with styling
<ul>
and<li>
elements. - Flexbox Order - Ordering flex items.