курс

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

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

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

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

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

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

Описание

На этом курсе вы изучите основы верстки сайтов.

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

Верстка контента пригодится, если вы решите создавать свои сайты. Знания из этого курса помогают программистам понимать, как данные стилизуются на сайте и какие инструменты для этого используются.

Этот курс подойдет всем начинающим веб-разработчикам, которые интересуются версткой. Чтобы учиться было проще, стоит заранее изучить что такое HTML и CSS, а также выяснить, как использовать базовые типы селекторов.

Программа курса

Продолжительность 19 часов
  • 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 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

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

Отзывы

Аватар пользователя Marianna Fedorov
Marianna Fedorov 24 апреля 2024

Задание про окрашивание шахматной доски прям очень нравится!!!


Аватар пользователя Константин Шаган
Константин Шаган 24 марта 2024

Задание огонь! Для наглядности задал четные/нечетные классы tr-ам, а потом просто переписал через вложенность.


Аватар пользователя Илья Карташов
Илья Карташов 09 февраля 2024

Задание бомба!Спасибо менторам!По сравнению с шахматистами,где их ставили в одну линию,так совсем другое впечатление..Понравилось,что не надо решать ребусы и додумывать,что от тебя хотели)


Аватар пользователя Илья Ячменев
Илья Ячменев 04 ноября 2023

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


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

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

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

профессия
от 6 300 ₽ в месяц
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 20 июня
профессия
от 6 300 ₽ в месяц
Обучитесь разработке бэкенда сайтов и веб-приложений — серверной части, которая отвечает за логику и базы данных
10 месяцев
с нуля
Старт 20 июня
профессия
от 6 300 ₽ в месяц
Научитесь разработке веб-приложений, сайтов и программного обеспечения на языке Java, программируйте и используйте структуры данных
10 месяцев
с нуля
Старт 20 июня
профессия
от 6 300 ₽ в месяц
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 20 июня
профессия
от 9 900 ₽ в месяц
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 20 июня
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 20 июня
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
в разработке
Старт 20 июня
профессия
от 6 183 ₽ в месяц
Выполняйте ручное тестирование веб-приложений, находите ошибки в продукте. Узнайте все о тест-дизайне.
4 месяца
с нуля
Старт 20 июня
профессия
от 5 025 ₽ в месяц
новый
Собирайте, анализируйте и интерпретируйте данные, улучшайте бизнес-процессы и продукт компании. Обучитесь работе с библиотеками Python
9 месяцев
с нуля
Старт 20 июня
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 20 июня