@R3ygoski
Posted
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.
@manav-sharma69
Posted
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?
@R3ygoski
Posted
Hello again @manav-sharma69,
Starting from <hgroup>, here's some links:
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
