HTML Code Play: Learn HTML

Leer webdevelopment door code te wijzigen en te zien wat het doet. HTML Code Play combineert HTML-, CSS- en JavaScript-lessen met een mobiele code-editor, uitvoerbare voorbeelden, quizzen en programmeerspelletjes. Gebruik het om een ​​concept te bestuderen, het zelf uit te proberen en je leerproces bij te houden op hetzelfde apparaat.

LEZEN, BEWERKEN EN UITVOEREN

Verken de leercatalogus, open een tutorial en lees de uitleg ervan naast een volledig codevoorbeeld. Stuur het voorbeeld naar de editor, voer het origineel uit, wijzig vervolgens een tag, stijl of expressie en vergelijk de uitvoer. Deze praktische workflow verbindt de syntax die je leest met de pagina of het gedrag dat het creëert.

De werkruimte ondersteunt het bewerken van HTML, CSS en JavaScript met syntaxmarkering. Gebruik ongedaan maken en opnieuw uitvoeren tijdens het experimenteren, zoek tekst, spring naar een regel en pas de lettergrootte van de editor aan. Begin een nieuwe pagina of kies een beschikbare sjabloon als je een startpunt wilt. Open HTML-bestanden, sla je werk op, gebruik 'Opslaan als' voor een kopie of deel een codebestand via de deelopties van je apparaat.

GELEIDE LEER EN OEFENING

De catalogus omvat 11 onderwerpen over webtechnologie, van paginastructuur en -styling tot scripting, vectorafbeeldingen, responsieve lay-outs en interactieve voorbeelden. Zoek lessen op titel of sectie om het materiaal te vinden dat u nodig hebt. Bewaar nuttige tutorials voor gerichte herhaling, voeg uw eigen lesnotities toe en navigeer tussen tutorials met de knoppen Vorige en Volgende.

Elke tutorial combineert uitleg, syntax en een werkend voorbeeld. Sluit af met een quiz over het onderwerp of een oefening. Oefeningen vragen u om ontbrekende code aan te vullen, met hints en feedback op uw antwoorden om u te helpen de details te controleren die u mogelijk hebt gemist. De quizresultaten geven u een manier om uw begrip te controleren voordat u terugkeert naar de les.

ZES MANIEREN OM TE OEFENEN

Kies een codeerspel om aan een andere vaardigheid te werken:

- Code Builder: herschik blokken om werkende code te reconstrueren.

- Output Detective: voorspel wat een codefragment produceert.

- Bug Hunt: identificeer een foutieve regel.

- Fill the Gap: kies het ontbrekende code-token.

- Match Lab: verbind termen met hun betekenis. - Snelle vragen: beantwoord waar/onwaar-vragen binnen een bepaalde tijd.

Activiteitsniveaus registreren resultaten en ontgrendelen de volgende stap. Speel beschikbare niveaus opnieuw om je score te verbeteren, of gebruik gemengde oefenafspeellijsten zodra deze beschikbaar komen.

HOUD JE LEERPROCES GEORGANISEERD

Het voortgangsscherm geeft een overzicht van de lessen, quizzen en oefeningen die je hebt bekeken, gesorteerd op technologie. Bekijk je vaardigheidskaart en het voorgestelde volgende studieplan, ga verder met een les vanuit de startpagina en doe mee aan een dagelijkse uitdaging. Reeksen en badges voor uitdagingen maken je activiteit zichtbaar. Optionele leerherinneringen vereisen toestemming voor meldingen en kunnen worden uitgeschakeld.

Je lesvoortgang, notities en spelresultaten worden op het apparaat opgeslagen. De bedieningselementen van het leerscherm omvatten grotere lettertypen, hoog contrast en minder beweging. Afzonderlijke HTML-, CSS- en JavaScript-assessments bieden in-app prestatiecertificaten; dit zijn leerresultaten van de app, geen geaccrediteerde kwalificatie.

Online communityberichten bieden een andere bron van code om te verkennen wanneer je verbonden bent. Netwerkondersteunde content en voorbeelden die externe bronnen laden, vereisen internettoegang; lokale voortgangsopslag biedt geen cloudsynchronisatie.

Voor beginners, studenten en cursisten die front-end concepten opnieuw bekijken, begin met één voorbeeld, breng een kleine wijziging aan en bouw begrip op door te oefenen.