This is a submission for the WeCoded Challenge: Celebrate in Code
My WeCoded Landing Page
Demo
How I Built It
Introduction
The tech industry thrives on innovation, but true progress comes when diverse voices are heard and celebrated. WeCoded is a powerful initiative that highlights the stories of underrepresented individuals in tech—those who have overcome barriers, achieved remarkable milestones, and paved the way for others. This challenge invites developers to create a dynamic and engaging landing page for dev.to/wecoded, a permanent home for this annual celebration.
In this blog, I’ll share a step-by-step guide to crafting a landing page that not only showcases inspiring stories but also fosters inclusivity and empowerment. Whether you’re an ally or part of an underrepresented group, this project is an opportunity to amplify voices that deserve recognition.
Understanding the Mission
The WeCoded initiative is more than just a collection of stories—it’s a movement that celebrates resilience, diversity, and progress in the tech industry. The landing page should serve as:
A hub for inspiration: Highlight past WeCoded and SheCoded submissions to showcase triumphs and challenges.
A resource center: Provide links to additional resources, such as mentorship programs, diversity initiatives, and educational content.
A call to action: Encourage participation in future celebrations and foster allyship within the tech community.
Designing for Impact
To create a compelling landing page, focus on these key elements:
1. Visual Identity
Leverage the official WeCoded design assets to ensure consistency with the initiative’s branding:
Colors: Use the provided palette—Blue (#4531EA), Green (#CCEA71), Purple (#9D00E5)—to create an inviting yet professional aesthetic.
Gradient: Incorporate gradients strategically to add depth and vibrancy to the design.
Icons: Use provided icons to enhance visual storytelling and highlight key sections of the page.
2. Dynamic Content Integration
Utilize the DEV Articles API to dynamically display WeCoded posts directly on the landing page. This ensures that content remains fresh and relevant over time. Here’s an example code snippet for fetching posts:
javascript
window.fetch('https://dev.to/api/articles?tag=wecoded')
.then(response => response.json()) // Parse the JSON from the response
.then(data => {
// Render articles dynamically
console.log(data);
});
Display these stories in an engaging format—such as cards or grids—with filters for categories like "Challenges," "Triumphs," or "Insights."
3. Accessibility First
Ensure your design is inclusive by adhering to accessibility standards:
Use high-contrast color combinations for readability.
Include alt text for images and icons.
Make navigation intuitive with clear headings and interactive elements.
4. Celebrate Diversity Through Storytelling
Dedicate sections of the page to highlight inspiring stories from past submissions. Include quotes or excerpts from individuals who’ve shared their journeys, accompanied by their photos or avatars (with permission).
Features to Include
To make your submission stand out, consider incorporating these features:
Interactive Timeline: Showcase milestones in WeCoded history, such as key submissions or notable achievements.
Resource Library: Provide links to organizations supporting diversity in tech, such as Girls Who Code or Black Girls Code.
Call-to-Action Section: Encourage visitors to share their own stories or participate in upcoming celebrations with submission guidelines prominently displayed.
Recognition Banner: Include your name and contact information as the creator of the page at the bottom (as per challenge requirements).
Technical Considerations
Since submissions should be frontend-only outside of DEV API requests, focus on creating a responsive design using modern web technologies like HTML5, CSS3, and JavaScript frameworks (e.g., React or Vue.js). Ensure cross-browser compatibility and optimize performance by minimizing asset sizes and leveraging lazy loading for dynamic content.
Example Layout Structure
Here’s a suggested layout structure for your landing page:
Final Thoughts
The WeCoded landing page is more than just a project—it’s an opportunity to celebrate underrepresented voices in tech while fostering inclusivity across the industry. By focusing on style, clarity, originality, and accessibility, you can create a platform that inspires change and empowers individuals worldwide.
Let’s code not just for innovation but also for representation—and together build a tech community where everyone belongs!
Top comments (4)
This initiative is a step in the right direction for fostering diversity in the tech industry. Looking forward to seeing how this landing page supports and amplifies underrepresented voices
Celebrating diversity in tech is crucial for innovation and growth. The #WeCoded challenge is an excellent example of how developers can collaborate to drive change. Looking forward to seeing the final outcome!
Inclusion in tech should be more than a conversation—it should drive action. #WeCoded is making strides in this direction by creating a dedicated platform for diverse voices. Impressive work!
Interesting to read