Skip to content
Submitted 3 months ago

Blog card using Grid and Flexbox

Cosmin•210
@cosminbordianu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I learned a lot during this project and I’m proud of myself for seeing it through to completion.

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

I would greatly appreciate help with a few aspects of my project:

  1. Does * {margin:0; padding:0;} affect the web site's performance? If yes, what is an alternative for resetting browser default styles?
  2. Should you avoid using too many elements? I used three divs inside component and looking back I could have achieved the same result with fewer div elements.
  3. Why there are so many fonts in the project files? I only used the variable font for all elements.
  4. At some point the blog card doesn't stretch no more. Why it happens? (This question is optional. If you have some time to answer, I would gladly appreciate your help.)

Community feedback

  • hitmorecode•7,240
    @hitmorecodePosted 3 months ago

    Congratulations well done.

    • CSS reset is used to remove unnecessary things from a web page. This does not affect the performance of a page.
    • Yes you could have done it with less elements, but also you should start looking at semantic html.
    <body>
	<main>
		<img src="" alt="">
		<button></button>
		<p></p>
		<h1></h1>
		<p></p>
		<footer>
			<img src="" alt="">
			<p></p>
		</footer>
	</main>
</body>

or (semantic html)

<body>
	<main>
		<section>
		   <img src="" alt="">
        </section>
		<section>
		   <button></button>
		   <p></p>
           <article>
		      <h1></h1>
		      <p></p>
           </article>
        </section>
		<footer>
			<img src="" alt="">
			<p></p>
		</footer>
	</main>
</body>
    • Those are just different variations of the same font, you shouldn't pay to much attention to that.
    • The card is not supposed to stretch, so the end result that you have is correct.

    I hope you find this helpful. Keep it up 👍👌

    Marked as helpful
    1
    Cosmin•210
    @cosminbordianuPosted 3 months ago

    @hitmorecode Thank you for taking the time to review my project. I really appreciate your feedback.

    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