@vanzasetia
Posted
Hi, Eileen dangelo! 👋
Congratulations on completing this challenge! 🎉
I highly recommend getting the HTML right first.
- Use interactive elements for anything that has interactivity. In this case, the theme switcher is using
div
at the moment. I recommend either using the checkbox orbutton
. Also, I found that A Theme Switcher and Toggle Buttons articles help me to create an accessible theme switcher. <lable>
is not valid HTML tag. I am sure that it should be<label>
. But, you need to fix this. Otherwise, it is not valid HTML.- Wrap all the
input
,label
, andbutton
withform
element. After that, on JavaScript, grab theform
element and then make it listen to thesubmit
event. - The
info-container
should be a list. Also, theh4
inside theinfo-container
should be replaced byspan
orp
. The heading tag has a meaning which is like a title in a document. In this case, it can't be a title for a number below it. - The
link-container
also should be a list with four bullet points. - Location is not a link. It is just plain text.
- There are more actually like
bio
should not be asection
andh3
, "Not available" links should not be link elements (it's just a plain text), etc. So, I suggest learning about web accessibility.
I would recommend getting the HTML right first. It is important to get the page structure correct because it really impacts the accessibility of the website. Also, an accessible website can lead to more user engagement since almost everyone can access your website.
That's it! I hope this helps! 😊