This is my 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.
⚡ This challenge was to build an early access landing page that includes custom form validation.
🚀 I built this using HTML, CSS and Vanilla JS, with the help of Figma for studying the design.
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 addressfield is empty should show "Oops! Please add your email" - The email is not formatted correctly should show "Oops! Please check your email"
- The
- Solution URL: frontendmentor.io/solutions/pod-request-access-landing-page-AN0Cz7pfQ5
- Live Site URL: nix7amcm.github.io/FEM-pod-request-access-landing-page/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Vanilla JS
For this project, I aimed to practice positioning elements without relying on Grid or Flexbox, as it seemed a straightforward exercise in this regard. I only introduced flexbox to the body at the end when adding the footer attribution to ensure it stays at the bottom of the page, separating it from the main content, while keeping it easily visible and accessible.
I adopted a desktop-first styling approach, which I'm most familiar with at the moment. However, I plan to explore a mobile-first approach more in future projects, recognizing its growing popularity. To achieve responsiveness, I employed CSS media queries to adjust styles, visibility, positions, and content based on screen size, from large desktop displays to small mobile screens. My attention to detail was crucial in maintaining a consistent and user-friendly design across all devices. Instead of relying solely on fixed sizes from the design file, I opted for scalability by using the CSS clamp() function for text and some padding, enhancing the page's responsiveness.
I applied the mask images to the backgrounds using ::before pseudo-classes and used transform: translate() to offset elements appropriately. Although there are various approaches to handling layout and responsiveness in this design, I challenged myself to avoid using Flexbox and Grid. While it turned out to be more tricky initially, I persevered and am happy with the result.
I honed my DOM manipulation skills with Vanilla JS, adding logic to interact with the .messages elements in the form. Event listeners and Regex functions ensure that the messages remain hidden, and the relevant message displays based on the submitted value. Additionally, I included an extra message for successful email submissions to improve accessibility and usability for all users.
This project provided an excellent opportunity to practice and enhance a wide range of skills.
-
Clamp calculator - This tool is fantastic for swiftly calculating
clamp()values. You input the minimum and maximum values for the desired viewport range and target values, and it instantly generates the code for you. Just click 'copy' to grab it. Furthermore, there's a built-in font test for you to check the result. You also have the flexibility to enter your values in eitherpxorremand adjust the base starting from16px. It truly streamlines the process and conserves both time and mental effort! -
Media Queries Cheat Sheet - I frequently refer to this for media queries. It's extensive, easy to follow and overall a great resource to have in your bookmarks for quick reference!
-
Hex Color To CSS Filter Converter - I found this fantastic tool for converting any hex colour into its matching
filterproperty. Another great resource for the dev arsenal!