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
  • What I learned
  • Continued development
  • 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: GitHub
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

• I learned how to make a tooltip effect in CSS
• I learned about using mask to change the color of an SVG. As I didn't know much about using SVGs and changing their colour, I googled ways in which to do so. I ended up placing a div inside another div, so that I could both change the background colour of the parent div and then the colour of the child div/icon.
• I learned more about using JavaScript and event handlers.

Continued development

• The Javascript really got to me here combined with the cascading effects of CSS in addition to media queries. I struggled a bit with these and therefore I would like to do some more practice with this, especially media queries in CSS.

Useful resources

• How To Make Tooltips With Only CSS - This was my first time making a tooltip, so I had to look for guidance. This video helped me a lot.

Author

• GitHub - YayoKB
• Frontend Mentor - @YayoKB

Acknowledgments

I would like to thank Web Dev Simplified for making such helpful videos.