Skip to content
Submitted 11 months ago

Basic Blog Preview Card using simple HTML5 and CSS.

BozJR•260
@BozJR
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Most proud that I didn't need much help with this one (maybe cause its similar to the first project) but feel like I am slowly starting to get the hang of CSS and HTML. Just need to practise practise and more practise.

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

My only real challange was trying to get the profile picture and the profile picture name at the bottom of the card to sit side by side.

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

Just need some hints and tips on how to get two different elements to sit side by side.

Code

Please log in to post a comment

Log in

Community feedback

  • Sarah•580
    @AutumnsCode

    Hello,

    well done for completing this challenge.

    I am happy to provide to give you some feedback:

    • the h1 element should be the first heading in your page. I would suggest to use a paragraph element with a class instead to style the element.
    • the next paragrapgh should have a class since its the text below your h1-element is actually the main text of the challenge.
    • I really enjoy that you include a hover effect on your h1-element. To made it even better, it would be great if you could wrap inside a anchor-element.
    • The profile image is too large. Inside your css, you could add a width to reduce it.
    • Almost every html-element has default styling. It can be really difficult to deal with them while styling like img. If I see an image in one of my project, I am always add reset to take away the default one. Here is the one for image, picture
    img, picture {
 max-width: 100%;
display: block
}

    I hope those tips and tricks will be helpful Best regards Sarah

    Marked as helpful

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