@osmanbay90
Posted
Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:
general advice
1. Remove Unnecessary Code: Less is more! Eliminate any unnecessary code. For example, remove HTML comments and avoid redundant CSS properties. Clarity and simplicity are key.
2. Responsive Images: Give images a max-width of 100% to ensure responsiveness across different devices. Also, consider adding a border-radius value for a polished look.
3. Typography Consistency: Maintain consistent font sizes, text alignment, and margins. For instance, set h1 and p font size to 15px (0.9375rem), align text to the center, and apply consistent margins.
4. Accessibility: Use semantic elements like <nav>, <article>, and <section> to improve screen reader compatibility. Add alt attributes to images for better accessibility.
5. CSS Variables: Leverage custom properties (CSS variables) for consistent color schemes, font sizes, and spacing. This makes it easier to maintain and update styles.
improvements you can do in your code
1. Semantic HTML: Ensure you use appropriate HTML elements for each piece of content. For instance, use <main> tags and wrap cards to improve accessibility. Replacing the first child <div> of the <body> with <main> can enhance the structure.
2. CSS Box Sizing: Instead of using both -webkit-box-sizing and -moz-box-sizing, you can use box-sizing alone as it's supported by all modern browsers.
3. Inconsistent Units: You're using rem for font sizes and other dimensions but also using px in some places. It's better to maintain consistency.
4. Redundant Margin Property: There's a redundant margin-bottom: 1.25rem; property in .container img.
5. Media Query for Min Width: The media query should use max-width instead of min-width to target smaller screens.
Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! š
Marked as helpful
@maryemsalah
Posted
@osmanbay90 thanks, it was so helpful.
