DEV Community

Cover image for Join us for the next Frontend Challenge: June Edition
Jess Lee Subscriber for The DEV Team

Posted on

Join us for the next Frontend Challenge: June Edition

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!

Our Two 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!

Here is the submission template for anyone that wants to jump right in, but please review all judging criteria and challenge rules on the official challenge page before submitting.

CSS Art Submission Template

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>
Enter fullscreen mode Exit fullscreen mode

Here is the submission template for anyone that wants to jump right in, but please review all judging criteria and 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 judging criteria, rules, guidelines, and FAQ page before submitting so you understand our participation guidelines and official contests rules such eligibility requirements.

Important Dates

  • May 29: Frontend Challenge: June Edition begins!
  • June 09: Submissions due at 11:59 PM PDT
  • June 11: Winners Announced

happy-pride-month

We’re very excited to see your June projects! Questions? Ask them below.

Good luck and happy coding!

Top comments (46)

Collapse
 
fazicodes profile image
fazicodes

Cool😎 , I am in

Collapse
 
jess profile image
Jess Lee

yay

Collapse
 
ben profile image
Ben Halpern

Good luck!

Collapse
 
chintanonweb profile image
chintanonweb
Collapse
 
ben profile image
Ben Halpern

Awesome!

Thread Thread
 
chintanonweb profile image
chintanonweb

Thank you so much!

Collapse
 
sillybreakfast profile image
breakfast

this looks fun! i'll be participating!

Collapse
 
jess profile image
Jess Lee

awesome!

Collapse
 
ben profile image
Ben Halpern

Have fun 🌞

Collapse
 
ben profile image
Ben Halpern

This is going to be a good one

Collapse
 
salladshooter profile image
SalladShooter

I’ll definitely be participating this month, watch out everyone 😀!

Collapse
 
arndom profile image
Nabil Alamin

Really wish I could participate but so much is going rn, looking forward to some amazing submissions 🌟

Collapse
 
jess profile image
Jess Lee

Can't wait to see what everyone comes up with :)

Collapse
 
dhrutisubham03 profile image
Dhrutisundar Sahoo

It was fun participating in this one! Good way to brush up on vanilla javascript and CSS.
Here's my submission for Glam up my Markup

Collapse
 
hikolakita profile image
Hikolakita

I'm finally done with my submission
Well, it was very fun to do, and I learned tons of new JavaScript and CSS skills!
If you want to see my submission, just click this :)

Collapse
 
dhrutisubham03 profile image
Dhrutisundar Sahoo
Collapse
 
chrisx001001 profile image
ChrisX001001

Let's go! 🙌

Some comments may only be visible to logged-in visitors. Sign in to view all comments.