Frontend Mentor - Pod request access landing page solution

This is a solution to the Pod request access landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Pod request access landing page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshots of design file and production website
      • Given design file
      • Mobile
      • Tablet
      • Desktop
    • Links
  • My process
    • Built with
    • What I learned
      • Use button tag instead of input type submit
      • Inputs always need a label even if there are not visable, and invisiable labels cand be added with area label
      • There are multiple modules with names that only differ in casing can lead to unexpected behavior when compiling
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

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 depending on their device's screen size
• See hover states for interactive elements
• Receive an error message when the form is submitted if:
  • The Email address field is empty should show "Oops! Please add your email"
  • The email is not formatted correctly should show "Oops! Please check your email"

Screenshots of design file and production website

Given design file

Mobile

Tablet

Desktop

Links

• Solution URL: Front End Mentor solution post
• Live Site URL: pod-request-access-landing-page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• React - JS library
• Sass - For styles

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

To see how you can add code snippets, see below:

Use button tag instead of input type submit

  <input
    type="submit"
    value="Request Access"
    className="form__request"
  />

More Semantic

<button className="form__request">Request Access</button>

Inputs always need a label even if there are not visable, and invisiable labels cand be added with area label

aria-label="Enter your email address for podcast access"

There are multiple modules with names that only differ in casing can lead to unexpected behavior when compiling

Before

_main.scss
main.scss_

After

_main-content.scss
main.scss_

Continued development

A class on aria-label. Aria-label feels foreing to me even do I can get the job done with them.

Useful resources

• HTML elements reference - Helped me reference which semantic HTML tag I can use and why.
• Inputs should always have a label - Helped me understand that I need a label for every input even when I don't want to show a input.
• Using the aria-label attribute - Use it in cases where a text label is not visible on the screen.

Author

• LinkedIn - royer adames
• Frontend Mentor - @royeradames

Acknowledgments

Thank you Austin Kelsay for looking into my project, and for your great feedback.