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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Screenshots

Desktop View

Desktop Click View

Mobile View

Mobile Click View

Links

• Solution URL: GitHub repo
• Live Site URL: Article Preview Component

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Tailwind-css - For styles

What I learned

Positioning and displaying the social icons container was harder than I thought it would be, but I eventually figured it out, by rearranging the content in html file.

Continued development

I'd like to work more on positioning containers with respective their different parent containers.

Useful resources

• Tailwind-css - Official documentation

Author

• Frontend Mentor - @shivaprakash-sudo