Однією з багатьох неприємних моментів щодо веб-розробки є непростий спосіб ділитися своїми проектами з іншими. У багатьох випадках вам доведеться розмістити свій проект на веб-сервері або надіслати всі відповідні файли тому, хто хоче побачити, що ви створили. Але завдяки акуратному інтернет-інструменту під назвою CodePen, вам більше нічого про це не потрібно турбуватися.
CodePen.io
CodePen - це безкоштовний інструмент, за допомогою якого ви зможете розміщувати свої проекти в Інтернеті без необхідності платити ні копійки. Для початку зайдіть на CodePen.io та створіть безкоштовний акаунт.
Після цього ви можете створити «Ручку», натиснувши кнопку «Нова ручка» у верхньому правому куті екрана.
Після цього ви зможете додати будь-який HTML, CSS та JavaScript до відповідних полів. Як тільки ви почнете додавати якийсь код, ви побачите попередній перегляд того, що ви створюєте. Ви можете назвати свою першу ручку у верхньому лівому куті. Після натискання першого "Зберегти" ви зможете просто поділитися URL-адресою сторінки з друзями, родиною та колегами, щоб вони могли бачити, над чим ви працюєте.
Ось так виглядатиме Ваша ручка з кодом у ній (люб’язно наданий проект Free Code Camp під назвою Tribute Page):
Створюючи власну ручку, перед початком роботи вам потрібно буде пройти параметри. Натискаючи кнопку "Нова ручка", ви побачите готовий шаблон ручки, щоб почати вводити якийсь код. У правому верхньому куті буде кнопка «Налаштування». Натисніть на це (ви повинні побачити екран нижче).
Тут ви зможете перейти через вкладки HTML, CSS та JavaScript, щоб додати певну інформацію. На вкладці HTML ви зможете додати метаінформацію про речі, які повинні входити у
вкладка тощо. У розділі CSS ви зможете додати CSS-препроцесори, такі як LESS та Sass. Мало того, але ви можете додати до таких зовнішніх CSS, як Bootstrap та Foundation. На вкладці JavaScript ви можете додати до препроцесора JavaScript, наприклад Babel або CoffeeScript. Крім того, ви можете додавати у зовнішні рамки JavaScript, такі як Angular, React, Lodash, D3 тощо.
Нарешті, CodePen дозволить вам змінити "Вид", який ви дивитесь. Перегляд за замовчуванням - це Редактор, що дозволяє ввести код і отримати невеликий попередній перегляд у консолі нижче. Але є й інші варіанти, особливо зручним є перегляд "Повна сторінка", де ви зможете побачити проект так, як ніби він жив на веб-сайті. Існує кілька інших поглядів, на які можна перейти, з чим варто пограти!
CodePen дійсно є акуратним інструментом, і ми лише торкнулися його корисності. Варто зайти на CodePen.io і використовувати його для роботи над кількома проектами, а потім, якщо вам здається, поділіться з друзями або колегами.
Що ви думаєте про CodePen? Ви використовували подібний інструмент? Повідомте нас у розділі коментарів нижче!
