Codepen io что это

Инструкция по работе с CodePen

Codepen — это популярная онлайновая платформа для редактирования и хранения кода на HTML, CSS и JavaScript с просмотром готового результата в браузере. Полученным кодом можно делиться и видоизменять его при необходимости. Окно браузера делится на несколько рабочих областей, в которых отображается результат, а также код на HTML, CSS и JavaScript.

Онлайн-редактор Codepen не требует регистрации, но для полноценного его использования обязательно необходимо зарегистрироваться. Регистрация на сервисе бесплатна, займет около двух минут, добавит возможность управлять сохраненными наборами кода (на сервисе такие наборы называются пенами — Pen) и возвращаться к их редактированию. Несмотря на то, что интерфейс сервиса на английском языке, пользоваться им достаточно просто, и базовых знаний английского хватит для быстрого освоения онлайн-редактора.

Регистрация и подтверждение аккаунта.

Для того, чтобы зарегистрироваться на сервисе, нужно выполнить несколько простых шагов:

1. Перейти на страницу сервиса и нажать кнопку «Sign Up»: или же сразу перейти по прямой ссылке на регистрацию
2. На странице выбора тарифного плана необходимо проверить, чтобы была выбрана вкладка «Индивидуальные планы» (Individual Plans), и нажать кнопку «Join CodePen Free» (так как нужна бесплатная учетная запись):
3. На следующей странице нужно заполнить форму регистрации и нажать кнопку «Submit»:
4. Далее на странице будет предложено ввести дополнительную информацию (это не обязательно) и нажать кнопку «Save & Continue»:
5. Последний обязательный шаг — подтверждение регистрации. Этот шаг очень важен, его нужно обязательно сделать. После выполнения предыдущих шагов на почту должно прийти письмо для подтверждения с темой «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). Для успешного выполнения такого задания нужно:

1. Перейти по ссылке, указанной в задании – откроется Pen.
2. Его нужно форкнуть (сделать ответвление, то есть личную копию задания), нажав на кнопку «Fork»:
3. После форка необходимо выполнять задание в этом же окне и обязательно нажимать «Save» для сохранения изменений. Ссылку на решение можно скопировать из адресной строки и, как только все остальные задания будут сделаны и протестированы, нужно отправить скопированные ссылки на решения в личном кабинете Нетологии:
4. Отправлять задание на проверку нужно только после самостоятельного тестирования. Для тестирования решения лучше использовать полностраничный режим – Full Page:

Руководство по использованию CodePen: помогите нам, и мы поможем вам

Привет, всем! Я решил написать небольшое руководство по использованию сервиса CodePen . Постоянно приходится иметь дело с множеством постов, включающих код скриптов, либо вообще со ссылками на другие сайты. В этом случае, крайне неудобно оказывать помощь по таким вопросам.

Использование CodePen с целью рассказать о своей проблеме это наиболее оптимальный способ, потому что можно непосредственно запустить код и оперативно исправить его. С помощью этого прекрасного сервиса, мы можем поделиться своим кодом, а другие смогут его отредактировать и сделать свою версию, чтобы показать правильный вариант.

Для начала проследуйте на сайт сервиса CodePen ( http://codepen.io ).

На главной странице вы можете просмотреть различные красочные примеры, но нас интересует кнопка « Новый Pen » (New Pen) — все проекты в сервисе называются Pen.

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

**Убедитесь, что вы верно проставили ссылки на все ресурсы, такие как изображения — они должны быть абсолютными, то есть содержать полную ссылку на ресурс, а не относительными.**

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

Для секции CSS, вы можете использовать, например, связку Sass/Compass (это связка CSS-препроцессора и компилятора для перевода .sass файлов в обычные .css), чтобы получить в своё распоряжение дополнительные инструменты.

Аналогично, для окна JavaScript, вы можете произвести собственные настройки, например, сослаться на внешний JS-файл или другой Pen.

Что касается окна JavaScript, то вы, скорее всего, будете использовать библиотеки наподобие jQuery. Поэтому в настройках окна JS вам надо выбрать соответствующую библиотеку в списке Library .

Когда ваш Pen готов для публикации, нажмите кнопку « Save » в левом верхнем углу страницы, чтобы сохранить его.

Затем нажмите кнопку « Share » чтобы поделиться своим кодом с другими. Если у вас PRO-аккаунт, то вы имеете более гибкие возможности. Если вы анонимный пользователь, то у вас есть возможность использовать функцию « Full Page » – то есть, даже не регистрируясь, вы можете поделиться с другими своим Pen`ом, вместо простой передачи исходников.

Как пользоваться CodePen: подробное руководство для новичков

CodePen — онлайн-редактор для фронтендеров. Это песочница, в которой можно работать с HTML, CSS и JavaScript. Читайте подробное руководство по этому инструменту.

• Кому и когда может пригодиться CodePen
• Как пользоваться CodePen: базовые настройки и возможности
• Как работать с чужими публикациями, экспортировать и встраивать пены
• Как работать с редактором проектов, писать посты, создавать коллекции
• Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами
• CodePen: больше чем песочница кода

Кому и когда может пригодиться CodePen

Инструмент можно использовать, чтобы быстро написать и оценить код, показать приложение другим людям, потренироваться. CodePen будет полезным всем разработчикам, имеющим дело с фронтендом.

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

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

• Постоянная поддержка от наставника и учебного центра
• Помощь с трудоустройством
• Готовое портфолио к концу обучения
• Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

Как пользоваться CodePen: базовые настройки и возможности

Попробовать песочницу можно без регистрации. Но чтобы иметь возможность сохранить код, нужно зарегистрироваться.

После регистрации создайте новый пен: нажмите кнопку Pen в меню.

Создаём новый пен

На странице пена есть четыре окна: для HTML, CSS, JavaScript, а также окно превью. Писать код можно сразу после создания пена.

Пен готов к работе

Пен можно настраивать, для этого перейдите в раздел Settings. В первую очередь обратите внимание на раздел настроек Behavior. Я всегда выключаю автообновление превью, чтобы не отвлекаться на обновляющийся после каждого введённого символа экран.

В настройках HTML, CSS и JS при необходимости подключите препроцессоры, фреймворки и библиотеки, которые планируете использовать.

Подключаем библиотеку Watch.js

В меню Pen Details можно указать название, описание и теги. Метаданные помогут другим пользователям находить ваш пен. В меню Editor доступны настройки отступов. Расширенные настройки редактора доступны в разделе Settings личного профиля.

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

Запускаем пен повторно, чтобы посмотреть превью после внесения изменений

В меню Change View можно выбрать предпочтительный лэйаут, переключиться в полноэкранный режим или режим отладки.

Выбираем режим и лэйаут

Владельцам PRO-аккаунта в CodePen доступны режимы с расширенными возможностями:

• Live View — демонстрация пена в режиме реального времени.
• Collab Mode — режим групповой работы над пеном.
• Professor Mode — режим для преподавателей.
• Presentation Mode — режим для демонстрации пена с помощью проектора.

«Продвинутые» режимы доступны владельцам PRO-аккаунта

Чтобы получить доступ к консоли, нажмите на соответствующую кнопку в левом нижнем углу экрана. Консоль можно очистить с помощью кнопки Clear.

Работаем с консолью

Владельцам PRO-аккаунтов доступна возможность использовать в пене загруженные изображения, а также файлы CSS и JavaScript. Чтобы загрузить изображение или файл, нажмите кнопку Assets в левом нижнем углу экрана.

Загрузка фото и других файлов

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

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

На CodePen можно работать с любым публичным пеном. Для этого нужно зайти на страницу пена и форкнуть его с помощью соответствующей кнопки в правом нижнем углу экрана.

Кнопка Embed в правом нижнем углу экрана позволяет встроить пен на сайт. Встраивание доступно в нескольких режимах: HTML, iframe, Prefill Embed и шорткат для WordPress.

В меню Export есть несколько вариантов экспорта пена. Экспорт доступен в виде архива с кодом или GitHub Gist. Владельцы PRO-аккаунта могут экспортировать архив с приложением, а затем запустить пен на локальном сервере.

Кнопка Share позволяет поделиться пеном в соцсетях или отправить ссылку на пен на свой телефон с помощью sms.

Полезная функция: вы можете поделиться ссылкой не на весь пен, а конкретно на код в окне HTML, CSS или JavaScript. Для этого в меню Change View выберите соответствующую опцию.

Прямые ссылки на код

Как работать с редактором проектов, писать посты, создавать коллекции

Редактор проектов доступен на условиях бета-тестирования. На бесплатном тарифе пользователь может создать один проект. На профессиональном тарифе ограничений нет.

В редакторе проектов можно создавать директории и файлы и организовывать код так, как это делается в реальных проектах. Вы можете редактировать код в отдельных файлах, а не в общем разделе HTML, CSS или JavaScript, как при работе с пенами. В редакторе проектов можно загружать изображения.

Интерфейс редактора проектов

В разделе Post можно писать заметки. Редактор поддерживает Markdown и визуальный режим. Есть возможность добавлять в посты изображения и встраивать пены.

Возможности для блогеров

Пены можно организовывать в коллекции. Чтобы создать коллекцию, нажмите кнопку Collection в меню. Чтобы добавить свой или чужой пен в коллекцию, нажмите кнопку Add to collection в правом нижнем углу экрана и выберите нужную коллекцию.

Добавляем пен в коллекцию

Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами

CodePen позиционируется в качестве социальной среды для веб-разработки. То есть эта платформа сочетает характеристики онлайн-песочницы для тестирования кода и социальной сети.

Начните использовать социальные возможности CodePen с настройки личного профиля. В раздел Showcase добавьте пены, которые хотите показывать другим пользователям в первую очередь. Этот раздел можно рассматривать как портфолио. Для редактирования раздела нажмите кнопку Organize Showcase в профиле.

Перетяните лучшие пены в раздел Showcase.

Выберите лучшие работы и отправьте их в портфолио

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

Следим за активностью пользователей

В разделе Explore можно найти интересный контент. Например, в Popular выводятся популярные публикации, в Following можно посмотреть публикации пользователей, на которых вы подписаны. В Topics можно выбрать интересные вам темы.

Ищем контент по интересам

В разделе Grow можно найти работу или сотрудников. Для этого выберите пункт Job. Список вакансий открыт для всех пользователей. Объявление о поиске сотрудников — платная функция, стоимость составляет 299 долларов за 60 дней.

Ищем работу и работников на CodePen

В разделе Grow — Challenges каждую неделю появляются новые челленджи для фронтендеров. Лучшие решения администрация CodePen закрепляет на главной странице. Это позволяет авторам заявить о себе и увеличить количество подписчиков.

CodePen: больше чем песочница кода

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

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

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Платформа Codepen

Codepen — это популярная онлайновая платформа для редактирования и хранения кода на HTML, CSS и JavaScript с просмотром готового результата в браузере. Полученным кодом можно делиться и видоизменять его при необходимости. Окно браузера делится на несколько рабочих областей, в которых отображается результат, а также код на HTML и CSS (рис. 1).

Рис. 1. Вид Codepen

Codepen не требует регистрации, но это рекомендуется сделать, если вам часто приходится пользоваться данной платформой. Это добавляет возможность управлять набором разного кода и возвращаться к его редактированию. Начать с чистого листа можно по этой ссылке:

Или перейти к готовому коду по заранее известной ссылке, вроде этой:

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

Поскольку нас интересует не сам CSS, то для начала надо щёлкнуть по шестерёнке возле заголовка и в открывшемся списке задать Less. Тип выбранного препроцессора подсвечивается зелёным цветом и отображается в заголовке рабочей области (рис. 2).

Рис. 2. Выбор Less

Кроме того, там же можно указать следующие настройки.

• Normalize — стилевая библиотека для приведения некоторых стилевых свойств к единому значению и обнуления других свойств. Иногда бывает необходима для получения одинакового результата в разных браузерах с учётом современных стандартов.
• Reset — стилевая библиотека от Эрика Мейера, преследует ту же цель что и Normalize.
• -prefix-free — небольшой скрипт, который автоматически добавляет необходимые вендорные префиксы (вроде -webkit и -moz) к стилевым свойствам.
• Autoprefixer — альтернативный скрипт добавляющий префиксы к свойствам, это позволяет писать чистый современный код CSS не задумываясь о поддержке в браузерах.
• External CSS File or Another Pen — подключение внешнего стилевого файла; актуально при использовании сторонних библиотек вроде Bootstrap.

Переключение между Less и готовым CSS делается при щелчке по иконке глаза, показанной на рис. 3. Итоговый CSS править нельзя, но допустимо выделить его и скопировать.

Рис. 3. Иконка для переключения вида

Кодом можно поделиться, предварительно сохранив его и скопировав адрес в браузере. Адрес всегда уникален и однозначно ведёт к нашему коду. Так что эту ссылку можно писать на форумах и в комментариях для демонстрации кода и результата. Кроме того в Codepen есть специальная кнопка Share, щёлчок по которой открывает специальное меню (рис. 4).

Рис. 4. Меню Share

Через Share можно поделиться кодом в социальных сетях, скачать полный архив и получить прямую ссылку на код HTML, CSS или Less.