Skip to content
OverviewSolutions
5
Comments
6
Natalia Bubiak
@NataliaKiwibird

All comments

  • Shamizen•60
    @shamizenSubmitted over 3 years ago

    I'm doing my best, and I'm hoping you can help me improve this project.

    FAQ accordion card

    1
    Natalia Bubiak•185
    @NataliaKiwibirdPosted over 3 years ago

    Hi Shamizen,

    Try to use more accessible HTML and differ your divs into other semantic tags.

    I like the responsiveness of this solution.

    Happy coding, Natalia

    1
  • Hai Lam•10
    @haikl316Submitted over 3 years ago

    Tried to use div instead of table for the 2 main cells. I had a hard time with adding the magenta layer on top of the image. Also not sure how to round the corner of the rectangle such that it's not slanted.. and the image has 4 round corners rather than 2

    Stats Preview Card

    2
    Natalia Bubiak•185
    @NataliaKiwibirdPosted over 3 years ago

    The desktop design looks pretty well, the responsiveness is not done though. I'd recommend going back to the challenge and finish it, as mobile design is key nowadays.

    For the image filter use pseudoelement :after and set opacity and mix-blend-mode. Instead of <table>, I'd use <ul> and style it with flex and flex-direction: row. It's always good to look at other people's solutions and see how they approach particular components. For example, this is mine: https://www.frontendmentor.io/solutions/stats-preview-card-using-html-css-flexbox-bem-_Sdvvyfd3

    Marked as helpful
    0
  • Natalia Bubiak•185
    @NataliaKiwibirdPosted over 3 years ago

    Hi Paulo, I recommend using rem instead of px (especially for fonts, paddings, and margins). It helps in responsiveness a lot. There is a good starting point with rem sizing https://css-tricks.com/font-sizing-with-rem/

    Also, try to use more semantic tags. You can change your divs to section, ul, footer, etc. More on accessibility here https://web.dev/accessible/

    Happy coding!

    Marked as helpful
    0
  • Kerolous Amged•130
    @Kokosalah45Submitted over 3 years ago

    i really need some feedback of how i could organize my code and stop making widths and heights everywhere thnx alot !

    HTML & CSS

    1
    Natalia Bubiak•185
    @NataliaKiwibirdPosted over 3 years ago

    Hi Kerolous, First of all, read some more about accessibility, for example here https://web.dev/accessible/ . You should have only one <main> element and <footer> should include your attribution, not statistics. I've completed this challenge recently, so you can see my HTML semantic tags solution.

    It's much easier to size elements in CSS using rem (especially for fonts and paddings) instead of px. Here is a good starting point https://css-tricks.com/font-sizing-with-rem/ Also, practice Flexbox and Grid, because these tools make your code most responsive and will help you stop using widths and heights.

    Happy coding!

    Marked as helpful
    1
  • Natalia Bubiak•185
    @NataliaKiwibirdPosted over 3 years ago

    Hi Jerome, I recommend using rem instead of px (especially for fonts, paddings, and margins). It helps in responsiveness a lot. There is a good starting point with rem sizing https://css-tricks.com/font-sizing-with-rem/

    Also, try to use more semantic tags. You can change your divs to section, footer, etc. More on accessibility here https://web.dev/accessible/

    Happy coding!

    Marked as helpful
    0
  • Natalia Bubiak•185
    @NataliaKiwibirdPosted over 3 years ago

    Hi Hassan, I recommend using rem instead of px (especially for fonts, paddings, and margins). It helps in responsiveness a lot. There is a good starting point with rem sizing https://css-tricks.com/font-sizing-with-rem/

    Also, try to use more semantic tags. You can use <section> instead of divs and <p> w .grid2 could be <ul>

    Happy coding!

    Marked as helpful
    0