Содержание

Платформа Codepen | WebReference

Codepen — это популярная онлайновая платформа для редактирования и хранения кода на HTML, CSS и JavaScript с просмотром готового результата в браузере. Полученным кодом можно делиться и видоизменять его при необходимости. Окно браузера делится на несколько рабочих областей, в которых отображается результат, а также код на HTML и CSS (рис. 1).

Рис. 1. Вид Codepen

Codepen не требует регистрации, но это рекомендуется сделать, если вам часто приходится пользоваться данной платформой. Это добавляет возможность управлять набором разного кода и возвращаться к его редактированию. Начать с чистого листа можно по этой ссылке:

http://codepen.io/pen

Или перейти к готовому коду по заранее известной ссылке, вроде этой:

В соответствующей рабочей области пишется код HTML и CSS, при этом служебные элементы вроде <head>, <body> и тому подобное добавлять не нужно. Сам результат написанного кода выводится в отдельной рабочей области, она обновляется автоматически при наборе кода.

Поскольку нас интересует не сам CSS, то для начала надо щёлкнуть по шестерёнке возле заголовка и в открывшемся списке задать Less. Тип выбранного препроцессора подсвечивается зелёным цветом и отображается в заголовке рабочей области (рис. 2).

Рис. 2. Выбор Less

Кроме того, там же можно указать следующие настройки.

  • Normalize — стилевая библиотека для приведения некоторых стилевых свойств к единому значению и обнуления других свойств. Иногда бывает необходима для получения одинакового результата в разных браузерах с учётом современных стандартов.
  • Reset — стилевая библиотека от Эрика Мейера, преследует ту же цель что и Normalize.
  • -prefix-free — небольшой скрипт, который автоматически добавляет необходимые вендорные префиксы (вроде -webkit и -moz) к стилевым свойствам.
  • Autoprefixer — альтернативный скрипт добавляющий префиксы к свойствам, это позволяет писать чистый современный код CSS не задумываясь о поддержке в браузерах.
  • External CSS File or Another Pen — подключение внешнего стилевого файла; актуально при использовании сторонних библиотек вроде Bootstrap.

Переключение между Less и готовым CSS делается при щелчке по иконке глаза, показанной на рис. 3. Итоговый CSS править нельзя, но допустимо выделить его и скопировать.

Рис. 3. Иконка для переключения вида

Кодом можно поделиться, предварительно сохранив его и скопировав адрес в браузере. Адрес всегда уникален и однозначно ведёт к нашему коду. Так что эту ссылку можно писать на форумах и в комментариях для демонстрации кода и результата. Кроме того в Codepen есть специальная кнопка Share, щёлчок по которой открывает специальное меню (рис. 4).

Рис. 4. Меню Share

Через Share можно поделиться кодом в социальных сетях, скачать полный архив и получить прямую ссылку на код HTML, CSS или Less.

Автор: Влад Мержевич

Последнее изменение: 13.09.2022

Среда веб-разработки для разработчиков и интерфейсных дизайнеров «Codepen» – Telegraph

Сайтодел

Это площадка, на которой вы можете создавать свои проекты и сниппеты (пены) на HTML, CSS, JavaScript и делиться ими с остальным сообществом. CodePen работает, как социальная сеть для разработчиков: вы можете подписываться на разработчиков и следить за их проектами, оценивать и комментировать их. Разработка своих проектов на этой площадке проста и очень удобна: вы сразу видите результат, написанного вами кода.

Из этого урока вы узнаете:

  • Как пользоваться CodePen
  • Как настроить CodePen под себя
  • Как форкнуть чужой пен в CodePen
  • Как создать проект в CodePen
1) Как пользоваться CodePen

Чтобы попробовать CodePen, достаточно перейти на их сайт и нажать кнопку «Start Coding».

Ссылка на CodePen: codepen.io
Нажмите кнопку «Start Coding»

При нажатии откроется вот такое окно:

Редактор для создания пенов

Здесь вы уже можете писать свой пен. Это может быть что угодно — сайт, анимация, игра, элемент интерфейса и т.д.

Напишем немного кода:

Простейший пен на CodePen

Как вы могли заметить, нам не нужно в верстке объявлять html, head, body. Это будет необходимо при создании своего проекта, но об этом позже. При разработке, вам не нужно запускать свой пен, при изменении кода он будет перезапускаться сам. Если вы хотите сохранить его или настроить рабочее окружение под себя, вам нужно будет зарегистрироваться. Есть возможность авторизации через Github. Для дальнейшей работы с CodePen будет необходима регистрация.

После регистрации нас встретит такой интерфейс. Чтобы создать новый пен, необходимо нажать на «Pen».

Интерфейс CodePen после регистрации
2) Как настроить CodePen под себя

Чтобы настроить пен под себя, необходимо нажать кнопку «Settings» в окне редактирования пена.

Кнопка настройки пена

Здесь в настройках HTML, CSS, JavaScript можно выбрать желаемый препроцессор, также можно подключить фреймворки и библиотеки через CDN.

Настройки HTML, CSS, JavaScript для своего пена.

Вам может быть неудобно, что при любом изменении кода, весь пен перезагружается. Для того, чтобы это исправить, необходимо в разделе «Behavior» отключить пункт «Auto-Updating Preview».

Если вы отключили этот пункт, для обновления проекта вам нужно будет нажимать на кнопку «Run».

При отключенном пункте «Auto-Updating Preview» появится кнопка «Run»

В разделе «Pen Details» можно указать имя пена, его описание и теги, по которым его можно будет найти в поиске.

Раздел настроек «Pen Details»

В разделе «Editor» можно настроить табуляцию.

Настройка табуляции

Если вы кликните по пункту «Visit your global Editor Settings», то попадете в глобальные настройки. Там вы сможете изменить тему, шрифт, отключить/включить поддержку Emmet или задать новые сниппеты для Emmet.

Глобальные настройки редактора кода

Также в редакторе вы можете заметить кнопку «Change View». При клике вы получаете такое выпадающее меню:

Режимы «Change view»

По умолчанию включен «Editor View». Это расположение окон вашего редактора. Также доступны: «Details View», «Full Page View» и «Debug mode». Советуем попробовать эти режимы самостоятельно. Есть и расширенные функции, доступные только в платной Pro-версии.

Есть ещё одна особенность Pro-версии: только в такой версии доступна загрузка изображений и других медиафайлов. В бесплатной версии можно использовать только прямые ссылки на медиафайлы для их использования в пене или проекте.

3) Как форкнуть чужой пен на CodePen

В CodePen есть возможность редактировать и дорабатывать чужие пены. Перейдём на вкладку «Trending» и выберем любой пен.

Откроем его и нажмём кнопку «Fork» справа снизу.

Теперь этот проект был полностью скопирован к нам в пены, и мы можем его редактировать и дорабатывать.

4) Как создать проект в CodePen

Чтобы создать проект в CodePen достаточно кликнуть по кнопке «Project».

В бесплатной версии возможно создать только 1 проект. Чтобы создавать неограниченное количество проектов, нужно перейти на Pro-версию.

Так выглядит созданный проект. Слева снизу, с помощью кнопок «New File» и «New Directory» можно создавать структуру проекта.

Проект в CodePen

Надеемся, что вам было интересно и вы узнали что-то новое из этого урока. Создавайте, развивайтесь и следите за выходом новых уроков.

До скорой встречи!

Ссылка на канал: https://t.me/sitodel

Что такое CodePen?

Перейти к основному содержанию

Джейми Гросс

Джейми Гросс

Технический директор Orange Bees — разработчик Azure, сертифицированный администратор — онлайн-сертификат специализации HBS в области стратегии

Опубликовано 11 июля 2016 г.

+ Подписаться

Каждому фронтенд-разработчику необходимо протестировать небольшой фрагмент кода, а создание новой ветки git слишком утомительно, а попытка изменить производственный код слишком рискованна. Так что ты можешь сделать?

CodePen – это онлайн-редактор кода, в котором разработчики могут создавать фрагменты кода с творческим названием «ручки» и тестировать их. CodePen поддерживает множество различных языков, помимо типичных HTML, CSS и JavaScript. Внутри настроек исходный компилятор может быть изменен для обработки множества разных языков:

  • Haml или Jade для разметки HTML
  • SASS или LESS для стилистического редактирования
  • CoffeeScript, TypeScript и любая другая библиотека, на которую вы можете предоставить внешнюю ссылку для

Это обеспечивает очень быстрый доступ к редактированию, чаще всего, небольших фрагментов кода и их тестированию в Интернете. Итак, вы создали красивую анимацию для демонстрации своих талантов в CSS и хотите добавить ее в свое портфолио. Как ты делаешь это? Вы можете встроить перо, используя их инструмент для встраивания, который имеет опции для iframe, HTML и WordPress. К сожалению, LinkedIn не позволяет встраивать iframe, поэтому вот ссылка на пример.

Затем вы можете отправить ссылку на ручку другу или коллеге, чтобы они тоже поработали над ней. Есть много других вариантов за ежемесячную плату, чтобы улучшить сотрудничество между коллегами. Другие функции, которые делают CodePen великолепным:

  • Пользовательский интерфейс
  • Вилочные ручки (аналог Git)
  • Сохраняйте ручки в профиль и получайте доступ где угодно
  • Поделиться в социальных сетях

Если вы разработчик интерфейса, я настоятельно рекомендую проверить CodePen. Есть много других подобных ресурсов, но CodePen оказался для меня лучшим активом.

  • «Развитие» (нас)

    3 марта 2017 г.

  • Что такое ионический?

    4 августа 2016 г.

  • Изучайте HTML и CSS в начале своей карьеры

    1 июля 2016 г.

  • Firebase, BaaS

    29 июня 2016 г.

  • Что такое StackOverflow?

    28 июня 2016 г.

  • Angular 2 — изучите его

    27 июня 2016 г.

Другие также смотрели

Исследуйте темы

Изучайте HTML с помощью Codepen: простая веб-страница

/ Блог, Кодирование, Образование, Программный инструмент, Разработка веб-сайтов / Автор Мистер Фред

Вы хотели узнать код веб-страниц? Codepen — отличный инструмент для изучения HTML, CSS и Javascript, которые сегодня являются основой большинства веб-страниц в Интернете. Позвольте мне представить вам Codepen.io и дать вам представление о том, что вы можете сделать с ним, чтобы научиться создавать веб-страницы.

В этом примере будут затронуты основы HTML. Следите за постом для изучения CSS и Javascript.

Что такое Codepen.io?

Веб-сайт Codepen.io описывает Codepen как «социальную среду разработки». Это веб-сайт, который позволяет вам вводить код (например, материал веб-сайта) и смотреть, как он выглядит на «внешнем интерфейсе» по мере его разработки. Как правило, код, который мы создаем, который пользователь видит или с которым взаимодействует, называется «внешним интерфейсом». Это отличный способ учиться и экспериментировать, создавая свой интерфейс.

Это «социальный опыт», потому что вы можете создать свой код или изучить чужой, а затем изменить его. Эти модификации известны как FORKS. Исходный код останется, но теперь у вас есть собственная копия.

Интерфейс прост в использовании и отлично подходит для образовательных учреждений. Когда вы посетите веб-сайт, вы увидите, что он предлагает различные тарифные планы. Будь то удаленное обучение или очное обучение, Codepen — отличная альтернатива инструментам, которые вам нужно загружать, устанавливать и управлять ими. Это может быть затруднительно в BYOD (Bring Your Own Device) или в школе, где установка программного обеспечения может быть запрещена без предварительного одобрения ИТ-администрации.

 

ОТЛИЧНЫЙ способ учиться!! Вы видите, что вводите

Когда вы вводите свой код в окно CodePen.io, вы видите свои результаты. Это ВЕЛИКОЛЕПНЫЙ способ учиться!!

Как HTML, CSS, Javascript объединяются….

HTML (язык гипертекстовой разметки) развился из другого языка, известного как SGML или стандартный обобщенный язык разметки. Большая заслуга принадлежит Тиму Бернерсу Ли, инженеру и компьютерщику. Ему приписывают создание HTTP (протокола) и подключение к компьютерному серверу. Будучи настоящим технологом, он использовал эту технику, чтобы продемонстрировать другим ученым, как она работает. Многие веб-сайты были созданы на заре Интернета с использованием только простого HTML.

HTML позволяет вам представить свой контент.

CSS (каскадные таблицы стилей) позволяет задать стиль отображения содержимого. Это включает в себя добавление цветов, различных типов шрифтов и управление тем, где контент отображается на вашей странице.

Идея разделения презентации и контента существует уже давно.

Javascript , также известный как JS , представляет собой язык сценариев, который позволяет программировать веб-страницу для управления ее поведением. Это дает вам возможность сделать вашу страницу интерактивной. Я не буду вдаваться в подробности о Javascript в этом посте, но он стал очень популярным для изучения и хорошо работает вместе с HTML и CSS.

HTML, CSS и Javascript, как и многие технологии, продолжают развиваться с течением времени, и различные версии утверждаются единственным органом по стандартизации, который имеет некоторое влияние на развитие Интернета, — Консорциумом World Wide Web. Эти версии содержат усовершенствования, которые приносят пользу как обычному веб-серферу, так и разработчику веб-страницы.

Моя цель не в том, чтобы сделать этот пост слишком сложным, но если вы впервые взглянете на HTML, CSS и Javascript, он покажется вам… слишком сложным.

Я хочу немного упростить его, чтобы вы могли начать свое обучение. Я буду использовать Codepen.io здесь, чтобы помочь вам почувствовать инструмент и языки.

Только простая HTML-страница?

Если вы хотите сосредоточиться только на простом HTML, вы можете это сделать. Я составил простые упражнения с использованием тегов Microsoft

, которые бывают двух видов: автономные и контейнерные. Кроме того, есть несколько основных правил при наборе HTML:

  1. Это НЕ чувствительно к регистру (это означает, что вы можете смешивать прописные и строчные буквы, но старайтесь избегать этого)
  2. Он должен быть правильно написан или напечатан, иначе вы не увидите ожидаемого результата при просмотре в браузере.
  3. Теги имеют атрибуты. Атрибуты — это детали. Например, у людей есть ВОЛОСЫ. ВОЛОСЫ имеют атрибут ЦВЕТ, а ЦВЕТ может быть БЛОНДИНГ. HAIR — это тег, COLOR — это атрибут, а BLONDE — это значение атрибута.

В примере вы увидите тег, который отображает изображение на вашей веб-странице, но имеет атрибут SRC. SRC означает источник. Поэтому он спрашивает, как называется файл изображения.

Вот несколько:

>

>

>

>

>

.

Пример веб-страницы CodePen.io — «Мне нравятся ракеты»

Лучший способ начать изучение HTML — разбить пример. Скриншот ниже взят с сайта CodePen.io.

После скриншотов вы можете напрямую редактировать «перо», которое я использовал для их создания. Затем вы можете начать изучать HTML самостоятельно. На следующих снимках экрана показано, как создать простую фразу, гиперссылку и отобразить изображение с помощью HTML.

При создании веб-страницы

  • Веб-страница запускается с тегом < html > . Он открывает и закрывает документ.
  • Далее следует тег, содержащий информацию заголовка, например тег < title >
  • То, что отображается в веб-браузере, помещается между тегами < body > .

ПРИМЕЧАНИЕ. При использовании CodePen.io вам не нужно включать их, поскольку инструмент предоставляет их вам.

Ниже представлен встроенный вид кода, который мы создали на CodePen.io. Вы можете ввести в правой части, чтобы увидеть ваши изменения.

ШАГ 1

Теперь давайте сделаем еще один шаг и превратим ракет в гиперссылку на www.nasa.gov

Шаг 2

Теперь давайте пойдем еще дальше и добавим изображение ракеты на нашу веб-страницу. Не стесняйтесь скачать это: (тот, который мы используем для GetMeCoding!). Далее вы сохраните файл. Обратите внимание на следующие скриншоты настроек, которые необходимо установить.

Шаг 3

Как продолжить обучение

Ниже находится «ручка», показывающая все шаги. Вы можете свободно редактировать это и продолжать изучать HTML.

См. перо HTML 101 — «Мне нравятся ракеты» мистера Фреда (@MrFred77) на КодПене.

Этот простой пример дает вам представление о том, что стоит за теми веб-сайтами, которые вы посещаете. В общем, посмотрите сами.

С помощью браузера откройте свой любимый веб-сайт и ЩЕЛКНИТЕ ПРАВОЙ мышью, чтобы вызвать меню, и выберите ПОСМОТРЕТЬ ИСТОЧНИК . Откроется окно, и вы сможете просмотреть исходный HTML-код для этой веб-страницы.

Да, это может показаться более сложным, чем этот пример, но если вы прокрутите его, вы начнете получать представление о различных частях. Помните, что всем нам нужно с чего-то начинать, и существуют инструменты, которые могут значительно упростить создание веб-сайтов.

Подробнее об этом позже. Прямо сейчас иди и попробуй CODEPEN.io!

Удачного кодирования!!!

 

 

Начните программировать уже сегодня за 5 минут!

Потратьте 5 минут и попробуйте БЕСПЛАТНОЕ программирование!

Позвольте мне помочь вам

Если вы учитель или кто-то, кто хочет помочь другим научиться программировать, позвольте мне помочь вам.

No related posts.