Lär dig HTML
Lär dig HTML — En HTML-kurs med en editor med direktförhandsvisning i fickan
Lär dig HTML är en HTML-kurs för iPhone och Android som ger dig en HTML-editor med direktförhandsvisning ett tryck bort från varje lektion. Skriv en tagg, se sidan renderas och ta dig sedan från din första rubrik till formulär, tabeller, semantisk HTML5, tillgänglighet och web components genom 40 korta kurser.
- Pris
- Gratis, uppgradering till Pro
- Plattformar
- iOS och Android
- Språk
- 22
- Åldersgräns
- 4+
- Kräver
- iOS 15.1 eller senare
- App Store
- 3.0 ★ (1)
En tagg betyder mer när du har sett den rita upp något.
HTML är ett märkspråk, så det snabbaste sättet att förstå ett nytt element är att skriva det och titta på resultatet. Varje lektion i den här appen avslutas med editorn redan öppen, med förhandsvisningen bredvid din markup, och du lägger till CSS- eller JavaScript-filer först när du är redo.
Vad det är
Lär dig HTML är en HTML-kurs för iOS och Android som du kan börja använda gratis och som lär ut markup för webbsidor genom 40 kurser och 159 korta lektioner, ordnade från nybörjarnivå (A1) till avancerad nivå (C1). Varje ämne kombineras med en inbyggd HTML-kodeditor och direktförhandsvisning, 20 vägledda projekt som ett kontaktformulär och en tillgänglig pristabell, 20 felsökningsuppdrag och en AI-mentor, så att en komplett nybörjare kan gå från ett tomt dokument till semantiska, tillgängliga och välstrukturerade sidor.
I appen
Så här ser det ut
Kursen
Det här omfattar HTML-kursen
40 kurser och 159 lektioner från appens egen kurslista, i den ordning som lärvägen går igenom dem.
Dokumentstruktur, text, länkar, bilder och listor
Stommen i varje sida: dokumentstrukturen, rubriker och stycken, länkar och navigering, bilder och figurer samt ordnade och oordnade listor.
Tabeller, attribut och globala attribut
Så lägger du upp data i tabeller och använder sedan attribut som finjusterar ett element, inklusive globala attribut som fungerar på alla taggar.
Formulär: grunder, avancerade kontroller och validering
Först grundläggande inmatningsfält, sedan mer avancerade kontroller och därefter valideringsattributen som låter webbläsaren kontrollera ett fält innan det skickas.
Semantisk HTML5, head och metadata, ljud och video
Semantiska element, dokumentets head och dess metadata samt ljud- och videoelement.
Tillgänglighet, ARIA-roller och avancerade ARIA-mönster
Grunderna i tillgänglighet, ARIA-roller och attribut samt de avancerade mönster som används för anpassade widgetar.
Dataattribut, mallar, canvas, SVG och iframes
Anpassade dataattribut, HTML-mallar, canvas-elementet, SVG i HTML och inbäddat innehåll i iframes.
Webblagring, dra och släpp, SEO och e-postmallar
Webblagring och API:t för dra och släpp, SEO och sociala metataggar samt de särskilda reglerna för HTML-e-postmallar.
Web Components, prestanda och HTML i stor skala
Anpassade element, shadow DOM, import maps och progressiv förbättring samt prestanda, säkerhet, PWA:er och testning, med avslutning i HTML i stor skala.
Så fungerar det
Så lär du dig en tagg, från läsning till rendering
En lektion är kort och editorn finns bredvid, så att läsa om ett koncept och prova det sker under samma tillfälle.
Läs en kort lektion
Fortsätt där du slutade i lärstigen. Varje lektion tar upp en enda idé, till exempel en punktlista eller en bild med alt-text, och tar några minuter.
Skriv in det i editorn och se förhandsvisningen
Öppna editorn och skriv markupen. Förhandsvisningen ritar om sidan, och flikarna för CSS och JavaScript finns där när du vill formge sidan eller få den att reagera.
Kontrollera, rätta och bygg med det
Varje ämne avslutas med ett quiz och en kodutmaning. När en tagg eller ett fel är oklart förklarar AI-mentorn det, ett felsökningsuppdrag ger dig en trasig sida att reparera och ett väglett projekt hjälper dig att bygga något du kan visa upp.
Det här ingår
Det här finns i Learn HTML
40
Kurser från A1 till C1
159 lektioner tar dig från dokumentstruktur, text, länkar, bilder och listor via tabeller, formulär och semantisk HTML5 till tillgänglighet, web components, säkerhet samt History and Navigation API.
Direkt
HTML-editor med förhandsvisning
Skriv markup och se den renderade sidan uppdateras. Du kan lägga till CSS- och JavaScript-filer i samma projekt, så att ett enkelt dokument blir en liten fungerande webbplats.
20
Vägledda projekt
Stegvisa projekt, bland annat en receptsida, ett kontaktformulär, ett fotogalleri, en navigeringsrad och en tillgänglig pristabell.
20
Felsökningsuppdrag
Verkliga fel att spåra: ett registreringsformulär som inte skickar något, en etikett som ingen kan trycka på och en sida som laddas utzoomad på en telefon.
80
Fuskblad för taggar
En uppslagslista med 80 HTML-taggar, element och attribut för de stunder då du vet vad du vill göra men inte vad det kallas.
50
Intervjufrågor
Femtio intervjufrågor för webbutvecklare med tydliga svar, plus ett kodbibliotek med korta exempel som du kan öppna och redigera samt ett utrymme där du kan spara din egen kod och dina anteckningar.
Bakgrund
Vad är HTML, och kan du lära dig det genom att skriva på en telefon?
HTML (HyperText Markup Language) är språket som beskriver strukturen på en webbsida: vilken text som är en rubrik, vilket som är ett stycke, vart en länk leder och vad ett formulär frågar efter. Det är inte ett programmeringsspråk, så du behöver inte kämpa med loopar eller variabler, vilket är anledningen till att det brukar vara det första steget in i webbutveckling. Eftersom resultatet syns så fort du skriver passar HTML bra för korta sessioner i mobilen: en tagg är tillräckligt liten för att skriva med tummen, och en förhandsvisning visar direkt om det fungerade.
Element, taggar och attributde tre orden som används i varje lektion
Ett element är en innehållsdel med en betydelse, skriven mellan en öppningstagg och en stängningstagg, till exempel ett stycke eller ett listelement. Attribut finns i öppningstaggen och justerar den, till exempel adressen som en länk leder till eller texten som beskriver en bild. Nästan alla nybörjarmisstag beror på en saknad stängningstagg eller ett felplacerat attribut.
Semantisk HTMLrubriker, navigering, main och footer
Semantiska element anger vad ett block på sidan är, snarare än hur det ser ut. En navigeringsrad, en artikel och en sidfot har var sitt element, vilket hjälper skärmläsare, sökmotorer och alla som senare behöver redigera sidan. Det är vanan som skiljer en välordnad sida från en hög med generiska behållare.
HTML, CSS och JavaScriptvem som gör vad
HTML innehåller strukturen och innehållet, CSS styr hur innehållet ser ut och JavaScript lägger till funktioner, som att reagera på ett klick. När du lär dig HTML först får de andra två något att bygga vidare på. Editorn i appen har separata flikar för HTML, CSS och JavaScript, så att du kan hålla isär de tre uppgifterna från början.
Formulär och tillgänglighetdär enkla sidor blir mer seriösa
Formulär är sidans sätt att be besökaren om något, och det är också där de flesta tillgänglighetsproblemen börjar: en etikett som ingen kan trycka på, ett fält som en skärmläsare inte kan namnge. Etiketter, valideringsattribut och ARIA-roller är små markupdelar som avgör om en sida fungerar för alla.
Passar
Vem den är till för – och vem den inte är till för
Passar bra om du
- Skriver du din första webbsida och vill få varje tagg förklarad innan du använder den
- Lär du dig bäst när du kan se resultatet av varje rad direkt
- Driver du en blogg, en butikssida eller en portfolio och vill redigera koden bakom den
- Planerar du att gå vidare till CSS, JavaScript eller frontendutveckling och vill ha en stabil grund först
- Förbereder du dig inför en intervju för webbutvecklare och vill ha frågor att öva på
Inte rätt verktyg om du
- Behöver du ett komplett arbetsflöde på datorn med filer, mappar och en lokal server
- Förväntar du dig att varje kurs ska vara gratis; den första kursen, det första guidade projektet och två uppdrag är gratis, medan Pro låser upp resten
- Skriver du redan HTML för produktion varje dag och vill ha en referens snarare än en kurs
- Vill du lära dig ett designverktyg; det här handlar om markup och koden bakom webbsidor
Frågor
Vanliga frågor
Vad är Lär dig HTML?
Lär dig HTML är en app för iPhone och Android som lär ut HTML från den första taggen till avancerade ämnen. Den kombinerar 40 korta kurser med en inbyggd HTML-redigerare och liveförhandsvisning, 20 guidade projekt, 20 debugging-uppdrag och en AI-mentor. Den är gratis att komma igång med och finns på 22 språk.
Kan jag verkligen skriva och förhandsvisa HTML på en telefon?
Ja. Redigeraren i Lär dig HTML har flikar för HTML, CSS och JavaScript, och förhandsvisningen visar sidan som din markup skapar. En telefon passar bra för den fokuserade övning som HTML kräver, eftersom taggarna är korta. En större skärm blir användbar först när du hanterar många filer samtidigt.
Behöver jag någon tidigare erfarenhet av kodning?
Nej. Lärvägen börjar med hur ett HTML-dokument sätts ihop och förklarar varje term på ett enkelt språk innan den används. HTML har inga loopar eller variabler som du måste lära dig först, så Lär dig HTML utgår från att du är nybörjare, inte från att du är ett undantag.
Vad är skillnaden mellan HTML och CSS?
HTML definierar vad som finns på sidan och vad varje del betyder, till exempel en rubrik, en länk eller ett formulärfält. CSS definierar hur det ser ut, inklusive färger, avstånd och layout. Appen lär ut HTML först och låter dig lägga till CSS-filer i redigeraren, så att du kan se hur de två fungerar tillsammans utan att blanda ihop deras roller.
Hur lång tid tar det att lära sig grunderna i HTML?
De flesta kan skriva en enkel och korrekt sida efter några korta sessioner, eftersom de centrala elementen är få: rubriker, stycken, länkar, bilder, listor och grundläggande formulär. Djupare material som tillgänglighet, semantisk struktur och web components tar längre tid. Lektionerna här är utformade för att bli klara på några minuter, så en daglig vana är realistisk.
Vilka typer av projekt kan jag bygga i appen?
De 20 guidade projekten omfattar en receptsida, ett kontaktformulär, ett fotogalleri, en navigeringsmeny och en tillgänglig pristabell. Varje projekt byggs steg för steg. De är avsiktligt små, så att du slutför dem och kan behålla koden i dina sparade kodsnuttar.
Tar Learn HTML upp tillgänglighet och formulär?
Ja, och på djupet. Formulär omfattar tre kurser om grunder, avancerade kontroller och valideringsattribut. Tillgänglighet har egna kurser om grunderna, ARIA-roller och avancerade ARIA-mönster. Debugging-uppdragen innehåller också fel som en etikett som ingen kan trycka på, vilket gör ämnena praktiska i stället för abstrakta.
Är appen gratis, och vad ger Pro?
Du kan ladda ner appen gratis och börja direkt: den första kursen, det första guidade projektet, två uppdrag och live-redigeraren ingår, tillsammans med en daglig AI-mentorkvot. Pro låser upp alla kurser, alla projekt och uppdrag, certifieringsprovet och obegränsade frågor till AI-mentorn, och tar bort annonserna.
Kom igång
Skriv din första tagg och se den renderas
Gratis att komma igång på iOS och Android, på 22 språk.
Mer från CoddyKit
Tillgänglig på iOS och Android.