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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

• Live Site URL: Live Demo

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

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"
}

• 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.

• Frontend Mentor - @cacosted
• Twitter - @cacosted