Самостоятельная работа
Курс «Основы верстки контента»
Во всех пройденных уроках попробуйте изменять значение свойства display. Важно научиться заранее определять, что случится с элементом при изменении этого свойства
Найдите любую газетную статью. Используя CSS Multi-column Layout воссоздайте журнальную верстку.
Создайте HTML файл, внутри которого разместите несколько медиаэлементов, которые вы найдете на своем компьютере. Попробуйте использовать различные атрибуты.
Создайте форму для регистрации пользователя на сайте. Форма должна принимать следующие данные:
- Имя
- Фамилия
- Логин
- Дата рождения
- Пароль
Используйте различные вариации типов у <input>. Все возможные типы вы сможете найти в дополнительной информации этого урока.
Возьмите примеры из прошлых уроков. Используя селекторы по атрибуту и селекторы по соседнему элементу, повторите верстку
Возьмите любой из предыдущих уроков и, используя псевдоклассы, дополните стили. Попробуйте использовать разные выражения внутри структурных псевдоклассов.
Повторите все примеры, представленные в уроке. Попробуйте различные значения свойств. Для списка используйте псевдоэлемент ::after, с помощью которого добавьте небольшое изображение после пункта списка
Используя новые свойства создайте блок с превью новостей. В нем будет три колонки шириной 500 пикселей. Блок содержит данные:
- Дата
- Название новости
- Краткое описание
Дата и название новости должно выводиться полностью с возможным переносом строк. Краткое описание должно выводиться в одну строку. Если места не хватает, то в конце описания ставится многоточие.
Перейдите во все доступные CodePen в уроке и попробуйте создать разные переменные. Особенно важно поработать с локальными переменными