Cum să construiți și să implementați propriul site portofoliu personal

Salut! Numele meu este Kevin Powell. Îmi place să-i învăț pe oameni cum să construiască web-ul și cum să-l facă să arate bine în timp ce sunt la el.

Sunt încântat să anunț asta Tocmai am lansat un curs gratuit care te învață să-ți creezi propriul complet receptiv site-ul portofoliului.

După ce ați terminat acest curs, veți avea un site de portofoliu elegant, care vă va ajuta să obțineți interviuri de angajare și concerte independente. Este, de asemenea, un lucru interesant de arătat prietenilor și familiei.

Vom construi portofoliul utilizând platforma interactivă de învățare a codului Scrimba, apoi îl vom implementa folosind serviciile cloud DigitalOcean.

De asemenea, DigitalOcean a fost generos să le ofere tuturor celor care se înscriu un credit gratuit, deci nu vă va costa nimic să îl puneți în funcțiune.

Această postare este o defalcare a cursului în sine, oferindu-vă o idee despre ceea ce este inclus în toate lecțiile. Dacă îți place ceea ce vezi, asigură-te verificați-l pe Scrimba!

Lecția 1: Introducere

În prima lecție, veți obține o prezentare generală a cursului, astfel încât să știți la ce să vă așteptați, la ce ar trebui să știți înainte de a lua cursul și la ce veți ajunge odată ce ați terminat. De asemenea, vă ofer o introducere rapidă pentru mine.

Lecția 2: Configurarea lucrurilor – HTML

În partea a doua, vă voi arăta în mediul Scrimba și vom pune la punct și proiectul.

Toate imaginile sunt furnizate, deci nu va trebui să vă faceți griji cu privire la căutarea fotografiei perfecte încă. Ne putem concentra pe construirea portofoliului!

Nu uitați că puteți accesa tot ce aveți nevoie, de la text și culori la fonturi și multe altele, la adresa noastră pagină de proiectare dedicată.

Lecția 3: Zona antetului – HTML

Este în sfârșit timpul să începem să construim portofoliul. În această prelegere, vom crea secțiunea antet. Vom analiza metodologia BEM pentru setarea numelor de clase în CSS și cred că veți găsi că acest lucru face ca navigarea să fie simplă și simplă de creat.

Lecția 4: Secțiunea introductivă

Urmează secțiunea Introducere a portofoliului. Aici ne vom prezenta și vom pune o imagine a noastră.

La final, adăugăm o secțiune despre principalele abilități / servicii pe care le putem face. Pentru moment, putem completa totul cu text „Lorem ipsum” ca substituent, până când sunteți gata să îl completați cu propriul dvs. text.

Lecția 5: Despre mine, lucru și subsol – HTML

În acest capitol, finalizăm restul codului nostru HTML cu ultimele 3 secțiuni: Despre mine, unde ne vom prezenta mai detaliat; Muncă, unde vom adăuga câteva exemple de portofoliu și subsolul nostru.

Subsolurile sunt ideale pentru conectarea la adrese de e-mail și vă voi arăta cum să faceți acest lucru cu un <a> etichetă. De asemenea, putem adăuga și linkurile noastre de socializare.

Deocamdată, totul arată un pic brut și toată distracția CSS este în fața noastră.

Lecția 6: Configurarea proprietăților personalizate și a stilurilor generale

În regulă, e timpul să obții o pagină care să arate uimitoare!

În această parte, vom învăța cum să adăugăm proprietăți personalizate.

În timp ce configurarea variabilelor CSS poate dura ceva timp, merită cu adevărat pe măsură ce site-ul se reunește. De asemenea, sunt perfecte pentru a vă permite să personalizați culorile și fonturile site-ului în doar câteva secunde, ceea ce arunc o privire asupra modului de a face după ce încheiem site-ul.

Lecția 7: Stilul titlurilor și subtitrărilor

După ce am setat toate tipografiile necesare, vă voi plimba prin subtitrările de proiectare și coafare a titlurilor și subtitrărilor din secțiunile noastre.

Lecția 8: Configurarea secțiunii introductive

În următoarele câteva capitole va fi destul de practic, așa că nu vă faceți griji dacă doriți să urmăriți ecranele de două ori.

Păstrăm totul receptiv, folosind CSS Grid și ne scufundăm puțin în utilizare em unități, de asemenea.

Acesta este exemplul perfect în care grila CSS strălucește și vom învăța cum să folosim proprietăți precum grid-column-gap, grid-template-areas și grid-template-columns.

Lecția 9: Stilizarea secțiunii de servicii

Pentru a adăuga un pic de interes, mă uit la modul în care putem adăuga un background-image la această secțiune a site-ului. Este un mod frumos de a-l despărți pe al doilea și de a evita doar să ai fundaluri de culoare solidă peste tot și mă uit și la modul în care ai putea să-l folosești background-blend-mode pentru a schimba culoarea imaginii pentru a păstra aspectul site-ului dvs. consecvent.

Ca bonus, vom învăța, de asemenea, cum să stilizăm butoanele atunci când sunt plasate sau selectate atunci când trecem prin pagină.

Lecția 10: secțiunea Despre mine

Mare progres! Deci, aceasta este secțiunea foarte importantă Despre mine. Acesta este destul de asemănător cu introducerea, deoarece vom folosi CSS Grid, dar mutați imaginea în partea dreaptă și găsiți un exemplu util pentru CSS fr unitate.

Lecția 11: Portofoliul

În acest ecran, voi arăta cum să construim secțiunea de portofoliu pentru a afișa unele dintre lucrările noastre extraordinare. Și chiar vom învăța cum să folosim cubic-bezier() cu un efect extraordinar și impresionant, cu un stil de hover!

Lecția 12: Adăugarea pictogramelor sociale cu Font Awesome

Această distribuție va fi dulce și scurtă, astfel încât să vă puteți odihni puțin și să învățați câteva sfaturi și trucuri rapide.

Adăugarea de link-uri de socializare cu pictogramele Font Awesome este o briză. O putem face cu un <i> eticheta și apoi adăugarea unui nume de clasă al unei pictograme pe care doriți să o adăugați.

De exemplu, iată cum puteți adăuga o pictogramă pentru GitHub după ce ați conectat Font Awesome în marcajul dvs.

<i class="fab fa-github"></i>

Lecția 13: Stilul subsolului

În timp ce icoanele sunt la locul lor, trebuie să adăugăm mai multe stiluri aici pentru a le configura așa cum avem nevoie.

Cu puțină utilizare a flexbox-ului și eliminarea stilului din listă cu list-style: none este relativ simplu.

Lecția 14: Configurarea stilurilor de navigare

Am lăsat navigarea până la urmă, deoarece de foarte multe ori este unul dintre acele lucruri simple care pot dura mai mult timp pentru a le configura și a le face corect.

După finalizare, navigarea va fi în afara ecranului, dar glisați atunci când un utilizator face clic pe pictograma hamburger. Primul pas este, totuși, să-l dăm stilul așa cum vrem să arate, apoi ne putem îngrijora să-l facem efectiv!

Lecția 14: Crearea hamburgerului

În acest ecran, veți afla cum să adăugați un meniu hamburger pentru a trece la vizualizarea de navigare. Nu este o pictogramă sau un svg, ci CSS pur.

Vom avea o practică întâmplătoare ::before și ::after pseudo-selectori, tranziție și, deoarece nu este un link, ci un button, de asemenea, trebuie să definim cursorul diferit atunci când trecem peste pictograma hamburger pentru a indica faptul că se poate face clic cu cursor: pointer.

Lecția 15: Adăugarea JS

Cu un pic de JavaScript, vă voi ghida prin implementarea unei tranziții foarte frumoase și ușoare de la ecranul nostru principal la fereastra de navigare, făcând clic pe meniul hamburger.

De asemenea, arunc o privire asupra modului în care putem adăuga în derulare lină cu CSS numai folosind scroll-behavior: smooth. Da, chiar este atât de simplu! De asemenea, face un tweet grozav pentru Today I Learned (TIL). Simțiți-vă liber să vă trimit TIL-uri la @scrimba și sunt sigur că vor fi cu adevărat fericiți să le redea pe Twitter!

Lecția 16: Crearea paginii articolului portofoliului

Cu pagina de pornire încheiată, este timpul să lucrați la o pagină de portofoliu șablon care poate fi utilizată pentru a oferi mai multe detalii despre fiecare dintre proiectele pe care le puneți în portofoliu.

De asemenea, vom învăța cum să o conectăm perfect cu pagina noastră principală pentru o experiență de utilizator plăcută.

Lecția 17: Personalizarea paginii dvs.

Aici intervine magia proprietăților personalizate CSS!

În acest videoclip, văd cum putem personaliza proprietățile personalizate pe care le-am configurat pentru a schimba schema de culori a site-ului dvs. în câteva secunde și cum putem actualiza fonturile rapid și ușor, pentru a face site-ul dvs. propriu!

Lecția 18: DigitalOcean Droplets – Ce sunt și cum să le configurați

În acest ecran, vom explora picăturile DigitalOcean. Acestea sunt mașini virtuale bazate pe Linux și că fiecare picătură este un server nou pe care îl puteți utiliza.

Poate părea descurajant, dar sunt foarte ușor de configurat, foarte personalizabile și vin cu o mulțime de caracteristici utile, cum ar fi un firewall automat.

Vă voi vorbi prin fiecare pas al drumului, astfel încât să știți exact cum să setați o picătură.

Lecția 19: DigitalOcean Droplets – Încărcarea fișierelor prin FTP

Pentru a finaliza întregul proces, permiteți-mi să vă arăt cum putem încărca portofoliul nostru în picătura pe care am creat-o în capitolul anterior și acum este online pentru alții să vadă!

Lecția 20: Încheiați

Si asta e! Următorul dvs. pas poate fi să faceți această pagină despre dvs., să adăugați toate exemplele relevante, să ne spuneți despre dvs. și să o faceți live într-o picătură DigitalOcean.

După ce le-ați pus împreună și ați obținut-o online, vă rugăm să ne împărtășiți portofoliul cu mine și echipa de la Scrimba! Ne puteți găsi la @KevinJPowell și @scrimba pe Twitter și am fi foarte bucuroși să vă împărtășim ceea ce faceți!

Consultați cursul complet

Amintiți-vă, acest curs este complet gratuit. Mergeți acum la Scrimba și puteți urmări împreună cu acesta și construi un site fantastic!