Project 15: Contact Us Form

CSS Stylist

Builds on these lessons

Architecture Organizing Architecture Scalable Architecture Components Architecture Bem

Step 1 of 2

Project

Organizing by Component

Group every rule for the contact form under one clearly-commented block — /* Component: Contact Form */ — rather than scattering .contact-* rules throughout the file. Treating each UI piece as one self-contained "component" in your stylesheet is the first step toward a stylesheet that scales past a handful of pages.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

/* Component: Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}

.contact-form label {
  font-weight: 600;
}

← Previous Next →