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

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

• Live Site URL: Live Demo

My process

Built with

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

What I learned

This was my first time installing stylus on a project, I learn how to use it and how to set it up with the package.json

Here is how I set up a command to compile and watch the stylus files:

"scripts": {
    "watch": "stylus -w styles/main.styl -o public/main.css"
}

Useful resources

• Stylus docs - The official documentation of stylus, this helped me to know how to install the stylus package, and how to use it to compile from .styl to .css.

• MDN - This is an amazing resource to check the documentation about HTML, CSS, and JavaScript, this helped to confirm the structure of the toggle()property of classList

• Kevin Powell - This channel is great to learn how works CSS in a easy way, this video really helped understand how object-fit works and how to use it properly.

Author

• Frontend Mentor - @cacosted
• Twitter - @cacosted