Frontend Mentor - Article preview component

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Your challenge is to build out this article preview component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

The only JavaScript you'll need for this challenge is to initiate the share options when someone clicks the share icon.

Your 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

Descktop :

Mobile :

Links

• Solution URL: here

My process

CSS : working with grid and flexbox. Javascipt : working with a toggle

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• SASS / SCSS
• Javascript

What I learned

I learned to use simple Javascipt, in this exercice I used the toggle for display or not the popup.

Continued development

I will practive more javascript.

Useful resources

Author

• Website - Steven
• Frontend Mentor - @y/Stv-devl