Responsive and interactive Article Preview component

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.

In this challenge i used:

• Semantic HTML5 markup
• CSS custom properties
• CSS media queries.
• Flexbox
• CSS animations (transform & transition)
• Mobile-first workflow

What I learned:

• use of the method "toogle" in javascript;
• The use of the background-position parameter, the possibility to use negative values to position elements outside the container and disable it with the value "unset"

I also strengthened my knowledge of:

• Display flex;
• absolute/relative position;
• use of z-index;
• Use of animations to give more life to the interactive elements of my pages.
• Manipulation of images in SVG format, mainly the "fill" attribute

Author

• Linkedin - Agustín R. Firpo
• @Arfirpo