Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Site (Mobile-First) Flexbox

Hunter Mannβ€’ 120

@huntdamann

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I wanted to start from the beginning to get a good understanding of media queries. I think on past solutions I jumped out ahead of myself, but the best way to learn is to get your hands dirty :) I am open to all suggestions to improve code and best practices

Community feedback

rayaβ€’ 2,850

@rayaatta

Posted

hello πŸ‘‹ Hunter Mann, congratulations on completing this challenge πŸŽ‰ I have some suggestions you might find useful. 1, It is better to keep your html and css in different files because separating them improves performance since the browser parses the html and caches the css on subsequent visits 2 In order to actually center the card on any screen Add this to your body min-height:100vh. 3 Try merging these

<main>
    
    <div class="container">

Into

<main class="container">

And

<footer>
  <div class="attribution">

into <footer class="attribution"> Do not create parent elements when a child element could exist quite happily on its own.

3 Text should not be wrapped inside sectioning element rather the parent shouls be given a child element for text such as span,p,h2 etc Wrap the text inside your footer inside a p

I hope this helps

Nice solution broπŸ‘*

0

Please log in to post a comment

Log in with GitHub
Discord logo

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