The community-favorite frontend challenge is back!

Running through August 4, Frontend Challenge: Recreation Edition will feature two recreation-themed prompts: CSS Art and Glam Up My Markup. This will be a fun opportunity to flex your JavaScript skills and show off your CSS creativity.

As always, there will be one winner per prompt. That’s two chances to win bragging rights, a gift from the DEV Shop, and an exclusive DEV badge.

Also, in case you didn't know - badges can stack on your profile to show off multiple wins! But of course, it’s not about the winning destination, it’s about the journey. We hope this is an opportunity to challenge yourself and have some fun!

And if you’re more interested in competing for cash prizes, the Build Better with Stellar: Smart Contract Challenge is happening now with over $50,000 up for grabs!

Prompts

CSS Art: Favorite Recreation

Draw what comes to mind for you when someone asks what your favorite recreation is. In other words, what do you do for enjoyment when you’re not working? Some of us on the DEV Team enjoy team sports such as American football, while others prefer less athletic solo endeavors such as knitting. 🧶

Whatever comes to mind when you think of recreation, please show us!

Here is the submission template for anyone that wants to jump right in, but please review all challenge rules on the official challenge page before submitting.

CSS Art Submission Template

Glam Up My Markup: Cricket League!

Use CSS and JavaScript to make the below starter HTML markup beautiful, interactive, and useful. We have provided a starter template of a landing page for the New York Recreational Cricket League. It is not a real recreational league, but that doesn’t mean it can’t have a beautiful landing page. Help this cricket league gain momentum with a spiffy webpage! Since the template does not include photos, you may need to get creative in how you might make it visually appealing.

Your submission should be more fun and interactive than the HTML we provide, but also be usable and accessible. You should not directly edit the HTML provided, unless it is via JavaScript. We expect style and substance. You may add basic boilerplate, including meta tags etc. for presentation purposes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New York Recreational Cricket League</title>
</head>
<body>
    <header>
        <h1>Welcome to the New York Recreational Cricket League</h1>
        <p>Join us to experience the thrill of cricket right in the heart of New York City!</p>
    </header>

    <section>
        <h2>About the League</h2>
        <p>The New York Recreational Cricket League (NYRCL) is dedicated to promoting the sport of cricket among New Yorkers of all ages. We offer a friendly but competitive environment where players can improve their skills and enjoy the game.</p>
    </section>

    <section>
        <h2>How to Join</h2>
        <p>Interested in playing? We welcome players of all skill levels! To join, simply fill out our online registration form on our website, or contact us at join@nyrcl.com for more details.</p>
    </section>

    <section>
        <h2>League Fees</h2>
        <p>The registration fee for the league is $150 per player, which covers the entire season. This fee includes uniforms, equipment rental, and insurance.</p>
    </section>

    <section>
        <h2>Location of Games</h2>
        <p>All games are held at the iconic Central Park Cricket Fields, located near the north end of Central Park, easily accessible via public transportation.</p>
    </section>

    <section>
        <h2>Season Schedule</h2>
        <p>The NYRCL season runs from April through September, with games typically held on weekends. Here is the schedule for the upcoming season:</p>
        <ul>
            <li>Opening Day: April 15th</li>
            <li>Mid-Season Tournament: July 8th-9th</li>
            <li>Season Finals: September 20th</li>
            <li>Closing Ceremony: September 30th</li>
        </ul>
    </section>

    <footer>
        <p>Contact Us: </p>
        <p>Email: info@nyrcl.com | Phone: (555) 123-4567</p>
        <p>Follow us on our social media pages for updates and more information.</p>
    </footer>
</body>
</html>

Glam Up My Markup Submission Template

How To Participate

In order to participate, you will need to publish a post using the submission template associated with each prompt.

Please review our full rules, guidelines, and FAQ page before submitting so you understand our participation guidelines and official contests rules such eligibility requirements.

Important Dates

July 24: Frontend Challenge: Recreation begins!
August 4: Submissions due at 11:59 PM PDT
August 6: Winners Announced

We hope you enjoy the challenge, and we can’t wait to see your submissions! Questions? Ask them below.

Good luck and happy coding!

Join us for the next Frontend Challenge: Recreation Edition

Prompts

CSS Art: Favorite Recreation

Glam Up My Markup: Cricket League!

How To Participate

Important Dates