Submitted 3 months ago

Responsive Recipe using flexbox

Jerry Surya Irawan•240

@JerryIrawan14

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

maybe some improvement by doing css with much cleaner solution, my code was a mess xd, its repeating the same style over and over again.

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

how to make the ul text with different color ? i still confused about that.

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

can anyone recommend how to do css much cleaner way ? im tryin to learn how to prevent write the same styling over again.

Community feedback

MikDra1•6,920

@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);
}

Marked as helpful

Jerry Surya Irawan•240
@JerryIrawan14Posted 3 months ago
wow thanks mate, i will apply that for the next project 👍.
0

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