- Тренажер с практикой
-
Бессрочный доступ к теории
-
Асинхронный форматобучения
Включено в курс
Чему вы научитесь
- Правильно размечать текст, списки, таблицы и медиаэлементы.
- Создавать таблицы.
- Обращаться к элементам используя широкие возможности селекторов.
- Адаптировать страницы для людей с ограниченными возможностями.
- Использовать возможности CSS Columns.
- Подключать шрифты и правильно их использовать.
Описание
На этом курсе вы изучите основы верстки сайтов.
Здесь мы изучим базовые возможности при работе с контентом и научимся создавать анимации. Вы узнаете больше о том, как стилизовать текст, создавать таблицы, добавлять медиаэлементы на сайты и создавать красивые фоны. В итоге вы научитесь стилизовать страницы сайтов с помощью CSS-стилей, размечать таблицы, видео, аудио и картинки.
Верстка контента пригодится, если вы решите создавать свои сайты. Знания из этого курса помогают программистам понимать, как данные стилизуются на сайте и какие инструменты для этого используются.
Этот курс подойдет всем начинающим веб-разработчикам, которые интересуются версткой. Чтобы учиться было проще, стоит заранее изучить что такое HTML и CSS, а также выяснить, как использовать базовые типы селекторов.
Программа курса
-
2
Блочная модель и CSS
Какие CSS свойства влияют на размеры элементов при отображении на странице? Вспомним понятие блочной модели и изучим работу свойств margin, padding и border для установки внешних/внутренних отступов и видимых границ элемента. Познакомимся со свойством box-sizing, с помощью которого изменяется стандартное поведение блочной модели -
3
Стили текста
Создание страницы это, в первую очередь, работа с текстом. Каким бы ни был красивым дизайн, но если информацию прочитать трудно или невозможно, то пользователь быстро уйдет со страницы. В этом уроке познакомимся с базовыми свойствами стилизации текста -
4
Шрифты и работа с ними
Слышали фразу «Поиграйся со шрифтами»? Настало время этим заняться. Учимся подключать шрифты с помощью CSS, управлять размером текста, оформлением и устанавливать межстрочные интервалы. В конце урока изучим обобщенное свойство font, с помощью которого можно установить сразу 6 разных стилей текста -
6
Колонки
Создание журнальной верстки в несколько колонок было проблематичным с использованием CSS. С приходом стандарта CSS3 появился новый модуль — CSS Multi-column Layout, который дал возможность создавать колонки с автоматическим переносом контента. Изучим возможности модуля CSS Columns и ограничения, которые накладываются при таком способе стилизации текста -
7
Единицы измерения
Как и в реальном мире, в мире верстки используются единицы измерения для обозначения размеров элементов, отступов, размера текста и так далее. В этом уроке познакомимся с базовыми единицами измерения и их взаимосвязи с элементами на сайте. Изучим понятие относительных и абсолютных единиц и выявим разницу между единицами em и rem -
8
Медиаэлементы
Посетители сайтов любят не только читать текст, а воспринимать информацию через медиаэлементы: изображения, видео, аудио. Как правильно добавить их и учитывать различия в браузерах? Почему у изображения на сайте небольшой отступ снизу? Изучим это и немного больше в уроке -
9
Таблицы
Таблицы — страшный сон верстальщика. Для их создания используется много тегов, а небольшие ошибки могут испортить настроение. В этом уроке последовательно, шаг за шагом, изучим создание простых и сложных таблиц, разберемся, откуда могут возникать ошибки и как их не допускать. К концу урока вы сможете смело создавать таблицы и перестать их бояться -
10
Формы
Формы — важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Изучим, как создаются формы, добавляются текстовые поля, поля для выбора, списки и кнопки. Затронем тему доступности форм для людей с ограниченными возможностями -
11
Селекторы
К этому уроку были изучены и опробованы простые селекторы, которые позволяли выбирать элементы по классу, идентификатору или тегу. А как еще можно выбрать элемент на странице? В этом уроке разберем родственные и соседние селекторы, научимся использовать селекторы по атрибуту -
12
Псевдоклассы
Продолжаем тему селекторов в CSS и познакомимся с понятием псевдокласса. Узнаем, как, с их помощью, выбирать четные или нечетные элементы, как добавить новые стили при наведении мышки на элемент и почему четные элементы будут такими при использовании только определенного псевдокласса. Разберемся с состояниями элемента и структурными псевдоклассами -
13
Псевдоэлементы
Не хватило элементов на странице? На помощь приходят псевдоэлементы — элементы, созданные с помощью CSS. В этом уроке разберемся с тем, как создаются псевдоэлементы, зачем они нужны и какие особенности имеют. Увидим, как стилизуют маркеры списка в CSS -
14
Переполнение
Переполнением считается ситуация, при которой контент внутри контейнера больше, чем размер самого контейнера. Эта ситуация способна подпортить макет даже матерому верстальщику. Что с этим делать и как управлять скрытием контента с помощью свойства overflow изучим в этом уроке. Разберем свойство text-overflow и научимся делать многоточие в текстах, если для него не хватает места -
15
CSS Variables
Представьте, что на сайте десяток блоков имеют фон одного и того же цвета. Вам нужно изменить все эти цвета. Как же это сделать без постоянной замены цвета в каждом селекторе и как могут помочь переменные узнаем в этом уроке. Разберем, как создаются и используются переменные, узнаем про область видимости и почему глобальные переменные лучше, чем переменные для каждого селектора -
16
Фон
Верстальщик довольно часто сталкивается с необходимостью стилизовать не только конкретные элементы, такие как таблицы, списки, текст, медиаэлементы, формы. Порой нужно также стилизовать и блоки, внутри которых они находятся. Для этого можно установить фон для блока с контентом, а как это сделать, с помощью свойства background, узнаем в этом уроке. Изучим свойства для установки цвета, изображения, научимся позиционировать фон и устанавливать его размеры -
17
Градиенты
Одноцветный фон или изображение — не единственный способ добавить стили для блока. Художник и дизайнеры, для создания фона, нередко используют градиенты — плавные переходы одного цвета в другой. В этом уроке научимся создавать линейные и радиальные градиенты. С помощью градиентов и хитрости изучим создание резких переходов между цветами, а также узнаем о цветовом круге и как, с его помощью, находить сочетания цветов для градиентов -
18
Самостоятельная работа
Дополнительные задания, которые позволяют закрепить полученную теорию -
19
Дополнительные материалы
Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса
Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
Отзывы
Задание огонь! Для наглядности задал четные/нечетные классы tr-ам, а потом просто переписал через вложенность.
Задание бомба!Спасибо менторам!По сравнению с шахматистами,где их ставили в одну линию,так совсем другое впечатление..Понравилось,что не надо решать ребусы и додумывать,что от тебя хотели)
Задание мне помогло не просто понять псевдоклассы. Но и помогло разобраться с тем что делают пробелы и запятые между классами) Задание прям огонь! Решил не плохо, столько же места заняло в коде, но решение абсолютно другое, ну можно сказать даже чутка меньше символов)
Здравствуйте, на самом деле хитрое задание) студенту еще надо догадаться использовать два селектора(как для ячейки, так и для строки). "Это же шахматная доска!" - спустя время понял я и дошло как написать код.