Samjolas/drawers

Frontend Mentor - Article preview component

furniture

Frontend Mentor - 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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: Drawers - GITHUB
• Live Site URL: Drawers - LIVE

My process

• Evaluate the design
• write README
• input all variables
• started with the in-active desktop view
• created the card inside the webpage and used grid to align the img and the content
• I wrote the HTML code for all the card content
• I styled the card
• I worked on the responsiveness of the webpage
• I worked on the active share button
• I also worked on the responsiveness of the share bar

Built with

• Semantic HTML5 markup
• BEM METHODOLOGY
• CSS (SASS)
• Responsive Design
• CSS GRID
• CSS flexbox

What I learned

Continued development

• Keep improving my css skills and also my JavaScript skills.

• Code more often

Author

• Frontend Mentor - @Samjolas