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
Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Tharun Raj 1,250

@Code-Beaker

Posted

Hi there, congratulations on completing this challenge... You've done a great work with this one! 🎉

I have checked your live site preview as well as your source code and I would like to forward some of my suggestions regarding your solution that might help you improve it.

  • Your site isn't fully responsive, meaning it currently sticks to the left side of the screen on the desktop. I think you've prioritized mobile screens here. But, make sure your site is responsive for all screens since it is an important part of building websites. Give this article a read and get an idea about making a website responsive.
  • NEVER use the id attribute for styling elements. It is more oriented towards scripting with JavaScript. Instead, use the class attribute to select your elements using the class. Here's an article that explains the purpose of the ID attribute.
  • Write your CSS inside an external CSS file to keep your HTML file smaller.
  • This is subjective and optional. This is important when you're sharing your code with other developers and collaborating on a project. But, try to improve the class names you give.
  • Instead of px units, use relative units like rem. Read this article about it.

I hope you find these points helpful in improving your solution. 😄

Marked as helpful

0
INDavid04 70

@INDavid04

Posted

Hi! Nice work! Instead of using .Desktop class you could add background-color to the body and also display: flex; align-items: center; justify-content: center; to center the card vertically and horizontally. You could add border-radius to the image too. Also you could center the user name using display: flex; align-items: center; on the div parent of the image and text for example. Succes!

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