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.
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
- Solution URL: Frontend Mentor
- Live Site URL: Github Pages
- 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%);
- 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.