Nekome tko pokušava upasti u razvoj softvera nije važno kamo gledate - LinkedIn, odbori za savjete o karijeri, youtube vodiči - savjeti su uvijek isti: potreban vam je portfelj. freeCodeCamp zna ovaj savjet i čine ga obveznim stvoriti za završetak certifikacije “Responsive Web Design”.
Portfelj bi trebao biti živi dokument. Završite projekt, bacite onog lošeg dječaka na svoj portfelj kako biste ga pokazali svijetu. Stalno ga dodajete, prikazujući svoju osobnu putanju rasta. Dajete je potencijalnim regrutima i menadžerima za zapošljavanje kako bi vašoj biografiji dodali neku dimenziju.
Od pet projekata koji su dobili tu potvrdu, najviše sam posla stavio u svoj portfelj. Ako će to biti moj prvi digitalni dojam, želio sam osigurati da je to najbolji koji mogu stvoriti.
De facto metoda za dovršetak projekata na freeCodeCampu je korištenje codepen.io. Besplatna verzija omogućuje vam kodiranje u HTML, CSS i JavaScript oknu i pregledavanje promjena dok ih upisujete u prozor. Stranicu možete otvoriti u cjelovitom prikazu, koji uklanja okna HTML, CSS i JavaScript, ali na vrhu ostavlja crni natpis. URL je hash, nešto poput //codepen.io/cam-barts/full/ZPWpqo, što se ne pamti, ne daje nikakve naznake o sadržaju web stranice i po mom mišljenju ne pravi nikakve valove na nastaviti. Nadalje, ako članstvo ne platite codepenom, ne možete ga promijeniti.
Otprilike kad sam završavao svoj projekt, zvijezde su se poravnale i otkrio sam dvije tehnologije koje će pomoći mom portfelju da se istaknu: Github Pages i Google Lighthouse.
Github Pages omogućuje vam hostiranje web mjesta izravno iz GitHub spremišta. Nudi prilično glatki github.io url, koji je zagolicao moju želju za nečim za staviti u životopis. Omogućila bi mi potpunu kontrolu nad onim što će moji korisnici vidjeti kada dođu do web mjesta (tako dugačak, crni natpis), a ja se ne bih morao baviti samo hostingom ili plaćanjem neke druge usluge hostinga.
Čuo sam za Googleov svjetionik u CodeNewbie podcastu koji je imao Frances Coronel. Revidira vašu web lokaciju izravno iz Chrome Dev Tools za pet područja: izvedba, progresivna web aplikacija, pristupačnost, najbolji primjeri iz prakse i SEO. SEO ili optimizacija za pretraživačke mehanizme je ono što pomaže vašoj web stranici da se penje na vrh pretraživača poput Googlea, što vam pomaže da vas pronađu. Također, sada kada sam namjeravao hostirati svoju web stranicu na stranicama, želio sam preuzeti odgovornost za izvedbu svoje web stranice i da bih to učinkovito učinio, morao sam imati barem mjerilo.
Moj cilj u pisanju ovog članka je da vam pomognem stvoriti nevjerojatnu brzu web stranicu portfelja profesionalnog izgleda bez ikakvih troškova. Želim da to bude nešto o čemu s ponosom objavljujete na LinkedIn-u i lijepite vrh vašeg životopisa, a želim to iskoristiti GitHub Pages i Google Lighthouse.
Da bih išao dalje, iznio sam nekoliko pretpostavki. Prvo je da imate Github račun. Ako ga već nemate, jednostavno ga stvoriti. Drugo je da imate osnovno razumijevanje gita. Ako ste potpuno novi, postoji mnoštvo izvrsnih članaka o početku rada. Ovaj članak pretpostavlja da ste svoj portfelj popunili na codepenu. Napokon, trebali biste instalirati Google Chrome.
Ovaj članak prati moj osobni portfelj. Olovku možete pronaći ovdje, kod ovdje, a konačni proizvod nalazi se na cam-barts.github.io.
Početak rada
Postavljanje web stranice Github Pages prilično je jednostavno. Verzija TL; DR je:
- Stvorite spremište slijedeći konvenciju imena [GitHub korisničko ime] .github.io
- Kloniraj lokalno
- Stvorite datoteke index.html , style.css , script.js unutar spremišta
- Dodajte kod tim datotekama
- Posvetite se i gurnite na GitHub
- Dobit!
Stvorite spremište s naslovom koji slijedi konvenciju [Vaše Github korisničko ime] .github.io. Evo mog: cam-barts.github.io. Koji god kôd bude gurnut u to spremište, prikazuje se kada prijeđete na to mjesto.
Dakle, kada ste klonirali spremište lokalno, što točno u njega stavite?
Trebali biste započeti s tri datoteke, datotekom index.html, datotekom style.css i datotekom script.js . U bilo kojem uređivaču koji vam se sviđa (koristim Atom), trebali biste započeti sa sljedećim isječkom koda u vašem index.html :
Ovdje se događa puno toga što bi vam moglo biti nepoznato ako ste radili samo s codepen.io.
Dir atribut u HTML oznake pokazuje da se dokument treba čitati L EFT T O R ight. To samo osigurava da se kada se vaša stranica prikaže, svi elementi poravnaju, što je i način na koji čitaju engleski jezik.
Metaoznake u glavi označavaju metapodatke o stranici, što pomaže tražilicama poput Googlea da indeksiraju vašu web lokaciju.
U ovom trenutku trebate ispuniti metaoznake i naslovnu oznaku. Napominjemo da sadržaj metaoznake ključnih riječi treba razdvajati zarezom i treba sadržavati pojmove za koje biste željeli da ljudi na Googleu pronađu vaš portfelj. Evo kako izgleda moj:
Sljedeći je korak kopiranje HTML odjeljka olovke za portfelj u odjeljak tijela vašeg isječka. Kad je to završeno, ako ste se u postavkama olovke povezali s bilo kojim drugim CSS-om ili JS-om, poput Bootstrapa ili Font Awesomea, morate povezati one u svom index.html .
Stvorite više oznaka veza za css i oznake skripti za JavaScript i dodajte veze koje se nalaze u postavkama na atribute href i src . Da biste osigurali prikazivanje svojih stilova i skripti, stavite ih ispred postojećih veza i oznaka skripti u isječku. Na primjer, povezivanje s Bootstrapom i JQueryjem moglo bi izgledati ovako:
Dalje, morate dodati svoj vlastiti CSS u svoj style.css , a ako imate JavaScript, dodajte ga u svoj script.js .
Nakon što to učinite, dobro je posvetiti sav svoj posao i gurnuti ga u Github. Odmah nakon što to učinite, možete doći do [Vašeg korisničkog imena za Github] .github.io i provjeriti svoje web mjesto!
Optimizacija web mjesta vašeg portfelja
Čestitamo na objavljivanju portfelja!
Sljedeći koraci uključuju optimizaciju vašeg web mjesta. Za to ćemo koristiti Googleov svjetionik. Bolje je to učiniti u prozoru privatnog preglednika kako bilo koja predmemorija ili proširenja Chromea koja imate možda neće utjecati na rezultate. Kada prijeđete na svoju web stranicu, otvorite Chrome Developer Tools (Ctrl + Shift + i) i kliknite karticu Revizije .
Progresivne web aplikacije izvan su dosega ovog vodiča, ali nema štete u izvođenju svih revizija. Kada ih pokrenete, trebali biste dobiti stranicu koja izgleda ovako:
Najbolja stvar u vezi s ovim izvješćima je što vam daju "Prilike" za poboljšanje rezultata.
U odjeljku o izvedbi govori vam da poslužujete formate datoteka sljedeće generacije kao što je WebP naspram tradicionalnih .PNG slika i sugerira lijeno učitavanje slika.
U odjeljku SEO predlaže poboljšanja SEO-a, poput dodavanja metaoznake opisa i upotrebe čitljivih veličina fontova. Ne samo da daje ove prijedloge, već vodi do članaka s praktičnim primjerima sa stvarima koje treba promijeniti u kodu radi optimizacije za ta područja.
Za mene je trebao samo sat vremena da postignem rezultate svoje web stranice u visokim 90-ima za izvedbu, pristupačnost, najbolje prakse i SEO. Ovdje možete vidjeti sve promjene koje sam napravio.
Idući dalje
Sljedeći koraci za vašu web stranicu ovise o vama. Možete ga povezati s Google Analyticsom da biste vidjeli koliko posjetitelja dolazi u vaš portfelj. Možete dodati odjeljke za svoje nagrade kako bi prikazali svoje certifikate freeCodeCamp dok ih dobivate. Evolucija vašeg web mjesta u potpunosti je u vašim rukama! Komentirajte linkove do svog portfelja u nastavku.