Responsive landing page using CSS flexbox

Community feedback

• 

  Huy Phan•2,060

  @huyphan2210Posted about 24 hours ago

  Hi, @BeeAlmighty

  I checked out your solution and I have some thoughts:

  • Frontend Mentor will assess your solution once submitted. It's best to review your work and address any potential issues before submitting.
  • Your body doesn't fill the entire viewport. The viewport refers to the visible area of the browser window. To ensure it fills the whole screen, you should apply min-height: 100vh to the body. This is generally considered a best practice for most pages, though there are exceptions. Also, set margin: 0 on the body, make it non-scrollable on desktops, as the browser adds default margins.
  • Since you're using Flexbox on the body, you can easily center the .container (the card) by applying margin: auto. This will center the card within the available space, and Flexbox will handle the rest for you.
  • For better accessibility and readability, try to use more semantic HTML elements instead of relying on divs. Elements like main, footer, and article provide meaning to the structure of the page and are better for SEO and screen readers.
  • You're using h2 for the card title, but there's no h1 on the page. It's better to use h1 for the main heading, as it provides a clear hierarchy for both users and search engines. You can still style it to match the design using CSS.
  • Make your CSS class names more meaningful and descriptive. Research CSS naming conventions like BEM (Block Element Modifier), which can make your code easier to understand and maintain.
  • Lastly, I'd recommend familiarizing yourself with the mobile-first approach. It’s a popular and effective method for building responsive designs, where you start styling for mobile screens and progressively enhance the design for larger screens.

  Hope this helps!

  0
• 

  Marcelo Meneses•50

  @MenesesMGPosted 1 day ago

  Yes

  0