| Mobile Preview (375x812) | Desktop Preview (1440x960) |
|---|---|
 |
 |
 |
 |
This project is a fully interactive article preview where users can share said article via Facebook, Twitter, or Pinterest, toggle between light and dark mode, and experience a responsive, accessible design across all screen sizes.
Created as part of the building challenges from Frontend Mentor.
The component is built with semantic HTML5, modern CSS, and vanilla JavaScript modules to handle dynamic behavior.
The main focus was creating an accessible and mobile-first layout with theme toggling and working social share links while also respecting user preferences.
- Responsive layout (mobile-first, scales up to desktop).
- Light/dark theme toggle
- Share to Facebook, Twitter, and Pinterest with pre-filled content
- Made sure site still works in
prefers-reduced-motion - Accessible interactive elements which uses ARIA attributes (
aria-expanded,aria-label,aria-hidden) - Added a simple keyboard support (
Escapekey closes share links if opened) - Pixel-perfect implementation with PerfectPixel
- I learned how to utlize more ARIA attributes in HTML5 for better accessibility
- First time learning that I can't normally target
::afterelements with JavaScript - Using
matchMediafor reduced motion checks - Gained more experience in managing component state with ARIA attributes
- Getting more comfortable in writing modular JavaScript (
import/export) for cleaner code separation. - How to generate social share links dynamically for multiple platforms using
encodeURIComponent()in JavaScript.
- HTML5
- CSS3
- JavaScript
- Git
- GitHub
- Netlify
- JPG design image
- PerfectPixel
- Clone the repository
- Open
index.htmlin your browser
Or you can check out the live website here
A Google Lighthouse audit was conducted on the final version of this project. You can view the full report here.
Created by Elmar Chavez
Month/Year: August 2025
Journey: 5th month of learning frontend web development.