Одна из многих неприятных вещей в веб-разработке - отсутствие простого способа поделиться своими проектами с другими. Во многих случаях вам придется разместить свой проект на веб-сервере или отправить все соответствующие файлы кому-то, кто хочет посмотреть, что вы создали. Но благодаря аккуратному онлайн-инструменту под названием 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? Вы использовали подобный инструмент? Дайте нам знать в комментариях ниже!
