tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
rmcg.dev/projects/FrontendMentor/newbie/pod-request-access-landing-...
History
Robert McGovern 894f0cfd85 corrected errors from html report 2022-09-08 15:30:47 +01:00
..
assets completed mobile and tablet versions, more just hitting design than being responsive 2022-09-08 11:50:04 +01:00
css updated readme and datafile to point to project properly 2022-09-08 15:04:11 +01:00
designs completed mobile and tablet versions, more just hitting design than being responsive 2022-09-08 11:50:04 +01:00
js initial step for pod challenge 2022-09-07 17:18:51 +01:00
screenshots updated readme and datafile to point to project properly 2022-09-08 15:04:11 +01:00
.gitignore added base files for the remaining newbiew projects I have 2022-09-07 10:53:05 +01:00
README-orig.md initial step for pod challenge 2022-09-07 17:18:51 +01:00
README.md updated readme and datafile to point to project properly 2022-09-08 15:04:11 +01:00
index.html corrected errors from html report 2022-09-08 15:30:47 +01:00
preview.jpg added base files for the remaining newbiew projects I have 2022-09-07 10:53:05 +01:00

README.md

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

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"

Screenshot

Here are the screenshots for the complete project. First is the mobile version running at 375x667 mobile

Then the tablet version 768x1024

tablet

Then the desktop version, first without the error state and then with the error state

tablet tablet

Links

My process

Built with

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

What I learned

The approach to this was more difficult than any of the Frontend Mentor challenges that I had approached so far. Basically till now I've only approached the newbie free projects (sometimes working with the figma design file and sometimes not).

Now I have to think about Mobile, Tablet, and Desktop; rather than just Mobile and Desktop.

Also interesting was working without a style guide document + figma doc. This time I just had the figma document, so I had to make more notes for myself. Interesting particularly because it wasn't clear from the design section what weights of Chivo I needed.

I ended up using fixed values for position between the three version with I concede is problematic.

I tried to use properties a lot so that I can just change the values in the :root for each media section. I got a little sloppy towards the end and haven't moved all the values I can into properties. I find that using properties leads to a cleaner CSS file and easier cognitive load.

For email validation I simply used a pattern set on the input field, and then a combination of :invalid, :valid and :placeholder-shown to affect whether the formatting error is show; rather than taking a JavaScript approach. This does mean I have only implemented one of the two error states. (Honestly I had missed there was a second till I was working on this readme)

Continued development

Focus on improving positioning when dealing with three different formats.

Useful resources

Author