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
  • 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: Github link
• Live Site URL: Blog preview card

My process

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

I learned how to use custom font files

@font-face {
    font-family: 'Figtree';
    src: url("./assets/fonts/Figtree-VariableFont_wght.ttf") format('truetype');
}

I learned how to add border & box shadow

.box {
    border: 1px solid hsl(0, 0%, 7%);
    box-shadow: 8px 8px;
}

I learned how to makwe the div width same as h1

.box {
    display: block;
    width: fit-content;
}

p {
  width: 0;
  min-width: 100%;
}

I learned that setting min-height is important to align items vertically

body {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    min-height: 90vh;
}

Continued development

I still need to practice the positioning an element more. I also need to learn about CSS in general & HTML5 rules.

Useful resources

• W3 School - Best resource to refer for any CSS related queries
• MDN Mozilla - Also a good site to refer for CSS

Author

• Frontend Mentor - @snigdha-sukun