Med utviklingen av så mange programmerings-, stil- og markeringsspråk, blir det mer komplisert enn noensinne å lære webdesign. Heldigvis er det tonnevis med verktøy tilgjengelig for å hjelpe deg i gang. Se etter noen få grunnleggende ressurser, som online opplæringsprogrammer eller en oppdatert bok om webdesign. Når du er klar til å begynne, begynner du med å mestre det grunnleggende i HTML og CSS. Deretter kan du begynne å utforske mer avanserte språk for webdesign, som JavaScript!
Trinn
Metode 1 av 4: Finne ressurser for webdesign
Trinn 1. Sjekk online designkurs og opplæringsprogrammer på nettet
Internett er fullt av detaljert informasjon om webdesign, og mye av det er fritt tilgjengelig. Du kan begynne med å ta noen gratis online kurs om Udemy eller CodeCademy, eller bli med i et kodingssamfunn som freeCodeCamp. Du kan også finne opplæringsvideoer for webdesign på YouTube.
- Hvis du vet nøyaktig hva du leter etter, kan du prøve å gjøre et søk med spesifikke termer (f.eks. "Klassevelgere i CSS -opplæring").
- Hvis du er nybegynner uten webdesignerfaring, begynn med å lære om det grunnleggende for koding i HTML og CSS.
Trinn 2. Se på å ta en klasse på en lokal høyskole eller universitet
Hvis du går på en høyskole eller et universitet, kan du kontakte skolens datavitenskapelige avdeling eller konsultere kurskatalogen din for å finne ut om det er noen webdesignkurs. Hvis du ikke går på skole, sjekk om noen høyskoler eller universiteter i nærheten av deg tilbyr etterutdanningskurs i webdesign.
Noen universiteter tilbyr online webdesign -klasser som er åpne for alle som ønsker å melde seg på. Sjekk nettsteder som Coursera.org for å finne gratis eller rimelige klasser for webdesign undervist av universitetsinstruktører
Trinn 3. Få noen webdesignbøker fra bokhandelen eller biblioteket
En god bok om webdesign kan være en uvurderlig referanse mens du lærer og bruker håndverket ditt. Se etter oppdaterte bøker om generelt webdesign eller spesifikke kodingsformater og språk du ønsker å lære.
Å lese blader og blogginnlegg om webdesign er også en god måte å lære nye teknikker, få inspirasjon og holde tritt med de siste trendene
Trinn 4. Last ned eller kjøp noe webdesignprogramvare
God webdesign -programvare kan hjelpe deg med å bygge nettsteder mer effektivt og effektivt, og er også flott for å hjelpe deg med å lære inn og ut av bruk av koding, skripting og andre viktige designelementer. Du kan ha fordeler av å bruke verktøy som:
- Grafiske designprogrammer, som Adobe Photoshop, GIMP eller Sketch.
- Nettverksbyggingsverktøy, for eksempel WordPress, Chrome DevTools eller Adobe Dreamweaver.
- FTP -programvare for overføring av ferdige filer til serveren din.
Trinn 5. Finn noen nettstedsmaler du kan leke med når du kommer i gang
Det er ikke noe galt i å bruke maler mens du lærer det grunnleggende om webdesign. Søk etter websidemaler du liker, og ta en nærmere titt på koden for å få en ide om hvordan designeren satte siden sammen. Du kan også eksperimentere med å endre koden og legge til dine egne elementer i malen.
Søk etter gratis nettstedsmaler for å komme i gang, eller eksperimentere med maler som følger med webdesignprogramvaren din
Metode 2 av 4: Mestring av HTML
Trinn 1. Gjør deg kjent med grunnleggende HTML -koder
HTML er et enkelt kodespråk som brukes til å formatere de grunnleggende elementene på et nettsted. Du kan formatere forskjellige elementer på nettstedet ditt ved å bruke tagger. Etiketter vises i vinkelparenteser før og etter hvert element, og gir instruksjoner om hvordan elementet vil fungere på siden. For å lukke etiketten, sett a / foran den siste taggen inne i de vinklede brakettene.
- For eksempel hvis du vil at noe av teksten din skal være modig, vil du omgi elementet med taggen, slik: Denne teksten er fet.
- Noen få vanlige koder inkluderer (avsnitt), (anker, som definerer koblet tekst) og (skrift, som kan bidra til å definere forskjellige attributter til teksten, for eksempel størrelse og farge).
- Andre koder definerer de forskjellige delene av selve HTML -dokumentet. For eksempel brukes til å inneholde informasjon om siden som ikke vil være synlig for seeren, for eksempel søkeord eller en sidebeskrivelse som vil vises i søkemotorresultater.
Trinn 2. Lær å bruke tag -attributter
Noen koder trenger tilleggsinformasjon for å spesifisere hvordan de skal fungere. Denne tilleggsinformasjonen vises i åpningstaggen, og den kalles et "attributt". Attributtnavnet vises umiddelbart etter tagnavnet, atskilt med et mellomrom. Attributtverdien er knyttet til attributtnavnet med et = -tegn og omgitt av anførselstegn.
- For eksempel, hvis du ville gjøre noen av teksten din rød, kan du gjøre det ved å bruke taggen og et passende skriftfargeattributt, slik: Denne teksten er rød.
- Mange av effektene som en gang ble rutinemessig oppnådd med HTML -tag -attributter, for eksempel å angi forskjellige skriftfarger, gjøres nå vanligvis med CSS -koding i stedet.
Trinn 3. Eksperimenter med nestede elementer
HTML lar deg også plassere elementer i andre elementer for å lage mer kompleks formatering. For eksempel, hvis du ønsket å definere et avsnitt og deretter kursivere noen av teksten i avsnittet, kan du gjøre det slik:
Jeg elsker koding!
Trinn 4. Bli kjent med tomme elementer
Noen elementer i HTML trenger ikke både åpne og lukke koder. For eksempel, hvis du setter inn et bilde, trenger du bare en enkelt "img" -tagge som inneholder tagnavnet og andre nødvendige attributter (for eksempel bildefilnavnet og eventuell alternativ tekst du vil legge til for tilgjengelighetsformål). For eksempel:
Trinn 5. Utforsk den grunnleggende utformingen av et HTML -dokument
For at ditt HTML-baserte nettsted skal fungere skikkelig, må du vite hvordan du formaterer hele siden. Dette innebærer å definere hvor HTML -koden din begynner og slutter, samt bruk av tagger for å bestemme hvilke deler av koden som skal vises mot hvilke som er der for å gi skjult bakgrunnsinformasjon. For eksempel:
- Bruk taggen til å definere siden din som et HTML -dokument.
- Deretter inneholder du hele siden din i taggene for å definere hvor koden begynner og slutter.
- Plasser all informasjon som ikke vil bli vist for seeren, for eksempel sidetittel, søkeord og sidebeskrivelse, i taggene.
- Definer brødteksten på siden din (dvs. all tekst og bilder du vil at seeren skal se) med taggene.
Metode 3 av 4: Bli kjent med CSS
Trinn 1. Bruk CSS til å bruke stiler på HTML -dokumentene dine
CSS er et stilarkspråk som lar deg bruke forskjellige stil- og designelementer på nettsiden din. For eksempel, hvis du vil selektivt bruke en bestemt skrift eller tekstfarge på noen av tekstelementene på siden din, kan du opprette en CSS -fil for å gjøre det. Deretter kan du sette inn CSS -filen i HTML -dokumentet ditt hvor du vil.
-
Hvis du for eksempel vil at en CSS -fil skal gjøre alle avsnittselementene i HTML -dokumentet grønt, kan du lage en.css -fil som inneholder linjene:
- p {
- farge: grønn;
- }
- Du vil da lagre filen med et navn som style.css.
- For å bruke stilarket på HTML -dokumentet ditt, setter du det inn som et tomt koblingselement i kodene. For eksempel:
Trinn 2. Bli kjent med elementene i et CSS -regelsett
En individuell del av CSS -koden kalles et "regelsett". Regelsettet inneholder de forskjellige elementene som definerer hva du vil at koden din skal gjøre. Disse inkluderer:
- Velgeren, som definerer HTML -elementet du vil style. For eksempel, hvis du vil at regelen din skal påvirke avsnittselementer, starter du regelsettet med bokstaven "p".
- Erklæringen, som definerer egenskapene du vil style (for eksempel skriftfarge). Erklæringen finnes innenfor krøllete parenteser {}.
- Egenskapen, som angir hvilken egenskap for HTML -elementet du vil style. For eksempel i merket kan du angi at du vil style fargen på teksten.
- Eiendomsverdien definerer spesifikt hvordan du vil endre egenskapen (f.eks. Hvis egenskapen er skriftfarge, vil eiendomsverdien være "grønn").
- Du kan endre flere forskjellige egenskaper i en enkelt erklæring.
Trinn 3. Bruk CSS på teksten din for å få skrivemåten til å se fin ut
CSS er nyttig for å bruke en rekke effekter på teksten din uten å måtte kode hver eiendom individuelt i HTML. Eksperimenter med å endre forskjellige typer egenskaper i CSS, inkludert:
- Skriftfarge
- Skriftstørrelse
- Skriftfamilie (f.eks. Utvalget av fonter du vil bruke i teksten din)
- Tekstjustering
- Linjehøyde
- Avstand mellom bokstavene
Trinn 4. Eksperimenter med bokser og andre CSS -layoutverktøy
CSS er også nyttig for å legge til attraktive visuelle elementer på siden din, for eksempel tekstbokser og tabeller. I tillegg kan du bruke den til å endre det generelle oppsettet på siden din og definere hvor de forskjellige elementene er plassert i forhold til hverandre.
For eksempel kan du definere attributter som bredden og bakgrunnsfargen til et element, legge til en kant eller angi marginer som vil skape mellomrom mellom de forskjellige elementene på siden din
Metode 4 av 4: Arbeide med andre designspråk
Trinn 1. Lær JavaScript hvis du vil legge til interaktive elementer på sidene dine
JavaScript er et flott språk å lære hvis du er interessert i å legge til mer avanserte funksjoner på nettstedene dine, for eksempel animasjoner og popup -vinduer. Ta et kurs eller se etter online opplæringsprogrammer om hvordan du koder i JavaScript og inkorporerer de kodede elementene i websidene dine | ved hjelp av HTML.
Før du kan bli fortrolig med JavaScript, må du bli kjent med det grunnleggende om å bygge sider i HTML og CSS
Trinn 2. Gjør deg kjent med jQuery for å gjøre JavaScript -koding enklere
jQuery er et JavaScript-bibliotek som kan forenkle Java-programmering ved å gi deg tilgang til en rekke forhåndskodede JavaScript-elementer. jQuery er et flott verktøy hvis du allerede er kjent med det grunnleggende om JavaScript -koding.
Du kan få tilgang til jQuery -biblioteket og mange andre verdifulle ressurser gjennom jQuery.org, nettstedet til jQuery Foundation
Trinn 3. Studer server-side språk hvis du er interessert i back-end utvikling
Selv om HTML, CSS og JavaScript er ideelle for webdesignere som er fokusert på hva brukeren ser og gjør på nettstedet, er språk på serversiden nyttig hvis du er mer interessert i arbeid bak kulissene. Hvis du vil lære om back-end-utvikling, fokuser du på å lære språk som Python, PHP og Ruby on Rails.
Disse språkene er nyttige for å administrere og behandle data som brukeren ikke ser. For eksempel kan PHP brukes til å bygge sikre verktøy for å opprette passord på nettsteder som krever pålogging
Hjelpefiler
HTML jukseark
CSS Cheat Sheet
