Трек
Для программистов

HTML и CSS. Позиционирование

Этот трек проведет вас по всем базовым модулям CSS. Здесь вы научитесь располагать элементы, используя позиционирование, Flex и Grid.

Начать учиться
Картинка программы HTML и CSS. Позиционирование
Самостоятельно,
в любое время
Обратная связь
по урокам от поддержки Хекслета
Неограниченный доступ
к пройденной теории
530 студентов
проходят трек прямо сейчас

Программа обучения

Уроки
  • Введение

  • Поток документа

  • Относительное позиционирование

  • Абсолютное позиционирование

  • Относительное и абсолютное позиционирование

  • Фиксированное позиционирование

  • Плавающие элементы

  • Наложение элементов


Чему научитесь
  • Управлять потоком документа, понимая, как работает браузер.

  • Применять на практике все виды позиционирования HTML-элементов.

  • Создавать интерактивные страницы, понимая саму суть верстки.

Испытания
Уроки
  • Введение

  • Что такое Flex?

  • Флекс-контейнер

  • Перенос элементов в контейнере

  • Выравнивание элементов по главной оси

  • Выравнивание элементов по поперечной оси

  • Свойства Flex-элементов. Гибкость. Flex-grow

  • Свойства Flex-элементов. Гибкость

  • Свойства Flex-элементов. Расположение


Чему научитесь
  • Применять базовые свойства CSS Flexible Box Layout.

  • Управлять HTML-элементами по вертикали и горизонтали с помощью Flex.

  • Создавать адаптированные для мобильных устройств макеты.

  • Создавать гибкие элементы, которые будут менять ширину и высоту.

Испытания
Уроки
  • Введение

  • Терминология

  • Первая сетка

  • Расположение элементов в сетке

  • Работа с сеткой

  • Неявная сетка

  • Позиционирование и Grid


Чему научитесь
  • Базовым свойствам CSS Grid Layout.

  • Создавать сетки и управлять пространством внутри них.

  • Управлять расположением HTML-элементов внутри сетки.

  • Адаптировать сетки для разных разрешений экрана.

Испытания
Уроки
  • Введение

  • Проверка адаптивности сайта

  • Viewport

  • Гибкие элементы

  • Flex

  • Медиазапросы

  • Медиазапросы и другие устройства


Чему научитесь
  • Проверять адаптивность сайта, используя онлайн-инструменты.

  • Использовать единицу измерения проценты для создания гибких макетов.

  • Работать с Flex при создании адаптивных макетов.

  • Создавать медиазапросы, позволяющие использовать стили для разных разрешений экранов.

  • Работать с различными типами устройств и создавать стили под них.

Испытания

Во втором проекте вы создадите две страницы музыкального портала «Music Box». Проект является логическим продолжением первого проекта. В нём вы вернётесь к созданию вёрстки по методологиям OOCSS и Atomic CSS. В процессе выполнения вы используете полученные знания из курсов по адаптивности и SASS. Адаптивность макету вам нужно будет реализовать самим. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma.

Подробнее

Как проходит обучение

Курс состоит из учебных модулей с уроками и проектами
  • В каждом уроке — теория, тесты на закрепление изученного и практика прямо в браузере

  • Задания проходят автоматическую проверку тестами и линтером

Теоретический материал
Мы воссоздали реальное рабочее пространство программиста. Прочувствуйте разработку «как есть» — с установкой софта, запуском кода, чтением ошибок и консольными командами
  • Вы прямо в браузере получаете доступ к виртуальной машине, редактору кода и к консоли

  • Сразу видите обратную связь по своему решению в виде тестов и их результатов

Упражнение в IDE
Проходите уроки самостоятельно в любое удобное время
  • Урок — это теория, квиз (проверочный тест) и практика

  • Учебный материал представлен в текстовом формате, иногда встречаются короткие видео

  • Практика может быть в виде упражнений в браузере, испытаний, проектов, самостоятельной работы и домашних заданий

  • Можно задавать вопросы по теории и практике уроков команде поддержки Хекслета

Тесты

Что говорят наши студенты о курсах и проектах

Помню как мучался, делая аналог .padding-header из задания в первый раз. Изобретал велосипед через js: через функцию, которая отслеживает скролл и смещает контент. А оказывается всё просто =) Отличное задание и полезный пример, спасибо.

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

Никита, спасибо большое за курс! Я зарегистрировалась на Хекслете еще в 20-м году, тогда в первом модуле не было верстки. Недавно вернулась к учебе и сейчас уже подползаю к асинхронному программированию и только взялась за верстку. Вот бы все курсы у нас в профессии были написаны таким ясным, понятным языком. Конечно, основы верстки сами по себе проще JS, но огромную роль в этой легкости сыграла ваша способность так клёво, играючи и ясно излагать материал! Надеюсь, что у меня останутся силы и...

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

Никита, спасибо большое за курс! Очень нравится подача материала. Учусь в своем темпе и в удовольствие, если возникают сложности, ветка с обсуждением очень выручает в 99% случаев. Было бы оч круто иметь возможность добавлять в избранное конкретные уроки или части урока. Спасибо, процветания и успехов!:)

Спасибо за проект! Сильная прокачка во многих аспектах, здесь тебе и адаптивная верстка, и использование sass, и баланс между AtomicCSS и OOCSS. Мой первоначальный вариант проекта сильно изменился и упростился - это отлично. Я доволен работой Никиты и потраченными временем и силами:)

Просто взрыв мозга, насколько это проще, чем float :) Особенно, когда padding и magrin ещё у блоков есть :) Вот что значит не следить за технологиями и делать всё по-старинке :)

Мне очень понравился проект. Понравилось работать с Никитой) Он очень подробно объясняет. Спасибо) Жду дальнейших проектов).

Получите доступ

К этому треку и ко всем остальным курсам Хекслета по подписке за 3 900 ₽ в месяц

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Кому подойдет обучение

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

Хекслет —
это серьезная подготовка инженеров-программистов

  • Топовые IT-компании обучают своих сотрудников на Хекслете

  • Весь обучающий контент создан практикующими IT-специалистами

  • Программы, направленные на системное развитие инженерного мышления

17 000+

Студентов учатся ежемесячно

4.7+ звезды
4.7+

Рейтинг на отзовиках: Otzyvmarketing

Индекс лояльности

Нашу платформу часто рекомендуют студенты

Нам доверяют обучение своих сотрудников

Контур
Kaiten
СБЕР МАРКЕТ
Bell integrator
QIWI
Agima
Авиасейлc
Альфа Банк
Uchi.ru
Райффайзенбанк
PeterService
Simtech
Itech Group
Хотите учиться от компании?

Расскажите вашему работодателю о Хекслете

Оформите подписку за 3 900 ₽ в месяц
  • Получите доступ к этому треку и ко всем остальных курсам Хекслета

  • Учитесь сколько нужно, отменить подписку можно в любой момент

  • Задавайте вопросы по урокам — вам ответит поддержка Хекслета

  • Сохраните неограниченный доступ к пройденной теории даже после отмены подписки

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Трек — это набор курсов по определенной теме для повышения квалификации и развития инженерного мышления. Треки подходят как для разработчиков с опытом, так и для новичков в качестве задания «со звёздочкой».

Вы можете учиться в своём темпе, срок обучения не ограничен.

Мы рекомендуем выделять 5-10 часов в неделю. Так с одной стороны обучение будет достаточно интенсивным, чтобы не растягивать его надолго, а с другой — достаточно комфортным, чтобы совмещать с работой и успевать отдыхать.

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

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

Тогда вы можете обучаться вместе с наставником.

Каждый наставник — опытный программист, который добился успехов в профессии, а теперь делится знаниями и опытом со студентами Хекслета. Кандидаты проходят строгий отбор — наставником становится лишь каждый десятый, поэтому случайных людей у нас нет.

Наставник помогает справляться с трудностями, отвечает на вопросы и делает ревью проектов.

Мы принимаем карты Visa, MasterCard и МИР любого банка, валюта счёта тоже может быть любой.

Если решите учиться самостоятельно, оформите подписку на план «Базовый». Доступ ко всем трекам откроется сразу после оплаты.

Если нужна помощь наставника, оставьте заявку на обучение. С вами свяжется куратор, подберёт подходящего наставника и пришлёт ссылку на оплату.