A simple, beginner-friendly login page built with HTML, CSS and basic JavaScript. The app features a styled login form with username and password inputs, error feedback, and social media icon links — all presented in a clean, responsive layout. It checks hardcoded credentials (John / 1234) in the browser without a backend and includes UI elements like a “forgot password” link, styled buttons and social login icons (non-functional placeholders).
This front-end project demonstrates fundamental web development skills including form input design and validation, layout styling and layout design as well as static asset integration.
- Styled login form with:
- Username and password inputs
- Error message display for incorrect/empty password
- Submit button with redirect to
account.htmlif correct
- Password validation:
- Prevents access unless password is entered correctly
- Links for:
- Forgot password
- Social login buttons (Facebook, Google, LinkedIn)
- Second page (
account.html) simulates a login success or account page - Responsive layout and styling via external CSS
- HTML5 – page structure and forms
- CSS3 – styling, layout, icons
- Static assets – PNG icons for social login buttons
|
|
- Building clean and minimal login interfaces
- Handling form inputs with semantic HTML
- Linking between multiple pages
- Using custom icons in buttons and layout
- Separation of content (HTML) and presentation (CSS)