Меню
Урок 2. Эталонное решение
В этом документе вы найдете пример решения заданий от преподавателя.
Как работать с эталонным решением?
Работайте с эталонным решением по следующей схеме:
Структуру HTML и CSS для эталонного решения вы можете открыть по ссылкам далее:
CSS
HTML
Обратитесь к ним, когда будете читать комментарии ниже.
Комментарии к решению
Для начала посмотрим на часть HTML. Здесь добавлены минимальные доработки.
Обратите внимание!
Теперь посмотрим, с чем мы работали в CSS-файле.
Что делать, если вы не нашли ошибку, но что-то не получается
Иногда бывает сложно найти ошибку в коде. В таком случае действуйте по следующей схеме.
Как работать с эталонным решением?
Работайте с эталонным решением по следующей схеме:
- Проанализируйте решение и убедитесь, что вам понятна каждая строчка. Если возникают вопросы, обратитесь к материалам и повторите необходимые темы.
- Прочитайте комментарии к коду ниже. Они помогут вам вспомнить материал.
- Если вы не выполнили задание полностью, попробуйте после разбора эталонного решения закончить его. Постарайтесь сделать это самостоятельно и подглядывайте в решение как можно реже.
Структуру HTML и CSS для эталонного решения вы можете открыть по ссылкам далее:
CSS
HTML
Обратитесь к ним, когда будете читать комментарии ниже.
Комментарии к решению
Для начала посмотрим на часть HTML. Здесь добавлены минимальные доработки.
- В строках 14-34 у параграфов мы указали классы main, description, about
- Также у всех параграфов мы добавили класс info.
Обратите внимание!
- Классы main, description, about позволяют указать специфичные стили, а класс info будет использоваться для общих стилей.
- Названия классов взяты произвольно, у вас они могут отличаться.
Теперь посмотрим, с чем мы работали в CSS-файле.
- Строки 1 – 3. Мы указали селектор на заголовок h1 и задали цвет текста.
- Строки 5 – 8. Для класса info мы указали стили, которые будут общими у всех цветных параграфов. Тут указаны внутренние отступы (15 пикселей вертикально и 50 горизонтально) и внешний (25 пикселей вертикально). Размеры взяты приблизительно.
- Строки 10 – 20. Мы задали специфичные стили для каждого цветного параграфа. В данном случае у каждого параграфа нужно указывать цвет заднего фона.
- Строки 22 – 24. Здесь мы задали ширину для каждой картинки. Тут есть важный нюанс. Мы можем указать и высоту 100px, но в таком случае картинки (логотип apple) деформируются. Для интереса попробуйте указать и затем убрать высоту 100px и посмотрите на результат.
- Строки 26 – 28. В этой части мы убираем нижние подчеркивания для ссылок – none.
Что делать, если вы не нашли ошибку, но что-то не получается
Иногда бывает сложно найти ошибку в коде. В таком случае действуйте по следующей схеме.
- Локализуйте ошибку. Определите, какой именно элемент или стиль не работают. Тут вам поможет повторение урока по работе с инструментами разработчика.
- Если ошибка в стилях, то проверьте подключение стилей. Убедитесь, что у вашего проекта правильная структура и вы указали верный путь к css-файлу.
- Если вы определили, что ошибка в какой-то строке, но найти ее не получается, попробуйте переписать саму строку кода. Иногда ошибки связаны с простыми опечатками!
- Если вы выполнили все действия, но результата не достигли, подготовьте вопрос к вебинару. Мы обсудим его на встрече.
Эталонное решение будет находиться у вас на вкладке "Практическое задание: работа с отступами". Оно будет расположено сразу после поля для ввода ссылки с домашним заданием.
Вам понравился урок?
