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

HTML & CSS and preconnect

ZHARTYLā€¢ 30

@Kevinjoan07

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

learn by using the call to protocol or external apis and include them to my components

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

How to follow all the instructions described in the Guide

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

I would like full feedback on what I can improve.

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hey there! šŸ™‹šŸ½ā€ā™‚ļø

Congrats on completing the challenge! āœ…

Your project looks fantastic!

Here's a tip to make it even better:

Using margin and/or padding isn't always the best way to center an element. Try this super efficient method to center an element vertically and horizontally:

šŸ“Œ Apply this CSS to the body (skip position or margins to make it work correctly):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

Hope this helps!

Keep up the great work!

Marked as helpful

1

ZHARTYLā€¢ 30

@Kevinjoan07

Posted

@danielmrz-dev Thank you very much for this advice and I will implement it in my future challenges. =)

1
micfrazerā€¢ 60

@micfrazer

Posted

The result looks excellent! The semantic tags in the HTML look great. The CSS is likewise very clear (and actually gave me some insight into flex/grid, so thank you).

The border is slightly thicker than the original, but that's stylistic preference (and I prefer the 2px you used, actually). Remove the extra text from the footer (namely the blog material), but that's only a minor textual redundancy at most. Well done!

Marked as helpful

1

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