dev.to staff for The DEV Team

Posted on Jul 24

Join us for the next Frontend Challenge: Recreation Edition

#devchallenge #frontendchallenge #css #javascript

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!

Top comments (28)

Ben Halpern • Jul 24

Good luck everyone!

Mr. Algorithm • Jul 24 • Edited

Can we add more detail on our own to the landing page

Anna Villarreal • Jul 27

I love the recreation one! I'm so excited to be able to participate this time!

Hikolakita • Jul 25

Hello! I'm very excited to do this challenge, but I have a question.
In the post, I can read "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" which implies that the winners of each prompt will receive a gift. However, nowhere else are prizes for the winners of each category mentioned.
Have a good day, and know that, whether there are gifts or not, my submission will be there :)

Trang Le • Aug 4

This is a pure fun challenge. There is no cash prize for winners.

Hikolakita • Aug 4

Thanks, but why is it mentionned "That's two chance to win a gift" then?

Everly Precia Suresh • Jul 24 • Edited

Yayy!! I'm glad this is back. Also question can we use additional libraries as part of our development in glam up my markup prompt

Ben Halpern • Jul 25

Yup

NextJS Boi • Jul 27

Here is mine :

dev.to/nextjswebdev/the-frontend-c...

On Work • Jul 26

I'm excited about the upcoming Frontend Challenge: Recreation Edition! This sounds like a fantastic opportunity to hone our skills and collaborate with fellow developers.

Could you provide more details about the challenge? Specifically, I'm interested in knowing:

The theme or focus of the Recreation Edition
The rules and guidelines for participation
The tools and technologies we'll be using
Any resources or tutorials you recommend to prepare for the challenge
The timeline and key dates to keep in mind
Looking forward to participating and seeing everyone's creative solutions!

Mr. Algorithm • Jul 24

That is truly incredible! I'm passionate about it and will do everything I can to create something exceptional.

Uzondu • Aug 3

I submitted mine yesterday: Link to post. It seems to me that everybody did better than in the previous challenges. After checking your posts I see you are all improving seriously. So Congrats everyone 👏

Mohit Bhatia • Jul 25

I have a question can we add images and icon in this or just have to add styling in this

Rafael Romero • Jul 25

Yes, you can add images, icons and fonts, you can either use the head tag to import external stuff or inject them from the js. But everything given inside the body tag must be the same.

Ben Halpern • Jul 25

This is correct. You can use JS/etc to add to the page, but the markup should still be a centerpiece of the experience. Don't scrap it and start over or anything.