Design comparison
Community feedback
- @Abhirocks889Posted over 1 year ago
Hello Chiyembekezo, congratulations on completing this challenge. The result looks great and responsive. Here are some suggestions in order to improve even further:
HTML:
Indentation: While the overall indentation is consistent, it is advisable to add one more level of indentation for the content inside the <body> element. This will improve readability and make the structure clearer.
Use semantic HTML elements: Consider using semantic HTML elements to provide better structure and meaning to your code. For example, you can replace the <div class="content-container"> and <div class="content"> with appropriate semantic elements such as <header> and <main>.
Image alt text: The alt attribute for the image is currently set to "image showing gabrielle chanell perfume." It's a good practice to provide more descriptive and meaningful alternative text that accurately describes the image. If possible, include relevant keywords or details about the product.
Improve heading hierarchy: Currently, you have used a combination of <p> and <h1> tags for the heading. It would be better to use the appropriate heading tags (<h1> for the main heading and <h2> for the subheading) to maintain a logical heading hierarchy.
Include <meta name="viewport">: Consider adding a <meta> tag with the name="viewport" attribute to ensure proper rendering and responsiveness on various devices. This tag helps control the viewport dimensions and scaling.
Organize CSS file references: If you have multiple CSS files, it's helpful to organize the references by placing them in the <head> section in a logical order. For example, you can group external stylesheets before internal stylesheets or custom styles.
Add comments: Adding comments to your HTML code can be beneficial for both yourself and other developers who might work on the code in the future. Comments can provide additional context, explain certain sections, or make the code more readable.
CSS:
Consistent unit usage: In the CSS code, you're using different units for some properties. For example, in the .add class, you're using pixels (px) for padding and width, while in other places, you're using rem or omitting units altogether. It's recommended to use consistent units throughout your codebase for better maintainability. Consider using rem or % for properties like padding and width to ensure scalability and responsiveness.
Increase specificity for button:hover: To increase the specificity of the button:hover selector, you can prefix it with .button-container. This will make the selector more targeted and avoid potential conflicts with other button styles.
Consolidate flex-related properties: In the .left and .right classes, you're using flex-grow, flex-shrink, and flex-basis separately. You can simplify this by using the shorthand flex property. For example, you can replace:
flex-shrink: 1; flex-grow: 1; flex-basis: 300px;with:
flex: 1 1 300px;Overall, you've done a great job, and with these enhancements, your code will be even more polished. Keep up the good work!
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