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: Solution at Frontend Mentor
• Live Site URL: Article Preview Component

My process

Beginning with mobile, I styled the layout only (no tool tip/JS). Then I styled the active states. Still no JavaScript. Then, I wrote the JS to make it functional.

Built with

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

What I learned

For the second time now, I used the trick of hiding a checkbox which can be clicked to display new or additional content. I learned how to create the triangle at the bottom of the tool tip too. For the JS I had to learn how to add event listeners for the checkbox. This project stretched my coding skills.

To see how you can add code snippets, see below:

.preview__social::after {
        content: '';
        position: absolute;
        left: calc(50% - 12px);
        top: 100%;
        border: 12px solid var(--grayish-blue);
        border-color: var(--very-dark-grayish-blue) transparent transparent transparent;
    }

Continued development

I need to continue to learn about accessibility, organizing my css into multiple files, and JavaScript.

Useful resources

• The “Checkbox Hack” (and things you can do with it) - How to do use the hidden checkbox. I used them with the FAQ Accordion project, but I needed a refresher.
• Inclusively Hiding & Styling Checkboxes and Radio Buttons - This article gives me the chance to read up on how best to implement the hidden checkbox hack.

Author

• GitHub - @jaycgreenwald
• Frontend Mentor - @jaycgreenwald
• Twitter - @jaycgreenwald

Acknowledgments

Frontend Mentor Slack, my accountability group, and a wellspring of online information created by coders. Thank you!