Webudvikling & design 101

web_development_101Vil du vide det grundlæggende inden for webudvikling og design? Fantastisk…


Men der er et problem med denne tankegang, eller et antal af dem faktisk …

  • Hvad er formålet med at have et websted? Har alle virkelig brug for en?
  • I så fald, hvordan bygger du et websted af høj kvalitet? Eller med andre ord, hvordan lærer du grundlæggende webudvikling og design, der giver dig mulighed for selv at opbygge det kvalitetswebsted?
  • Mere vigtigt er det, at du kan opbygge et websted af høj kvalitet på din FØRSTE prøve? Eller har du brug for mange års erfaring bag dig, før du kan håbe på noget resultat der er frygteligt?

Lad os svare på alt det her begyndervejledning til webudvikling og design.

[Spoiler alarm. Jej, du kan opbygge et websted af høj kvalitet på din første prøve.]

Hvad der dækkes i denne vejledning?

Okay, første ting først, er vi glade for, at du fortsat har læst, og at du har besluttet at prøve webudvikling! Sådan spiller det ud:

Kapitlerne præsenteres på en meget enkel måde med hovedindholdet til venstre og de handlinger, der kan håndteres til højre. Ligesom:

Vejledning introduktion: Kapitel 1

Sådan gør du nu:

  • Mens du er på din første læsning: Vi anbefaler, at du læser det hele fra top til bund. Dette vil give dig en god 10.000 fods oversigt over emnet og hjælpe dig med at forstå de vigtigste dele af det. Det vil også give dig grundlæggende værktøjer og metoder til, hvordan du håndterer individuelle opgaver.
  • Mens du er på din 2. læsning og videre: Brug TOC og hopp over til den del, der interesserer dig mest. Du er også velkommen til at bruge delingsknapperne ved siden af ​​hvert kapitel og enten sende linkene til dig selv eller til dine venner / følgere, der måske er interesseret.

Parat? Lad os gå til kapitel 1.

Hvem er denne vejledning til?

Hvis du vil lære grundlæggende webudvikling og design, er denne vejledning til dig. Uanset hvad din motivation måtte være.

Du behøver heller ikke nogen teknisk forudgående viden for at komme i gang (bortset fra basale “web-færdigheder”). Hele pointen med denne guide er at være et slags ”101” -kursus for alle, der er interesseret i at opbygge websteder og lære webudvikling.

Her er nogle almindelige årsager til, at du muligvis er interesseret:

  • 1. Du har brug for et websted til din virksomhed (og du vil se, om du selv kan bygge det).
  • 2. Du vil LÆRE webudvikling af lidenskab eller midlertidig interesse (intet dårligt ved det).
  • 3. Du har brug for et websted til skolen.
  • 4. Du hjælper en ven eller et familiemedlem med at få deres websted online.

Den vigtigste idé, der kommer til at vejlede os

Dette er vigtigt! Og vær venlig ikke vild med os, hvis du er en avanceret webudvikler, der læser dette, men den vigtigste idé, der vil vejlede os gennem hele denne web-udvikling og design 101-ressource, er:

“Den mindste modstandsmetode”

Her er de tre principper for den mindst modstandstilgang:

  • Vi er ikke nedbryde tingene på molekylært niveau. Dvs. vi kommer ikke til bunden af, hvordan programmeringssprog fungerer, eller hvordan en webserver fungerer.
  • Vi er ikke opfinder hjulet igen. Dvs. Hvis nogen allerede har løst et givet problem og gjort løsningen tilgængelig, vil vi bruge det.
  • Vi er gør en enkel løsning fantastisk, snarere end en kompliceret og tilsyneladende mere funktionel løsning buggy og ikke forståelig.

KAPITEL 1: Planen

Din idé, webstedstype, domænenavn og hosting.

Inden du opretter et websted, har du brug for en plan

Ironisk som det måske lyder – hit’et fra 80’erne viser “The A-Team” har lært os, en god plan er en nøglen til succes.

Hvis du har haft et websted, der sad i dig et stykke tid nu, er du helt sikkert begejstret for den eneste idé om endelig at få det ud for andre at læse og gennemse.

Du ønsker, at dit websted skal være fantastisk. Du ved sandsynligvis, hvordan det vil se ud i nogen grad. Eller måske har du endda det perfekte logo klar.

Men…

Det er overhovedet ikke her, du skal komme i gang. Hvis du begynder med forudbestemte forventninger, vil dette kun føre dig til en masse forvirring undervejs og et sub-par-resultat i slutningen.

Tænk i stedet på følgende:

  1. Adskill dig selv fra de tekniske mål, du måtte have. Som for eksempel målet om at lære webstedsteknologier eller bestemt webstedsoftware.
  2. Stil dig selv et hovedspørgsmål: “Hvad har jeg brug for webstedet til?”

Dette handler ikke om dig, dette handler om målet med webstedet.

Spørgsmål, du har brug for at stille dig selv, inden du opretter dit websted

  1. Hvad webstedet er beregnet til at opnå?
  2. Hvad vil være den vigtigste “ting” præsenteret via webstedet? (f.eks. din virksomhed, et produkt, dine blogindlæg osv.)
  3. Vil hjemmesiden have et specielt formål? (f.eks. en eCommerce-butik, en fotografportefølje osv.)
  4. Hvem er målgruppen?
  5. Hvorfor er de interesseret i webstedets emne?
  6. Hvilken smerte løser webstedet for de enkelte tilhørere?

Om disse sidste 3 spørgsmål, lad os snakke publikum i et minut …

Der er 2 hovedregler for webstedsopbygning. Her er regel nr. 1:

 Læseren / besøgende kommer først. De er den vigtigste person, som dit websted skal behage.

På en måde er dit websted ikke dit. Det er deres.

(Regel nr. 2 diskuterer vi om et øjeblik.)

At glemme om denne enkle retningslinje kan føre dig til den helt forkerte måde, selv op til det punkt, hvor du finder dig selv med et websted, der er forvirrende for alle omkring dig.

”Uh! Folk forstår bare ikke, hvad dette websted handler om. Hvordan kan de være så uvidende ?! ” – du ender med at tænke. Men som det viser sig, var den uvidende du.

Den eneste måde at undgå er at bygge din hjemmeside med læseren i tankerne lige fra start.

Så… tag det stykke papir, og svar på alle ovenstående spørgsmål.

Når du er færdig, har du dit ultimative sæt retningslinjer, som du vil handle efter, mens du arbejder på dit websted.

Disse svar vil være et usædvanligt kraftfuldt værktøj, når du følger med. Du vil være i stand til at vende tilbage til dem, når du står over for en beslutning vedrørende dit websted.

Skal du gøre * dette * eller * det *? Gå til svararket og find ud af det. Skal du bruge en bred eller smal sidebjælke? Gå til svarene, find ud af, hvad der er mere sandsynligt at resonere med mållæseren. Og osv.

Domænenavne og webhosting

Hvis du ønsker at være en websideejer, har du brug for et domænenavn og en webhost.

Nå, okay, teknisk set kan du opbygge et testwebsted alt på din egen computer og derefter køre det fra en lokal webserver (også installeret som software på din computer), men det ville ikke være en brugbar løsning for 99% af sager, så lad os bare springe det over.

Så en vært og et domæne …

Den dårlige nyhed her er, at de begge koster penge.

Den gode nyhed… det er ikke så mange penge i den store tingenes ordning. Når du lærer, kan du endda starte flere små websteder på et enkelt domænenavn og under en enkelt webhost.

Men lad os komme i gang i begyndelsen.

Webværter:

  • Enkelt sagt er en webhost, hvor dit websted sidder, og hvor dine besøgende kan finde det. På en måde er webhoster for websteder ligesom lejligheder til mennesker. Under hætten er webhostfirmaer der udlejer deres servere i bytte for penge (… små lejligheder til dine websteder).
  • For at komme i gang gør en standard delt hostingplan. Du kan få dem til alt fra $ 3 pr. Måned. Her er en dejlig sammenligning af populære webhosts. Tjek det ud, og vælg, hvilket af disse virksomheder synes lige det rigtige for dig. Vores henstillinger gælder dog SiteGround, A2 Hosting og Dreamhost.

domæner:

  • Hvis en webhost er en lejlighed, er et domæne adressen på denne lejlighed. For eksempel er domænet på dette websted hostingfacts.com.
  • Vejen til at komme i gang er at vælge dit ønskede domænenavn og derefter købe det fra en registrator. Her er en omfattende guide til, hvordan man køber et domænenavn, og her er en liste over domænenavnegeneratorer.

 

Forslag og tip til valg af domænenavn

Okay, så det er en ting at gå til nogle domæneregistrator og faktisk købe domænet, men hvordan vælger du det rigtige domænenavn?

Der er et par skoler:

  • Branded domain names. Disse er domæner, der består af ikke-eksisterende ord. Tænk på ting som Google.com eller Yahoo.com. Før disse virksomheder fulgte, betød disse ord intet. Ulempen med et branded domænenavn er, at det er … godt, meget brandable, mindeværdigt, og det er let at skelne dit websted fra de andre.
  • Nøgleordsbaserede navne. Disse består af eksisterende ord, sat i en sekvens, der beskriver formålet med webstedet. Tænk på ting som Pizza.com eller StartBloggingOnline.com. Med et sådant domænenavn vil dine besøgende være i stand til nøjagtigt at forudsige den type websted, de lige ved at besøge. Ulempen er, at disse domæner generelt er mindre brandable.
  • Kombinerede navne. Disse er mærket domæner og nøgleordsbaserede domæner sammensat. Tænk, Facebook.com eller Copyblogger.com. Sådanne navne antyder “nogle” dele af webstedets natur for den besøgende, men de er stadig meget brandable.

Nogle generelle retningslinjer uanset hvilken domænetype du vælger:

  • Gør domænet let at huske.
  • Gør det kort og enkelt. Jo længere domænet er, desto mere forvirrende er det.
  • Få et .com (hvis muligt). .Com er det vigtigste “topniveau domæne” tilgængeligt. Vær ikke opmærksom på noget andet.
  • Forsøg at undgå bindestreger. Få dit navn i en enkelt klatform som “cakerecipes.com” i stedet for “cake-recipes.com”

Ting at have klar efter dette kapitel:

  • Et domænenavn.
  • En webhost.
  • Dit svarark – målene for dit websted og hvordan det vil tjene publikum.

Brug for mere hjælp? Her er yderligere læsning for dig:

  • Hvorfor delt hosting? Hovedtyper af værter sammenlignet
  • 10 ting, der gør en webhost god
  • 12 regler for valg af det rigtige domænenavn
  • En omfattende guide til websideplanlægning

KAPITEL 2: Design og wireframing

Tag et papir og en pen og ridse sammen med din webstedsstruktur

Okay, lad os gå ind i designfasen.

Første ting først, her er den arbejdsetik, vi vil gå forbi her:

  • Vi bruger pen og papir så længe vi kan, og skifter først til computeren. Tro os, hvert minut, der bruges på at arbejde med dit design på papir, spares en time, når du begynder at indstille tingene på computeren.
  • Vi udfører iterativt arbejde … Vi kontrollerer resultaterne »forbedrer» kontrollerer resultaterne »gentager, indtil de er færdige.

I kapitel 1 nævnte vi noget, vi kaldte reglen nr. 1 for webstedsopbygning. Nu er det tid til regel nr. 2:

Regel nr. 2 i webstedsbygning:

Tænk indhold først.

Indhold er det, der betyder noget på et websted. Ikke designet. Indhold.

Folk kommer efter indholdet. De kommer ikke til designet. Designet er kun et køretøj til levering af indholdet.

Start aldrig med, hvordan dit websted ser ud. Start med indhold. Indhold. Indhold. Indhold.

Så hvad mener vi med “indhold”? Kort sagt, det er den ting, som folk vil have fra dit websted. Blogindlæg, produkter i butikken, forumtråde, hvis du bygger et forum, nyhedsartikler, dit forretningstilbud osv.

“Virkelig? Udseendet betyder det virkelig ikke noget? ” – Du spørger.

I stedet for at vi slår dette ned, så tjek denne side:

Simpelt websted

Denne enkle webside er langt den bedste forklaring på, hvad design er, og hvilket formål det tjener online.

Så husk, indhold først!

Websteds indhold og struktur

Okay, så da indholdet er den vigtigste ting, skal du have (det meste af) det klar på forhånd. Eller i det mindste skal du have en god idé om, hvor meget indhold der vil være, og i hvilken form.

Bemærk. Vi ved, at denne del kan være hård. Start med indhold virker ganske unaturligt for webstedsdesign, men det er virkelig den bedste måde at få et fremragende resultat til sidst. Så tænk på det indhold, du vil dele med læseren, og hvordan du vil præsentere det.

Det næste trin er at udskrive de individuelle sider af sider, du har brug for (som en hjemmeside, en produktside, en kategoriside, en om-side, en kontaktside, den vigtigste salgsside, en destinationsside for nyhedsbrev-abonnement, vigtigste blogfortegnelse, individuelle indlæg, en butik måske og hvad der ellers synes nødvendigt).

Tænk, hvad er den mest effektive måde at organisere dit indhold på hjemmesiden?

Gør alt dette på papir. Det vil sandsynligvis være lettere og hurtigere for dig end at lære noget stykke diagram-tegning software på stedet.

Eksempel:

indhold-struktur

Skrab sammen en trådramme

En wireframe i webdesign er simpelthen en sideskema eller en plan – en visuel guide, der repræsenterer rammen for et websted (Wikipedia fortæller os).

Trådrammer er fantastiske! Vi bruger dem til de fleste ting, vi gør, og som er beregnet til at vises online. For eksempel er her en wireframe til netop denne guide:

Skrab sammen en wireframe

Som du kan se, er det igen på papiret. Selvom der er flere apps til denne slags arbejde, anbefaler vi ikke, at du bruger dem. De kan være fremragende til professionelle designere, men en nybegynder eller en mellemmand vil kun miste tid på at lære dem, og til sidst får de ikke meget forbedring i forhold til hvad de ville opnå gennem pen og papir.

Så hvordan wireframe?

Der er to tilgange, hvis du er nybegynder:

  • Gå med strømmen, hvis du føler dig stærk, og bare træk væk (ikke altid en perfekt løsning).
  • Få hurtig viden om, hvordan man wireframes korrekt (normalt bedre).

Gå til sidstnævnte – her en god guide.

(Sørg for at oprette en wireframe for alle vigtige sider, du har listet i det forrige trin.)

Ting at have klar efter dette kapitel:

  • Det meste af indholdet til webstedet, eller i det mindste det meste forudsagt (for eksempel hvis du er afhængig af brugergenereret indhold, er det svært at have det på forhånd).
  • Dit websteds indholdsstruktur er forberedt som en graf.
  • En wireframe af de individuelle sider af sider, du har brug for.

Yderligere læsning:

  • 9 trin til planlægning af webstedsindhold
  • Er du ny på webdesign? Start her.

KAPITEL 3: UX og UI

Undervurder aldrig vigtigheden af ​​brugeroplevelse og brugergrænseflade

Som i brugeroplevelse og brugergrænseflade.

WebDesignerDepot giver os en temmelig poetisk definition af de to:

UI er sadlen, stigbøjlerne og regeringsperioderne.

UX er en følelse af, at du får mulighed for at ride på hesten og reb i dit kvæg.

For en mere praktisk definition:

  • UI er, hvad brugeren ser, når de ser på dit websted.
  • UX er hvordan de har det.

Parret, og hvor godt det udføres, definerer dybest set dit websteds brugbarhed for slutbrugeren / besøgende.

Både UX og UI design er store emner i sig selv, og der er en masse mindre elementer, der spiller en rolle i det endelige resultat.

Kort sagt, der er meget at lære, hvis du lige er begyndt på din rejse.

Så i stedet for at vi prøver at trange et helt UX- og UI-designkursus her, så lad os bare påpege en håndfuld vigtige elementer og så sende dig et andet sted til yderligere læsning.

Brugermål

UX handler om brugermål… Ikke så meget af dine mål… Brugermål.

Okay, hvad betyder dette? Gå først og fremmest tilbage til formålet med dit websted – det, du arbejdede på i de foregående kapitler. Årsagen til, at du bygger hjemmesiden, og hvordan det hjælper brugeren / besøgende.

Hvordan oversættes det til den besøgende’s mål? … Hvad er den ene ting, som besøgende ønsker at få eller opnå, når de kommer til dit websted? Det er deres mål.

Hvor lette er disse mål at nå?

Derefter skal du fokusere på følgende spørgsmål:

  • Kan besøgende nemt nå deres mål? – Kan de komme til det nøjagtige stykke information, de kom til på en enkel måde?

For at besvare dette skal du gå tilbage til din wireframe, dit indholdsstruktur og dobbeltkontrol ting.

Sørg for, at indholdsstrukturen og de sider, du har fundet op, giver mening ud fra en brugers synspunkt. Sørg for, at det er muligt for dem at navigere mellem de vigtige sider frit og på en ikke-forvirrende måde.

I det væsentlige sørger vi her for, at webstedet giver dine besøgende værdi.

Hårdt at finde ud af alt dette på egen hånd, er det ikke?

Det anbefales stærkt, at du tjekker ressourcerne, der er anført i afsnittet “yderligere læsning” i dette kapitel … men du kan også prøve “et hack”, så at sige.

Tænk navnlig på, hvad der frustrerer dig, når du besøger websteder, der ligner den, du vil bygge? Der er måske nogle oplysninger, der virkelig er vanskelige at komme til eller et interface interface, der gør webstedet forvirrende.

Tag noter, træk konklusioner, og begiv ikke de samme fejl med dit websted.

Brug af følelser som et værktøj

Når du arbejder på brugergrænsefladen og UX på dit websted, er det, du sigtede mod, at påkalde en vis følelse hos din besøgende.

Du vil have dem til at føle sig en bestemt måde, som derefter vil overbevise dem om at handle på en bestemt måde. Således gør dit websted virkelig nyttigt.

For at arbejde på den følelsesmæssige del af jobbet er et af de bedste værktøjer farve.

Farver har forskellige betydninger i forskellige kulturer. At forstå disse forskelle kan gøre dit arbejde meget lettere. Her er et dejligt snyderi.

Når du først er inde i ballparken med hvilke farver du vil (muligvis) bruger, er her et par generelle retningslinjer, når du arbejder med farve:

  • Vælg et hovedfarveskema, der består af et par farver, der går godt sammen. Her er en fantastisk farveskema generator.
  • Vælg en farve, der bliver din accentfarve – den farve, der vil blive brugt til handlingsknapper, køb knapper osv. Grundlæggende alt, hvad der skal bruges brugerens opmærksomhed.

Typografi

I mange tilfælde er typografi, hvor du vinder (eller mister) spillet om webstedsopbygning.

Det er så såååå let at glemme typografi helt og bare bruge Arial til alt.

Ikke anbefalet.

I disse dage er det meget let at arbejde med brugerdefinerede skrifttyper, og du behøver ikke engang at gøre noget teknisk for at aktivere disse tilpassede skrifttyper på dit websted.

Stor, storslået typografi er meget i mode i disse dage, og det gør også en designerværk – især en begynderdesigner – meget lettere.

Tjek dette websted, for eksempel:

bonoboer

Har du bemærket noget? Jepp, skrifttyperne er enorme, og de ser godt ud!

Sådan arbejder du på dette:

  • Generelt har ethvert webstedsdesign brug for to typer tekst: overskrifter og stykker. I de fleste tilfælde gør det kun en skrifttype pr.
  • Gå til Google-skrifttyper – Googles eget bibliotek med gratis skrifttyper, du kan bruge på dit websted – og kig efter en overskriftstype, som du virkelig nyder.
  • Tag derefter fontens navn og kig efter den på Font Pair – det er et bibliotek med foruddannede fontparringer, der går godt sammen.
  • Vælg et par, der ser fantastisk ud.
  • Skriv navnene på begge skrifttyper ned, du har brug for dem senere.

At gøre det på denne måde vil fremskynde din proces og stadig give dig et fantastisk resultat.

F.eks. Fandt vi en skrifttype, der hedder Bree Serif i Google-skrifttyper, som vi ret nyder:

Bree-Serif

Derefter tog vi det med Font Pair, og webstedet antydede, at Bree Serif går godt med Open Sans. Perfekt:

Bree-Serif-open-sans

Den endelige struktur

Endelig det sidste trin!

Hele pointen med dette kapitel er at lande på et endeligt layout / struktur, som du vil bruge til dit websted. På dette tidspunkt skal du være næsten sikker på de ting, du vil gøre med dit design og UI.

Ting at have klar efter dette kapitel:

  • Dine brugermål tydeligt angivet.
  • Din wireframe dobbeltkrydset for at sikre dig, at disse mål ikke er forvirrende.
  • Det valgte farveskema.
  • Typografien regnede ud.
  • Hele hele webstedets layout / struktur / organisering af webstedet.

Yderligere læsning: 

  • UX Magazine
  • UX-stand
  • Psykologien og følelserne bag farve i webdesign
  • Hvad er design af brugeroplevelse? Oversigt, værktøjer og ressourcer
  • Indstilling af smarte forretningsmål for et websted
  • 8 regler for oprettelse af effektiv typografi

KAPITEL 4: WordPress, HTML eller skabeloner?

Bestem, hvilken rute du skal gå – indholdsstyringssystemer eller kode det fra bunden

Her starter det virkelige, hænder-beskidte underhætte-arbejde!

Dette er sandsynligvis den uhyggeligste del af processen (indrøm det!).

For en gangs skyld er det det rigtige tidspunkt at lægge pen og papir til side og begynde at arbejde med noget software.

Og lige ud af porten er der et væld af spørgsmål …

  • Skal jeg lære HTML?
  • Hvad med CSS?
  • Vil færdiglavede HTML-webstedsskabeloner gøre det for mig?
  • Skal jeg lære et programmeringssprog som PHP?
  • Jeg har hørt WordPress er måden at opbygge et websted i disse dage.
  • Jeg så den Squarespace Super Bowl annonce. Hvad sker der med det??
  • Hvad hedder denne ting Joomla? eller Drupal?
  • og on og on og on.

Svaret på alle disse er ja.

Som i ja, kan du gøre en eller alle disse ting, og det er kun op til dig at bestemme, hvilken sti du skal vælge.

Det, vi forsøger at sige, er, at der ikke er den bedste tilgang nr. 1 her. Det hele afhænger af, hvor involveret du ønsker at blive med webudvikling, hvor meget af grundlæggende grundlæggende for webstedsbygningen, du vil lære, hvor hurtigt du har brug for et kvalitetssite gjort, og hvor tilpasselig du ønsker, at det skal være bagefter.

Så her skal vi gå videre fra dette kapitel fremad. Først, vælg den person, der bedst definerer dig:

  • en) Jeg vil gerne lære, hvad webudvikling handler om, alt det grundlæggende, alle de indre funktioner på et websted og alle mekanismer, der får et websted til at fungere.
  • b) Jeg vil gerne lære, hvordan man bruger en pålidelig webstedsbygger, der vil håndtere det meste af den tunge løft for mig.
  • c) Jeg ved ikke hvad jeg skal gøre. Jeg vil bare have et websted, som jeg selv kan bygge, og som fungerer korrekt.

Besvaret a)? Gå til kapitel 5.

Besvaret b)? Gå til kapitel 6.

Besvaret c)? Du er velkommen til at tjekke denne artikel og derefter vende tilbage (det skal hjælpe dig med at vælge den perfekte sti):

  • 8 bedste blogging- og webstedsbygningsplatforme revideret … Hver platform er beskrevet sammen med dens fordele og ulemper, og ressourcen foreslår også det bedste tilgængelige valg (Wix eller SB) til dine specifikke behov.

Har du læst det? Store! Så hvilken af ​​personerne ovenfor beskriver dig bedst – a) eller b)?

De værktøjer, der måske er nyttige undervejs:

  • Grafik: Paint.NET, Gimp, Pixlr.
  • Kode skrivning: Notepad ++, TextWrangler, SublimeText.
  • Arbejdsstyring: Trello.
  • Design: farveskemaer, Google-skrifttyper, værktøjerne herfra.
  • Fotografi: Unsplash, AllTheFree lager

KAPITEL 5: Introduktion til HTML, CSS & Javascript

Hvordan websteder er en indbygget virkelighed

I dette kapitel skal vi påpege de blotte grundlæggende i webudvikling, forklare de vigtigste udtryk og derefter sende dig over til nogle specifikke ressourcer, hvor du kan fremme din viden og dine færdigheder.

HTML

HTML er sprog på websteder. Hver webside er bygget eller konverteret til HTML på et tidspunkt.

For at se HTML-strukturen i netop denne guide, du læser her, skal du bare trykke på “Ctrl + U” på dit tastatur.

HTML definerer hver blok, du ser på en webside. I slutningen af ​​dagen skal det konverteres til HTML for at kunne vise noget på en webside.

For at lære HTML effektivt, anbefaler vi dig at tilmelde dig et af de (gratis eller betalte) kurser, der er tilgængelige på Internettet. Nogle af de bedste findes på Codeacademy eller Treehouse.

For eksempel er her et specifikt afsnit om Codeacademy alt om HTML og CSS.

CodeCademys hjemmeside

Så det er den omfattende tilgang til HTML.

CSS

CSS – for at springe over de kedelige tekniske detaljer – er ansvarlig for at style alt det, der er synligt på en webside.

CSS tager HTML-tags og strukturerer derefter og tilføjer styling til dem. Ting som: fed tekst, farvejusteringer, skygger, layout, endda animationer, udføres nu hovedsageligt med CSS.

For en bedre forståelse af, hvordan dette nøjagtigt fungerer, hopp over til dette hurtige kursus på Codeacademy.

For mere dybdegående læring, se også CSS-afsnittene på enten Codeacademy eller Treehouse.

JavaScript, jQuery, Bootstrap osv.

JavaScript er et programmeringssprog, der giver dig mulighed for at introducere nogle dynamiske handlinger på dit websted. For eksempel kan du gøre ting som validering af webformularer eller interagere med brugeren på en mere strømlinet måde uden at skulle genindlæse den side, de er på. Her er en dejlig tutorial af w3schools.

Med det i tankerne er jQuery et JavaScript-bibliotek, der giver dig mulighed for at oprette avancerede ting med mindre kodning. Meget praktisk for en webudvikler. Lær mere her.

Endelig er Bootstrap en meget interessant opfindelse. Oprindeligt introduceret af Twitter, er det dybest set et front-end-miljø, der fremskynder processen med at oprette et websted ved at levere de fleste af de fælles sideelementer, der allerede er forudbygget. Det lyder kompliceret, gør det ikke?

Men det er det ikke. Bare tjek dette startkursus på Codeacademy (forresten, det er sådan, vi oprindeligt lærte Bootstrap).

Ting at have klar efter dette kapitel:

  • Grundlæggende er det første udkast til dit HTML / CSS-websted komplet bygget. Derfra kan du begynde at itere og forbedre det endelige resultat.

KAPITEL 6: Webstedsbygningsplatforme

Opsætter du dit første websted? Prøv gratis webstedsplatforme som WordPress, Joomla eller Drupal

Kapitel 6: Webstedsbygningsplatforme

  • Squarespace
  • WordPress
  • Joomla & Drupal

Der er flere webstedsbyggere derude, end du kan ryste en pind på. (Hvis du er den slags person, der ryster på tingene.)

Okay, vittigheder til side.

Hvis du ikke har lyst til at lære at kode ting manuelt, er det helt klart flere løsninger, der kan hjælpe dig.

Bemærk. Husk, at alt det andet, vi diskuterede i kapitel 1-4, stadig gælder her. Selv hvis du går med en site-building-løsning, der er slags hands-off, skal du stadig være forsigtig med at gøre det endelige produkt venligt over for brugerne og i overensstemmelse med alles mål. Disse bygningsværktøjer er netop det… værktøjer.

Start med dem, der er nemmest at forstå:

Squarespace

Den eneste webstedsplatform, der annoncerer under Super Bowl.

Kort sagt, en meget praktisk løsning, der kan bruges af enhver. Ingen forudgående færdigheder kræves.

Det giver dig mulighed for at bygge klassiske websteder, blogs, endda eCommerce-butikker. Vi skrev endda en anmeldelse om dem. Grænsefladen og hele processen med at bruge det er temmelig let at forstå, plus Squarespace-fyre giver en masse interessante tutorials. Tjek dem her.

WordPress

Vi elsker ærligt WordPress.

Det meste af tiden er det den perfekte platform at bygge et websted med. Det har den perfekte balance mellem kompleksitet og brugervenlighed, og det er dybest set uendelig tilpasses.

WordPress-animation

Det er også i øjeblikket den mest populære webstedsplatform for dem alle. Som delt af skaberen af ​​WordPress – Matt Mullenweg – styrker WordPress nu 25% af hele internettet. Kan alle disse mennesker have forkert?

Okay, så for at komme i gang med WordPress behøver du stort set kun dit domæne og hosting. WordPress-softwaren i sig selv er helt gratis.

For at begynde, er du velkommen til at følge en af ​​disse stier:

a) “Den hurtige startsti”

  • Gå her for at lære den forenklede måde at installere WordPress og starte dit websted om eftermiddagen.
  • Vælg et gratis tema fra det officielle bibliotek – sørg for, at det stemmer overens med dit webstedsmål, og at layout / design ikke er langt fra din ønskede struktur (du vil justere det lidt).
    • Tjek disse to ressourcer for at lære, hvordan du tilpasser et eksisterende tema.
    • Alternativt kan du vælge et multifunktionspremie-tema, der kan justeres gennem en praktisk brugergrænseflade (ingen kodning involveret). X-temaet er et godt eksempel på sådan noget.
  • Installer nogle af de mest populære og bedste plugins for at få ekstra funktioner.

b) “Den dybdegående sti”

  • Start med at lære WordPress gennem et onlinekursus. Treehouse tilbyder en fantastisk en.
  • Vælg dit tema og plugins lige som ovenfor. Alternativt kan du opbygge dit eget tema fra bunden af.

I sidste ende er WordPress sandsynligvis den mest alsidige webstedsplatform på markedet. Med det kan du opbygge stort set alle typer websteder, ikke kun blogs eller enkle forretningssteder. Her er en liste over 47 (!) Forskellige måder at bruge WordPress på, bare for at få dig til at tænke.

Joomla og Drupal

Selvom Joomla og Drupal er lidt forskellige fra hinanden, er de begge fremragende content management-systemer til mere avancerede webprojekter.

De er ikke så stærke designmæssige, men de kan meget tilpasses og er i stand til at håndtere enhver form for hjemmeside, du måtte have i plan.

Af og til afhængigt af kompleksiteten af ​​dit projekt kan de muligvis kræve meget mere tid til at mestre og meget mere kræfter på det.

For mere dybtgående træning er der fantastiske kurser på Lynda.com, både til Joomla og Drupal.

Ting at have klar efter dette kapitel:

  • Det første udkast til dit websted er helt bygget, uanset om du besluttede at bruge WordPress eller en anden platform.
  • Sørg for, at det stemmer overens med dine oprindelige mål, målgruppen, og at det leverer god UX.

KAPITEL 7: Mobilt responsivt design

Mere end 60% af mennesker bruger mobiler og tablets til at surfe på nettet

Mobil lydhørhed er nu et meget vigtigt aspekt af webstedsopbygning, sandsynligvis mere end det nogensinde har været.

Her er hvad hele emnet handler om:

Grundlæggende, lige nu er der flere mennesker, der bruger mobile enheder til at få adgang til internettet end nogensinde før. Faktisk estimeres det, at der nu er flere mobile internetbrugere end desktop internetbrugere (75,1% mod 52,7%).

Men der er et problem.

Ikke alle webstedsdesign vil blive optimeret til at blive vist på mobile enheder lige ud af porten.

Nogle almindelige problemer inkluderer:

  • skrifttyperne er for små,
  • selve layoutet tilpasser sig slet ikke til en mindre skærm,
  • eller teknologien, der bruges til at opbygge webstedet, der ikke er tilgængelig på mobil.

Det er her ideen om mobil lydhørhed spiller ind.

Et responsivt websted reagerer på det miljø, det bliver set på. Hvis det er en stationær computer, gengives webstedet på en bestemt måde. Hvis det er en mobil, gengives det på en anden måde.

Her er en bedre forklaring: Hvad pokker er responsivt webdesign?

Så det at gøre lige nu ville være at kontrollere og sikre dig, at dit websted fungerer på mobile enheder. Brug dine egne enheder til at kontrollere dette, men prøv også Googles mobil-test, eller spring over til et værktøj som Responsive Design Tester.

Hvis der er problemer, skal du rette dem.

Nogle løsninger:

  • Responsiv webdesign – hvordan man gør
  • Sådan gør webstedet lydhørt på cirka 15 minutter

KAPITEL 8: At bringe det hele sammen

Du kender det grundlæggende, nu er det din tur

Hold fast, vi er næsten der!

Dette er det sidste kapitel i vores ret lange rejse.

På dette tidspunkt skal du have dit første websted bygget … Det være sig med WordPress, håndbygget HTML / CSS, en eller anden webstedsbygger eller hvad andre værktøjer du valgte til jobbet.

Kort sagt, tillykke! Men der er stadig et par ting, der er værd at gøre:

  • Dobbeltkontrol på de ting, vi diskuterede i kapitel 1 og 2. Sørg for, at målene faktisk fungerer for slutbrugeren, og at webstedet ikke er forvirrende.
  • Valider din kodestruktur gennem W3Cs markeringsvalideringstjeneste.
  • Kontroller, om der ikke er nogen sikkerhedsproblemer med siden. Brug scanneren fra Sucuri til det.
  • Få feedback fra lokalsamfundet. Kontroller, hvad andre mennesker synes om dit arbejde. Foraene på Sitepoint kan være gode til det.

Hvis det er din første læsning af denne ressource, opfordrer vi dig virkelig til at vende tilbage til den et par gange og behandle den som en referencefil til din videreuddannelse.

Som vi sagde i starten, er du velkommen til at bruge TOC og navigere fra kapitel til kapitel og ressource til ressource, som du finder det passende.

Til sidst er vi nysgerrige … hvad er din største udfordring, når det kommer til webstedsopbygning, webudvikling eller design? Del venligst i kommentarerne eller via Twitter. Vi er alle ører!

Tak for at have læst, du er fantastisk!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map