Day 2/100 - 💳 Build a Clean Credit Card Checkout Form 🎯 (No JavaScript Needed!)

Diya Vyas — Tue, 22 Jul 2025 18:48:50 +0000

Hey Devs! 👋

Welcome to Day 2 of my #100DaysOfUI journey — today I built a clean and colorful Credit Card Checkout Page using just HTML & CSS.

🔥 The goal? Make payment forms not just functional but beautiful and user-friendly too.

🎨** What I Built**
A sleek, modern credit card checkout form including

✅ Billing Information
✅ Credit Card Details (with expiry and CVV)
✅ Address Fields
✅ Payment Summary

🖼️ Preview
Here's a sneak peek of what it looks like 👇

Code Preview:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Credit Card Checkout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Credit Card Checkout</h1>
    <form>
      <section>
        <h2>Billing Information</h2>
        <div class="form-group">
          <label>Full Name</label>
          <input type="text" placeholder="John Doe" required>
        </div>
        <div class="form-group">
          <label>Email Address</label>
          <input type="email" placeholder="john@example.com" required>
        </div>
        <div class="form-group">
          <label>Phone Number</label>
          <input type="tel" placeholder="+1 234 567 8901" required>
        </div>
      </section>
      <section>
        <h2> Credit Card Information</h2>
        <div class="form-group">
          <label>Cardholder Name</label>
          <input type="text" placeholder="John Doe" required>
        </div>
        <div class="form-group">
          <label>Credit Card Number</label>
          <input type="text" maxlength="19" placeholder="1234 5678 9012 3456" required>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>Expiration Date</label>
            <input type="text" placeholder="MM / YY" required>
          </div>
          <div class="form-group">
            <label>CVV</label>
            <input type="password" maxlength="4" placeholder="123" required>
          </div>
        </div>
      </section>
      <section>
        <h2>Billing Address</h2>
        <div class="form-group">
          <label>Street Address</label>
          <input type="text" placeholder="123 Main St" required>
        </div>
        <div class="form-group">
          <label>City</label>
          <input type="text" placeholder="New York" required>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>State/Province</label>
            <input type="text" placeholder="NY" required>
          </div>
          <div class="form-group">
            <label>ZIP/Postal Code</label>
            <input type="text" placeholder="10001" required>
          </div>
        </div>
        <div class="form-group">
          <label>Country</label>
          <select required>
            <option>Select Country</option>
            <option>India</option>
            <option>USA</option>
            <option>UK</option>
            <option>Canada</option>
          </select>
        </div>
      </section>
      <section class="summary">
        <h2>Payment Summary</h2>
        <p>Total Amount: <strong>$100.00</strong></p>
        <button type="submit">Pay Now</button>
      </section>
    </form>
  </div>
</body>
</html>

🛠️ Technologies Used

HTML5
CSS3 (Flexbox, transitions, styling inputs)
No frameworks or libraries!

📚 What I Learned

Organizing form sections with semantic HTML
Creating responsive layouts using flexbox
Styling forms cleanly without JavaScript
UX details: placeholder text, section icons, spacing

🏁 What's Next?
Tomorrow is Day 3, and I’m thinking of building a profile card, dark/light toggle, or maybe a dashboard widget.

Open to suggestions! 👇

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

Diya Vyas — Mon, 21 Jul 2025 12:30:29 +0000

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: Diya Vyas

Day 2/100 - 💳 Build a Clean Credit Card Checkout Form 🎯 (No JavaScript Needed!)

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