Среда веб-разработки для разработчиков и интерфейсных дизайнеров "Codepen"
Сайтодел
Это площадка, на которой вы можете создавать свои проекты и сниппеты (пены) на HTML, CSS, JavaScript и делиться ими с остальным сообществом. CodePen работает, как социальная сеть для разработчиков: вы можете подписываться на разработчиков и следить за их проектами, оценивать и комментировать их. Разработка своих проектов на этой площадке проста и очень удобна: вы сразу видите результат, написанного вами кода.
Из этого урока вы узнаете:
- Как пользоваться CodePen
- Как настроить CodePen под себя
- Как форкнуть чужой пен в CodePen
- Как создать проект в CodePen
1) Как пользоваться CodePen
Чтобы попробовать CodePen, достаточно перейти на их сайт и нажать кнопку "Start Coding".
Ссылка на CodePen: codepen.io
При нажатии откроется вот такое окно:
Здесь вы уже можете писать свой пен. Это может быть что угодно - сайт, анимация, игра, элемент интерфейса и т.д.
Напишем немного кода:
Как вы могли заметить, нам не нужно в верстке объявлять html, head, body. Это будет необходимо при создании своего проекта, но об этом позже. При разработке, вам не нужно запускать свой пен, при изменении кода он будет перезапускаться сам. Если вы хотите сохранить его или настроить рабочее окружение под себя, вам нужно будет зарегистрироваться. Есть возможность авторизации через Github. Для дальнейшей работы с CodePen будет необходима регистрация.
После регистрации нас встретит такой интерфейс. Чтобы создать новый пен, необходимо нажать на "Pen".
2) Как настроить CodePen под себя
Чтобы настроить пен под себя, необходимо нажать кнопку "Settings" в окне редактирования пена.
Здесь в настройках HTML, CSS, JavaScript можно выбрать желаемый препроцессор, также можно подключить фреймворки и библиотеки через CDN.
Вам может быть неудобно, что при любом изменении кода, весь пен перезагружается. Для того, чтобы это исправить, необходимо в разделе "Behavior" отключить пункт "Auto-Updating Preview".
Если вы отключили этот пункт, для обновления проекта вам нужно будет нажимать на кнопку "Run".
В разделе "Pen Details" можно указать имя пена, его описание и теги, по которым его можно будет найти в поиске.
В разделе "Editor" можно настроить табуляцию.
Если вы кликните по пункту "Visit your global Editor Settings", то попадете в глобальные настройки. Там вы сможете изменить тему, шрифт, отключить/включить поддержку Emmet или задать новые сниппеты для Emmet.
Также в редакторе вы можете заметить кнопку "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" можно создавать структуру проекта.
Надеемся, что вам было интересно и вы узнали что-то новое из этого урока. Создавайте, развивайтесь и следите за выходом новых уроков.
До скорой встречи!
Ссылка на канал: https://t.me/sitodel