Web-Dev-For-Beginners/translations/da/AGENTS.md

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

git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners

Quiz App opsætning (Vue 3 + Vite)

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)

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

cd 5-browser-extension/solution
npm install
# Følg browser-specifikke instruktioner til indlæsning af udvidelser

Space Game projekter

cd 6-space-game/solution
npm install
# Åbn index.html i browseren eller brug Live Server

Chat projekt (Python Backend)

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

cd quiz-app
npm run lint       # Tjek for kode stilproblemer
npm run build      # Bekræft at byggeriet lykkes

Bank API test

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:

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

npm install                    # Installer docsify-to-pdf
npm run convert               # Generer PDF fra docs

Docsify dokumentation

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
• Se 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:

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "...",
  "translation_date": "...",
  "source_file": "...",
  "language_code": "..."
}
-->

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
• Student Hub ressourcer
• 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. 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.