Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию, позволит Вам закрепить материалы курса и задать дополнительные вопросы на занятиях HTML. Примечание: как и другие задания HTML и JavaScript результат выполнения можно предоставлять как ссылку на codepen.io Читать далее Задания по CSS-градиентам и анимации
Рубрика: Курсы html
Заметки относятся к курсам HTML и другим курсам направления веб-разработки
Задания: 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>
, <embed>
, <video> и
<object>
, содержащие класс .embed-responsive-item
. Разрешаем браузерам определять размеры видео или слайд-шоу на основе ширины их содержащего блока, создавая соотношение сторон, которое будет правильно масштабировать на любом устройстве. Примечание: для HTML-элемента iframe необходимо добавлять frameborder=»0″, для сокрытия рамок. Читать далее Bootstrap отзывчивые элементы
Bootstrap панели
Bootstrap панели — компонент, представляющий собой обертку для вашего HTML-кода. Используется в тех случаях, когда вы захотите (вывод справочной информации, уведомлений, индикация параметров и т.д.) Основные классы .panel
и .panel-default
. Если панель содержит шапку или подвал, то используются встроенные в панель контейнеры с классами .panel-heading
и .panel-footer
, а для основного содержимого применяется .panel-heading
. Для окраски панелей используются контекстные классы: Читать далее Bootstrap панели
Bootstrap список
Bootstrap список или списочная группа — компонент фреймворка, позволяющий отобразить набор строк, подобно обычному списку, но в стиле оформления Bootstrap, без маркеров. Это очень гибкий компонент, который может быть использован при построении меню, перечня строк. Основные CSS-классы: .list-group
(сама списочная группа) и .list-group-item
(элемент этой группы). Вместе с списком могут быть использованы баджи, для указания пришедшей почты или совершении какого-то события (условия возникновения события прописывает программист). Читать далее Bootstrap список
Bootstrap 3 элементы мультимедиа
Bootstrap 3 элементы мультимедиа — Набор абстрактных стилей для построения компонентов различных типов (подобно комментариям блога, твитам ти т.д.). Они содержат изображения, выровненное по правой или по левой стороне, относительно содержимого. Также могут быть размещены другие медийные объекты — видео, аудио; они также выравниваются по одной из сторон.