- Тренажер с практикой
-
Бессрочный доступ к теории
-
Асинхронный форматобучения
Включено в курс
Чему вы научитесь
- Управлять потоком документа, понимая, как работает браузер.
- Применять на практике все виды позиционирования HTML-элементов.
- Создавать интерактивные страницы, понимая саму суть верстки.
Описание
На этом курсе вы изучите позиционирование элементов. Вы узнаете больше об использовании относительного и абсолютного позиционирования. В итоге вы научитесь располагать элементы на странице, создавать модальные окна. Позиционирование пригодится, если вы решите создавать сложные графические стили, а так же заниматься анимацией. Знания из этого курса помогают программистам управлять расположением элементов на странице и самостоятельно менять месторасположение вне зависимости от расположения в HTML.
Позиционирование — следующий шаг в изучении верстки после базовых навыков разметки и стилизации. Теперь можно не только стилизовать элемент, но и разместить его вне стандартного места. Тема позиционирования проходит через всю верстку. Чтобы успешно в ней разобраться, используйте навыки, полученные при прохождении курсов:
Программа курса
-
2
Поток документа
Выясняем, как браузеры отображают HTML и что такое «нормальный поток документа»тесты
-
3
Относительное позиционирование
Учимся использовать относительное позиционирование -
4
Абсолютное позиционирование
Выясняем, как выдернуть элемент из нормального потока -
5
Относительное и абсолютное позиционирование
Поговорим о связи абсолютного и относительного позиционирования -
6
Фиксированное позиционирование
Учимся позиционировать элемент относительно самого браузера -
8
Наложение элементов
Поговорим о наложении элементов, связи позиционирования и наложения -
9
Дополнительные материалы
Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса
Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
Отзывы
Помню как мучался, делая аналог .padding-header из задания в первый раз. Изобретал велосипед через js: через функцию, которая отслеживает скролл и смещает контент. А оказывается всё просто =) Отличное задание и полезный пример, спасибо.
Привет. Благодарю что делитесь секретиками. Курс назад мне не хватало секретиков, теперь же не знаю запомню ли все )
Отлично, спасибо! Теперь в моей голове стало ещё немного меньше неструктурированной информации :) .