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.
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
- Solution URL: Frontend mentor
- Live Site URL: GitHub Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- A little JavaScript (DOM manipulation)
- Google fonts - Font library
- Pexels - Image library
How to cut images with the clip-path property:
.article-preview__image {
clip-path: inset(0 0 50px 0);
}- Manage frustration
- Design more orderly by breaking down large problems into smaller problems and trying to finish each part before moving on to the next
- Learn and practice more about DOM manipulation
- ChatGPT - It was always like my co-worker and I was able to ask for help when I needed it
- The W3C Markup Validation Service - This helped me check the markup validity in my HTML document.
- The W3C CSS Validation Service - Jigsaw - This helped me validate my CSS style sheet.
- CSSmatic - This helped me add shadow to the article preview component and the share section active.
- Frontend Mentor - @jdrodriguez2707
- X-Twitter - @Johan79854000
- Instagram - @johan_rodriguez_dev