Article preview component

What are you most proud of, and what would you do differently next time?

What I'm Most Proud Of I'm most proud of how I implemented the responsive card layout that adapts smoothly between mobile and desktop views. I successfully used SCSS to manage variables, nesting, and media queries, which made the styles organized and maintainable. The interactive share button with its toggle effect was another highlight—it adds a polished, dynamic touch to the UI.

What I’d Do Differently Next Time Next time, I would:

1. Improve accessibility by adding ARIA labels and keyboard navigation for the share button and social icons.

2. Refactor JavaScript to make the code more modular and scalable, possibly with ES6 classes or modules.

3. Consider using CSS Grid for even cleaner layout control and better alignment in more complex designs.

4. Use a component-based approach with a framework like React for better structure and reusability.

What challenges did you encounter, and how did you overcome them?

Challenges I Encountered

1. Positioning the Share Popup Correctly Across Viewports One of the trickiest parts was aligning the share popup tooltip so that it appeared neatly on both mobile and desktop without overlapping or misaligning the content.

How I Overcame It: I used a combination of position: absolute, calculated margins, and media queries. I also added a small arrow using CSS borders to visually link the tooltip to the share button.

2. Making the Layout Responsive Creating a layout that works seamlessly across screen sizes required careful restructuring of the card elements and media query tweaking.

How I Overcame It: I structured the SCSS with mobile-first styling and then added desktop-specific overrides. This approach made debugging and maintenance much easier.

3. Ensuring the Share Button Functionality Worked Smoothly Toggling the visibility of the share icons without causing layout shifts or conflicts with z-index layering was initially challenging.

How I Overcame It: I used JavaScript to toggle classes (.hidden and .active) and made sure each interactive element had proper z-index layering. Testing thoroughly on multiple devices helped iron out any bugs.

What specific areas of your project would you like help with?

Specific Areas I’d Like Help With

1. Accessibility (a11y) Enhancements I'd like to ensure the component is fully accessible — for example, proper ARIA roles, focus management when toggling the share panel, and keyboard navigation support. 👉 Could you advise on best practices or things I might’ve missed?

2. Semantic HTML Structure While the component is visually sound, I want to confirm that I'm using the most semantic and meaningful tags (e.g., main, footer, button, section, etc.) for screen readers and SEO.

3. Optimizing SCSS Structure I used BEM naming with nested SCSS. 👉 Can this structure be improved for better scalability and maintainability in larger projects?

4. Improved JavaScript Logic The share toggle is functional but basic. 👉 Would a more scalable approach like event delegation or data attributes make sense here?