Design comparison
Solution retrospective
around ~ 15 minutes to finish
Community feedback
- @Abhirocks889Posted over 1 year ago
Hello Gabriel congratulations on completing this challenge. The result looks great and responsive. Here are some suggestions in order to improve even further:
HTML:
Remove unnecessary inline styles: In the provided code, there are several inline styles applied directly to elements. It's generally recommended to separate CSS from HTML for better maintainability and reusability. Consider moving these styles to an external CSS file and use classes or IDs to target the elements.
Use semantic HTML elements: Semantic elements provide meaning and improve the structure of the document. In the given code, consider using semantic elements like <header>, <main>, <section>, <article>, and <footer> to provide a clearer structure to your document. For example, you can use a <header> element for the heading section and a <main> element to wrap the main content.
Optimize classes and IDs: Ensure that the classes and IDs used in the markup accurately reflect their purpose. This will make your code more maintainable and easier to understand. For instance, instead of using IDs like div-left and div-right, use more descriptive and meaningful names.
Utilize CSS classes for common styles: Instead of applying inline styles to multiple elements, consider creating CSS classes for common styles. This allows for better separation of concerns and reduces code duplication. For example, you can create a class for the score container and apply it to all relevant elements.
Add alt attributes to images: In the <img> tag, it's important to include the alt attribute for accessibility purposes. The alt attribute provides alternative text for screen readers and helps visually impaired users understand the content of the image.
Include a favicon: Consider adding a favicon to your website by including a <link> tag in the <head> section. This will help users easily identify your website when they have multiple tabs open.
CSS: Remove unnecessary selectors and properties: In the given code, the section selector is empty. If it's not being used, you can safely remove it. Additionally, the span-scores selector doesn't have any styles applied to it. If it's not necessary, you can remove it as well.
Consolidate styles for common elements: You can combine similar styles for elements that share common properties. For example, the padding property for #div-right can be consolidated into a single padding declaration with shorthand notation: padding: 1em 2.5em 0 2em;.
Optimize class and ID names: Ensure that the class and ID names accurately represent their purpose and are easy to understand. This helps with code readability and maintenance. Consider using more descriptive names instead of generic names like div-left and div-right.
Use consistent spacing and indentation: Maintain consistent spacing and indentation throughout your CSS code to improve readability and maintainability. For example, use consistent indentation for nested selectors and properties.
Avoid using fixed width and height values: Instead of using fixed pixel values for width and height, consider using relative units like percentages or flexbox for better responsiveness and adaptability across different screen sizes.
Add comments for clarity: Consider adding comments to your CSS code to provide explanations for specific styles or sections. This can be helpful for both yourself and other developers who may need to understand or modify the code in the future.
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