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
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Live site: https://michahuhn.github.io/frontendmentor-blog-preview-card
• Challenge solution: https://www.frontendmentor.io/solutions/blog-preview-card-using-vue-LoGM08uVZp

My process

Built with

• Vue
• SCSS
• Custom CSS properties
• Semantic HTML5 markup
• Flexbox
• Grid

What I learned

I learned how to navigate through the Figma mockup.

I also learned how to create and animate a box-shadow.

Useful resources

• CSS border effects without using borders - How to create the card shadow.
• Get your stylesheets more organized with Sass partials - My SCSS folder structure is inspired by this video.