Challenge ends soon!
Submit your entry now
Frontend Challenge: December Edition
Flex your CSS and JavaScript Skills!
Running through December 29, Frontend Challenge: December Edition will feature two beloved prompts: CSS Art and Glam Up My Markup. Our theme is December, designed to be all-encompassing and broad as everyone wraps up the year.
As with all Frontend Challenges, there will be one winner per prompt. That’s two chances to win:
- A 6-month DEV++ membership
- A gift from the DEV Shop
- An exclusive DEV badge
We hope you feel challenged and have some fun! Read on for the details.
Key Dates
- Contest start: December 04, 2024
- Submissions due: December 29, 2024
- Winners announced: January 09, 2025
Badge Rewards
Winners
Congratulations to our Frontend Challenge: December Edition winners! Read the full announcement post here.
Challenge Prompts
CSS Art: December
Draw what comes to mind for you when it comes to the month of December. Depending on where you live, that could mean you’re in the heat of summer or bundling up to hit the slopes. Or perhaps you associate December with a celebration or tradition you’d like to share with us.
Judging Criteria:
- Creativity
- Effective Use of CSS
- Aesthetic Outcome
Glam Up My Markup: Winter Solstice
Use CSS and JavaScript to make the below starter HTML markup beautiful, interactive, and useful. December is when the Northern Hemisphere observes and experiences the Winter Solstice (June in the Southern Hemisphere) — We have provided a starter template of a site that dives into the science and culture surrounding the winter solstice around the world.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Winter Solstice Celebrations Around the World</title>
</head>
<body>
<header id="main-header">
<h1>Celebrating the Winter Solstice</h1>
<nav id="main-nav">
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#science">The Science</a></li>
<li><a href="#hemispheres">Solstice Across Hemispheres</a></li>
<li><a href="#celebrations">Global Celebrations</a></li>
<li><a href="#traditions">Solstice Traditions</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
</nav>
</header>
<section id="introduction">
<h2>Introduction to the Winter Solstice</h2>
<p>The winter solstice is a significant astronomical event that marks the shortest day and the longest night of the year. It occurs annually in December in the Northern Hemisphere and in June in the Southern Hemisphere. This event has been observed and celebrated by cultures around the world for thousands of years, often symbolizing rebirth, reflection, and the triumph of light over darkness.</p>
</section>
<section id="science">
<h2>The Science Behind the Solstice</h2>
<p>The solstices occur due to the Earth's axial tilt of approximately 23.5 degrees relative to its orbital plane around the Sun. This tilt causes different parts of the Earth to receive varying amounts of sunlight throughout the year, leading to the changing seasons. During the winter solstice, one hemisphere is tilted the farthest away from the Sun, resulting in the shortest period of daylight.</p>
<p>At the exact moment of the solstice, the Sun reaches its lowest maximum elevation in the sky. In the Northern Hemisphere, this happens around December 21st or 22nd, when the Sun is directly over the Tropic of Capricorn at 23.5 degrees south latitude. In the Southern Hemisphere, the winter solstice occurs around June 20th or 21st, when the Sun is over the Tropic of Cancer at 23.5 degrees north latitude.</p>
<p>The solstice is a precise moment in time, but its effects are felt throughout the day. The term "solstice" comes from the Latin words "sol" (sun) and "sistere" (to stand still), because the Sun's apparent movement north or south comes to a stop before reversing direction.</p>
</section>
<section id="hemispheres">
<h2>Solstice Across Hemispheres</h2>
<p>The experience of the solstice differs greatly between the Northern and Southern Hemispheres due to their opposite seasons.</p>
<article class="hemisphere" id="northern-hemisphere">
<h3>Northern Hemisphere</h3>
<p>In the Northern Hemisphere, the December solstice marks the beginning of winter. Countries like the United States, Canada, Russia, and much of Europe experience their shortest day and longest night. The weather typically becomes colder, and many cultures have developed traditions to bring light and warmth into this dark time of year.</p>
</article>
<article class="hemisphere" id="southern-hemisphere">
<h3>Southern Hemisphere</h3>
<p>Conversely, in the Southern Hemisphere, the December solstice signals the start of summer. Nations such as Australia, South Africa, and Argentina enjoy their longest day and shortest night. This time is associated with warmth, outdoor activities, and often, summer vacations.</p>
</article>
<p>This opposite experience of the solstice underscores the diversity of cultural responses to the same astronomical event, influenced by local climate and historical traditions.</p>
</section>
<section id="celebrations">
<h2>Global Celebrations of the Winter Solstice</h2>
<article class="celebration" id="newgrange">
<h3>Newgrange - Ireland</h3>
<p>The prehistoric monument of Newgrange is aligned with the rising sun on the winter solstice. Built over 5,000 years ago, it predates Stonehenge and the Egyptian pyramids. Each year, a beam of sunlight illuminates the inner chamber, symbolizing the victory of light over darkness.</p>
</article>
<article class="celebration" id="intiraymi">
<h3>Inti Raymi - Peru</h3>
<p>Although traditionally held during the June solstice, which is the winter solstice in the Southern Hemisphere, Inti Raymi is an ancient Incan festival honoring the Sun god Inti. The celebration includes music, dancing, and sacrifices, reflecting the importance of the Sun in agricultural societies.</p>
</article>
<article class="celebration" id="modranicht">
<h3>Modranicht - Anglo-Saxon Tradition</h3>
<p>Meaning "Mother's Night," Modranicht was observed by the Anglo-Saxons on the eve of the winter solstice. It was a time to honor female deities and ancestral mothers, symbolizing fertility and the rebirth of the Sun.</p>
</article>
<article class="celebration" id="koliada">
<h3>Koliada - Eastern Europe</h3>
<p>Koliada is a Slavic festival celebrated during the winter solstice. Traditions include singing carols, feasting, and lighting fires to symbolize the return of the Sun. The festival has influenced modern Christmas and New Year traditions in the region.</p>
</article>
</section>
<section id="traditions">
<h2>Common Solstice Traditions</h2>
<ul>
<li><strong>Bonfires and Candles:</strong> Lighting fires and candles is a widespread tradition to represent light overcoming darkness.</li>
<li><strong>Feasting:</strong> Communities gather to share meals, strengthening social bonds during the cold months.</li>
<li><strong>Gift-Giving:</strong> Exchanging gifts symbolizes goodwill and sharing abundance.</li>
<li><strong>Decorating with Evergreens:</strong> Using evergreen plants like holly and mistletoe represents eternal life and protection.</li>
<li><strong>Reflection and Renewal:</strong> The solstice is a time for introspection, setting intentions for the coming year.</li>
</ul>
</section>
<section id="conclusion">
<h2>Conclusion</h2>
<p>The winter solstice is a profound event that connects humanity across time and space. Despite differences in culture and climate, people around the world share common themes in their celebrations—hope, renewal, and the enduring human spirit. Understanding the science behind the solstice enhances our appreciation of these traditions and highlights our connection to the cosmos.</p>
</section>
<footer id="main-footer">
<p>© 2024 Winter Solstice Celebrations</p>
<nav id="footer-nav">
<ul>
<li><a href="#main-header">Back to Top</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Judging Criteria:
- Accessibility
- Usability and User Experience
- Creativity
- Code quality
Frontend Challenge: December Edition 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 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: December Edition Rules
NO PURCHASE NECESSARY. Open only to 18+. Contest entry period ends December 29, 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: December Edition Contest Rules and General Contest Official Rules.
