Введение — CSS: Позиционирование элементов

Важнейшая часть создания любого веб-сайта — расположение элементов на странице. Это влияет на то, как пользователи будут воспринимать страницу: куда направлять взгляд, что видеть первым, какие элементы являются главными.

Само по себе позиционирование — управление расположением элемента по осям координат x, y, z, и все инструменты, которые существуют в CSS для позиционирования, предназначены только для этого. Рассматривая каждую тему с этой стороны, становится легче применять знания на практике.

В этом курсе мы рассмотрим базовые возможности позиционирования, известные уже много лет: работа со свойством position, float, z-index. С CSS3 появилось ещё несколько фундаментальных правил, позволяющих работать с позиционированием. Такими концепциями стали flex и grid, речь о которых пойдёт в отдельных курсах, ввиду большого количества материала.

Практика

Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.

В течение курса вы будете встречать самостоятельные задания. При необходимости вы можете попрактиковаться в задачах, представленных в заданиях. Также в них будут примеры кода, в которые можно подглядывать или просто изучать.

CodePen

Другая возможность применить навыки, полученные при работе с курсом — использование сервиса CodePen. Вы можете создать свой pen, внутри которого экспериментировать с позиционированием.

Также в каждом уроке курса будут представлены примеры, которые подгружаются из CodePen. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не упускайте такую возможность.

Не забывайте постоянно практиковаться, и тогда ваши навыки позиционирования элементов позволят не задумываясь определять, где и какое позиционирование необходимо использовать в конкретной рабочей ситуации.

Как подготовиться к этому курсу

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

1. Основы современной верстки
2. Основы верстки контента

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.