The Odin Project - Project: Sign-up Form

This is a solution to the Project: Sign-up Form.

Table of contents

• The Odin Project - Project: Sign-up Form
  • Table of contents
  • Overview
    • Introduction
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
      • HTML
      • CSS
      • User Experience
      • Problem Solving
    • Useful resources
    • AI Collaboration
  • Author
  • Acknowledgments

Overview

Introduction

This project is intended to give you a chance to flex some of the new items you’ve been absorbing over the past few lessons. This time it’s a sign-up form for an imaginary service.

Screenshot

Screenshot desktop version

Screenshot mobile version

Links

• Solution URL: Solution
• Live Site URL: Live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

This project helped reinforce my understanding of HTML forms.

HTML

• Created accessible form using semantic HTML.
• Used proper types (text, tel, password).
• Applied built-in HTML validation with:
  • required
  • pattern
  • autocomplete
  • inputmode
  • minlength
  • min
• Associated every input with its corresponding <label> for better accessibility

<label class="form__label" for="first_name">First name</label>
<input
  class="form__input"
  id="first_name"
  name="first_name"
  autocomplete="given-name"
  inputmode="text"
  maxlength="120"
  pattern="[A-Za-z]{1, 120}"
  placeholder="John"
  required
  type="text" />

CSS

• Build a two-column layout using flexbox.
• Customize input state with pseudo classes
  • :focus
  • :user-invalid
  • :user-valid

.form__input:user-invalid {
  border-color: var(--color-input-invalid);
}

User Experience

• Added clear visual feedback for valid and invalid inputs.
• Added placeholder

Problem Solving

• Practice debugging complex CSS layouts.
• Learned how different validation attributes interact.
• Improve my understanding of regex patterns for form inputs

Useful resources

• How to validate forms? - This helped me to decide validation form design. I really liked this pattern and will use it going forward.

AI Collaboration

I used Claude to generate custom properties.

Author

• GitHub - @AzamAzis
• Twitter - @AzamAzis01

Acknowledgments

Background photo by Alghozy