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

Annons

När du kliar för att pröva din kod, finns det helt enkelt ingen begränsning för antalet självstudier, videor och onlinekurser där du kan prova. Men ibland är det bästa sättet att lära sig något genom att dyka in och prova det från första hand. Webbutveckling är inte annorlunda.

Om du är nyfiken på HTML, CSS och JavaScript, eller tror att du kan ha ett förmåga att lära dig att skapa webbplatser från grunden - det finns några bra steg-för-steg handledning värt ett försök.

Följande lista med tutorials leder dig igenom grunderna i HTML och CSS, och till och med ger dig en introduktion till den komplexa värld som är JavaScript Vad är JavaScript och kan Internet existera utan det?JavaScript är en av de saker som många tar för givet. Alla använder det. Läs mer - åtminstone när det gäller nybörjare. Men vad de inte kommer att göra är att förbereda dig för ett liv som utvecklare direkt. De flesta av dessa tjänster är helt enkelt en enkel plats att börja.

Det tar mycket mer än detta för att börja utveckla webbplatser professionellt. Dessa verktyg, av vilka 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 de mer komplicerade kurserna.

Människorna 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 kompletta nybörjare att börja. Genom en serie av fem projekt, lär du dig terminologin och grundläggande kodningskunskaper så att du kan bygga en webbplats som liknar en about.me-sida, hur du 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 hjälp av former och linjer eller till och med ett Mad Libs-spel.

Dash-instruktionerna rör sig i en rimlig takt och tar dig igenom varje steg några kodrader i taget. Som med alla övningar skulle jag rekommendera att du antecknar när du arbetar. Detta hjälper dig att memorera de olika verktygen du lär dig, och med tutorials från generalförsamlingen, när du har avslutat en fas, verkar det inte finnas ett sätt att upprepa det.

Slutsats: Genom att använda Dash skapar du all den kunskap du behöver för att sätta ihop en grundläggande modern webbplats - från navigering, för responsiv design. Du introduceras till och med grunderna för hur du skapar ett anpassat Tumblr-tema. Som sagt, det finns bara totalt fyra lektioner på Dash. Medan du kan ta de koncept du har lärt dig och försöka tillämpa dem på olika sätt, måste du komplettera dina kunskaper med andra kurser som ingår i den här listan.

Codecademy har funnits ganska mycket längre än Dash, och lägger ofta till nya lektioner till sina erbjudanden. Med samma steg-för-steg allomfattande lektioner som du hittar på Dash går Codecademy ett steg längre genom att ge användare en allmän översikt över att skapa en webbplats med HTML och CSS, men ger också djupgående handledning om de enskilda språken, HTML, CSS och JavaScript.

Liksom andra tjänster visar Codecademy hur du skapar en Navigeringsmeny, Lägg till bakgrundsbilder, göra en galleri med bilder, eller till och med a anmälningssida. (För att lägga till funktionalitet på din registrerings sida, se till att gå igenom Ruby on Rails handledning.)

Det finns också dedikerade lektioner om jQuery Att göra webben interaktiv: en introduktion till jQueryjQuery är ett skriptbibliotek 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 det mest utvecklade, mest stödda och mest använda ... Läs mer , ett nyckelspråk som gör JavaScript mycket lättare att lära sig. Om du är nyfiken på backend-utveckling finns det också djupgående lektioner för Ruby, Python, PHP och mer.

Förutom att lära sig att designa en webbplats och dyka in i komplikationer med programmeringsspråk 7 användbara trick för att behärska ett nytt programmeringsspråkDet är okej att bli överväldigad när du lär dig att koda. Du kommer förmodligen att glömma saker så snabbt som du lär dig dem. Dessa tips kan hjälpa dig att bättre behålla all den nya informationen. Läs mer , kan du också använda Codecademy för att få grunderna för hur du skapar webbappar och hur du lägger till registrerings-, inloggnings- och utloggningsfunktioner på din webbplats.

Slutsats: Precis som Dash är interaktiviteten hos Codecademy ovärderlig. Att kunna se hur varje steg materialiseras på din webbplats är uppmuntrande, och installationen gör det också lätt att upptäcka misstag. Om du är en nybörjare är Codecademy ett utmärkt ställe att blöta tårna och avgöra om kodning och webbdesign passar dig rätt. Med den erfarenheten kan du ta den kunskapen till en betald kurs eller klass.

Tutsplus.com är en webbplats fylld med självstudier (gratis och betald) om en mängd olika ämnen inklusive allt från mobil Designa en genombrott-app? 7 mobila utvecklingsbloggar du bör läsaMobilutrymmet är så nytt att trenderna ständigt förändras och nya insikter görs varje dag. Om du planerar att utveckla mobilappar, hur kan du hålla jämna steg utan att bli arg? Läs mer och spelutveckling 4 gratis webbplatser där du kan lära dig grunderna i spelutvecklingNär du letar efter en bra tutorial-serie för spelutveckling vill du ha en som kommer att lära dig praxis och mentalitet för god kodning eftersom du sedan kan transponera dessa metoder på vilket språk som helst eller plattform. Läs mer till färgteori Hur man lär sig färgteori på mindre än en timmeGrundläggande kunskaper om färgteori kan betyda skillnaden mellan en "amatör" -estetik och en "professionell" - och det tar verkligen 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 gratisAdobe Illustrator har länge varit det valbara illustrationsverktyget för grafiska artister. Är du redo att leva dina mönster? Så här kan du lära dig Adobe Illustrator gratis. Läs mer . Även om inte alla lektioner som lärs ut på webbplatsen följer steg-för-steg-modellen, finns det några som tar denna inställning och leder användare genom enkel webbutveckling.

En särskilt användbar handledning leder dig igenom stegen till design och kod din webbplats. Handledningen går visserligen tillbaka till 2009 så designestetiken kanske inte tilltalar dig, men som sagt, handledning lär dig de färdigheter som krävs för att designa din webbplats och du kan sedan tillämpa dessa färdigheter på en mer uppdaterad design. Ett annat förbehåll som är värt att nämna med denna självstudie ä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 mot en avgift på $ 50 per månad.

Handledningen leder dig genom att designa en grundläggande webbplats med två kolumner med en sidhuvud och sidfot. Webbplatsen innehåller innehåll, en navigeringsfält, knappar på sociala medier och mer. När du har designat webbplatsen i Photoshop kan du byta till en kodredigerare och självstudien leder dig igenom koden som krävs för att förvandla din design till en HTML-sida. Handledningen kommer att kräva grundläggande kunskaper om HTML så jag rekommenderar att du testar den här guiden efter att du har gått igenom de första tutorials för generalförsamlingen.

Om du vill skapa en mer detaljerad webbplats kan du kolla in en annan Tuts + -handledning hur man utformar en vacker webbplats från grunden. Annan PSD till HTMl handledning gör livet lite enklare genom att tillhandahålla HTML-, CSS- och bildfiler. Andra handledning om Tuts + leder dig genom hur du skapar en Tumblr-dagbokstema - även om den här är en enkel Photoshop-design minus koden.

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

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

När det gäller att tillämpa lektionerna i lektionen ger webbplatsen inte ett sätt att snabbt se hur din HTML och CSS ser ut. 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 mata in HTML, CSS och JavaScript och se det slutliga resultatet. Tekniskt kan du också använda HTML-, CSS- och JavaScript-redigerare i Dash och Codecademy om du gillar installationen de tillhandahåller.

När du arbetar dig igenom förklaringarna ger webbplatsen också exempel på kod som du kan prova själv. I slutet av varje lektion är 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 byta till Avancerad HTML- och CSS-lektion, som inkluderar responsiv design, jQuery och mer.

Slutsats: Den här handledningen tar en något annorlunda inställning till de andra förslagen som listas här. Med en mycket mer djupgående förklaring kommer du att lägga mer tid på att läsa än du kommer att tillämpa det du har lärt dig. Även om detta kan låta tråkigt för vissa, finns det några värdefulla lektioner 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 onlineutvecklingsstudier som du rekommenderar? Vad tror du är nästa steg efter att ha testat dessa onlinekurser? Låt oss veta i kommentarerna.

Bildkredit: hackNY.org