Съвети за CodePen и най-добри практики

Когато работите в FCC, ще има моменти, когато създавате свои собствени проекти с CodePen. Къмпингите обичат да споделят тези проекти на Free Code Camp Forum, за да получават обратна информация от други къмпингуващи.

Днес ще ви покажа как да извлечете максимума от CodePen и как да увеличите максимално вашите отзиви в рамките на FCC форума.

Вземете си спален чувал и ружа. О, и не забравяйте да си върнете Yeti Cooler от този мечок, който го е откраднал, докато сте спали! Тръгваме на поход, за да научим няколко неща.

Организиране на вашия код в CodePen

Когато работя с CodePen за първи път си спомням, че всичките ми кодове са в секцията HTML на моята писалка. Точно като изображението по-долу, аз имах HTML, CSS и съдържание на едно място.

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

Можете да отворите тази писалка в друг раздел, като щракнете тук. Това ще ви позволи да си поиграете с кода и да го следвате.

Нека премахнем някои неща

Не се нуждаем от тези парчета код, защото CodePen автоматично ги инжектира в нашия проект.

Следвайте тези стъпки, за да поставите правилно съдържанието на главата си там, където трябва да отиде в CodePen.

Нека преместим нашето мета съдържание и връзките на шрифтове в google към частта Stuff For на CodePen.

Ето моментна снимка на кода между етикетите на главата. Трябва само да преместите кода, който имам с удебелен шрифт.

<Глава>
 
  Тематична страница на компанията Bootstrap 
 
 
 
 
 
 
 
 <Стил>
 тяло {
 шрифт: 400 15px Lato, sans-serif;
 линия височина: 1,8;
 цвят: # 818181;
 }
 h2 {
 размер на шрифта: 24px;
 преобразуване на текст: главни букви;
 цвят: # 303030;
 тегло на шрифта: 600;
 марж-дъно: 30px;
 }
 h4 {
 размер на шрифта: 19px;
 линия-височина: 1.375em;
 цвят: # 303030;
 тегло на шрифта: 400;
 марж-дъно: 30px;
 }
 .jumbotron {
 цвят на фона: # f4511e;
 цвят: #fff;
 подплънки: 100px 25px;
 семейство шрифтове: Montserrat, sans-serif;
 }
 .container-fluid {
 подплънки: 60px 50px;
 }
 .bg-сив {
 цвят на фона: # f6f6f6;
 }
 .logo-small {
 цвят: # f4511e;
 размер на шрифта: 50px;
 }
 .logo {
 цвят: # f4511e;
 размер на шрифта: 200px;
 }
 .thumbnail {
 подплънки: 0 0 15px 0;
 граница: няма;
 граница-радиус: 0;
 }
 .thumbnail img {
 ширина: 100%;
 височина: 100%;
 марж-дъно: 10px;
 }
 .carousel-control.right, .carousel-control.left {
 фон-изображение: няма;
 цвят: # f4511e;
 }
 .carousel-показатели li {
 цвят на рамката: # f4511e;
 }
 .carousel-индикатори li.active {
 цвят на фона: # f4511e;
 }
 .item h4 {
 размер на шрифта: 19px;
 линия-височина: 1.375em;
 тегло на шрифта: 400;
 стил на шрифта: курсив;
 марж: 70px 0;
 }
 .item span {
 стил на шрифта: нормален;
 }
 .panel {
 рамка: 1px твърд # f4511e;
 граничен радиус: 0! важен;
 преход: кутия-сянка 0,5s;
 }
 .panel: задръжте {
 кутия-сянка: 5px 0px 40px rgba (0,0,0, .2);
 }
 .panel-footer .btn: hover {
 рамка: 1px твърд # f4511e;
 фон-цвят: #fff! важно;
 цвят: # f4511e;
 }
 .panel-заглавие {
 цвят: #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! важно;
 разстояние между букви: 4px;
 граница-радиус: 0;
 семейство шрифтове: Montserrat, sans-serif;
 }
 .navbar li a, .navbar .navbar-марка {
 цвят: #fff! важно;
 }
 .navbar-nav li a: hover, .navbar-nav li.active a {
 цвят: # f4511e! важно;
 фон-цвят: #fff! важно;
 }
 .navbar-default .navbar-превключване {
 цвят на рамката: прозрачен;
 цвят: #fff! важно;
 }
 footer .glyphicon {
 размер на шрифта: 20px;
 марж-дъно: 20px;
 цвят: # f4511e;
 }
 .slideanim {видимост: скрит;}
 .пързалка {
 анимация-име: слайд;
 -webkit-animation-name: слайд;
 продължителност на анимацията: 1s;
 -webkit-анимация-продължителност: 1s;
 видимост: видима;
 }
 слайд @keyframes {
 0% {
 непрозрачност: 0;
 -webkit-преобразуване: translateY (70%);
 }
 100% {
 непрозрачност: 1;
 -webkit-преобразуване: translateY (0%);
 }
 }
 @ -webkit-keyframes слайд {
 0% {
 непрозрачност: 0;
 -webkit-преобразуване: translateY (70%);
 }
 100% {
 непрозрачност: 1;
 -webkit-преобразуване: translateY (0%);
 }
 }
 @media екран и (макс. ширина: 768px) {
 .col-sm-4 {
 подравняване на текст: център;
 марж: 25px 0;
 }
 .btn-lg {
 ширина: 100%;
 марж-дъно: 35px;
 }
 }
 @media екран и (макс. ширина: 480px) {
 .logo {
 размер на шрифта: 150px;
 }
 }
 
  1. Щракнете върху бутона за настройки.

2. Щракнете върху HTML.

3. Поставете съдържанието в Stuff за . След като сте готови, щракнете върху Запиши и затвори.

Сега нека да преместим нашия CSS там, където трябваше да отиде

  1. Копирайте всичко между маркера на стилове за отваряне и затваряне и го поставете в секцията CSS.

Вашите HTML и CSS вече са разделени. Това създава организирана и ефективна работна среда. Моля, обърнете внимание: Не е нужно да поставяте тагове в своята CSS секция.

Добавяне на листа за стартиране на Bootstrap към вашия проект

  1. Щракнете върху Настройки.
  2. Кликнете върху CSS.

3. Щракнете върху стрелката надолу в долната част, където пише „Бързо добавяне“ и изберете начална лента. Той ще го добави към вашите външни CSS връзки.

Бърз съвет: Можете също да добавите шрифт Awesome като външен лист за стил. Прочетете съдържанието в Добавяне на външен CSS.

Добавяне на JavaScript

  1. Все още в настройките щракнете върху JavaScript.

2. Щракнете върху падащото меню „Бързо добавяне“ и добавете jQuery и Bootstrap.

3. Щракнете върху Запиши и затвори.

Преместване на нашия JavaScript от раздел HTML

  1. Превъртете до дъното и копирайте JavaScript кода между вашите скриптове.
<Скрипт>
$ (Документ) .ready (функция () {
 // Добавяне на плавно превъртане към всички връзки в навигация + връзка на долния колонтитул
 $ (". Navbar a, footer a [href = '# myPage']"). On ("щракване", функция (събитие) {
 // Уверете се, че this.hash има стойност, преди да отмени поведението по подразбиране
 ако (this.hash! == “”) {
 // Предотвратяване на поведението при щракване на котва по подразбиране
 event.preventDefault ();
// Съхранявайте хеш
 var hash = this.hash;
// Използване на анимационния () метод на jQuery за добавяне на гладко превъртане на страницата
 // Незадължителният номер (900) определя броя на милисекундите, необходими за превъртане до определената област
 $ ('Html, body'). Анимация ({
 scrollTop: $ (хеш). offset (). горе
 }, 900, функция () {
 
 // Добавяне на хеш (#) към URL, когато завършите превъртане (поведение по подразбиране при кликване)
 window.location.hash = хеш;
 });
 } // Край, ако
 });
 
 $ (прозорец) .scroll (функция () {
 $ ( ". Slideanim"). Всеки (функция () {
 var pos = $ (this) .offset (). top;
var winTop = $ (прозорец) .scrollTop ();
 ако (поз 

2. Поставете го в секцията JavaScript.

Довършване

Сега, когато вашите HTML, CSS и JavaScript са разделени, имате по-организирана работна среда в CodePen. Това също така улеснява другите да ви помогнат във форума за безплатен код на лагер, защото те могат да намерят вашия код и лесно да диагностицират всякакви грешки. Играйте в настройките на CodePen и вижте какво още можете да направите.

Следващия път, когато изграждате проект в CodePen, ще знаете как да добавите таблици стилове, къде правилно да поставите съдържание, как да добавите JavaScript библиотека и как да разделите HTML, CSS и JavaScript. Надявам се това да помогне!

Имам и видео, което обяснява как да се направи някои от това също.

Честито кодиране на приятелите ми!

Ако тази статия ви е харесала, моля, уведомете ни в коментарите.

Освен това, не се колебайте да проверите канала си в YouTube, където правя готини неща като проекти за преглед и споделям живота си като софтуерен инженер.