Article Preview Component Solution [Plain HTML and CSS]
Design comparison
Solution retrospective
Any suggestions on this solution are welcome. 😊
Community feedback
- @MoBlack00Posted 9 months ago
you have done a great job bro, but I have a question how are you making it pixel-perfect like the design
1@faruqAbdulHakimPosted 9 months ago@MoBlack00 Hi, you can try to use Pixel Perfect extension by WellDoneCode.
0 - @petritnurediniPosted 9 months ago
Congratulations on completing the Article Preview Component project! You've done a great job, and it's impressive to see your progress. Here are a few tips to take your project to the next level:
-
Use of
alt
Attribute in Images:- It's great to see
alt
attributes in your images, but some are missing descriptive text. Thealt
attribute should concisely describe the image content or function. This is crucial for accessibility and SEO. For instance,<img src="./images/drawers.jpg" alt="Drawers" aria-hidden="true">
can be<img src="./images/drawers.jpg" alt="Wooden drawers with decorative plants on top" aria-hidden="true">
. Learn more aboutalt
text at WebAIM.
- It's great to see
-
JavaScript Code Refactoring:
- Your JavaScript for toggling the share options is concise and functional. Consider refactoring it to reduce repetition and enhance readability. For example, you can directly toggle the 'hide' class on
shareOptions
without checking ifshareBtn
contains the 'active' class. Explore more about JavaScript best practices at MDN Web Docs.
- Your JavaScript for toggling the share options is concise and functional. Consider refactoring it to reduce repetition and enhance readability. For example, you can directly toggle the 'hide' class on
-
CSS Media Queries:
- The responsiveness of your design is crucial. Ensure that the media queries cover various screen sizes adequately. For instance, you may want to adjust the
max-width
in your media query for better layout on tablets. This CSS Tricks guide can be a handy reference for standard device breakpoints.
- The responsiveness of your design is crucial. Ensure that the media queries cover various screen sizes adequately. For instance, you may want to adjust the
Keep up the fantastic work and continue challenging yourself with new projects. Each step forward builds your skills and confidence as a developer. Your dedication is evident, and I'm excited to see your future creations. Happy coding! 🌟💻
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