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
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

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: https://github.com/vanhog/frontend-mentor-article-preview
• Live Site URL: https://dees-frontend-mentor-article-preview.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Tailwindcss

What I learned

• To call a snackbar a "snackbar" (or even a "toast") ;-)
• to use the classList Method

function showSomePopup() {
  	var thisIcon = document.getElementById('shareline');
  	
  	thisIcon.classList.toggle('hidden');
}

• using Tailwindcss and custom css classes together

Continued development

Useful resources

• W3School's snackbar example - This helped me to figure out, how to handle snackbars.

• [Walid's article preview solution] (https://www.frontendmentor.io/solutions/article-preview-using-js-and-css-and-html-jrvhw5PHtb) - This helped me to apply the w3-example.

Author

• Website - Dieter H. Hoogestraat (Dee)
• Frontend Mentor - @vanhog