Frontend Mentor - Ping coming soon page solution

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.

Table of contents

• Frontend Mentor - Ping coming soon page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author

Note: Delete this note and update the table of contents based on what sections you keep.

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
• Submit their email address using an input field
• Receive an error message when the form is submitted if:
  • The input field 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: name@host.tld). The message for this error should say "Please provide a valid email address"

Screenshot

Mobile

Desktop

Links

• Solution URL: Github
• Live Site URL: Vercel

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• SCSS
• Javascript

What I learned

Mostly a fast project, so I used this chance to properly learn how to manipulate svgs. So here are some findings:

• 1 SVGs can be used in multiple ways, the way I prefer is by importing them through xlink, with the SVG def stored in an external file. Here is an example:

  <svg class="icon">
      <use
          xlink:href="images/twitter.svg#icon-twitter"
      ></use>
  </svg>
  

  For the SVG to work this way, it has to be saved with the def tags.

  <svg>
    <defs>
      <symbol id="icon-facebook" viewBox="0 0 32 32">
        <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
      </symbol>
    </defs>
  </svg>

  I think majority of SVGs do not include this when you download them, so it would be good to take note.

• 2 Importing SVGs through xlink allows very easy manipulation with the CSS. For example, to change the color of the SVG, all we need is just this line of code.

  .icon {
        
        fill: $blue;
    }

Another thing I learned was that the pseudo-elements ::after and ::before does not work with the <input> tag. This is because the pseudo-elements only work on container elements i.e. <div>, <label> etc. The <input> element is unfortunately not considered a "container" element.

Useful resources

• Vecta.io,svgontheweb.com - These two articles helped me understand SVGs more in depth
• scottohara.me - This post on the blog helped me understand why the ::after element wasn't working with my <input>

Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.

Author

• Frontend Mentor - @gylim0604