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

Basic Blog Preview Card using simple HTML5 and CSS.

P
BozJR 220

@BozJR

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?

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.

Community feedback

Sarah 540

@AutumnsCode

Posted

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

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