https://github.com/ayokanmi-adejola/article-preview-component
A responsive article preview component, developed as a Frontend Mentor challenge using HTML, CSS, and JavaScript, featuring a clean layout that accurately displays article information and includes an interactive share toggle.
https://github.com/ayokanmi-adejola/article-preview-component
css3 flexbox html5 mobile-first-workflow vanilla-js
Last synced: 8 months ago
JSON representation
A responsive article preview component, developed as a Frontend Mentor challenge using HTML, CSS, and JavaScript, featuring a clean layout that accurately displays article information and includes an interactive share toggle.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/article-preview-component
- Owner: Ayokanmi-Adejola
- Created: 2025-06-20T12:53:27.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-20T12:54:29.000Z (12 months ago)
- Last Synced: 2025-09-30T00:00:33.278Z (9 months ago)
- Topics: css3, flexbox, html5, mobile-first-workflow, vanilla-js
- Language: HTML
- Homepage: https://article-preview-component-lac-pi.vercel.app
- Size: 230 KB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Article preview component solution
This is a solution to the [Article preview component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## 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
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript
- Responsive design principles
### What I learned
This project helped me practice several key frontend development concepts:
1. **Responsive Design**: Implementing a layout that works seamlessly across mobile and desktop devices using CSS media queries.
2. **Interactive Components**: Creating a share tooltip that appears/disappears with smooth transitions and proper event handling.
3. **CSS Positioning**: Using absolute positioning for the share tooltip with proper z-index management.
Here are some code snippets I'm particularly proud of:
```css
.share-tooltip {
position: absolute;
bottom: 60px;
right: 0;
background: hsl(217, 19%, 35%);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.share-tooltip.active {
opacity: 1;
pointer-events: auto;
}
```
```js
function toggleShare(e) {
e.stopPropagation();
const tooltip = document.getElementById('shareTooltip');
tooltip.classList.toggle('active');
if (tooltip.classList.contains('active')) {
document.addEventListener('click', hideTooltipOnClick);
} else {
document.removeEventListener('click', hideTooltipOnClick);
}
}
```
### Continued development
Areas I want to continue focusing on in future projects:
- **Accessibility**: Adding proper ARIA labels and keyboard navigation support
- **CSS Architecture**: Exploring methodologies like BEM for better CSS organization
- **JavaScript Frameworks**: Implementing similar components using React or Vue.js
- **Animation**: Adding more sophisticated animations and micro-interactions
### Useful resources
- [CSS-Tricks Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - This helped me understand flexbox layout for the responsive design.
- [MDN Web Docs - Event Handling](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) - Great resource for understanding event listeners and proper cleanup.
## Author
- Frontend Mentor - [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)