Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

Meet Landing Page

Joseph Reyes•440
@JreyIV
A solution to the Meet landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I was able to make it responsive entirely using CSS grid, specifically grid-template-area. This is something I want to get more comfortable with and I think I learned a lot by playing around with it until I got it right. Next time I will be more carefully about how I structure things later. For example, doing mobile-first approach I knew it would work with flex so I did that first but later on I needed to change it to grid to make the hero section layout work. In the end it cost me time doing flex first. I need to think about the changes I will need to make later on and plan accordingly.

What challenges did you encounter, and how did you overcome them?

It was hard to figure out the grid layout for the hero. Specifially moving the text content between the two images. I figured it out by playing around with it, going step by step.

I also had troubles with the text and sizing. The text wraps weirdly so that it has on word in the middle. For example:

Group Chat For Everyone

instead of: Group Chat For Everyone

how do I fix that?

What specific areas of your project would you like help with?

I couldn't figure out how to move two images on the hero to the end of the screen so that they were cut off by the edge of the screen like the design without making a huge hap between them on mobile screens. How did you guys do that?

As usual, are there any redundencies in my CSS that I would fix?

How do you guys deal with sizing efficiently?

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Joseph Reyes's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License