Работа с контентом — базовая часть любого проекта. За всеми красивыми анимациями, блоками и картинками скрывается контент. За ним приходит пользователь на сайт или открывает приложение. От того, насколько хорошо выглядит и ощущается контент, зависит настроение пользователя.
В этом курсе мы изучим базовые возможности при работе с контентом и научимся создавать анимации. Вы изучите:
columns
;Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.
Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях viewport.
Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests_/_image_snapshots__.
Решения студентов, в основном, проверяются по методу Visual Regression Testing, то есть сравнением скриншотов. Если не вдаваться в технические детали, то тестирование выглядит следующим образом:
Если во время тестирования были обнаружены различия более, чем в 2% от оригинального изображения, то система выдаст одну из двух возможных ошибок:
Expected an image 370px by 558px, received 370px by 524px
. Система говорит о том, что размеры изображений не совпадают. В этом примере эталонный скриншот имеет размеры 370px x 558px
, а для сравнения пришёл скриншот с размерами 370px x 524px
Скорее всего есть проблемы в отступах/высоте или межстрочном интервале. Внимательно проанализируйте скриншоты, в директории __diff_output__
. Конкретный путь указан в выводе тестов, а файлы можно найти используя левую область упражнения.
Вы найдёте два файла:
810 pixels (ratio 0.01 of all image pixels) are different
. В этом тесте система сообщает о том, что изображения различаются на 810 пикселей. В этом случае вместо двух файлов генерируются три:
Скриншот с различиями выглядит приблизительно так:
Красным цветом выделено место, где были найдены отличия. В этом случае можно сравнить полученные скриншоты самостоятельно.
Важно: исправляйте различия сверху вниз. Часто происходит ситуация, при которой небольшая ошибка в отступе влияет на весь скриншот сразу. Выглядит так, как будто всё неправильно, а для исправления достаточно исправить только одно свойство
Другая возможность применить навыки, полученные при работе с курсом — использование сервиса CodePen. Вы можете создать свой pen, внутри которого экспериментировать со свойствами.
Также в каждом уроке курса будут представлены примеры, которые подгружаются с CodePen. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не упускайте такую возможность.
Не забывайте постоянно практиковаться, и тогда ваши навыки работы с контентом позволят быстро и грамотно оформлять весь контент страницы или приложения.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт