2 - Intermediate
Login and Signup Page
A modern login and signup page with form validation and error handling.
- 📄 Structuring a multi-page layout with login and signup functionality.
- 🔐 Implementing error states and robust input validations.
- 🖋️ Using regular expressions (regex) to validate user inputs like email addresses.
- 🔄 Creating reusable toast/banner systems to display information and error messages.
- 🖼️ Styling layouts to include responsive background images and consistent design.
Login page has a logo displayed at the top of the left column.
Login page includes email address and password inputs with error states for empty values.
Error messages are displayed when inputs are invalid (e.g., invalid email format or empty fields).
A 'Remember Me' checkbox and a 'Forgot Password' link are below the inputs on the login page.
Login page features a 'Log In' button below the inputs and links to the signup page with a 'Create an Account' link.
A banner is displayed at the top of the login page for incorrect email or password combinations.
Signup page has a logo displayed at the top of the left column.
Signup page includes username, email address, and password inputs with error states for invalid or empty values.
Username validation checks for a minimum of 5 characters, required input, and uniqueness.
Email validation checks for a valid email format, required input, and uniqueness.
Password validation checks for a minimum of 7 characters and required input.
Signup page features a 'Create My Account' button below the inputs and links to the login page.
Both pages have a background image on the right side, styled responsively.
Password inputs display characters as asterisks by default.
- 📄 Structuring a multi-page layout with login and signup functionality.
- 🔐 Implementing error states and robust input validations.
- 🖋️ Using regular expressions (regex) to validate user inputs like email addresses.
- 🔄 Creating reusable toast/banner systems to display information and error messages.
- 🖼️ Styling layouts to include responsive background images and consistent design.
Add a password visibility toggle to show/hide the password.
Improve accessibility with proper ARIA roles and labels.
Make both pages responsive for small and medium screens.
Connect the login and signup functionality to a database.
Implement 'Forgot Password' functionality with a page to send a reset email and a page to update the password.
- Click on the 'Download Design' button to get the .fig file.
- Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
- Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
- Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
- Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
- Submit your solution link here and try to get a perfect score!