My WeCoded Landing Page

This is a submission for the WeCoded Challenge: Celebrate in Code

For the WeCoded Challenge, I designed a landing page to celebrate underrepresented voices in tech, aligning with the spirit of WeCoded and International Women’s Day.

I incorporated the provided design assets—colors (Blue: #4531EA, Green: #CCEA71, Purple: #9D00E5) and a gradient—along with two icons to enhance visual appeal while keeping the focus on the content.

Demo

• Live Demo:

How I Built It

Process

I began by defining the page’s purpose: celebrating diversity in tech through community stories. I sketched a structure with key sections to ensure a logical flow—introducing the initiative, showcasing a standout story, listing all submissions, and providing resources. I planned to use the DEV Articles API for dynamic content, focusing on the “wecoded” tag, and incorporated pagination for scalability. Accessibility and responsiveness were priorities to reflect the inclusive theme.

Technologies Used

• HTML: Semantic elements like <header>, <main>, and <section> for structure and accessibility.
• CSS: Custom styles with variables (e.g., --blue: #4531EA) for consistency, a gradient hero background, and a responsive grid layout. Hover effects and transitions add interactivity.
• JavaScript: Fetches data from the DEV API and dynamically updates the page. I used async/await for clean API handling.
• DEV Articles API: Retrieves posts tagged “wecoded” (https://dev.to/api/articles?tag=wecoded) with pagination parameters (page and per_page=10).

Implementation Details

1. HTML Structure: Built a clean, semantic layout with IDs for smooth scrolling (e.g., <section id="stories">).
2. CSS Styling: Used the provided colors for text, buttons, and accents. The hero section features a gradient, while article cards use a card layout with images, titles, authors, dates, and truncated descriptions. Media queries ensure responsiveness.
3. JavaScript & API Integration:
   • Fetched articles on page load, displaying the first as the featured story and the rest in a grid.
   • Implemented a “Load More” button to fetch additional pages, hiding it when no more articles are available (checked via response length vs. per_page).
   • Handled loading (spinner) and error states (message) for a smooth experience.
   • Added smooth scrolling for navigation links using scrollIntoView({ behavior: 'smooth' }).
4. Content:
   • About: “WeCoded is an annual celebration on DEV.to that highlights underrepresented groups in tech, launched with International Women’s Day to promote diversity and inclusion.”
   • Resources: Links to Women Who Code, Girls Who Code, and the DEV.to WeCoded tag page.
   • Footer: “Designed and built by [My Name]” with a dynamic year (© ${new Date().getFullYear()} WeCoded).

Highlights I’m Proud Of

• Dynamic Content: The seamless integration of the DEV API with pagination keeps the page fresh and scalable.
• Responsive Design: The grid adjusts from a multi-column layout on desktop to a single column on mobile, maintaining usability.
• Accessibility: Semantic HTML, alt texts, and sufficient color contrast ensure inclusivity.
• Visual Appeal: The use of provided colors and icons creates a cohesive, vibrant look without overwhelming the content.

*Final Note: By participating in this challenge, I agree that if my submission is selected as a winner, DEV may use, modify, and host my code as the official landing page for WeCoded.

I retain full ownership of my work, and this agreement does not restrict how I use or share it elsewhere.

Additionally, I confirm that my submission is my own original work and does not infringe on any third-party rights.*

Loved to participate