This is a solution to the Meet landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Frontend Mentor - Meet landing page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
      • Screenshot mobile
      • Screenshot tablet
      • Screenshot desktop
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

• Solution URL: GitHub repository
• Live Site URL: Site deployed in GitHub Pages

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

• Dynamic image loading depending on the viewport, this was used in the Hero part, where I made use of as a wrapper tag, and inside this the unary tag with its responsive attribute "media" where it allows to set a condition for the respective image loading, the attribute "srcset" contains the path of the resource location. The tag contains the image that will be loaded by default if the above conditions are not met.

  <picture>
    <source
      srcset="./assets/desktop/image-hero-left.png"
      media="(min-width: 1024px)"
    />
    <img src="./assets/tablet/image-hero.png" alt="left" />
  </picture>

• Use of the Grid Layout for the distribution of the internal components of the Hero, providing greater convenience when relocating the elements based on the Viewport of each device.

  .hero {
    overflow-x: hidden;
    display: grid;
    grid-template-areas:
      "left"
      "content";
  }

when the viewport is 1024px or higher

.hero {
  grid-template-areas: "left content right";
}

In each Hero component they are placed using the "grid-area" property.

I would like in future projects to implement pre-processors such as Sass, also to make use of animations to improve usability.

• A Complete Guide to Grid - This resource helped me to remember certain properties for CSS Grid management, it is very useful because it provides visual content.

• A Complete Guide to Flexbox - Useful for remembering CSS Flex handling properties and their visual representation

• : The Picture element - Use and usefulness of the tag for semantics and management to dynamically load resources (responsive).

• linkedin - Jhoan Sebastián Pérez Acosta
• Frontend Mentor - @jhoanSebasPerez
• Twitter - @JhoanPerezA0