Урок 66 из 70 · 8 мин

Проверка и качество кода

DevTools, Lighthouse и самые частые ошибки начинающих: как найти и исправить их самому.

Код-ревью

Ника
Давай я посмотрю твой код, как на настоящей работе.
Ника
Два id="intro", div внутри p, кнопка внутри ссылки… Бро это проглотил, но стандарт так нельзя.
Бро
Я всё починил по-своему. Результат тебе не понравится 🙃

Понятие

Дерево в DevTools

Что это: Elements показывает разметку после исправлений браузера: перенесённые и закрытые за тебя теги.
Зачем: Расхождение со своим кодом — это и есть ошибка, которую браузер скрыл.

Понятие

Уникальный id

Понятие

Что нельзя вкладывать

Что это: Блок в абзац (<p><div>), не-li в список, интерактив в интерактив (<a><button>).
Зачем: Бро перестроит дерево, вёрстка поедет.

Понятие

Форматирование

Ваш ход

Задание

Ника нашла четыре ошибки: два одинаковых id, картинку без alt, незакрытый li внутри p и h1 после h3. Исправь их.

<h3 id="top">Север</h3>
<h1 id="top">Меню</h1>
<img src="raf.jpg">
<p>Товары: <ul><li>Пенал</ul></p>

<h3 id="top">Север</h3>
<h1 id="top">Меню</h1>
<img src="raf.jpg">
<p>Товары: <ul><li>Пенал</ul></p>

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

На странице два элемента с id="intro". В чём проблема?

Домашнее заданиеДля закрепления

Выберите все подходящие варианты.

Какие записи нарушают правила HTML?