# AGENTS.md ## Projektoversigt Dette er et uddannelsesforløbsdepot til undervisning i grundlæggende webudvikling for begyndere. Forløbet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates og indeholder 24 praktiske lektioner om JavaScript, CSS og HTML. ### Centrale elementer - **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler - **Praktiske projekter**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor og AI Chat Assistant - **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger) - **Flersproget support**: Automatiske oversættelser til 50+ sprog via GitHub Actions - **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI projekter) ### Arkitektur - Uddannelsesdepot med lektionbaseret struktur - Hver lektionsmappe indeholder README, kodeeksempler og løsninger - Selvstændige projekter i separate mapper (quiz-app, forskellige lektionsprojekter) - Oversættelsessystem ved brug af GitHub Actions (co-op-translator) - Dokumentation serveres via Docsify og er tilgængelig som PDF ## Opsætningskommandoer Dette depot er primært til forbrug af uddannelsesindhold. For arbejde med specifikke projekter: ### Hoveddepot opsætning ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` ### Quiz App opsætning (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Start udviklingsserver npm run build # Byg til produktion npm run lint # Kør ESLint ``` ### Bank Projekt API (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # Start API-server npm run lint # Kør ESLint npm run format # Formater med Prettier ``` ### Browser Extension projekter ```bash cd 5-browser-extension/solution npm install # Følg browser-specifikke instruktioner til indlæsning af udvidelser ``` ### Space Game projekter ```bash cd 6-space-game/solution npm install # Åbn index.html i browseren eller brug Live Server ``` ### Chat projekt (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai # Indstil miljøvariablen GITHUB_TOKEN python api.py ``` ## Udviklingsarbejdsgang ### For indholdsleverandører 1. **Fork depotet** til din GitHub konto 2. **Klon dit fork** lokalt 3. **Opret en ny gren** til dine ændringer 4. Foretag ændringer i lektionens indhold eller kodeeksempler 5. Test eventuelle kodeændringer i relevante projektmapper 6. Indsend pull requests i henhold til bidragsretningslinjer ### For lærende 1. Fork eller klon depotet 2. Naviger sekventielt gennem lektionsmapperne 3. Læs README-filer for hver lektion 4. Gennemfør før-lektions quizzer på https://ff-quizzes.netlify.app/web/ 5. Arbejd gennem kodeeksemplerne i lektionsmapperne 6. Udfør opgaver og udfordringer 7. Tag efter-lektions quizzer ### Live udvikling - **Dokumentation**: Kør `docsify serve` i rodmappen (port 3000) - **Quiz App**: Kør `npm run dev` i quiz-app mappen - **Projekter**: Brug VS Code Live Server-udvidelsen til HTML-projekter - **API projekter**: Kør `npm start` i de respektive API mapper ## Testinstruktioner ### Quiz App test ```bash cd quiz-app npm run lint # Tjek for kode stilproblemer npm run build # Bekræft at byggeriet lykkes ``` ### Bank API test ```bash cd 7-bank-project/api npm run lint # Tjek for kode stil problemer node server.js # Bekræft at serveren starter uden fejl ``` ### Generel testtilgang - Dette er et uddannelsesdepot uden omfattende automatiserede tests - Manuel test fokuserer på: - At kodeeksempler kører uden fejl - At links i dokumentationen fungerer korrekt - At projektbygninger fuldføres succesfuldt - At eksempler følger bedste praksis ### Forud for indsendelse - Kør `npm run lint` i mapper med package.json - Verificer at markdown-links er gyldige - Test kodeeksempler i browser eller Node.js - Kontroller at oversættelser bevarer korrekt struktur ## Kode stil retningslinjer ### JavaScript - Brug moderne ES6+ syntaks - Følg standard ESLint konfigurationer i projekterne - Brug meningsfulde variabel- og funktionsnavne for pædagogisk klarhed - Tilføj kommentarer der forklarer koncepter for lærende - Formater med Prettier hvor det er konfigureret ### HTML/CSS - Semantiske HTML5 elementer - Responsive designprincipper - Klare konventioner for klassenavne - Kommentarer der forklarer CSS-teknikker til lærende ### Python - PEP 8 stilretningslinjer - Klare, pædagogiske kodeeksempler - Type hints hvor det er hjælpsomt for læring ### Markdown dokumentation - Klar overskriftsstruktur - Kodeblokke med sprogangivelse - Links til yderligere ressourcer - Skærmbilleder og billeder i `images/` mapper - Alt-tekst til billeder for tilgængelighed ### Filorganisation - Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics osv.) - Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper - Billeder gemt i lektion-specifikke `images/` mapper - Oversættelser i `translations/{language-code}/` struktur ## Byg og udrulning ### Quiz App udrulning (Azure Static Web Apps) quiz-app er konfigureret til Azure Static Web Apps udrulning: ```bash cd quiz-app npm run build # Opretter dist/ mappe # Udruller via GitHub Actions workflow ved push til main ``` Azure Static Web Apps konfiguration: - **App placering**: `/quiz-app` - **Output placering**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Generering af PDF dokumentation ```bash npm install # Installer docsify-to-pdf npm run convert # Generer PDF fra docs ``` ### Docsify dokumentation ```bash npm install -g docsify-cli # Installer Docsify globalt docsify serve # Kør på localhost:3000 ``` ### Projekt-specifikke builds Hver projektmappe kan have sin egen build-proces: - Vue projekter: `npm run build` skaber produktionsbundles - Statiske projekter: Ingen build-step, server filer direkte ## Pull Request retningslinjer ### Titel format Brug klare, beskrivende titler der angiver ændringsområde: - `[Quiz-app] Tilføj ny quiz til lektion X` - `[Lesson-3] Ret stavefejl i terrarium projekt` - `[Translation] Tilføj spansk oversættelse til lektion 5` - `[Docs] Opdater opsætningsinstruktioner` ### Krævede kontroller Før indsendelse af PR: 1. **Kodekvalitet**: - Kør `npm run lint` i berørte projektmapper - Ret alle linting fejl og advarsler 2. **Build verifikation**: - Kør `npm run build` hvis relevant - Sørg for ingen build fejl 3. **Link validering**: - Test alle markdown-links - Bekræft billedreferencer fungerer 4. **Indholdsrevision**: - Læs korrektur for stave- og grammatikfejl - Sørg for kodeeksempler er korrekte og pædagogiske - Verificer at oversættelser bevarer original betydning ### Bidragskrav - Accepter Microsoft CLA (automatisk ved første PR) - Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer - Henvis til issues i PR-beskrivelsen hvis relevant ### Review proces - PR’s gennemgås af vedligeholdere og community - Prioritér pædagogisk klarhed - Kodeeksempler skal følge gældende bedste praksis - Oversættelser vurderes for nøjagtighed og kulturel relevans ## Oversættelsessystem ### Automatisk oversættelse - Bruger GitHub Actions med co-op-translator workflow - Oversætter til 50+ sprog automatisk - Kildefiler i hovedmapper - Oversatte filer i `translations/{language-code}/` mapper ### Tilføjelse af manuelle oversættelsesforbedringer 1. Find fil i `translations/{language-code}/` 2. Foretag forbedringer mens strukturen bevares 3. Sørg for kodeeksempler fortsat fungerer 4. Test eventuelt lokaliseret quiz-indhold ### Oversættelsesmetadata Oversatte filer inkluderer metadata-header: ```markdown ``` ## Fejlfinding og problemløsning ### Almindelige problemer **Quiz app starter ikke**: - Tjek Node.js version (v14+ anbefales) - Slet `node_modules` og `package-lock.json`, kør `npm install` igen - Tjek for port-konflikter (standard: Vite bruger port 5173) **API server starter ikke**: - Tjek at Node.js version er minimum (node >=10) - Se om port allerede er i brug - Sørg for alle afhængigheder installeret med `npm install` **Browser extension indlæses ikke**: - Tjek at manifest.json er korrekt formatteret - Se efter fejl i browserens konsol - Følg browser-specifikke instruktioner til installation af extension **Problemer med Python chat projekt**: - Sørg for OpenAI pakken er installeret: `pip install openai` - Tjek at miljøvariablen GITHUB_TOKEN er sat - Tjek adgangstilladelser til GitHub Models **Docsify serverer ikke dokumentation**: - Installer docsify-cli globalt: `npm install -g docsify-cli` - Kør fra depotets rodfolder - Sørg for at `docs/_sidebar.md` findes ### Tips til udviklingsmiljø - Brug VS Code med Live Server extension til HTML projekter - Installer ESLint og Prettier extensions for ensartet formatering - Brug browser DevTools til JavaScript-debugging - For Vue projekter, installer Vue DevTools browser extension ### Ydeevnehensyn - Stort antal oversatte filer (50+ sprog) betyder store fulde kloner - Brug shallow clone hvis du kun arbejder med indhold: `git clone --depth 1` - Ekskluder oversættelser fra søgninger ved arbejde med engelsk indhold - Build-processer kan være langsomme ved første kørsel (npm install, Vite build) ## Sikkerhedshensyn ### Miljøvariabler - API nøgler må aldrig committes til depotet - Brug `.env` filer (er allerede i `.gitignore`) - Dokumenter krævede miljøvariabler i projekternes README-filer ### Python projekter - Brug virtuelle miljøer: `python -m venv venv` - Hold afhængigheder opdaterede - GitHub tokens skal have minimale nødvendige tilladelser ### GitHub Models adgang - Personlige Access Tokens (PAT) kræves til GitHub Models - Tokens skal opbevares som miljøvariabler - Aldrig commit tokens eller legitimationsoplysninger ## Yderligere noter ### Målgruppe - Komplette begyndere i webudvikling - Studerende og selvstuderende - Lærere der bruger forløbet i klasserum - Indholdet er designet til tilgængelighed og gradvis kompetenceopbygning ### Uddannelsesfilosofi - Projektbaseret læringstilgang - Hyppige videnschecks (quizzer) - Praktiske kodningsøvelser - Eksempler på virkelige anvendelser - Fokus på fundament før frameworks ### Depotvedligeholdelse - Aktivt fællesskab af lærende og bidragsydere - Regelmæssige opdateringer af afhængigheder og indhold - Issues og diskussioner overvåges af vedligeholdere - Oversættelsesopdateringer automatiseres via GitHub Actions ### Relaterede ressourcer - [Microsoft Learn moduler](https://docs.microsoft.com/learn/) - [Student Hub ressourcer](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalet til lærende - Yderligere kurser: Generativ AI, Data Science, ML, IoT forløb tilgængelige ### Arbejde med specifikke projekter For detaljerede instruktioner om individuelle projekter, se README-filerne i: - `quiz-app/README.md` - Vue 3 quiz applikation - `7-bank-project/README.md` - Banking applikation med autentificering - `5-browser-extension/README.md` - Udvikling af browser extension - `6-space-game/README.md` - Canvas-baseret spiludvikling - `9-chat-project/README.md` - AI chat assistent projekt ### Monorepo struktur Selvom det ikke er et traditionelt monorepo, indeholder dette depot flere uafhængige projekter: - Hver lektion er selvstændig - Projekter deler ikke afhængigheder - Arbejd på individuelle projekter uden at påvirke andre - Klon hele depotet for hele kursusoplevelsen --- **Ansvarsfraskrivelse**: Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.