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: Live Link

My process

Built with

• Semantic HTML5 markup
• Clean, maintainable CSS
• Flexbox for layout
• Mobile responsive design
• Vanilla JavaScript for interactivity
• BEM-inspired class naming
• CSS ::after pseudo-element for the tooltip arrow
• Responsive media query at 767px and 375px

What I learned

This challenge deepened my understanding of responsive behavior and interactive UI patterns. Key takeaways:

1. Mobile-First Popup Integration

.profile.active {
    background-color: hsl(217, 19%, 35%);
    border-radius: 0 0 0.625rem 0.625rem;
}

Instead of hiding the profile on mobile, I transformed it into the share bar — a cleaner, more performant approach than absolute positioning.

2. Z-Index & Layering for Share Button

.profile.active .share-btn {
    position: relative;
    z-index: 10;
}

Ensured the share button stays on top of the popup bar in mobile view.

3. Smooth Toggle with JavaScript

profile.classList.toggle('active');

Used classList.toggle() with stopPropagation() to prevent unwanted closures.

4. Pixel-Perfect Text Wrapping

h2 {
  max-width: 30ch;
  word-break: break-word;
}

.description > p {
  line-height: 1.4rem;
  max-width: 70ch;
  word-break: break-word;
}

Used ch units to control line breaks exactly like the design.

Continued development

In future projects, I want to focus on:

• CSS Custom Properties for theming (light/dark mode)
• CSS Transitions for smoother popup animations
• Accessibility: ARIA labels, keyboard navigation, focus states
• Performance: Lazy loading images, reducing CLS

Useful resources

• MDN Web Docs - Flexbox – The ultimate guide for layout control.
• CSS-Tricks - A Complete Guide to Flexbox – Visual cheat sheet I keep bookmarked.
• MDN: Element.classList → Official docs with examples

Author

• GitHub: @LaDonaAmor
• Frontend Mentor: @LaDonaAmor
• X: @LaDona_Amor)

Acknowledgments

A huge thank you to the Frontend Mentor team for creating this challenge and giving developers like me the opportunity to grow through real-world projects. The clear designs, supportive community, and focus on practical skills make every challenge a valuable learning experience.

Proudly built with love, precision, and a lot of coffee.