Blog Preview Card

This is my 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
• Author

Overview

The challenge

This challenge was to build out a simple but stylish blog preview card.

Users should be able to:

• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: GitHub repo
• Live Site URL: https://blog-preview-card-solution-ajs.netlify.app/

My process

Built with

• Vite
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Sass mixins
• Custom script to check accessibility (using pa11y)

What I learned

This challenge was mostly just a review and further practice of my skills.

One new thing I learned while working on this was how to refine my 'a11y' script in package.json so that I could pass the name of the challenge as an argument, and it could thus be added dynamically to the output HTML file.

Author

• Website - Andrew J Shea | Portfolio
• Frontend Mentor - @ashea29
• GitHub - ashea29
• LinkedIn - Andrew J Shea