Поради та найкращі практики CodePen

Працюючи в FCC, буде час, коли ви створюєте власні проекти з CodePen. Кемпери люблять ділитися цими проектами на форумі Free Code Camp, щоб отримувати відгуки від інших кемперів.

Сьогодні я збираюся показати вам, як отримати максимальну користь від CodePen та як максимізувати ваші відгуки на форумі FCC.

Отримайте спальний мішок і зефір. О, і не забудьте повернути свого Yeti Cooler від того ведмедя, який його вкрав, поки ви спали! Ми вирушаємо в похід, щоб дізнатися кілька речей.

Організація коду в CodePen

Під час роботи з CodePen я вперше пам’ятаю, що весь код був у розділі HTML моєї ручки. Так само, як на зображенні нижче, у мене було вміст HTML, CSS та все в одному місці.

Не існує абсолютно нічого поганого в створенні вашого веб-сайту, як це. Але в CodePen є способи очищення вашого коду, щоб зробити його більш організованим і читабешим іншими, хто допомагає вам, або просто перевірити ваш дивовижний проект.

Ви можете відкрити цю ручку на іншій вкладці, натиснувши тут. Це дозволить вам пограти з кодом і слідувати далі.

Давайте видалимо деякі речі

Нам не потрібні ці фрагменти коду, оскільки CodePen автоматично вводить їх у наш проект.

Виконайте ці дії, щоб правильно розмістити вміст голови там, де він повинен перейти в CodePen.

Перемістимо наш мета-вміст та посилання на шрифт google до частини Stuff For CodePen.

Ось знімок коду між тегами заголовка. Ви повинні перемістити лише той код, який у мене є жирним шрифтом.


 
  Тематична сторінка компанії Bootstrap 
 
 
 
 <посилання href = ”http://fonts.googleapis.com/css?family=Montserrat" rel = "таблиця стилів" type = "text / css">
 <посилання href = ”http://fonts.googleapis.com/css?family=Lato" rel = "таблиця стилів" type = "text / css">
 
 
 <стиль>
 корпус {
 шрифт: 400 15px Lato, sans-serif;
 лінія-висота: 1,8;
 колір: # 818181;
 }
 h2 {
 розмір шрифту: 24px;
 перетворення тексту: великі літери;
 колір: # 303030;
 шрифт: 600;
 маржа-нижня: 30 пікселів;
 }
 h4 {
 розмір шрифту: 19px;
 лінія-висота: 1,375ем;
 колір: # 303030;
 шрифт-вага: 400;
 маржа-нижня: 30 пікселів;
 }
 .jumbotron {
 колір тла: # f4511e;
 колір: #fff;
 підкладка: 100px 25px;
 сімейство шрифтів: Montserrat, sans-serif;
 }
 .контейнер-рідина {
 підкладка: 60px 50px;
 }
 .bg-сірий {
 фоновий колір: # f6f6f6;
 }
 .logo-small {
 колір: # f4511e;
 розмір шрифту: 50px;
 }
 .logo {
 колір: # f4511e;
 розмір шрифту: 200px;
 }
 .thumbnail {
 підкладка: 0 0 15px 0;
 межа: немає;
 межа-радіус: 0;
 }
 .thumbnail img {
 ширина: 100%;
 висота: 100%;
 маржа-нижня: 10 пікселів;
 }
 .carousel-control.right, .carousel-control.left {
 фонове зображення: немає;
 колір: # f4511e;
 }
 .carousel-показники li {
 колір межі: # f4511e;
 }
 .carousel-індикатори li.active {
 колір тла: # f4511e;
 }
 .item h4 {
 розмір шрифту: 19px;
 лінія-висота: 1,375ем;
 шрифт: 400;
 шрифт: курсив;
 маржа: 70px 0;
 }
 .item span {
 стиль шрифту: нормальний;
 }
 .panel {
 облямівка: 1px суцільний # f4511e;
 межа-радіус: 0! важливо;
 перехід: коробка-тінь 0,5с;
 }
 .panel: навести курсор {
 поле-тінь: 5px 0px 40px rgba (0,0,0, .2);
 }
 .panel-footer .btn: навести курсор {
 облямівка: 1px суцільний # f4511e;
 background-color: #fff! важливо;
 колір: # f4511e;
 }
 .панель-заголовок {
 колір: #fff! важливо;
 колір фону: # f4511e! важливо;
 підкладка: 25px;
 облямівка-дно: 1px суцільний прозорий;
 межа-верхній-лівий-радіус: 0px;
 межа-верхній правий радіус: 0px;
 межа-радіус вліво-вліво: 0px;
 межа-нижній правий радіус: 0px;
 }
 .panel-footer {
 колір фону: білий! важливий;
 }
 .panel-footer h3 {
 розмір шрифту: 32px;
 }
 .panel-footer h4 {
 колір: #aaa;
 розмір шрифту: 14px;
 }
 .panel-footer .btn {
 маржа: 15px 0;
 колір тла: # f4511e;
 колір: #fff;
 }
 .navbar {
 маржа-нижня: 0;
 колір тла: # f4511e;
 z-індекс: 9999;
 межа: 0;
 розмір шрифту: 12px! важливо;
 висота лінії: 1.42857143! важливо;
 інтервал між літерами: 4 пікселя;
 межа-радіус: 0;
 сімейство шрифтів: Montserrat, sans-serif;
 }
 .navbar li a, .navbar .navbar-бренд {
 колір: #fff! важливо;
 }
 .navbar-nav li a: навести курсор, .navbar-nav li.active a {
 колір: # f4511e! важливо;
 background-color: #fff! важливо;
 }
 .navbar-default .navbar-toggle {
 окантовка: прозора;
 колір: #fff! важливо;
 }
 footer .glyphicon {
 розмір шрифту: 20px;
 маржа-нижня: 20 пікселів;
 колір: # f4511e;
 }
 .slideanim {видимість: приховано;}
 .slide {
 анімація-ім'я: слайд;
 -webkit-animation-name: слайд;
 тривалість анімації: 1 с;
 -webkit-анімація-тривалість: 1s;
 видимість: видима;
 }
 слайд @keyframes {
 0% {
 непрозорість: 0;
 -webkit-перетворення: перекластиY (70%);
 }
 100% {
 непрозорість: 1;
 -webkit-перетворення: translateY (0%);
 }
 }
 @ -webkit-keyframes слайд {
 0% {
 непрозорість: 0;
 -webkit-перетворення: перекластиY (70%);
 }
 100% {
 непрозорість: 1;
 -webkit-перетворення: translateY (0%);
 }
 }
 екран @media та (максимальна ширина: 768 пікселів) {
 .col-sm-4 {
 вирівнювання тексту: центр;
 маржа: 25px 0;
 }
 .btn-lg {
 ширина: 100%;
 маржа-нижня: 35 пікселів;
 }
 }
 екран @media та (максимальна ширина: 480 пікселів) {
 .logo {
 розмір шрифту: 150px;
 }
 }
 
  1. Натисніть кнопку налаштувань.

2. Клацніть HTML.

3. Вставте вміст у Stuff для . Після завершення натисніть Зберегти та закрити.

Тепер перенесемо наш CSS туди, куди він повинен був піти

  1. Скопіюйте все між тегом стилів відкриття та закриття та вставте його у розділ CSS.

Ваш HTML та CSS тепер розділені. Це сприяє організованому та ефективному робочому середовищу. Зверніть увагу: вам не потрібно ставити теги у своєму CSS-розділі.

Додавання таблиці стилів завантажувача до проекту

  1. Клацніть Налаштування.
  2. Клацніть CSS.

3. Клацніть стрілку вниз у нижній частині, де написано "Швидке додавання", і виберіть завантажувальний засіб. Він додасть його до ваших зовнішніх посилань CSS.

Коротка порада: Ви також можете додати шрифт Awesome як зовнішній аркуш стилів. Прочитайте вміст у розділі Додати зовнішній CSS.

Додавання JavaScript

  1. Ще в налаштуваннях натисніть JavaScript.

2. Клацніть спадне меню «Швидке додавання» та додайте jQuery та Bootstrap.

3. Клацніть Зберегти та закрити.

Переміщення нашого JavaScript з розділу HTML

  1. Прокрутіть донизу та скопіюйте код javascript між тегами сценарію.

2. Вставте його в розділ JavaScript.

Оздоблення

Тепер, коли ваш HTML, CSS та JavaScript відокремлені, у вас є більш організоване робоче середовище в CodePen. Це також полегшує допомогу іншим на форумі Free Code Camp, оскільки вони можуть знайти ваш код і легко діагностувати будь-які помилки. Пограйте в налаштуваннях CodePen і подивіться, що ще можна зробити.

Наступного разу, коли ви будете створювати проект у CodePen, ви дізнаєтесь, як додати таблиці стилів, куди правильно розмістити вміст, як додати бібліотеку JavaScript та як розділити HTML, CSS та JavaScript. Я сподіваюся, що це допомагає!

У мене також є відео, в якому пояснюється, як зробити щось із цього теж.

Щасливі кодування мої друзі!

Якщо вам сподобалась ця стаття, будь ласка, повідомте нас про це у коментарях.

Крім того, не соромтесь перевіряти свій канал YouTube, де я займаюся цікавими речами, такими як оглядові проекти та ділюсь своїм життям як інженера-програмного забезпечення.