We know you've been waiting for it...
Running through February 23, Frontend Challenge: February Edition will feature two beloved prompts: CSS Art and Glam Up My Markup. Note that there's an important rule change for the Glam Up My Markup challenge, which we'll detail below.
As with all Frontend Challenges, there will be one winner per prompt. That's two chances to win bragging rights, a 6-month DEV++ membership, an exclusive DEV badge, and more!
We hope you have fun flexing your CSS and Javascript skills! Read on to learn how to participate.
Prompts ✨
CSS Art: February
Draw what comes to mind for you when it comes to the month of February. Whether it's celebrating love and friendship, commemorating Black History Month, experiencing the last whispers of winter, or welcoming the first signs of spring - we want to see your artistic interpretation! Perhaps you associate February with a special celebration or tradition you'd like to share with us.
Whatever it is, we can't wait to see your art!
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: Love Language Discovery
Use CSS and JavaScript to make the below starter HTML markup beautiful, interactive, and useful. February is often associated with expressions of love and connection — we have provided a starter template for an interactive love language discovery platform that helps users understand different ways of expressing and receiving love.
Your submission should be more fun and interactive than the HTML we provide, but also be usable and accessible. You may now add elements within the content areas such as images, but you cannot modify structural and layout related elements unless it is via JavaScript. Your changes have to be minimal and you can't overhaul the html. You may add basic boilerplate, including meta tags etc. for presentation purposes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Love Language Discovery</title>
</head>
<body>
<div id="app-container">
<!-- Hero Section with Interactive Elements -->
<section id="hero">
<h1 class="title">Discover Your Love Language</h1>
<p class="subtitle">Understanding how you give and receive love</p>
<div id="language-cards">
<div class="card" data-language="words">Words of Affirmation</div>
<div class="card" data-language="acts">Acts of Service</div>
<div class="card" data-language="gifts">Receiving Gifts</div>
<div class="card" data-language="time">Quality Time</div>
<div class="card" data-language="touch">Physical Touch</div>
</div>
</section>
<!-- Interactive Quiz Section -->
<section id="quiz-section">
<h2>What's Your Primary Love Language?</h2>
<div id="quiz-container">
<div id="question-display">Click Start to Begin</div>
<div id="options-container">
<button class="option" data-value="0">Option 1</button>
<button class="option" data-value="1">Option 2</button>
<button class="option" data-value="2">Option 3</button>
</div>
<button id="start-quiz">Start Quiz</button>
</div>
</section>
<!-- Dynamic Chart Section -->
<section id="results-section">
<h2>Love Language Distribution</h2>
<div id="chart-container">
<div class="bar-container" data-language="words">
<div class="bar"></div>
<label>Words</label>
</div>
<div class="bar-container" data-language="acts">
<div class="bar"></div>
<label>Acts</label>
</div>
<div class="bar-container" data-language="gifts">
<div class="bar"></div>
<label>Gifts</label>
</div>
<div class="bar-container" data-language="time">
<div class="bar"></div>
<label>Time</label>
</div>
<div class="bar-container" data-language="touch">
<div class="bar"></div>
<label>Touch</label>
</div>
</div>
</section>
<!-- Interactive Stories Section -->
<section id="stories">
<h2>Love Language Stories</h2>
<div id="story-carousel">
<div class="story-card" data-category="words">
<h3>The Power of Words</h3>
<p class="preview">A story about the impact of kind words...</p>
<span class="expand-btn">+</span>
</div>
<div class="story-card" data-category="acts">
<h3>Small Acts, Big Love</h3>
<p class="preview">When actions speak louder...</p>
<span class="expand-btn">+</span>
</div>
<div class="story-card" data-category="gifts">
<h3>Meaningful Gestures</h3>
<p class="preview">The art of thoughtful giving...</p>
<span class="expand-btn">+</span>
</div>
</div>
<div id="story-nav">
<button id="prev-story">Previous</button>
<button id="next-story">Next</button>
</div>
</section>
<!-- Interactive Map Section -->
<section id="global-expressions">
<h2>Love Around the World</h2>
<div id="map-container">
<div id="region-markers">
<span class="marker" data-region="asia">Asia</span>
<span class="marker" data-region="europe">Europe</span>
<span class="marker" data-region="americas">Americas</span>
<span class="marker" data-region="africa">Africa</span>
</div>
<div id="region-info">
Select a region to learn more
</div>
</div>
</section>
<!-- Daily Challenge Section -->
<section id="daily-challenge">
<h2>Today's Love Language Challenge</h2>
<div id="challenge-card">
<p id="challenge-text">Loading today's challenge...</p>
<button id="new-challenge">Get New Challenge</button>
<div id="completion-tracker">
<span class="day completed">1</span>
<span class="day">2</span>
<span class="day">3</span>
<span class="day">4</span>
<span class="day">5</span>
</div>
</div>
</section>
</div>
<footer>
<p>Share your love language journey</p>
<div id="social-share">
<button class="share-btn" data-platform="twitter">Twitter</button>
<button class="share-btn" data-platform="facebook">Facebook</button>
<button class="share-btn" data-platform="instagram">Instagram</button>
</div>
</footer>
</body>
</html>
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 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
- February 12: Frontend Challenge: February Edition begins!
- February 23: Submissions due at 11:59 PM PDT
- March 6: Winners Announced
We're very excited to see your February submissions! Questions? Ask them below.
Good luck and happy coding!
Good luck everyone! ❤️ ❤️