Kako izraditi i implementirati vlastitu web stranicu s osobnim portfeljem

Zdravo! Zovem se Kevin Powell. Volim podučavati ljude kako graditi mrežu i kako učiniti da izgleda dobro dok su kod nje.

Uzbuđena sam što mogu objaviti da sam upravo pokrenula besplatni tečaj koji vas uči kako stvoriti vlastitu web stranicu s punim odzivom .

Nakon što završite ovaj tečaj, imat ćete urednu web stranicu s portfeljem koja će vam pomoći da nađete razgovore za posao i slobodne koncerte. To je također cool stvar pokazati svojim prijateljima i obitelji.

Izgradit ćemo portfelj koristeći Scrimbinu interaktivnu platformu za učenje koda, a zatim ćemo ga implementirati pomoću oblačnih usluga DigitalOcean.

Također, DigitalOcean je velikodušno dao svima koji se upišu besplatan kredit , tako da vas neće koštati ništa ako ga pokrenete.

Ovaj je post raščlamba samog tečaja koji vam daje predodžbu o onome što je uključeno u sve lekcije. Ako vam se sviđa ono što vidite, provjerite to na Scrimbi!

Lekcija 1: Uvod

U prvoj lekciji dobit ćete pregled tečaja kako biste znali što možete očekivati, što biste trebali znati prije polaganja i što ćete završiti nakon što završite. Također vam dam brz uvod u sebe.

Neke općenite informacije o autoru tečaja

Lekcija 2: Postavljanje stvari - HTML

U drugom dijelu pokazat ću vam okolinu Scrimba, a mi ćemo također postaviti projekt.

Sve su slike isporučene, pa još uvijek nećete morati brinuti hoćete li potražiti savršenu fotografiju. Možemo se usredotočiti na izgradnju portfelja!

Ne zaboravite da na našoj posvećenoj stranici o dizajnu možete pristupiti svemu što vam treba, od teksta i boja do fontova i još mnogo toga.

Lekcija 3: Područje zaglavlja - HTML

Napokon je vrijeme da počnemo graditi portfelj. U ovom predavanju stvorit ćemo zaglavlje. Razmotrit ćemo BEM metodologiju za postavljanje naziva klasa u CSS-u i mislim da ćete otkriti da ovo čini navigaciju jednostavnom i jednostavnom za stvaranje.

Lekcija 4: Uvodni dio

Slijedi uvodni dio portfelja. Ovdje ćemo se predstaviti i staviti sliku o sebi.

Na kraju dodajemo odjeljak o glavnim vještinama / uslugama koje možemo učiniti. Trenutno to možemo samo popuniti tekstom "Lorem ipsum" kao rezervirano mjesto, dok ne budete spremni ispuniti ga vlastitim tekstom.

Lekcija 5: O meni, posao i podnožje - HTML

U ovom poglavlju dovršavamo ostatak HTML-a s posljednja 3 odjeljka: O meni, gdje ćemo se predstaviti detaljnije; Posao, gdje ćemo dodati neke od primjera iz portfelja i podnožje.

Podnožja su idealna za povezivanje s adresama e-pošte, a ja ću vam pokazati kako to učiniti s oznakom. Tamo također možemo dodati veze na društvenim mrežama.

Za sada sve izgleda pomalo sirovo i sva CSS zabava je pred nama.

Lekcija 6: Postavljanje prilagođenih svojstava i općih stilova

U redu, vrijeme je da ta stranica izgleda nevjerojatno!

U ovom ćemo dijelu naučiti kako dodati prilagođena svojstva.

Iako postavljanje CSS varijabli može potrajati, stvarno se isplati kad se web stranica okuplja. Oni su također savršeni za omogućavanje prilagodbe boja i fontova stranice u samo nekoliko sekundi, a ja pogledam kako to učiniti nakon što završimo s radom.

Lekcija 7: Stiliziranje naslova i titlova

Nakon postavljanja sve potrebne tipografije, provest ću vas kroz titlove dizajniranja i oblikovanja naslova i titlova u našim odjeljcima.

Lekcija 8: Postavljanje uvodnog odjeljka

Tijekom sljedećih nekoliko poglavlja bit će prilično praktično, pa ne brinite ako vam se nekoliko puta sviđa da ponovno gledate screencastave.

Odgovaramo na sve, koristeći CSS Grid i malo zaranjajući i u upotrebu emjedinica.

To je savršen primjer gdje CSS Grid sja kroz te ćemo naučiti kako koristiti svojstva kao što su grid-column-gap, grid-template-areasi grid-template-columns.

Uvodni dio stranice

Lekcija 9: Oblikovanje odjeljka usluga

Da bih dodao malo interesa, gledam kako možemo dodati a background-imageovom dijelu web stranice. To je lijep način da prekinete sekundu i izbjegnete samo postojanje jednobojnih pozadina posvuda, a također gledam i kako biste mogli background-blend-modepromijeniti boju slike kako biste zadržali dosljedan izgled svoje web stranice.

Kao bonus, naučit ćemo i kako oblikovati gumbe kada prelaze kursorom ili odabirom kad prelazimo preko stranice.

Odjeljak usluge na web mjestu

Lekcija 10: O meni odjeljak

Veliki napredak! Dakle, ovo je najvažniji odjeljak O meni. Ovaj je prilično sličan uvodu, jer ćemo koristiti CSS Grid, ali pomaknite sliku na desnu stranu i pronađite koristan primjer za CSS frjedinicu.

Odjeljak O meni na web mjestu

Lekcija 11: Portfelj

Odjeljak portfelja

U ovom screencast-u pokazat ću kako izraditi odjeljak portfelja kako bismo prikazali neka naša sjajna djela. A čak ćemo naučiti i kako iskoristiti cubic-bezier()sjajan i impresivan efekt uz neki hover styling!

Odjeljak portfelja s istaknutom stavkom

Lekcija 12: Dodavanje društvenih ikona s Font Awesome

Glumačka postava bit će slatka i kratka, pa se možete malo odmoriti i naučiti nekoliko brzih savjeta i trikova.

Dodavanje poveznica na društvenim mrežama s ikonama Font Awesome je povjetarac. To možemo učiniti s oznakom, a zatim dodati naziv klase ikone koju želite dodati.

Kao primjer, evo kako dodati ikonu za GitHub nakon što u oznaci povežete Font Awesome.

Lekcija 13: Stiliziranje podnožja

Podnožje

Dok su ikone na mjestu, ovdje trebamo dodati još stylinga kako bi se postavile onako kako mi trebamo.

Uz malo upotrebe flexboxa i uklanjanja stylinga s popisa list-style: nonerelativno je ravno naprijed.

Lekcija 14: Postavljanje navigacijskih stilova

Navigaciju smo ostavili do posljednjeg, jer je vrlo često to jedna od onih jednostavnih stvari kojima se može najduže postaviti i ispravno odraditi.

Nakon završetka, navigacija će biti izvan zaslona, ​​ali uvući se kad korisnik klikne na ikonu hamburgera. Prvi korak je ipak da se stilizira onako kako mi želimo da izgleda, a onda se možemo brinuti hoće li to zapravo uspjeti!

stilski navigacijski izbornik

Lekcija 14: Stvaranje hamburgera

snimak vrha stranice strelicom koja ističe ikonu hamburgera

U ovom screencast-u naučit ćete kako dodati izbornik hamburgera za prelazak u prikaz navigacije. To nije ikona ili svg, već čisti CSS.

Imat ćemo vježbanje šansi ::beforei ::afterpseudo-selektore, prijelaz, a, budući da to nije veza, već a button, trebamo definirati i drugi pokazivač kada zadržimo pokazivač iznad ikone hamburgera kako bismo naznačili da se na njega može kliknuti cursor: pointer.

Lekcija 15: Dodavanje JS-a

Uz malo JavaScripta, provest ću vas kroz provedbu doista lijepog i glatkog prijelaza s našeg glavnog zaslona na navigacijski prozor na klik izbornika hamburgera.

animacija otvaranje / zatvaranje izbornika

Također pogledam kako možemo dodati glatko pomicanje s CSS-om samo pomoću scroll-behavior: smooth. Da, stvarno je tako jednostavno! Također je sjajan tweet za Today I Learned (TIL). Slobodno vam pošaljite TIL-ove na @scrimba i siguran sam da će ih zaista rado proslijediti!

Lekcija 16: Izrada stranice stavke portfelja

Kad je početna stranica zamotana, vrijeme je da radite na stranici portfelja predložaka koja se može koristiti za davanje više detalja o svakom projektu koji stavljate u svoj portfelj.

Također ćemo naučiti kako ga bez problema povezati s našom glavnom stranicom radi lijepog korisničkog iskustva.

stranica stavki portfelja

Lekcija 17: Prilagođavanje vaše stranice

Tu dolazi do čarolije CSS prilagođenih svojstava!

U ovom videozapisu gledam kako možemo prilagoditi prilagođena svojstva koja smo postavili za promjenu sheme boja vaše web stranice u roku od nekoliko sekundi i kako možemo brzo i jednostavno ažurirati fontove kako bismo stranicu učinili svojom!

Lekcija 18: DigitalOcean kapljice - što su i kako ih postaviti

U ovom screencast-u istražit ćemo kapljice DigitalOcean. Oni su virtualni strojevi zasnovani na Linuxu i svaka kapljica je novi poslužitelj koji možete koristiti.

Može izgledati zastrašujuće, ali postave su vrlo jednostavne, vrlo prilagodljive i dolaze s puno korisnih značajki, poput automatskog vatrozida.

Nadzorna ploča DigitalOcean

Provest ću vas kroz svaki pojedinačni korak kako biste točno znali kako postaviti kapljicu.

Lekcija 19: DigitalOcean kapljice - prijenos datoteka putem FTP-a

Da završimo cijeli postupak, dopustite mi da vam pokažem kako možemo prenijeti svoj portfelj u kapljicu koju smo stvorili u prethodnom poglavlju, a sada je na mreži da je drugi vide!

Lekcija 20: Zamotajte

I to je to! Vaš sljedeći korak može biti da ovu stranicu napravite o sebi, dodate sve relevantne primjere, ispričate nam o sebi i učinite je živom u kapljici DigitalOcean.

Nakon što sastavite svoj i na mreži, podijelite svoj portfolio sa Mnom i timom u Scrimbi! Možete nas pronaći na @KevinJPowell i @scrimba na Twitteru, a mi bismo zaista rado podijelili s vama na čemu ste!

Pogledajte cijeli tečaj

Zapamtite, ovaj tečaj je potpuno besplatan. Krenite odmah do Scrimbe i možete pratiti zajedno s njom i izgraditi stranicu fantastičnog izgleda!

Original text