CodePen maslahatlari va eng yaxshi amaliyotlar

FCCda ishlayotganingizda CodePen-da o'zingizning loyihangizni yaratadigan paytlar bo'ladi. Kampers boshqa loyihachilarning fikr-mulohazalarini olish uchun bepul loyihalarni lager forumida baham ko'rishni yaxshi ko'radi.

Bugun men CodePen-dan qanday qilib ko'proq foydalanishingiz mumkinligini va FCC forumida fikr-mulohazalaringizni qanday oshirishni ko'rsatmoqchiman.

Uxlab yotgan sumkangiz va zefirlarni oling. Oh, va siz uxlayotganingizda uni o'g'irlab olgan ayiqdan Yeti Cooleringizni qaytarib olishni unutmang! Biz bir nechta narsalarni o'rganish uchun piyoda boryapmiz.

CodePen-da kodingizni tartibga solish

CodePen bilan birinchi marta ishlayotganda, mening barcha kodlarim qalamning HTML qismida bo'lganini eslayman. Xuddi quyidagi rasm singari, mening HTML, CSS va tarkiblarim bitta joyda.

Bu kabi veb-saytingizni tuzishda mutlaqo yomon narsa yo'q. Ammo CodePen-da sizning yordamingizni beradigan yoki shunchaki ajoyib loyihangizni tekshirayotgan odamlar tomonidan kodni yanada tartibli va o'qilishi uchun uni tozalash usullari mavjud.

Bu qalamni bu yerga bosib, boshqa tabda ochishingiz mumkin. Bu sizga kod bilan birga o'ynashga va unga rioya qilishga imkon beradi.

Keling, ba'zi narsalarni olib tashlaymiz

Bizga bunday kodlar kerak emas, chunki CodePen ularni avtomatik ravishda bizning loyihamizga kiritadi.

CodePen-ga kirish kerak bo'lgan joyni to'g'ri joylashtirish uchun quyidagi amallarni bajaring.

Meta tarkibimizni va google shrifti havolalarini CodePen-ning Stuff Forhead-ning qismiga ko'chiramiz.

Mana bu bosh teglar orasidagi kodning surati. Sizda bor bo'lgan kodni faqat qalin qilib ko'chirishingiz kerak.


 
  Bootstrap Theme Company sahifasi 
 
 
 
 
 
 
 
 
 tanasi {
 shrift: 400 15px Lato, sans-serif;
 chiziq bo'yi: 1,8;
 rang: # 818181;
 }
 h2 {
 shrift o'lchami: 24px;
 matnni o'zgartirish: katta harf;
 rang: # 303030;
 shriftning vazni: 600;
 margin-pastki: 30px;
 }
 h4 {
 shrift o'lchami: 19px;
 chiziq balandligi: 1.375em;
 rang: # 303030;
 shriftning og'irligi: 400;
 margin-pastki: 30px;
 }
 .jumbotron {
 fon rangi: # f4511e;
 rang: #fff;
 to'ldirish: 100px 25px;
 shrift-oila: Montserrat, sans-serif;
 }
 . konteyner-suyuqlik {
 to'ldirish: 60px 50px;
 }
 .bg-kulrang {
 fon rangi: # f6f6f6;
 }
 .logo-kichik {
 rang: # f4511e;
 shrift o'lchami: 50px;
 }
 .logo {
 rang: # f4511e;
 shrift o'lchami: 200px;
 }
 .thumbnail {
 to'ldirish: 0 0 15px 0;
 chegara: yo'q;
 chegara-radius: 0;
 }
 .thumbnail img {
 kengligi: 100%;
 balandligi: 100%;
 margin-pastki: 10px;
 }
 .carousel-control.right, .carousel-control. chap {
 fon-rasm: yo'q;
 rang: # f4511e;
 }
 .carousel ko'rsatkichlari li {
 chegara rangi: # f4511e;
 }
 .karousel ko'rsatkichlari li.active {
 fon rangi: # f4511e;
 }
 .item h4 {
 shrift o'lchami: 19px;
 chiziq balandligi: 1.375em;
 shriftning og'irligi: 400;
 shrift uslubi: kursiv;
 chegarasi: 70px 0;
 }
 .item span {
 shrift uslubi: odatiy;
 }
 .panel {
 chegara: 1px qattiq # f4511e;
 chegara-radius: 0! muhim;
 o'tish: box-soya 0,5s;
 }
 .panel: hover {
 quti soyasi: 5px 0px 40px rgba (0,0,0, .2);
 }
 .panel-footer .btn: hover {
 chegara: 1px qattiq # f4511e;
 background-color: #fff! muhim;
 rang: # f4511e;
 }
 .panel-sarlavhasi {
 rang: #fff! muhim;
 background-color: # f4511e! muhim;
 to'ldirish: 25px;
 chegara pastki: 1px qattiq shaffof;
 chegara-yuqori-chap-radius: 0px;
 chegara-yuqori-o'ng-radius: 0px;
 chegara-pastki-chap-radius: 0px;
 chegara-pastki-o'ng-radius: 0px;
 }
 .panel-footer {
 fon-rang: oq! muhim;
 }
 .panel-footer h3 {
 shrift o'lchami: 32px;
 }
 .panel-footer h4 {
 rang: #aaa;
 shrift o'lchami: 14px;
 }
 .panel-footer .btn {
 chegarasi: 15px 0;
 fon rangi: # f4511e;
 rang: #fff;
 }
 .navbar {
 margin-pastki: 0;
 fon rangi: # f4511e;
 z-indeks: 9999;
 chegara: 0;
 shrift o'lchami: 12px! muhim;
 satr balandligi: 1.42857143! muhim;
 harflar oralig'i: 4px;
 chegara-radius: 0;
 shrift-oila: Montserrat, sans-serif;
 }
 .navbar li a, .navbar .navbar-brand {
 rang: #fff! muhim;
 }
 .navbar-nav li: hover, .navbar-nav li.active a {
 rang: # f4511e! muhim;
 background-color: #fff! muhim;
 }
 .navbar-standart .navbar-toggle {
 chegara rangi: shaffof;
 rang: #fff! muhim;
 }
 footer .glyphicon {
 shrift o'lchami: 20px;
 margin-pastki: 20px;
 rang: # f4511e;
 }
 .slideanim {ko'rinishi: yashirin;}
 .slide {
 animatsiya nomi: slayd;
 -webkit-animatsiya-nomi: slayd;
 animatsiya davomiyligi: 1s;
 -webkit-animatsiya-davomiyligi: 1s;
 ko'rinishi: ko'rinadigan;
 }
 @ asosiy kadrlar slaydi {
 0% {
 shaffoflik: 0;
 -webkit-transform: tarjimaY (70%);
 }
 100% {
 shaffoflik: 1;
 -webkit-transform: translateY (0%);
 }
 }
 @ -webkit-keyframes slayd {
 0% {
 shaffoflik: 0;
 -webkit-transform: tarjimaY (70%);
 }
 100% {
 shaffoflik: 1;
 -webkit-transform: translateY (0%);
 }
 }
 @media ekrani va (eng kengligi: 768px) {
 .col-sm-4 {
 matnni tekislash: markaz;
 chegarasi: 25px 0;
 }
 .btn-lg {
 kengligi: 100%;
 margin-pastki: 35px;
 }
 }
 @media ekrani va (eng kengligi: 480px) {
 .logo {
 shrift o'lchami: 150px;
 }
 }
 
  1. Sozlamalar tugmasini bosing.

2. HTML ni bosing.

3. Tarkibni uchun Stuff ichiga joylashtiring. Tugatganingizdan so'ng "Saqlash va yopish" tugmachasini bosing.

Endi keling, CSS-ni boshqa joyga ko'chirib o'tamiz

  1. Hamma narsani ochish va yopish uslublari yorlig'i o'rtasida nusxa oling va CSS bo'limiga joylashtiring.

Sizning HTML va CSS endi ajratilgan. Bu uyushgan va samarali ish muhitini yaratadi. E'tibor bering: sizning CSS bo'limingizda teglarini qo'yish shart emas.

Bootstrap uslubi jadvalini loyihangizga qo'shish

  1. Sozlamalar-ni bosing.
  2. CSS-ni bosing.

3. Pastki tomondagi o'qni bosing, unda "Tez qo'shing" deyiladi va yuklash chizig'ini tanlang. Uni tashqi CSS havolalaringizga qo'shadi.

Qisqacha maslahat: Siz shuningdek Shrift ajoyibini tashqi uslublar jadvali sifatida qo'shishingiz mumkin. Tashqi CSS-ni qo'shish ostidagi tarkibni o'qing.

JavaScript qo'shilmoqda

  1. Sozlamalarda JavaScript-ni bosing.

2. "Tez qo'shish" ochiladigan menyusini bosing va jQuery va Bootstrap-ni qo'shing.

3. Saqlash va yopish tugmachasini bosing.

HTML-bo'limimizdan JavaScript-ni ko'chirish

  1. Pastga o'ting va javascript kodini skriptingiz teglari orasida nusxa oling.

2. Uni JavaScript bo'limiga joylashtiring.

Tugatish

Endi sizning HTML, CSS va JavaScript-ni ajratib bo'lgach, CodePen-da ko'proq tartibli ish muhiti mavjud. Bu shuningdek, sizga Free Code Camp Forumda boshqalarga sizga yordam berishni osonlashtiradi, chunki ular sizning kodingizni topib, har qanday xatolarni osongina tashxislashi mumkin. CodePen sozlamalarida o'ynang va yana nima qilishingiz mumkinligini ko'ring.

Keyingi safar CodePen-da loyihani yaratganingizda, jadval jadvallarini qanday qo'shish kerakligini, qaerda tarkibini to'g'ri joylashtirishni, JavaScript kutubxonasini qanday qo'shish kerakligini va HTML, CSS va JavaScript-ni qanday ajratish kerakligini bilib olasiz. Umid qilamanki, bu yordam beradi!

Buni qanday qilish kerakligini tushuntiradigan videomda ham bor.

Do'stlarimni kodlash baxtli!

Agar siz ushbu maqolani yoqtirgan bo'lsangiz, iltimos, izohlarda bizga xabar bering.

Bundan tashqari, mening YouTube kanalimni tekshirib ko'ring, u erda men sharh loyihalari kabi ajoyib narsalarni qilaman va dasturiy ta'minot muhandisi sifatida hayotimni baham ko'raman.