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

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: https://www.frontendmentor.io/solutions/article-preview-component-css-open-props-js-and-vite-HklMKyOL5
• Live Site URL: https://fem12-article-preview-component-drrck.netlify.app/

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• JavaScript
• CSS Open Props - Supercharged CSS variables
• Vite - Superfast bundling tool

What I learned

I learned to use media queries to toggle a modified social sharing overlay when the share button is clicked. On a mobile screen size, the social icons slide in as a bar. On a desktop screen size, a kind of social tooltip flies out of the share button.

Continued development

Apply more CSS Open Props.

Useful resources

• MDN - Using media queries

Author

• Frontend Mentor - @DarrickFauvel
• LinkedIn - Darrick Fauvel