Assignment
For this deliverable, we submitted a draft of our project as a "static mockup" — the completed page design with all HTML/CSS work done, but no interactivity (no JavaScript/React yet).
What We Built
Our Hackathon Organizer app includes multiple pages/views:
- splash.html - Landing page with "Plan Your Hackathon in One Place" hero and Get Started button
- index.html - Main dashboard (primary page where users interact with tasks, teams, and milestones)
- login.html - Login form with email/password and Google sign-in option
- register.html - Registration form with name, email, password fields
- features.html - Feature overview page
- how-it-works.html - How it works explanation
- task.html - Task management view
- teams.html - Team management view
- milestones.html - Milestone tracking view
We put index.html as the dashboard since it's the primary page where users spend most of their time. The landing page is at splash.html since users only see it once before logging in.
Requirements Met
Content and HTML Structure
- Multiple pages with hyperlinks between them (in both directions)
- All pages share a unified theme and CSS file
- Header with app name and footer with copyright
- Meta elements: author, description, favicon, title
- 3+ images and media content
- Form elements for user input
Site Style and CSS Structure
- External CSS stylesheet with 20+ rules
- Custom colors, fonts/sizes, margins/padding
- Flexbox/grid for non-standard layout
- Polished, readable, and consistent appearance
Accessibility
- Semantic HTML elements (
<main>, <section>, <nav>)
- Hierarchical headings (no skipped levels)
- Alt attributes on all images
- Labels on form inputs with
for attribute
- Sufficient color contrast
Responsive Design
- Viewport meta tag specified
- Media queries for small and large screens
- Mobile-first CSS approach
- Layout meaningfully different on different screen sizes
Links