Helló! A nevem Kevin Powell. Szeretem megtanítani az embereket arra, hogyan kell felépíteni az internetet, és hogyan kell jól kinézni, amíg dolgoznak rajta.
Örömmel jelenthetem be, hogy most indítottam el egy ingyenes tanfolyamot, amely megtanítja Önt, hogy hozzon létre saját, teljesen adaptív portfólió-webhelyet.
Miután befejezte ezt a tanfolyamot, lesz egy szép megjelenésű portfólió-oldala, amely segít az állásinterjúk és a szabadúszó koncertek lebonyolításában. Remek dolog megmutatni a barátaidnak és a családodnak is.
A portfóliót a Scrimba interaktív kódtanulási platformjának felhasználásával építjük fel, majd a DigitalOcean felhőszolgáltatásai segítségével telepítjük.
Ezenkívül a DigitalOcean nagylelkűen ingyenes hiteleket adott mindenkinek, aki beiratkozott , így semmibe sem kerül, ha elindítja és elindítja.
Ez a bejegyzés maga a tanfolyam bontása, amely képet ad arról, hogy mi szerepel az összes leckében. Ha tetszik, amit látsz, mindenképpen nézd meg a Scrimbán!
1. lecke: Bevezetés
Az első leckében áttekintést kap a tanfolyamból, hogy tudja, mire számíthat, mit kell tudnia a felvétel előtt, és mi lesz a vége a befejezés után. Gyors bevezetőt is adok magamnak.
2. lecke: A dolgok beállítása - HTML
A második részben bemutatom Önöket a Scrimba környezetben, és mi is elkészítjük a projektet.
Az összes kép mellékelve van, így még nem kell aggódnia a tökéletes fénykép keresése miatt. A portfólió kiépítésére koncentrálhatunk!
Ne felejtse el, hogy a dedikált tervezőoldalunkon mindent elérhet, amire szüksége van, a szövegtől és a színektől a betűtípusokig és még sok minden máshoz.
3. lecke: A fejléc területe - HTML
Végre itt az ideje elkezdeni a portfólió kiépítését. Ebben az előadásban létrehozzuk a fejléc szakaszt. Felvázoljuk a BEM módszertanát az osztálynevek CSS-ben történő beállítására, és azt hiszem, rájössz, hogy ez egyszerűvé és egyszerűvé teszi a navigációt.
4. lecke: Bevezető rész
A következő a portfólió Intro szakasza. Itt mutatkozunk be, és képet készítünk magunkról.
Végül hozzáadunk egy részt a fő képességekről / szolgáltatásokról, amelyeket megtehetünk. Pillanatnyilag csak betölthetjük az egészet „Lorem ipsum” szöveggel helyőrzőként, amíg készen áll arra, hogy saját szövegével kitöltse.
5. lecke: Rólam, Munka és lábléc - HTML
Ebben a fejezetben befejezzük a többi HTML-t az utolsó 3 szekcióval: Rólam, ahol részletesebben bemutatkozunk; Munka, ahol hozzáadjuk néhány portfólió példánkat és láblécünket.
A láblécek ideálisak az e-mail címek linkeléséhez, és megmutatom, hogyan kell ezt megtenni egy címkével. A közösségi média linkjeinket oda is felvehetjük.
Egyelőre mindez kissé nyersnek tűnik, és minden CSS-móka előttünk áll.
6. lecke: Az egyéni tulajdonságok és általános stílusok beállítása
Rendben, itt az ideje, hogy az oldal csodálatosan nézzen ki!
Ebben a részben megtanuljuk az egyéni tulajdonságok hozzáadását.
Noha a CSS-változók beállítása eltarthat egy ideig, a webhely összeállításával valóban megtérül. Tökéletesek arra is, hogy néhány másodperc alatt testre szabhassák a webhely színeit és betűtípusait, amit megnézek, hogyan kell csinálni, miután összecsomagoltuk a webhelyet.
7. lecke: A címek és feliratok stílusa
Az összes szükséges tipográfia beállítása után végigvezetem a szakaszaink címeinek és feliratainak megtervezéséhez és stílusához tartozó feliratokon.
8. lecke: A bevezető szakasz beállítása
A következő néhány fejezetben ez elég gyakorlati lesz, ezért ne aggódjon, ha van kedve párszor újra megnézni a képernyőt.
Mindent reagálva tartunk, használjuk a CSS Grid-et, és egy kicsit belemerülünk az emegységek használatába is.
Ez a tökéletes példa, ahol CSS Rács átragyog és fogunk tanulni, hogyan kell használni, mint a tulajdonságok grid-column-gap, grid-template-areasés grid-template-columns.
9. lecke: A szolgáltatások szakaszának kialakítása
Egy kis érdeklődés felkeltése érdekében megvizsgálom, hogyan adhatunk hozzá egy background-imagea webhely ezen szakaszához. Ez egy jó módszer a második felbontására és annak elkerülésére, hogy mindenhol legyen egyszínű háttér, és azt is megvizsgálom, hogyan használhatná background-blend-modea kép színének megváltoztatását annak érdekében, hogy webhelye megjelenése következetes maradjon.
Bónuszként azt is megtanuljuk, hogyan kell stilizálni a gombokat, amikor az egérrel az egérrel föléjük helyezzük őket, vagy ha kiválasztjuk őket, amikor az oldalon lapozunk.
10. lecke: A Rólam szakasz
Nagy haladás! Tehát ez a legfontosabb rólam szakasz. Ez nagyon hasonlít az Intro-hoz, mert a CSS Grid-et fogjuk használni, de mozgassuk a képet a jobb oldalra, és találjunk egy hasznos példát a CSS- fregységre.
11. lecke: A portfólió
Ebben a képernyőn megmutatom, hogyan kell felépíteni portfóliónkat, hogy bemutassuk néhány nagyszerű munkánkat. És még megtanuljuk, hogyan lehet cubic-bezier()nagyszerű és lenyűgöző hatást elérni némi lebegő stílus segítségével!
12. lecke: A közösségi ikonok hozzáadása a Félelmetes betűkészlettel
Ez a szereposztás kedves és rövid lesz, így pihenhet egy kicsit, és megtanulhat néhány gyors tippet és trükköt.
A közösségi média linkek hozzáadása a Font Awesome ikonokhoz szellő. Megtehetjük egy címkével, majd hozzáadhatunk egy osztálynevet egy hozzáadni kívánt ikonhoz.
Például, hogyan adhat hozzá egy ikont a GitHub-hoz, ha már összekapcsolta a Font Awesome-t a jelölésével.
13. lecke: A lábléc formázása
Amíg az ikonok a helyükön vannak, itt további stílusokat kell megadnunk, hogy a szükséges módon állíthatók be.
A flexbox kis használatával és a stílus eltávolításával a listából list-style: noneviszonylag egyenesen előre.
14. lecke: A navigációs stílusok beállítása
Az utoljára hagytuk a navigációt, mert nagyon gyakran ez az egyik egyszerű dolog, amely a leghosszabb ideig tarthat, és a megfelelő beállítás.
Miután elkészült, a navigáció nem képernyőn jelenik meg, de csúsztassa be, amikor a felhasználó rákattint a hamburger ikonra. Az első lépés az, hogy a megjelenéshez hasonlóan alakítsuk ki, majd aggódhatunk, hogy valóban működni fog-e!
14. lecke: A hamburger elkészítése
Ebben a képernyõben megtudhatja, hogyan adhat hozzá hamburger menüt a navigációs nézetre való áttéréshez. Ez nem egy ikon vagy egy svg, hanem tiszta CSS.
Esélyes gyakorlatot ::beforeés ::afterálválasztókat, átállást fogunk folytatni , és mivel ez nem egy link, hanem egy button, meg kell határoznunk a különböző kurzort is, amikor a hamburger ikon fölé mutatunk, jelezve, hogy rákattinthatunk cursor: pointer.
15. lecke: A JS hozzáadása
Egy kis JavaScript használatával végigvezetek egy igazán szép és zökkenőmentes átmenetet a főképernyőnktől a navigációs ablakig a hamburger menü kattintásával.
Azt is megvizsgálom, hogy miként adhatunk hozzá sima görgetést CSS-sel csak a használatával scroll-behavior: smooth. Igen, ez tényleg ilyen egyszerű! Remek tweetet is készít a Today I Learned (TIL) számára. Nyugodtan küldhet neked TIL-okat a @scrimba címre, és biztos vagyok benne, hogy nagyon szívesen retweetelik őket!
16. lecke: A portfólióelem oldal létrehozása
A kezdőlap be van csomagolva, itt az ideje, hogy dolgozzon egy sablon portfólió oldalon, amely segítségével további részleteket adhat meg a portfólióba helyezett projektekről.
Azt is megtanuljuk, hogyan lehet zökkenőmentesen összekapcsolni a főoldalunkkal a kellemes felhasználói élmény érdekében.
17. lecke: Az oldal testreszabása
Itt jön be a CSS egyedi tulajdonságainak varázsa!
Ebben a videóban azt vizsgálom, hogyan testreszabhatjuk azokat az egyedi tulajdonságokat, amelyeket azért állítottunk be, hogy másodpercek alatt megváltoztassuk a webhely színvilágát, és hogyan tudjuk gyorsan és egyszerűen frissíteni a betűtípusokat annak érdekében, hogy a webhely saját legyen!
18. lecke: DigitalOcean cseppek - mik ezek, és hogyan kell beállítani
Ebben a képernyőn a DigitalOcean cseppeket fogjuk felfedezni. Linux alapú virtuális gépek, és minden csepp egy új szerver, amelyet használhat.
Ijesztőnek tűnhet, de rendkívül könnyen beállíthatók, nagyon testreszabhatóak és sok hasznos funkcióval rendelkeznek, például automatikusan tűzfalat.
Minden egyes lépésén átbeszéllek, hogy pontosan tudd, hogyan kell felállítani egy cseppet.
19. lecke: DigitalOcean cseppek - Fájlok feltöltése FTP-n keresztül
Az egész folyamat befejezéséhez hadd mutassam meg, hogyan tölthetjük fel portfóliónkat az előző fejezetben létrehozott cseppecskékbe, és most online elérhetővé teszi mások számára!
20. lecke: Csomagolás
És ez az! A következő lépés az lehet, hogy ezt az oldalt rólad készíted, adj hozzá minden releváns példát, mesélj rólad és tedd életessé egy DigitalOcean cseppekben.
Miután összerakta a tiéd és megkapta az internetet, kérjük, ossza meg portfólióját velem és a Scrimba csapatával! Megtalálhat minket a @KevinJPowell és a @scrimba címen a Twitteren, és mi nagyon szívesen megosztanánk, mire készülsz!
Nézze meg a teljes tanfolyamot
Ne feledje, hogy ez a tanfolyam teljesen ingyenes. Most lépjen át Scrimba-ba, és kövesse vele, és felépíthet egy fantasztikus megjelenésű oldalt!