Celebrate WeCode: celebrate innovation and diversity in technology 🎉

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

My WeCoded Landing Page

For my WeCoded landing page, I aimed to create a vibrant and engaging design that celebrates innovation and diversity in technology. The page features smooth animations, modern fonts, and a dynamic layout to capture the spirit of the WeCoded community.

Demo

full video demo : https://www.youtube.com/watch?v=dQ1pjm2jF-4

How I Built It

I built the landing page using HTML, CSS, and JavaScript. The design incorporates a gradient background, custom fonts from Google Fonts, and CSS animations to create a lively and interactive experience.

Technologies Used:

HTML: For the structure of the page.
CSS: For styling, including animations and responsive design.
JavaScript: To fetch and display articles from the DEV API.

Key Features:

Navbar: A fixed navbar with smooth scrolling to different sections.
Hero Section: A welcoming hero section with a gradient background and a call to action.
Sections: Multiple sections highlighting different aspects of the WeCoded community, including the SheCode initiative.
Articles: A dynamic articles section that fetches and displays the latest articles tagged with "wecoded" from the DEV API.
Footer: A footer with navigation buttons and credit to the creator.

DEV API Integration:

I used the DEV API to fetch the latest articles tagged with "wecoded" and display them dynamically on the page. The articles are styled with CSS animations to create a smooth hover effect.

async function fetchWeCodedArticles() {
    const response = await fetch('https://dev.to/api/articles?tag=wecoded');
    const articles = await response.json();

    const articlesContainer = document.getElementById('articles');
    articles.slice(0, 6).forEach(article => {
        const articleElement = document.createElement('div');
        articleElement.className = 'article';
        articleElement.innerHTML = `
            <div>
                <h3>${article.title}</h3>
                <p>${article.description || 'No description available.'}</p>
                <a href="${article.url}" target="_blank">Read More</a>
            </div>
        `;
        articlesContainer.appendChild(articleElement);
    });
}

fetchWeCodedArticles();

CSS Animations:

I used CSS animations to add a dynamic feel to the page. For example, the articles have a hover effect that makes them move and scale slightly.

Building this WeCoded landing page was a fantastic experience! I wanted to create a visually appealing and interactive platform that not only celebrates diversity and innovation in technology but also engages visitors with dynamic content and smooth animations.

I hope this page inspires others to join the WeCoded community and share their stories. Feel free to explore, contribute, and celebrate coding with us!
Looking forward to seeing all the amazing projects from fellow developers! #WeCoded 🎉