Moyo header #5369
Moyo header #5369
Conversation
Oleg473
commented
Sep 16, 2024
•
Oleg473
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Hello! It looks like there are a few important issues to address in your code. The active class should only be used where appropriate, spacing in your HTML can improve readability, anchor links need to be fixed, and you'll want to remove any duplicate HTML tags. Keep up the good work, and with these changes, your code will be even better! 😊👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" | ||
| rel="stylesheet" | ||
| > | ||
| <title>Moyo header</title> |
There was a problem hiding this comment.
There are two title tags within the head section. Remove the duplicate title tag to comply with proper HTML structure.
| <a | ||
| href="#header" | ||
| class="logo" | ||
| > | ||
| <img | ||
| src="images/logo.png" | ||
| alt="Moyo-Logo" | ||
| /> |
There was a problem hiding this comment.
Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol. Also, ensure that the href attribute links to the correct section of the page. If #header is not an actual id on the page, it should be updated to reflect the correct navigation target.
| </a> | ||
| <nav class="nav"> | ||
| <ul class="nav__list"> | ||
| <li class="nav__item"> | ||
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| > | ||
| Apple | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| > | ||
| Samsung | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| > | ||
| Smartphones | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| data-qa="hover" | ||
| > | ||
| Laptops & Computers | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| > | ||
| Gadgets | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| > | ||
| Tablets | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| > | ||
| Photo | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| > | ||
| Video | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> |
There was a problem hiding this comment.
Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading. For example, there should be an empty line before and after each <li class="nav__item"> block.
| <a | ||
| class="nav__link is-active" | ||
| href="#header" | ||
| > |
There was a problem hiding this comment.
The class="nav__link is-active" suggests that all links are active, which is typically not the case. Usually, only one navigation link is 'active' at a time, indicating the current page or section. Ensure that the 'is-active' class is only applied to the appropriate link.
