Set up 100 Days UI Challenge repository structure with Day 1 example

[Copilot]

Repository setup for organizing and sharing 100 daily UI challenges on CodePen with community ratings.

Structure

• Documentation: README, CONTRIBUTING (rating/support guidelines), QUICKSTART (template usage), catalog/progress tracker
• Template system: templates/challenge-template/ with HTML/CSS/JS boilerplate for rapid challenge creation
• Challenge organization: challenges/day-XXX/ structure with individual READMEs and CodePen link placeholders
• Automation-ready: .gitignore and copy-paste workflow documented in QUICKSTART

Day 1 Example

Functional sign-up form demonstrating the pattern:

• Form validation with visual feedback (red/green borders)
• Password strength indicator (weak/medium/strong)
• Animated success state overlay
• Responsive layout with CSS variables for theming

challenges/day-001/
├── README.md       # Challenge description, CodePen link, learnings
├── index.html      # Semantic form structure
├── style.css       # CSS animations, custom properties
└── script.js       # Validation logic, strength checker

Screenshots

Initial State

Validation + Password Strength

Success Animation

Usage

1. Copy template: cp -r templates/challenge-template challenges/day-002
2. Customize HTML/CSS/JS
3. Upload to CodePen, add link to README
4. Update index.md progress tracker

Original prompt

i am taking up the 100days of ui challenge with ai and i am posting or adding the code here and in the codepen so that people can rate and support,

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.