1 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>CodePen - онлайн-редактор для фронтендеров. Это песочница, в которой можно работать с HTML, CSS и JavaScript. Читайте подробное руководство по этому инструменту.</p>
1
<p>CodePen - онлайн-редактор для фронтендеров. Это песочница, в которой можно работать с HTML, CSS и JavaScript. Читайте подробное руководство по этому инструменту.</p>
2
<h2>Содержание</h2>
2
<h2>Содержание</h2>
3
<ul><li><a>Кому и когда может пригодиться CodePen</a></li>
3
<ul><li><a>Кому и когда может пригодиться CodePen</a></li>
4
<li><a>Как пользоваться CodePen: базовые настройки и возможности</a></li>
4
<li><a>Как пользоваться CodePen: базовые настройки и возможности</a></li>
5
<li><a>Как работать с чужими публикациями, экспортировать и встраивать пены</a></li>
5
<li><a>Как работать с чужими публикациями, экспортировать и встраивать пены</a></li>
6
<li><a>Как работать с редактором проектов, писать посты, создавать коллекции</a></li>
6
<li><a>Как работать с редактором проектов, писать посты, создавать коллекции</a></li>
7
<li><a>Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами</a></li>
7
<li><a>Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами</a></li>
8
<li><a>CodePen: больше чем песочница кода</a></li>
8
<li><a>CodePen: больше чем песочница кода</a></li>
9
</ul><h2>Кому и когда может пригодиться CodePen</h2>
9
</ul><h2>Кому и когда может пригодиться CodePen</h2>
10
<p><a>Инструмент</a>можно использовать, чтобы быстро написать и оценить код, показать приложение другим людям, потренироваться. CodePen будет полезным всем разработчикам, имеющим дело с<a>фронтендом</a>.</p>
10
<p><a>Инструмент</a>можно использовать, чтобы быстро написать и оценить код, показать приложение другим людям, потренироваться. CodePen будет полезным всем разработчикам, имеющим дело с<a>фронтендом</a>.</p>
11
<p>Песочницу часто используют преподаватели программирования и вёрстки для демонстрации учебного кода. CodePen применяют авторы статей о разработке, когда нужно показать читателям пример кода.</p>
11
<p>Песочницу часто используют преподаватели программирования и вёрстки для демонстрации учебного кода. CodePen применяют авторы статей о разработке, когда нужно показать читателям пример кода.</p>
12
<h2>Как пользоваться CodePen: базовые настройки и возможности</h2>
12
<h2>Как пользоваться CodePen: базовые настройки и возможности</h2>
13
<p>Попробовать песочницу можно без регистрации. Но чтобы иметь возможность сохранить код, нужно зарегистрироваться.</p>
13
<p>Попробовать песочницу можно без регистрации. Но чтобы иметь возможность сохранить код, нужно зарегистрироваться.</p>
14
<p>После регистрации создайте новый пен: нажмите кнопку Pen в меню.</p>
14
<p>После регистрации создайте новый пен: нажмите кнопку Pen в меню.</p>
15
<p><em>Создаём новый пен</em></p>
15
<p><em>Создаём новый пен</em></p>
16
<p>На странице пена есть четыре окна: для HTML, CSS, JavaScript, а также окно превью. Писать код можно сразу после создания пена.</p>
16
<p>На странице пена есть четыре окна: для HTML, CSS, JavaScript, а также окно превью. Писать код можно сразу после создания пена.</p>
17
<p><em>Пен готов к работе</em></p>
17
<p><em>Пен готов к работе</em></p>
18
<p>Пен можно настраивать, для этого перейдите в раздел Settings. В первую очередь обратите внимание на раздел настроек Behavior. Я всегда выключаю автообновление превью, чтобы не отвлекаться на обновляющийся после каждого введённого символа экран.</p>
18
<p>Пен можно настраивать, для этого перейдите в раздел Settings. В первую очередь обратите внимание на раздел настроек Behavior. Я всегда выключаю автообновление превью, чтобы не отвлекаться на обновляющийся после каждого введённого символа экран.</p>
19
<p><em>Выключаем автообновления</em></p>
19
<p><em>Выключаем автообновления</em></p>
20
<p>В настройках HTML, CSS и JS при необходимости подключите препроцессоры, фреймворки и библиотеки, которые планируете использовать.</p>
20
<p>В настройках HTML, CSS и JS при необходимости подключите препроцессоры, фреймворки и библиотеки, которые планируете использовать.</p>
21
<p><em>Подключаем библиотеку Watch.js</em></p>
21
<p><em>Подключаем библиотеку Watch.js</em></p>
22
<p>В меню Pen Details можно указать название, описание и теги. Метаданные помогут другим пользователям находить ваш пен. В меню Editor доступны настройки отступов. Расширенные настройки редактора доступны в разделе Settings личного профиля.</p>
22
<p>В меню Pen Details можно указать название, описание и теги. Метаданные помогут другим пользователям находить ваш пен. В меню Editor доступны настройки отступов. Расширенные настройки редактора доступны в разделе Settings личного профиля.</p>
23
<p>После выбора настроек приступайте к работе. Обратите внимание, если вы отключили автообновление превью, для просмотра результатов нужно нажать кнопку Run.</p>
23
<p>После выбора настроек приступайте к работе. Обратите внимание, если вы отключили автообновление превью, для просмотра результатов нужно нажать кнопку Run.</p>
24
<p><em>Запускаем пен повторно, чтобы посмотреть превью после внесения изменений</em></p>
24
<p><em>Запускаем пен повторно, чтобы посмотреть превью после внесения изменений</em></p>
25
<p>В меню Change View можно выбрать предпочтительный лэйаут, переключиться в полноэкранный режим или режим отладки.</p>
25
<p>В меню Change View можно выбрать предпочтительный лэйаут, переключиться в полноэкранный режим или режим отладки.</p>
26
<p><em>Выбираем режим и лэйаут</em></p>
26
<p><em>Выбираем режим и лэйаут</em></p>
27
<p>Владельцам PRO-аккаунта в CodePen доступны режимы с расширенными возможностями:</p>
27
<p>Владельцам PRO-аккаунта в CodePen доступны режимы с расширенными возможностями:</p>
28
<ul><li>Live View - демонстрация пена в режиме реального времени.</li>
28
<ul><li>Live View - демонстрация пена в режиме реального времени.</li>
29
<li>Collab Mode - режим групповой работы над пеном.</li>
29
<li>Collab Mode - режим групповой работы над пеном.</li>
30
<li>Professor Mode - режим для преподавателей.</li>
30
<li>Professor Mode - режим для преподавателей.</li>
31
<li>Presentation Mode - режим для демонстрации пена с помощью проектора.</li>
31
<li>Presentation Mode - режим для демонстрации пена с помощью проектора.</li>
32
</ul><p><em>"Продвинутые" режимы доступны владельцам PRO-аккаунта</em></p>
32
</ul><p><em>"Продвинутые" режимы доступны владельцам PRO-аккаунта</em></p>
33
<p>Чтобы получить доступ к консоли, нажмите на соответствующую кнопку в левом нижнем углу экрана. Консоль можно очистить с помощью кнопки Clear.</p>
33
<p>Чтобы получить доступ к консоли, нажмите на соответствующую кнопку в левом нижнем углу экрана. Консоль можно очистить с помощью кнопки Clear.</p>
34
<p><em>Работаем с консолью</em></p>
34
<p><em>Работаем с консолью</em></p>
35
<p>Владельцам PRO-аккаунтов доступна возможность использовать в пене загруженные изображения, а также файлы CSS и JavaScript. Чтобы загрузить изображение или файл, нажмите кнопку Assets в левом нижнем углу экрана.</p>
35
<p>Владельцам PRO-аккаунтов доступна возможность использовать в пене загруженные изображения, а также файлы CSS и JavaScript. Чтобы загрузить изображение или файл, нажмите кнопку Assets в левом нижнем углу экрана.</p>
36
<p><em>Загрузка фото и других файлов</em></p>
36
<p><em>Загрузка фото и других файлов</em></p>
37
<p>Выше описаны базовые инструменты и настройки CodePen, которых достаточно для того, чтобы создать пен и протестировать код. Дальше пойдёт речь о дополнительных возможностях CodePen.</p>
37
<p>Выше описаны базовые инструменты и настройки CodePen, которых достаточно для того, чтобы создать пен и протестировать код. Дальше пойдёт речь о дополнительных возможностях CodePen.</p>
38
<h2>Как работать с чужими публикациями, экспортировать и встраивать пены</h2>
38
<h2>Как работать с чужими публикациями, экспортировать и встраивать пены</h2>
39
<p>На CodePen можно работать с любым публичным пеном. Для этого нужно зайти на страницу пена и форкнуть его с помощью соответствующей кнопки в правом нижнем углу экрана.</p>
39
<p>На CodePen можно работать с любым публичным пеном. Для этого нужно зайти на страницу пена и форкнуть его с помощью соответствующей кнопки в правом нижнем углу экрана.</p>
40
<p>Кнопка Embed в правом нижнем углу экрана позволяет встроить пен на сайт. Встраивание доступно в нескольких режимах: HTML, iframe, Prefill Embed и шорткат для WordPress.</p>
40
<p>Кнопка Embed в правом нижнем углу экрана позволяет встроить пен на сайт. Встраивание доступно в нескольких режимах: HTML, iframe, Prefill Embed и шорткат для WordPress.</p>
41
<p><em>Встраиваем пены</em></p>
41
<p><em>Встраиваем пены</em></p>
42
<p>В меню Export есть несколько вариантов экспорта пена. Экспорт доступен в виде архива с кодом или GitHub Gist. Владельцы PRO-аккаунта могут экспортировать архив с приложением, а затем запустить пен на локальном сервере.</p>
42
<p>В меню Export есть несколько вариантов экспорта пена. Экспорт доступен в виде архива с кодом или GitHub Gist. Владельцы PRO-аккаунта могут экспортировать архив с приложением, а затем запустить пен на локальном сервере.</p>
43
<p>Кнопка Share позволяет поделиться пеном в соцсетях или отправить ссылку на пен на свой телефон с помощью sms.</p>
43
<p>Кнопка Share позволяет поделиться пеном в соцсетях или отправить ссылку на пен на свой телефон с помощью sms.</p>
44
<p>Полезная функция: вы можете поделиться ссылкой не на весь пен, а конкретно на код в окне HTML, CSS или JavaScript. Для этого в меню Change View выберите соответствующую опцию.</p>
44
<p>Полезная функция: вы можете поделиться ссылкой не на весь пен, а конкретно на код в окне HTML, CSS или JavaScript. Для этого в меню Change View выберите соответствующую опцию.</p>
45
<p><em>Прямые ссылки на код</em></p>
45
<p><em>Прямые ссылки на код</em></p>
46
<h2>Как работать с редактором проектов, писать посты, создавать коллекции</h2>
46
<h2>Как работать с редактором проектов, писать посты, создавать коллекции</h2>
47
<p>Редактор проектов доступен на условиях бета-тестирования. На бесплатном тарифе пользователь может создать один проект. На профессиональном тарифе ограничений нет.</p>
47
<p>Редактор проектов доступен на условиях бета-тестирования. На бесплатном тарифе пользователь может создать один проект. На профессиональном тарифе ограничений нет.</p>
48
<p>В редакторе проектов можно создавать директории и файлы и организовывать код так, как это делается<a>в реальных проектах</a>. Вы можете редактировать код в отдельных файлах, а не в общем разделе HTML, CSS или JavaScript, как при работе с пенами. В редакторе проектов можно загружать изображения.</p>
48
<p>В редакторе проектов можно создавать директории и файлы и организовывать код так, как это делается<a>в реальных проектах</a>. Вы можете редактировать код в отдельных файлах, а не в общем разделе HTML, CSS или JavaScript, как при работе с пенами. В редакторе проектов можно загружать изображения.</p>
49
<p><em>Интерфейс редактора проектов</em></p>
49
<p><em>Интерфейс редактора проектов</em></p>
50
<p>В разделе Post можно писать заметки. Редактор поддерживает Markdown и визуальный режим. Есть возможность добавлять в посты изображения и встраивать пены.</p>
50
<p>В разделе Post можно писать заметки. Редактор поддерживает Markdown и визуальный режим. Есть возможность добавлять в посты изображения и встраивать пены.</p>
51
<p><em>Возможности для блогеров</em></p>
51
<p><em>Возможности для блогеров</em></p>
52
<p>Пены можно организовывать в коллекции. Чтобы создать коллекцию, нажмите кнопку Collection в меню. Чтобы добавить свой или чужой пен в коллекцию, нажмите кнопку Add to collection в правом нижнем углу экрана и выберите нужную коллекцию.</p>
52
<p>Пены можно организовывать в коллекции. Чтобы создать коллекцию, нажмите кнопку Collection в меню. Чтобы добавить свой или чужой пен в коллекцию, нажмите кнопку Add to collection в правом нижнем углу экрана и выберите нужную коллекцию.</p>
53
<p><em>Добавляем пен в коллекцию</em></p>
53
<p><em>Добавляем пен в коллекцию</em></p>
54
+
<h2>Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами</h2>
54
<p>CodePen позиционируется в качестве социальной среды для веб-разработки. То есть эта платформа сочетает характеристики онлайн-песочницы для тестирования кода и социальной сети.</p>
55
<p>CodePen позиционируется в качестве социальной среды для веб-разработки. То есть эта платформа сочетает характеристики онлайн-песочницы для тестирования кода и социальной сети.</p>
55
<p>Начните использовать социальные возможности CodePen с настройки личного профиля. В раздел Showcase добавьте пены, которые хотите показывать другим пользователям в первую очередь. Этот раздел можно рассматривать как портфолио. Для редактирования раздела нажмите кнопку Organize Showcase в профиле.</p>
56
<p>Начните использовать социальные возможности CodePen с настройки личного профиля. В раздел Showcase добавьте пены, которые хотите показывать другим пользователям в первую очередь. Этот раздел можно рассматривать как портфолио. Для редактирования раздела нажмите кнопку Organize Showcase в профиле.</p>
56
<p><em>Организуйте портфолио</em></p>
57
<p><em>Организуйте портфолио</em></p>
57
<p>Перетяните лучшие пены в раздел Showcase.</p>
58
<p>Перетяните лучшие пены в раздел Showcase.</p>
58
<p><em>Выберите лучшие работы и отправьте их в портфолио</em></p>
59
<p><em>Выберите лучшие работы и отправьте их в портфолио</em></p>
59
<p>В разделе Activity можно следить за взаимодействием пользователей с вашими пенами. В журнале сохраняются записи, когда кто-то лайкает, добавляет в коллекцию, форкает пен, подписывается на обновления и так далее. Вы тоже можете зафолловить других пользователей и следить за их активностью.</p>
60
<p>В разделе Activity можно следить за взаимодействием пользователей с вашими пенами. В журнале сохраняются записи, когда кто-то лайкает, добавляет в коллекцию, форкает пен, подписывается на обновления и так далее. Вы тоже можете зафолловить других пользователей и следить за их активностью.</p>
60
<p><em>Следим за активностью пользователей</em></p>
61
<p><em>Следим за активностью пользователей</em></p>
61
<p>В разделе Explore можно найти интересный контент. Например, в Popular выводятся популярные публикации, в Following можно посмотреть публикации пользователей, на которых вы подписаны. В Topics можно выбрать интересные вам темы.</p>
62
<p>В разделе Explore можно найти интересный контент. Например, в Popular выводятся популярные публикации, в Following можно посмотреть публикации пользователей, на которых вы подписаны. В Topics можно выбрать интересные вам темы.</p>
62
<p><em>Ищем контент по интересам</em></p>
63
<p><em>Ищем контент по интересам</em></p>
63
<p>В разделе Grow можно найти работу или сотрудников. Для этого выберите пункт Job. Список вакансий открыт для всех пользователей. Объявление о поиске сотрудников - платная функция, стоимость составляет 299 долларов за 60 дней.</p>
64
<p>В разделе Grow можно найти работу или сотрудников. Для этого выберите пункт Job. Список вакансий открыт для всех пользователей. Объявление о поиске сотрудников - платная функция, стоимость составляет 299 долларов за 60 дней.</p>
64
<p><em>Ищем работу и работников на CodePen</em></p>
65
<p><em>Ищем работу и работников на CodePen</em></p>
65
<p>В разделе Grow - Challenges каждую неделю появляются новые челленджи для фронтендеров. Лучшие решения администрация CodePen закрепляет на главной странице. Это позволяет авторам заявить о себе и увеличить количество подписчиков.</p>
66
<p>В разделе Grow - Challenges каждую неделю появляются новые челленджи для фронтендеров. Лучшие решения администрация CodePen закрепляет на главной странице. Это позволяет авторам заявить о себе и увеличить количество подписчиков.</p>
66
<h2>CodePen: больше чем песочница кода</h2>
67
<h2>CodePen: больше чем песочница кода</h2>
67
<p>CodePen действительно позволяет быстро написать и протестировать код. Онлайн-редактор поддерживает подключение библиотек, фреймворков и препроцессоров, имеет гибкие настройки.</p>
68
<p>CodePen действительно позволяет быстро написать и протестировать код. Онлайн-редактор поддерживает подключение библиотек, фреймворков и препроцессоров, имеет гибкие настройки.</p>
68
<p>В CodePen есть режимы для преподавателей и лекторов. Их удобно использовать для демонстрации кода студентам и участникам конференций. Отдельного внимания заслуживают социальные функции CodePen. Здесь можно искать интересный контент, фолловить интересных людей. Есть раздел для поиска работы и сотрудников, а также конкурсы на лучшие решения тематических испытаний.</p>
69
<p>В CodePen есть режимы для преподавателей и лекторов. Их удобно использовать для демонстрации кода студентам и участникам конференций. Отдельного внимания заслуживают социальные функции CodePen. Здесь можно искать интересный контент, фолловить интересных людей. Есть раздел для поиска работы и сотрудников, а также конкурсы на лучшие решения тематических испытаний.</p>