Опубликовано Оставить комментарий

Задания по CSS-градиентам и анимации

Ягоды: брусника
Ягоды: брусника

Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию, позволит Вам закрепить материалы курса и задать дополнительные вопросы на занятиях HTML. Примечание: как и другие задания HTML и JavaScript результат выполнения можно предоставлять как ссылку на codepen.io Читать далее Задания по CSS-градиентам и анимации

Опубликовано Оставить комментарий

Задания: CSS position

Ягоды: арбуз
Ягоды: арбуз

Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right, позиционирование элементов относительно родительских или нормального потока вывода. Читать далее Задания: CSS position

Опубликовано Оставить комментарий

Задания: float CSS

Задания: float CSS

Ягоды: ежевика
Ягоды: ежевика

Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задачи на обтекания предполагают, что Вы владеете этим свойством или имеете эквивалент знаний соответствующий полученным на курсах по HTML. Примечание: также надо хорошо уметь пользоваться отменой обтекания. Читать далее Задания: float CSS

Опубликовано Оставить комментарий

Задания: CSS селекторы

Ягоды: малина
Ягоды: малина

Для уверенной верстки, требуется в идеале знать селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов (нахождение приоритета, специфичность селектора), группировка селекторов, селектор первый элемент, селектор по id. Читать далее Задания: CSS селекторы

Опубликовано Оставить комментарий

Задания по HTML с Emmet

Ягоды: земляника
Ягоды: земляника

Быстрая верстка использует горячие клавиши Emmet. Задания этого блока включают вопросы: как скачать Emmet, установка Emmet, (emmet на Notepad++, Brackets), команды Emmet (так называемая шпаргалка Emmet), почему Emmet не работает. После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Читать далее Задания по HTML с Emmet

Опубликовано Оставить комментарий

Задания на гиперссылки

Цветущая морошка
Цветущая морошка

Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки, варианты указания адресов в гиперссылках, атрибуты гиперссылок, как сделать гиперссылку. Для полноценной работы с заданиями этого блока и всеми заданиями по HTML рекомендуется уделять достаточно время практике. Читать далее… Читать далее Задания на гиперссылки

Опубликовано Оставить комментарий

Bootstrap отзывчивые элементы

Bootstrap делаем отзывчивыми и элементы iframe
Bootstrap делаем отзывчивыми и элементы iframe

В Bootstrap отзывчивые элементы — это <iframe>, <embed>, <video> и <object>, содержащие класс .embed-responsive-item. Разрешаем браузерам определять размеры видео или слайд-шоу на основе ширины их содержащего блока, создавая соотношение сторон, которое будет правильно масштабировать на любом устройстве. Примечание: для HTML-элемента iframe необходимо добавлять frameborder=»0″, для сокрытия рамок. Читать далее Bootstrap отзывчивые элементы

Опубликовано Оставить комментарий

Bootstrap панели

Панели содержат необходимое DOM-содержимое
Панели содержат необходимое DOM-содержимое

Bootstrap панели — компонент, представляющий собой обертку для вашего HTML-кода. Используется в тех случаях, когда вы захотите (вывод справочной информации, уведомлений, индикация параметров и т.д.) Основные классы .panel и .panel-default. Если панель содержит шапку или подвал, то используются встроенные в панель контейнеры с классами .panel-heading и .panel-footer, а для основного содержимого применяется .panel-heading. Для окраски панелей используются контекстные классы: Читать далее Bootstrap панели

Опубликовано Оставить комментарий

Bootstrap список

Создание списочной группы в Bootstrap
Создание списочной группы в Bootstrap

Bootstrap список или списочная группа — компонент фреймворка, позволяющий отобразить набор строк, подобно обычному списку, но в стиле оформления Bootstrap, без маркеров. Это очень гибкий компонент, который может быть использован при построении меню, перечня строк. Основные CSS-классы: .list-group (сама списочная группа) и .list-group-item (элемент этой группы). Вместе с списком могут быть использованы баджи, для указания пришедшей почты или совершении какого-то события (условия возникновения события прописывает программист). Читать далее Bootstrap список

Опубликовано Оставить комментарий

Bootstrap 3 элементы мультимедиа

Медиаобъекты в Bootstrap
Медиаобъекты в Bootstrap

Bootstrap 3 элементы мультимедиа — Набор абстрактных стилей для построения компонентов различных типов (подобно комментариям блога, твитам ти т.д.). Они содержат изображения, выровненное по правой или по левой стороне, относительно содержимого. Также могут быть размещены другие медийные объекты — видео, аудио; они также выравниваются по одной из сторон.

Читать далее Bootstrap 3 элементы мультимедиа