This is a solution to the Base Apparel coming soon page 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 the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the
form
is submitted if:- The
input
field is empty - The email address is not formatted correctly
- The
- Solution URL: source code
- Live Site URL: website
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- SvelteKit - Svelte framework
- tailwindcss - CSS framework
- Input elements do not support pseudoelements
- Pseudoelements can only be defined on container elements. Input elements cannot contain other elements hence they do not support pseudo-elements
- Input validation using JavaScript (client-side form validation)
-
Client-side form validation - This helped me use JavaScript alongside HTML for input validation
-
Can I use a :before or :after pseudo-element on an input field? - Allowed me to understand which element types can have pseudo-elements
- Website - Silvanos Eric
- Frontend Mentor - @codexshell
- Twitter - @codexshell