Frontend Mentor - Newsletter sign-up form with success message solution

This is a solution to the Newsletter sign-up form with success message 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:

• 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

Screenshot

Links

• Solution URL: GitHub Link Url
• Live Site URL: Render Page Url

My process

Built with

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

What I learned

While building this project i learned how to work with and style the picture element. I used the picture element to display various images based on the screen width.

<picture class="card__rightSide">
         <source media="(min-width: 1001px )" srcset="/assets/images/illustration-sign-up-desktop.svg">
         <source media="(max-width: 1000px )" srcset="/assets/images/illustration-sign-up-mobile.svg">
        <img
          src="/assets/images/illustration-sign-up-desktop.svg"
          alt="Illustration to beautify the page"
        />
</picture>

picture{
  display: block;
  width: 30%;
  height: auto;
  align-self: flex-start;

    img{
      width: 100%;
    }
}

Continued development

While working on future projects, I'll love improve my mobile first responsive web development

Useful resources

• HTML <picture> Element - This helped me for XYZ reason. I really liked this pattern and will use it going forward.

Author

• Frontend Mentor - @inspikalu
• Twitter - @inspikalu