AGENTS.md

1# AGENTS.md
2 
3## Prosjektoversikt
4 
5Dette er et utdanningspensum-repositorium for å lære grunnleggende webutvikling til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML.
6 
7### Nøkkelkomponenter
8 
9- **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler  
10- **Praktiske Prosjekter**: Terrarium, Typingspill, Nettleserutvidelse, Romspill, Bankapp, Kodeditor og AI Chat-assistent  
11- **Interaktive Quizzer**: 48 quizzer med 3 spørsmål hver (før- og etter-leksjon vurderinger)  
12- **Flerspråklig Støtte**: Automatiske oversettelser til 50+ språk via GitHub Actions  
13- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI-prosjekter)  
14 
15### Arkitektur
16 
17- Utdanningsrepo med leksjonsbasert struktur  
18- Hver leksjonsmappe inneholder README, kodeeksempler og løsninger  
19- Selvstendige prosjekter i separate kataloger (quiz-app, ulike leksjonsprosjekter)  
20- Oversettelsessystem med GitHub Actions (co-op-translator)  
21- Dokumentasjon levert via Docsify og tilgjengelig som PDF  
22 
23## Oppsettkommandoer
24 
25Dette repositoriet er hovedsakelig for konsum av utdanningsinnhold. For arbeid med spesifikke prosjekter:
26 
27### Hovedrepo-setup
28 
29```bash
30git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
31cd Web-Dev-For-Beginners
32```
33 
34### Quiz App Setup (Vue 3 + Vite)
35 
36```bash
37cd quiz-app
38npm install
39npm run dev        # Start utviklingsserver
40npm run build      # Bygg for produksjon
41npm run lint       # Kjør ESLint
42```
43 
44### Bank Prosjekt API (Node.js + Express)
45 
46```bash
47cd 7-bank-project/api
48npm install
49npm start          # Start API-server
50npm run lint       # Kjør ESLint
51npm run format     # Formater med Prettier
52```
53 
54### Nettleserutvidelsesprosjekter
55 
56```bash
57cd 5-browser-extension/solution
58npm install
59# Følg nettleserspesifikke instruksjoner for lasting av utvidelser
60```
61 
62### Romspillprosjekter
63 
64```bash
65cd 6-space-game/solution
66npm install
67# Åpne index.html i nettleser eller bruk Live Server
68```
69 
70### Chatprosjekt (Python Backend)
71 
72```bash
73cd 9-chat-project/solution/backend/python
74pip install openai
75# Sett GITHUB_TOKEN-miljøvariabelen
76python api.py
77```
78 
79## Utviklingsarbeidsflyt
80 
81### For Innholdsbidragsytere
82 
831. **Fork repositoriet** til din GitHub-konto  
842. **Klon din fork** lokalt  
853. **Opprett en ny gren** for dine endringer  
864. Gjør endringer i leksjonsinnhold eller kodeeksempler  
875. Test eventuelle kodeendringer i relevante prosjektmapper  
886. Send inn pull requests i samsvar med bidragsretningslinjer  
89 
90### For Lærende
91 
921. Fork eller klon repositoriet  
932. Naviger gjennom leksjonskatalogene sekvensielt  
943. Les README-filer for hver leksjon  
954. Fullfør før-leksjonsquizzer på https://ff-quizzes.netlify.app/web/  
965. Arbeid gjennom kodeeksempler i leksjonsmapper  
976. Fullfør oppgaver og utfordringer  
987. Ta etter-leksjonsquizzer  
99 
100### Live utvikling
101 
102- **Dokumentasjon**: Kjør `docsify serve` i rotkatalog (port 3000)  
103- **Quiz App**: Kjør `npm run dev` i quiz-app katalogen  
104- **Prosjekter**: Bruk VS Code Live Server extension for HTML-prosjekter  
105- **API Prosjekter**: Kjør `npm start` i respektive API-kataloger  
106 
107## Testinstruksjoner
108 
109### Quiz App Testing
110 
111```bash
112cd quiz-app
113npm run lint       # Sjekk for problemer med kodestil
114npm run build      # Verifiser at byggingen lykkes
115```
116 
117### Bank API Testing
118 
119```bash
120cd 7-bank-project/api
121npm run lint       # Sjekk for problemer med kodestil
122node server.js     # Bekreft at serveren starter uten feil
123```
124 
125### Generell Testtilnærming
126 
127- Dette er et utdanningsrepo uten omfattende automatiske tester  
128- Manuell testing fokuserer på:  
129  - Kodeeksempler kjører uten feil  
130  - Lenker i dokumentasjon fungerer korrekt  
131  - Prosjektbygg fullføres suksessfullt  
132  - Eksempler følger beste praksis  
133 
134### Forhåndssjekker før innsending
135 
136- Kjør `npm run lint` i kataloger med package.json  
137- Verifiser at markdown-lenker er gyldige  
138- Test kodeeksempler i nettleser eller Node.js  
139- Sjekk at oversettelser beholder riktig struktur  
140 
141## Kode-stilretningslinjer
142 
143### JavaScript
144 
145- Bruk moderne ES6+ syntaks  
146- Følg standard ESLint-konfigurasjoner gitt i prosjektene  
147- Bruk meningsfulle variabel- og funksjonsnavn for pedagogisk klarhet  
148- Legg til kommentarer som forklarer konsepter for lærende  
149- Formater med Prettier der konfigurert  
150 
151### HTML/CSS
152 
153- Semantiske HTML5-elementer  
154- Responsive designprinsipper  
155- Klare klasse-navnekonvensjoner  
156- Kommentarer som forklarer CSS-teknikker for lærende  
157 
158### Python
159 
160- PEP 8 stilretningslinjer  
161- Klare, pedagogiske kodeeksempler  
162- Typehint der nyttig for læring  
163 
164### Markdown Dokumentasjon
165 
166- Klar overskriftsstruktur  
167- Kodeblokker med språkspesifikasjon  
168- Lenker til tilleggsmateriale  
169- Skjermbilder og bilder i `images/` kataloger  
170- Alt-tekst for bilder for tilgjengelighet  
171 
172### Filorganisering
173 
174- Leksjoner nummerert sekvensielt (1-getting-started-lessons, 2-js-basics, osv.)  
175- Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/` kataloger  
176- Bilder lagres i leksjonsspesifikke `images/` mapper  
177- Oversettelser i `translations/{language-code}/` struktur  
178 
179## Bygging og Distribusjon
180 
181### Quiz App distribusjon (Azure Static Web Apps)
182 
183quiz-app er konfigurert for Azure Static Web Apps-distribusjon:
184 
185```bash
186cd quiz-app
187npm run build      # Oppretter dist/-mappen
188# Distribuerer via GitHub Actions-arbeidsflyt ved push til main
189```
190 
191Azure Static Web Apps-konfigurasjon:  
192- **App-lokasjon**: `/quiz-app`  
193- **Output-lokasjon**: `dist`  
194- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`  
195 
196### Dokumentasjons PDF-generering
197 
198```bash
199npm install                    # Installer docsify-to-pdf
200npm run convert               # Generer PDF fra docs
201```
202 
203### Docsify Dokumentasjon
204 
205```bash
206npm install -g docsify-cli    # Installer Docsify globalt
207docsify serve                 # Server på localhost:3000
208```
209 
210### Prosjektspesifikke bygg
211 
212Hver prosjektmappe kan ha egen byggprosess:  
213- Vue-prosjekter: `npm run build` lager produksjonspakker  
214- Statisk prosjekter: Ingen byggesteg, tjen filer direkte  
215 
216## Retningslinjer for Pull Requests
217 
218### Tittelformat
219 
220Bruk klare, beskrivende titler som angir endringsområdet:  
221- `[Quiz-app] Legg til ny quiz for leksjon X`  
222- `[Lesson-3] Rett skrivefeil i terrarium-prosjektet`  
223- `[Translation] Legg til spansk oversettelse for leksjon 5`  
224- `[Docs] Oppdater oppsettinstruksjoner`  
225 
226### Påkrevde Sjekker
227 
228Før innsending av PR:  
229 
2301. **Kodekvalitet**:  
231   - Kjør `npm run lint` i berørte prosjektmapper  
232   - Rett alle lintfeil og advarsler  
233 
2342. **Byggverifisering**:  
235   - Kjør `npm run build` om aktuelt  
236   - Sørg for ingen byggefeil  
237 
2383. **Lenkevalidering**:  
239   - Test alle markdown-lenker  
240   - Verifiser bildehenvisninger fungerer  
241 
2424. **Innholdsrevisjon**:  
243   - Korrekturles for rettskrivning og grammatikk  
244   - Sørg for at kodeeksempler er korrekte og pedagogiske  
245   - Kontroller at oversettelser beholder opprinnelig mening  
246 
247### Bidragskrav
248 
249- Aksepter Microsoft CLA (automatisk sjekk 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 detaljerte retningslinjer  
252- Referer til issues i PR-beskrivelse om aktuelt  
253 
254### Gjennomgangsprosess
255 
256- PR-er gjennomgås av vedlikeholdere og community  
257- Pedagogisk klarhet prioriteres  
258- Kodeeksempler skal følge gjeldende beste praksis  
259- Oversettelser vurderes for nøyaktighet og kulturell hensiktsmessighet  
260 
261## Oversettelsessystem
262 
263### Automatisk Oversettelse
264 
265- Bruker GitHub Actions med co-op-translator workflow  
266- Oversetter til 50+ språk automatisk  
267- Kildefiler i hovedkataloger  
268- Oversatte filer i `translations/{language-code}/` kataloger  
269 
270### Legge til Manuelle Oversettelsesforbedringer
271 
2721. Finn fil i `translations/{language-code}/`  
2732. Gjør forbedringer mens du bevarer struktur  
2743. Sørg for at kodeeksempler fortsatt fungerer  
2754. Test eventuelt lokalt quiz-innhold  
276 
277### Oversettelsesmetadata
278 
279Oversatte filer inkluderer metadataheader:  
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## Feilsøking og Problemløsning
293 
294### Vanlige Problemer
295 
296**Quiz-app starter ikke**:  
297- Sjekk Node.js-versjon (v14+ anbefalt)  
298- Slett `node_modules` og `package-lock.json`, kjør `npm install` på nytt  
299- Sjekk for portkonflikter (standard: Vite bruker port 5173)  
300 
301**API-server starter ikke**:  
302- Bekreft Node.js-versjon møter minimumskrav (node >=10)  
303- Sjekk om port allerede er i bruk  
304- Sørg for at alle avhengigheter er installert med `npm install`  
305 
306**Nettleserutvidelse lastes ikke**:  
307- Verifiser at manifest.json er riktig formatert  
308- Sjekk nettleserkonsollen for feil  
309- Følg nettleserspesifikke installasjonsinstrukser for utvidelser  
310 
311**Python chat-prosjekt problemer**:  
312- Sørg for at OpenAI-pakken er installert: `pip install openai`  
313- Bekreft at GITHUB_TOKEN miljøvariabel er satt  
314- Sjekk GitHub Models adgangstillatelser  
315 
316**Docsify server ikke dokumentasjon**:  
317- Installer docsify-cli globalt: `npm install -g docsify-cli`  
318- Kjør fra repos rotkatalog  
319- Sjekk at `docs/_sidebar.md` eksisterer  
320 
321### Tips for Utviklingsmiljø
322 
323- Bruk VS Code med Live Server extension for HTML-prosjekter  
324- Installer ESLint og Prettier extensions for konsistent formatering  
325- Bruk nettleserens DevTools for JavaScript-feilsøking  
326- For Vue-prosjekter, installer Vue DevTools nettleser-utvidelse  
327 
328### Ytelsesbetraktninger
329 
330- Mange oversatte filer (50+ språk) gjør full kloning stor  
331- Bruk shallow clone hvis du kun jobber med innhold: `git clone --depth 1`  
332- Ekskluder oversettelser i søk når du jobber med engelsk innhold  
333- Byggeprosesser kan være treg ved første kjøring (npm install, Vite build)  
334 
335## Sikkerhetsbetraktninger
336 
337### Miljøvariabler
338 
339- API-nøkler må aldri legges i repositoriet  
340- Bruk `.env` filer (allerede i `.gitignore`)  
341- Dokumenter nødvendige miljøvariabler i prosjekt-READMEer  
342 
343### Python Prosjekter
344 
345- Bruk virtuelle miljøer: `python -m venv venv`  
346- Hold avhengigheter oppdatert  
347- GitHub-tokens bør ha minimale nødvendige rettigheter  
348 
349### GitHub Models-adgang
350 
351- Personlige tilgangstokener (PAT) kreves for GitHub Models  
352- Tokens skal lagres som miljøvariabler  
353- Aldri legg tokens eller credentials i repositoriet  
354 
355## Tilleggsnotater
356 
357### Målgruppe
358 
359- Helt komplette nybegynnere til webutvikling  
360- Studenter og selvstudenter  
361- Lærere som bruker pensum i klasserom  
362- Innhold designet for tilgjengelighet og gradvis ferdighetsbygging  
363 
364### Pedagogisk Filosofi
365 
366- Prosjektbasert læringsmetode  
367- Hyppige kunnskapssjekker (quizzer)  
368- Praktiske kodingøvelser  
369- Virkelighetsnære eksempler  
370- Fokus på grunnprinsipper før rammeverk  
371 
372### Repositorieveiledning
373 
374- Aktiv community av lærende og bidragsytere  
375- Regelmessige oppdateringer av avhengigheter og innhold  
376- Issues og diskusjoner overvåkes av vedlikeholdere  
377- Oversettelsesoppdateringer automatisert via GitHub Actions  
378 
379### Relaterte Ressurser
380 
381- [Microsoft Learn moduler](https://docs.microsoft.com/learn/)  
382- [Student Hub-ressurser](https://docs.microsoft.com/learn/student-hub/)  
383- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalt for lærende  
384- Flere kurs: Generative AI, Data Science, ML, IoT pensum tilgjengelig  
385 
386### Arbeid med Spesifikke Prosjekter
387 
388For detaljerte instrukser om enkeltprosjekter, se README-filene i:  
389- `quiz-app/README.md` - Vue 3 quiz-applikasjon  
390- `7-bank-project/README.md` - Bankapplikasjon med autentisering  
391- `5-browser-extension/README.md` - Nettleserutvidelsesutvikling  
392- `6-space-game/README.md` - Canvas-basert spillutvikling  
393- `9-chat-project/README.md` - AI chat-assistent prosjekt  
394 
395### Monorepo-struktur
396 
397Selv om det ikke er et tradisjonelt monorepo, inneholder dette repositoriet flere uavhengige prosjekter:  
398- Hver leksjon er selvstendig  
399- Prosjekter deler ikke avhengigheter  
400- Arbeid med individuelle prosjekter uten å påvirke andre  
401- Klon hele repo for full pensumopplevelse  
402 
403---
404 
405<!-- CO-OP TRANSLATOR DISCLAIMER START -->
406**Ansvarsfraskrivelse**:  
407Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på originalspråket skal anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som følge av bruken av denne oversettelsen.
408<!-- CO-OP TRANSLATOR DISCLAIMER END -->