Solution : Live Site URL
Solution submitted at Frontend Mentor - Submission link
This is a solution to the Article preview component challenge on Frontend Mentor.
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
- HTML
- CSS
- CSS Grid
- CSS Flexbox
- JavaScript
It is easier to use relative and absolute position for elements with fixed height and width. At first I built the article component with responsive sizing but had to switch to fixed sizing for the share menu to be positioned properly.
Learned about some new elements related to the element article. MDN link
Re-learned and used the fill attribute for SVGs. MDN link
This challenge was done with the design principles of mobile-first philosophy. Slowly and surely getting the hang of it and moving away from desktop-view first.
- Final challenge screenshot(s) (desktop and mobile)