Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

• 4th challenge now i believe, really enjoying it and getting the hang of the HTML CSS ones. Practice really is helping!

• Mainly doing these on mobile (Acode) which takes longer and has added complexity when upscaling to browser view but thoroughly enjoying it still! Might try another JS one next ;)

• The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

My process

• Started with the HTML, giving basic structure to the elements.
• Added CSS, starting with the container and outer box.
• Worked from the outside in until the structure was correct.
• Styled the outer box from the top down.
• Upscaled from mobile to browser view.

Built with

• Acode
• HTML
• CSS

What I learned

• Found this one really easy!
• Used variables for colors and gave rem a go instead of px... Maybe thats why scaling up wasnt such hassle?

Continued development

• Continue using rem to get a real feel for it.

Author

• Ryan James Dillon