This is a solution to the PayAPI multi-page website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Receive an error message when the contact form is submitted if:
- The
Name
,Email Address
orMessage
fields are empty should show "This field can't be empty" - The
Email Address
is not formatted correctly should show "Please use a valid email address"
- The
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Desktop-first workflow
- 7-1 Sass Architecture
- BEM
Recalled HTML markup and Sass 7-1 architecture. Used basics Sass features and tried to follow Web accessibility standards. Optimized images for different screens.
Will focus on more advance Sass techniques, and try to use more generic classes in styling.
- Mobile menu - Nice mobile menu designs.
- Form validation - Great article and code base to validate form.
- Frontend Mentor - @wdbyb
- Linkedin - @yuriy-vinivitin