HTML and CSS Challenges
HTML & CSS: Challenges
Push beyond guided exercises with open-ended challenges.
Each prompt requires planning, layout knowledge, and polished interaction design.
Challenge tiers
- Starter - 30-60 minute builds focused on a single concept.
- Intermediate - multi-section pages combining layout, typography, and responsive behavior.
- Advanced - full experiences with stateful components and accessibility requirements.
Note: "Stateful" means the page remembers user choices, such as an active tab or a toggled card.
Starter ideas
- Reconstruct a newsletter signup card with responsive typography and form validation states.
- Design a pricing comparison table that emphasizes one recommended plan.
- Create a testimonial carousel layout (no scripting) using CSS scroll snap.
Intermediate briefs
- Marketing email capture page with hero, feature highlights, and FAQ accordion.
- Conference schedule page with timeline layout and speaker cards.
- Documentation template with sidebar navigation, breadcrumbs, and code samples.
Advanced builds
- Fully responsive marketing site featuring hero, interactive comparison, testimonial slider, and pricing toggle.
- Dashboard with charts, tables, filters, and theming via custom properties.
- Accessible component library page documenting buttons, form controls, and modals.
Submission tips
- Plan structure with wireframes and component inventories before coding.
- Use Git to track iterations; write notes on challenges encountered.
- Solicit peer feedback, run audits, and iterate for polish.
Note: A component inventory is simply a list of parts you need to build-buttons, cards, forms-so nothing is forgotten.
