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.
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
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)
Good luck everyone!
Can we add more detail on our own to the landing page
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 :)
This is a pure fun challenge. There is no cash prize for winners.
Thanks, but why is it mentionned "That's two chance to win a gift" then?
I love the recreation one! I'm so excited to be able to participate this time!
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
Yup
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!
That is truly incredible! I'm passionate about it and will do everything I can to create something exceptional.
I have a question can we add images and icon in this or just have to add styling in this
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.
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.
Here is mine :
dev.to/nextjswebdev/the-frontend-c...
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 👏
This sounds exciting! happy coding everyone ❤️🔥
Some comments may only be visible to logged-in visitors. Sign in to view all comments.