Як користуватися CodePen: вичерпний посібник для початківців

CodePen – це онлайн-редактор для front-end розробників. Це пісочниця, де можна працювати з HTML, CSS та JavaScript. Прочитайте детальну інструкцію до цього інструменту.

Хто і коли може використовувати CodePen

Інструмент можна використовувати для швидкого написання та оцінки коду, показу програми іншим людям та практики. CodePen буде корисний всім розробникам, які мають справу з фронтендом.

Пісочниця часто використовується викладачами програмування та верстки для демонстрації освітнього коду. CodePen використовується авторами статей про розробку, коли їм потрібно показати читачам приклад коду.

Як користуватися 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 щотижня з'являються нові челенджі для front-end розробників. Адміністрація CodePen закріплює найкращі рішення на головній сторінці. Це дозволяє творцям зробити собі ім'я та збільшити кількість підписників.

CodePen: Більше, ніж пісочниця з кодом

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

У CodePen є режими для викладачів і лекторів. Вони корисні для демонстрації коду студентам та учасникам конференції. На окрему увагу заслуговують соціальні функції CodePen. Тут можна шукати цікавий контент і стежити за цікавими людьми. Є розділ для пошуку роботи та співробітників, а також конкурси на кращі рішення тематичних тестів.