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

• Links
• Built with
• What I learned
• Continued development
• Author

Links

• Live Site URL: Blog Preview Card GitHub Page

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

This challenge allowed me to review how to style the span elements and practice adding the box-shadows around the card. What stood out to me from the design was the label for the preview card. I went with the span element but I learned that there were some other options to recreate the design.

    <div id="label">
        <span>Learning</span>
    </div>

    #label {
        height: 1.75rem;
        width: 5rem;
        background-color: var(--Yellow);
        border-radius: 5px;
        text-align: center;
        }

    span {
        color: var(--Black);
        padding: 10px 0;
        display: inline-block;
        position: relative;
        bottom: 4px;
        font-weight: 800;
        }    

Continued development

I'd like to use this solution in an actual blog homepage and enabling a filtering feature.

Author

• Frontend Mentor - @ysstudio22
• X - @YoshiCode03