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