等待已經結束!我們又帶著另一場前端挑戰賽回來了。
持續到6 月 9 日,前端挑戰:六月版將提供兩個六月主題提示: CSS Art和Glam Up My Markup 。對於那些錯過“一位元組解釋器”的人,我們保證很快就會恢復該提示!
像往常一樣,每個提示都會有一名獲勝者。這是贏得吹牛權利的兩次機會、DEV 商店的禮物和專屬 DEV 徽章。
另外,如果您不知道 - 徽章可以疊加在您的個人資料上以炫耀多次獲勝!但當然,這不是關於獲勝的目的地,而是關於旅程。我們希望這是一個挑戰自我並享受樂趣的機會。
繼續閱讀以了解每個提示以及如何參與!
畫出您想到六月時想到的事情。根據您居住的地方,這可能是夏至或落葉和冬季的過渡。或者也許是父親節或驕傲月。
當您想到六月時,您會想到什麼,請告訴我們!
這是供任何想要直接參與的人使用的提交模板,但請在提交之前查看官方挑戰頁面上的所有評審標準和挑戰規則。
{% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%0A---% 0A%0A_This%20is%20a%20submission%20for%20%5BFrontend%20Challenge%20v24.04.17%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Ffrontend-2024-05-202020CSS% %3A%20June._%0A%0A%23%23%20靈感%0A%3C! --%20什麼%20是%20you%20highlighting%20today%3F%20--%3E%0A%0A%23 %23% 20Demo%20%0A%3C!--%20Show%20us%20your%20CSS%20Art!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20post%20(%200%20(%20the%參見20FAQ%20section% 20of%20the%20challenge%20page)%20or%20you%20can%20share%20an%20image%20of%20your%20project%20and%20share%20a%200%20link%200%200%。 20--%3E% 0A%0A%23%23%20旅程%20%0A%3C!--%20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C%20anything%20you %20are%20尤其%20proud%20of %2C%20what%20you%20hope%20to%20do%20next%2C%20etc.%20--%3E%0A%0A%3C!--%20Team%20Submissions%3A% 20Please%20pick%20one%20member%20to %20發布%20the%20submission%20和%20credit%20隊友%20by%20listing%20他們的%20DEV%20用戶名%20直接%20in%20the% 20the%20post。 20。 )。
CSS 藝術提交模板
{% 結束%}
使用 CSS 和 JavaScript 使下面的入門 HTML 標記美觀、互動且有用。我們提供了一個網站的入門模板,其中列出了世界上最好的海灘以及每個海灘的一些資訊。由於該模板不包含照片,因此您可能需要發揮創意,使其具有視覺吸引力。
您提交的內容應該比我們提供的 HTML 更有趣、更具互動性,但也應該可用且易於存取。您不應直接編輯提供的 HTML,除非是透過 JavaScript。我們期待風格和實質。您可以加入基本樣板,包括元標記等以用於演示目的。
<!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>
這是供任何想要直接參與的人使用的提交模板,但請在提交之前查看官方挑戰頁面上的所有評審標準和挑戰規則。
{% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20devchallenge%2C%20frontendchallenge%2C%20css%2C%20javascript%2C%20frontendchallenge%2C%20css%2C%20javascript%0Ajava ---%0A%0A_This%20is%20a%20submission%20for%20%5BFrontend%20Challenge%20v24.04.17%5D((https%3A%2F%2Fdev.to%2Fchallenges%2FF-202F%2F%2Fdev.to%2Fchallenges%2FF-202F-frontend5-294-front05-29)% 2C%20Glam%20Up%20My%20Markup%3A%20Beaches_%0A%0A%23%23%20What%20I%20Built%0A%0A%3C!--%20告訴%20us%20what%20you%20what0%200and% 20what %20you%20were%20looking%20to%20實作。 20direct% 20將%20an%20editor%20嵌入%20this%20post%20(參見%20the%20challenge%20頁的%20the%20FAQ%20section%20)%20或%20you%20can%20share%20an%% 20of%20your%20project%20和%20share%20a%20public%20link%20到%20the%20碼。告訴%20us%20about%20your%20process%2C %20what%20you%20已學會%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what%20you%20hope%20to%20what%20next20what%20you%20hope%20to%20what%C %20etc.%20--%3E%0A%0A% 3C! --%20Team%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the%20submission%20and%20ammacre%20and%200%20and%200%20and%200%20and%200%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%。 20listing%20their%20DEV%20usernames%20directly%20in%20the%20body %20of%20the%20post。%20--%3E%0A%0A%3C! 20考慮%20為%20您的%20程式碼加入%20a%20許可證%20。 %20cover%20image%20to%20your%20post%20(如果%20you%20想要)。 --%3E %}
使我的標記提交模板更加迷人
{% 結束%}
為了參與,您需要使用與每個提示關聯的提交範本來發布貼文。
請在提交之前查看我們的評審標準、規則、指南和常見問題解答頁面,以便您了解我們的參與指南和官方競賽規則(例如資格要求)。
5 月 29 日:前端挑戰:六月版開始!
6 月 9 日:提交截止時間為太平洋夏令時間晚上 11:59
6 月 11 日:得獎者公佈
我們很高興看到您六月的專案!問題?請在下面詢問他們。
祝你好運,編碼愉快!
原文出處:https://dev.to/devteam/join-us-for-the-next-frontend-challenge-june-edition-3ngl