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

• Frontend Mentor - Article preview component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • 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

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markups
• CSS custom properties
• Flexbox
• Responsive development
• Vanilla JavaScript

What I learned

In this challenge I learned how to show a mini-popup on the click of a button in Vanilla JavaScript, that means without any framework, library o plugin to help me doing that.

Continued development

I can improve my JavaScript skills in order to write better code. The code I wrote it's ok and works, but I think I can do better than that. Moreover, I can be more accurate in the style development.

Useful resources

• Google Fonts - This is a computer font and web font service owned by Google. This includes free and open source font families, an interactive web directory for browsing the library, and APIs for using the fonts via CSS and Android. You can choose and import in your project one or many fonts. Popular fonts in the Google Fonts library include Roboto, Open Sans, Lato, Oswald, Montserrat, Source Sans Pro, and Raleway.

Author

• Check out my Frontend Mentor profile - @pasqualegiorgio
• Check out my GitHub profile - pasqualegiorgio
• Check out my coding community - Coding Bunker