Submitted over 1 year ago

Huddle Landing Page With Alternating Feature Blocks | Mob First | Flex

Faruque Dewan•360

@faruquedewan

Preview site View code

This is a solution for...Huddle landing page with alternating feature blocks

HTML
CSS

2junior

Design comparison

SolutionDesign

Solution retrospective

This one was fun. Can anyone tell me how to change icon color to pink on hover? Or maybe what kind/format of icons to use to do that?

Community feedback

Amer Shah•260

@fggdbdsbfdPosted over 1 year ago

I'd be happy to give you some advice on the topic of landmarks in HTML documents! Here are some tips, presented in bullet points with a professional tone and a few helpful emojis:

-🏠 Every good HTML document should have a main landmark! This landmark helps users understand the structure of the page and navigate it more easily.

-📌 The main landmark should typically be the <main> element. This element should contain the main content of the page, such as articles, posts, or product listings.

-🔎 You can use ARIA attributes to help identify your main landmark and make it more accessible to users who rely on assistive technologies.

-🧐 Remember that other landmarks, such as <header>, <nav>, <aside>, and <footer>, can also be helpful for organizing your content and making it easier to navigate.

-💻 When designing your HTML document, it's important to consider the needs of all users, including those with disabilities. By using proper landmarks and ARIA attributes, you can make your site more accessible and user-friendly for everyone.

-I hope these tips help you create an organized and accessible HTML document with a clear main landmark! If you have any more questions, feel free to ask.

Marked as helpful

Faruque Dewan•360

@faruquedewanPosted over 1 year ago

@fggdbdsbfd Can you show me some examples of a properly landmarked HTML file?

Amer Shah•260

@fggdbdsbfdPosted over 1 year ago

@faruquedewan Certainly! Here's an example of a properly landmarked HTML file using HTML5 semantic elements:

<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Example Landmarked HTML File</title>
 </head>
 <body>
   <header>
     <h1>Example Landmarked HTML File</h1>
     <nav>
       <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
     </nav>
   </header>
   <main>
     <section>
       <h2>Section 1</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </section>
     <section>
       <h2>Section 2</h2>
       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </section>
   </main>
   <footer>
     <p>Copyright © 2023 Example Company</p>
   </footer>
 </body>
</html>

In this example, we've used the following semantic elements:

<header> to mark up the top section of the page, which contains the main heading and navigation menu. <nav> to mark up the navigation menu within the header. <main> to mark up the main content of the page. <section> to mark up individual sections of content within the main element. <footer> to mark up the bottom section of the page, which contains copyright information. Using these semantic elements helps to make the structure of the page clearer and easier to understand for both humans and machines. It also improves accessibility for users who rely on assistive technologies to navigate the web.

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord