Sådan opbygges og implementeres dit eget personlige porteføljeside

Hej! Mit navn er Kevin Powell. Jeg elsker at lære folk, hvordan man bygger internettet, og hvordan man får det til at se godt ud, mens de er ved det.

Jeg er begejstret for at kunne meddele, at jeg lige har lanceret et gratis kursus, der lærer dig at oprette dit helt eget responsive portfolio-websted.

Når du er færdig med dette kursus, har du et pænt porteføljeside, der hjælper dig med at lande jobinterviews og freelance-koncerter. Det er også en sej ting at vise til dine venner og familie.

Vi bygger porteføljen ved hjælp af Scrimbas interaktive kodeindlæringsplatform og derefter implementerer den ved hjælp af DigitalOceans skytjenester.

DigitalOcean har også været generøs til at give alle, der tilmelder sig en gratis kredit , så det koster dig ikke noget at få det i gang.

Dette indlæg er en oversigt over selve kurset, der giver dig en idé om, hvad der er inkluderet i alle lektionerne. Hvis du kan lide det, du ser, skal du sørge for at tjekke det ud på Scrimba!

Lektion 1: Introduktion

I den første lektion får du et overblik over kurset, så du ved, hvad du kan forvente, hvad du skal vide, før du tager det, og hvad du ender med, når du er færdig. Jeg giver dig også en hurtig introduktion til mig selv.

Nogle generelle oplysninger om forfatteren af ​​kurset

Lektion 2: Opsætning af ting - HTML

I del to vil jeg vise dig rundt i Scrimba-miljøet, og vi vil også oprette projektet.

Alle billederne leveres, så du behøver ikke bekymre dig om at lede efter det perfekte foto endnu. Vi kan fokusere på at opbygge porteføljen!

Glem ikke, at du kan få adgang til alt hvad du har brug for fra tekst og farver til skrifttyper og meget mere på vores dedikerede designside.

Lektion 3: Overskriftområdet - HTML

Det er endelig tid til at begynde at opbygge porteføljen. I denne forelæsning opretter vi overskriftsafsnittet. Vi vil gøre noget ved BEM-metoden til indstilling af klassenavne i CSS, og jeg tror, ​​du finder ud af, at dette gør navigationen enkel og ligetil at oprette.

Lektion 4: Introduktion

Dernæst er introduktionssektionen i porteføljen. Det er her, vi vil introducere os selv og sætte et billede af os selv.

Til sidst tilføjer vi et afsnit om de vigtigste færdigheder / tjenester, vi kan udføre. I øjeblikket kan vi bare udfylde det hele med "Lorem ipsum" -tekst som pladsholder, indtil du er klar til at udfylde det med din egen tekst.

Lektion 5: Om mig, arbejde og sidefod - HTML

I dette kapitel afslutter vi resten af ​​vores HTML med de sidste 3 sektioner: Om mig, hvor vi vil introducere os mere detaljeret; Arbejd, hvor vi tilføjer nogle af vores porteføljeeksempler og vores sidefod.

Sidefod er ideelle til at linke til e-mail-adresser, og jeg viser dig, hvordan du gør det med et tag. Vi kan også tilføje vores sociale medielinks der også.

For nu ser det hele lidt rå ud, og alt CSS-sjovet ligger foran os.

Lektion 6: Opsætning af brugerdefinerede egenskaber og generelle stilarter

Okay, tid til at få den side til at se fantastisk ud!

I denne del vil vi lære at tilføje tilpassede egenskaber.

Mens opsætning af CSS-variabler kan tage noget tid, betaler det sig virkelig, når webstedet kommer sammen. De er også perfekte til at give dig mulighed for at tilpasse sidens farver og skrifttyper på få sekunder, hvilket jeg ser på, hvordan man gør, når vi afslutter webstedet.

Lektion 7: Styling af titler og undertekster

Efter at have indstillet al den nødvendige typografi vil jeg lede dig gennem underteksterne til at designe og style titlerne og underteksterne i vores sektioner.

Lektion 8: Opsætning af introduktionssektionen

I løbet af de næste par kapitler vil det være ret praktisk, så ingen bekymringer, hvis du har lyst til at se screencasts igen et par gange.

Vi holder alt lydhør, bruger CSS Grid og tager også lidt dyk i at bruge emenheder.

Dette er det perfekte eksempel, hvor CSS Grid skinner igennem, og vi vil lære at bruge egenskaber som grid-column-gap, grid-template-areasog grid-template-columns.

Introduktionssektion af webstedet

Lektion 9: Styling af servicesektionen

For at tilføje en smule interesse ser jeg på, hvordan vi kan føje en background-imagetil dette afsnit af siden. Det er en god måde at opdele det andet på og undgå blot at have baggrundsfarvebaggrund overalt, og jeg ser også på, hvordan du kan bruge background-blend-modetil at ændre farven på billedet for at holde udseendet på dit websted ensartet.

Som en bonus vil vi også lære at udforme knapper, når de holdes over eller vælges, når vi bladrer gennem siden.

Servicesektionen på webstedet

Lektion 10: Om mig-sektionen

Store fremskridt! Så dette er det vigtige afsnit om mig. Denne ligner temmelig Intro, fordi vi skal bruge CSS Grid, men flytte billedet til højre og finde et nyttigt eksempel til CSS- frenhed.

Om mig-sektionen på webstedet

Lektion 11: Porteføljen

Porteføljesektionen

I denne screencast vil jeg vise, hvordan vi bygger vores porteføljesektion til at vise nogle af vores fantastiske arbejde. Og vi skal endda lære at bruge cubic-bezier()til en stor og imponerende effekt med noget svævende styling!

Porteføljesektion med fremhævet vare

Lektion 12: Tilføjelse af de sociale ikoner med Font Awesome

Denne rollebesætning vil være sød og kort, så du kan hvile lidt og lære nogle hurtige tip og tricks.

At tilføje links til sociale medier med Font Awesome-ikoner er en leg. Vi kan gøre det med et tag og derefter tilføje et klassenavn på et ikon, du vil tilføje.

Som et eksempel kan du her tilføje et ikon til GitHub, når du har knyttet Font Awesome til din markering.

Lektion 13: Styling af sidefoden

Sidefoden

Mens ikonerne er på plads, skal vi tilføje mere styling her for at få dem til at blive opsat, som vi har brug for.

Med lidt brug af flexbox og fjernelse af styling fra listen med list-style: nonedet relativt ligetil.

Lektion 14: Opsætning af navigationsstilarter

Vi har forladt navigationen til det sidste, fordi det ofte er en af ​​de enkle ting, der kan tage længst tid at konfigurere og gøre korrekt.

Når den er afsluttet, vil navigationen være uden for skærmen, men glide ind, når en bruger klikker på hamburgerikonet. Det første skridt er dog at få det stylet, som vi vil have det til at se ud, så kan vi bekymre os om at få det til at fungere!

stylet navigationsmenu

Lektion 14: Oprettelse af hamburger

skudt øverst på siden med en pil, der fremhæver hamburger-ikonet

I denne screencast lærer du, hvordan du tilføjer en hamburger-menu for at skifte til navigationsvisningen. Det er ikke et ikon eller en svg, men ren CSS.

Vi får en chanceøvelse ::beforeog ::afterpseudovælgere, overgang, og da det ikke er et link, men a button, er vi også nødt til at definere den forskellige markør, når vi holder markøren over hamburgerikonet for at indikere, at det kan klikkes med cursor: pointer.

Lektion 15: Tilføjelse af JS

Med en smule JavaScript vil jeg lede dig gennem implementeringen af ​​en rigtig flot og jævn overgang fra vores hovedskærm til navigationsvinduet ved klik på hamburger-menuen.

menu åbne / lukke animation

Jeg kigger også på, hvordan vi kun kan tilføje i jævn rulning med CSS ved hjælp af scroll-behavior: smooth. Ja, det er virkelig så simpelt! Det giver også en god tweet til Today I Learned (TIL). Du er velkommen til at sende dig TIL'er til @scrimba, og jeg er sikker på, at de vil være rigtig glade for at retweet dem!

Lektion 16: Oprettelse af porteføljepostsiden

Med hjemmesiden pakket, er det tid til at arbejde på en skabelonporteføljeside, der kan bruges til at give flere detaljer om hvert af de projekter, du lægger i din portefølje.

Vi vil også lære at linke det problemfrit med vores hovedside for en god brugeroplevelse.

portefølje vare side

Lektion 17: Tilpasning af din side

Det er her, magien ved tilpassede CSS-egenskaber kommer ind!

I denne video ser jeg på, hvordan vi kan tilpasse de brugerdefinerede egenskaber, som vi opretter for at ændre farveskemaet på dit websted inden for få sekunder, og hvordan vi også hurtigt og nemt kan opdatere skrifttyperne for at gøre webstedet til dit eget!

Lektion 18: DigitalOcean-dråber - Hvad de er, og hvordan man opretter en

I denne screencast skal vi udforske DigitalOcean-dråber. De er Linux-baserede virtuelle maskiner, og at hver dråbe er en ny server, du kan bruge.

Det kan virke skræmmende, men de er super nemme at konfigurere, meget tilpasselige og leveres med mange nyttige funktioner, som en firewall automatisk.

DigitalOcean-instrumentbræt

Jeg taler dig igennem hvert eneste trin på vejen, så du ved præcis, hvordan du sætter en dråbe op.

Lektion 19: DigitalOcean-dråber - Uploade filer via FTP

For at afslutte hele processen, lad mig vise dig, hvordan vi kan uploade vores portefølje til den dråbe, vi har oprettet i det forrige kapitel, og nu er det online for andre at se!

Lektion 20: Pak ind

Og det er det! Dit næste skridt kan være at gøre denne side alt om dig, tilføje alle relevante eksempler, fortælle os om dig og få den til at leve i en DigitalOcean-dråbe.

Når du har samlet din og fået den online, så del din portefølje med mig og teamet på Scrimba! Du kan finde os på @KevinJPowell og @scrimba på Twitter, og vi vil meget gerne dele, hvad du har lyst til!

Tjek hele kurset

Husk, dette kursus er helt gratis. Gå videre til Scrimba nu, og du kan følge med på det og opbygge et fantastisk site!