Join us for the next Frontend Challenge: Recreation Edition
dev.to staff

dev.to staff @thepracticaldev

About: The hardworking team behind dev.to ❤️

Joined:
Feb 9, 2016

Join us for the next Frontend Challenge: Recreation Edition

Publish Date: Jul 24 '24
420 32

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!

Comments 32 total

  • Ben Halpern
    Ben HalpernJul 24, 2024

    Good luck everyone!

    • Mr. Algorithm
      Mr. AlgorithmJul 24, 2024

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

  • chintanonweb
    chintanonwebJul 24, 2024

    This sounds exciting! happy coding everyone ❤️‍🔥

  • Everly Precia Suresh
    Everly Precia SureshJul 24, 2024

    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

  • Mr. Algorithm
    Mr. AlgorithmJul 24, 2024

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

  • robertaglago
    robertaglagoJul 25, 2024

    This is a good initiative to create something beautiful. I love that.

  • Mohit Bhatia
    Mohit BhatiaJul 25, 2024

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

    • Rafael Romero
      Rafael RomeroJul 25, 2024

      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
        Ben HalpernJul 25, 2024

        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.

  • Hikolakita
    HikolakitaJul 25, 2024

    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
      Trang LeAug 4, 2024

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

      • Hikolakita
        HikolakitaAug 4, 2024

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

  • Noel Dervishi
    Noel DervishiJul 25, 2024

    In the Recreation Edition, (yolov8.org/ ) participants will recreate a popular website or app's frontend interface using HTML, CSS, and JavaScript. This is an excellent opportunity to showcase your skills, learn new techniques, and gain recognition in the developer community.
    Register: Sign up for the challenge through our registration page.
    Receive the Brief: Upon registration, you'll receive detailed instructions and the design brief for the recreation task.
    Develop: Use your skills to recreate the assigned interface as accurately as possible.
    Submit: Submit your completed project by the deadline.

  • On Work
    On WorkJul 26, 2024

    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!

  • Syed Muhammad Ali Raza
    Syed Muhammad Ali RazaJul 26, 2024

    Best of Luck Guys

  • Pakistan Love
    Pakistan LoveJul 26, 2024

    What is this

  • Anna Villarreal
    Anna VillarrealJul 27, 2024

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

  • Ced.js
    Ced.jsJul 27, 2024

    Ahhaaa!Let's spread our wings on this.
    <¿>incedmade<¿>

  • Aasuyadav1
    Aasuyadav1Jul 27, 2024

    dfdsfsf

  • Robert Chunga
    Robert ChungaJul 27, 2024

    Only pure CSS is allowed or we can use frameworks, e.g Tailwind css

  • Ali Sina Yousofi
    Ali Sina YousofiJul 28, 2024

    I was once awarded some stickers from dev shop which never got delivered.

  • md antor
    md antorJul 28, 2024

    Here are 100 highly recommended online earning way pdf books free which are very famous worldwide. Free read books and Download now Google sites link. sites.google.com/view/100-earning-...

    Image description

  • Jaseph
    JasephJul 29, 2024

    Thank you

  • Bhartiya Bazzar
    Bhartiya BazzarAug 2, 2024

    What is the procedure . My development team should do this. here is my team info shashisales.com/about-us what exactly is the task here?

  • Uzondu
    UzonduAug 3, 2024

    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 👏

  • Ark
    ArkAug 3, 2024

    We are looking for a skilled HTML Website Developer to join our team. The ideal candidate will be responsible for creating and maintaining high-quality websites that meet our clients' needs. Example of this site: bit.ly/3LQ5fQf. If you have a passion for web development and are proficient in HTML, CSS, and JavaScript, we would love to meet you!

  • Nguyen Dinh Khai
    Nguyen Dinh KhaiAug 4, 2024

    Good luck.

  • Rafael Barbosa da Silva
    Rafael Barbosa da SilvaAug 8, 2024

    Much good!👍

  • Sohel Hossen
    Sohel HossenDec 4, 2024

    Thanks for the information!

Add comment