Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 <ul><li>Как создавать стили для шрифтов и списков</li>

4 <li>Как создавать и стилизовать таблицы</li>

5 <li>Как использовать колонки с помощью свойства columns</li>

6 <li>Какие существуют единицы измерения и как с ними работать</li>

7 <li>Как создавать формы и использовать медиа-элементы</li>

8 <li>Какими базовыми правилами анимации и типографики нужно пользоваться</li>

9 <li>Как работает доступность</li>

10 </ul><h2>Практика</h2>

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

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

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

14 <h2>Проверка практики</h2>

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

16 <ol><li>В упражнении содержатся эталонные скриншоты, которые были сделаны на основе решения учителя</li>

17 <li>При нажатии на кнопку "Проверить" решение студента передается в браузер на основеChromiumи с него делается скриншот</li>

18 <li>Скриншот сравнивается с эталонным скриншотом, после чего тесты выдают текстовый результат сравнения</li>

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

20 <h3>Разные размеры скриншотов</h3>

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

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

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

24 <ul><li>название-теста-actual.jpg- Скриншот вашего решения</li>

25 <li>название-теста-expected.jpg- Эталонный скриншот</li>

26 </ul><h3>Визуальные отличия</h3>

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

28 <ul><li>название-теста-actual.jpg- Скриншот вашего решения</li>

29 <li>название-теста-expected.jpg- Эталонный скриншот</li>

30 <li>название-теста-diff.jpg- Скриншот, полученный в результате наложения скриншота студента и эталонного. Именно на нем видны области, которые различаются</li>

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

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

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

34 <h2>CodePen</h2>

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

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

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

38 <h2>Как подготовиться к этому курсу</h2>

39 Курс "Основы верстки контента" опирается на базовые знания синтаксиса HTML и CSS. Чтобы комфортно пройти этот курс, нужно знать, как создается разметка в HTML, что такое семантические элементы и какие базовые селекторы используются в CSS.

40 Эти темы разбираются в курсе<a>Основы современной верстки</a>.