DEV Community

Cover image for Landing page: Have fun with it.
RuddyCodes
RuddyCodes

Posted on

Landing page: Have fun with it.

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

๐Ÿ‘‹ About the page

I decided to experiment with a more interactive approach ๐Ÿ™ˆ, incorporating a game into the hero section of the page. This design choice aims to be both entertaining and functional, as I've also included useful features for engaging with the articles.

๐ŸŽฏ Demo

Here is a fun landing page

๐Ÿ‘ฉโ€๐Ÿ’ป Code

You can find the code here

๐Ÿ“‹ Features

  • A drag and drop match game that reveals a fun fact after you match the logo correctly. Its built using Nextjs, HTML and CSS. I defaulted to an image for mobile.
  • Loading articles with the tag wecoded no API key required
const articles = await fetch(
        `https://dev.to/api/articles?tag=wecoded&per_page=${pageNumber}`,
        {
          method: "GET",
        }
      );
Enter fullscreen mode Exit fullscreen mode

list of wecoded articles

  • Pagination that keeps loading 10 more articles till 100
  • Sorting the articles in Ascending and Descending

Top comments (0)