https://github.com/ayokanmi-adejola/multi-step-register-form

A fully responsive, accessible multi-step registration form built with modern HTML, CSS, and vanilla JavaScript. This project demonstrates best practices in UI/UX design, form validation, and progressive disclosure for user onboarding. Ideal for learning, prototyping, or adapting multi-step forms in web applications
https://github.com/ayokanmi-adejola/multi-step-register-form

css3 html5 inter-font mobile-first-workflow vanilla-js

Last synced: 8 months ago
JSON representation

A fully responsive, accessible multi-step registration form built with modern HTML, CSS, and vanilla JavaScript. This project demonstrates best practices in UI/UX design, form validation, and progressive disclosure for user onboarding. Ideal for learning, prototyping, or adapting multi-step forms in web applications

• Host: GitHub
• URL: https://github.com/ayokanmi-adejola/multi-step-register-form
• Owner: Ayokanmi-Adejola
• Created: 2025-07-09T14:13:20.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-09-10T13:28:11.000Z (9 months ago)
• Last Synced: 2025-09-30T00:00:38.163Z (9 months ago)
• Topics: css3, html5, inter-font, mobile-first-workflow, vanilla-js
• Language: HTML
• Homepage: https://multi-step-register-form-beta.vercel.app
• Size: 832 KB
• Stars: 6
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

# Multi-step Register Form | devChallenges.io

A modern, responsive multi-step registration form built with HTML, CSS, and JavaScript. This project is a solution to the devChallenges.io Multi-step Register Form challenge.

![screenshot](./thumbnail.jpg)

## Features

- Three-step registration process:

  1. User details (name, email)

  2. Topic selection (checkboxes)

  3. Summary and confirmation

- Responsive design for desktop and mobile

- Professional UI with custom shadows, borders, and typography

- Accessible and keyboard-friendly navigation

- Clean, maintainable code structure

| Desktop | Tablet | Mobile |

|---------|--------|--------|

| ![Desktop](./design/Desktop_1350px-1.jpg) | ![Tablet](./design/Tablet_1024px-1.jpg) | ![Mobile](./design/Mobile_412px-1.jpg) |

## Technologies Used

- HTML5

- CSS3 (with custom properties and media queries)

- JavaScript (vanilla, no frameworks)

- [Inter font](https://fonts.google.com/specimen/Inter) for modern typography

## Getting Started

1. Clone or download this repository.

2. Open `index.html` in your preferred browser.

3. No build steps or dependencies required.

## Folder Structure

```

├── index.html

├── README.md

├── thumbnail.jpg

├── design/

│   ├── Desktop_1350px-1.jpg

│   ├── ...

├── resources/

│   ├── blur-radial.png

│   ├── favicon.ico

```

## Customization

- To change the author info, edit the `.author-info` section in `index.html`.

- To adjust the form steps or add fields, modify the form markup and related JavaScript.

- Colors, fonts, and spacing can be tweaked in the `` section of `index.html`.

## Accessibility

This project follows accessibility best practices:

- Proper label associations for form fields

- Keyboard navigation support

- Sufficient color contrast

- Focus indicators for interactive elements