CodePen — популярный онлайн-редактор кода, которым пользуется множество разработчиков по всему миру. Он предназначен для работы над фронтенд-проектами на HTML, CSS и JavaScript. Если вам нужно создать проект с бэкендом, лучше выбрать другой редактор.
Как зарегистрироваться и получить бесплатный аккаунт
Когда вы заходите на сайт CodePen, вам предлагается залогиниться при помощи аккаунта в Twitter, Facebook или GitHub. Также можно зарегистрироваться на сайте, используя адрес электронной почты, логин и пароль.
После создания аккаунта вы получите письмо от CodePen. Откройте его и верифицируйте свой email.
Разница между пенами и проектами
После верификации email-адреса, вы попадете прямо в Pen-редактор. Если редактор не покажется, кликните на вкладку Pen в левой части страницы.
Pen-редактор делится на три раздела: HTML, CSS и JavaScript.
Редактор пенов не поддерживает множественные файлы, т. е. предполагается, что в вашем проекте будет не больше одного файла на каждом языке. Отсюда вывод: пены (Pens) годятся только для маленьких проектов. Если планируете написать больше 5000 строк кода, лучше создавать не пен, а проект.
Пенов можно создавать сколько угодно, даже с бесплатным аккаунтом.
Проекты
Если хотите создать проект, кликните на вкладку «Project» в левой части экрана.
В редакторе проектов можно работать с несколькими HTML, CSS и JavaScript файлами.
Имея бесплатный аккаунт, вы сможете создать только один проект, в котором будет максимум 10 файлов. Если вам нужно больше возможностей, придется заплатить за Pro-версию.
Базовые функции редактора пенов
Форматирование
Кликнув на стрелочку выпадающего меню в любом из трех редакторов, вы увидите опцию Format.
Это удобный инструмент, позволяющий следить за правильным форматированием кода и его читаемостью для других разработчиков.
Можно также заглянуть в раздел Behavior в Pen Settings (настройках пена) и выбрать опцию Format on Save (форматировать при сохранении).
Анализ
Открыв выпадающее меню в любом из трех редакторов, вы увидите опцию Analyze. Этот инструмент позволяет находить и исправлять ошибки в коде.
Опции просмотра
Кликнув на Change View, вы сможете настроить макет редактора или переключиться на другие варианты просмотра.
Использование консоли
В левом нижнем углу пена находится консоль. Это полезный инструмент отладки.
Добавление ссылок в раздел head (HTML)
При создании пенов вам не нужно включать в свой код DOCTYPE, html, head или body. Вся эта информация встроена в редактор.
Но если вам нужно добавить ссылки в head, например иконки Font Awesome или Google Fonts, вы можете это сделать во вкладке с настройками, в разделе head.
Добавление CSS-библиотек и фреймворков
В настройках пена есть возможность добавить CSS-библиотеки и фреймворки. Например, Bootstrap, Tailwind CSS и Bulma.
Добавление JavaScript-библиотек и фреймворков
В настройках пена, в разделе JavaScript можно добавить в пен популярные библиотеки и фреймворки, такие как React, Angular и Vue.
Шеринг пенов в соцсетях
Если захотите поделиться своим пеном в блогах или соцсетях, нажмите на кнопку Share в правом нижнем углу.
Экспорт пенов
Если хотите загрузить свою работу на компьютер, это можно сделать при помощи кнопки Export. Она находится там же, в правом нижнем углу.
В результате экспорта будет создана папка с вашими файлами.
Встраивание пенов в блоги и статьи
Если хотите показать пример кода в посте блога, можно встроить ваш пен прямо в код страницы. Для этого нажмите кнопку Embed в правом нижнем углу редактора.
Как сделать форк пена
Сделать форк — значит создать копию пена. При этом вы будете иметь доступ ко всему коду и сможете изменять его по своему усмотрению.
Прежде всего, найдите пен, форк которого хотите сделать. Затем кликните кнопку Fork в нижнем правом углу.
Сделав форк пена, вы создадите копию всего его кода в своем аккаунте. Нажмите кнопку сохранения. После этого можно будет начать изменять код.
Как добавлять в пен препроцессоры и пакеты
CodePen позволяет добавлять в пены HTML, CSS или JavaScript препроцессоры, а также NPM-пакеты.
В настройках пена, во вкладке HTML, можно выбрать из опций Haml, Markdown, Slim и Pug.
Во вкладке CSS можно выбрать из Less, SCSS, Sass, Stylus и PostCSS.
Что касается JavaScript, тут вы можете выбирать из Babel, TypeScript, CoffeeScript и LiveScript.
Также можно добавлять в пены NPM-пакеты, такие как react-bootstrap.
Базовые функции редактора проектов
Если вы работаете над проектом, где используется много файлов (больше трех), следует создать проект, а не пен, и, соответственно, выбрать редактор проекта. Бесплатный аккаунт допускает создание только одного проекта.
Шаблоны
В редакторе есть несколько шаблонов для проектов на HTML и CSS, а также для React-проектов.
Если перейдете на платную версию, получите доступ к шаблонам на Tailwind CSS и Bootstrap.
Файлы и директории
Чтобы добавить новый файл или папку, кликните соответствующую кнопку в левом нижнем углу.
Вы также можете загрузить файлы с компьютера, выбрав их в списке или используя функцию перетаскивания.
Имея бесплатный аккаунт, можно создать или загрузить до 10 файлов. Если вам нужно больше, придется перейти на платную версию.
Шеринг проектов
Если вы захотите поделиться своим завершенным проектом в соцсетях или на платформе для блогов, нажмите кнопку Share в правом нижнем углу редактора.
Экспорт проектов
Файлы проекта можно экспортировать — загрузить на свой компьютер — при помощи кнопки Export в том же правом нижнем углу.
CodePen challenges
Если хотите попрактиковаться в программировании, можете принять участие в ежемесячных челленджах. Каждый месяц имеет свою тему. Принимая участие, вы будете еженедельно получать новую задачу по теме месяца.
У вас также останется доступ к задачам прошлых месяцев.
Надеюсь, эта статья вам понравилась. Желаю удачи в вашем путешествии по миру фронтенда!
Перевод статьи «How to Use CodePen – A Beginner’s Guide».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]