CodePen padomi un paraugprakse

Strādājot FCC, būs reizes, kad jūs izveidosit savus projektus, izmantojot CodePen. Kemperiem patīk dalīties šajos projektos Free Code Camp forumā, lai saņemtu atsauksmes no citiem kemperiem.

Šodien es jums parādīšu, kā maksimāli izmantot CodePen iespējas un kā maksimizēt atsauksmes FCC forumā.

Iegūstiet savu guļammaisu un zefīrus. Ak, un neaizmirstiet dabūt atpakaļ savu Yeti Cooler no tā lāča, kurš to nozaga, kamēr jūs gulējāt! Mēs dodamies pārgājienā, lai uzzinātu dažas lietas.

Jūsu koda organizēšana CodePen

Pirmoreiz strādājot ar CodePen, es atceros, ka viss kods bija manas pildspalvas HTML sadaļā. Tāpat kā zemāk redzamajā attēlā, HTML, CSS un saturs bija vienā vietā.

Veidojot jūsu vietni šādi, nav absolūti nekā slikta. Bet CodePen ir veidi, kā iztīrīt savu kodu, lai padarītu to organizētāku un lasāmāku citiem, kas jums palīdz vai vienkārši pārbauda jūsu lielisko projektu.

Šo pildspalvu var atvērt citā cilnē, noklikšķinot šeit. Tas ļaus jums spēlēt ar kodu un sekot līdzi.

Noņemsim dažas lietas

Šīs koda daļas mums nav vajadzīgas, jo CodePen tos automātiski ievada mūsu projektā.

Veiciet šīs darbības, lai pareizi ievietotu galvas saturu tur, kur tam ir nepieciešams, CodePen.

Pārvietosim mūsu meta saturu un google fontu saites uz CodePen daļu Stuff For .

Šeit ir koda momentuzņēmums starp galvenes tagiem. Jums jāpārvieto tikai tas kods, kas man ir treknrakstā.


 
  Bootstrap tēmas uzņēmuma lapa 
 
 
 
 
 
 
  
 
  1. Noklikšķiniet uz iestatījumu pogas.

2. Noklikšķiniet uz HTML.

3. Ielīmējiet saturu mapē . Kad esat pabeidzis, noklikšķiniet uz Saglabāt un aizvērt.

Tagad pārcelsim savu CSS uz turieni, kur tai vajadzēja nokļūt

  1. Kopējiet visu, kas atrodas starp atvēršanas un aizvēršanas stilu tagu, un ielīmējiet to CSS sadaļā.

Jūsu HTML un CSS tagad ir atdalīti. Tas rada organizētu un efektīvu darba vidi. Lūdzu, ņemiet vērā: CSS sadaļā jums nav jāievieto tagi .

Bootstrap stila lapas pievienošana savam projektam

  1. Noklikšķiniet uz Iestatījumi.
  2. Noklikšķiniet uz CSS.

3. Noklikšķiniet uz nolaižamās bultiņas apakšā, kur ir uzraksts “Ātrā pievienošana”, un atlasiet sāknēšanas joslu. Tas to pievienos jūsu ārējām CSS saitēm.

Ātrais padoms: fontu satriecošu var pievienot arī kā ārēju stila lapu. Izlasiet saturu sadaļā Pievienot ārēju CSS.

JavaScript pievienošana

  1. Joprojām iestatījumos noklikšķiniet uz JavaScript.

2. Noklikšķiniet uz nolaižamās izvēlnes “Ātrā pievienošana” un pievienojiet jQuery un Bootstrap.

3. Noklikšķiniet uz Saglabāt un aizvērt.

JavaScript pārvietošana no HTML sadaļas

  1. Ritiniet līdz apakšai un nokopējiet javascript kodu starp skripta tagiem.

$ (dokuments). jau (funkcija () {
 // Pievienojiet vienmērīgu ritināšanu visām navigācijas joslas + kājenes saitēm
 $ (“. Navbar a, kājene a [href = '# myPage']”).) ('Klikšķis', funkcija (notikums) {
 // Pārliecinieties, ka this.hash ir vērtība, pirms tiek ignorēta noklusējuma darbība
 if (this.hash! == “”) {
 // Novērst noklusējuma enkura klikšķu uzvedību
 event.preventDefault ();
// Veikals hash
 var hash = this.hash;
// Izmantojot jQuery animācijas () metodi, lai pievienotu vienmērīgu lapas ritināšanu
 // Izvēles numurs (900) norāda milisekunžu skaitu, kas nepieciešams, lai ritinātu uz norādīto apgabalu
 $ ('Html, body'). Animēt ({
 scrollTop: $ (hash) .offset (). top
 }, 900, funkcija () {
 
 // Pievienojiet hash (#) vietrādim URL, kad ritināšana ir pabeigta (noklusējuma darbība pēc noklusējuma)
 window.location.hash = hash;
 });
 } // Beigt, ja
 });
 
 $ (logs) .scroll (function () {
 $ (“. Slideanim”). Katrs (function () {
 var pos = $ (this) .offset (). top;
var winTop = $ (logs) .scrollTop ();
 if (pos 

2. Ielīmējiet to JavaScript sadaļā.

Apdare

Tagad, kad jūsu HTML, CSS un JavaScript ir nodalīti, CodePen ietvaros jums ir organizētāka darba vide. Tas arī atvieglo citu palīdzību jums Free Code Camp forumā, jo viņi var atrast jūsu kodu un viegli diagnosticēt kļūdas. Spēlējiet CodePen iestatījumos un skatiet, ko vēl varat darīt.

Nākamreiz veidojot projektu CodePen, jūs zināt, kā pievienot stila lapas, kur pareizi ievietot saturu, kā pievienot JavaScript bibliotēku un kā nošķirt HTML, CSS un JavaScript. Es ceru, ka tas palīdz!

Man ir arī video, kurā paskaidrots, kā to izdarīt arī nedaudz.

Laimīgu manu draugu kodēšanu!

Ja jums patika šis raksts, lūdzu, paziņojiet mums to komentāros.

Turklāt droši izsekojiet manam YouTube kanālam, kur daru interesantas lietas, piemēram, pārskata projektus un dalos savā dzīvē kā programmatūras inženieris.