Challenge ends soon!
Submit your entry now
Frontend Challenge v24.09.04
Flex your CSS and JS skills!
Running through September 15, Frontend Challenge: Space Edition will feature two prompts: CSS Art and Glam Up My Markup. This theme was inspired by some of the great posts we’ve seen on DEV lately (@cookiemonsterdev @madsstoumann 👀) so we hope to continue that line of creativity and dive into the depths of the galaxies with you all!
As always, there will be one winner per prompt. That’s two chances to win:
- Bragging rights
- A gift from the DEV Shop
- An exclusive DEV badge
Remember: badges can stack on your profile to show off multiple wins. But of course, it’s not about the winning destination (mars?) - it’s about the (rocket ship) journey!
We hope this is an opportunity to challenge yourself and have some fun. Read on to learn how to participate.
Key Dates
- Contest start: September 04, 2024
- Submissions due: September 15, 2024
- Winners announced: September 17, 2024
Badge Rewards
Winners
Congratulations to our Frontend Challenge v24.09.04 winners! Read the full announcement post here.
Challenge Prompts
CSS Art: Space
Draw what comes to mind for you when it comes to Space. Is it your favorite movie? The current news cycle? Or does your imagination drum up something totally out-of-this-world? Whatever it is, please share it with us via CSS art!
Judging Criteria:
- Creativity
- Effective Use of CSS
- Aesthetic Outcome
Glam Up My Markup: Solar System
Use CSS and JavaScript to make the below starter HTML markup for the Solar System visually stunning, interactive, and educational. We've provided a basic template that lists planets, moons, and other celestial objects in our Solar System, along with some facts about each. Since the template doesn't include any design elements or interactivity, you’ll need to get creative to make it visually appealing and engaging. Your submission should enhance the user experience with a fun, dynamic design, but must also be accessible and easy to use. You should avoid directly modifying the HTML itself, unless it is through JavaScript. Your final submission should balance style and substance. You may add basic boilerplate code, such as meta tags and structure, to ensure proper presentation and functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore the Solar System</title>
</head>
<body>
<!-- Header Section -->
<header class="header">
<h1>Welcome to Our Solar System</h1>
<p>Discover the wonders of the Sun, planets, moons, and everything else that makes our solar system extraordinary.</p>
</header>
<!-- Solar System Overview Section -->
<section class="solar-system-overview">
<h2>About Our Solar System</h2>
<p>Our solar system is home to the Sun, eight planets, dozens of moons, countless asteroids, comets, and other celestial objects. Located in the Milky Way galaxy, it's the only place we know of that harbors life – on Earth.</p>
</section>
<!-- Planets Section -->
<section class="planets">
<h2>Planets of the Solar System</h2>
<!-- Mercury -->
<article class="planet mercury">
<h3>Mercury</h3>
<p>Mercury is the closest planet to the Sun and the smallest in our solar system. It has no atmosphere, and its surface temperatures vary drastically between day and night.</p>
<ul>
<li>Distance from Sun: 57.9 million km</li>
<li>Orbital Period: 88 Earth days</li>
<li>Moons: None</li>
</ul>
</article>
<!-- Venus -->
<article class="planet venus">
<h3>Venus</h3>
<p>Venus is the second planet from the Sun and is known for its thick, toxic atmosphere. Its surface is hotter than any other planet in the solar system due to the greenhouse effect.</p>
<ul>
<li>Distance from Sun: 108.2 million km</li>
<li>Orbital Period: 225 Earth days</li>
<li>Moons: None</li>
</ul>
</article>
<!-- Earth -->
<article class="planet earth">
<h3>Earth</h3>
<p>Earth is the third planet from the Sun and the only planet known to support life. It has one natural satellite, the Moon.</p>
<ul>
<li>Distance from Sun: 149.6 million km</li>
<li>Orbital Period: 365.25 Earth days</li>
<li>Moons: 1 (The Moon)</li>
</ul>
</article>
<!-- Mars -->
<article class="planet mars">
<h3>Mars</h3>
<p>Mars, the fourth planet from the Sun, is often called the "Red Planet" because of its reddish appearance caused by iron oxide on its surface. It's a prime candidate for future human exploration.</p>
<ul>
<li>Distance from Sun: 227.9 million km</li>
<li>Orbital Period: 687 Earth days</li>
<li>Moons: 2 (Phobos, Deimos)</li>
</ul>
</article>
<!-- Jupiter -->
<article class="planet jupiter">
<h3>Jupiter</h3>
<p>Jupiter is the largest planet in our solar system. It's known for its massive size, Great Red Spot (a giant storm), and many moons, including the four largest: Io, Europa, Ganymede, and Callisto.</p>
<ul>
<li>Distance from Sun: 778.5 million km</li>
<li>Orbital Period: 12 Earth years</li>
<li>Moons: 79 (4 major: Io, Europa, Ganymede, Callisto)</li>
</ul>
</article>
<!-- Saturn -->
<article class="planet saturn">
<h3>Saturn</h3>
<p>Saturn is famous for its stunning ring system, which is made up of ice and rock. It's the second-largest planet in the solar system and has numerous moons, including Titan, its largest.</p>
<ul>
<li>Distance from Sun: 1.43 billion km</li>
<li>Orbital Period: 29 Earth years</li>
<li>Moons: 83 (Titan being the largest)</li>
</ul>
</article>
<!-- Uranus -->
<article class="planet uranus">
<h3>Uranus</h3>
<p>Uranus is unique for its sideways rotation and faint ring system. It's an ice giant with a frigid atmosphere composed mainly of hydrogen, helium, and methane.</p>
<ul>
<li>Distance from Sun: 2.87 billion km</li>
<li>Orbital Period: 84 Earth years</li>
<li>Moons: 27</li>
</ul>
</article>
<!-- Neptune -->
<article class="planet neptune">
<h3>Neptune</h3>
<p>Neptune, the furthest planet from the Sun, is a deep blue ice giant. Its most prominent feature is the Great Dark Spot, a storm system similar to Jupiter's Great Red Spot.</p>
<ul>
<li>Distance from Sun: 4.5 billion km</li>
<li>Orbital Period: 165 Earth years</li>
<li>Moons: 14 (Triton being the largest)</li>
</ul>
</article>
</section>
<!-- Moons Section -->
<section class="moons">
<h2>Fascinating Moons of the Solar System</h2>
<!-- Earth's Moon -->
<article class="moon earth-moon">
<h3>The Moon (Earth)</h3>
<p>The Moon is Earth's only natural satellite and the fifth-largest moon in the solar system. Its phases have been integral to human culture for millennia.</p>
</article>
<!-- Titan (Saturn) -->
<article class="moon titan">
<h3>Titan (Saturn)</h3>
<p>Titan is Saturn's largest moon and has a thick atmosphere and liquid methane lakes. It's one of the most Earth-like worlds in the solar system, despite its frigid temperatures.</p>
</article>
<!-- Europa (Jupiter) -->
<article class="moon europa">
<h3>Europa (Jupiter)</h3>
<p>Europa, one of Jupiter's Galilean moons, is covered in ice. Scientists believe there's a vast ocean beneath its frozen surface, making it a prime candidate for finding extraterrestrial life.</p>
</article>
</section>
<!-- Other Solar System Objects Section -->
<section class="solar-system-objects">
<h2>Other Celestial Objects</h2>
<!-- Asteroid Belt -->
<article class="asteroid-belt">
<h3>The Asteroid Belt</h3>
<p>The asteroid belt lies between Mars and Jupiter and contains thousands of rocky bodies. Ceres, the largest object here, is considered a dwarf planet.</p>
</article>
<!-- Comets -->
<article class="comets">
<h3>Comets</h3>
<p>Comets are icy bodies that originate from the outer solar system. When they approach the Sun, their ice turns to gas, forming a bright tail visible from Earth.</p>
</article>
<!-- Kuiper Belt -->
<article class="kuiper-belt">
<h3>The Kuiper Belt</h3>
<p>The Kuiper Belt is a region beyond Neptune filled with icy bodies and dwarf planets, including Pluto. It's similar to the asteroid belt but far larger and more distant.</p>
</article>
</section>
<!-- Footer Section -->
<footer class="footer">
<p>© 2024 Explore the Solar System. All rights reserved.</p>
</footer>
</body>
</html>
Judging Criteria:
- Accessibility
- Usability and User Experience
- Creativity
- Code quality
Frontend Challenge v24.09.04 FAQ
Participation
Can I submit to multiple prompts?
Yes, you are welcome to submit to multiple prompts.
Can one submission qualify for multiple prompts?
Yes, if your submission offers a solution to multiple prompts, it can qualify for 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 of 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?
You are not required to license your code but we strongly recommend that you do. 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.
When will I receive my prizes? 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 claiming your prizes.
Frontend Challenge v24.09.04 Rules
NO PURCHASE NECESSARY. Open only to 18+. Contest entry period ends September 15, 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: Space Edition Contest Rules and General Contest Official Rules.
