Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

Работа с контентом — базовая часть любого проекта. За всеми красивыми анимациями, блоками и картинками скрывается контент. За ним приходит пользователь на сайт или открывает приложение. От того, насколько хорошо выглядит и ощущается контент, зависит настроение пользователя.

В этом курсе мы изучим базовые возможности при работе с контентом и научимся создавать анимации. Вы изучите:

  • как создавать стили для шрифтов и списков;
  • создание и стилизация таблиц;
  • использование колонок с помощью свойства columns;
  • узнаете о различных единицах измерения и как с ними работать;
  • создание форм и использование медиа-элементов;
  • изучите базовые правила анимации и типографики;
  • познакомитесь с доступностью.

Практика

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

Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях viewport.

Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests_/_image_snapshots__.

Проверка практики

Решения студентов, в основном, проверяются по методу Visual Regression Testing, то есть сравнением скриншотов. Если не вдаваться в технические детали, то тестирование выглядит следующим образом:

  1. В упражнении содержатся эталонные скриншоты, которые были сделаны на основе решения учителя
  2. При нажатии на кнопку «Проверить» решение студента передаётся в браузер на основе Chromium и с него делается скриншот
  3. Скриншот сравнивается с эталонным скриншотом, после чего тесты выдают текстовый результат сравнения

Если во время тестирования были обнаружены различия более, чем в 2% от оригинального изображения, то система выдаст одну из двух возможных ошибок:

Разные размеры скриншотов

Visual Regression Testing

Expected an image 370px by 558px, received 370px by 524px. Система говорит о том, что размеры изображений не совпадают. В этом примере эталонный скриншот имеет размеры 370px x 558px, а для сравнения пришёл скриншот с размерами 370px x 524px

Скорее всего есть проблемы в отступах/высоте или межстрочном интервале. Внимательно проанализируйте скриншоты, в директории __diff_output__. Конкретный путь указан в выводе тестов, а файлы можно найти используя левую область упражнения.

Вы найдёте два файла:

  • название-теста-actual.jpg — Скриншот вашего решения
  • название-теста-expected.jpg — Эталонный скриншот

Визуальные отличия

Visual Regression Testing

810 pixels (ratio 0.01 of all image pixels) are different. В этом тесте система сообщает о том, что изображения различаются на 810 пикселей. В этом случае вместо двух файлов генерируются три:

  • название-теста-actual.jpg — Скриншот вашего решения
  • название-теста-expected.jpg — Эталонный скриншот
  • название-теста-diff.jpg — Скриншот, полученный в результате наложения скриншота студента и эталонного. Именно на нём видны области, которые различаются

Скриншот с различиями выглядит приблизительно так:

Visual Regression Testing Diff

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


Важно: исправляйте различия сверху вниз. Часто происходит ситуация, при которой небольшая ошибка в отступе влияет на весь скриншот сразу. Выглядит так, как будто всё неправильно, а для исправления достаточно исправить только одно свойство


CodePen

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

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

Не забывайте постоянно практиковаться, и тогда ваши навыки работы с контентом позволят быстро и грамотно оформлять весь контент страницы или приложения.


Аватары экспертов Хекслета

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

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

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

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

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

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

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

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

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

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

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

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

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

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

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»