Это онлайн-сервис, с его помощью можно сразу в браузере писать HTML, CSS и JavaScript код, подключать разные библиотеки и сразу видеть результат. Ещё здесь можно найти готовый код различных веб-компонентов, посмотреть, как они сделаны другими веб-разработчиками. По совместительству это что-то вроде социальной сети для фронтендеров, на которой можно обмениваться своими работами и следить за интересными людьми.
HTML Academy
Как можно использовать:
— чтобы быстро написать и оценить код,
— показать приложение другим людям,
— потренироваться.
Что ещё:
Здесь собрана большая коллекция реализаций от разных разработчиков. Можно найти готовые реализации анимаций, элементов, взаимодействий и использовать в своих проектах.
Сколько это стоит:
Есть несколько тарифов, в том числе бесплатный. В зависимости от выбранного пакета открывается доступ к разным плюшкам. Для новичков бесплатного тарифа вполне достаточно.
Подводим итог:
Codepen — полезный сервис для фронтенд-разработчиков. Здесь можно искать контент, фолловить интересных людей. Есть раздел для поиска работы и сотрудников, а также конкурсы на лучшие решения тематических испытаний.
Learn to use CodePen from a co-founder of CodePen
В следующем посте можем собрать подборку интересных реализаций с Codepen. Если интересно, ставь + в комментариях.
Источник: dzen.ru
Как пользоваться редактором кода Codepen
В этой статье я расскажу вам, как эффективно пользоваться редактором кода Codepen, фронтенд-разработчику. Codepen – это онлайн сервис, где можно прямо в браузере писать HTML, CSS и JavaScript код, а также подключать разные библиотеки, например Bootstrap, jQuery и сразу видеть результат. Кроме того, там можно найти уже готовый код различных веб-компонентов, посмотреть, как они реализованы другими веб-разработчиками.
Почему я рекомендую Codepen?
Аналогов редактору кода Codepen в сети интернет предостаточно, тот же самый jsfiddle. Но я использую именно Codepen, потому-что сервис быстро развивается, имеет элементы социальной сети, большую коллекцию готовых решений и вообще просто удобен.
Codepen – копилка наработок
Во вкладке Pen, вы можете увидеть готовые примеры, как ваши коллеги, реализуют те или иные задачи по веб-разработке и поучиться у них. Так же очень удобно воспользоваться поиском, если вас интересует что-то конкретно. Например вы хотите посмотреть, как сделать «гамбургер меню», так и пишите «burger menu» в поиске, на английском найдется гораздо больше пенов.
Понравившийся вам пен можно для начала добавить в свою коллекцию – Add collection. В дальнейшем вы можете скачать zip-архивы с нужными пенами, нажав на Export.zip, в правом нижнем углу, в архиве находятся HTML, CSS и JS файлы, немного изменив стили под свой проект, можно избавить себя от рутины «написания однотипного кода» стандартных веб-компонентов.
Using CodePen For Inspiration & Learning
Кроме того, открыв чужой пен, можно сделать ему Fork, что значит ответвление, по сути вы этот пен переносите на свою доску и можете делать с ним, что хотите – оставить как есть или внести изменения в код.
Уникальность статей и Codepen
Как можно ещё использовать готовые пены? Например, вы пишите статьи на тему веб-разработки, перейдя на вкладку Embed This Pen, можно скопировать и вставить нужный пен в вашу статью, как HTML-код или iframe, а так же шорткод для WordPress. Если пенов будет несколько на странице, то можно поставить галочку – «Use click to load» и тогда пен будет загружаться по клику, что улучшит скорость загрузки страницы.
Я знаю, по личному опыту, что иной раз добиться уникальности, написанной мною статьи, практически невозможно, если весь код из примеров, как есть, вставлять в тело статьи. Разумеется, что перед тем, как опубликовать статью, я проверяю её на уникальность на специальных сервисах. Если статья не содержит фрагментов демонстрации кода, то все OK, уникальность 100%, с кодом уникальность теряется. Всё дело в том, что HTML, CSS и JS код сам по себе не уникален и уже использован в десятках других статей.
Проблема решается таким образом. Я пишу весь код примера в Codepen и через embed вставляю ссылку на пен в свою статью. Таким образом, мои пены попадают в общую копилку знаний сервиса, их могут использовать другие разработчики по своему усмотрению, мне не жалко.
Обзор вкладок Codepen
Вкладки Collection и Pattern – содержат пены, сгруппированные по тематикам. Например вы можете найти массу примеров табов, кнопок, меню и много других элементов.
Вкладка Post содержит статьи на актуальные темы, связанные с веб-разработкой.
Вкладка Assets просто великолепна, оттуда подгружается палитра с выбором цвета, картинки, узоры и иконки в формате SVG, шрифты. Копируете нужный элемент в буфер памяти и вставляете в виде ссылки в код вашего пена. В платном аккаунте все это добро можно скачать прямо в облако своего аккаунта, такой способ конечно надёжнее, чем обычный хотлинк на сторонний ресурс.
Создание своих пенов на Codepen
Для сохранения написанного вами пена необходимо создать аккаунт. Базовый функционал Codepen бесплатен. На бесплатном аккаунте можно создать только New Pen и New Post.
Прежде чем, создавать новый пен, давайте перейдем на вкладку настройки – Settings. В настройках во вкладке Behavior, есть опция авто-сохранения, галочку не убираем. Но есть и другая опция автообновления, то есть все ваши изменения в коде будут автоматически обновляться в браузере. При вводе кода скрипт автоматически перезапускается и иногда это может мешать, тогда галочку можно убрать с опции авто-обновления и перезапускать обновление вручную через кнопку Run.
Вкладка HTML
В один клик можно вставить мета-тег viewport для корректного отображения на мобильных устройствах. Pen Title, Description, Tag необходимо заполнить, чтобы вашу работу могли найти по ключевым словам другие разработчики.
Вкладки CSS / JS
Можно быстро подключить стилевые и JS файлы самых популярных фреймворков и библиотек.
Возможности платного аккаунта Codepen
Есть возможность создавать приватные, закрытые от всех, кому их не нужно видеть пены. Для преподавателей доступен режим – Professor Mode. Студенты могут смотреть уроки в реальном времени и общаться в чате. PRO-аккаунт позволяет создавать проекты — Projects с файлами и папками и загружать в них свои файлы, изображения и шрифты, проводить кроссбраузерное тестирование.
Для начинающих верстальщиков и фронтендеров, бесплатного функционала вполне достаточно. Как видите, пользоваться сервисом Codepen, легко и приятно.
Создано 03.09.2018 10:45:53
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Источник: myrusakov.ru
Как пользоваться CodePen: руководство для начинающих
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
Если хотите попрактиковаться в программировании, можете принять участие в ежемесячных челленджах. Каждый месяц имеет свою тему. Принимая участие, вы будете еженедельно получать новую задачу по теме месяца.
У вас также останется доступ к задачам прошлых месяцев.
Надеюсь, эта статья вам понравилась. Желаю удачи в вашем путешествии по миру фронтенда!
Источник: techrocks.ru