Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Введение

Познакомившись с позиционированием и Flex вы могли заметить, что при всём многообразии доступных средств, верстать непосредственно макеты с использованием этих инструментов не так просто, как хотелось бы. Добавив множество техник, Flex не решил главной проблемы — быстрого создания сетки для сайта. Для создания хорошей структуры приходится делать дополнительные вложенности, ведь Flex по своей сути является одномерной системой. Мы можем удобно управлять контентом либо по оси x, либо по оси y. Это отлично при работе с контентом, но не при создании структуры страницы.

Flex был призван изменить стандарты вёрстки, избавив разработчиков от неудобных позиционирований и бесконечного страдания с float. Хоть ему это отлично удалось, но встала главная проблема: «а что делать со сложными шаблонами?». Количество flex контейнеров росло пропорционально количеству нестандартных элементов. При этом управлять таким зоопарком становилось всё труднее и труднее. Не имея чёткой структуры сетки веб-страницы, которая была бы описана в одном месте, всё превращалось в невероятно хрупкую структуру. Она ломалась быстрее, чем вы успевали моргнуть.

Для создания структуры страницы появился ещё один мощный инструмент — CSS Grid Layout (зачастую просто сокращают до Grid). CSS Grid Layout в отличие от Flex является двумерной системой компоновки контента на странице. Основная же идея, через которую проходит Grid — это сетки. Что это такое и как с этим работать мы подробно разберём по мере всего курса.

Важно: Grid не является заменой Flex и не создавался с такой целью. Это два разных модуля, которые прекрасно работают друг с другом.

Практика

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

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

CodePen

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

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

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

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

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».