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

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

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

Решение

Комментарии к решению
Перед тем, как делать задание, нам нужно было скачать библиотеку и подготовить её к работе.
Вот какие шаги мы выполнили.

  1. Скачали библиотеку font awesome по ссылке https://fontawesome.com/download
  2. Переименовали папку с библиотекой и назвали ее fo
  3. Удалили всё лишнее из библиотеки:

  • папки SCSS и LESS
  • в папке css всё, кроме all.css
  • в папке js всё, кроме all.js


Структуру HTML и CSS для эталонного решения вы можете открыть по ссылкам далее:
CSS
HTML
Обратитесь к ним, когда будете читать комментарии ниже.

Подключение библиотеки

Строка 11. В теге head мы добавили тег link со ссылкой на css-файл библиотеки.
Строка 119. В конце тега body мы добавили тег script со ссылкой на скрипты.


Создание таблицы

HTML
Строки 62 – 105. В HTML-документе мы сформировали структуру таблицы.
Строка 65. Здесь мы объединили две ячейки по горизонтали.
Строка 66. Здесь мы объединили две ячейки по вертикали
Строки 78, 85, 92, 99. В качестве содержимого мы указали иконки из библиотеки.

CSS
Строки 41 – 58. В CSS-файле прописываем стили для таблицы
Строки 41 – 45. Тут мы “схлопываем” пространство между ячейками, указываем размер шрифта в таблице и ширину таблицы.
Строки 47 – 52. Указываем рамки у ячеек, внутренний отступ, размер шрифта и ширину ячейки.
Строки 54 – 58. Указываем те же стили для ячеек в заголовке.
Строки 64 – 66. Указываем размер шрифта для иконок (класс указан в HTML у тегов <i>).


Добавление списка

HTML
Строки 110 – 118. Здесь мы указали нумерованный список с пунктами из макета

CSS
Строки 60 – 62. Мы задали размер шрифта в списке

Добавление подписи разделов
  • В макете можно видеть несколько параграфов перед смысловыми разделами. В HTML они на строках 39 – 42, 58 – 61 и 106 – 109.
  • В эти параграфы мы добавили иконки и класс subheader. В css мы описали стили для класса subheader на строках 35 –39.
  • Мы отцентрировали текст (разместили по центру) и задали ему размер 30px,а для стиля указали italic, то есть курсив.

Подключаем шрифты
  • Заходим на сайт google fonts и выбираем шрифт Inter с жирностью 400
  • Копируем полученные ссылки для подключения шрифта и указываем их в теге head (строки: 8 – 10)
  • Переходим в файл CSS и указываем свойство font-family со значением ‘Inter’ для тега body (строки 1 – 3).

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