Slik bruker du en HTML-CV-mal for å lage ditt personlige nettsted

Det er mange måter å lage din personlige CV på. 

Du kan bruke en av mange nettsidebyggere, eller du kan velge et CMS som WordPress, Drupal eller lignende. Du kan også ansette en profesjonell utvikler for å lage en for deg.

Med så mange valg kan det være vanskelig å vite hvor du skal begynne. For å gjøre ting enda mer komplisert, kommer hver av disse alternativene med et annet sett med fordeler og ulemper, for ikke å nevne vanskelighetsgrad eller prislapp involvert.

Men det er en annen flott måte å lage ditt personlige nettsted på en rimelig tid. Og det er ved å bruke en HTML-CV-mal. De er enkle å bruke og å laste opp til din hosting server. 

Her er noen av de beste (for raskt å bla gjennom før du leser på): 

På toppen av det er koden bak en profesjonell CV-nettstedmal langt mindre komplisert for en nybegynner å plukke opp enn de mer komplekse programmeringsspråkene som brukes i innholdssystemer.

I denne delen av nettstedet Making a Great Personal Resume, går vi deg gjennom den enkle prosessen med hvordan du endrer og laster opp en HTML-CV. 

Følg denne arbeidsflyten for å lage ditt CV-nettsted og tilpasse det til ditt personlige merke, så du kan starte nettstedet ditt på kort tid. 

Hva trenger du for å få ditt CV-nettsted Live?

Før vi begynner med modifikasjon av nettstedsmat, la oss dekke verktøyene du trenger for å få HTML-CV-nettstedet ditt oppe og går:

1. Høyre Hosting Company

Innkjøp domenenavnet for nettstedet ditt er bare det første trinnet på reisen din. Du vil også trenge en hosting server hvor du vil laste opp filene til nettstedet ditt. Å finne det riktige vertsfirmaet er ikke lett, spesielt siden det er så mange av dem. De fleste hosting-leverandører tilbyr enkle hostingpakker mellom $ 5 og $ 10 i måneden. Noen selskaper tilbyr ubegrenset båndbredde og plass, mens andre tilbyr mer begrensede planer.

Det viktige å huske på er at nesten alle hosting-leverandører støtter HTML-maler. Når du handler for et vertsfirma, les gjennom deres vanlige spørsmål og forsikre deg om at selskapet gir kundesupport, hvis du trenger hjelp med nettstedet ditt. Du bør også gjøre litt forskning og lese gjennom vurderinger av en bestemt vert på uavhengige nettsteder for å se hvor fornøyd deres kunder er.

2. En FTP-klient

Når du har funnet et vertsfirma, må du laste ned en FTP-klient. En FTP-klient vil tillate deg å laste opp malen til hosting-serverne. Valget av FTP-programmet vil avhenge av operativsystemet som datamaskinen bruker.

En av de mest populære programmene er FileZilla. Det er et gratis FTP-program som er veldig enkelt å bruke, og det er tilgjengelig på Windows, Mac og Linux.

3. En kodeditor

Du vil også trenge en tekstredigerer for å gjøre endringer i malens filer. Mens du kan bruke Notisblokk eller TextEdit til å gjøre endringer, vil det være mye enklere å bruke en kodeditor. I motsetning til vanlige tekstredigerere inneholder en kodeditor verktøy som letter redigering, for eksempel å bruke forskjellige farger for ulike deler av koden, noe som gjør det lettere å se hva du redigerer.  

I denne veiledningen bruker jeg Sublime Text, som kan brukes på Mac, Windows og Linux, og prøveversjonen er gratis å laste ned. Lær mer om hvordan du arbeider med denne populære kodeditoren: 

4. HTML-malen og bildene for ditt CV-nettsted

De to siste tingene du trenger er HTML-CV-malen og bildene du planlegger å bruke på nettstedet ditt. 

I denne veiledningen skal jeg bruke Flatrica HTML gjenoppta nettside mal, vist her: 

Flatrica HTML gjenoppta nettside mal.

Du finner din nettside mal i Nedlastinger område av Envato-kontoen din etter at du har foretatt kjøpet. Når du har lastet ned HTML-siten, må du pakke ut mappen og lagre den på skrivebordet for enkel tilgang. 

Når det gjelder bilder, trenger du headshotet ditt og andre personlige bilder du planlegger å bruke. Du kan også bruke et bakgrunnsbilde eller mønster, så sørg for at du har alle bildene som er lagret på datamaskinen, slik at du kan legge dem til i mal.

Slik redigerer du Resume Website Template innhold

Nå som du har alt på plass, er det på tide å tilpasse malen med informasjonen din. La oss gå gjennom hvordan du tilpasser Flatrica HTML-malen: 

1. Strukturen til denne HTML-CV-malen

Før vi begynner å endre filene, la oss se på strukturen i denne HTML-malen. Når du pakker ut mappen, merker du at den inneholder to mapper: en med dokumentasjon og en med de faktiske malfiler.

Se på filene som er inkludert i denne HTML-CV-nettsamlingen.

Mappen med de faktiske nettstedsmalfilene har flere undermapper inne:

  • Farger, som har alle fargekoder og variabler som brukes i nettstedsmalen.
  • fonter, som inneholder alle ikonfonter.
  • Bilder med alle plassholderbilder.
  • En mappe har alle Javascript kode som trengs for at malen skal fungere skikkelig. I de fleste tilfeller trenger du aldri å redigere denne mappen eller filene i den, fordi JavaScript gir ekstra funksjonalitet, for eksempel å bytte menyen for å åpne, styre lysbildeanimasjonene og validere skjemaer.
  • EN PHP mappe som inneholder PHP-koden som er nødvendig for at kontaktskjemaet skal fungere. Du må bare redigere en enkelt kodekode her for å legge til din e-postadresse.
  • De sass mappen inneholder alle variablene for stilarkene.
  • stilark inneholder CSS-filene, som du må redigere for å legge til stylingen i malen og matche den med merkevaren din.

Bortsett fra disse mappene, er det også flere HTML-filer: indeks normal.html, indeks video.html, single-blog.html, og single-portfolio.html.

Husk at malen din kanskje ikke har alle disse filene og mappene; I de fleste tilfeller vil du imidlertid komme over stilarkene, bildene, JavaScript og PHP-mappene. Malen din kan også ha færre eller flere HTML-filer.

2. Bytte ut standard HTML-malinformasjon

Dobbeltklikk indeks normal.html(eller index.html hvis du bruker en annen mal). Dette åpner filen i nettleseren din, noe som gjør det enklere å forstå hvilke deler av koden du må redigere, og hvordan du finner dem i HTML-malfilen din.

Browserkode inspektør visning av HTML-malens kode.

Hvis du ser på malen i nettleseren din, ser du at du må redigere:

  • Ditt navn og kontaktinformasjon.
  • Baksiden av teksten over knappene for nedlasting av din CV.
  • Ulike seksjoner som har informasjon om utdanning, ferdigheter, erfaring, portefølje, tidligere klienter og mer.

Når du vet hva du skal endre, kan du begynne å lete etter den tilsvarende koden.

Høyreklikk på navnet som leser John Doe og velg Undersøke. Du vil legge merke til at et panel dukker opp nederst som viser HTML-koden som utgjør vår mal.

Linjen med kode som inneholder navnet er valgt i venstre side av Inspektør panel, med tilhørende stil på høyre side.

Som du kan se fra skjermbildet over, heter navnet mellom

koder, som er HTML-kodene som brukes til å representere overskrifter.

I de fleste tilfeller har tagpar som dette en åpning og en lukkekode, og innholdet må plasseres mellom disse kodene for å vises på en nettside, slik som dette:

John Doe

Hvis du vil redigere malen, er alt du trenger å vite, hvilke tagger som inneholder delen av siden du vil redigere, finne dem i koden, og erstatte dem med informasjonen din..

Åpne HTML-filen i editoren din

Gå nå tilbake til malmappen, høyreklikk på indeks normal.html, og velg Åpne med Sublime Text. Du bør nå se den komplette HTML-koden som utgjør malen din.

For å begynne å redigere malen, vil du finne den samme koden du så i inspeksjonspanelet i nettleseren din.

Rull ned til du finner den rundt linjer 150-151. Deretter klikker du mellom

merker og erstatt navnet med ditt eget.

Bytte standardnavn og kontaktinformasjon.

Deretter klikker du mellom

tagger, slett teksten og skriv inn yrket ditt.

Ved å gjenta disse trinnene igjen og igjen kan du erstatte all dummyinformasjonen med din egen.

Hvis det er en del i malen du ikke trenger, må du bare slette den. I skjermbildet under, har jeg valgt alt i Pristabell-delen og slettet all koden i den.

Du kan slette deler av koden du ikke trenger. 

Slik bytter du bilder med ditt eget

For å erstatte bildene med din egen, velg bare alle bildene i den tilsvarende mappen, slett dem og legg bildene dine i samme mappe. Hvis du fulgte rådene tidligere, har du kalt bildene dine med samme navn som plassholdere, noe som gjør det raskere å redigere malen.

Hvis du vil legge til mer informasjon, velg den eksisterende koden i ønsket seksjon, kopier det ved å klikke Kontroll / Kommando-C, og deretter lim den inn med Kontroll / Kommando-V. I skjermbildet under, jeg ønsket å legge til en annen ferdighetslinje, så jeg valgte koden for den fjerde ferdighetslinjen og kopierte den umiddelbart nedenfor:

Du kan kopiere deler av HTML hvis du trenger det.

Og sluttresultatet ser slik ut: 

Sluttproduktet av å legge til en annen ferdighetslinje.

Slik endrer du utseendet på ditt HTML-CV-nettsted

Når du har byttet ut all informasjon, er det på tide å utforme CV-nettstedet til din smak. Som standard leveres Flatrica HTML-malen med flere forskjellige stilark. Hvis du ser på stilark-mappen, merker du at de er oppkalt etter at de brukte fargene:

Flatrica kommer med mange stilark alternativer.

Du kan raskt justere fargen ved å erstatte stilarket i hodet på dokumentet med navnet på det foretrukne formatarket. Se etter linjen med kode som sier:

   

Endre navnet til style_blue.css vil gi vår mal en helt ny farge og se ut:

Resultatene av å bruke det blå stilarket.

Hvis du føler deg eventyrlystne, kan du redigere det viktigste stilarket som heter style.css med fonter og farger av eget valg. Du kan for eksempel redigere bakgrunnsfargen i style.css ved å skrive inn en HEX-kode for ønsket farge som slik:

bakgrunnsfarge: # 65b5c1;

Redigering av CSS kan gjøres på samme måte som vi redigerte HTML. Høyreklikk elementet du vil stil og klikk Undersøke. Denne gangen vil du se etter koden på høyre side av Inspektør kategorien og deretter finne den samme koden i kodeditoren.

En titt på sidenes males CSS-fil.

Slik laster du opp nettsidene til serveren

Etter at du har endret nettstedsmatfiler etter din smak, må du laste dem opp til din hosting server. Du burde ha mottatt en e-post fra verten din med den nødvendige informasjonen for overføring av filer via FTP.

For å starte opplastingsprosessen, start FTP-programmet. I dette tilfellet bruker jeg FileZilla. Skriv inn informasjonen fra verten din i topplinjen, og klikk deretter på Quickconnect:

Sette inn informasjon i FileZilla.

Finn mappen med malen på datamaskinen din på venstre side av skjermen, og klikk på den for å utvide den. I nedre venstre side velger du alle filene og mappene og drar dem over til høyre side av skjermen.

Pass på å laste dem opp til rotmappen til din hosting server i public_html mappe.

Laster opp filer til serveren via FTP.

Når alle filene er lastet opp, åpner du nettleseren din og skriver inn domenenavnet ditt. Gratulerer, ditt nye CV-nettsted er nå live!

4 raske tips for å gjøre ditt CV-nettsted fantastisk

Nå som du vet hvordan du bruker en HTML-CV, er det fire raske tips som vil hjelpe deg med å gjøre ditt personlige nettsted enda mer fantastisk:

  1. Komprim dine bilder: Før du laster opp filer til webserveren din, må du sørge for å redusere filstørrelsen på bildene dine ved å optimalisere dem. Dette vil hjelpe deg med å øke hastigheten på nettstedet ditt. Du kan bruke et verktøy som TinyJPG til å komprimere bildene uten å påvirke kvaliteten.
  2. Vurder å redusere stilarkene og JavaScript-filene dine: Som med bilder, reduserer filstørrelsen din side raskere. Verktøy som CSS Minifier og JSCompress vil gjøre jobben for deg.
  3. Legg til nettstedet ditt til dine sosiale medier: Du jobbet hardt for å lage nettstedet ditt, og nå er det på tide å la verden få vite det. Øk synligheten din ved å legge til nettstedet ditt i sosiale medier.
  4. Bruk den som en del av e-postnavnet ditt: En av de beste måtene å markedsføre nettstedet ditt er å legge det til din epost signatur. Det er enkelt, gratis, og tar sekunder å sette opp, men fordelene er mange. 

Sett opp HTML-CV-malen

Redigering av en HTML-mal kan virke skremmende først, men det er ikke så vanskelig når du forstår hvordan malen er strukturert og hva som må redigeres. Hvis du også tar deg tid til å lese noen opplæringsprogrammer, vil du mestre HTML og CSS på kort tid. Bruk vår veiledning ovenfor for å modifisere CV-siden din og øke sjansene for å bli ansatt.