Frontend Mentor | HTML5, CSS , FLEXBOX coding challenge solution

Community feedback

@Bayoumi-dev

Posted over 2 years ago

Hey Costa, You have an accessibility issue you need to fix.

Document should have one main landmark, Contain the component in <main>.

<main>
   <div class="card">
      //...
   </div>
</main>

Keep coding👍

Marked as helpful

Costa• 20

@ConstantinIlisescu

Posted over 2 years ago

@Bayoumi-dev Thank you for your feedback, really appreciate it. I noticed this issue highlighted in the report section, however, I was not sure exactly what I need to include. Your snip example opened my eyes. Thanks

Danilo Blas• 6,300

@Sdann26

Posted over 2 years ago

Hi Costa!

Your project is missing the typography and colors in the texts, I would recommend you to see the file style-guide.md, which is in the files when you download the zip of the project.

If you can check it, it will serve as a guide to make your projects or it will be very difficult for you to get the same design.

Costa• 20

@ConstantinIlisescu

Posted over 2 years ago

@Sdann26 Thank you for your feedback, really appreciate it. I saw the style-guide.md file but I totally forgot about the text styling, I just took the colors. I will keep this in mind for my next projects. Thanks

Danilo Blas• 6,300

@Sdann26

Posted over 2 years ago

@ConstantinIlisescu By the way my laptop screen is not that big and you can't see the .card since the body height size is fixed if you can instead of height you can use min-height: 100vh this gives it the possibility to grow if what is inside exceeds the minimum height size.

Finally the size of the title and the card I think you have realized that they should be smaller to look like the design but if you want you can give p a font-size of 18px.

p {
    font-size: 18px;
    font-weight: 400;
    padding: 0 25px;
    color: var(--GrayishBlue);
}

This way it looks the same as the design. That's all.

Good luck Costa :D!

HTML5, CSS , FLEXBOX

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community