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

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

Що ж, почнемо!

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

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

Керівництво по використанню CodePen: допоможіть нам, і ми допоможемо вам

Потім ви побачите порожній Pen, який можна набрати свій код. Ви можете повністю скопіювати і вставити в Pen вміст HTML/CSS/Javascript, або, що ще краще, помістити саме той проблемний код, який викликає у вас труднощі. Наприклад, скопіювати тільки реалізацію навігаційних елементів і код, що відноситься до неї, тобто тільки те, з чим у вас виникають проблеми.

**Переконайтеся, що ви вірно проставили посилання на всі ресурси, такі як зображення — вони повинні бути абсолютними, тобто містити повну посилання на ресурс, а не відносними.**

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

Керівництво по використанню CodePen: допоможіть нам, і ми допоможемо вам

Для секції CSS, ви можете використовувати, наприклад, зв’язку Sass/Compass (це зв’язка CSS-препроцесора і компілятора для перекладу .sass файлів у звичайні .css), щоб отримати в своє розпорядження додаткові інструменти.

Керівництво по використанню CodePen: допоможіть нам, і ми допоможемо вам

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

Керівництво по використанню CodePen: допоможіть нам, і ми допоможемо вам

Що стосується вікна JavaScript, то ви, швидше за все, будете використовувати зразок бібліотеки jQuery. Тому в налаштуваннях вікна JS вам треба вибрати відповідну бібліотеку в списку Library.

Керівництво по використанню CodePen: допоможіть нам, і ми допоможемо вам

Коли ваш Pen готовий для публікації, натисніть кнопку «Save» в лівому верхньому куті сторінки, щоб зберегти його.

Потім натисніть кнопку «Share» щоб поділитися своїм кодом з іншими. Якщо у вас PRO-аккаунт, то ви маєте більш гнучкі можливості. Якщо ви анонімний користувач, то у вас є можливість використовувати функцію «Full Page» – тобто, навіть не реєструючись, ви можете поділитися з іншими своїм Pen’ом, замість простої передачі джерел.

Керівництво по використанню CodePen: допоможіть нам, і ми допоможемо вам

Переклад статті «A Guide To Using CodePen: Help Us Help You» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here