Hi there 👋, I’m Loai and this is my solution for this challenge. 🚀

Community feedback

• 

  Dimitar Radev•930

  @Mitko90Posted over 1 year ago

  Hi, nice solution.

  It looks great.

  I have one suggestion for you:

  • You used three times the <h1> heading. This heading should only be used once. Maybe change it to <h2> as it can be reused. Of course every page should have an h1 heading so I suggest adding a visually-hidden one to the page, so it doesn't generate an accessibility report.

  I had the exact same mistake when I did this challenge so I redid it with the changes. You can, if you want, check both of my submissions here and here.

  Above all the solution you submitted looks great.

  Happy coding.

  0

  ---

  

  Loai Esam•670

  @LoaiEsam37Posted over 1 year ago

  @Mitko90 Thank you for the feedback, but i searched about this idea and i found this answer on mightybytes.com :-

  "Can I Hide My H1 Tags? Unfortunately, one way people try to solve the problem of satisfying both the search engines and aesthetics is to use code to hide their H1s. This means the H1s appear to search engines but don’t appear to people looking at the page. Over the years many developers have come up with sneaky techniques: making the text the same color as the background, using an indent to send text flying off the page, and setting the font size to 0 just to name a few.

  This is not an advisable practice! Hiding text using HTML and CSS trickery angers the search engines and your site could get penalized. Hiding your H1s is worse than having no H1 at all. People sometimes feel that hiding an H1 is necessary when the name of the website is already contained in the logo image. If the name appears in the logo and must also appear in the H1, doesn’t that look redundant?

  Stop sweating about the magic tricks. Like any solid design, the key is to style elements in relation to each other. While the browser renders an H1 larger than an H2 (and rightfully so), you can easily target one and override the browser with a different font size. The same goes for location – having an H2 over an H1 in your page or using positioning won’t penalize you as long as you’re not sending valuable content off the page.

  This doesn’t mean that all H2s (or H3s, H4s, and so on) have to be the same size or have the same alignment either. Using classes, you can give a single header special treatment if the content has a special purpose for your users.

  Hopefully you can usually let your main header shine loud and bright, but we’ve all seen exceptions. Good luck on your quest making your HTML work for you rather than the other way around. With a little bit of thought and elbow grease, you can have a semantically solid page that’s also a delight for your users."

  but anyway thank you for your time 😊

  0

  

  Dimitar Radev•930

  @Mitko90Posted over 1 year ago

  @LoaiEsam37 Hiding the h1 is strictly for the purpose of those challenges. Just to not get the report. Because the inspector doesn't know that you are coding a component of a page, rather than a whole page. So yes, you can hide them here because you can't reuse them and all three of those headings are of same importance. So using h2s is the better practice. When you code a whole website, you will have your h1 large and visible.

  In other words. You are right but not when your whole page is just a component of a real one.

  0