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 (11)
I created a website modzbig using python automation but now I'm facing an issue that Image are not well optimized what should I do???
That looks great! You can ask the gpts about the issue, and maybe I will check on that fully sometime and let you know how it feels . But Nice website.
Nice !!!!
Thanks !
nice!!!!
Thanks !
Great work. Now you should use React
Yes! Thank you for mentioning it. I have already created another one in React after uploading it to Vercel. Then, I will publish it here.
In the
Why We Celebratepart, are the sharp borders on hover intended? If so, maybe you could animate them to be sharp from rounded. Currently only the borders are sharp, and the cards are rounded.Thank you for noticing! There are some changes I will also need to incorporate here.
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more