Важнейшая часть создания любого веб-сайта — расположение элементов на странице. Это влияет на то, как пользователи будут воспринимать страницу: куда направлять взгляд, что видеть первым, какие элементы являются главными.
Само по себе позиционирование — управление расположением элемента по осям координат x
, y
, z
, и все инструменты, которые существуют в CSS для позиционирования, предназначены только для этого. Рассматривая каждую тему с этой стороны, становится легче применять знания на практике.
В этом курсе мы рассмотрим базовые возможности позиционирования, известные уже много лет: работа со свойством position
, float
, z-index
. С CSS3 появилось ещё несколько фундаментальных правил, позволяющих работать с позиционированием. Такими концепциями стали flex
и grid
, речь о которых пойдёт в отдельных курсах, ввиду большого количества материала.
Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.
В течение курса вы будете встречать самостоятельные задания. При необходимости вы можете попрактиковаться в задачах, представленных в заданиях. Также в них будут примеры кода, в которые можно подглядывать или просто изучать.
Другая возможность применить навыки, полученные при работе с курсом — использование сервиса CodePen. Вы можете создать свой pen, внутри которого экспериментировать с позиционированием.
Также в каждом уроке курса будут представлены примеры, которые подгружаются из CodePen. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не упускайте такую возможность.
Не забывайте постоянно практиковаться, и тогда ваши навыки позиционирования элементов позволят не задумываясь определять, где и какое позиционирование необходимо использовать в конкретной рабочей ситуации.
Позиционирование — следующий шаг в изучении верстки после базовых навыков разметки и стилизации. Теперь можно не только стилизовать элемент, но и разместить его вне стандартного места. Тема позиционирования проходит через всю верстку. Чтобы успешно в ней разобраться, используйте навыки, полученные при прохождении курсов:
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт