Challenge ends soon!
Submit your entry now
Frontend Challenge v24.05.29
Flex your CSS and JavaScript skills!
The wait is over! We are back with another Frontend Challenge.
Running through June 09, Frontend Challenge: June Edition will feature two June-themed prompts: CSS Art and Glam Up My Markup. For those of you who miss the One Byte Explainer, we promise we’ll bring that prompt back soon!
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.
Read on to learn about each prompt and how to participate!
Key Dates
- Contest start: May 29, 2024
- Submissions due: June 09, 2024
- Winners announced: June 11, 2024
Badge Rewards
Winners
Congratulations to our Frontend Challenge v24.05.29 winners! Read the full announcement post here.
CSS Art: June
Glam Up My Markup: Beaches
Challenge Prompts
CSS Art: June
Draw what comes to mind for you when it comes to the month of June. Depending on where you live, perhaps that’s the summer solstice or a transition to falling leaves and winter. Or maybe it is Father’s Day or Pride Month.
Whatever comes to mind when you think of June, please show us!
Judging Criteria:
- Creativity
- Effective Use of CSS
- Aesthetic Outcome
Glam Up My Markup: Beaches
Use CSS and JavaScript to make the below starter HTML markup beautiful, interactive, and useful. We have provided a starter template of a site that lists the best beaches in the world and some information about each one. 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>Best Beaches in the World</title>
</head>
<body>
<header>
<h1>Best Beaches in the World</h1>
</header>
<main>
<section>
<h2>Take me to the beach!</h2>
<p>Welcome to our curated list of the best beaches in the world. Whether you're looking for serene white sands, crystal-clear waters, or breathtaking scenery, these beaches offer a little something for everyone. Explore our top picks and discover the beauty that awaits you.</p>
</section>
<section>
<h2>Top Beaches</h2>
<ul>
<li>
<h3>Whitehaven Beach, Australia</h3>
<p>Located on Whitsunday Island, Whitehaven Beach is famous for its stunning white silica sand and turquoise waters. It's a perfect spot for swimming, sunbathing, and enjoying the natural beauty of the Great Barrier Reef.</p>
</li>
<li>
<h3>Grace Bay, Turks and Caicos</h3>
<p>Grace Bay is known for its calm, clear waters and powdery white sand. This beach is ideal for snorkeling, diving, and enjoying luxury resorts that line its shore.</p>
</li>
<li>
<h3>Baia do Sancho, Brazil</h3>
<p>Baia do Sancho, located on Fernando de Noronha island, offers stunning cliffs, vibrant marine life, and crystal-clear waters, making it a paradise for divers and nature lovers.</p>
</li>
<li>
<h3>Navagio Beach, Greece</h3>
<p>Also known as Shipwreck Beach, Navagio Beach is famous for the rusting shipwreck that rests on its sands. Accessible only by boat, this secluded cove is surrounded by towering cliffs and azure waters.</p>
</li>
<li>
<h3>Playa Paraiso, Mexico</h3>
<p>Playa Paraiso, located in Tulum, offers pristine white sands and turquoise waters against the backdrop of ancient Mayan ruins. It's a perfect blend of history and natural beauty.</p>
</li>
<li>
<h3>Anse Source d'Argent, Seychelles</h3>
<p>Anse Source d'Argent is renowned for its unique granite boulders, shallow clear waters, and soft white sand. This beach is perfect for photography, snorkeling, and relaxation.</p>
</li>
<li>
<h3>Seven Mile Beach, Cayman Islands</h3>
<p>Stretching for seven miles, this beach offers soft coral sand, clear waters, and numerous activities such as snorkeling, paddleboarding, and enjoying beachside restaurants and bars.</p>
</li>
<li>
<h3>Bora Bora, French Polynesia</h3>
<p>Bora Bora is known for its stunning lagoon, overwater bungalows, and vibrant coral reefs. It's a perfect destination for honeymooners and those seeking luxury and tranquility.</p>
</li>
<li>
<h3>Lanikai Beach, Hawaii</h3>
<p>Lanikai Beach features powdery white sand and calm, clear waters, making it a favorite for swimming, kayaking, and enjoying the scenic views of the Mokulua Islands.</p>
</li>
<li>
<h3>Pink Sands Beach, Bahamas</h3>
<p>Pink Sands Beach is famous for its unique pink-hued sand, clear waters, and serene atmosphere. It's an idyllic spot for beachcombing, swimming, and relaxing in paradise.</p>
</li>
</ul>
</section>
</main>
</body>
</html>
Judging Criteria:
- Accessibility
- Usability and User Experience
- Creativity
- Code quality
Frontend Challenge v24.05.29 FAQ
Participation
Can I submit to multiple prompts?
Yes, you are welcome to submit to multiple prompts.
Can I submit to a prompt more than once?
Yes, you can submit multiple submissions per prompt but you’ll need to publish a separate post for each submission.
- In the event that you may win two or more prompts, and your submission is very close with another participant, we will favor the other participant.
- In the event that you do win two or more prompts, you will only receive one winner badge.
Can I work on a team?
Yes, you can work on teams up to four people.
- If you collaborate with anyone, you’ll need to list their DEV handles in your submission post so we can award a badge to your entire team! Please only publish one submission per team.
- DEV does not handle prize-splitting, so in the event that your submission wins the shop gift, you will need to split that amongst yourselves. Thank you for understanding!
How old do I have to be to participate?
Participants need to be 18+ in order to participate.
If I live in X, am I eligible to participate?
For eligibility rules, see our official challenge rules.
Submission
Can my submission include open source code?
Riffing on open source code and borrowing and improving on previous work/ideas is encouraged but it’s important your changes are significant enough to ensure your submission is valid.
When does riffing become plagiarism?
It will depend, but transparency is important, license compatibility is important. You can use someone else’s code to give you a jumpstart to demonstrate your ideas on top of someone else’s base, but not just re-package the base.
It should be clear to the judges what you added to the project in terms of the code and conceptual inspiration. This means, you should clearly state what you were building on and what elements are original to this new submission.
When building on existing code, we expect a significant change that adds something tangible to the output. i.e. a new animation, and new sprite, a new function, a new presentation. Not just changes to the source - i.e. changing colours, changing one sprite, changing one function.
What happens if my submission is considered plagiarized or invalid?
Anything deemed to be plagiarism will not be eligible for prizes. Incidental plagiarism may simply result in your disqualification from the challenge (regardless of the number of other valid submissions you have published). Egregious plagiarism will result in your suspension from DEV entirely. Any non-generic, non-trivial usage of prior work, including open source code must be credited in your submission.
Do submissions have to be in English?
Non-english submissions are eligible for a completion badge but not eligible for prizes due to the current limitations of our judges. We will not be judging on mastery of the English language, so please don’t let this deter you from submitting if you are not a native English speaker! We hope to evolve this in the future to be more accommodating.
Do I need a license for my code?
We strongly recommend including a license for your code, here are some you may consider: MIT, Apache, BSD-2, BSD-3, or Commons Clause.
Can I use AI?
Use of AI is allowed as long as all other rules are followed. We want to give you a chance to show off your skills in realistic scenarios. If you use AI tools to help you achieve your submission, all the power to you.
How do I embed my project directly into my DEV post?
Our editor supports many types of embeds, including: Stackbliz, Glitch, Github, etc. You can typically use the {% embed https://... %} syntax directly in the post. Click here for more information on our markdown support.
- For CodePen, you will need to use this syntax:
{% codepen http://... %} - For CodeSandbox, you will need to use this syntax:
{% codesandbox http://... %}
Judging and Prizing
Can there be ties?
In the event of a tie in scoring between judges, the judges will select the entry that received the highest number of positive reactions on their DEV post to determine the winner.
How will I know if I won?
Winners will be announced in a DEV post on the winner announcement date noted in our key dates section.
When will winners receive their Forem Shop gift?
The DEV Team will contact you via the email associated with your DEV profile within, at most, 10 business days of the announcement date to share the details of the shop gift.
When will I receive my DEV badge?
Both participation and winner badges will be awarded, in most cases, the same day as the winner announcement.
Frontend Challenge v24.05.29 Rules
NO PURCHASE NECESSARY. Open only to 18+. Contest entry period ends June 09, 2024 at 11:59 PM PDT. Contest is void where prohibited or restricted by law or regulation. All entires must be submitted during the content period. For Official Rules, see Frontend Challenge: June Edition Contest Rules and General Contest Official Rules.
