Submitted 3 months ago

Designo Multi Page Website

Kristoffer•220

@KristofferLe

Preview site View code

This is a solution for...Designo multi-page website

HTML
CSS
JS

5guru

Design comparison

SolutionDesign

Solution retrospective

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

My first Guru challenge!

I will plan the components a bit better before I start off to make them more reusable and the code shorter and more concise.

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

Ensuring the page looks the same throughout each page.

I created a page template component and wrapped each page inside of that to make sure padding and gaps were the same on each page.

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

All feedback is appreciated, I would love to know what I could do more effective and how I can make the code more robust.

Thanks!

Community feedback

MikDra1•6,980

@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