@MelvinAguilar
Posted
Hello there π. Good job on completing the challenge !
I have other suggestions about your code that might interest you.
- 1- Using
display: none
to hide an element will remove it from the page entirely, including its content and accessibility properties, the objective of using the.sr-only
class is to visually hide an element from sight while still making it accessible to assistive technologies like screen readers. I think the best thing you can do is copy and paste the code from @visualdenniss, there's no need to learn it all since there are so many properties.
-
3- It's best to use the minimum necessary specificity to target only the desired elements on the page and avoid potential conflicts with other styles. It may be helpful to review the HTML structure of the page and consider using more specific class names or adding additional selectors to target only the desired elements.
Currently your selectors are very difficult to understand and very complex. Always maintain a low specificity. example:
βββ ββββ ββββ ββββ ββββ ββββ ββ
Do: .status { . . . }
.
βββ ββββ ββββ ββββ ββββ ββββ ββ Don't: .section-2 > .profile > h2 > .status { . . . }
.
- 4- Yes, you did it right! To start from mobile and end at desktop is called 'mobile-first' in web design and the mobile-first is generally considered a best practice.
- It is not valid HTML to place a p element inside an h2 element. Reference: https://caninclude.glitch.me/caninclude?child=p&parent=h3
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
@Feithers
Posted
@MelvinAguilar
Thanks! That was helpful indeed.
Regarding the last thing about the <p> not being able to be a child of <h2>. Why is that? For me, it makes absolute sense to throw some text inside a tittle, right? But anyway, what should I have used instead, just a <div> is fine?
EDIT: Nvm, I just checked the code again and yes, doesn't make sense to put a <p> inside an <h2>, don't even know why I did it lol.
Thanks!