Skip to content
OverviewSolutions
1
Comments
3
Benjamin Semah
@BenjaminSemah

All comments

  • Benjamin Semah•70
    @BenjaminSemahPosted 12 months ago

    Hi BehzodKholmahmadov. Great job done! 👍

    Thumbs up for implementing both the mobile and desktop versions.

    HTML: You use semantic elements like main and button which is good so keep it up.

    The only minor thing I will encourage in your HTML is with your button element. It’s best practice to always declare the type when you create a button.

    For example, this could have been

    <button class=”button” type=”button”>Continue</button>

    CSS: Your background colors for the summary items are not faded like the one in the project because you are using hsl() and not hsla(). The a in hsla() is for alpha. And that is what handles transparency.

    So for example, you have the following variables declared in your root.

      –clr-accent-1: 0, 100%, 67%;
  –clr-accent-2: 39, 100%, 56%;
  –clr-accent-3: 166, 100%, 37%;
  –clr-accent-4: 234, 85%, 45%;

    These values are by default using hsl() because each one has three values and no transparency is being applied. To achieve the transparency, you can use hsla(), and give each one an alpha value for transparency.

    Here is an example for the first one.

      –clr-accent-1: hsla(0, 100%, 67%, 0.1);

    Also, you didn’t give any color to the .summary-item-title elements.

    I hope this helps.

    Cheers and happy coding!

    Marked as helpful
    0
  • Forche Francesco•280
    @Mbungai-FrancescoSubmitted 12 months ago

    -I couldn't figure out how to add those little lines to the edge of the borders, for the blocks on the summary side

    Result Summary component

    2
    Benjamin Semah•70
    @BenjaminSemahPosted 12 months ago

    Hi Mbungai. Great job done! 👍

    HTML: For your HTML, I will encourage you to consider using semantic HTML elements. Divs are useful, but for the sake of accessibility, SEO, and improving code readability, using these semantic elements like main, section, footer, button, ul and li (for list items) is highly recommended.

    CSS: Your CSS looks good! The only feedback I will give is on where you use blocks:nth-child. For example, you do this for all 4 blocks.

    .blocks:nth-child(1) {
  background-color: #FFF6F5;
}
.blocks:nth-child(1) {
  color: hsl(0, 100%, 67%)
}

    Since it’s targeting the same element. You can do the following instead. This does the same thing and it’s more concise. And same for the other three .block elements too.

    .blocks:nth-child(1) {
  background-color: #FFF6F5;
  color: hsl(0, 100%, 67%);
}

    Cheers and happy coding!

    Marked as helpful
    0
  • Saul Gustavo A. S.•550
    @saul-gustavoSubmitted 12 months ago

    I need help.

    When creating this project, i encountered several difficulties. I wanted to make it look exactly like the design image, and i did achieve it, but it doesn't resemble the image as much as i'd like. As seen in the CSS styles sheet.

    I added many properties that shouldn't be there, but they worked for me to make it look like the image. Honestly, i need to continue practicing my CSS skills.

    I haven't explored many properties, and it's a bit challenging for me, but i'm very happy with the result obtained in the end. I enjoyed working on this project; it's the first project i've uploaded to my Frontend Mentor profile.

    Results Summary Component

    2
    Benjamin Semah•70
    @BenjaminSemahPosted 12 months ago

    Hello Saul. Great job done! 👍

    HTML: Your HTML is well structured and easy to read. I think what you can do to improve it is to use semantic HTML elements.

    You use divs almost throughout. That works technically. But for the sake of improving accessibility and SEO, I will encourage you to consider using semantic elements like main, section, footer, and ul/li elements for lists.

    CSS: For your CSS, you declare variables for the colors (which I think was excellent.) But going through your code, I realise you didn’t use the variables where you could have. For example, for your linear-gradients. You could have used the variables you declared instead of hardcoding the color values.

    As your code is now, if you wanted to change the colors for the gradient, you would have to change them one by one. But if you had used the variables you declared, then when you want to change the colors, you wouldn’t need to change them one by one. But you only have to change the value of the variable and the change will apply to all places where the variable is used.

    I hope this helps. Best wishes and happy coding!

    Marked as helpful
    1