Урок 2. Эталонное решение: инструменты разработчика
В этом документе вы найдете пример решения заданий от преподавателя.

Как работать с эталонным решением?
Работайте с эталонным решением по следующей схеме:

  1. Проанализируйте решение и убедитесь, что вам понятна каждая строчка. Если возникают вопросы, обратитесь к материалам и повторите необходимые темы.
  2. Прочитайте комментарии к коду ниже. Они помогут вам вспомнить материал.
  3. Если вы не выполнили задание полностью, попробуйте после разбора эталонного решения закончить его. Постарайтесь сделать это самостоятельно и подглядывайте в решение как можно реже.

Обратите внимание!
Некоторые комментарии ниже будут касаться ошибок в проекте из задания. Откройте условие самого задания и его макет, чтобы проверить свою работу.

Открыть HTML и CSS вы можете по ссылкам далее:
HTML
CSS

Комментарии к исходному проекту и решению
  • В первую очередь необходимо поправить отступы и переносы строк в HTML-файле.
  • Обратите внимание, что в исходном проекте не хватало закрывающего тега у параграфа (строка 14). Поэтому браузер поставил закрывающий тег параграфа в самом конце верстки и ссылка находилась не внизу текста, а выглядела, как его продолжение. Если мы добавим закрывающий тег, браузер перестанет “думать”, что ссылка – это часть параграфа.
  • Обратите внимание, что стили заголовка на картинке и в проекте отличаются. Если мы откроем инструменты разработчика и заглянем в стили заголовка, то увидим, что свойства цвета и подчеркивания обозначены желтым треугольником.
Проблема в том, что в строке 3 в CSS (где указан цвет) в конце нет символа точки с запятой ;. Его обязательно нужно добавить!

Что делать, если вы не нашли ошибку, но что-то не получается
Иногда бывает сложно найти ошибку в коде. В таком случае действуйте по следующей схеме:

  1. Локализуйте ошибку. Определите, какой именно элемент или стиль не работают. Тут вам поможет повторение урока по работе с инструментами разработчика.
  2. Если ошибка в стилях, то проверьте подключение стилей. Убедитесь, что у вашего проекта правильная структура и вы указали верный путь к css-файлу.
  3. Если вы определили, что ошибка в какой-то строке, но найти ее не получается, попробуйте переписать саму строку кода. Иногда ошибки связаны с простыми опечатками!
  4. Если вы выполнили все действия, но результата не достигли, подготовьте вопрос к вебинару. Мы обсудим его на встрече.
Эталонное решение будет находиться у вас на вкладке "Практическое задание: инструменты разработчика". Оно будет расположено сразу после поля для ввода ссылки с домашним заданием.
Вам понравился урок?