Responsive meet landing page

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted 2 months ago

  Hello Gonzalo Tejada!

  Congratulations on completing the challenge. You did awesome! Your HTML structure is well-organized and demonstrates a solid understanding of semantic elements. However, here are some recommendations and comments in terms of web development best practices:

  1. Accessibility: Alt text descriptions: You’ve included alt text for the images, which is great. Make sure the alt text is descriptive enough for screen readers. For example:

  <img src="./images/desktop/image-women-videochatting.jpg" alt="Two women having a video chat"> <img src="./images/desktop/image-men-in-meeting.jpg" alt="Men in a meeting room during a video call">

  Button accessibility: Ensure your buttons are labeled well for assistive technologies. Although your buttons have clear text, ensure that their purpose is clear for screen readers. Add aria-label if needed.

  <button class="btn btn-purple" aria-label="Learn more about Meet">What is it?</button>

  2. SEO Optimization: Meta description: Include a meta description for better SEO.

  <meta name="description" content="Meet landing page for group chat solutions, enabling face-to-face virtual meetings and cross-device collaboration.">

  Title tag: The title is concise, but you may want to add more keywords for better SEO optimization. For example:

  <title>Group Chat for Everyone | Meet Landing Page</title>

  3. CSS Best Practices: Inline styles: It’s good practice to avoid inline styles. Move the .debug class style to your styles.css file to keep all your styles centralized.

  /* in styles.css */ .debug { border: 1px solid red; } Use descriptive class names: Class names like hidden-mobile, hidden-desktop are a good practice for responsive design. However, class names such as btn-purple and btn-blue rely on color for distinction. Consider a more descriptive name based on their function rather than color, such as .btn-download and .btn-info.

  4. HTML Semantics: Heading hierarchy: The hierarchy is good, but consider adding a main heading (<h1>) for SEO and accessibility, especially within the main tag. Ensure that headings are used sequentially:

  <h1>Group Chat for Everyone</h1> <!-- Main title --> <h2>Built for modern use</h2> <h2>Experience more together</h2>

  Main content structure: You could wrap the .main-content and .cta-footer divs in <section> tags to better convey their semantic purpose and to improve readability for assistive technologies:

  <section class="main-content"> <!-- content --> </section> <section class="cta-footer"> <!-- content --> </section> 5. Responsive Design: Image optimization: You are using different images for desktop and mobile, which is a good practice. You might consider using srcset for responsive images, which would allow browsers to automatically select the best image resolution based on screen size.

  <img srcset="./images/mobile/image-woman-in-videocall.jpg 480w, ./images/desktop/image-woman-in-videocall.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="./images/desktop/image-woman-in-videocall.jpg" alt="Woman in video call">

  Viewport considerations: Ensure that the page elements scale properly across various devices. Media queries are important for handling different viewports. 6. Performance Optimization: Image loading: Consider lazy loading for images to optimize performance, especially since images are a large part of the landing page:

  <img src="./images/desktop/image-woman-in-videocall.jpg" alt="Woman in video call" loading="lazy">

  Use minified CSS: Ensure that css/styles.css is minified in production to reduce file size and improve load times.

  By following these best practices, you will improve the accessibility, performance, and maintainability of your landing page. Keep up the great work!

  Marked as helpful

  0

  ---

  

  P

  Gonzalo Tejada•240

  @vgt3j4d4Posted 2 months ago

  @Aggressive-Mohammed I like your points there. Will follow them from now on. Thanks!

  0