Skip to content
OverviewSolutions
9
Comments
24

Siege

@idesmar520 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

React, Typescript

Latest solutions

View more solutions

Latest comments

  • Siege•520
    @idesmar

    Hi Jessica! I think you did a great job with this challenge and you have very valid questions.

    Here are my personal opinion regarding your questions?

    • Multiple H1: In this challenge/design, there isn't a clear level one heading. There is, however, a way to resolve it. It's by making your own level one heading and applying an sr-only class to it to hide it visually but available to screen-readers and web crawlers for SEO. I've seen some web apps that used that approach. The BBC web page is one that I've seen recently. Side note: Please don't use display: none; to hide elements that you want screen readers to detect.
    • Spacing between paragraph and button: Using padding-bottom on the container as oppose to margin could be an option. The padding should be of enough size to cover the button, plus some allowance so the <p> and button will not touch.
    • Absolute position on button: There may be other solutions out there but an absolute position combined with padding from the container is the best I can think of right now.

    Thanks for reading my thoughts on your questions. Happy coding!

    Marked as helpful
  • Siege•520
    @idesmar

    Hi Elvinas! I think you just encountered a collapsing margin issue on your web app. There's a blank space above and below your <body> element caused by margin-top from .logo and margin-bottom from <main>.

    Quick fix for this issue is to use display: flow-root on your <body>.

    If you want to read more about collapsing margin, this is going to be a good read from CSS-Tricks.

    Happy coding!

  • Siege•520
    @idesmar

    Hi Faerk! How was your experience with BEM? I hope you had fun with this challenge.

    The approach that I've thought of in this project is to use 2 primary containers. 1 at the top which contains 2 inner-containers side by side (I believe you had that as .header and .rate). You can use display: flex; to control the position of those two inner-containers. Then the 2nd primary container would be .comment at the bottom. Oh! and you can use the <footer> as a 3rd primary container if you opt to include the .attribution.

    If ever you refactor your code and it works well for you, let me know. Cheers!

    Marked as helpful
  • Siege•520
    @idesmar

    Hey Ali! Your solution looks good!

    For Accessibility and sematics though, please look into tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.

    Marked as helpful
  • Siege•520
    @idesmar

    Hi Rogelio!

    Nicely done! Nothing much to say but keep doing what you're doing.

    Happy coding!

  • Siege•520
    @idesmar

    Hi Guillermo! How was your first challenge with FEM? I hope you had fun.

    On using px for sizes, I normally just use rem for most sizes even padding and margin. Some uses em on the latter two but then again that comes down to your preference. I might use px for very small details like outline or borders.

    Regarding accessibility issues, you may want to look into using container tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.

    Marked as helpful
View more comments