Всем привет. С возвращением, пришло время для еще одного примера домашней работы. То, что мы будем делать на этой неделе, это добавить еще больше стиля к страницам, которые вы начали стилизовать на прошлой неделе. Поэтому еще раз цель этого задания заключается в том, что я не хочу, чтобы вы меняли html вообще. Я хочу, чтобы вы либо создали новую таблицу стилей, либо обновили таблицу стилей на прошлой неделе, чтобы ее можно было использовать в трех разных html-файлах. Когда вы начинаете, очень важно, чтобы вы выполнили первое присвоенное одноранговое назначение. Я собираюсь предположить, что вы сделали это, и поэтому, когда я говорю в этом видео о различных изменениях, которые я хочу, чтобы вы сделали. Вы можете либо изменить предыдущее домашнее задание, либо вы действительно можете начать полностью с нуля, если вы не были довольны вашей предыдущей работой. Итак, давайте посмотрим на до и после этого задания, которое я хочу, чтобы вы попытались достичь. Это была наша страница, когда мы впервые начали. В домашнем задании, вы взяли его отсюда до сюда. Все еще очень просто, но намного чище, потому что мы добавили цвет фона, некоторые цветовые шрифты, и мы избавились от этих изображений. То, над чем я хочу, чтобы вы работали на этой неделе, действительно меняли вещи и делали их действительно стилизованными, а не просто чистыми. Давайте взглянем на то, над чем я хочу, чтобы вы работали на третьей неделе. Как вы можете видеть, это выглядит как совершенно другой сайт. Изображения вернулись, я добавил фоновое изображение для панели навигации и что-то, что не обязательно легко увидеть, когда вы просто смотрите на бумагу, я добавил новый класс, который подчеркивает, на какой странице мы находимся прямо сейчас. Поэтому, если вы посмотрите, домашняя ссылка подсвечивается, потому что мы на главной странице. Если я нажму на историю, история ссылка как это, потому что мы находимся на странице истории, а затем так же, на странице команды. Так это то, что мы называем текущую страницу, на которую мы смотрим. И поэтому вы собираетесь укладывать это так, чтобы ваши зрители знали, где они находятся на этой странице. Так что я собираюсь пойти вперед и поговорить о каждом из тегов, которые я хочу, чтобы вы рассмотрели, чтобы завершить это задание. Поэтому, когда вы начнете, вы оставите HTML-код в покое, и вы либо собираетесь создать новую таблицу стилей, либо вы собираетесь идти вперед и обновить тот, который вы использовали раньше. То, что вам нужно будет работать конкретно, это эти элементы. Вам нужно работать над телом, заголовком, h, ссылками, а затем у меня есть три класса, называемые активными, левыми и правыми, и, наконец, вы захотите поместить эти изображения обратно в которые были в левой части страницы. Итак, сначала давайте поговорим о теле. По умолчанию ваши браузеры помещают какой-то отступ и маржу, но я хочу, чтобы вы перезапишите это и поместили что-то, что будет выглядеть согласованно во всех браузерах. Вы также можете настраивать размер текста, но это не обязательно. Я знаю, что сделал, потому что я нашел текст слишком маленьким. Далее перейдите к заголовку. Первый шаг - изменить цвет фона и посмотреть, можете ли вы заставить его работать. Затем вы хотите добавить фоновое изображение. И если честно, это будет самая сложная часть всего задания на домашнее задание. Потому что иногда не всегда ясно, где вы можете найти изображения и где вы не можете, поэтому убедитесь, что вы проверяете некоторые другие ресурсы, если вы застряли на этой части. Затем я хочу, чтобы вы изменили цвет шрифта и увеличили этот размер шрифта немного больше. Опять же, здесь что-то новое, чего ты раньше не учил. Я хочу, чтобы вы стиль ссылок, которые находятся в разделе навигации, но только эти ссылки. Не все ссылки на странице. Вам не нужно точно воссоздавать мой пример, но я хочу, чтобы ваши ссылки были красиво распределены друг от друга, они должны иметь некоторый цвет фона, округленные границы и без подчеркивания. Сделай их хорошо выглядеть. Затем убедитесь, что вы видели тот активный урок, о котором я говорил. Вот как люди смогут узнать, на какую страницу они смотрят без необходимости смотреть на URL-адрес. Теперь еще одна вещь, над которой вам нужно будет работать, это идея, что наша страница имеет левый и правый класс к ней. Теперь, чтобы заставить вещи идти рядом друг с другом, вам нужно будет возиться с дисплеем и, возможно, плавать в зависимости от того, как вы это реализуете. Поэтому убедитесь, что вы измените их так, чтобы они были бок о бок, и измените этот цвет фона для левого класса. Возможно, вы уже сделали это в предыдущем домашнем задании, но если вы не убедитесь, что это сделано сейчас. Наконец, мы хотим вернуться к этим изображениям. Во-первых, вам нужно вернуть изображения обратно, потому что, надеюсь, в домашнем задании, вы установили их дисплей на нет, что означает, что они исчезли. Так что положите их обратно во что-то, чтобы они упали друг на друга. Затем убедитесь, что они сосредоточены в том левом классе. Я не хочу, чтобы фотографии были на пути к одной или другой стороне. И, пока вы их центрируете, убедитесь, что вы поместили немного пространства между ними, сверху и снизу тоже. Еще раз, мы будем использовать одноранговый грейдер для оценки вашей работы. В отличие от ранее, оценки будут основываться на уровне завершения, и несколько больше на том, как выглядит ваша страница. Мы хотим убедиться, что ты не ставишь вещи, которые трудно читать или которые действительно сливаются вместе. Поэтому, если у вас есть шанс, убедитесь, что вы запускаете свою страницу через несколько различных оценщиков доступности. Так что была волна и есть лямка. Есть разные места, куда можно пойти. Но это действительно хорошая часть о сверстниках, ваши сверстники могут сказать вам, действительно ли вещи не имеют лучшего цветового контраста. Теперь опять же будут применяться соответствующие стандарты. И это особенно важно, когда мы начинаем говорить о продвинутых селекторах. Я обнаружил, что иногда люди бросают все, о чем они могут думать, в свою таблицу стилей, и они просто надеются, надеются, надеются, надеются, что это сработает. Мы снимем очки, если ты попытаешься сделать это. Теперь последнее, что я хочу упомянуть, это то, что я знаю, что люди кодируют на разных устройствах. Поэтому, когда вы отправляете свой код, не стесняйтесь говорить, что мой код действительно выглядит хорошо на большом экране, или на телефоне, или что-то в этом роде. Забота о разных размерах экрана — это то, что называется отзывчивым дизайном, который мы не обрабатываем в этом конкретном курсе. Поэтому я не ожидаю, что вы создадите сайт, который отлично смотрится на каждой платформе. То, что я ожидаю, вы действительно владеете кодом, который вы отправляете на этот раз. Убедитесь, что вы точно знаете, что делает каждая строка, и чувствовать себя комфортно меняя маленькие части и чувствуя, что ваша страница не сломается. Опять же, если у вас возникнут проблемы, убедитесь, что вы попали в эти дискуссионные доски. У вас одноклассники были очень полезны, и я действительно хочу поощрять это общение. Удачи.