Design comparison
Community feedback
- @laurentGurbalaPosted about 1 month ago
Hi, congratulations on completing this challenge! It's a great achievement, and I wanted to share a few suggestions to help you improve even further in your learning journey :)
HTML Structure:
-
Use of semantic tags: It's recommended to use semantic HTML tags (like
<header>,<main>,<footer>, etc.) instead of generic tags like<div>. This improves accessibility and helps structure your content better for browsers and screen readers. Of course, you'll still use <div> tags when a block doesn't represent a specific semantic part of your site, but it's good to keep this in mind :) -
Font management: Font files are often provided directly in the project. While Google Fonts is a convenient option (I used it myself at first), it's preferable to use the local font files included in the project. This makes your site more robust in case Google Fonts becomes unavailable.
-
CSS class names: To make your code more readable, try using more descriptive class names than "photos", "html", or "para". This will help you better understand your code, even after a few weeks. If you haven't already, I recommend checking out the BEM (Block, Element, Modifier) methodology, which is really helpful for naming classes in a clear and structured way.
CSS:
- Card positioning: I noticed you used position: absolute to center your card on the screen, but this causes issues on smaller screens. You can achieve the same result in a simpler and more responsive way using Flexbox, which will make your design more adaptable. For example, in your <body>, you can add these styles:
display: flex; /* Flexbox for layout management */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ min-height: 100vh; /* Ensure the content takes up the full viewport height */This will allow you to easily center your content, regardless of screen size. If you haven't explored Flexbox yet, I highly recommend it — it will make your life much easier for layout management :)
- Font-weight property: I noticed a small error in your use of font-weight. You used a value of 300%, but font-weight only accepts numbers without units (like font-weight: 300). You can spot this kind of issue easily with development tools (like Google Chrome's), where an exclamation point indicates a problem with the property.
I hope these tips will be helpful and allow you to further improve your project. Keep up the great work, you're on the right path!
0 -
Please log in to post a comment
Log in with GitHub
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