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
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: https://github.com/Edg3Runner/FM_Blog-Preview-Card
• Live Site URL: Blog Preview Card

My process

Built with

• Semantic HTML5 markup
• Tailwind CSS
• Flexbox
• Mobile-first workflow
• React - JS library

What I learned

This is the very first project where I've been using Tailwind CSS. I learned:

• How to add custom fonts and colors to Tailwind.
• How to use CSS variables in Tailwind.

Continued development

While there are some intuitive elements in Tailwind, I will need some more practice with it by creating some projects where I can setup entire themes and have more complicated designs.

Useful resources

• Adding custom fonts to React - This helped me to understand how I should be adding custom fonts into React.
• Adding Fonts to Tailwind - I watched this video to see how you could add the configuration into Tailwind CSS.
• Adding colors to Tailwind

Author

• Website - Mitch Pauwels
• Frontend Mentor - @Edg3Runner
• Twitter - @MitchPauwels