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

• Frontend Mentor - Article Preview Component Solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • 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: Right here!
• Live Site URL: Deployed on Vercel

My process

Built with

• Semantic HTML5 markup
• Svelte + Transition API
• WindiCSS + Flexbox and Grid
• Mobile-first workflow
• Malachite UI
• Vite

What I learned

I learnt how those little triangles used on Popover elements work. I had to google it and I finally found it on CSS Tricks!

<div aria-hidden="true" class="arrow-down absolute top-full left-1/2 transform -translate-x-1/2" />

.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid hsl(217, 19%, 35%);
}

Useful resources

• Malachite UI - This awesome library helped me build the Popover and let me use a powerful hook. I wonder who built it.

Author

• Frontend Mentor - @Shawn Lee

Acknowledgments

• CSS Triangle by Chris Coyier -> Oct 6, 2009