Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

-Responsive web design,making the card to adopt depending on the user device. -Making the images responsive by adding a max-width property on them

img{
	max-width:100%;
	display:block;
}

-Css transitions-making the link transition smoothly by adding transition timing function

 transition: .2s ease-in;

Useful resources

• Web.dev - This article helped me understand how to make images responsive.I would recommend it to anyone still learning this concept.

• Conquering ressponsive layouts - This is an amazing course by Kevin Powell it helped me greatly to level up my responsive design concepts.

Author

-Opudo Prince

• Frontend Mentor - @codecrasher
• Twitter - @opudoprince