Lær HTML og CSS med disse trinvise tutorials

Reklame

Når du klør for at prøve din kode, er der simpelthen ingen grænser for antallet af tutorials, videoer og online kurser derude, som du kan prøve. Men nogle gange er den bedste måde at lære noget ved at dykke ind og prøve det på første hånd. Webudvikling er ikke anderledes.

Hvis du er nysgerrig efter HTML, CSS og JavaScript, eller tror, ​​at du måske har en evne til at lære at oprette websteder fra bunden - der er et par gode trin for trin-tutorials værd at prøve.

Den følgende liste over tutorials vil lede dig gennem det grundlæggende i HTML og CSS, og vil endda give dig en introduktion til den komplekse verden, der er JavaScript Hvad er JavaScript, og kan Internettet eksistere uden det?JavaScript er en af ​​de ting, mange tager for givet. Alle bruger det. Læs mere - i det mindste hvad angår begyndere. Men hvad de ikke vil gøre, er at forberede dig på et liv som udvikler lige uden for kassen. De fleste af disse tjenester er simpelthen et let sted at starte.

Det vil tage meget mere end dette at begynde at udvikle websteder professionelt. Disse værktøjer, hvoraf de fleste er gratis, giver dig det

grundlæggende byggesten til webudvikling, og vil gøre det meget lettere at dykke ned i de mere komplicerede kurser.

Folkene på generalforsamlingen har et gratis værktøj, der lærer dig det grundlæggende i HTML, CSS og JavaScript, og det er det perfekte sted for komplette begyndere at starte. igennem en serie på fem projekter, lærer du terminologien og de grundlæggende kodningsfærdigheder, der giver dig mulighed for at opbygge et websted, der ligner en about.me-side, hvordan du opbygger en responsiv blog og en restaurantwebsted.

Dash-tutorials går ud over at lære at oprette enkle websteder, du kan også udnytte kraften i HTML, CSS og JavaScript til at oprette en robot ved hjælp af figurer og linjer eller endda et Mad Libs-spil.

Dash-tutorials bevæger sig i et fornuftigt tempo og fører dig gennem hvert trin et par kodelinjer ad gangen. Som med enhver tutorial, vil jeg anbefale at tage notater, mens du arbejder. Dette vil hjælpe dig med at huske de forskellige værktøjer, du lærer, og med tutorials fra Generalforsamlingen, når du først har afsluttet en fase, ser det ikke ud til at være en måde at gentage den på.

Konklusion: Brug af Dash sætter dig op med al den viden, du har brug for for at sammensætte et grundlæggende moderne websted - fra navigation til responsivt design. Du introduceres endda det grundlæggende i, hvordan du opretter et tilpasset Tumblr-tema. Når det er sagt, er der kun i alt fire lektioner på Dash. Mens du kan tage de koncepter, du har lært, og prøve at anvende dem på forskellige måder, skal du supplere din viden med andre kurser, der er inkluderet på denne liste.

Codecademy har eksisteret ret meget længere end Dash, og tilføjer ofte nye lektioner til sine tilbud. Med de samme trinvise altomfattende lektioner, som du finder på Dash, går Codecademy et skridt videre ved at give brugerne en generel oversigt over oprettelse af et websted med HTML og CSS, men giver også dybdegående tutorials om de enkelte sprog, HTML, CSS og JavaScript.

Som andre tjenester viser Codecademy dig, hvordan du opretter en navigationsmenu, tilføje baggrundsbilleder, lav en galleri med billeder, eller endda en tilmeldingsside. (For at tilføje funktionalitet til din tilmeldingsside skal du sørge for at gennemgå Vejledning til Ruby on Rails.)

Der er også dedikerede lektioner om jQuery At gøre Internettet interaktivt: En introduktion til jQueryjQuery er et script-bibliotek på klientsiden, som næsten alle moderne websteder bruger - det gør websteder interaktive. Det er ikke det eneste Javascript-bibliotek, men det er det mest udviklede, mest understøttede og mest anvendte ... Læs mere , et nøglesprog, der gør JavaScript meget lettere at lære. Hvis du er nysgerrig efter backend-udvikling, er der også dybdegående lektioner for Ruby, Python, PHP og mere.

Ud over at lære at designe et websted og dykke ned i forviklinger med programmeringssprog 7 Nyttige tricks til at mestre et nyt programmeringssprogDet er okay at blive overvældet, når du lærer at kode. Du vil sandsynligvis glemme tingene så hurtigt, som du lærer dem. Disse tip kan hjælpe dig med at bevare alle de nye oplysninger bedre. Læs mere , kan du også bruge Codecademy til at få det grundlæggende om, hvordan man opretter web-apps, og hvordan man tilføjer tilmeldings-, login- og logoutfunktioner til dit websted.

Konklusion: Ligesom Dash er interaktiviteten i Codecademy uvurderlig. At være i stand til at se, hvordan hvert trin materialiseres på dit websted er opmuntrende, og opsætningen gør det også nemt at opdage fejl. Hvis du er en helt nybegynder, er Codecademy et godt sted at få tæerne våde og beslutte, om kodning og webdesign er den rigtige pasform for dig. Med denne oplevelse kan du tage denne viden til et betalt kursus eller klasse.

Tutsplus.com er et websted fyldt med tutorials (gratis og betalt) om en lang række emner inklusive alt fra mobil Designer du en gennembrudsapp? 7 mobiludviklingsblogs, du skal læseDen mobile plads er så ny, at trends konstant skifter, og der fremmes ny indsigt hver dag. Hvis du planlægger at udvikle mobile apps, hvordan kan du følge med uden at blive gal? Læs mere og spiludvikling 4 gratis websteder, hvor du kan lære det grundlæggende ved spiludviklingNår du leder efter en god tutorial-serie til spiludvikling, vil du have en, der lærer dig praksis og mentalitet for god kodning, fordi du derefter kan transponere denne praksis på ethvert sprog eller platform. Læs mere til farve teori Hvordan man lærer farveteori på mindre end en timeGrundlæggende kendskab til farve teori kan betyde forskellen mellem en "amatør" æstetik og en "professionel" en - og det tager virkelig ikke lang tid at lære. Læs mere og hvordan man bruger Adobe Illustrator Lær dig selv Adobe Illustrator gratisAdobe Illustrator har længe været det valgte illustrationsværktøj for grafiske kunstnere. Klar til at bringe dine designs til live? Her er, hvordan du kan lære Adobe Illustrator gratis. Læs mere . Selvom ikke alle de lektioner, der er undervist på webstedet, følger trin-for-trin-modellen, er der nogle få, der tager denne tilgang og leder brugerne gennem nemme web-udviklingsvejledninger.

En særlig nyttig tutorial leder dig gennem trinnene til design og kode din hjemmeside. Vejledningen stammer ganske vist tilbage til 2009, så designets æstetik kan muligvis ikke appellere til dig, men når det er sagt, selvstudiet lærer dig de nødvendige færdigheder til at designe dit websted, og du kan derefter anvende disse færdigheder til et mere opdateret design. Et andet advarsel, der er værd at nævne med denne tutorial er, at det kræver brug af Adobe Photoshop. Hvis du ikke har adgang til softwaren, kan du altid vælge muligheden Adobe Creative Cloud mod et gebyr på $ 50 pr. Måned.

Vejledningen leder dig gennem design af et grundlæggende websted med to kolonner med en header og sidefod. Webstedet indeholder indhold, en navigationslinje, knapper på sociale medier og meget mere. Når du har designet webstedet i Photoshop, kan du skifte til en kodeditor, og selvstudiet leder dig gennem den nødvendige kode for at omdanne dit design til en HTML-side. Vejledningen kræver noget grundlæggende kendskab til HTML, så jeg vil anbefale at prøve denne tutorial, når du har gennemgået de første par tutorials til generalforsamlingen.

Hvis du vil oprette et mere detaljeret websted, kan du tjekke en anden Tuts + tutorial på hvordan man designer et smukt websted fra bunden. En anden PSD til HTMl tutorial gør livet lidt lettere ved at levere HTML-, CSS- og billedfiler. Andre tutorials om Tuts + leder dig gennem, hvordan man opretter en Tumblr foto dagbog tema - selvom denne er et simpelt Photoshop-design minus koden.

Konklusion: Sammenlignet med Codecademy og Dash tutorials Tuts + -tutorials lidt mere, da du skal gå gennem trinnene. Med de to andre websteder er der meget mere 'håndholdelse' så at sige. Når du er gået gennem hvert trin, er det ofte lettere at finde ud af, hvilken fejl du muligvis har begået. Det kræver også, at du bruger din egen software, hvorimod Dash og Codecademy har indbyggede systemer. Når det er sagt, er du nødt til at finde et sæt lektioner, der passer nøjagtigt til det, du vil lære, med de mange forskellige tutorials.

Med en serie på 12 lektioner gør Shaye Howe et rigtig godt stykke arbejde med at nedbryde det grundlæggende i HTML, der introducerer dig til terminologien, og hvordan du bruger de forskellige elementer i HTML og CSS. Forskellige lektioner inkluderer at lære HTML, CSS, forstå kassemodellen, placering af indhold, typografi og mere.

Når det kommer til anvendelse af undervisningen i selvstudiet, giver webstedet ikke en måde at hurtigt se, hvordan din HTML og CSS ser ud i effekt. For at overvinde dette kan du bruge et online-værktøj, der giver de samme funktioner, som du finder i Codecademy og Dash.

Tjek en CSS / HTML / JavaScript sandbox som CSSDeck eller LiveWeave, som giver dig mulighed for at indtaste HTML, CSS og JavaScript og se det endelige resultat. Teknisk set kan du også bruge HTML-, CSS- og JavaScript-redigererne i Dash og Codecademy, hvis du kan lide den installation, de leverer.

Når du arbejder dig igennem forklaringerne, giver webstedet også eksempler på kode, som du selv kan prøve. I slutningen af ​​hver lektion er en praktisk øvelse, der giver dig mulighed for at anvende det, du har lært.

Når du har nået det gennem de 12 lektioner, kan du skifte til Avanceret HTML- og CSS-lektion, der inkluderer responsivt design, jQuery og mere.

Konklusion: Denne tutorial tager en lidt anden tilgang til de andre forslag, der er anført her. Med en meget mere dybdegående forklaring bruger du mere tid på at læse, end du anvender det, du har lært. Selvom dette måske lyder kedeligt for nogle, er der nogle værdifulde lektioner her, der giver kontekst og bedre forståelse af, hvordan disse sprog fungerer.

Hvad er dit tag?

Nu er det tid til at høre fra dig. Er der nogen online-udviklingsvejledninger, som du vil anbefale? Hvad tror du er det næste trin efter at have prøvet disse onlinekurser? Fortæl os det i kommentarerne.

Billedkredit: hackNY.org