Pod is a landing page for a fictional podcast publisher that is currently in its early access phase. The project is a mobile-first, responsive web application built with React, CSS3, and Sass SCSS, and was tested using the React Testing Library(RTL) with Jest. It includes WAI-ARIA attributes for accessibility and features optimal layout for different screen sizes. Interactive elements have hover states for enhanced user experience. The project also includes error message handling for form submissions and visualizes a success modal message upon valid email submission. It adheres to semantic HTML5 markup and follows the BEM methodology for CSS.
- Live Site URL: toki-pod.netlify.app
Users should be able to:
- View the optimal layout for the content 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"
- The email was already submitted should show "This email already has granted access"
- Visualize a success modal message when the form is submitted with a valid email address
- React
- CSS3
- Sass SCSS
- BEM methodology
- Semantic HTML5 markup
- WAI-ARIA attributes
- Mobile-first workflow
- React Testing Library
- Jest
I used the logo.svg file to create the favicon.
- Pixlr E - Cut only the circle part of the logo and saved in png.
- favicon.io - Converted the png into ico and replaced the favicon files in the project's public folder.
Toki Urata - Web Developer based in Canada
- Email: tokiurata@outlook.com
This project is a solution to the Pod request access landing page challenge on Frontend Mentor. Frontend Mentor challenges provide opportunities to improve coding skills by building realistic projects.