Design comparison
Community feedback
- @petritnurediniPosted 9 months ago
Congratulations on completing the Order Summary Card project! 🌟 Your project is a testament to your growing skills in web development. Here's some feedback to further polish your work:
HTML Best Practices:
- Use of Semantic HTML: Great job structuring your HTML. To enhance semantic clarity, consider wrapping the main content in a
<main>
tag and the button section in a<footer>
or<nav>
. - Alt Attributes for Accessibility: Ensure all images have descriptive
alt
attributes for accessibility. For example,alt="Illustration Hero"
for the hero image.
CSS Best Practices:
- Responsive Design: Your use of media queries shows a good understanding of responsive design. Keep testing on different devices for consistency.
- CSS Variables: Excellent use of CSS variables for colors and fonts. This makes your stylesheet more manageable and adaptable.
- Selector Specificity: Be cautious with high specificity selectors, like IDs. Using classes can offer more flexibility and reusability.
General Suggestions:
- Accessibility: Check that your website is accessible, especially for keyboard navigation and screen readers. Tools like WAVE can help you evaluate accessibility.
- Performance Optimization: Optimize loading times by compressing images and minifying CSS. Tools like TinyPNG can reduce image file sizes.
- Code Formatting: Consistent indentation and spacing improve readability. Tools like Prettier can help automate formatting.
Your hard work is evident, and each project is a step closer to mastering web development. Keep exploring, learning, and coding!
For further learning, consider these resources:
- Mozilla Developer Network (MDN) for comprehensive guides on HTML and CSS.
- CSS-Tricks for advanced CSS techniques and tips.
- freeCodeCamp for interactive coding challenges and web development tutorials.
Marked as helpful1@xStephxPosted 9 months ago@petritnuredini thanks for advice! I followed all advices and will apply them in future projects. If you have any other suggestions feel free to text me!
1 - Use of Semantic HTML: Great job structuring your HTML. To enhance semantic clarity, consider wrapping the main content in a
- @FaojulazimPosted 8 months ago
@xStephx I have been watching your solutions of the challenges and I have been loving the codes you have written. One thing I am always worried of is the responsiveness of a website. Can you please recommend me some tips and tricks to get better at making a website responsive?
1@xStephxPosted 8 months ago@Faojulazim thanks for the feedback! Glad you liked my solutions, tips and tricks about responsive are CSS frameworks, Flexbox or Grid. This methods are the best for responsive. Try all methods and use what you most like. If you have other questions or suggetions feel free to text me!
0
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