Responsive Landing page using HTML,SASS/JAVASCRIPT

Solution retrospective
#HTML #SCSS #JAVASCRIPT
Good afternoon, I was building these projects to practice JAVASCRIPT more, I added AOS which made the site much livelier.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Victor-Nyagudi
Good attempt on this one, Pedro.
I know you requested feedback on JavaScript, but it'll be wrong if I didn't mention some of the errors you have in the HTML.
When using a
<ul>
tag, the only children it should have are<li>
. This is also very important for accessibility.The first thing I'd recommend is to wrap the
<a>
tags you've included in the<ul>
with<li>
.Here's where the problem is that's creating the error in the accessibility report.
// This is wrong <ul class="drop_down"> <a href="#"><li>Overview</li></a> <a href="#"><li>Pricing</li></a> <a href="#"><li>Marketplace</li></a> <a href="#"><li>Features</li></a> <a href="#"><li>Integrations</li></a> </ul> // This is right <ul class="drop_down"> <li><a href="#">Overview</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Marketplace</a></li> <li><a href="#">Features</a></li> <li><a href="#">Integrations</a></li> </ul>
Also, you should only use an
<li>
inside an<ol>
or<ul>
.If you want to have a nested list like this one, you need to add the nested
<ul>
inside an<li>
.Here's an example.
<ul class="first list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4 <ul class="nested list"> // <- Nested list <li>Nested item 1<li> <li>Nested item 2<li> </ul> </li> <ul>
Hope this helps.
All the best with future solutions.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord