Skip to content

done header #7746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lilbodyn wants to merge 5 commits into
base: master
Choose a base branch
from
Open

done header #7746

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a98e184
done header
lilbodyn Apr 16, 2026
17a563c
Fix review comments
lilbodyn Apr 16, 2026
3a3b328
Fix checklist and style issues
lilbodyn Apr 16, 2026
7a2bc60
Fix final review comments
lilbodyn Apr 16, 2026
6c77bda
Add report
lilbodyn Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 38 additions & 21 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,39 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta
http-equiv="X-UA-Compatible"
content="ie=edge"
/>
<title>Moyo header</title>
<link
rel="stylesheet"
href="./style.css"
/>
</head>
<body>
<h1>Moyo header</h1>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Moyo Header</title>

Comment thread
lilbodyn marked this conversation as resolved.
<!-- Подключение CSS -->
<link rel="stylesheet" href="style.css">

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>
<body>

<header class="header">
<a href="#" class="logo">
<img src="./images/logo.png" alt="Moyo logo">
</a>

<nav class="nav">
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You set a height on .header here (height: 60px). The checklist requires: "Header height is set in 1 place (for the links)" and the description says the height should be set for nav links (not for the header). Remove the height from .header and keep the fixed height only on the navigation links so the header height is defined in exactly one place.

<ul class="nav__list">
<li><a href="#" class="nav__link is-active">Apple</a></li>
<li><a href="#" class="nav__link">Samsung</a></li>
<li><a href="#" class="nav__link">Smartphones</a></li>
<li>
<a href="#" class="nav__link" data-qa="hover">
Laptops & computers
</a>
</li>
<li><a href="#" class="nav__link">Gadgets</a></li>
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector .logo img uses a tag name in CSS which violates: "Do not use tag names for styling (except html and body)". Add a class to the <img> (for example logo__image) and style that class (e.g. .logo__image { height: 40px; display:block; }).

<li><a href="#" class="nav__link">Tablets</a></li>
<li><a href="#" class="nav__link">Photo</a></li>
<li><a href="#" class="nav__link">Video</a></li>
</ul>
</nav>
</header>

</body>
</html>
69 changes: 68 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,70 @@
body {
/* Сброс */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #16: "Do not use the universal * selector in CSS." You currently use * { margin: 0; padding: 0; box-sizing: border-box; } (reset) which is disallowed. Reset browser defaults without * (for example, set margin:0 on html, body and target specific elements like ul, h1, p that need reset, or add a dedicated .reset class).


/* Переменная цвета */
:root {
--blue: #00acdc;
}

/* Шрифт */
body {
font-family: 'Roboto', sans-serif;
}

/* HEADER */
.header {
height: 60px; /* важно — в одном месте */
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
Comment on lines +14 to +18
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #4: "The height must be set for the nav links (not for the header), and this height must be taken from the design." You set height: 60px; on .header. Move the height declaration to the nav links (only) and remove it from the header so the header height is determined by its content.

}

/* ЛОГО */
.logo img {
height: 40px;
display: block;
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #17: "Do not use tag names for styling in CSS (except html and body); style elements using classes and, if needed, pseudo-classes, pseudo-elements, or attribute selectors." The selector .logo img uses a tag name. Add a class to the image (for example .logo__img) and style that class instead of using the img tag in the selector.

}

/* СПИСОК */
.nav__list {
display: flex;
list-style: none;
}

/* ССЫЛКИ */
.nav__link {
display: flex;
align-items: center;
height: 60px;
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #30: "Header height must be set in exactly one place (for the links)." Height is currently defined on both .header and .nav__link (height: 60px; at the header and again on the links). Keep the height in exactly one place (the nav links) and remove the duplicate from the header.

margin-left: 20px;
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #28: "There must not be margins before the first and after the last list items in the navigation list." You apply margin-left: 20px; to every .nav__link, which adds spacing before the first item. Instead, apply spacing between items only (for example, use .nav__list > li + li { margin-left: 20px; }), or use :not(:first-child) so the first item has no left margin.

text-decoration: none;
color: #000;
text-transform: uppercase;
position: relative;
}

/* HOVER */
.nav__link:hover {
color: var(--blue);
}

/* АКТИВНЫЙ */
.is-active {
color: var(--blue);
}

/* ЛИНИЯ ПОД АКТИВНЫМ */
.is-active::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background-color: var(--blue);
}
Loading