Submitted 3 months ago

Responsive Blog Preview Card

Brian Gabini•30

@briangabini

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Implementing the design quickly.

What challenges did you encounter, and how did you overcome them?

Not knowing how to use box-shadow CSS property.

What specific areas of your project would you like help with?

If there are things that I could have implemented better in the code.

Community feedback

MikDra1•6,960

@MikDra1Posted 3 months ago

If this comment was useful please mark it as helpful 💗

1. Use CSS Variables for Repeated Values:

Define common values like colors, font sizes, and padding as variables. This reduces redundancy and makes global changes easier.

CSS

:root {
    --font-primary: 'Outfit', sans-serif;
    --font-secondary: 'Young Serif', sans-serif;
    --color-primary: hsl(14, 45%, 36%);
    --color-secondary: hsl(30, 10%, 34%);
    --padding: 2rem;
    --border-radius: 1rem;
}

2. Group Related Styles:

Combine related styles to avoid scattering your CSS.

CSS

body, h1, p, ul, li, img {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
}

3. Use Utility Classes:

Create utility classes for commonly used styles like centering, padding, and text alignment.

CSS

.text-center {
    text-align: center;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.padding-lg {
    padding: var(--padding);
}

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord