Skip to content
Submitted about 2 months ago

Responsive landing page using CSS Grid and Flexbox

ownedbyanonymous•190
@ownedbyanonymous
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This challenge was a bit different from the other challenges in the sense it was an entire page and not just a component and l had to use media queries to cater for desktops, tablets and smaller mobile devices. Completing the challenge alone is something l am proud of and the fact that l was abl to search for answers whenever a hit a blocker. This chalenge gave a chance to use all the knowledge l have acquired in my journey and more.

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

Had challenges with responsive design, the assets l used in the project are exactly the optimized assests that were provided. I had a hard-time understanding the CSS property position. I am still not sure when and how to use the absolute and relative values. Then l figured using the mobile-first approach was not the best approach to the problem.

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

Best practice and approach to responsive design especially when it comes to fonts and images. How to set media queries so that there are no devices left behind Difference between absolute and relative and when to use to each.

Community feedback

  • Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    Great job on the project! Here are some important suggestions to improve your code:

    • Max-width for Content: Consider adding a max-width to your content containers. This prevents your content from stretching too much on larger screens, improving readability and visual balance.

    • Add ARIA Labels: Make sure that your <a> tags have appropriate aria-labels, especially if they contain non-descriptive text like "Download v1.3". This improves accessibility for screen readers.

    • Hero Section in <main>: The hero section should be wrapped in <main> tag. This is better for semantic HTML as the hero content seems to be part of the main content of the page.

    • Text-preset Class Refactoring: There’s a lot of repetition in your typography classes (text-preset-*). Consider using utility classes or creating a more generalized class to handle similar styles (e.g., font-family, font-weight, and line-height).

    These changes will improve the maintainability, accessibility, and performance of your project. Keep up the excellent work!

    0

Please log in to post a comment

Log in with GitHub

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