Frontend Mentor - Article preview component solution

This is a solution to the Article preview component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See the social media share links when they click the share icon

Screenshot

Links

• Solution URL: Frontend Mentor
• Live Site URL: Github Pages

My process

Built with

Useful resources

• HTML meta tag - I added more metadata in head tag for beter SEO.
• Aria-haspopup attribute - I placed aria-haspopup attribute on the share button.
• Font awesome cdn - CDN link for font awesome icons
• Triangle down shape - The starting code to create the little traingle on the tooltip.
• Closest() method - I used the closest() method in JavaScript to match the CSS selector when you want close the tooltip.
• Coolors Color Contrast Checker - The desaturated dark blue has low contrast and switched the color to color: hsl(216, 17%, 23%);

Author

Acknowledgments

• little traingle - The rest of the little traingle down code is in the Youtube comment section of this video.
• Article preview component solution - I referenced this amazing solution to implement accessbility with the share button and the JavaScript code.