DEV Community

Cover image for Join us for the next Frontend Challenge: Recreation Edition
dev.to staff for The DEV Team

Posted on

Join us for the next Frontend Challenge: Recreation Edition

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>
Enter fullscreen mode Exit fullscreen mode

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 (27)

Collapse
 
ben profile image
Ben Halpern

Good luck everyone!

Collapse
 
ravixalgorithm profile image
Mr. Algorithm • Edited

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

Collapse
 
hikolakita profile image
Hikolakita

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 :)

Collapse
 
bytrangle profile image
Trang Le

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

Collapse
 
hikolakita profile image
Hikolakita

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

Collapse
 
annavi11arrea1 profile image
Anna Villarreal

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

Collapse
 
everlygif profile image
Everly Precia Suresh • 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

Collapse
 
ben profile image
Ben Halpern

Yup

Collapse
 
on_work_a1686ca9092edad87 profile image
On Work

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!

Collapse
 
ravixalgorithm profile image
Mr. Algorithm

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

Collapse
 
techie_mohit profile image
Mohit Bhatia

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

Collapse
 
rafajrg21 profile image
Rafael Romero

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.

Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
mdanassaif profile image
Mohd Anas
Collapse
 
uzondu9 profile image
Uzondu

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 👏

Collapse
 
chintanonweb profile image
chintanonweb

This sounds exciting! happy coding everyone ❤️‍🔥

Some comments may only be visible to logged-in visitors. Sign in to view all comments.