Begynderens køreplan for webudvikling

Begynderens køreplan indeholder alle de grundlæggende forhold til webudvikling. Vi vil gennemgå hvert trin - fra at finde ud af, hvilken kodeditor der skal bruges, til hvilket JavaScript-ramme eller back-end-sprog du kan hente. Og vi inkluderer også links til ressourcer, hvor du kan lære disse færdigheder.

Faktum er, at hvis du lige er begyndt, er alt hvad du behøver at vide lige nu det grundlæggende. Du behøver virkelig ikke at kende hver eneste teknologi, værktøj eller sprog, der findes lige fra starten. (Du krydser broen, når du kommer til den, tro mig!)

I slutningen af ​​denne vejledning har du forståelse for det grundlæggende i webudvikling, hvilke færdigheder du har brug for at vide, og hvor du kan finde dem!

1: Hvad er webudvikling : Hvordan websteder fungerer, front-end vs back-end, kode editor‌‌

2: Grundlæggende frontend: HTML, CSS og JavaScript‌‌

3: Værktøjer : Pakkehåndtering, byggeværktøjer, versionskontrol‌‌

4a: Ekstra frontend: Sass, responsivt design, JavaScript-rammer‌‌

4b: Grundlæggende back-end: Server- og databasestyring, programmeringssprog

I denne køreplan anbefaler jeg, at du gør trin 1, 2 og 3 i rækkefølge. Afhængigt af om du vil fokusere på mere front-end eller back-end, kan du derefter udføre trin 4a eller 4b i enhver rækkefølge.

Jeg synes personligt, at det er en god idé for frontend-webudviklere at kende mindst lidt back-end og omvendt. I det mindste vil kendskab til det grundlæggende i begge dele hjælpe dig med at finde ud af, om du kan lide front-end eller back-end bedre?

Du kan også tjekke den opdaterede version af denne artikel på min blog!

1: Hvad er webudvikling?

Før vi går ind i faktisk kodning, lad os først se på nogle generelle oplysninger om, hvad webudvikling er: hvordan websteder fungerer, forskellen mellem front og back-end og brug af en kodeditor.

Hvordan fungerer websteder?

Alle websteder, når de er mest basale, er bare en masse filer, der er gemt på en computer kaldet en server. Denne server er forbundet til internettet. Du kan derefter indlæse dette websted via en browser (som Chrome, Firefox eller Safari) på din computer eller din telefon. Din browser kaldes også klienten i denne situation.

Så hver gang du er på internettet, modtager og indlæser du (klienten) data (som kattebilleder) fra serveren samt indsender data tilbage til serveren ( indlæs moar cat-billeder! ) Dette tilbage og mellem klienten og serveren er grundlaget for internettet.

Alt, hvad du kan få adgang til i din browser, er noget, som en webudvikler byggede. Nogle eksempler er små virksomhedswebsteder og blogs på den enklere side, helt op til meget komplekse webapps som AirBnb, Facebook og Twitter.

Hvad er forskellen mellem front-end og back-end?

Udtrykkene "frontend", "back-end" og "full stack" webudvikler beskriver, hvilken del af klient / serverforholdet du arbejder med.

“Frontend” betyder, at du hovedsageligt har at gøre med klientsiden. Det kaldes "frontend", fordi det er det, du kan se i browseren. Omvendt er "bagenden" den del af hjemmesiden, som du ikke rigtig kan se, men den håndterer meget af den logik og funktionalitet, der er nødvendig for at alt fungerer.

En måde du kan tænke på dette er, at front-end webudvikling er som "front of house" -delen af ​​en restaurant. Det er det afsnit, hvor kunderne kommer for at se og opleve restauranten - indretningen, siddepladser og selvfølgelig at spise maden.

På den anden side er back-end webudvikling som "back of house" -delen af ​​restauranten. Det er her, leverancer og lagerbeholdning styres, og processen med at skabe mad sker alt sammen. Der er mange ting bag kulisserne, som kunderne ikke kan se, men de vil opleve (og forhåbentlig nyde) slutproduktet - et lækkert måltid!

Sjove illustrationer til side, både front og back end webudvikling tjener forskellige, men meget vigtige funktioner.

Brug af en kodeditor

Når du bygger et websted, er det mest vigtige værktøj, du bruger, din kodeditor eller IDE (Integrated Development Environment). Dette værktøj giver dig mulighed for at skrive den markering og kode, der udgør hjemmesiden.

Der er en hel del gode muligheder derude, men i øjeblikket er VS-kode den mest populære kodeditor. VS Code er en mere let version af Visual Studio, Microsofts vigtigste IDE. Det er hurtigt, gratis, let at bruge, og du kan tilpasse det med temaer og udvidelser.

Andre kodeditorer er Sublime Text, Atom og Vim.

Hvis du lige er kommet i gang, vil jeg dog anbefale at tjekke VS-kode, som du kan downloade fra deres websted.

Nu hvor vi har dækket nogle af de bredere begreber i hvad webudvikling er, lad os komme ind på flere detaljer - startende med frontend.

2: Grundlæggende front-end

Front-enden af ​​et websted består af tre typer filer: HTML, CSS og JavaScript. Disse filer er det, der indlæses i browseren på klientsiden.

Lad os se nærmere på hver enkelt af dem.

HTML

HTML eller HyperText Markup Language er grundlaget for alle websteder. Det er den vigtigste filtype, der indlæses i din browser, når du ser på et websted. HTML-filen indeholder alt indholdet på siden, og den bruger tags til at betegne forskellige typer indhold.

For eksempel kan du bruge tags til at oprette overskriftstitler, afsnit, punktlister, billeder osv. HTML-tags i sig selv har nogle stilarter vedhæftet, men de er ret grundlæggende, ligesom hvad du ville se i et Word-dokument.

CSS

CSS eller Cascading Style Sheets giver dig mulighed for at style HTML-indholdet, så det ser pænt ud. Du kan tilføje farver, brugerdefinerede skrifttyper og layout elementerne på dit websted, men du vil have dem til at se ud. Du kan endda oprette animationer og figurer med CSS!

Der er meget dybde i CSS, og nogle gange har folk en tendens til at glans over det, så de kan gå videre til ting som JavaScript. Jeg kan dog ikke overvurdere vigtigheden af ​​at forstå, hvordan man konverterer et design til et webstedslayout ved hjælp af CSS. Hvis du vil specialisere dig i frontend, er det vigtigt at have virkelig solide CSS-færdigheder.

JavaScript

JavaScript er et programmeringssprog, der er designet til at køre i browseren. Ved hjælp af JavaScript kan du gøre dit websted dynamisk, hvilket betyder at det reagerer på forskellige input fra brugeren eller andre kilder.

For eksempel kan du oprette en "Tilbage til toppen" -knap, som når brugeren klikker på den, vil de rulle tilbage op til toppen af ​​siden. Eller du kan oprette en vejr-widget, der viser dagens vejr baseret på brugerens placering i verden.

Især hvis du vil udvikle dine færdigheder senere med en JavaScript-ramme som React, forstår du mere, hvis du først tager dig tid til at lære regelmæssig vanille-JavaScript. Det er et rigtig sjovt sprog at lære, og der er så meget, du kan gøre med det!

Hvor kan man lære HTML, CSS og JavaScript

Jeg bliver ofte spurgt, hvad de bedste steder at lære kodning er, og jeg vil normalt fortælle dem nogle af følgende ressourcer. Jeg har også en mere dybtgående liste over de bedste kurser til at lære webudvikling på min blog - du finder det måske nyttigt!

Bemærk : Nogle af nedenstående links (dem til betalte kurser og bøger) er tilknyttede links, hvilket betyder, at jeg får en provision, hvis du køber dem uden ekstra omkostninger for dig selv. Det er en måde, du kan støtte mig i at skabe nyttige ressourcer som denne!

freeCodeCamp

Et af mine yndlingssteder at anbefale er freeCodeCamp. Det er en online kodende bootcamp, der er non-profit og helt gratis! Jeg elsker denne mulighed, for hvis du er nybegynder og ikke er helt sikker på, om kodning er noget for dig, er det en risikofri måde at se, om du kan lide det.

En ulempe ved freeCodeCamp er, at selvom de har en utrolig læseplan med et indbygget kodningsmiljø, har de ikke strukturerede videoer som en del af det.

Så hvis du virkelig kan lide at lære af videoer, er der et par andre muligheder:

Team Treehouse

Team Treehouse er en premium online læringsplatform, der er videobaseret og har flere spor, som du kan følge. De har endda et online Tech Degree-program, der er som et online bootcamp, som du kan gennemføre på 4-5 måneder.

Desværre er Treehouse ikke gratis, men de har forskellige månedlige eller årlige planer afhængigt af dit budget. De har en gratis 7-dages prøveperiode, så du kan se, om du kan lide det, og jeg kan også give dig en aftale, hvor du kan få $ 100 rabat på 1 års grundplan. Hvis du er ret sikker på, at du vil komme ind i webudvikling, er Team Treehouse et godt sted at lære.

Hvis du er mere fan af engangs videokurser, er der nogle gratis og betalte muligheder:

Wes Bos

Wes Bos har gratis kurser om at lære Flexbox, CSS Grid og JavaScript, der er fremragende. Jeg har lige gennemgået hans CSS Grid-kursus, og det var virkelig grundigt og også sjovt. Wes er en god lærer!

Udemy

Udemy er også en online læringsplatform med mange gode kurser. En især, som du måske kan lide, er The Advanced CSS and Sass-kurset af Jonas Schmedtmann - dette betalte kursus dækker CSS-gitter, flexbox, responsivt design og andre CSS-emner!

Youtube

Der er også masser af gratis videoressourcer på YouTube:

Traversy Media, sandsynligvis den største webudviklingskanal derude, har et HTML Crash Course og CSS Crash Course.

DesignCourse, en kanal med fokus på webdesign og front-end, har også en HTML & CSS-tutorial.

Og freeCodeCamp har deres egen YouTube-kanal med videoer som et Learn JavaScript-kursus og andre dybtgående kurser.

Bøger og artikler om webudvikling

Hvis du er mere læsende, vil jeg varmt anbefale følgende:

De utroligt populære Jon Duckett-bøger om HTML & CSS og JavaScript & jQuery. Disse bøger er overhovedet ikke dine tætte lærebøger. De er smukt designet, rigtig velskrevet og har masser af fotos og billeder, der hjælper med at undervise i materialet.

Eloquent JavaScript er en anden bog, som jeg virkelig kan lide. Du kan læse det gratis på deres hjemmeside eller købe en papirkopi fra Amazon, hvis du kan lide fysiske bøger. Jeg har denne selv, og jeg kan virkelig godt lide den!

Hvis du gerne vil se flere boganbefalinger, skal du tjekke mit indlæg om anbefalede bøger til læring af webudvikling.

Og sidst men ikke mindst er nogle websteder, der har gode artikler og andre ressourcer:

  • Mozilla Developer Network
  • CSS-tricks
  • Smashing Magazine

3: Værktøjer

Lad os komme ind på nogle andre front-end teknologier nu. Som vi nævnte, er HTML, CSS og JavaScript de grundlæggende byggesten i front-end webudvikling. Ud over dem er der et par andre værktøjer, som du gerne vil lære.

Pakkechefer

Pakkechefer er online samlinger af software, meget af det open source. Hvert stykke software, kaldet en pakke, er tilgængeligt for dig at installere og bruge i dine egne projekter.

Du kan tænke på dem som plugins– i stedet for at skrive alt fra bunden kan du bruge nyttige hjælpeprogrammer, som andre allerede har skrevet.

Den mest populære pakkehåndtering kaldes npm eller Node Package Manager, men du kan også bruge en anden manager kaldet Yarn. Begge er gode muligheder at kende og bruge, selvom det sandsynligvis er bedst at starte med npm.

Hvis du er nysgerrig efter at lære mere, kan du læse denne artikel om det grundlæggende ved brug af npm.

Byg værktøjer

Modulbundlere og byggeværktøjer som Webpack, Gulp eller Parcel er en anden vigtig del af frontend-workflowet.

På et grundlæggende niveau kører disse værktøjer opgaver og procesfiler. Du kan bruge dem til at kompilere dine Sass-filer til CSS, transpilere dine ES6 JavaScript-filer ned til ES5 for bedre browsersupport, køre en lokal webserver og mange andre nyttige opgaver.

Gulp , teknisk set en task runner, har en række npm-pakker, som du kan bruge til at kompilere og behandle dine filer.

Webpack er en superkraftig bundler, der kan gøre alt, hvad Gulp kan, plus mere. Det bruges masser af i JavaScript-miljøer, især med JavaScript Frameworks (som vi kommer lidt nærmere på). Den ene side af Webpack er, at det kræver en masse konfiguration for at komme i gang, hvilket kan være frustrerende.

Parcel er en nyere bundler som Webpack, men den kommer forudkonfigureret ud af kassen, så du kan bogstaveligt talt få det i gang på få minutter. Og du behøver ikke bekymre dig så meget om at konfigurere alt.

Personligt kan jeg godt lide at bruge Gulp til mine egne frontend-arbejdsgange, hvor jeg bare vil kompilere mine Sass- og JavaScript-filer og ikke gøre for meget andet.

Hjælpsomme links

Hvis du er interesseret i Gulp eller Parcel, har jeg tutorials til begge disse:

  • Brug af Gulp 4 i din arbejdsgang
  • Hurtig start guide til pakke

Hvis du vil lære mere om Webpack, skal du tjekke følgende YouTube-videoer:

  • Nedbrudskursus i Webpack af DesignCourse
  • 10-delt serie på Webpack af Colt Steele

Versionskontrol

Versionskontrol (også kaldet kildekontrol) er et system, der holder styr på hver kodeændring, du foretager i dine projektfiler. Du kan endda vende tilbage til en tidligere ændring, hvis du laver en fejl. Det er næsten som at have uendelige spare point til dit projekt, og lad mig fortælle dig, det kan være en enorm livredder.

Det mest populære versionskontrolsystem er et open source-system kaldet Git. Ved hjælp af Git kan du gemme alle dine filer og deres ændringshistorik i samlinger kaldet arkiver.

Du har muligvis også hørt om GitHub, som er et online hostingfirma, der ejes af Microsoft, hvor du kan gemme alle dine Git-arkiver.

For at lære Git og GitHub har GitHub.com nogle online-guider, der forklarer, hvordan man kommer i gang. Traversy Media har også en YouTube-video, der forklarer, hvordan Git fungerer.

4a: Ekstra frontend

Når du først har det grundlæggende i front-down ned, er der nogle flere mellemliggende færdigheder, som du vil lære. Jeg anbefaler, at du ser på følgende: Sass, responsivt design og en JavaScript-ramme.

Sass

Sass er en udvidelse af CSS, der gør skrivemåder mere intuitive og modulære. Det er et virkelig stærkt værktøj. Med Sass kan du opdele dine stilarter i flere filer for bedre organisering, oprette variabler til at gemme farver og skrifttyper og bruge mixins og pladsholdere til nemt at genbruge stilarter.

Selvom du bare bruger nogle af de grundlæggende funktioner, som f.eks. Indlejring, vil du være i stand til at skrive dine stilarter hurtigere og med mindre hovedpine.

Du kan lære mere om Sass i denne Scotch.io-vejledning samt en YouTube-video af Dev Ed.

Responsivt design

Responsivt design sikrer, at dine stilarter ser godt ud på alle enheder - desktops, tablets og mobiltelefoner. Kernepraksis i responsivt design inkluderer brug af fleksibel størrelse for elementer samt brug af medieforespørgsler til at målrette stilarter til bestemte enheder og bredder.

For eksempel i stedet for at indstille dit indhold til en statisk 400 px bred, kan du bruge en medieforespørgsel og indstille indholdet til at være 50% bred på skrivebordet og 100% på mobilen.

Opbygning af dine websteder med responsiv CSS er et must i disse dage, da mobiltrafik i mange tilfælde overgår desktop-trafik.

For mere information om responsivt design og hvordan dine hjemmesider reagerer, se denne artikel. Jeg laver også live-kodningsstrømme på min YouTube-kanal, hvor jeg bygger et websted fra bunden, og seere kan stille mig spørgsmål i realtid!

JavaScript-rammer

Når du først har det grundlæggende i vanilje JavaScript nede, kan du lære en af ​​JavaScript-rammerne (især hvis du vil være en JavaScript-udvikler i fuld stak).

Disse rammer kommer med forudbyggede strukturer og komponenter, der giver dig mulighed for at oprette apps hurtigere, end hvis du startede fra bunden.

I øjeblikket har du tre hovedvalg: React, Angular og Vue.

React (teknisk set et bibliotek), blev oprettet af Facebook og er den mest populære ramme lige nu. Du kan komme i gang med at lære ved at gå til React.js-webstedet. Hvis du er interesseret i et premium React-kursus, har både Tyler McGinnins og Wes Bos gode kurser.

Angular var den første store ramme, og den blev oprettet af Google. Det er stadig meget populært, selvom det for nylig er blevet overgået af React. Du kan begynde at lære Angular på deres hjemmeside. Gary fra DesignCourse har også et Angular crash-kursus på YouTube.

Vue er en nyere ramme skabt af Evan You, en tidligere Angular-udvikler. Selvom det er mindre i brug end React og Angular, vokser det hurtigt og betragtes også som let og sjovt at bruge. Du kan komme i gang med det på Vue-webstedet.

Hvilken ramme skal du lære?

Du undrer dig måske nu over, "Ok, hvilken ramme er bedst?"

Sandheden er, de er alle gode. I webudvikling er der næsten aldrig et enkelt valg, der er 100% det bedste valg for enhver person og enhver situation.

Dit valg vil sandsynligvis blive bestemt af dit job eller simpelthen af, hvilken du bedst kan lide at bruge. Hvis dit endelige mål er at lande et job, så prøv at undersøge, hvilken ramme der synes at være den mest almindelige i potentielle jobannoncer.

Du skal ikke bekymre dig for meget om, hvilken ramme du skal vælge. Det er vigtigere, at du lærer og forstår begreberne bag dem. Når du først har lært en ramme, vil det også være lettere at lære andre (svarer til programmeringssprog).

Lad os gå videre til vores sidste afsnit: back-end webudvikling!

4b: Grundlæggende bagende

Back-enden, eller serversiden af ​​webudvikling, består af tre hovedkomponenter: serveren, et programmeringssprog på serversiden og databasen.

Server

Som vi nævnte i starten, er serveren den computer, hvor alle webstedsfiler, databasen og andre komponenter er gemt.

Traditionelle servere kører på operativsystemer som Linux eller Windows. De betragtes som "centraliserede", fordi alt - webstedsfiler, back-end-kode og data er gemt sammen på serveren.

I dag er der også serverløse arkitekturer, hvilket er en mere decentraliseret opsætningstype. Denne type applikation opdeler disse komponenter og udnytter tredjepartsleverandører til at håndtere hver af dem.

På trods af navnet har du stadig brug for en slags server for i det mindste at gemme dine webstedsfiler. Nogle eksempler på serverløse udbydere er AWS (Amazon Web Services) eller Netlify.

Serverløse opsætninger er populære, fordi de er hurtige, billige, og du behøver ikke bekymre dig om servervedligeholdelse. De er gode til enkle statiske websteder, der ikke kræver et traditionelt sprog på serversiden. For meget komplekse applikationer kan den traditionelle serveropsætning dog være en bedre mulighed.

For at lære mere om serverløse opsætninger har Netlify et informativt blogindlæg, der tager dig gennem alle trinene til opsætning af et statisk websted med implementering.

Programmeringssprog

På serveren skal du bruge et programmeringssprog til at skrive funktionerne og logikken til din applikation. Serveren kompilerer derefter din kode og overfører resultatet tilbage til klienten.

Populære programmeringssprog til internettet inkluderer PHP, Python, Ruby, C # og Java. Der er også en form for server-JavaScript - Node.js, som er et runtime-miljø, der kan køre JavaScript-kode på serveren.

Der er også rammer, som du kan bruge med hvert af disse serversprog. Ligesom JavaScript-rammerne til front-end er disse back-end-rammer nyttige værktøjer, der gør opbygning af webapps meget hurtigere.

Lad os tjekke en liste over de mest anvendte programmeringssprog til webudvikling:

C #

C # blev udviklet som Microsofts konkurrent til Java. Det bruges til at oprette webapps med .NET-rammen, spiludvikling og kan endda bruges til at oprette mobilapps.

Steder at lære C #: ‌‌C # Programming Yellow Book af Rob Miles‌‌C # Basics on Udemy

Java

Java er et af de mest populære programmeringssprog og bruges i webapps såvel som til at bygge Android-apps.

Steder at lære Java: ‌‌University of Helsinki's MOOC‌‌The Complete Java Developer Course on Udemy

Node.js

Node.js er en meget populær teknologi (ifølge Stack Overflow's 2019-udviklerundersøgelse). En ting at bemærke: det er ikke teknisk et sprog på serversiden - det er en form for JavaScript, der kører på serveren ved hjælp af Express.js-rammen.

Steder at lære Node.js: tutorialNode.js tutorial ved programmering med Mosh‌‌Learn Node af Wes Bos

PHP

PHP er det sprog, der driver WordPress, så dette kan være et godt valg, hvis du tror, ​​du vil arbejde med små virksomheder, da mange af dem bruger WordPress. Du kan også oprette webapps med Laravel-rammen.

Steder at lære PHP: ‌‌Introduktion til PHP af mmtuts‌‌PHP af Edwin Diaz om Udemy

Python

Python vokser i popularitet, især da det bruges i datalogi og maskinindlæring. Det anses også for at være godt, da dets syntaks er enklere end nogle andre sprog. Hvis du vil oprette webapps, kan du bruge Django- eller Flask-rammerne.

Steder at lære Python: ModernThe Modern Python 3 Bootcamp af Colt Steele på Udemy‌‌LearnPython.org

Rubin

Ruby er et andet sprog, der har en syntaks, der anses for at være fu at lære. Du kan oprette webapps med rammen Ruby on Rails.

Steder at lære Ruby: ‌‌The Odin Project‌‌ Ruby on Rails Tutorial af Michael Hartl

Ligesom med JavaScript-rammerne er der intet bedste programmeringssprog. Dit valg skal baseres på enten din personlige interesse og præference samt potentielle job - så gør en lille undersøgelse, som kan være et godt valg for dig .

Databaser

Databaser er, som navnet antyder, hvor du gemmer oplysninger til dit websted. De fleste databaser bruger et sprog kaldet SQL (udtales "efterfølger"), som står for "Structured Query Language."

I databasen gemmes data i tabeller med rækker ligesom komplekse Excel-dokumenter. Derefter kan du skrive forespørgsler i SQL for at oprette, læse, opdatere og slette data.

Databasen køres på serveren ved hjælp af servere som Microsoft SQL Server på Windows-servere og MySQL til Linux.

Der er også NoSQL-databaser, som gemmer dataene i JSON-filer i modsætning til de traditionelle tabeller. En type NoSQL-database er MongoDB, som ofte bruges med React, Angular og Vue applikationer.

Nogle eksempler på, hvordan data bruges på websteder, er:

Hvis du har en kontaktformular på dit websted, kan du oprette formularen, så hver gang nogen sender formularen, gemmes deres data i din database.

Du kan også brugerlogins på databasen og skrive logik på serversproget for at håndtere kontrol og godkendelse af logins.

Nogle ressourcer til at lære det grundlæggende i SQL er:

  • Den komplette SQL Bootcamp af Jose Portilla på Udemy
  • SQLBolt

Nogle tip til at efterlade dig med ...

Tak for læsningen! Jeg håber inderligt, at denne guide hjælper dig med at komme i gang med at lære webudvikling.

Et par tip, jeg har, hvis du går på den selvlærede rute:

  1. Forsøg ikke at lære alt på én gang. Vælg en færdighed at lære ad gangen.
  2. Gå ikke rundt fra tutorial til tutorial. Når du lærer, er det ok at tjekke forskellige ressourcer for at se, hvilken du bedst kan lide. Men igen, vælg en og prøv at gå hele vejen igennem den.
  3. Ved, at læring af webudvikling er en langsigtet rejse. På trods af de historier, du måske har læst om mennesker, der går fra nul til at lande et web-dev-job om 3 måneder, vil jeg sigte mere på 1 til 2 år for at blive jobklar, hvis du starter fra starten.
  4. Bare at se et videokursus eller læse en bog gør dig ikke automatisk til en ekspert. At lære materialet er kun det første skridt. Opbygning af egentlige websteder og projekter (endda kun demoer til dig selv) hjælper dig med at virkelig cementere din læring.

Held og lykke, når du begynder at lære webudvikling! Hvis du er interesseret i mere, skal du tjekke denne artikel på min blog: Lær webudvikling som en absolut nybegynder.

Vil du følge mig?

Jeg sender mini-tip i webudvikling på Instagram og Twitter og opretter kodningsvejledningsvideoer på YouTube!