Design comparison
Community feedback
- @Code-BeakerPosted 4 months ago
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 theclass
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 likerem
. Read this article about it.
I hope you find these points helpful in improving your solution. 😄
Marked as helpful0 - @INDavid04Posted 4 months ago
Hi! Nice work! Instead of using
.Desktop
class you could addbackground-color
to the body and alsodisplay: flex; align-items: center; justify-content: center;
to center the card vertically and horizontally. You could addborder-radius
to the image too. Also you could center the user name usingdisplay: 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 GitHubJoin 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