Урок 2. Эталонное решение
В этом документе вы найдете пример решения заданий от преподавателя.Как работать с эталонным решением?Работайте с эталонным решением по следующей схеме:- Проанализируйте решение и убедитесь, что вам понятна каждая строчка. Если возникают вопросы, обратитесь к материалам и повторите необходимые темы.
- Прочитайте комментарии к коду ниже. Они помогут вам вспомнить материал.
- Если вы не выполнили задание полностью, попробуйте после разбора эталонного решения закончить его. Постарайтесь сделать это самостоятельно и подглядывайте в решение как можно реже.
Структуру HTML и CSS для эталонного решения вы можете открыть по ссылкам далее:CSSHTMLОбратитесь к ним, когда будете читать комментарии ниже.Комментарии к решениюДля начала посмотрим на часть 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-файлу.
- Если вы определили, что ошибка в какой-то строке, но найти ее не получается, попробуйте переписать саму строку кода. Иногда ошибки связаны с простыми опечатками!
- Если вы выполнили все действия, но результата не достигли, подготовьте вопрос к вебинару. Мы обсудим его на встрече.