This is a submission for the WeCoded Challenge: Celebrate in Code
My WeCoded Landing Page
My landing page aims to celebrate diversity in tech through storytelling, combining:
Engaging Story Display - A Dynamic article grid pulls real DEV posts
Spring Aesthetic - Bloom-inspired colors/animation symbolizing growth
Interactive Celebration - Playful hover effects and impact counters
Accessible Focus - Clear hierarchy and semantic markup
Community Spirit - Historical context and value proposition cards
Goal: Create an inclusive digital space that visually delights while amplifying underrepresented voices and encouraging exploration through DEV's content ecosystem. 🌸💻✨
Demo
How I Built It
Foundation: Structured content with semantic HTML5 for accessibility
Spring Aesthetic: Crafted custom CSS with seasonal colors/animations using CSS variables
Dynamic Content: Integrated DEV API via Fetch, handling loading/error states
Interactive Elements: Implemented hover animations and counter effects with vanilla JS
Responsive Design: Used CSS Grid + media queries for all devices
Performance: Optimized images + minimized render-blocking resources
Personal Touch: Added author attribution + social links
Key Tech: HTML5, CSS3 (Grid/Animations), Vanilla JavaScript, DEV API
Development Time: ~6 hours focused on balancing aesthetics + functionality
Top comments (2)
Nice !!!!
Thanks !