Guider och lärmaterial

Jag skriver guider på det sätt jag själv vill läsa dem: tydliga, praktiska och utan att förutsätta att läsaren redan känner till alla begrepp.

Här finns både kompletta studievägar, enskilda guider, övningar, kodexempel och verktyg. Materialet är i första hand skapat för undervisning, men kan användas av alla som vill lära sig mer om webbutveckling, Git, informationsteknik, programmering och IoT.

Börja här

Informationsteknik

En komplett studieväg för Informationsteknik nivå 1 med teori, laborationer, övningsbank, projekt och resurser.

Materialet behandlar bland annat datorer, operativsystem, nätverk, lagring, IT-säkerhet, felsökning, programmerbar hårdvara och dokumentation.

Öppna Informationsteknik nivå 1

Webbutveckling och webbserverprogrammering

En sammanhängande studieväg från den första HTML-sidan till en dynamisk och databasdriven webbapplikation.

Materialet omfattar HTML, CSS, JavaScript, PHP, MySQL, tillgänglighet, säkerhet, versionshantering, testning, dokumentation och driftsättning.

Öppna webbkurserna

Git och GitHub

En guide från det första GitHub-repot till arbete med branches, merge, konflikter och Git direkt i terminalen.

Öppna Gitguiden

Markdown och dokumentation

En guide till att skriva användbara README-filer och strukturera dokumentation i ett GitHub-projekt.

Öppna Markdownguiden

Webbutveckling

Från första webbsidan till färdig webbapp

Webbkurserna följer en progression i tio steg. Du börjar med webbens funktion, HTML och CSS och går sedan vidare till JavaScript, PHP, datalagring, MySQL, säkerhet och ett avslutande projekt.

Varje modul innehåller fakta, kodexempel, övningar, kontrollpunkter och en konkret produkt att bygga.

Öppna hela studievägen

Sätt upp utvecklingsmiljön

Guiden visar i vilken ordning Git, VS Code och XAMPP bör installeras. Den behandlar även GitHub-konto, inloggning i VS Code, CodePen och hur du kontrollerar att miljön fungerar.

Installera labbmiljön

Kursmaterial på GitHub

Övningar, exempel och fördjupningar finns i separata publika repositories:

• HTML-CSS_ex – HTML, CSS, responsivitet, tillgänglighet, SEO och gränssnittsdesign
• css-tips – modern CSS, container queries, färger, typografi, animationer och användbara mönster
• js_ex – JavaScript, DOM, händelser, funktioner, lagring och interaktivitet
• php_ex – PHP, formulär, arrayer, sessioner, filer, databaser och säkerhet

Materialet kan läsas direkt på GitHub, klonas till den egna datorn eller användas som grund för egna övningar.

Git, GitHub och versionshantering

Kom igång med GitHub och VS Code

Den enklaste vägen börjar på GitHub:

1. Skapa ett repository med en README-fil.
2. Tryck på punkt för att öppna repot i VS Code i webbläsaren.
3. Välj Clone locally.
4. Klona webbprojektet till C:/xampp/htdocs.
5. Öppna det i vanliga VS Code.
6. Gör en ändring, skapa en commit och synkronisera med GitHub.

Öppna Gitguidens startflöde

Git i VS Code

Guiden visar hur Git används genom VS Codes grafiska gränssnitt. Här behandlas commits, pull, push, sync, branches, merge, historik och konflikter.

Öppna Git i VS Code

Git i terminalen

För den som vill förstå vad Git faktiskt gör och arbeta direkt i PowerShell, kommandotolken eller en terminal.

Öppna Git i terminalen

God Git-praxis

Råd om små commits, tydliga commitmeddelanden, branches, säker hantering av hemligheter och hur ett repository hålls begripligt över tid.

Öppna Git best practices

Source control i ett webbprojekt

En fördjupning om varför Git behövs när HTML, CSS, JavaScript, PHP, SQL och dokumentation förändras samtidigt.

Öppna guiden om source control

Markdown och projektdokumentation

Skriv användbar Markdown

Guiden börjar med rubriker, listor, länkar, bilder, tabeller och kodblock. Därefter byggs en enkel README ut till ett nav för hela projektets dokumentation.

Öppna Markdownguiden

Markdown-lathund

En mer koncentrerad sida med syntax och exempel för den som snabbt behöver kontrollera hur något skrivs.

Öppna Markdown-lathunden

Dokumentera större projekt

När en README inte längre räcker kan dokumentationen delas upp i exempelvis:

• README.md
• TODO.md
• CHANGELOG.md
• CONTRIBUTING.md
• docs/installation.md
• docs/security.md
• docs/architecture.md
• docs/deployment.md

Markdownguiden innehåller förslag på struktur och färdiga rubriker att utgå från.

CSS och gränssnittsdesign

HTML och CSS från grunden

Repositoryt innehåller teori, exempel och övningar om bland annat semantisk HTML, formulär, tabeller, boxmodellen, Flexbox, Grid, responsiv design, tillgänglighet, SEO och prestanda.

Öppna HTML-CSS_ex

Moderna CSS-tips

En samling exempel på funktioner och arbetssätt som gör det möjligt att bygga mer med CSS och mindre med JavaScript.

Öppna css-tips

ThemeBuilder

Ett visuellt verktyg för att skapa ett eget CSS-tema. Här kan du välja färger, färgharmoni, typsnitt, kontrast, rundning och CSS-format som Hex, RGB, HSL och OKLCH.

Det färdiga temat kan kopieras eller laddas ner som CSS.

Öppna ThemeBuilder

Växla mellan ljust och mörkt tema

ld-theme-toggle är en liten webbkomponent som kan läggas in på en webbsida för att hantera ljust, mörkt och systemstyrt färgtema.

Användarens val sparas automatiskt lokalt i webbläsaren.

Öppna ld-theme-toggle

PHP och databaser

PHP-exempel

Repositoryt innehåller exempel på variabler, villkor, loopar, arrayer, funktioner, klasser, formulär, superglobals, cookies, sessioner och filhantering.

Det innehåller även material om databasanslutningar och skydd mot SQL-injektion.

Öppna php_ex

PHP och MySQL i webbkurserna

Webbkursernas serverdel går från en lokal XAMPP-installation till formulär, sessioner, datalagring, CRUD, prepared statements, säkerhet och ett avslutande dynamiskt projekt.

Öppna serverdelen av webbkurserna

Python, ESP8266 och IoT

Pythonexempel

Kod och övningar för att träna variabler, villkor, loopar, funktioner, algoritmer och automatisering med Python.

Öppna py_ex

MicroPython och ESP8266

Exempel på hur Python och MicroPython kan användas tillsammans med ESP8266 för sensorer, nätverkskommunikation, datainsamling och egna webbgränssnitt.

Öppna py_ESP8266

Informationsteknik

Materialet för Informationsteknik nivå 1 innehåller bland annat:

• datorns komponenter
• Windows och Linux
• filsystem och behörigheter
• nätverk, IP, DNS och DHCP
• Cisco Packet Tracer
• lokal lagring, nätverkslagring och molntjänster
• programmerbar hårdvara
• felsökning och support
• IT-säkerhet
• dokumentation
• projektarbete

Det finns även nedladdningsbara serviceprotokoll, projektunderlag, planritningar och faktamaterial.

Öppna IKT-materialet

All kod på GitHub

Alla repositories ligger samlade på min GitHub-profil. Där finns både undervisningsmaterial, experiment, webbappar, spelprototyper och äldre projekt.

Besök j4rl på GitHub

Guider under utveckling

Mer material planeras inom bland annat:

• lokal AI på egen hårdvara
• AI som stöd vid programmering
• automatisering med n8n
• ESP32 och sensorer
• sensordata i webbläsaren
• Blender till Unreal Engine
• modulära spelmiljöer
• API-utveckling med PHP och JSON
• säkerhet och testning av webbappar

Så är guiderna tänkta att användas

De flesta guider följer samma arbetsgång:

1. Vad du ska göra
2. Vad du behöver
3. Arbetsgång steg för steg
4. Så kontrollerar du att det fungerar
5. Vanliga fel
6. Övningar och utmaningar
7. Förslag på nästa steg

En guide ska inte bara visa vilka knappar du ska trycka på. Den ska göra det lättare att förstå varför du gör det och hur du kan lösa nästa problem på egen hand.