Как сделать форк пена в codepen
Обновлено: 04.07.2024
как взять код из codepen и использовать его локально в моем текстовом редакторе?
Я пытаюсь играть с этим созданием локально, но когда я открываю его в chrome, я получаю пустую белую страницу без ничего.
Я скопировал, вставил и сохранил css и js в разные файлы и сохранил их, а затем попытался связать их в html-файл, как я показал выше.
Я также включил библиотеку jquery, поскольку я понимаю, что многие создания codepen используют ее.
единственная ошибка консоли, которую я получаю, это
который ссылается на мой файл js, строка 4
Извините, если это глупо, но я новичок в этом. Я уверен, что это элементарно. Любая помощь будет здорово!
Джо фиттер прав, но я думаю, что лучше экспорт пера (использовать экспорт для экспорта.опция zip для использования вашего пера локально). Это даст вам рабочую версию вашего пера без необходимости копировать и вставлять код CSS, JavaScript и HTML и без необходимости вносить в него изменения для его работы.
Кажется, ваш javascript работает до того, как HTML закончит загрузку. Если вы можете использовать jQuery, поместите js внутри этого;
Переориентация разных компьютерных программ на приложения, размещенные в сети, продолжается. Не обошла стороной эта тенденция и разные среды программирования, что, в принципе, логично. Где как не в интернете лучше всего хранить и редактировать код, особенно если это касается веб-разработки. Сегодня предлагаю почитать о полезном сервисе под названием CodePen (Кодпен) — одном из лучших визуальных онлайн редакторов HTML, CSS, JavaScript кода.
Инструмент этот весьма интересный и удобный, пару раз использовал его в блогах для демонстрации верстки: в статье про создание фиксированного меню и в заметке о горизонтальном меню. Ниже детально расскажу про особенности и преимущества Codepen, а также рассмотрю применение данного онлайн редактор кода на практике.
Основные фишки и функции CodePen
Сразу следует оговориться, что рассматриваемый сервис не охватывает все разнообразие языков программирования. Вероятно, это достаточно труднореализуемая задача для онлайн решений, лучше в таких случаях юзать специализированный софт по типу PHP IDE Codelobster, Phpstorm и др. Codepen ориентирован исключительно на Web и поддерживает язык разметки HTML, каскадные таблицы стилей CSS + JavaScript, что наиболее часто применяются в создании сайтов. Этих трех направлений вполне достаточно, чтобы обеспечить востребованность сервиса в профессиональной среде.
В принципе, возможности CodePen отчасти похожи на различные редакторы кода, которые многие используют в своей работе: начиная от Notepad++, Sublime Text и заканчивая чем-то посложнее вроде Webstorm. Конечно, я говорю не о полной копии всех фишек софта, а лишь о базовых функциях написания кода. Однако вместе с тем данный CSS / HTML онлайн редактор обладает уникальными особенностями отличающими его от, названных выше, конкурентов. Я бы выделил 4 ключевых аспекта.
1. Всеобщая доступность
Публикация разработанного кода или его фрагментов в режиме онлайн позволяет делиться ими с другими пользователями. Просто отправьте ссылку на ту или иную страницу для просмотра. Также можете встраивать проекты, созданные в сервисе, на любой сайт в качестве примера.
Плюс вы всегда будете иметь доступ к своей верстке или сниппетам из любого места, даже если личный компьютер недоступен по каким-либо причинам. Вся необходимая информация хранится в сети.
2. Легкость работы и онлайн просмотр кода
Наличие виртуального сервера в Кодпен дает возможность просматривать код совместно с результатом его выполнения. Вам нет смысла устанавливать и настраивать сервер и дополнительные приложения на локальном компьютере. Не смотря на то, что наборы XAMPP и Денвер достаточно просты в использовании, вариант с визуальным редактором кода онлайн вообще не требует никаких усилий. Такой подход весьма удобен для изучения верстки с нуля.
3. Профессиональные инструменты
Создатели CodePen стараются обеспечить вам как можно лучший опыт разработки. Поэтому в настройках сервиса есть парочка интересных вещей, которые многие спецы оценят:
- Для css редактор позволяет использовать библиотеки Normalize.css или Reset.css. Также можно подключить -prefix-free / Autoprefixer.
- Имеется интеграция с CSSLint, который проверяет правильность написанного CSS кода.
- Поддержка Emmet и Vim Binding с разными горячими клавишами и фишками для ускорения кодинга.
- Данный визуальный онлайн редактор HTML CSS и JavaScript корректно рабоает с препроцессорами: HAML, Markdown, Slim для HTML, в стилях — Sass и SCSS, плюс CoffeeScript в JS.
И все это без каких-либо установок дополнительного софта на компьютере!
4. Имеющееся сообщество
Ресурс также обладает социальными функциями: подписки, лайки, комментарии. Есть даже опция создания блога для тематических заметок. Помечайте свои проекты тегами дабы людям было проще искать ваши сниппеты. Наличие примеров разных задач и решений позволяет быть осведомленным в основных актуальных направлениях веб-разработки. Понравившиеся реализации можно сохранять. Просматривайте работы других программистов для вдохновения или самообучения.
Вообще данный перечень отнюдь не претендует на хрестоматийную полноту, на сайте есть еще целый ряд других фишек. Однако частично, думаю, мне удалось показать основные преимущества онлайн редактора CSS и HTML кода перед своими локальными конкурентами.
Как пользоваться Codepen
Первые три окна рабочего пространства служат для написания кода на HTML, CSS и JavaScript. Ниже в редакторе увидите соответствующий результат реализации проекта. Конфигурацию отображения среды можно изменять по своему усмотрению, например минимизировать окна и т.п.
В настройках (пиктограмма шестеренки) есть выбор нужного препроцессора для HTML, CSS и JavaScript, о которых мы говорили выше. Для JS доступна установка подключаемых библиотек, JQuery, например. Индивидуальная настройка каждого проекта в онлайн редакторе HTML кода — весьма полезный инструмент.
Также при кодинге нужно не забывать, что все ссылки и url-адреса в CodePen должны быть абсолютными (не относительными), т. е. указывать на полный адрес ресурса.
Для публикации разработанного примера найдете в правом нижнему углу страницы 3 кнопки:
- Share — шеринг в социальных сетях (FB, twitter, Google+).
- Export — сохранение в Zip архиве или запись на GitHub.
- Embed — встраивание на страницу сайта.
Во всплывающем окне появится парочка настроек для встраивания кода, и вы сможете выбрать формат экспорта: HTML, iframe + даже специальные шорткоды для WordPress.
Кроме того, в меню и на главной странице Кодпен найдете такие фишки:
- Pens — примеры кода с сортировкой по новым/популярным и т.п.;
- Просмотр полноценных проектов (а не простых сниппетов);
- Post — заметки из блогов и полезные публикации.
- Collections — подборки нескольких Pens по определенным темам.
- Еще есть вакансии, блог разработчиков и список полезных ссылок.
Итого. Вообще чтобы понять всю полноту представляемых ресурсом CodePen опций, советую зарегистрироваться там и поэкспериментировать. Такой визуальный онлайн редактор HTML CSS и JavaScript кода может пригодиться каждому веб-разработчику, вне зависимости от уровня квалификации.
Также следует заметить, что в CodePen имеются платные функции, которые могут значительно расширить ваши возможности: работа в команде, режим презентации, синхронизация, приватность и некоторые другие плюшки. Если честно, не знаю есть ли какие-то ограничения в сервисе на количество создаваемых проектов, я пока их не заметил. В любом случае для тестирования верстки, просмотра работ других программистов хватает и обычного бесплатного варианта.
А вы пробовали данный сервис в своей работе? Как впечатления? Или используете альтернативные решения?
Верстаем сайт с нуля запись закреплена
Напоминаю, что наш интенсив стартует уже в понедельник.
Мария Шишкина
Процедура выбора шрифтов для использования в создаваемых проектах описана в руководстве по веб-шрифтам.
Чтобы найти код встраивания для своего проекта, посетите страницу веб-проектов и найдите название своего проекта. Скопируйте и вставьте код встраивания CSS по умолчанию для этого проекта в одно из этих мест.
Теперь вы можете использовать названия семейств шрифтов в редакторе CSS Pen, и шрифты сразу будут видны в интерактивном просмотре.
Название семейства шрифтов, которое будет использоваться в CSS, также указано в веб-проекте; узнать больше об использовании шрифтов в CSS.
Общедоступные перья можно дублировать, это позволит другим пользователям дорабатывать ваш код. Веб-шрифты также будут работать в дублированных перьях.
Если вы удалите проект, используемый в CodePen, или отмените свою подписку, применение шрифтов в любых перьях, использующих соответствующий код внедрения, будет недоступным. Это распространяется как на ваше оригинальное перо, так и на любые перья, созданные путем его дублирования. Вместо пользовательских веб-шрифтов будут применяться резервные шрифты, указанные в CSS.
Читайте также: