Responsive page for Omelette recipe

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello again @manav-sharma69, congratulations on completing the challenge, it turned out almost similar to the proposed one. Congratulations.

  I believe you used Gemini again for this challenge, am I right? I say this because I identified some things a little intriguing, such as <hgroup>, which is something obsolete, it is no longer recommended to use it, the correct thing is to use only <header> instead of it. And also the <header> has to go inside the <main> because it is part of the main content.

  And the other thing was the <figcaption>, although yes, you can use it, it is not mandatory, you can remove it. So much so that you even set its opacity to 0.

  And a tip about CSS, to color the bullets, you can use ::marker, so you wouldn't need to use that <span>. Here's a link about it: W3School - Marker.

  And again, congratulations, keep practicing and improving. If you have any doubts, please comment below and I will try to help in the best way possible.

  1

  ---

  

  Manav•390

  @manav-sharma69Posted 7 months ago

  Hello @R3ygoski! I appreciate your efforts to assess my markup. Thanks!

  Did you find my markup easy to read?

  I used both Gemini and ChatGPT this time! But I used them only to figure out what to do with the <figcaption>, nothing else.

  I was not aware that <header> goes inside <main>. Thanks for that, I'll keep that in mind.

  As for using <hgroup>, I referenced MDN's HTML elements reference. MDN says nothing like 'not recommended to use', so I used it. On the same page, they have a section for Obsolete and deprecated elements and <hgroup> is not on the list, instead, its on their Content Sectioning section.

  I used <figcaption> because, well, when I was writing the markup, I was heavily focused on making it semantically precise. I looked at <figure>'s usage notes (once again, MDN) and it says that 'The <figcaption> provides the accessible description for the parent <figure>.'

  I guess I didn't pay any attention to the first line in their article, which says that using <figcaption> is optional 😅

  I did use ::marker to color my the bullets(check my stylesheet, line 111). I used <span> to add spacing between the <li>'s content and its bullet point.

  Here are 2 links with the same solution:

  • How to Control the Space Between Bullets and <li> Elements (W3Docs)
  • CSS: Control space between bullet and <li> (Stack Overflow)

  I would appreciate it if you shared where you learned about <hgroup> being obsolete/not recommended to use. Is it some specific resource or have you learned this from your work experience? What other sources do you prefer other than MDN (although I also know that there's W3C's docs other than MDN) for HTML?

  0

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello again @manav-sharma69,

  Starting from <hgroup>, here's some links:

  • GeeksforGeeks
  • HTML5Doctor
  • Stack Overflow

  Now, regarding the websites you mentioned, there are some that I've heard of, such as CodeAcademy and HTML Dog, but I honestly haven't used either of them. I'm just recommending them for you to check out and see what you think.

  Now I understand why I didn't see your ::markers at first, I must have searched by the variable name, like Wenge Brown, but now I noticed that you didn't use CSS Custom Properties.

  Well, here's a tip: to avoid repeating several HSL values, it's good to create variables in ::root { } to facilitate CSS maintenance.

  Well, I think that I answered, all your question, if you have any doubts, you already know, just ask, and if you found this helpful, you know.

  Marked as helpful

  0