Lär dig HTML och CSS med dessa steg för steg-handledning

När du kliar för att prova handen på kod finns det helt enkelt ingen gräns för antalet tutorials, videor och online kurser där ute för att du ska försöka. Men ibland är det bästa sättet att lära sig någonting genom att dyka in och prova det på första hand. Webbutveckling är inte annorlunda.

Om du är nyfiken på HTML, CSS och JavaScript, eller tror att du kanske har en förmåga att lära dig hur du skapar webbplatser från början - det finns några bra steg-för-steg-handledning värt ett försök.

Följande lista med handledning kommer att gå igenom grunden för HTML och CSS, och kommer även att ge dig en introduktion till den komplexa världen som är JavaScript. Vad är JavaScript, och kan Internet existera utan det? Vad är JavaScript, och kan Internet existera utan det? JavaScript är ett av de saker som många tar för givet. Alla använder det. Läs mer - åtminstone vad gäller nybörjare. Men vad de inte gör är att förbereda dig för ett liv som utvecklare direkt ur lådan. De flesta av dessa tjänster är helt enkelt ett enkelt ställe att börja.

Det kommer att ta mycket mer än detta för att börja utveckla webbplatser professionellt. Dessa verktyg, varav de flesta är gratis, ger dig grundläggande byggstenar för webbutveckling, och kommer att göra det mycket lättare att dyka in i mer komplicerade kurser.

Generalförsamlingens bindestreck

Folket över på generalförsamlingen har ett gratis verktyg som lär dig grunderna i HTML, CSS och JavaScript, och det är den perfekta platsen för fullständiga nybörjare att börja. Genom en serie av fem projekt, Du kommer att lära dig terminologin och grundläggande kodningsförmåga så att du kan bygga en webbplats som liknar en about.me-sida, hur man bygger en responsiv blogg och en restaurangwebbplats.

Dash tutorials går utöver att lära sig att skapa enkla webbplatser, du kan också utnyttja kraften i HTML, CSS och JavaScript för att skapa en robot med former och linjer eller till och med en Mad Libs spel.

Dash-tutorialsna rör sig i rimlig takt och tar dig igenom varje steg några rader av kod i taget. Som med någon handledning rekommenderar jag att du tar anteckningar när du jobbar. Det här hjälper dig att memorera de olika verktygen du lär dig, och med tutorials för generalförsamlingen, när du har slutfört en fas, verkar det inte vara ett sätt att upprepa det.

Slutsats: Med Dash kommer du att ställa upp all den kunskap du behöver för att sätta ihop en grundläggande modern webbplats - från navigering till responsiv design. Du introduceras till och med till grunderna för hur du skapar ett anpassat Tumblr-tema. Det sagt är det bara totalt fyra lektioner om Dash. Medan du kan ta de begrepp du har lärt dig och försöka tillämpa dem på olika sätt, måste du komplettera din kunskap med andra kurser som ingår i denna lista.

Codecademy

Codecademy har funnits ganska mycket längre än Dash, och lägger ofta till nya lektioner i sina erbjudanden. Med samma steg-för-steg-omfattande lektioner hittar du på Dash, Codecademy går ett steg längre genom att ge användarna en allmän översikt över hur man skapar en webbplats med HTML och CSS, men ger också fördjupade handledning på de enskilda språken , HTML, CSS och JavaScript.

Som andra tjänster visar Codecademy hur du skapar en navigeringsmeny, lägger till bakgrundsbilder, gör ett galleri med bilder eller till och med en registreringssida. (För att lägga till funktionalitet i din registreringssida, var noga med att gå igenom Ruby on Rails-handledningen.)

Det finns också dedikerade lektioner om jQuery Making the Web Interactive: En introduktion till jQuery Att göra webben interaktiv: En introduktion till jQuery jQuery är ett skrivbibliotek på klientsidan som nästan alla moderna webbplatser använder - det gör webbplatser interaktiva. Det är inte det enda Javascript-biblioteket, men det är den mest utvecklade, mest stödda och mest använda ... Läs mer, ett nyckel språk som gör JavaScript mycket lättare att lära. Om du är nyfiken på utveckling av backend, finns det också djupt lärdomar för Ruby, Python, PHP och mycket mer.

Förutom att lära sig hur man utformar en webbplats och dykar in i komplexiteten i programmeringsspråk. 7 Användbara tricks för att mastera ett nytt programmeringsspråk. 7 Användbara tricks för att behärska ett nytt programmeringsspråk Det är okej att vara överväldigad när du lär dig att koda. Du kommer noga att glömma saker så fort du lär dig dem. Dessa tips kan hjälpa dig att bättre behålla all den nya informationen. Läs mer, du kan också använda Codecademy för att få grunderna om hur man skapar webbappar och hur man lägger till inloggning, inloggning och loggfunktionalitet på din webbplats.

Slutsats: Liksom Dash är interaktionen av Codecademy ovärderlig. Att kunna se hur varje steg materialiseras på din webbplats är uppmuntrande, och installationen gör det också enkelt att upptäcka misstag. Om du är en komplett nybörjare är Codecademy ett bra ställe att få tårna våta och bestämma om kodning och webbdesign passar dig. Med den erfarenheten kan du ta den kunskapen till en betald kurs eller kurs.

tuts+

Tutsplus.com är en hemsida med tutorials (gratis och betalt) på en mängd olika ämnen, inklusive allt från mobil Designing A Breakthrough App? 7 Mobile Development Blogs Du borde läsa att designa ett genombrottsprogram? 7 Mobilutvecklingsbloggar du bör läsa Mobilutrymmet är så nytt att trender ständigt skiftar och nya insikter görs varje dag. Om du planerar att utveckla mobilappar, hur kan du fortsätta utan att bli arg? Läs mer och spelutveckling 4 Gratis webbplatser där du kan lära dig grunderna i spelutveckling 4 gratis webbplatser där du kan lära dig grunderna i spelutveckling När du letar efter en bra spelutvecklingstutorialserie vill du ha en som lär dig praktiken och mentaliteten av bra kodning eftersom du då kan införliva dessa metoder på vilket språk som helst. Läs mer till färgteori Så här läser du färgteori på mindre än en timme Hur man läser färgteori på mindre än en timme Grundläggande kunskaper om färgteori kan betyda skillnaden mellan en "amatör" -estetisk och en "professionell" - och det är verkligen tar inte lång tid att lära sig. Läs mer och hur man använder Adobe Illustrator Lär dig själv Adobe Illustrator gratis Lär dig själv Adobe Illustrator gratis Adobe Illustrator har länge varit det illustrerande verktyget för grafikartister. Klar att föra dina mönster till liv? Så här kan du lära dig Adobe Illustrator gratis. Läs mer . Även om inte alla de lärdomar som lärs på webbplatsen följer steg för steg-modellen, finns det några som tar detta tillvägagångssätt och går igenom användarna genom enkla webbutveckling.

En särskilt användbar handledning går igenom stegen för att designa och koda din webbplats. Handledningen går säkert tillbaka till 2009, så designen estetik kanske inte vädjar till dig, men det sägs att handledningen lär dig de färdigheter som krävs för att designa din webbplats, och du kan sedan tillämpa dessa färdigheter till en mer uppdaterad design. Ett annat tillvägagångssätt som är värt att nämna med denna handledning är att det kräver användning av Adobe Photoshop. Om du inte har tillgång till programvaran kan du alltid välja alternativet Adobe Creative Cloud för en avgift på $ 50 per månad.

Handledningen går igenom dig genom att utforma en grundläggande två kolumnwebbplats med en rubrik och sidfot. Webbplatsen innehåller innehåll, en navigeringsfält, sociala medier knappar och mer. När du har utformat webbplatsen i Photoshop kan du växla över till en kodredigerare och handledningen går igenom den kod som krävs för att omvandla din design till en HTML-sida. Handledningen kommer att kräva lite grundläggande kunskaper om HTML, så jag rekommenderar att du provar den här handledningen efter att du har gått igenom de första General Assembly-handledningarna.

Om du vill göra en mer detaljerad hemsida, kolla in en annan Tuts + handledning om hur man designar en vacker webbplats från början. En annan PSD till HTMl handledning gör livet lite enklare genom att ge HTML, CSS och bildfiler. Andra handledning på Tuts + går igenom hur du skapar ett Tumblr-bilddiagnostema - även om det här är en enkel Photoshop-design, minus koden.

Slutsats: Jämfört med Codecademy och Dash, tar Tuts + tutorials lite mer ansträngning eftersom du måste gå igenom stegen. Med de andra två platserna finns det mycket mer "handhållande" så att säga. När du gick igenom varje steg är det ofta lättare att ta reda på vilket misstag du kanske har gjort. Det kräver också att du använder din egen programvara, medan Dash och Codecademy har inbyggda system. Som sagt, med olika tutorials, är du tvungen att hitta en uppsättning lektioner som tillgodoser exakt vad du vill lära dig.

Lär dig att koda med Shaye Howe

Med en serie på 12 lektioner gör Shaye Howe ett riktigt bra jobb för att bryta ner grunderna i HTML som introducerar dig till terminologin och hur man använder de olika elementen i HTML och CSS. Olika lektioner är att lära känna HTML, CSS, förstå boxmodellen, positioneringsinnehåll, typografi och mer.

När det gäller att tillämpa lektionerna i handledningen ger inte webbplatsen möjlighet att snabbt se hur din HTML och CSS ser ut i kraft. För att övervinna detta kan du använda ett onlineverktyg som ger samma funktioner som du hittar i Codecademy och Dash.

Kolla in en CSS / HTML / JavaScript sandlåda som CSSDeck eller LiveWeave, som låter dig skriva in HTML, CSS och JavaScript och se det slutliga resultatet. Tekniskt kan du också använda HTML, CSS och JavaScript redaktörer i Dash och Codecademy också om du gillar den inställning de tillhandahåller.

När du jobbar dig igenom förklaringarna ger webbplatsen också exempel på kod för att du ska kunna prova dig själv. I slutet av varje lektion finns en praktisk övning som gör att du kan tillämpa det du har lärt dig.

När du har gjort det genom de 12 lektionerna kan du växla över till Advanced HTML och CSS Lesson, som inkluderar responsiv design, jQuery och mer.

Slutsats: Denna handledning tar en något annorlunda inställning till de andra förslag som anges här. Med en mycket mer fördjupad förklaring spenderar du mer tid på att läsa än vad du har lärt dig. Även om det här låter tråkigt för vissa, finns det några värdefulla lärdomar här som ger sammanhang och bättre förståelse för hur dessa språk fungerar.

Vad är ditt tag?

Nu är det dags att höra från dig. Finns det några online webbutvecklingshandledning som du rekommenderar? Vad tycker du är nästa steg efter att ha provat dessa online kurser? Låt oss veta i kommentarerna.

Bildkrediter: hackNY.org

Utforska mer om: Utbildningsteknik, HTML, HTML5, Webdesign.