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: https://www.frontendmentor.io/solutions/flexbox-mobile-grid-desktop-layout-UDRWz4gif
- Live Site URL: https://djokaras.github.io/article-preview-component/
I've started with mobile first approach. Mobile layout using flex, for desktop version I've used grid by spaning img element.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Similar challenge like previous ones. Practices layout for both mobile and desktop. I've reminded myself of grid and spanning.
Must practice more semantic HTML. Also I don't feel comfortable using grid and span in it, so I have to go back to my resources and strengthen that area.
- For practicing grid - This helped me with grid span, and I should revisit it.
- Website - Djordje Stevic
- Frontend Mentor - @Djokaras