Day 1/100 — Build a Clean & Responsive Sign Up Page with Just HTML & CSS! 🎯 – No JavaScript Needed!!

Hey folks! 👋

Welcome to Day 1 of my “100 Days of UI” challenge — where I’ll be building one UI component every single day to sharpen my front-end and design skills 🎨💻.

For the very first day, I decided to keep it simple yet practical:

📌 A clean & responsive Volunteer Sign Up form — made entirely with HTML and CSS (no JavaScript, no frameworks, just raw frontend magic 🪄).

—

🎯 What I Built:

A Sign Up page for a fictional volunteering platform — perfect for NGOs, student clubs, or any event where people need to register quickly and cleanly.

💡 Features:

✅ Minimalist & mobile-friendly layout
✅ Full Name, Email, Phone Number, Password & Confirm Password fields
✅ A dropdown for preferred volunteering area
✅ Terms & Conditions checkbox
✅ A bold CTA: “Sign Up & Join the Cause”

📸 Here’s a sneak peek:

(not an image person? scroll to the code ⬇️)

—

🧩 The Code (Pure HTML & CSS):

No libraries, no JavaScript — just the good ol' basics.

Code Preview:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Volunteer Sign Up</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      background: #f2f4f8;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    .signup-container {
      background: #fff;
      padding: 30px 40px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 400px;

    }

    .signup-container h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    .signup-container input, .signup-container select {
      width: 100%;
      padding: 12px;
      margin: 8px 0 15px 0;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

    .signup-container label {
      font-size: 14px;
      color: #555;
    }

    .signup-container button {
      width: 100%;
      padding: 12px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      margin-top: 10px;
    }

    .signup-container button:hover {
      background-color: #45a049;
    }

    .signup-container .footer-text {
      text-align: center;
      margin-top: 15px;
      font-size: 14px;
    }

    .signup-container .footer-text a {
      color: #4CAF50;
      text-decoration: none;
    }

    .signup-container .footer-text a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

<div class="signup-container">
  <h2>Volunteer Sign Up</h2>
  <form>
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" required>

    <label for="phone">Phone Number</label>
    <input type="tel" id="phone" name="phone" required>

    <label for="password">Password</label>
    <input type="password" id="password" name="password" required>

    <label for="confirm">Confirm Password</label>
    <input type="password" id="confirm" name="confirm" required>

    <label for="interest">Volunteering Area</label>
    <select id="interest" name="interest" required>
      <option value="">-- Select --</option>
      <option value="environment">Environment</option>
      <option value="education">Education</option>
      <option value="healthcare">Healthcare</option>
      <option value="animals">Animal Welfare</option>
    </select>

    <label>
      <input type="checkbox" required> I agree to the Terms and Conditions
    </label>

    <button type="submit">Sign Up & Join the Cause</button>
  </form>

  <div class="footer-text">
    Already have an account? <a href="#">Login</a>
  </div>
</div>

</body>
</html>

📱 It’s Responsive Too!

This layout adjusts cleanly across screen sizes. I’ve kept the structure flexible so you can easily plug this into any page or modal.
—

🚀 What’s Next?

This is just Day 1 — so much more to come:
~ Modals
~ Dashboards
~ Cards
~ Components in React
~ Animations with Framer Motion
...and more!

If you’re also doing a UI challenge or want to learn along with me — follow along, drop a like, or share ideas! 🙌

Let’s build, one day at a time. 💪

See you on Day 2! 🚀

DEV Community

Day 1/100 — Build a Clean & Responsive Sign Up Page with Just HTML & CSS! 🎯 – No JavaScript Needed!!

Top comments (0)