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
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: solution
• Live Site URL: Blog Card

My process

Built with

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

What I learned

I lerrned alot from the first chalange which i used to, making corrections and applying them to this challange. in this challange i encounted a new styling element which alows me to make my webpage responsive in mobile, tablet and desktop mode. Puting this into use was very exciting. It also alloud me to make changes to my html element when its on the active state. See some code snippets below:

<h1><b>HTML & CSS foundations</b></h1>

h1:active:hover{
     color: rgb(252, 225, 155); 
 }

 @media(min-width: 1441px) {
    .me{
     max-width: 1440px;
     padding: 32px;
 }
}

Taking these challanges have helped me alot the pass few days, finding an uncovering new ways of styling elements to my taste. Cant wait for what comes next....😎

Continued development

I'll focuse more on my webdevelopmet, even though its been long since i visited it, but with this challanges i might just be able to get back on track.

Useful resources

• https://www.coursera.org/ - This site really helped me in learning how to make my webpage responsive. I really liked this pattern and will use it going forward.

Author

• Website - Okorie PraiseGod.E.
• Frontend Mentor - @Peolite1
• Twitter - @prai79461

Acknowledgments

Sometimes giving credit to one's self is important...🙂