AGENTS.md

1# AGENTS.md
2 
3## Projektoversigt
4 
5Dette 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.
6 
7### Centrale elementer
8 
9- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler
10- **Praktiske projekter**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor og AI Chat Assistant
11- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger)
12- **Flersproget support**: Automatiske oversættelser til 50+ sprog via GitHub Actions
13- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI projekter)
14 
15### Arkitektur
16 
17- Uddannelsesdepot med lektionbaseret struktur
18- Hver lektionsmappe indeholder README, kodeeksempler og løsninger
19- Selvstændige projekter i separate mapper (quiz-app, forskellige lektionsprojekter)
20- Oversættelsessystem ved brug af GitHub Actions (co-op-translator)
21- Dokumentation serveres via Docsify og er tilgængelig som PDF
22 
23## Opsætningskommandoer
24 
25Dette depot er primært til forbrug af uddannelsesindhold. For arbejde med specifikke projekter:
26 
27### Hoveddepot opsætning
28 
29```bash
30git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
31cd Web-Dev-For-Beginners
32```
33 
34### Quiz App opsætning (Vue 3 + Vite)
35 
36```bash
37cd quiz-app
38npm install
39npm run dev        # Start udviklingsserver
40npm run build      # Byg til produktion
41npm run lint       # Kør ESLint
42```
43 
44### Bank Projekt API (Node.js + Express)
45 
46```bash
47cd 7-bank-project/api
48npm install
49npm start          # Start API-server
50npm run lint       # Kør ESLint
51npm run format     # Formater med Prettier
52```
53 
54### Browser Extension projekter
55 
56```bash
57cd 5-browser-extension/solution
58npm install
59# Følg browser-specifikke instruktioner til indlæsning af udvidelser
60```
61 
62### Space Game projekter
63 
64```bash
65cd 6-space-game/solution
66npm install
67# Åbn index.html i browseren eller brug Live Server
68```
69 
70### Chat projekt (Python Backend)
71 
72```bash
73cd 9-chat-project/solution/backend/python
74pip install openai
75# Indstil miljøvariablen GITHUB_TOKEN
76python api.py
77```
78 
79## Udviklingsarbejdsgang
80 
81### For indholdsleverandører
82 
831. **Fork depotet** til din GitHub konto
842. **Klon dit fork** lokalt
853. **Opret en ny gren** til dine ændringer
864. Foretag ændringer i lektionens indhold eller kodeeksempler
875. Test eventuelle kodeændringer i relevante projektmapper
886. Indsend pull requests i henhold til bidragsretningslinjer
89 
90### For lærende
91 
921. Fork eller klon depotet
932. Naviger sekventielt gennem lektionsmapperne
943. Læs README-filer for hver lektion
954. Gennemfør før-lektions quizzer på https://ff-quizzes.netlify.app/web/
965. Arbejd gennem kodeeksemplerne i lektionsmapperne
976. Udfør opgaver og udfordringer
987. Tag efter-lektions quizzer
99 
100### Live udvikling
101 
102- **Dokumentation**: Kør `docsify serve` i rodmappen (port 3000)
103- **Quiz App**: Kør `npm run dev` i quiz-app mappen
104- **Projekter**: Brug VS Code Live Server-udvidelsen til HTML-projekter
105- **API projekter**: Kør `npm start` i de respektive API mapper
106 
107## Testinstruktioner
108 
109### Quiz App test
110 
111```bash
112cd quiz-app
113npm run lint       # Tjek for kode stilproblemer
114npm run build      # Bekræft at byggeriet lykkes
115```
116 
117### Bank API test
118 
119```bash
120cd 7-bank-project/api
121npm run lint       # Tjek for kode stil problemer
122node server.js     # Bekræft at serveren starter uden fejl
123```
124 
125### Generel testtilgang
126 
127- Dette er et uddannelsesdepot uden omfattende automatiserede tests
128- Manuel test fokuserer på:
129  - At kodeeksempler kører uden fejl
130  - At links i dokumentationen fungerer korrekt
131  - At projektbygninger fuldføres succesfuldt
132  - At eksempler følger bedste praksis
133 
134### Forud for indsendelse
135 
136- Kør `npm run lint` i mapper med package.json
137- Verificer at markdown-links er gyldige
138- Test kodeeksempler i browser eller Node.js
139- Kontroller at oversættelser bevarer korrekt struktur
140 
141## Kode stil retningslinjer
142 
143### JavaScript
144 
145- Brug moderne ES6+ syntaks
146- Følg standard ESLint konfigurationer i projekterne
147- Brug meningsfulde variabel- og funktionsnavne for pædagogisk klarhed
148- Tilføj kommentarer der forklarer koncepter for lærende
149- Formater med Prettier hvor det er konfigureret
150 
151### HTML/CSS
152 
153- Semantiske HTML5 elementer
154- Responsive designprincipper
155- Klare konventioner for klassenavne
156- Kommentarer der forklarer CSS-teknikker til lærende
157 
158### Python
159 
160- PEP 8 stilretningslinjer
161- Klare, pædagogiske kodeeksempler
162- Type hints hvor det er hjælpsomt for læring
163 
164### Markdown dokumentation
165 
166- Klar overskriftsstruktur
167- Kodeblokke med sprogangivelse
168- Links til yderligere ressourcer
169- Skærmbilleder og billeder i `images/` mapper
170- Alt-tekst til billeder for tilgængelighed
171 
172### Filorganisation
173 
174- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics osv.)
175- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper
176- Billeder gemt i lektion-specifikke `images/` mapper
177- Oversættelser i `translations/{language-code}/` struktur
178 
179## Byg og udrulning
180 
181### Quiz App udrulning (Azure Static Web Apps)
182 
183quiz-app er konfigureret til Azure Static Web Apps udrulning:
184 
185```bash
186cd quiz-app
187npm run build      # Opretter dist/ mappe
188# Udruller via GitHub Actions workflow ved push til main
189```
190 
191Azure Static Web Apps konfiguration:
192- **App placering**: `/quiz-app`
193- **Output placering**: `dist`
194- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
195 
196### Generering af PDF dokumentation
197 
198```bash
199npm install                    # Installer docsify-to-pdf
200npm run convert               # Generer PDF fra docs
201```
202 
203### Docsify dokumentation
204 
205```bash
206npm install -g docsify-cli    # Installer Docsify globalt
207docsify serve                 # Kør på localhost:3000
208```
209 
210### Projekt-specifikke builds
211 
212Hver projektmappe kan have sin egen build-proces:
213- Vue projekter: `npm run build` skaber produktionsbundles
214- Statiske projekter: Ingen build-step, server filer direkte
215 
216## Pull Request retningslinjer
217 
218### Titel format
219 
220Brug klare, beskrivende titler der angiver ændringsområde:
221- `[Quiz-app] Tilføj ny quiz til lektion X`
222- `[Lesson-3] Ret stavefejl i terrarium projekt`
223- `[Translation] Tilføj spansk oversættelse til lektion 5`
224- `[Docs] Opdater opsætningsinstruktioner`
225 
226### Krævede kontroller
227 
228Før indsendelse af PR:
229 
2301. **Kodekvalitet**:
231   - Kør `npm run lint` i berørte projektmapper
232   - Ret alle linting fejl og advarsler
233 
2342. **Build verifikation**:
235   - Kør `npm run build` hvis relevant
236   - Sørg for ingen build fejl
237 
2383. **Link validering**:
239   - Test alle markdown-links
240   - Bekræft billedreferencer fungerer
241 
2424. **Indholdsrevision**:
243   - Læs korrektur for stave- og grammatikfejl
244   - Sørg for kodeeksempler er korrekte og pædagogiske
245   - Verificer at oversættelser bevarer original betydning
246 
247### Bidragskrav
248 
249- Accepter Microsoft CLA (automatisk ved første PR)
250- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
251- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer
252- Henvis til issues i PR-beskrivelsen hvis relevant
253 
254### Review proces
255 
256- PR’s gennemgås af vedligeholdere og community
257- Prioritér pædagogisk klarhed
258- Kodeeksempler skal følge gældende bedste praksis
259- Oversættelser vurderes for nøjagtighed og kulturel relevans
260 
261## Oversættelsessystem
262 
263### Automatisk oversættelse
264 
265- Bruger GitHub Actions med co-op-translator workflow
266- Oversætter til 50+ sprog automatisk
267- Kildefiler i hovedmapper
268- Oversatte filer i `translations/{language-code}/` mapper
269 
270### Tilføjelse af manuelle oversættelsesforbedringer
271 
2721. Find fil i `translations/{language-code}/`
2732. Foretag forbedringer mens strukturen bevares
2743. Sørg for kodeeksempler fortsat fungerer
2754. Test eventuelt lokaliseret quiz-indhold
276 
277### Oversættelsesmetadata
278 
279Oversatte filer inkluderer metadata-header:
280```markdown
281<!--
282CO_OP_TRANSLATOR_METADATA:
283{
284  "original_hash": "...",
285  "translation_date": "...",
286  "source_file": "...",
287  "language_code": "..."
288}
289-->
290```
291 
292## Fejlfinding og problemløsning
293 
294### Almindelige problemer
295 
296**Quiz app starter ikke**:
297- Tjek Node.js version (v14+ anbefales)
298- Slet `node_modules` og `package-lock.json`, kør `npm install` igen
299- Tjek for port-konflikter (standard: Vite bruger port 5173)
300 
301**API server starter ikke**:
302- Tjek at Node.js version er minimum (node >=10)
303- Se om port allerede er i brug
304- Sørg for alle afhængigheder installeret med `npm install`
305 
306**Browser extension indlæses ikke**:
307- Tjek at manifest.json er korrekt formatteret
308- Se efter fejl i browserens konsol
309- Følg browser-specifikke instruktioner til installation af extension
310 
311**Problemer med Python chat projekt**:
312- Sørg for OpenAI pakken er installeret: `pip install openai`
313- Tjek at miljøvariablen GITHUB_TOKEN er sat
314- Tjek adgangstilladelser til GitHub Models
315 
316**Docsify serverer ikke dokumentation**:
317- Installer docsify-cli globalt: `npm install -g docsify-cli`
318- Kør fra depotets rodfolder
319- Sørg for at `docs/_sidebar.md` findes
320 
321### Tips til udviklingsmiljø
322 
323- Brug VS Code med Live Server extension til HTML projekter
324- Installer ESLint og Prettier extensions for ensartet formatering
325- Brug browser DevTools til JavaScript-debugging
326- For Vue projekter, installer Vue DevTools browser extension
327 
328### Ydeevnehensyn
329 
330- Stort antal oversatte filer (50+ sprog) betyder store fulde kloner
331- Brug shallow clone hvis du kun arbejder med indhold: `git clone --depth 1`
332- Ekskluder oversættelser fra søgninger ved arbejde med engelsk indhold
333- Build-processer kan være langsomme ved første kørsel (npm install, Vite build)
334 
335## Sikkerhedshensyn
336 
337### Miljøvariabler
338 
339- API nøgler må aldrig committes til depotet
340- Brug `.env` filer (er allerede i `.gitignore`)
341- Dokumenter krævede miljøvariabler i projekternes README-filer
342 
343### Python projekter
344 
345- Brug virtuelle miljøer: `python -m venv venv`
346- Hold afhængigheder opdaterede
347- GitHub tokens skal have minimale nødvendige tilladelser
348 
349### GitHub Models adgang
350 
351- Personlige Access Tokens (PAT) kræves til GitHub Models
352- Tokens skal opbevares som miljøvariabler
353- Aldrig commit tokens eller legitimationsoplysninger
354 
355## Yderligere noter
356 
357### Målgruppe
358 
359- Komplette begyndere i webudvikling
360- Studerende og selvstuderende
361- Lærere der bruger forløbet i klasserum
362- Indholdet er designet til tilgængelighed og gradvis kompetenceopbygning
363 
364### Uddannelsesfilosofi
365 
366- Projektbaseret læringstilgang
367- Hyppige videnschecks (quizzer)
368- Praktiske kodningsøvelser
369- Eksempler på virkelige anvendelser
370- Fokus på fundament før frameworks
371 
372### Depotvedligeholdelse
373 
374- Aktivt fællesskab af lærende og bidragsydere
375- Regelmæssige opdateringer af afhængigheder og indhold
376- Issues og diskussioner overvåges af vedligeholdere
377- Oversættelsesopdateringer automatiseres via GitHub Actions
378 
379### Relaterede ressourcer
380 
381- [Microsoft Learn moduler](https://docs.microsoft.com/learn/)
382- [Student Hub ressourcer](https://docs.microsoft.com/learn/student-hub/)
383- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalet til lærende
384- Yderligere kurser: Generativ AI, Data Science, ML, IoT forløb tilgængelige
385 
386### Arbejde med specifikke projekter
387 
388For detaljerede instruktioner om individuelle projekter, se README-filerne i:
389- `quiz-app/README.md` - Vue 3 quiz applikation
390- `7-bank-project/README.md` - Banking applikation med autentificering
391- `5-browser-extension/README.md` - Udvikling af browser extension
392- `6-space-game/README.md` - Canvas-baseret spiludvikling
393- `9-chat-project/README.md` - AI chat assistent projekt
394 
395### Monorepo struktur
396 
397Selvom det ikke er et traditionelt monorepo, indeholder dette depot flere uafhængige projekter:
398- Hver lektion er selvstændig
399- Projekter deler ikke afhængigheder
400- Arbejd på individuelle projekter uden at påvirke andre
401- Klon hele depotet for hele kursusoplevelsen
402 
403---
404 
405<!-- CO-OP TRANSLATOR DISCLAIMER START -->
406**Ansvarsfraskrivelse**:  
407Dette 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.
408<!-- CO-OP TRANSLATOR DISCLAIMER END -->