Article Preview Component Solution [Plain HTML and CSS]

Community feedback

• 

  MoBlack00•80

  @MoBlack00Posted 10 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

  ---

  

  Faruq Abdul Hakim•580

  @faruqAbdulHakimPosted 10 months ago

  @MoBlack00 Hi, you can try to use Pixel Perfect extension by WellDoneCode.

  0
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 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:

  1. Use of alt Attribute in Images:

     • It's great to see alt attributes in your images, but some are missing descriptive text. The alt 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 about alt text at WebAIM.

  2. 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 if shareBtn contains the 'active' class. Explore more about JavaScript best practices at MDN Web Docs.

  3. 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.

  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