Домашнее задание
4 – 5 классы – 2 часа;
Задания по HTML
Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML. Задачи по основам.
Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки. Задачи на гиперссылки.
Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения… Задачи по работе с изображениями в HTML.
Задания по углубленной работе с HTML и CSS
Задания по HTML с Emmet. Быстрая верстка, команды Emmet (так называемая шпаргалка Emmet). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Задания по Emmet.
Задания по CSS-селекторам. Селекторы CSS: css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов. Задания на CSS-селекторы.
Задания по float css. Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задания на CSS Float.
Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right. Задания по CSS-позиционированию.
Задания по верстке форм
- Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в панели навигации Bootstrap.
- Сверстайте форму диспетчера на сайте
- Подключить jQuery-плагин для выбора даты/месяца из поля
- Создайте чекбокс по аналогии с социальной сетью.
- Создайте форму регистрации посетителя сайта
- Создайте форму подобной той, что сортирует товары в Яндекс.Маркет
Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Задания на кроссбраузерность.
Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию.
Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Задания на media queries.
Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания по верстке psd макета.