Pentru cineva care încearcă să intre în dezvoltarea de software, nu contează unde te uiți – LinkedIn, panouri de consiliere în carieră, tutoriale YouTube – sfatul este întotdeauna același: ai nevoie de un portofoliu. Routech știe acest sfat și fac obligatorie crearea unuia pentru a finaliza certificarea „Responsive Web Design”.

Portofoliul ar trebui să fie un document viu. Termini un proiect, îl arunci pe băiatul acela rău în portofoliul tău pentru a-l arăta lumii. Vă adăugați în mod constant, afișându-vă traiectoria de creștere personală. O dați potențialilor recrutori și managerilor de angajare pentru a adăuga o dimensiune CV-ului dvs.

Dintre cele cinci proiecte pentru obținerea acestei certificări, am pus mâna pe cea mai mare muncă în portofoliul meu. Dacă urma să fie prima mea impresie digitală, am vrut să mă asigur că este cea mai bună pe care o puteam face.

Metoda de facto pentru finalizarea proiectelor pe Routech este utilizarea codepen.io. Versiunea gratuită vă permite să codați într-un panou HTML, CSS și JavaScript și să vedeți modificările pe măsură ce le tastați într-o fereastră. Puteți deschide pagina într-o vizualizare completă, care elimină panourile HTML, CSS și JavaScript, dar lasă un banner negru în partea de sus. Adresa URL este un hash, ceva de genul https://codepen.io/cam-barts/full/ZPWpqo, care nu este memorabil, nu oferă nicio indicație despre conținutul site-ului și, în opinia mea, nu face valuri pe un CV. În plus, dacă nu plătiți pentru un abonament cu codepen, nu îl puteți schimba.

Pe vremea când îmi terminam proiectul, stelele s-au aliniat și am descoperit două tehnologii care ar ajuta portofoliul meu să iasă în evidență: Github Pages și Google Lighthouse.

Pagini Github vă permite să găzduiți un site web direct dintr-un depozit GitHub. Oferă o adresă URL destul de slabă github.io, care mi-a gâdilat fantezia pentru a pune ceva pe CV. Mi-ar permite controlul deplin asupra a ceea ce ar vedea utilizatorii mei atunci când navigau pe site (atât de lung, banner negru) și nu ar trebui să mă ocup de găzduirea personală sau de plata unor alte servicii de găzduire.

am auzit despre Google Lighthouse în Podcast CodeNewbie cu Frances Coronel. Vă auditează site-ul web direct din Chrome Dev Tools pentru cinci domenii: performanță, aplicație web progresivă, accesibilitate, cele mai bune practici și SEO. SEO sau Optimizarea motoarelor de căutare este ceea ce vă ajută site-ul să plutească în partea de sus a motoarelor de căutare, cum ar fi Google, care vă ajută să vă găsiți. De asemenea, acum, când aveam să-mi găzduiesc site-ul pe Pages, am vrut să îmi asum responsabilitatea pentru performanța site-ului meu și, pentru a face acest lucru, a trebuit să am cel puțin un punct de referință.

Scopul meu în scrierea acestui articol este să vă ajut să creați un site de portofoliu rapid și profesional, fără niciun cost pentru dvs. Vreau să fie ceva despre care ești mândru să postezi pe LinkedIn și tencuiești în partea de sus a CV-ului tău și vreau să folosesc GitHub Pages și Google Lighthouse pentru a face acest lucru.

Pentru a merge mai departe, am făcut câteva presupuneri. Primul este că aveți un cont Github. Dacă nu aveți deja unul, crearea unuia este ușoară. Al doilea este că aveți o înțelegere de bază despre git. Dacă ești nou-nouț, există o mulțime de excelente articole la început. Acest articol presupune că v-ați completat portofoliul pe codepen. În cele din urmă, ar trebui să aveți instalat Google Chrome.

Acest articol urmărește portofoliul meu personal. Puteți găsi stiloul aici, Codul aici, iar produsul final este la cam-barts.github.io.

Noțiuni de bază

Configurarea site-ului dvs. Github Pages este destul de simplă. Versiunea TL; DR este:

  • Creați un depozit după convenția de nume [GitHub Username].github.io
  • Clonați local
  • Crea index.html, stil.css, script.js fișiere din depozit
  • Adăugați cod la acele fișiere
  • Luați comanda și treceți la GitHub
  • Profit!

Creați un depozit cu un titlu care urmează convenției [Your Github Username].github.io. Iată a mea: cam-barts.github.io. Orice cod care este introdus în acel depozit se afișează atunci când navigați la acel site.

Deci, când ați clonat repozitoriul local, ce anume puneți în el?

Ar trebui să începeți cu trei fișiere, un index.html dosar, a stil.css fișier și a script.js fişier. În orice editor doriți (eu folosesc Atom), ar trebui să începeți cu următorul fragment de cod în index.html:

Aici se întâmplă multe lucruri care ar putea fi necunoscute dacă ați lucrat doar cu codepen.io.

dir atributul din eticheta html indică faptul că documentul ar trebui citit Left To Right. Acest lucru asigură doar că atunci când apare pagina dvs., toate elementele sunt justificate la stânga, așa cum citesc vorbitorii de limba engleză.

Etichetele meta din cap indică metadatele despre pagină, care ajută motoarele de căutare precum Google să indexeze site-ul dvs.

În acest moment, ar trebui să continuați să completați metaetichetele și titlul. Rețineți că Cuvinte cheie conținutul metaetichetei ar trebui să fie separat prin virgulă și ar trebui să includă termeni pe care ați dori să-i folosească oamenii în Google pentru a vă găsi portofoliul. Iată cum arată al meu:

Următorul pas este să copiați secțiunea HTML a stiloului portofoliu în secțiunea corp a fragmentului. Odată ce ați terminat, dacă v-ați conectat la orice alt CSS sau JS din setările stiloului dvs., cum ar fi Bootstrap sau Font Awesome, trebuie să le legați pe cele din index.html.

Creați mai multe etichete de legătură pentru CSS și etichete de script pentru JavaScript și adăugați legăturile care sunt în setări la href și src atribute, respectiv. Pentru a vă asigura că stilurile și scripturile dvs. apar, asigurați-vă că le puneți înainte de link-ul existent și de etichetele de script din fragment. De exemplu, legarea la Bootstrap și JQuery ar arăta astfel:

Apoi, trebuie să adăugați propriul CSS în stil.cssși, dacă aveți JavaScript, adăugați-l la script.js.

După ce ați făcut asta, sunteți bine să vă angajați toată munca și să o împingeți către Github. Imediat după ce ați făcut acest lucru, puteți naviga la [Your Github Username].github.io și verificați site-ul dvs. web!

Optimizarea site-ului dvs. de portofoliu

Felicitări pentru publicarea portofoliului!

Următorii pași implică optimizarea site-ului dvs. Pentru aceasta, vom folosi Google Lighthouse. Este mai bine să faceți acest lucru într-o fereastră în browserul privat, astfel încât orice cache sau extensii Chrome pe care le aveți să nu afecteze rezultatele. Când navigați la site-ul dvs., deschideți Instrumentele pentru dezvoltatori Chrome (Ctrl + Shift + i) și faceți clic pe Audituri filă.

Sporiti va portofoliul de dezvoltatori cu GitHub Pages si Lighthouse
Panoul farului Google

Aplicațiile web progresive nu intră în sfera acestui tutorial, dar nu există niciun rău în executarea tuturor auditurilor. Când le rulați, ar trebui să obțineți o pagină care să arate astfel:

1611449107 805 Sporiti va portofoliul de dezvoltatori cu GitHub Pages si Lighthouse

Cel mai bun lucru despre aceste rapoarte este că vă oferă „Oportunități” de a vă îmbunătăți scorurile.

În secțiunea de performanță, vă spune să difuzați următoarele formate de fișiere gen, cum ar fi imagini WebP versus tradiționale .PNG, și sugerează încărcarea leneșă a imaginilor.

În secțiunea SEO, sugerează îmbunătățiri SEO, cum ar fi adăugarea unei metaetichete de descriere și utilizarea dimensiunilor lizibile ale fonturilor. Nu numai că face aceste sugestii, ci se leagă de articole cu exemple practice cu lucruri de modificat în codul dvs. de optimizat pentru acele zone.

Pentru mine, a durat doar o oră pentru a obține scorurile pentru site-ul meu în anii ’90 pentru performanță, accesibilitate, cele mai bune practici și SEO. Puteți vedea toate modificările pe care le-am făcut aici.

Mergând mai departe

Următorii pași pentru site-ul dvs. depind de dvs. Puteți să-l conectați la Google Analytics pentru a vedea câți vizitatori primesc Portofoliul dvs. Puteți adăuga secțiuni pentru premiile dvs. pentru a afișa certificările Routech pe măsură ce le obțineți. Evoluția site-ului dvs. este complet în mâinile voastre! Comentează linkurile către portofoliul tău de mai jos.