Design comparison
Solution retrospective
that is completed the challenge i would try to make the website responsive from the beginning.
What challenges did you encounter, and how did you overcome them?i faced problems in positioning some of the components and also faced issues in making it responsive
What specific areas of your project would you like help with?I would like to get help in positioning and responsiveness thankyou.
Community feedback
- @gdsimoesPosted 7 months ago
Design & Layout:
-
Image Alignment: The main image appears off-center, which affects the visual balance of the page. Consider adjusting the CSS properties like
margin
to center the image effectively. -
Card Width: The card is currently too wide.
-
Scrolling Issue: On smaller screens like laptops, it would be better if the entire page fit without needing to scroll. This can be achieved by making sure the card height is equal to the one in the design.
Code Quality:
-
Code Formatting: There are some inconsistencies in your formatting. Tools like
Prettier
can automatically format your code, making it cleaner and more readable. -
Naming Conventions: Using IDs like
div1
andimg2
can make the code harder to maintain. More descriptive class names would enhance the readability and reusability of your CSS. For example, using.profile-card
instead of#div1
could be more descriptive. -
Use of
<br>
: Instead of using<br>
tags for adding space, it's better to use CSS properties such asmargin
orpadding
. This approach is more flexible and keeps your HTML cleaner.
General:
- Your choice of colors and fonts aligns well with the design file, which is a great start! With some adjustments to layout and code structure, your project will be even better.
Marked as helpful0 -
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