курс

Основы верстки контента

8708 студентов 3322 сообщения
Последнее обновление: 30 ноября 2022
Курс Основы верстки контента
3 900 ₽ в месяц
за все курсы Хекслета
Зарегистрироваться
  • Тренажер с практикой
  • Бессрочный доступ к теории
  • Асинхронный формат обучения

Включено в курс

17 уроков (видео и/или текст)
17 упражнений в тренажере
66 проверочных тестов
Помощь в «Обсуждениях»
Доступ к остальным курсам платформы

Чему вы научитесь

  • Правильно размечать текст, списки, таблицы и медиаэлементы.
  • Создавать таблицы.
  • Обращаться к элементам используя широкие возможности селекторов.
  • Адаптировать страницы для людей с ограниченными возможностями.
  • Использовать возможности CSS Columns.
  • Подключать шрифты и правильно их использовать.

Описание

Курс посвящен работе с контентом с помощью CSS и HTML. На сегодняшний день таблицы стилей предоставляют большие возможности по стилизации текста и блоков на странице: фон, цвет, использование аудио и видео. Все эти элементы позволяют создавать красочные и доступные сайты для пользователей. Немало времени уделено изучению новых селекторов, псевдоклассов и псевдоэлементов. Они позволяют неординарно стилизовать контент.

Уроки курса

Продолжительность 18 часов
  • 1

    Введение

    Работа с контентом — базовая часть при создании проекта. За красивыми анимациями, блоками и картинками скрывается контент. За ним приходит пользователь на сайт или открывает приложение. В этом уроке кратко рассмотрим темы, которые будут изучаться на протяжении курса
  • 2

    Блочная модель и CSS

    Какие CSS свойства влияют на размеры элементов при отображении на странице? Вспомним понятие блочной модели и изучим работу свойств margin, padding и border для установки внешних/внутренних отступов и видимых границ элемента. Познакомимся со свойством box-sizing, с помощью которого изменяется стандартное поведение блочной модели
  • 3

    Стили текста

    Создание страницы это, в первую очередь, работа с текстом. Каким бы ни был красивым дизайн, но если информацию прочитать трудно или невозможно, то пользователь быстро уйдет со страницы. В этом уроке познакомимся с базовыми свойствами стилизации текста
  • 4

    Шрифты и работа с ними

    Слышали фразу «Поиграйся со шрифтами»? Настало время этим заняться. Учимся подключать шрифты с помощью CSS, управлять размером текста, оформлением и устанавливать межстрочные интервалы. В конце урока изучим обобщенное свойство font, с помощью которого можно установить сразу 6 разных стилей текста
  • 5

    Списки

    Списки — неотъемлемая часть текста. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В этом уроке изучим доступные виды списков в HTML, потренируемся во вложенности списков и затронем тему стилизации маркеров списка
  • 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 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

#
Задание
% завершений

Отзывы

Аватар пользователя Artem Reshilov
Artem Reshilov 06 июня 2022

Здравствуйте, на самом деле хитрое задание) студенту еще надо догадаться использовать два селектора(как для ячейки, так и для строки). "Это же шахматная доска!" - спустя время понял я и дошло как написать код.


Аватар пользователя Анна Жарова
Анна Жарова 18 марта 2022

Упражнение получилось, все прекрасно, спасибо за интересный урок=)

Но я завидую человеку с этим расписанием, почему он не работает?xD


Аватар пользователя Валентина
Валентина 10 марта 2022

Привет :)

Прикольно что курсы обновляются, чувствуется забота :) А я первая тут написала :) Обновила табулу рассу так сказать :) Пойду поделаю свежачок :)


Аватар пользователя Avshukan
Avshukan 11 февраля 2022

О! Классно, когда задания - это не просто сферические кони в вакууме, а что-то актуальное! Респект за Яна и Магнуса (-:


Аватар пользователя Андрей Соколов
Андрей Соколов 23 июля 2021

Отлично! Спасибо!

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
с нуля
Разработка фронтенд-компонентов для веб-приложений
8 декабря 10 месяцев
Иконка программы Онлайн-буткемп. Фронтенд-разработчик
Профессия
Новый с нуля
Интенсивное обучение профессии в режиме полного дня
15 декабря 4 месяца
Иконка программы Python-разработчик
Профессия
с нуля
Разработка веб-приложений на Django
8 декабря 10 месяцев
Иконка программы Java-разработчик
Профессия
с нуля
Разработка приложений на языке Java
8 декабря 10 месяцев
Иконка программы PHP-разработчик
Профессия
с нуля
Разработка веб-приложений на Laravel
8 декабря 10 месяцев
Иконка программы Node.js-разработчик
Профессия
с нуля
Разработка бэкенд-компонентов для веб-приложений
8 декабря 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
8 декабря 16 месяцев
Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев