Meet landing page (no libraries)

Community feedback

• 

  P

  ownedbyanonymous•190

  @ownedbyanonymousPosted about 2 months ago

  Hey Emanuele Fabrizio 👋🏾

  Well done on completing the challenge and coming as close as possible to the Figma designs🔥🔥🔥. I salute your effort and l am impressed by you work because l also worked on the same challenge and it was particularly not the easiest challenge, there were tricky parts especially when it came to images.

  Here are a few pointers and hope you find them useful

  1. For accessibility purposes, l think it's best to use semantic tags as compared to non-semantic tags as they provide meaning to elements. For users that use screen reader it means each section is clearly defined which provide better understanding and context to them. For example instead of using the div element for the hero section, image-collage and text-content sections we could use of the section element.

  2. With regards to the hero images, l did use Flexbox and displayed the Flexbox items in a row and used justify-content: space-between to space the items. Here are some code snippets

  <section class="hero flex-container">
        <img
          src="./assets/desktop/faces-left.svg"
          alt="Meet Landing Page"
          class="image-left"
        />
        <div class="hero-content flex-container">
          <h1 class="text-preset-2">Group Chat for Everyone</h1>
          <p class="text-preset-5">
            Meet makes it easy to connect with others face-to-face virtually and
            collaborate across any device.
          </p>
          <div class="cta-buttons flex-container">
            <a href="#" class="button blue">Download v1.3</a>
            <a href="#" class="button purple">What is it?</a>
          </div>
        </div>
        <img
          src="./assets/desktop/faces-right.svg"
          alt="Meet Landing Page"
          class="image-right"
        />
  </section>
  

    .hero{
      width: 100vw;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
    }
  
    .hero > img{
      width: 24.63rem;
      height: 18.88rem;
    }
  
  /*Then for tablets and mobile devices l implemented the following*/
  .hero-content::before{
      content: url("../assets/mobile/combined-image.svg");
      width: 100vw;
      height: auto;
    }
  
    .image-left, .image-right {
      display: none;
    }
  
  

  Hope you find the feedback useful. You are the more than to reach out if have questions or would want us to go through the challenge together.

  Marked as helpful

  1