курс

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

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

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

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

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

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

Описание

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

Уроки курса

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

    Введение

    Узнать о темах и целях курсах. Познакомиться со структурой уроков и их особенностях
  • 2

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

    Вспомнить про блочную модель и свойства, которые влияют на размер элемента. Изучить работу свойств margin, padding, border и научиться управлять блочной моделью с помощью свойства box-sizing
  • 3

    Стили текста

    Познакомиться с основными стилями, используемые при оформлении текста
  • 4

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

    Узнать о способах подключения и выбора шрифтов на странице. Научиться управлять размерами, оформлением и интервалами внутри текста. Изучить обобщённое свойство font
  • 5

    Списки

    Изучить виды списков в HTML и способы их стилизации
  • 6

    Колонки

    Познакомиться с CSS Multi-column Layout и узнать о способах его применения
  • 7

    Единицы измерения

    Изучить единицы измерения, доступные в CSS, и их взаимосвязи между собой
  • 8

    Медиаэлементы

    Узнать о способах добавления медиаэлементов на страницу Изучить возможности при вставке изображений, видео, аудио
  • 9

    Таблицы

    Научиться верстать таблицы. Узнать о семантике таблиц
  • 10

    Формы

    Изучить создание одного из самых важных элементов на сайте — формы. Научиться использовать стандартные элементы ввода данных и отправки формы
  • 11

    Селекторы

    Изучить более сложные селекторы второго и третьего уровня по спецификации W3C
  • 12

    Псевдоклассы

    Узнать о возможностях стилизации событий элемента и стилизации по месторасположению элемента. Научиться использовать псевдоклассы
  • 13

    Псевдоэлементы

    Познакомиться с псевдоэлементами и научиться генерировать новый контент через CSS
  • 14

    Переполнение

    Изучить работу свойства overflow и способах скрытия контента внутри блоков. Узнать о свойстве text-overflow
  • 15

    CSS Variables

    Узнать о CSS-переменных, их применении и области видимости
  • 16

    Фон

    Изучить возможности по установке и управлению фоном на странице с использованием свойства background. Научиться позиционировать фоновые изображения и настраивать их поведение
  • 17

    Градиенты

    Узнать о возможности создания линейный и радиальных градиентов с помощью CSS. Научиться использовать плавные или резкие переходы между цветами. Изучить понятие цветового круга и разобраться в сочетании цветов друг с другом
  • 18

    Самостоятельная работа

    Дополнительные задания, которые позволяют закрепить полученную теорию
  • 19

    Дополнительные материалы

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

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

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

Впечатления

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

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


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

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

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


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

Привет :)

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


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

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


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

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

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

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

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
7 июля 10 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
7 июля 16 месяцев