Урок 3. Эталонное решение
В этом документе вы найдете пример решения заданий от преподавателя.Как работать с эталонным решением?Работайте с эталонным решением по следующей схеме:- Проанализируйте решение и убедитесь, что вам понятна каждая строчка. Если возникают вопросы, обратитесь к материалам и повторите необходимые темы.
- Прочитайте комментарии к коду ниже. Они помогут вам вспомнить материал.
- Если вы не выполнили задание полностью, попробуйте после разбора эталонного решения закончить его. Постарайтесь сделать это самостоятельно и подглядывайте в решение как можно реже
РешениеКомментарии к решениюПеред тем, как делать задание, нам нужно было скачать библиотеку и подготовить её к работе. Вот какие шаги мы выполнили.- Скачали библиотеку font awesome по ссылке https://fontawesome.com/download
- Переименовали папку с библиотекой и назвали ее fo
- Удалили всё лишнее из библиотеки:
- папки SCSS и LESS
- в папке css всё, кроме all.css
- в папке js всё, кроме all.js
Структуру HTML и CSS для эталонного решения вы можете открыть по ссылкам далее:CSSHTMLОбратитесь к ним, когда будете читать комментарии ниже.Подключение библиотекиСтрока 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).
Что делать, если вы не нашли ошибку, но что-то не получаетсяИногда бывает сложно найти ошибку в коде. В таком случае действуйте по следующей схеме.- Локализуйте ошибку. Определите, какой именно элемент или стиль не работают. Тут вам поможет повторение урока по работе с инструментами разработчика.
- Если ошибка в стилях, то проверьте подключение стилей. Убедитесь, что у вашего проекта правильная структура и вы указали верный путь к css-файлу.
- Если вы определили, что ошибка в какой-то строке, но найти ее не получается, попробуйте переписать саму строку кода. Иногда ошибки связаны с простыми опечатками!
- Если вы выполнили все действия, но результата не достигли, подготовьте вопрос к вебинару. Мы обсудим его на встрече.