Codepen — это популярная онлайновая платформа для редактирования и хранения кода на HTML, CSS и JavaScript с просмотром готового результата в браузере. Полученным кодом можно делиться и видоизменять его при необходимости. Окно браузера делится на несколько рабочих областей, в которых отображается результат, а также код на HTML, CSS и JavaScript.
Онлайн-редактор Codepen не требует регистрации, но для полноценного его использования обязательно необходимо зарегистрироваться. Регистрация на сервисе бесплатна, займет около двух минут, добавит возможность управлять сохраненными наборами кода (на сервисе такие наборы называются пенами — Pen) и возвращаться к их редактированию. Несмотря на то, что интерфейс сервиса на английском языке, пользоваться им достаточно просто, и базовых знаний английского хватит для быстрого освоения онлайн-редактора.
Регистрация и подтверждение аккаунта.
Для того, чтобы зарегистрироваться на сервисе, нужно выполнить несколько простых шагов:
На странице выбора тарифного плана необходимо проверить, чтобы была выбрана вкладка «Индивидуальные планы» (Individual Plans), и нажать кнопку «Join CodePen Free» (так как нужна бесплатная учетная запись):
На следующей странице нужно заполнить форму регистрации и нажать кнопку «Submit»:
Далее на странице будет предложено ввести дополнительную информацию (это не обязательно) и нажать кнопку «Save & Continue»:
Последний обязательный шаг - подтверждение регистрации. Этот шаг очень важен, его нужно обязательно сделать. После выполнения предыдущих шагов на почту должно прийти письмо для подтверждения с темой «CodePen: Verify your Email» - письмо нужно открыть и нажать в нем кнопку «Click to Verify Email»:
после нажатия откроется главная страница сервиса с уведомлением об успешном подтверждении электронной почты:
Общие рекомендации по работе с Codepen
Главное окно Codepen
Основное окно онлайн-редактора Codepen представляет собой три редактора в верхней части (HTML, CSS и JavaScript) и вывод результатов исполнения кода в нижней части, содержимое которой обновляется в режиме реального времени:
Режимы отображения
Codepen дает возможность изменить режим отображения – за это отвечает кнопка «Change View», в бесплатной учетной записи доступны следующие режимы (выделены рекомендуемые для выполнения домашних заданий режимы):
Editor View – стандартный режим редактирования;
Details View – режим, в котором есть результат выполнения кода и ниже детали с дополнительной информацией (автор, описание и так далее);
Full Page – полностраничный режим отображения;
Debug Mode – полностраничный режим отображения без элементов управления Codepen (в этом режиме не загружаются файлы для демо, которые загружаются в остальных режимах, для выполнения домашних работ этот режим использовать не нужно).
Для проверки правильности выполнения домашних заданий рекомендуем активно пользоваться полностраничным режимом Full Page и почаще сохранять решение кнопкой «Save».
Сохраненные задания (пены) / Dashboard
Чтобы найти сохраненные ранее задания (пены), нужно перейти в раздел Dashboard по прямой ссылке или нажав на аватар в профиле в выбрав в списке «Your Dashboard»:
На открывшейся странице для облегчения поиска нужного пена можно указать для фильтра значение «Fork» — в результате будут отображены все пены, которые были форкнуты:
Этапы выполнения домашних заданий
Задание в онлайн-редакторе codepen представляет из себя подготовленный набор кода (Pen). Для успешного выполнения такого задания нужно:
Перейти по ссылке, указанной в задании – откроется Pen.
Его нужно форкнуть (сделать ответвление, то есть личную копию задания), нажав на кнопку «Fork»:
После форка необходимо выполнять задание в этом же окне и обязательно нажимать «Save» для сохранения изменений. Ссылку на решение можно скопировать из адресной строки и, как только все остальные задания будут сделаны и протестированы, нужно отправить скопированные ссылки на решения в личном кабинете Нетологии:
Отправлять задание на проверку нужно только после самостоятельного тестирования. Для тестирования решения лучше использовать полностраничный режим – Full Page:
