This is a solution to the Ping 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
- Submit their email address using an
inputfield - Receive an error message when the
formis submitted if:- The
inputfield is empty. The message for this error should say "Whoops! It looks like you forgot to add your email" - The email address is not formatted correctly (i.e. a correct email address should have this structure:
[email protected]). The message for this error should say "Please provide a valid email address"
- The
Desktop:
Mobile:
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
-
Previously to implement the social icons at the bottom of the page I would have put an img tag inside of a button tag and added padding and some other styles to make it look nice. I learned a handy trick of using the
background-imagecss property for displaying an image inside of a button. I found this way was quicker and easier. -
A learning I carried over from the previous challenge I did was the form validation styling. When there is a blank input or an invalid email address and the user clicks "Notify Me", I add styles to a hidden paragraph tag. I leveraged the same thing when a valid email address is submitted, whereby I add a success style to a paragraph tag that reads "Thank you for subscribing to PING's newsletter!" in green.
I'm still getting comfortable with Flexbox and making responsive sites. I'd also like to try using the grid layout in a future challenge to get familiar with that too.
- Using images in buttons - This tip taught me a better way to put images in buttons.
- GitHub - ianwilk20
