/sign-up-form-JS

practice exercise to build form validation with Javascript

Primary LanguageHTML

Sign-up Form Project

HTML5 CSS3 JavaScript

Overview

This project is part of the Intermediate HTML and CSS course. The goal was to create a sign-up form for an imaginary service, incorporating various HTML5, CSS, and JavaScript techniques.

Project Summary

The project involved:

  1. Setting Up the Project:

    • Initialized a Git repository to manage the project.
    • Linked HTML and CSS files correctly.

  2. Design and Layout:

    • Used a background image sourced from Unsplash and credited the creator.
    • Incorporated a custom external font for the logo section.
    • Structured the HTML document to scaffold the form layout.

  3. Styling:

    • Implemented a semi-transparent background behind the logo for enhanced readability.
    • Used a specific color scheme for buttons and borders.
    • Applied CSS pseudo-classes like :focus and :invalid to style form inputs dynamically.

  4. Form Validation (JavaScript):

    • Added basic form validation to ensure password fields match.
    • Highlighted invalid inputs using JavaScript.

Technology Used

  • HTML5: Structured the form and page layout.
  • CSS3: Styled the form, including responsive elements and pseudo-classes for interactivity.
  • JavaScript: Added validation and dynamic behavior to the form.

Installation

Clone the repository and open the index.html file in your browser to view the sign-up form.

git clone https://github.com/yourusername/signup-form.git
cd signup-form
open index.html