diff --git a/translations/da/.co-op-translator.json b/translations/da/.co-op-translator.json index 15f1dc205..dde1231a2 100644 --- a/translations/da/.co-op-translator.json +++ b/translations/da/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-07T00:03:59+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T18:16:38+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "da" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:25:00+00:00", + "translation_date": "2026-03-06T18:29:53+00:00", "source_file": "AGENTS.md", "language_code": "da" }, @@ -516,8 +516,8 @@ "language_code": "da" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:20:19+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T18:12:27+00:00", "source_file": "README.md", "language_code": "da" }, diff --git a/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 7037f29a2..b6d64bfe2 100644 --- a/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,12 +1,12 @@ # Introduktion til programmeringssprog og moderne udviklerværktøjer -Hej der, kommende udvikler! 👋 Må jeg fortælle dig noget, der stadig giver mig kuldegysninger hver eneste dag? Du er ved at opdage, at programmering ikke bare handler om computere – det handler om at have ægte superkræfter til at bringe dine vildeste idéer til live! +Hej der, fremtidige udvikler! 👋 Må jeg fortælle dig noget, der stadig giver mig kuldegysninger hver eneste dag? Du er ved at opdage, at programmering ikke kun handler om computere – det handler om at have egentlige superkræfter til at bringe dine vildeste idéer til live! -Du kender det øjeblik, hvor du bruger din yndlingsapp, og alt bare fungerer perfekt? Når du trykker på en knap, og noget helt magisk sker, som får dig til at sige "wow, hvordan gjorde de DET?" Nå, nogen ligesom dig – sandsynligvis siddende i deres yndlingskaffebar kl. 2 om natten med deres tredje espresso – skrev koden, der skabte den magi. Og her er det, der vil blæse dig væk: ved slutningen af denne lektion vil du ikke kun forstå, hvordan de gjorde det, men du vil også være ivrig efter at prøve det selv! +Du kender det øjeblik, hvor du bruger din yndlingsapp, og alt bare klikker perfekt? Når du trykker på en knap, og der sker noget helt magisk, som får dig til at sige "wow, hvordan gjorde de DET?" Nå, så er det en person ligesom dig – sandsynligvis sidder de i deres yndlingscafé kl. 2 om natten med deres tredje espresso – som skrev koden, der skabte den magi. Og her kommer noget, der vil blæse dig omkuld: når vi er færdige med denne lektion, vil du ikke kun forstå, hvordan de gjorde det, men du vil være helt ivrig efter selv at prøve! -Se, jeg forstår fuldt ud, hvis programmering føles skræmmende lige nu. Da jeg begyndte, troede jeg ærligt talt, at du skulle være en slags matematisk geni eller have kodet siden du var fem år gammel. Men her er det, der fuldstændig ændrede min opfattelse: programmering er præcis som at lære at føre samtaler på et nyt sprog. Du starter med "hej" og "tak," så øver du dig i at bestille kaffe, og før du ved af det, har du dybe filosofiske diskussioner! Bortset fra at i dette tilfælde fører du samtaler med computere, og ærligt talt? De er de mest tålmodige samtalepartnere, du nogensinde vil møde – de dømmer aldrig dine fejl og er altid begejstrede for at prøve igen! +Se, jeg forstår det godt, hvis programmering føles intimiderende lige nu. Da jeg begyndte, troede jeg ærligt talt, at man skulle være en slags matematisk geni eller have kodet siden, man var fem år gammel. Men her er det, der helt ændrede mit perspektiv: programmering er præcis som at lære at føre samtaler på et nyt sprog. Du starter med "hej" og "tak," så lærer du at bestille kaffe, og inden du ved af det, fører du dybe filosofiske samtaler! Bortset fra at i dette tilfælde fører du samtaler med computere, og helt seriøst? De er de mest tålmodige samtalepartnere, du nogensinde vil møde – de dømmer aldrig dine fejl og er altid begejstrede for at prøve igen! -I dag skal vi udforske de utrolige værktøjer, der gør moderne webudvikling ikke bare mulig, men også seriøst vanedannende. Jeg taler om de nøjagtige redaktører, browsere og arbejdsprocesser, som udviklere hos Netflix, Spotify og dit yndlings indie app-studie bruger hver eneste dag. Og her er den del, der vil få dig til at lave en glad dans: de fleste af disse professionelle, branchestandard-værktøjer er helt gratis! +I dag skal vi udforske de utrolige værktøjer, der gør moderne webudvikling ikke bare muligt, men decideret vanedannende. Jeg taler om præcis de samme editorer, browsere og arbejdsgange, som udviklere hos Netflix, Spotify og dit yndlings indie app-studie bruger hver eneste dag. Og her kommer den del, der får dig til at danse af glæde: de fleste af disse professionelle, branchestandard værktøjer er fuldstændig gratis! ![Intro Programming](../../../../translated_images/da/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac) @@ -24,61 +24,61 @@ journey Kommandolinje: 3: You section Øv Sprogdetektiv: 4: You - Værktøjseksploration: 5: You + Værktøjsekspedition: 5: You Fællesskabsforbindelse: 5: You ``` ## Lad os se, hvad du allerede ved! -Inden vi hopper til det sjove, er jeg nysgerrig – hvad ved du allerede om denne programmeringsverden? Og hør, hvis du kigger på disse spørgsmål og tænker "jeg har bogstaveligt talt nul idé om noget af dette," så er det ikke bare okay, det er perfekt! Det betyder, at du er lige præcis det rigtige sted. Tænk på denne quiz som opvarmning før træning – vi varmer bare hjernemusklerne op! +Før vi springer ud i det sjove, er jeg nysgerrig – hvad ved du allerede om denne programmeringsverden? Og hør, hvis du kigger på disse spørgsmål og tænker "jeg har bogstaveligt talt nul idé om noget som helst af det her," så er det ikke bare i orden, det er perfekt! Det betyder, at du er helt det rigtige sted. Tænk på denne quiz som opvarmning før træning – vi varmer bare hjerne musklerne op! -[Tag pre-lektion quizzen](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Tag pre-lesson quizzen](https://ff-quizzes.netlify.app/web/) -## Eventyret vi skal tage på sammen +## Eventyret, vi snart skal på sammen -Okay, jeg er ægte begejstret og hopper næsten af sted for at udforske det, vi skal i dag! Seriøst, jeg ville ønske, jeg kunne se dit ansigt, når nogle af disse koncepter går op for dig. Her er den utrolige rejse, vi tager sammen: +Okay, jeg er virkelig begejstret for, hvad vi skal udforske i dag! Seriøst, jeg ville ønske, jeg kunne se dit ansigt, når nogle af disse koncepter klikker for dig. Her er den utrolige rejse, vi tager sammen: -- **Hvad programmering egentlig er (og hvorfor det er det fedeste i verden!)** – Vi skal opdage, hvordan kode bogstaveligt talt er den usynlige magi, der driver alt omkring dig, fra den alarm, der på en eller anden måde ved, det er mandag morgen, til algoritmen, der perfekt kuraterer dine Netflix-anbefalinger -- **Programmeringssprog og deres fantastiske personligheder** – Forestil dig at komme til en fest, hvor hver person har helt forskellige superkræfter og måder at løse problemer på. Sådan er verden af programmeringssprog, og du vil elske at møde dem! -- **De grundlæggende byggesten, der får digital magi til at ske** – Tænk på disse som det ultimative kreative LEGO-sæt. Når du forstår, hvordan disse stykker passer sammen, vil du indse, at du bogstaveligt talt kan bygge alt, hvad din fantasi drømmer om -- **Professionelle værktøjer, der får dig til at føle, at du lige har fået udleveret en troldmandsstav** – Jeg overdriver ikke her – disse værktøjer får dig virkelig til at føle, at du har superkræfter, og det bedste? Det er de samme, som professionelle bruger! +- **Hvad programmering egentlig er (og hvorfor det er det fedeste overhovedet!)** – Vi skal opdage, hvordan kode bogstaveligt talt er den usynlige magi, der driver alt omkring dig, fra det vækkeur, der på en eller anden måde ved, det er mandag morgen, til algoritmen, der perfekt kuraterer dine Netflix-anbefalinger +- **Programmeringssprog og deres fantastiske personligheder** – Forestil dig at gå til en fest, hvor hver person har helt forskellige superkræfter og måder at løse problemer på. Sådan er programmeringssprogenes verden, og du kommer til at elske at møde dem! +- **De grundlæggende byggesten, der skaber digital magi** – Tænk på disse som det ultimative kreative LEGO sæt. Når du forstår, hvordan disse brikker passer sammen, vil du indse, at du bogstaveligt talt kan bygge alt, hvad din fantasi drømmer om +- **Professionelle værktøjer, der får dig til at føle, at du lige har fået en troldmandsstav** – Jeg overdriver ikke – disse værktøjer vil virkelig få dig til at føle, at du har superkræfter, og det bedste? Det er de samme, som profferne bruger! -> 💡 **Det her er sagen**: Tænk ikke engang på at prøve at huske alting i dag! Lige nu vil jeg bare have, at du mærker gnisten af begejstring over, hvad der er muligt. Detaljerne vil fastholde sig naturligt, når vi øver sammen – det er sådan, rigtig læring sker! +> 💡 **Her er sagen**: Tænk ikke engang på at forsøge at huske alt i dag! Lige nu vil jeg bare have, at du mærker den gnist af begejstring for, hvad der er muligt. Detaljerne sidder naturligt fast, mens vi øver sammen – sådan sker rigtig læring! -> Du kan tage denne lektion på [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Du kan tage denne lektion på [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Så hvad *er* programmering egentlig? +## Hvad er programmering egentlig? -Okay, lad os tage fat på million-dollar spørgsmålet: hvad er programmering egentlig? +Okay, lad os tage milliondollarsspørgsmålet: hvad er programmering egentlig? -Jeg vil give dig en historie, der fuldstændig ændrede min måde at tænke på det her. I sidste uge prøvede jeg at forklare min mor, hvordan hun bruger vores nye smart TV-fjernbetjening. Jeg fangede mig selv i at sige ting som "Tryk på den røde knap, men ikke den store røde knap, den lille røde knap til venstre... nej, din anden venstre... okay, nu hold den i to sekunder, ikke et, ikke tre..." Lyder det bekendt? 😅 +Jeg vil fortælle dig en historie, der helt ændrede, hvordan jeg ser det. I sidste uge prøvede jeg at forklare min mor, hvordan hun bruger vores nye smart TV-fjernbetjening. Jeg fangede mig selv i at sige ting som "Tryk på den røde knap, men ikke den store røde knap, den lille røde knap til venstre... nej, din anden venstre... okay, hold den nu i to sekunder, ikke et, ikke tre..." Lyder det bekendt? 😅 -Det er programmering! Det er kunsten at give utroligt detaljerede, trin-for-trin instruktioner til noget, der er meget kraftfuldt, men som har brug for, at alt bliver stavet ud helt præcist. Bortset fra at i stedet for at forklare det til din mor (som kan spørge "hvilken rød knap?!"), forklarer du det til en computer (som bare gør præcis, hvad du siger, selvom det, du sagde, ikke helt var det, du mente). +Det er programmering! Det er kunsten at give utrolig detaljerede, trin-for-trin instruktioner til noget, der er meget kraftfuldt, men som skal have alt stavet helt præcist ud. Bortset fra at i stedet for at forklare det til din mor (som kan spørge "hvilken rød knap?!"), forklarer du det til en computer (der bare gør præcis, hvad du siger, selvom det, du sagde, ikke helt er det, du mente). -Her er det, der blæste mit sind, da jeg først lærte det: computere er faktisk ret simple i deres kerne. De forstår faktisk kun to ting – 1 og 0, hvilket grundlæggende bare er "ja" og "nej" eller "til" og "fra." Det er det! Men her bliver det magisk – vi behøver ikke tale i 1'ere og 0'ere, som om vi var i The Matrix. Det er her, **programmeringssprog** kommer til undsætning. De er som verdens bedste oversætter, der tager dine helt almindelige mennesketanker og omsætter dem til computersprog. +Her er, hvad der blæste mig omkuld, da jeg lærte det første gang: computere er faktisk ret simple i deres kerne. De forstår bogstaveligt talt kun to ting – 1 og 0, som grundlæggende bare betyder "ja" og "nej" eller "til" og "fra." Det er det! Men her bliver det magisk – vi behøver ikke at tale i 1'ere og 0'ere som i The Matrix. Det er her, **programmeringssprogene** kommer ind som superhelte. De er som den bedste oversætter i verden, der tager dine helt normale mennesketanker og omsætter dem til computersprog. -Og her er det, der stadig giver mig ægte kuldegysninger hver morgen, når jeg vågner: bogstaveligt talt *alt* digitalt i dit liv startede med nogen ligesom dig, sandsynligvis siddende i deres pyjamas med en kop kaffe, der skrev kode på deres bærbare. Det Instagram-filter, der får dig til at se fejlfri ud? Nogen kodede det. Anbefalingen, der førte dig til din nye yndlingssang? En udvikler byggede den algoritme. Appen, der hjælper dig med at dele middagsregningen med venner? Jep, nogen tænkte "det her er irriterende, det kan jeg fixe" og så... gjorde de det! +Og her er noget, der stadig giver mig virkelige kuldegysninger hver morgen, når jeg vågner: bogstaveligt talt *alt* digitalt i dit liv startede med en person ligesom dig, sikkert siddende i pyjamas med en kop kaffe til at skrive kode på deres laptop. Den Instagram-filter, der får dig til at se fejlfri ud? Nogen skrev den kode. Anbefalingen, der førte dig til din nye yndlingssang? En udvikler byggede den algoritme. Appen, der hjælper dig med at dele regninger til middag med venner? Yep, nogen tænkte "det her er irriterende, det kan jeg fixe" – og så gjorde de det! -Når du lærer at programmere, tager du ikke bare en ny færdighed til dig – du bliver en del af dette utrolige fællesskab af problemløsere, der tilbringer deres dage med at tænke, "Hvad nu hvis jeg kunne bygge noget, der gør nogens dag bare en smule bedre?" Ærligt talt, er der noget sejere end det? +Når du lærer at programmere, så lærer du ikke bare en ny færdighed – du bliver en del af et utrolig fællesskab af problemløsere, der bruger deres dage på at tænke: "Hvad nu hvis jeg kunne bygge noget, der gør nogens dag bare en lille smule bedre?" Ærligt talt, er der noget sejere end det? -✅ **Sjov fakta-jagt**: Her er noget super sejt at slå op, når du har et ledigt øjeblik – hvem tror du var verdens første computerprogrammør? Jeg giver dig et hint: Det er måske ikke den, du forventer! Historien om denne person er virkelig fascinerende og viser, at programmering altid har handlet om kreativ problemløsning og at tænke uden for boksen. +✅ **Sjov fakta-jagt**: Her er noget super sejt at slå op, når du har et øjeblik til overs – hvem tror du var verdens første computerprogrammør? Jeg giver dig et hint: det er måske ikke den, du forventer! Historien bag denne person er absolut fascinerende og viser, at programmering altid har handlet om kreativ problemløsning og at tænke ud af boksen. -### 🧠 **Check-in tid: Hvordan har du det?** +### 🧠 **Tjek-ind tid: Hvordan har du det?** **Tag et øjeblik til at reflektere:** - Giver idéen om "at give instruktioner til computere" mening for dig nu? - Kan du tænke på en daglig opgave, du gerne vil automatisere med programmering? -- Hvilke spørgsmål dukker op i dit hoved om det her med programmering? +- Hvilke spørgsmål bobler op i dit hoved om det her programmeringshalløj? -> **Husk**: Det er helt normalt, hvis nogle koncepter føles uklare lige nu. At lære programmering er som at lære et nyt sprog – det tager tid for din hjerne at bygge de neurale stier. Du gør det rigtig godt! +> **Husk**: Det er helt normalt, hvis nogle koncepter føles lidt uklare lige nu. At lære programmering er som at lære et nyt sprog – det tager tid for din hjerne at bygge de neurale forbindelser. Du gør det rigtig godt! ## Programmeringssprog er som forskellige slags magi -Okay, det her kommer til at lyde mærkeligt, men hæng på mig – programmeringssprog er meget lig forskellige slags musik. Tænk på det: Du har jazz, som er blød og improvisatorisk, rock, der er kraftfuld og ligetil, klassisk, der er elegant og struktureret, og hip-hop, der er kreativ og udtryksfuld. Hver stil har sin egen stemning, sit eget fællesskab af passionerede fans, og hver enkelt er perfekt til forskellige stemninger og lejligheder. +Okay, det her kommer måske til at lyde mærkeligt, men hæng på mig – programmeringssprog er meget lig forskellige slags musik. Tænk på det: du har jazz, som er smooth og improviserende, rock der er kraftfuld og ligetil, klassisk der er elegant og struktureret, og hip-hop der er kreativ og udtryksfuld. Hver stil har sin egen stemning, sit eget passionerede fællesskab, og hver er perfekt til forskellige stemninger og lejligheder. -Programmeringssprog fungerer på præcis samme måde! Du ville ikke bruge det samme sprog til at bygge et sjovt mobilspil, som du ville bruge til at bearbejde enorme mængder klimadata – ligesom du ikke ville spille death metal til en yogatime (nå, de fleste yogatimer i hvert fald! 😄). +Programmeringssprog fungerer helt på samme måde! Du ville ikke bruge det samme sprog til at bygge et sjovt mobilspil, som du bruger til at bearbejde massive mængder klimadata, ligesom du ikke ville spille death metal til en yogatime (nå, de fleste yogatimer i hvert fald! 😄). -Men her er det, der altid blæser mig væk, hver gang jeg tænker på det: disse sprog er som at have den mest tålmodige, geniale tolk i verden siddende lige ved siden af dig. Du kan udtrykke dine idéer på en måde, der føles naturlig for din menneskehjerne, og de håndterer alt det utroligt komplekse arbejde med at oversætte det til 1'erne og 0'erne, som computere rent faktisk taler. Det er som at have en ven, der er fuldstændig flydende i både "menneskelig kreativitet" og "computerlogik" – og de bliver aldrig trætte, har aldrig kaffepauser og dømmer dig aldrig for at stille det samme spørgsmål to gange! +Men her er det, der absolut blæser mig omkuld hver gang jeg tænker på det: disse sprog er som at have den mest tålmodige, brillante tolk i verden siddende lige ved siden af dig. Du kan udtrykke dine idéer på en måde, der føles naturlig for din menneskehjerne, og de håndterer alt det utroligt komplekse arbejde med at oversætte det til de 1'ere og 0'ere, som computere rent faktisk taler. Det er som at have en ven, der er perfekt flydende i både "menneskelig kreativitet" og "computerlogik" – og som aldrig bliver træt, aldrig har kaffepauser og aldrig dømmer dig for at stille det samme spørgsmål to gange! ### Populære programmeringssprog og deres anvendelser @@ -88,10 +88,10 @@ mindmap Webudvikling JavaScript Frontend Magi - Interaktive Websites + Interaktive Hjemmesider TypeScript JavaScript + Typer - Virksomhedsapps + Enterprise Apps Data & AI Python Data Science @@ -103,7 +103,7 @@ mindmap Mobilapps Java Android - Virksomhed + Enterprise Swift iOS Apple Økosystem @@ -113,66 +113,66 @@ mindmap Systemer & Ydeevne C++ Spil - Ydeevne Kritisk + Ydeevnekritisk Rust Hukommelsessikkerhed Systemprogrammering Go - Cloudtjenester + Cloud-tjenester Skalerbar Backend ``` | Sprog | Bedst til | Hvorfor det er populært | |----------|----------|------------------| -| **JavaScript** | Webudvikling, brugergrænseflader | Kører i browsere og driver interaktive websites | -| **Python** | Data science, automation, AI | Let at læse og lære, kraftfulde biblioteker | -| **Java** | Enterprise-applikationer, Android-apps | Platformuafhængigt, robust til store systemer | +| **JavaScript** | Webudvikling, brugerinterfaces | Kører i browsere og driver interaktive websites | +| **Python** | Data science, automatisering, AI | Let at læse og lære, kraftfulde biblioteker | +| **Java** | Virksomhedsapplikationer, Android apps | Platform-uafhængigt, robust til store systemer | | **C#** | Windows-applikationer, spiludvikling | Stærk Microsoft-økosystemstøtte | -| **Go** | Cloud-services, backend-systemer | Hurtigt, enkelt, designet til moderne computing | +| **Go** | Cloud-tjenester, backend-systemer | Hurtigt, simpelt, designet til moderne computing | -### High-Level vs. Low-Level sprog +### Høj-niveau vs. Lav-niveau sprog -Okay, det her var ærligt talt det koncept, der knækkede min hjerne, da jeg først begyndte at lære, så jeg deler den analogi, der endelig fik det til at gå op for mig – og jeg håber virkelig, den hjælper dig også! +Okay, det her var ærligt talt det koncept, der brød min hjerne, da jeg først begyndte at lære, så jeg vil dele den analogi, der endelig fik det til at klikke for mig – og jeg håber virkelig, det hjælper dig også! -Forestil dig, at du besøger et land, hvor du ikke taler sproget, og du desperat har brug for at finde den nærmeste toilet (det har vi alle været ude for, ikke? 😅): +Forestil dig, at du besøger et land, hvor du ikke taler sproget, og du desperat skal finde det nærmeste toilet (det har vi alle prøvet, ikke? 😅): -- **Low-level programmering** er som at lære det lokale dialekt så godt, at du kan snakke med bedstemor, der sælger frugt på hjørnet, ved hjælp af kulturelle referencer, lokalt slang og interne jokes, som kun nogen, der voksede op der, ville forstå. Super imponerende og utroligt effektivt... hvis du tilfældigvis er flydende! Men ret overvældende, når du bare prøver at finde toilettet. +- **Lav-niveau programmering** er som at lære det lokale dialekt så godt, at du kan chatte med bedstemor, der sælger frugt på hjørnet, med kulturelle referencer, lokalt slang og interne jokes, som kun en, der er opvokset der, ville forstå. Super imponerende og utroligt effektivt ... hvis du tilfældigvis er flydende! Men ret overvældende, når du bare prøver at finde et toilet. -- **High-level programmering** er som at have den fantastiske lokale ven, der bare forstår dig. Du kan sige "Jeg har virkelig brug for at finde et toilet" på almindeligt engelsk, og de håndterer al den kulturelle oversættelse og giver dig vejledning på en måde, der giver perfekt mening for din ikke-lokale hjerne. +- **Høj-niveau programmering** er som at have den fantastiske lokale ven, der bare forstår dig. Du kan sige "jeg skal virkelig finde et toilet" på entydigt dansk (eller engelsk), og de håndterer hele den kulturelle oversættelse og giver dig anvisninger på en måde, der giver perfekt mening for din ikke-lokale hjerne. -I programmeringsterminologi: -- **Low-level sprog** (som Assembly eller C) lader dig føre utroligt detaljerede samtaler med computerens faktiske hardware, men du skal tænke som en maskine, hvilket... lad os bare sige, er et stort mentalt skift! -- **High-level sprog** (som JavaScript, Python eller C#) lader dig tænke som et menneske, mens de håndterer al maskinsproget bag kulisserne. Plus, de har utroligt imødekommende fællesskaber fulde af folk, der husker, hvordan det var at være ny, og som virkelig vil hjælpe! +I programmering betyder det: +- **Lav-niveau sprog** (som Assembly eller C) lader dig føre utrolig detaljerede samtaler med computerens egentlige hardware, men du skal tænke som en maskine, hvilket… godt, lad os bare sige, det er et stort mentalt skift! +- **Høj-niveau sprog** (som JavaScript, Python eller C#) lader dig tænke som et menneske, mens de håndterer alle maskinsprogets ting bag kulisserne. Plus har de disse utroligt imødekommende fællesskaber fulde af folk, der husker, hvordan det var at være ny og oprigtigt vil hjælpe! -Gæt hvilke jeg vil foreslå, du starter med? 😉 High-level sprog er som at have støttehjul, som du faktisk aldrig rigtig vil tage af, fordi de gør hele oplevelsen meget sjovere! +Gæt hvilke, jeg vil foreslå, du starter med? 😉 Høj-niveau sprog er som at have træningshjul på, som du aldrig rigtig vil tage af, fordi det gør hele oplevelsen så meget mere fornøjelig! ```mermaid flowchart TB - A["👤 Menneskelig Tanke:
'Jeg vil beregne Fibonacci tal'"] --> B{Vælg Sprog Niveau} + A["👤 Menneskelig tanke:
'Jeg vil beregne Fibonacci-tal'"] --> B{Vælg sprogniveau} - B -->|Højt Niveau| C["🌟 JavaScript/Python
Let at læse og skrive"] - B -->|Lavt Niveau| D["⚙️ Assembly/C
Direkte hardware kontrol"] + B -->|Højniveau| C["🌟 JavaScript/Python
Nem at læse og skrive"] + B -->|Lavniveau| D["⚙️ Assembly/C
Direkte hardwarekontrol"] C --> E["📝 Skriv: fibonacci(10)"] D --> F["📝 Skriv: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Forståelse:
Oversætter håndterer kompleksitet"] + E --> G["🤖 Computerforståelse:
Oversætter håndterer kompleksitet"] F --> G - G --> H["💻 Samme Resultat:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Samme resultat:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Lad mig vise dig, hvorfor High-Level sprog er meget mere brugervenlige +### Lad mig vise dig, hvorfor høj-niveau sprog er så meget mere venlige -Okay, jeg er ved at vise dig noget, der perfekt demonstrerer, hvorfor jeg forelskede mig i high-level sprog, men først – jeg har brug for, at du lover mig noget. Når du ser det første kodeeksempel, så lad være med at gå i panik! Det er meningen, det skal se skræmmende ud. Det er præcis det, jeg vil sige med det! +Okay, jeg er lige ved at vise dig noget, der perfekt demonstrerer, hvorfor jeg forelskede mig i høj-niveau sprog, men først – jeg har brug for, at du lover mig noget. Når du ser det første kodeeksempel, så få ikke panik! Det er meningen, det skal se lidt skræmmende ud. Det er netop pointen! -Vi kigger på den samme opgave skrevet i to helt forskellige stilarter. Begge skaber det, der kaldes Fibonacci-sekvensen – det er et smukt matematisk mønster, hvor hvert tal er summen af de to foregående: 0, 1, 1, 2, 3, 5, 8, 13... (Sjovt faktum: du finder dette mønster bogstaveligt talt overalt i naturen – solsikkefrøspiraler, kogler, endda hvordan galakser dannes!) +Vi skal kigge på den helt samme opgave skrevet i to helt forskellige stilarter. Begge skaber det, der kaldes Fibonacci-sekvensen – det er et smukt matematisk mønster, hvor hvert tal er summen af de to forrige: 0, 1, 1, 2, 3, 5, 8, 13... (Sjovt faktum: du finder dette mønster bogstaveligt talt overalt i naturen – solsikkekerner spiraler, kogler, selv hvordan galakser dannes!) Klar til at se forskellen? Lad os gå i gang! -**High-level sprog (JavaScript) – Menneskevenligt:** +**Høj-niveau sprog (JavaScript) – Menneskevenligt:** ```javascript // Trin 1: Grundlæggende Fibonacci opsætning @@ -183,11 +183,11 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Her er, hvad denne kode gør:** +**Det her gør koden:** - **Deklarerer** en konstant for at angive, hvor mange Fibonacci-tal vi vil generere -- **Initialiserer** to variabler for at holde styr på det nuværende og næste tal i sekvensen -- **Sætter op** startværdierne (0 og 1), der definerer Fibonacci-mønstret -- **Viser** en overskrift for at identificere vores output +- **Initialiserer** to variabler for at holde styr på de nuværende og næste tal i sekvensen +- **Sætter op** startværdierne (0 og 1), som definerer Fibonacci-mønstret +- **Viser** en overskrift til at identificere vores output ```javascript // Trin 2: Generer sekvensen med en løkke @@ -201,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**Her er, hvad der sker her:** +**Hvad der sker her:** - **Looper** gennem hver position i vores sekvens med en `for`-løkke -- **Viser** hvert tal med dets position ved hjælp af template literals -- **Beregner** det næste Fibonacci-tal ved at lægge det nuværende og næste sammen -- **Opdaterer** vores sporingsvariabler for at gå videre til næste iteration +- **Viser** hvert tal med dets position ved brug af en template literal-formattering +- **Beregner** det næste Fibonacci-tal ved at lægge nuværende og næste værdier sammen +- **Opdaterer** vores sporingsvariabler til at gå videre til næste iteration ```javascript // Trin 3: Moderne funktionel tilgang @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Her har vi:** -- **Oprettet** en genanvendelig funktion med moderne arrow-funktions-syntaks -- **Bygget** et array til at gemme hele sekvensen i stedet for at vise tal et efter et -- **Brugt** array-indeksering til at beregne hvert nyt tal fra tidligere værdier -- **Returneret** hele sekvensen for fleksibel brug i andre dele af programmet +**I ovenstående har vi:** +- **Oprettet** en genanvendelig funktion ved brug af moderne arrow function-syntaks +- **Bygget** et array til at gemme hele sekvensen i stedet for at vise talene ét ad gangen +- **Brugt** array-indeksering til at beregne hvert nyt tal ud fra tidligere værdier +- **Returneret** hele sekvensen for fleksibel brug i andre dele af vores program -**Low-level sprog (ARM Assembly) – Computer-venligt:** +**Lav-niveau sprog (ARM Assembly) – Computer-venligt:** ```assembly area ascen,code,readonly @@ -257,39 +257,39 @@ back add r0,r1 end ``` -Læg mærke til, hvordan JavaScript-versionen næsten læses som engelske instruktioner, mens Assembly-versionen bruger kryptiske kommandoer, der direkte styrer computerens processor. Begge løser den nøjagtige samme opgave, men høj-niveausproget er langt nemmere for mennesker at forstå, skrive og vedligeholde. +Læg mærke til, hvordan JavaScript-versionen nærmest læser som engelske instruktioner, mens Assembly-versionen bruger kryptiske kommandoer, der direkte styrer computerens processor. Begge udfører nøjagtigt samme opgave, men høj-niveau sproget er langt lettere for mennesker at forstå, skrive og vedligeholde. **Nøgleforskelle, du vil bemærke:** - **Læsbarhed**: JavaScript bruger beskrivende navne som `fibonacciCount`, mens Assembly bruger kryptiske labels som `r0`, `r1` -- **Kommentarer**: Høj-niveau sprog opfordrer til forklarende kommentarer, der gør koden selvforklarende +- **Kommentarer**: Højniveausprog opfordrer til forklarende kommentarer, som gør koden selvdokumenterende - **Struktur**: JavaScripts logiske flow matcher, hvordan mennesker tænker over problemer trin for trin - **Vedligeholdelse**: Opdatering af JavaScript-versionen til forskellige krav er ligetil og klart -✅ **Om Fibonacci-sekvensen**: Dette helt utroligt smukke talmønster (hvor hvert tal er summen af de to foregående: 0, 1, 1, 2, 3, 5, 8...) dukker op bogstaveligt talt *overalt* i naturen! Du finder det i solsikkespiraler, fyrrekoglemønstre, måden nautilusskaller krummer sig på, og endda i, hvordan trægrene vokser. Det er ret sindssygt, hvordan matematik og kode kan hjælpe os med at forstå og genskabe de mønstre, som naturen bruger til at skabe skønhed! +✅ **Om Fibonacci-sekvensen**: Dette absolut smukke talmønster (hvor hvert tal svarer til summen af de to foregående: 0, 1, 1, 2, 3, 5, 8...) optræder bogstaveligt talt *overalt* i naturen! Du finder det i solsikkespiraler, koglernes mønstre, hvordan nautilusskaller krummer, og endda i måden trægrene vokser på. Det er ret fantastiskt, hvordan matematik og kode kan hjælpe os med at forstå og genskabe de mønstre, som naturen bruger til at skabe skønhed! -## Byggestenene, der får magien til at ske +## Byggestenene, Der Får Magien Til At Ske -Okay, nu hvor du har set, hvordan programmeringssprog ser ud i praksis, lad os bryde de grundlæggende dele ned, som alle programmer nogensinde skrevet består af. Tænk på disse som essentielle ingredienser i din yndlingsopskrift – når du først forstår, hvad hver enkelt gør, vil du kunne læse og skrive kode i stort set ethvert sprog! +Okay, nu hvor du har set, hvordan programmeringssprog ser ud i aktion, lad os bryde de fundamentale dele ned, der udgør bogstaveligt talt ethvert program, der nogensinde er skrevet. Tænk på disse som de grundlæggende ingredienser i din yndlingsopskrift – når du forstår, hvad hvert element gør, vil du kunne læse og skrive kode i stort set ethvert sprog! -Det er lidt ligesom at lære grammatikken i programmering. Kan du huske fra skolen, da du lærte om substantiver, verber og hvordan man sætter sætninger sammen? Programmering har sin egen version af grammatik, og for at være ærlig, så er den meget mere logisk og tilgivende end engelsk grammatik nogensinde var! 😄 +Det er lidt ligesom at lære grammatik for programmering. Kan du huske i skolen, da du lærte om substantiver, verber og at sætte sætninger sammen? Programmering har sin egen version af grammatik, og ærligt talt er den langt mere logisk og tilgivende end engelsk grammatik nogensinde var! 😄 -### Udsagn: Trin-for-trin instruktioner +### Statements: Trin-for-trin instruktionerne -Lad os starte med **udsagn** – de er som individuelle sætninger i en samtale med din computer. Hvert udsagn fortæller computeren at gøre én bestemt ting, lidt ligesom at give vejledning: "Drej til venstre her," "Stop ved det røde lys," "Parkér der." +Lad os starte med **statements** – de er som individuelle sætninger i en samtale med din computer. Hvert statement fortæller computeren at gøre én bestemt ting, lidt ligesom at give anvisninger: "Drej til venstre her," "Stop ved det røde lys," "Parkingér på det sted." -Det, jeg elsker ved udsagn, er hvor læsbare de som regel er. Se på dette: +Det jeg elsker ved statements er, hvor læselige de normalt er. Se lige her: ```javascript -// Grundlæggende sætninger, der udfører enkeltstående handlinger +// Grundlæggende udsagn, der udfører enkeltstående handlinger const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Her er, hvad denne kode gør:** -- **Deklarerer** en konstant variabel til at gemme en brugers navn -- **Viser** en hilsen i konsoloutputtet +**Sådan fungerer denne kode:** +- **Deklarer** en konstant variabel til at gemme en brugers navn +- **Viser** en hilsen til konsoloutput - **Beregner** og gemmer resultatet af en matematisk operation ```javascript @@ -298,19 +298,19 @@ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Trin for trin, sådan sker det:** -- **Ændrer** websidens titel, der vises i browserfanen -- **Skifter** baggrundsfarven på hele sidekroppen +**Trin for trin, her sker følgende:** +- **Ændrer** websiden titlen, som vises i browserfanen +- **Ændrer** baggrundsfarven på hele sidelegemet -### Variable: Dit programs hukommelsessystem +### Variabler: Dit programs hukommelsessystem -Okay, **variable** er sandelig ét af mine absolut yndlingskoncepter at undervise i, fordi de er så meget som ting, du allerede bruger hver eneste dag! +Okay, **variabler** er ærligt talt et af mine absolut yndlingskoncepter at lære fra mig, fordi de er så meget som ting, du allerede bruger hver eneste dag! -Tænk et øjeblik på din telefons kontaktliste. Du kan ikke huske alles telefonnumre – i stedet gemmer du "Mor," "Bedste Ven," eller "Pizzestedet der leverer til kl. 2," og lader telefonen huske de faktiske numre. Variable fungerer på samme måde! De er som mærkede beholdere, hvor dit program kan gemme information og hente den senere ved hjælp af et navn, der faktisk giver mening. +Tænk på din telefons kontaktliste et øjeblik. Du husker ikke alles telefonnumre – i stedet gemmer du "Mor," "Bedste ven," eller "Pizzasted der leverer til kl. 2 om natten" og lader din telefon huske de faktiske numre. Variabler fungerer præcis på samme måde! De er som mærkede beholdere, hvor dit program kan gemme information og hente det senere ved hjælp af et navn, der rent faktisk giver mening. -Her er det virkelig seje: variable kan ændre sig, mens dit program kører (deraf navnet "variable" – kan du se, hvad de gjorde dér?). Ligesom du måske opdaterer pizzastedets kontakt, når du finder et endnu bedre sted, kan variable opdateres, mens dit program lærer ny information eller når situationer ændrer sig! +Her er det, der er virkelig sejt: variabler kan ændre sig, mens dit program kører (deraf navnet "variabel" – kan du se hvad de gjorde der?). Ligesom du måske opdaterer den pizzakontakt, når du finder et endnu bedre sted, kan variabler opdateres, efterhånden som dit program lærer ny information eller som situationer ændrer sig! -Lad mig vise dig, hvor utrolig simpelt det kan være: +Lad mig vise dig, hvor smukt simpelt det kan være: ```javascript // Trin 1: Oprettelse af grundlæggende variabler @@ -320,11 +320,11 @@ let temperature = 75; let isRaining = false; ``` -**Sådan forstår du disse koncepter:** -- **Gem** uforanderlige værdier i `const` variable (som sidens navn) -- **Brug** `let` til værdier, der kan ændre sig i løbet af programmet -- **Tildel** forskellige datatyper: tekststrenge, tal og booleske værdier (sand/falsk) -- **Vælg** beskrivende navne, der forklarer, hvad hver variabel indeholder +**Forståelse af disse koncepter:** +- **Gemmer** uforanderlige værdier i `const` variabler (som webstedets navn) +- **Bruger** `let` til værdier, der kan ændre sig gennem dit program +- **Tildeler** forskellige datatyper: strenge (tekst), tal og booleans (sand/falsk) +- **Vælger** beskrivende navne, som forklarer, hvad hver variabel indeholder ```javascript // Trin 2: Arbejde med objekter for at gruppere relaterede data @@ -335,50 +335,50 @@ const weatherData = { }; ``` -**I ovenstående har vi:** -- **Oprettet** et objekt til at gruppere relateret vejrinformation sammen -- **Organiseret** flere datadel under ét variabelnavn -- **Brugt** nøgle-værdi-par til klart at mærke hver datadel +**Ovenfor har vi:** +- **Oprettet** et objekt til at samle relaterede vejrdata sammen +- **Organiseret** flere data under ét variabelnavn +- **Brugt** nøgle-værdi-par for klart at mærke hver del af informationen ```javascript // Trin 3: Brug og opdatering af variabler console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Opdatering af ændrbare variabler +// Opdatering af ændringsbare variabler currentWeather = "cloudy"; temperature = 68; ``` **Lad os forstå hver del:** -- **Vis** information ved brug af template literals med `${}` syntaks -- **Adgang** til objektets egenskaber med dot-notation (`weatherData.windSpeed`) -- **Opdater** variable deklareret med `let` for at afspejle skiftende forhold -- **Kombinér** flere variable for at skabe meningsfulde beskeder +- **Viser** information ved hjælp af template literals med `${}` syntaks +- **Adgang** til objektets egenskaber via dot notation (`weatherData.windSpeed`) +- **Opdaterer** variabler deklareret med `let` for at afspejle skiftende forhold +- **Kombinerer** flere variabler for at skabe meningsfulde beskeder ```javascript -// Trin 4: Moderne destrukturering for renere kode +// Trin 4: Moderne destructuring for renere kode const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Det du skal vide:** -- **Udtræk** specifikke egenskaber fra objekter ved hjælp af destructuring assignment -- **Opret** nye variable automatisk med samme navne som objektets nøgler -- **Forenkle** kode ved at undgå gentagen dot-notation +**Det, du skal vide:** +- **Udtrækker** specifikke egenskaber fra objekter ved hjælp af destructuring assignment +- **Opretter** nye variabler automatisk med samme navne som objektets nøgler +- **Forenkler** kode ved at undgå gentagen dot notation -### Kontrolflow: Lær dit program at tænke +### Kontrolflow: Lærer dit program at tænke -Okay, her bliver programmering virkelig sindssyg! **Kontrolflow** er grundlæggende at lære dit program at træffe smarte beslutninger, præcis som du gør hver dag uden engang at tænke over det. +Okay, nu bliver programmering virkelig tankevækkende! **Kontrolflow** er i bund og grund at lære dit program, hvordan det kan tage smarte beslutninger, præcis som du gør hver eneste dag uden at tænke over det. -Forestil dig dette: i morges gik du sikkert igennem noget a la "Hvis det regner, tager jeg paraply med. Hvis det er koldt, tager jeg jakke på. Hvis jeg er forsinket, springer jeg morgenmad over og tager en kaffe på vejen." Din hjerne følger naturligt denne hvis-så-logik dusinvis af gange hver dag! +Forestil dig dette: i morges gik du sikkert igennem noget i stil med "Hvis det regner, tager jeg en paraply med. Hvis det er koldt, tager jeg en jakke på. Hvis jeg er forsinket, springer jeg morgenmaden over og tager kaffen på vejen." Din hjerne følger automatisk denne hvis-så logik dusinvis af gange hver dag! -Det er det, der får programmer til at føles intelligente og levende i stedet for bare at følge et kedeligt, forudsigeligt script. De kan faktisk se på en situation, vurdere hvad der sker og reagere passende. Det er som at give dit program en hjerne, der kan tilpasse sig og træffe valg! +Det er det, der får programmer til at føles intelligente og levende i stedet for bare at følge en kedelig, forudsigelig instruktion. De kan faktisk kigge på en situation, evaluere hvad der sker, og reagere passende. Det er som at give dit program en hjerne, der kan tilpasse sig og træffe valg! Vil du se, hvor smukt det fungerer? Lad mig vise dig: ```javascript -// Trin 1: Grundlæggende konditionel logik +// Trin 1: Grundlæggende betinget logik const userAge = 17; if (userAge >= 18) { @@ -389,11 +389,11 @@ if (userAge >= 18) { } ``` -**Her er, hvad denne kode gør:** +**Sådan fungerer denne kode:** - **Tjekker** om brugerens alder opfylder stemmeretskravet - **Udfører** forskellige kodeblokke baseret på betingelsens resultat -- **Beregner** og viser, hvor lang tid der er til stemmeret, hvis under 18 -- **Giver** specifik, nyttig feedback for hver situation +- **Beregner** og viser hvor længe der er til stemmeberettigelse, hvis under 18 +- **Giver** specifik, hjælpsom feedback for hver situation ```javascript // Trin 2: Flere betingelser med logiske operatorer @@ -409,11 +409,11 @@ if (userAge >= 18 && hasPermission) { } ``` -**Nedbrydning af, hvad der sker her:** -- **Kombinerer** flere betingelser ved hjælp af `&&` (og) operatoren -- **Opretter** et hierarki af betingelser med `else if` til flere scenarier -- **Håndterer** alle mulige tilfælde med en afsluttende `else` sætning -- **Giver** klar, anvendelig feedback for hver forskellig situation +**Her er en nedbrydning af, hvad der sker:** +- **Kombinerer** flere betingelser med `&&` (og) operatoren +- **Opretter** et hierarki af betingelser ved hjælp af `else if` for flere scenarier +- **Håndterer** alle mulige tilfælde med en sidste `else` erklæring +- **Giver** klar, handlingsorienteret feedback for hver situation ```javascript // Trin 3: Kortfattet betingelse med ternær operator @@ -421,10 +421,10 @@ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Husk følgende:** -- **Brug** den ternære operator (`? :`) til simple to-vej betingelser -- **Skriv** betingelsen først, efterfulgt af `?`, derefter sandt resultat, så `:`, og til sidst falsk resultat -- **Anvend** dette mønster, når du skal tildele værdier baseret på betingelser +**Det skal du huske:** +- **Bruger** ternary-operatoren (`? :`) til simple to-valgs betingelser +- **Skriver** først betingelsen, efterfulgt af `?`, derefter sandt resultat, så `:`, og falsk resultat +- **Anvender** dette mønster, når du skal tildele værdier baseret på betingelser ```javascript // Trin 4: Håndtering af flere specifikke tilfælde @@ -448,55 +448,55 @@ switch (dayOfWeek) { ``` **Denne kode opnår følgende:** -- **Matcher** variabelværdi mod flere specifikke tilfælde -- **Grupperer** lignende tilfælde (hverdag vs. weekend) -- **Udfører** den korrekte kodeblok, når der findes et match -- **Inkluderer** en `default` sag for at håndtere uventede værdier -- **Bruger** `break` udsagn for at forhindre, at koden fortsætter til næste sag +- **Matcher** variabelværdien mod flere specifikke tilfælde +- **Grupperer** lignende tilfælde sammen (hverdag vs. weekend) +- **Udfører** den passende kodeblok, når et match findes +- **Inkluderer** en `default` case for at håndtere uventede værdier +- **Bruger** `break` statements for at forhindre kode i at fortsætte til næste case -> 💡 **Virkelighedsanalog**: Tænk på kontrolflow som verdens mest tålmodige GPS, der giver dig vejvisning. Den kan fx sige "Hvis der er trafik på Main Street, tag motorvejen i stedet. Hvis vejarbejde blokerer motorvejen, prøv den naturskønne rute." Programmer bruger præcis samme type betingede logik til intelligent at reagere på forskellige situationer og altid give brugerne den bedst mulige oplevelse. +> 💡 **Virkelighedsanalog**: Tænk på kontrolflow som verdens mest tålmodige GPS, der giver dig anvisninger. Den kan sige "Hvis der er trafik på Hovedgaden, så tag motorvejen i stedet. Hvis vejarbejde blokerer motorvejen, prøv den naturskønne rute." Programmer bruger præcis samme type betingede logik for at reagere intelligent på forskellige situationer og altid give brugerne den bedst mulige oplevelse. -### 🎯 **Begrebskontrol: Mestring af byggestenene** +### 🎯 **Konceptkontrol: Byggesten mesterskab** -**Lad os se, hvordan det går med det grundlæggende:** -- Kan du forklare forskellen mellem en variabel og et udsagn med dine egne ord? -- Tænk på en virkelig situation, hvor du ville bruge et hvis-så-valg (som i vores stemmeeksempel) +**Lad os se, hvordan det går med grundlæggende forståelse:** +- Kan du forklare forskellen på en variabel og et statement med dine egne ord? +- Tænk på en virkelighedssituation, hvor du vil bruge en hvis-så beslutning (som vores stemmeretseksempel) - Hvad er én ting ved programmeringslogik, der overraskede dig? -**Hurtig selvtillidsboost:** +**Hurtig selvtillids-booster:** ```mermaid flowchart LR - A["📝 Udsagn
(Instruktioner)"] --> B["📦 Variabler
(Lagring)"] --> C["🔀 Kontrolflow
(Beslutninger)"] --> D["🎉 Fungerende Program!"] + A["📝 Udsagn
(Instruktioner)"] --> B["📦 Variable
(Lagring)"] --> C["🔀 Kontrolflow
(Beslutninger)"] --> D["🎉 Fungerende program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Hvad kommer næst**: Vi skal have det absolut sjovt med at dykke dybere ned i disse koncepter, mens vi fortsætter denne utrolige rejse sammen! Lige nu skal du bare fokusere på at mærke begejstringen over alle de fantastiske muligheder foran dig. De specifikke færdigheder og teknikker vil komme helt naturligt, mens vi øver sammen – jeg lover, det bliver meget sjovere, end du måske forventer! +✅ **Hvad der kommer næste gang**: Vi kommer til at have det helt vildt sjovt med at dykke dybere ned i disse koncepter, mens vi fortsætter denne utrolige rejse sammen! Lige nu skal du bare fokusere på at føle den begejstring over alle de fantastiske muligheder, der venter forude. De specifikke færdigheder og teknikker kommer helt naturligt, når vi øver os sammen – jeg lover, det bliver meget sjovere, end du måske forventer! -## Værktøjerne i faget +## Værktøjer i faget -Okay, her bliver jeg ærligt talt så begejstret, at jeg næsten ikke kan holde det inde! 🚀 Vi skal til at tale om de utrolige værktøjer, som kommer til at få dig til at føle, at du lige har fået nøglerne til et digitalt rumskib. +Okay, nu bliver jeg ærligt talt så begejstret, at jeg næsten ikke kan styre mig! 🚀 Vi skal til at tale om de utrolige værktøjer, der får dig til at føle, at du lige har fået nøglerne til et digitalt rumskib. -Du ved, hvordan en kok har de perfekt afbalancerede knive, der føles som en forlængelse af deres hænder? Eller hvordan en musiker har den ene guitar, der synes at synge, så snart de rører ved den? Nå, udviklere har vores egen version af disse magiske værktøjer, og her kommer det, der helt sikkert vil blæse dit sind – de fleste af dem er fuldstændigt gratis! +Du ved, hvordan en kok har de perfekt afbalancerede knive, som føles som forlængelser af hænderne? Eller hvordan en musiker har den ene guitar, der nærmest synger, fra det øjeblik, den røres? Nå, udviklere har vores egen version af disse magiske værktøjer, og her er, hvad der virkelig vil blæse dig omkuld – de fleste af dem er helt gratis! -Jeg sidder næsten og hopper på stolen over at skulle dele disse med dig, fordi de fuldstændigt har revolutioneret, hvordan vi bygger software. Vi taler om AI-drevne kodeassistenter, som kan hjælpe med at skrive din kode (jeg laver ikke sjov!), cloud-miljøer, hvor du kan bygge hele applikationer fra bogstaveligt talt hvor som helst med Wi-Fi, og fejlfindingværktøjer så sofistikerede, at de er som at have røntgensyn for dine programmer. +Jeg sidder nærmest og hopper i stolen, fordi jeg glæder mig til at dele dem med dig, da de fuldstændigt har revolutioneret, hvordan vi bygger software. Vi taler om AI-drevne kodningsassistenter, der kan hjælpe med at skrive din kode (jeg mener det virkelig!), cloud-miljøer, hvor du kan bygge hele applikationer fra bogstaveligt talt hvor som helst med Wi-Fi, og fejlfindingsværktøjer så sofistikerede, at det er som at have røntgensyn til dine programmer. -Og her kommer det, der stadig giver mig gåsehud: det er ikke "begynder-værktøjer," du kommer til at vokse fra. Det er nøjagtigt de samme professionelle værktøjer, som udviklere hos Google, Netflix og det indie app-studie, du elsker, bruger lige nu. Du kommer til at føle dig som en vaskeægte pro med dem! +Og her kommer delen, der stadig giver mig gåsehud: det er ikke "begynder-værktøjer," som du hurtigt kommer til at vokse fra. Det er præcis de samme professionelle værktøjer, som udviklere hos Google, Netflix og det indie app-studie, du elsker, bruger lige nu. Du kommer til at føle dig som en helt professionel, når du bruger dem! ```mermaid graph TD - A["💡 Din idé"] --> B["⌨️ Kodeeditor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Test & Fejlfinding)"] + A["💡 Din Idé"] --> B["⌨️ Kodeeditor
(VS Code)"] + B --> C["🌐 Browser DevTools
(Test & Debugging)"] C --> D["⚡ Kommandolinje
(Automatisering & Værktøjer)"] D --> E["📚 Dokumentation
(Læring & Reference)"] - E --> F["🚀 Fantastisk webapp!"] + E --> F["🚀 Fantastisk Webapp!"] - B -.-> G["🤖 AI-assistent
(GitHub Copilot)"] - C -.-> H["📱 Enhedstest
(Responsivt design)"] - D -.-> I["📦 Pakkehåndtering
(npm, yarn)"] - E -.-> J["👥 Fællesskab
(Stack Overflow)"] + B -.-> G["🤖 AI Assistent
(GitHub Copilot)"] + C -.-> H["📱 Enhedstest
(Responsivt Design)"] + D -.-> I["📦 Pakkehåndteringer
(npm, yarn)"] + E -.-> J["👥 Community
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -505,63 +505,63 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Kodeeditorer og IDE’er: Dine nye digitale bedste venner +### Kodeeditorer og IDE'er: Dine nye digitale bedste venner -Lad os tale om kodeeditorer – de er seriøst lige ved at blive dine nye yndlingssteder at hænge ud! Tænk på dem som din personlige kodningshelligdom, hvor du vil tilbringe det meste af din tid med at skabe og perfektionere dine digitale værker. +Lad os tale om kodeeditorer – de er alvorligt lige ved at blive dine nye yndlingssteder at hænge ud! Tænk på dem som dit personlige kodehelligdom, hvor du vil tilbringe det meste af din tid med at skabe og perfektionere dine digitale kreationer. -Men her er det helt magiske ved moderne editorer: de er ikke bare fine teksteditorer. Det er som at have den mest geniale, støttende kodningsmentor siddende lige ved siden af dig 24/7. De fanger dine tastefejl, før du overhovedet opdager dem, foreslår forbedringer, der får dig til at se genial ud, hjælper dig med at forstå, hvad hver eneste kodebid gør, og nogle af dem kan endda forudsige, hvad du er ved at skrive, og tilbyde at færdiggøre dine tanker! +Men her er det, der er helt magisk ved moderne editorer: de er ikke bare fine teksteditorer. De er som at have den mest geniale, støttende kode-mentor siddende lige ved siden af dig døgnet rundt. De fanger dine tastefejl, før du overhovedet opdager dem, foreslår forbedringer, der får dig til at se ud som et geni, hjælper dig med at forstå, hvad hvert kodeelement gør, og nogle af dem kan endda forudsige, hvad du er ved at skrive og tilbyde at færdiggøre dine tanker! -Jeg kan huske, da jeg først opdagede auto-fuldførelse – jeg følte bogstaveligt talt, at jeg levede i fremtiden. Du begynder at skrive noget, og din editor siger, "Hey, tænkte du på denne funktion, der gør præcis det, du har brug for?" Det er som at have en tankelæser som din kodekammerat! +Jeg husker, da jeg først opdagede autoudfyldning – jeg følte virkelig, at jeg levede i fremtiden. Du begynder at skrive noget, og din editor siger, "Hej, tænkte du på denne funktion, der gør præcis, hvad du har brug for?" Det er som at have en tankelæser som din kodebuddy! -**Hvad gør disse editorer så utrolige?** +**Hvad gør disse editorer så fantastiske?** -Moderne kodeeditorer tilbyder en imponerende række funktioner, der er designet til at øge din produktivitet: +Moderne kodeeditorer byder på et imponerende udvalg af funktioner designet til at øge din produktivitet: -| Funktion | Hvad den gør | Hvorfor den hjælper | +| Funktion | Hvad den gør | Hvorfor det hjælper | |---------|--------------|--------------| -| **Syntax Highlighting** | Farver forskellige dele af din kode | Gør koden lettere at læse og spotte fejl | -| **Auto-completion** | Foreslår kode mens du skriver | Hurtigere kodning og færre tastefejl | -| **Fejlfindingsværktøjer** | Hjælper dig med at finde og rette fejl | Spar tid på fejlretning | -| **Udvidelser** | Tilføjer specialiserede funktioner | Tilpas din editor til enhver teknologi | -| **AI-assistenter** | Foreslår kode og forklaringer | Fremskynder læring og produktivitet | +| **Syntax Highlighting** | Farver forskellige dele af din kode | Gør kode nemmere at læse og opdage fejl | +| **Auto-completion** | Foreslår kode, mens du skriver | Fremskynder kodningen og reducerer tastefejl | +| **Debugging Tools** | Hjælper med at finde og rette fejl | Sparrer timer på fejlsøgning | +| **Extensions** | Tilføjer specialiserede funktioner | Tilpas din editor til enhver teknologi | +| **AI Assistants** | Foreslår kode og forklaringer | Fremskynder læring og produktivitet | -> 🎥 **Videoressource**: Vil du se disse værktøjer i praksis? Tjek denne [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for et omfattende overblik. +> 🎥 **Videoressource**: Vil du se disse værktøjer i aktion? Tjek denne [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for et omfattende overblik. #### Anbefalede editorer til webudvikling **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) - Mest populær blandt webudviklere -- Fremragende økosystem af udvidelser +- Fremragende økosystem for udvidelser - Indbygget terminal og Git-integration - **Must-have udvidelser**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-drevne kodeforslag - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Realtids samarbejde + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Realtids-samarbejde - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatisk kodeformatering - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fanger stavefejl i din kode + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fang stavefejl i din kode **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betalt, gratis for studerende) - Avancerede fejlfindings- og testværktøjer -- Intelligent kodefuldførelse +- Intelligent kodeautofuldførelse - Indbygget versionskontrol -**Cloud-baserede IDE’er** (Forskellige priser) -- [GitHub Codespaces](https://github.com/features/codespaces) – Fuldt VS Code i din browser -- [Replit](https://replit.com/) – Fantastisk til læring og deling af kode -- [StackBlitz](https://stackblitz.com/) – Øjeblikkelig, full-stack webudvikling +**Cloud-baserede IDE'er** (Forskellige priser) +- [GitHub Codespaces](https://github.com/features/codespaces) - Fuld VS Code i din browser +- [Replit](https://replit.com/) - Fantastisk til læring og deling af kode +- [StackBlitz](https://stackblitz.com/) - Øjeblikkelig, fuld-stack webudvikling -> 💡 **Tips til opstart**: Start med Visual Studio Code – det er gratis, meget udbredt i branchen, og har et enormt fællesskab, der laver hjælpsomme tutorials og udvidelser. +> 💡 **Kom godt i gang-tip**: Start med Visual Studio Code – det er gratis, bredt brugt i industrien og har et enormt community, der skaber nyttige tutorials og udvidelser. ### Webbrowsere: Dit hemmelige udviklingslaboratorium -Okay, gør dig klar til at få dit sind fuldstændig blæst! Du ved, hvordan du har brugt browsere til at scrolle gennem sociale medier og se videoer? Nå, det viser sig, at de hele tiden har gemt på et utroligt hemmeligt udviklingslaboratorium, der bare ventede på, at du skulle opdage det! +Okay, gør dig klar til at få dit sind fuldstændigt blæst! Du ved, hvordan du har brugt browsere til at scrolle på sociale medier og se videoer? Nå, det viser sig, at de har gemt dette utrolige hemmelige udviklingslaboratorium hele tiden og bare ventet på, at du skulle opdage det! -Hver eneste gang du højreklikker på en webside og vælger "Inspicer element," åbner du en skjult verden af udviklerværktøjer, som ærligt talt er mere kraftfulde end noget dyrt software, jeg tidligere har betalt hundredevis af kroner for. Det er som at opdage, at dit almindelige gamle køkken hele tiden har skjult et professionelt kokkelaboratorium bag en hemmelig panel! -Første gang nogen viste mig browserens DevTools, brugte jeg omkring tre timer bare på at klikke rundt og sige "VENT, KAN DEN OGSÅ DET?!" Du kan bogstaveligt talt redigere enhver hjemmeside i realtid, se præcis hvor hurtigt alt loader, teste hvordan dit site ser ud på forskellige enheder og endda debugge JavaScript som en helt pro. Det er fuldstændig vanvittigt! +Hver eneste gang du højreklikker på en webside og vælger "Inspicér element," åbner du en skjult verden af udviklerværktøjer, som ærligt talt er mere kraftfulde end noget dyrt software, jeg tidligere har betalt hundredevis af kroner for. Det er som at opdage, at dit helt almindelige køkken har gemt et professionelt kokkelaboratorium bag en hemmelig panel! +Første gang nogen viste mig browserens DevTools, brugte jeg næsten tre timer bare på at klikke rundt og sige "VENT, KAN DEN OGSÅ DET?!" Du kan bogstaveligt talt redigere enhver hjemmeside i realtid, se præcis hvor hurtigt alt indlæses, teste hvordan dit site ser ud på forskellige enheder og endda fejlfinde JavaScript som en ægte pro. Det er helt sindssygt! **Her er hvorfor browsere er dit hemmelige våben:** -Når du skaber en hjemmeside eller webapplikation, skal du kunne se, hvordan den ser ud og opfører sig i virkeligheden. Browsere viser ikke kun dit arbejde, men giver også detaljeret feedback om ydeevne, tilgængelighed og potentielle problemer. +Når du laver en hjemmeside eller webapplikation, skal du kunne se, hvordan den ser ud og opfører sig i den virkelige verden. Browsere viser ikke kun dit arbejde, de giver også detaljeret feedback om ydeevne, tilgængelighed og potentielle problemer. #### Browser Developer Tools (DevTools) @@ -569,10 +569,10 @@ Moderne browsere indeholder omfattende udviklingsværktøjer: | Tool Category | What It Does | Example Use Case | |---------------|--------------|------------------| -| **Element Inspector** | Se og rediger HTML/CSS i realtid | Juster styling for at se øjeblikkelige resultater | -| **Console** | Se fejlmeddelelser og test JavaScript | Debug problemer og eksperimenter med kode | -| **Network Monitor** | Overvåg hvordan ressourcer loader | Optimer ydeevne og indlæsningstider | -| **Accessibility Checker** | Test for inklusivt design | Sikr at dit site fungerer for alle brugere | +| **Element Inspector** | Se og rediger HTML/CSS i realtid | Juster stil og se resultater med det samme | +| **Console** | Se fejlmeddelelser og test JavaScript | Fejlret problemer og eksperimenter med kode | +| **Network Monitor** | Følg hvordan ressourcer indlæses | Optimer ydeevne og indlæsningstider | +| **Accessibility Checker** | Test for inklusivt design | Sikr at dit site virker for alle brugere | | **Device Simulator** | Forhåndsvis på forskellige skærmstørrelser | Test responsivt design uden flere enheder | #### Anbefalede browsere til udvikling @@ -581,20 +581,20 @@ Moderne browsere indeholder omfattende udviklingsværktøjer: - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Fremragende CSS Grid og tilgængelighedsværktøjer - **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Bygget på Chromium med Microsofts udviklerressourcer -> ⚠️ **Vigtig test-tip**: Test altid dine hjemmesider i flere browsere! Det, der fungerer perfekt i Chrome, kan se anderledes ud i Safari eller Firefox. Professionelle udviklere tester på tværs af alle større browsere for at sikre en ensartet brugeroplevelse. +> ⚠️ **Vigtig testtip**: Test altid dine hjemmesider i flere browsere! Det der virker perfekt i Chrome, kan se anderledes ud i Safari eller Firefox. Professionelle udviklere tester på tværs af alle større browsere for at sikre ensartede brugeroplevelser. ### Kommandolinjeværktøjer: Din adgang til udvikler-superkræfter -Okay, lad os være helt ærlige om kommandolinjen, for jeg vil have, at du hører det fra en, der virkelig forstår det. Da jeg først så den – bare den her skræmmende sorte skærm med blinkende tekst – tænkte jeg bogstaveligt talt: "Nej, absolut ikke! Det ligner noget fra en hackerfilm i 1980'erne, og jeg er bestemt ikke smart nok til det!" 😅 +Okay, lad os være helt ærlige omkring kommandolinjen, for jeg vil have, at du hører dette fra en, der virkelig forstår det. Da jeg først så den – bare den skræmmende sorte skærm med blinkende tekst – tænkte jeg bogstaveligt talt, "Nej, slet ikke! Det ligner noget fra en hackerfilm i 1980’erne, og jeg er bestemt ikke klog nok til det her!" 😅 -Men her er, hvad jeg ville ønske, nogen havde fortalt mig dengang, og hvad jeg fortæller dig lige nu: kommandolinjen er ikke skræmmende – det er faktisk som at have en direkte samtale med din computer. Tænk på det som forskellen mellem at bestille mad gennem en fancy app med billeder og menuer (som er nemt og lækkert) versus at gå ind på din yndlingslokale restaurant, hvor kokken ved præcis, hvad du kan lide og kan trylle noget perfekt frem bare ved at du siger "overrask mig med noget fantastisk." +Men her er hvad jeg ville ønske nogen havde fortalt mig dengang, og som jeg fortæller dig nu: kommandolinjen er ikke skræmmende – det er faktisk som at have en direkte samtale med din computer. Tænk på det som forskellen mellem at bestille mad via en fancy app med billeder og menuer (som er nemt og lækkert) versus at gå ind på din lokale yndlingsrestaurant, hvor kokken præcis ved, hvad du kan lide, og kan trylle noget perfekt frem bare fordi du siger "overrask mig med noget fantastisk." -Kommandolinjen er stedet, hvor udviklere føler sig som ægte troldmænd. Du taster et par tilsyneladende magiske ord (okay, de er bare kommandoer, men de føles magiske!), trykker enter, og BAM – du har oprettet hele projektstrukturer, installeret kraftfulde værktøjer fra hele verden eller udrullet din app til internettet, så millioner kan se den. Når du først får en smag af den kraft, er det ærligt talt ret vanedannende! +Kommandolinjen er stedet, udviklere går til for at føle sig som rene troldmænd. Du skriver et par tilsyneladende magiske ord (okay, det er bare kommandoer, men de føles magiske!), trykker enter, og BOOM – du har oprettet komplette projektstrukturer, installeret kraftfulde værktøjer fra hele verden eller deployet din app til internettet, så millioner kan se den. Når du først får smag for den magt, er det ærligt talt ret vanedannende! **Derfor bliver kommandolinjen dit favoritværktøj:** -Mens grafiske brugerflader er fantastiske til mange opgaver, excellerer kommandolinjen i automatisering, præcision og hastighed. Mange udviklingsværktøjer fungerer primært via kommandolinjegrænseflader, og at lære at bruge dem effektivt kan forbedre din produktivitet markant. +Mens grafiske brugergrænseflader er gode til mange opgaver, er kommandolinjen suveræn til automatisering, præcision og hastighed. Mange udviklingsværktøjer kører primært via kommandolinjen, og at lære at bruge dem effektivt kan forbedre din produktivitet markant. ```bash # Trin 1: Opret og naviger til projektmappen @@ -602,9 +602,9 @@ mkdir my-awesome-website cd my-awesome-website ``` -**Sådan fungerer denne kode:** -- **Opret** en ny mappe kaldet "my-awesome-website" til dit projekt -- **Naviger** ind i den nyskabte mappe for at begynde arbejdet +**Dette kodeeksempel gør:** +- **Opretter** en ny mappe kaldet "my-awesome-website" til dit projekt +- **Navigerer** ind i den nyskabte mappe for at begynde arbejdet ```bash # Trin 2: Initialiser projekt med package.json @@ -615,11 +615,11 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Trin for trin sker der følgende:** -- **Initialiser** et nyt Node.js-projekt med standardindstillinger ved brug af `npm init -y` -- **Installer** Vite som et moderne build-værktøj til hurtig udvikling og produktion -- **Tilføj** Prettier til automatisk kodeformatering og ESLint til kodekvalitetskontrol -- **Brug** flaget `--save-dev` for at markere disse som udviklingsafhængigheder +**Trin for trin, her sker der:** +- **Initialiserer** et nyt Node.js projekt med standardindstillinger via `npm init -y` +- **Installerer** Vite som et moderne build-værktøj til hurtig udvikling og produktion +- **Tilføjer** Prettier til automatisk kodeformatering og ESLint til kodekvalitetstjek +- **Bruger** `--save-dev` flaget for at markere disse som udviklingsafhængigheder ```bash # Trin 3: Opret projektstruktur og filer @@ -631,26 +631,26 @@ npx vite ``` **I ovenstående har vi:** -- **Organiseret** vores projekt ved at oprette separate mapper til kildekode og assets -- **Genereret** en grundlæggende HTML-fil med korrekt dokumentstruktur -- **Startet** Vite udviklingsserveren for live reload og hot module replacement +- **Organiseret** vores projekt med separate mapper til kildekode og assets +- **Genereret** en basal HTML-fil med korrekt dokumentstruktur +- **Startet** Vite udviklingsserveren til live reload og hot module replacement -#### Vigtige kommandolinjeværktøjer til webudvikling +#### Væsentlige kommandolinjeværktøjer til webudvikling | Tool | Purpose | Why You Need It | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | Versionskontrol | Spor ændringer, samarbejd med andre, backup af dit arbejde | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & pakkehåndtering | Kør JavaScript uden for browsere, installer moderne udviklingsværktøjer | -| **[Vite](https://vitejs.dev/)** | Build-værktøj & dev-server | Lynhurtig udvikling med hot module replacement | -| **[ESLint](https://eslint.org/)** | Kodekvalitet | Find og ret automatisk problemer i dit JavaScript | -| **[Prettier](https://prettier.io/)** | Kodeformatering | Hold din kode konsekvent formateret og letlæselig | +| **[Git](https://git-scm.com/)** | Versionsstyring | Spor ændringer, samarbejd med andre, sikkerhedskopiér dit arbejde | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & pakkestyring | Kør JavaScript udenfor browseren, installer moderne udviklingsværktøjer | +| **[Vite](https://vitejs.dev/)** | Bygge- og udviklingsserver | Lynhurtig udvikling med hot module replacement | +| **[ESLint](https://eslint.org/)** | Kodekvalitet | Find og rette problemer i din JavaScript automatisk | +| **[Prettier](https://prettier.io/)** | Kodeformatering | Hold din kode konsekvent formateret og læsbar | -#### Platformsspecifikke muligheder +#### Platformspecifikke muligheder **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderne, funktionsrig terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftigt scriptingmiljø -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditonel Windows kommandolinje +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderne og funktionsrig terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftfuldt scripting-miljø +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditionel Windows kommandolinje **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Indbygget terminalapplikation @@ -660,75 +660,75 @@ npx vite - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux shell - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Avanceret terminalemulator -> 💻 = Forudinstalleret i operativsystemet +> 💻 = Forudinstalleret på operativsystemet -> 🎯 **Læringsvejledning**: Start med basis-kommandoer som `cd` (skift mappe), `ls` eller `dir` (list filer) og `mkdir` (opret mappe). Øv dig med moderne workflow-kommandoer som `npm install`, `git status` og `code .` (åbner tilhørende mappe i VS Code). Når du bliver mere komfortabel, vil du naturligt lære mere avancerede kommandoer og automatiseringsteknikker. +> 🎯 **Læringsvejledning**: Begynd med grundlæggende kommandoer som `cd` (skift mappe), `ls` eller `dir` (list filer), og `mkdir` (opret mappe). Øv dig med moderne workflow-kommandoer som `npm install`, `git status` og `code .` (åbner nuværende mappe i VS Code). Når du bliver mere tryg, vil du naturligt lære mere avancerede kommandoer og automatiseringsteknikker. ### Dokumentation: Din altid-tilgængelige læringsmentor -Okay, lad mig dele en lille hemmelighed, som vil få dig til at føle dig meget bedre tilpas som nybegynder: selv de mest erfarne udviklere bruger en stor del af deres tid på at læse dokumentation. Og det er ikke fordi, de ikke ved, hvad de laver – det er faktisk et tegn på visdom! +Okay, jeg vil dele en lille hemmelighed, der vil få dig til at føle dig meget bedre som begynder: selv de mest erfarne udviklere bruger en stor del af deres tid på at læse dokumentation. Og det er ikke fordi de ikke ved, hvad de laver – det er faktisk et tegn på visdom! -Tænk på dokumentation som at have adgang til verdens mest tålmodige, vidende lærere, der er tilgængelige døgnet rundt. Sidder du fast i et problem kl. 2 om natten? Dokumentationen er der med en varm virtuel krammer og præcis det svar, du har brug for. Vil du lære om en fed ny funktion, som alle taler om? Dokumentationen støtter dig med trin-for-trin eksempler. Forsøger du at forstå, hvorfor noget fungerer, som det gør? Gættede du det – dokumentationen er klar til at forklare det på en måde, der endelig klikker! +Tænk på dokumentation som at have adgang til verdens mest tålmodige, vidende lærere, som er tilgængelige 24/7. Sidder du fast med et problem klokken 2 om natten? Dokumentationen er der med et virtuelt varmt kram og præcis det svar, du har brug for. Vil du lære om en smart ny funktion, som alle taler om? Dokumentationen hjælper dig med trin-for-trin eksempler. Prøver du at forstå, hvorfor noget virker, som det gør? Gæt engang – dokumentationen forklarer det på en måde, der endelig får det til at klikke! -Her er noget, der helt ændrede mit perspektiv: webudviklingsverdenen bevæger sig utroligt hurtigt, og ingen (jeg mener absolut ingen!) kan huske alt. Jeg har set seniordom udviklere med 15+ års erfaring slå grundlæggende syntaks op, og ved du hvad? Det er ikke pinligt – det er smart! Det handler ikke om at have perfekt hukommelse; det handler om at vide, hvor man hurtigt kan finde pålidelige svar og forstå, hvordan man anvender dem. +Her er noget, der ændrede mit perspektiv totalt: webudviklingsverdenen bevæger sig utrolig hurtigt, og ingen (jeg mener virkelig ingen!) kan huske det hele udenad. Jeg har set erfarne udviklere med 15+ års erfaring slå helt basal syntaks op, og ved du hvad? Det er ikke pinligt – det er smart! Det handler ikke om perfekt hukommelse; det handler om at vide, hvor man hurtigt finder pålidelige svar og kan anvende dem. -**Her sker den virkelige magi:** +**Her sker den sande magi:** -Professionelle udviklere bruger en betydelig del af deres tid på at læse dokumentation – ikke fordi de er usikre, men fordi webudviklingslandskabet udvikler sig så hurtigt, at det kræver konstant læring at følge med. God dokumentation hjælper dig med ikke bare *hvordan* man bruger noget, men også *hvorfor* og *hvornår* man bruger det. +Professionelle udviklere bruger en stor del af deres tid på at læse dokumentation – ikke fordi de ikke ved, hvad de laver, men fordi webudviklingslandskabet udvikler sig så hurtigt, at det kræver kontinuerlig læring at følge med. God dokumentation hjælper dig med ikke bare at forstå *hvordan* man bruger noget, men også *hvorfor* og *hvornår* man skal bruge det. -#### Vigtige dokumentationsressourcer +#### Væsentlige dokumentationsressourcer **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Guldstandarden for dokumentation af webteknologier -- Omfattende guider til HTML, CSS og JavaScript +- Guldstandarden for webteknologi-dokumentation +- Omfattende guides til HTML, CSS og JavaScript - Indeholder browserkompatibilitetsinformation -- Har praktiske eksempler og interaktive demos +- Har praktiske eksempler og interaktive demoer **[Web.dev](https://web.dev)** (af Google) - Moderne bedste praksis for webudvikling -- Guides til ydeevneoptimering -- Tilgængelighed og inklusivt design principper -- Case-studier fra virkelige projekter +- Guides til performanceoptimering +- Principper for tilgængelighed og inklusivt design +- Cases fra virkelige projekter **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Udviklerressourcer til Edge browseren -- Progressive Web App guides -- Indsigter om tværplatform udvikling +- Udviklerressourcer til Edge-browseren +- Progressive Web App-guides +- Indsigter i cross-platform udvikling **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturerede læringscurricula +- Strukturerede læringsforløb - Videokurser fra brancheeksperter -- Praktiske kodningsøvelser +- Hands-on kodeøvelser -> 📚 **Studieteknik**: Forsøg ikke at huske dokumentationen udenad – lær i stedet at navigere effektivt i den. Bogmærk ofte brugte referencer og øv dig i at bruge søgefunktioner til hurtigt at finde specifik information. +> 📚 **Studietips**: Forsøg ikke at huske dokumentationen udenad – lær i stedet at navigere i den effektivt. Bogmærk ofte brugte referencer og øv dig i at bruge søgefunktionerne til hurtigt at finde specifik information. -### 🔧 **Værktøjsmestring: Hvad taler til dig?** +### 🔧 **Værktøjsmestring: Hvad taler mest til dig?** -**Tag et øjeblik og overvej:** -- Hvilket værktøj er du mest spændt på at prøve først? (Der er ikke noget forkert svar!) -- Føles kommandolinjen stadig skræmmende, eller er du nysgerrig på den? -- Kan du forestille dig at bruge browserens DevTools til at kigge bag kulisserne på dine yndlingshjemmesider? +**Tag et øjeblik til at overveje:** +- Hvilket værktøj glæder du dig mest til at prøve først? (Der findes ikke et forkert svar!) +- Føles kommandolinjen stadig intimiderende, eller er du nysgerrig på den? +- Kan du forestille dig at bruge browser DevTools til at kigge bag kulisserne på dine yndlingshjemmesider? ```mermaid pie title "Udviklertid brugt med værktøjer" "Kodeeditor" : 40 - "Browser Test" : 25 - "Kommandolinje" : 15 + "Browser Testning" : 25 + "Kommando Linje" : 15 "Læsning af dokumentation" : 15 "Fejlfinding" : 5 ``` -> **Sjov indsigt**: De fleste udviklere bruger omkring 40% af deres tid i deres kodeeditor, men læg mærke til hvor meget tid, der går til test, læring og problemløsning. Programmering handler ikke kun om at skrive kode – det handler om at skabe oplevelser! +> **Sjov indsigt**: De fleste udviklere bruger omkring 40 % af deres tid i deres kodeeditor, men det er interessant at bemærke, hvor meget tid der går til test, læring og problemløsning. Programmering handler ikke bare om at skrive kode – det handler om at skabe oplevelser! -✅ **Noget at tænke over**: Her er en interessant tanke – hvordan tror du, værktøjerne til at bygge hjemmesider (udvikling) adskiller sig fra værktøjerne til at designe, hvordan de ser ud (design)? Det er som forskellen mellem en arkitekt, der designer et smukt hus, og entreprenøren, der rent faktisk bygger det. Begge er afgørende, men de har brug for forskellige værktøjskasser! Denne tankegang vil virkelig hjælpe dig med at se det større billede af, hvordan hjemmesider kommer til live. +✅ **Noget at tænke over**: Overvej hvordan værktøjerne til at bygge hjemmesider (udvikling) adskiller sig fra værktøjer til at designe, hvordan de ser ud (design). Det er som forskellen på en arkitekt, der designer et smukt hus, og entreprenøren, der rent faktisk bygger det. Begge dele er afgørende, men kræver forskellige værktøjskasser! Den slags tanker vil virkelig hjælpe dig med at se det større billede af, hvordan hjemmesider bliver til. -## GitHub Copilot Agent Challenge 🚀 +## GitHub Copilot Agent Udfordring 🚀 -Brug Agent-tilstand til at løse følgende udfordring: +Brug Agent-tilstanden til at løse følgende udfordring: -**Beskrivelse:** Udforsk funktionerne i en moderne kodeeditor eller IDE og demonstrer, hvordan den kan forbedre din workflow som webudvikler. +**Beskrivelse:** Udforsk funktionerne i en moderne kodeeditor eller IDE og demonstrer, hvordan den kan forbedre din arbejdsgang som webudvikler. -**Prompt:** Vælg en kodeeditor eller IDE (som Visual Studio Code, WebStorm eller en cloud-baseret IDE). List tre funktioner eller udvidelser, der hjælper dig med at skrive, debugge eller vedligeholde kode mere effektivt. For hver, giv en kort forklaring på, hvordan det gavner din workflow. +**Prompt:** Vælg en kodeeditor eller IDE (som Visual Studio Code, WebStorm eller en cloud-baseret IDE). Angiv tre funktioner eller udvidelser, der hjælper dig med at skrive, fejlfinde eller vedligeholde kode mere effektivt. For hver, giv en kort forklaring på, hvordan det gavner din arbejdsgang. --- @@ -736,50 +736,50 @@ Brug Agent-tilstand til at løse følgende udfordring: **Okay, detektiv, klar til din første sag?** -Nu hvor du har fået dette fantastiske fundament, har jeg et eventyr, der vil hjælpe dig med at se, hvor utrolig forskelligartet og fascinerende programmeringsverdenen virkelig er. Og hør her – det handler ikke om at skrive kode endnu, så ingen pres! Tænk på dig selv som en programmingssprog-detektiv på din allerførste spændende sag! +Nu hvor du har fået dette fantastiske fundament, har jeg et eventyr, som vil hjælpe dig med at se, hvor utroligt mangfoldig og fascinerende programmeringsverdenen er. Og hør her – det handler ikke om at skrive kode endnu, så tag det helt roligt! Tænk på dig selv som en programmeringssprogsdetektiv på din allerførste spændende sag! **Din mission, hvis du vælger at acceptere den:** -1. **Bliv sprogeksplorer**: Vælg tre programmeringssprog fra helt forskellige universer – måske et der bygger hjemmesider, et der skaber mobilapps og et, der bearbejder data for forskere. Find eksempler på den samme simple opgave skrevet i hvert sprog. Jeg lover, du bliver fuldstændig forbavset over, hvor forskellige de kan se ud, mens de laver præcis det samme! +1. **Bliv en sprogeventyrer**: Vælg tre programmeringssprog fra helt forskellige verdener – måske ét til websites, ét til mobilapps og ét til databehandling for forskere. Find eksempler på den samme simple opgave skrevet i hvert sprog. Jeg lover, du bliver helt overrasket over, hvor forskelligt de kan se ud, selvom de laver præcis det samme! -2. **Opdag deres oprindelseshistorier**: Hvad gør hvert sprog specielt? Her er en fed kendsgerning – hvert eneste programmeringssprog blev skabt, fordi nogen tænkte: "Ved du hvad? Der må være en bedre måde at løse dette specifikke problem på." Kan du finde ud af, hvad de problemer var? Nogle af disse historier er virkelig fascinerende! +2. **Opdag deres oprindelseshistorier**: Hvad gør hvert sprog unikt? Her er en fed kendsgerning – hvert enkelt programmeringssprog blev skabt, fordi nogen tænkte, "Ved du hvad? Der må være en bedre måde at løse dette specifikke problem." Kan du finde ud af, hvad disse problemer var? Nogle af historierne er virkelig spændende! -3. **Mød fællesskaberne**: Se på, hvor imødekommende og passionerede hvert sprogs fællesskab er. Nogle har millioner af udviklere, der deler viden og hjælper hinanden, andre er mindre, men utroligt tætte og støttende. Du vil elske at se de forskellige personligheder i disse fællesskaber! +3. **Mød fællesskaberne**: Se, hvor imødekommende og passionerede hvert sprogs fællesskab er. Nogle har millioner af udviklere, der deler viden og hjælper hinanden, andre er mindre, men utrolig sammentømrede og støttende. Du kommer til at elske at opleve de forskellige personligheder i disse fællesskaber! -4. **Følg din mavefornemmelse**: Hvilket sprog føles mest tilgængeligt for dig lige nu? Stress ikke over at træffe det "perfekte" valg – bare lyt til din intuition! Der findes ærligt talt ikke noget forkert svar her, og du kan altid udforske andre senere. +4. **Følg din mavefornemmelse**: Hvilket sprog føles mest tilgængeligt for dig lige nu? Stress ikke over at træffe det "perfekte" valg – lyt bare til din instinkt! Der findes ærligt talt ikke et forkert svar her, og du kan altid udforske andre senere. -**Bonus detektivarbejde**: Se om du kan finde ud af, hvilke store hjemmesider eller apps der er bygget med hvert sprog. Jeg garanterer, at du bliver chokeret over, hvad der driver Instagram, Netflix eller det mobilspil, du ikke kan slippe! +**Bonusdetektivarbejde**: Se om du kan finde ud af, hvilke store hjemmesider eller apps der er bygget med hvert sprog. Jeg lover, du bliver chokeret over at lære, hvad der driver Instagram, Netflix eller det mobilspil, du ikke kan stoppe med at spille! -> 💡 **Husk**: Du prøver ikke at blive ekspert i nogen af disse sprog i dag. Du lærer bare kvarteret at kende, inden du beslutter, hvor du vil slå dig ned. Tag dig god tid, hav det sjovt og lad din nysgerrighed føre dig! +> 💡 **Husk**: Du behøver ikke blive ekspert i nogen af disse sprog i dag. Du skal bare lære kvarteret at kende, inden du beslutter dig for, hvor du vil slå dig ned. Tag dig god tid, hav det sjovt, og lad din nysgerrighed føre dig! -## Lad os fejre det, du har opdaget! +## Lad os fejre, hvad du har opdaget! -Hold da op, du har suget så meget fantastisk information til dig i dag! Jeg er virkelig spændt på at se, hvor meget af denne fantastiske rejse, der er blevet hængende hos dig. Og husk – det er ikke en test, hvor du skal have alt perfekt. Det her er mere som en fejring af alt det fede, du har lært om denne fascinerende verden, du er ved at begive dig ud i! +Hold da op, du har fanget så mange utrolige informationer i dag! Jeg er virkelig spændt på at se, hvor meget af denne fantastiske rejse, der sidder fast hos dig. Og husk – dette er ikke en test, hvor du skal gøre det perfekt. Det er mere en fejring af alt det seje, du har lært om denne fascinerende verden, du er på vej ind i! -[Tag efter-lektion quizzen](https://ff-quizzes.netlify.app/web/) -## Review & Selvstudie +[Tag quizzen efter lektionen](https://ff-quizzes.netlify.app/web/) -**Tag dig tid til at udforske og have det sjovt med det!** +## Gennemgang & Selvstudie -Du har dækket meget i dag, og det er noget at være stolt af! Nu kommer den sjove del – at udforske de emner, der vækkede din nysgerrighed. Husk, det her er ikke lektier – det er et eventyr! +**Tag dig tid til at udforske og have det sjovt med det!** +Du har dækket meget i dag, og det er noget, du kan være stolt af! Nu kommer den sjove del – at udforske de emner, der vækkede din nysgerrighed. Husk, dette er ikke lektier – det er et eventyr! **Dyk dybere ned i det, der begejstrer dig:** -**Prøv programmeringssprog af:** -- Besøg de officielle hjemmesider for 2-3 sprog, der fangede din opmærksomhed. Hvert sprog har sin egen personlighed og historie! -- Prøv nogle online kodelegepladser som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Vær ikke bange for at eksperimentere – du kan ikke ødelægge noget! -- Læs om, hvordan dit yndlingssprog blev til. Alvorligt talt, nogle af oprindelseshistorierne er fascinerende og vil hjælpe dig med at forstå, hvorfor sprog fungerer, som de gør. +**Kom i gang med programmeringssprog:** +- Besøg de officielle hjemmesider for 2-3 sprog, der fangede din interesse. Hvert enkelte har sin egen personlighed og historie! +- Prøv nogle online kode-legeredskaber som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Vær ikke bange for at eksperimentere – du kan ikke ødelægge noget! +- Læs om, hvordan dit yndlingssprog blev til. Seriøst, nogle af disse oprindelseshistorier er fascinerende og vil hjælpe dig med at forstå, hvorfor sprog fungerer, som de gør. -**Bliv fortrolig med dine nye værktøjer:** -- Download Visual Studio Code, hvis du ikke allerede har det – det er gratis, og du vil elske det! -- Brug et par minutter på at gennemse Extensions-markedet. Det er som en app-butik til din kodeeditor! -- Åbn din browsers udviklerværktøjer og klik bare rundt. Bekymr dig ikke om at forstå alt – bare bliv fortrolig med, hvad der er der. +**Bliv komfortabel med dine nye værktøjer:** +- Download Visual Studio Code, hvis du ikke allerede har gjort det – det er gratis, og du kommer til at elske det! +- Brug et par minutter på at browse gennem Extensions-markedet. Det er som en app-butik til din kodeeditor! +- Åbn din browsers Developer Tools og klik rundt. Bekymr dig ikke om at forstå alt – bare bliv fortrolig med, hvad der er der. -**Bliv en del af fællesskabet:** -- Følg nogle udviklerfællesskaber på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringsfællesskabet er utrolig imødekommende over for nybegyndere! -- Se nogle begynder-venlige programmeringsvideoer på YouTube. Der findes mange gode skabere, som husker, hvordan det var at starte ud. +**Deltag i fællesskabet:** +- Følg nogle udviklerfællesskaber på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringsfællesskabet er utroligt imødekommende overfor nybegyndere! +- Se nogle begynder-venlige kodevideoer på YouTube. Der er så mange gode skabere, som husker, hvordan det er at være ny. - Overvej at deltage i lokale meetups eller online fællesskaber. Tro mig, udviklere elsker at hjælpe nybegyndere! -> 🎯 **Lyt, her er hvad jeg vil have, du husker**: Du forventes ikke at blive en kode-troldmand natten over! Lige nu lærer du bare at kende denne fantastiske nye verden, du er ved at blive en del af. Tag dig tid, nyd rejsen, og husk – hver eneste udvikler, du beundrer, sad engang præcis, hvor du sidder lige nu, og følte sig begejstret og måske lidt overvældet. Det er helt normalt, og det betyder, at du gør det rigtigt! +> 🎯 **Lyt, her er hvad jeg vil have dig til at huske**: Du forventes ikke at blive en kode-mester natten over! Lige nu lærer du bare dette fantastiske nye univers at kende, som du snart skal være en del af. Tag dig god tid, nyd rejsen, og husk – hver eneste udvikler, du beundrer, sad engang lige præcis, hvor du er nu, følte sig spændt og måske lidt overvældet. Det er helt normalt, og det betyder, at du gør det rigtigt! @@ -787,70 +787,70 @@ Du har dækket meget i dag, og det er noget at være stolt af! Nu kommer den sjo [Reading the Docs](assignment.md) -> 💡 **Et lille skub til din opgave**: Jeg ville virkelig elske at se dig udforske nogle værktøjer, vi ikke har dækket endnu! Spring editorerne, browsere og kommandolinjeværktøjerne over, som vi allerede har talt om – der er et helt utroligt univers af fantastiske udviklingsværktøjer derude, som bare venter på at blive opdaget. Kig efter dem, der er aktivt vedligeholdt og har levende, hjælpsomme fællesskaber (de har som regel de bedste tutorials og de mest støttende folk, når du uundgåeligt sidder fast og har brug for en venlig hånd). +> 💡 **Et lille skub til din opgave**: Jeg vil virkelig gerne se dig udforske nogle værktøjer, vi ikke har dækket endnu! Spring editorerne, browsere og kommandolinjeværktøjer over, som vi allerede har talt om – der er et helt utroligt univers af fantastiske udviklingsværktøjer derude, som bare venter på at blive opdaget. Kig efter dem, der aktivt bliver vedligeholdt og har levende, hjælpsomme fællesskaber (de har som regel de bedste tutorials og de mest støttende folk, når du uundgåeligt sidder fast og har brug for en venlig hånd). --- ## 🚀 Din Programmeringsrejse Tidslinje -### ⚡ **Hvad du kan nå på de næste 5 minutter** -- [ ] Bogmærk 2-3 programmeringssprogs hjemmesider, der fangede din opmærksomhed -- [ ] Download Visual Studio Code, hvis du ikke allerede har det -- [ ] Åbn din browsers DevTools (F12) og klik rundt på en hvilken som helst hjemmeside -- [ ] Bliv medlem af et programmeringsfællesskab (Dev.to, Reddit r/webdev, eller Stack Overflow) +### ⚡ **Det kan du nå på de næste 5 minutter** +- [ ] Bogmærk 2-3 programmeringssprogshjemmesider, der fangede din interesse +- [ ] Download Visual Studio Code, hvis du ikke allerede har gjort det +- [ ] Åbn din browsers DevTools (F12) og klik rundt på en vilkårlig hjemmeside +- [ ] Deltag i et programmeringsfællesskab (Dev.to, Reddit r/webdev eller Stack Overflow) -### ⏰ **Hvad du kan nå på denne time** -- [ ] Fuldfør quizzen efter lektionen og reflekter over dine svar -- [ ] Opsæt VS Code med GitHub Copilot-udvidelsen -- [ ] Prøv et "Hello World" eksempel i 2 forskellige programmeringssprog online -- [ ] Se en video om "En dag i livet for en udvikler" på YouTube -- [ ] Påbegynd din detektivarbejde om programmeringssprog (fra udfordringen) +### ⏰ **Det kan du nå på en time** +- [ ] Gennemfør quizzen efter lektionen og tænk over dine svar +- [ ] Sæt VS Code op med GitHub Copilot-udvidelsen +- [ ] Prøv et "Hello World"-eksempel i to forskellige programmeringssprog online +- [ ] Se en video om "En dag i en udviklers liv" på YouTube +- [ ] Start din programmeringssprogsdetektiv-arbejde (fra udfordringen) ### 📅 **Dit uge-lange eventyr** -- [ ] Fuldfør opgaven og udforsk 3 nye udviklingsværktøjer +- [ ] Gennemfør opgaven og udforsk 3 nye udviklingsværktøjer - [ ] Følg 5 udviklere eller programmeringskonti på sociale medier - [ ] Prøv at bygge noget lille i CodePen eller Replit (selv bare "Hello, [Dit Navn]!") -- [ ] Læs et udviklerblogindlæg om nogens programmeringsrejse +- [ ] Læs et udvikler-blogindlæg om nogens kode-rejse - [ ] Deltag i et virtuelt meetup eller se en programmeringssnak - [ ] Begynd at lære dit valgte sprog med online tutorials -### 🗓️ **Din månedslange forvandling** -- [ ] Byg dit første lille projekt (selv en simpel webside tæller!) -- [ ] Bidrag til et open source-projekt (start med dokumentationsrettelser) -- [ ] Mentorer en, der lige er startet på deres programmeringsrejse -- [ ] Lav din udviklerportfolio-hjemmeside -- [ ] Forbind dig med lokale udviklerfællesskaber eller studiegrupper -- [ ] Begynd at planlægge dit næste læringsmål +### 🗓️ **Din måned-lange forvandling** +- [ ] Byg dit første lille projekt (selv en simpel hjemmeside tæller!) +- [ ] Bidrag til et open-source projekt (start med dokumentationsrettelser) +- [ ] Mentorér en, der lige er startet på deres programmeringsrejse +- [ ] Lav din udvikler-portfolio hjemmeside +- [ ] Forbind med lokale udviklerfællesskaber eller studiegrupper +- [ ] Begynd at planlægge din næste læringsmilepæl -### 🎯 **Afsluttende refleksion** +### 🎯 **Sidste refleksionscheck** -**Før du går videre, så tag et øjeblik til at fejre:** -- Hvad er én ting ved programmering, der begejstrede dig i dag? +**Før du går videre, tag et øjeblik til at fejre:** +- Hvad er én ting om programmering, der begejstrede dig i dag? - Hvilket værktøj eller koncept vil du udforske først? -- Hvordan føler du dig ved at starte denne programmeringsrejse? -- Hvilket spørgsmål vil du stille en udvikler lige nu? +- Hvordan har du det med at starte denne programmeringsrejse? +- Hvad er et spørgsmål, du gerne vil stille en udvikler lige nu? ```mermaid journey title Din Selvtillidsopbygningsrejse - section I dag + section I Dag Nysgerrig: 3: You Overvældet: 4: You Begejstret: 5: You - section Denne uge + section Denne Uge Udforskning: 4: You Læring: 5: You Forbindelse: 4: You - section Næste måned + section Næste Måned Opbygning: 5: You Selvsikker: 5: You - Hjælper andre: 5: You + Hjælpe Andre: 5: You ``` -> 🌟 **Husk**: Enhver ekspert var engang en begynder. Enhver seniorudvikler har følt sig præcis som dig lige nu – begejstret, måske lidt overvældet, og bestemt nysgerrig efter, hvad der er muligt. Du er i fantastisk selskab, og denne rejse bliver utroligt spændende. Velkommen til den vidunderlige verden af programmering! 🎉 +> 🌟 **Husk**: Enhver ekspert har engang været nybegynder. Enhver seniorudvikler har engang følt præcis som du gør lige nu – spændt, måske lidt overvældet, og helt sikkert nysgerrig efter, hvad der er muligt. Du er i fantastisk selskab, og denne rejse bliver utroligt spændende. Velkommen til den vidunderlige verden af programmering! 🎉 --- -**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, bedes du være opmærksom på, at automatiske oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger som følge af brugen af denne oversættelse. +**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, bedes du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål 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. \ No newline at end of file diff --git a/translations/da/AGENTS.md b/translations/da/AGENTS.md index 5bd894a83..d9be5e449 100644 --- a/translations/da/AGENTS.md +++ b/translations/da/AGENTS.md @@ -2,36 +2,36 @@ ## Projektoversigt -Dette er et uddannelseslæremiddelforestilling til undervisning i grundlæggende webudvikling for begyndere. Læremidlet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML. +Dette er et uddannelsesforløb-lager til undervisning i webudviklingsgrundlag for begyndere. Forløbet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML. -### Nøglekomponenter +### Hovedkomponenter -- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler -- **Praktiske projekter**: Terrarium, Typingspil, Browserudvidelse, Rumspil, Bankapp, Kodeeditor og AI Chat-assistent -- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger) -- **Flersproget support**: Automatiserede oversættelser til 50+ sprog via GitHub Actions -- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI-projekter) +- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler +- **Praktiske Projekter**: Terrarium, Typing Game, Browserudvidelse, Space Game, Banking App, Code Editor, og AI Chat Assistant +- **Interaktive Quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter-lesson vurderinger) +- **Flersprogssupport**: 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 -- Uddannelsesrepository med lektionbaseret struktur -- Hver lektionsmappe indeholder README, kodeeksempler og løsninger -- Selvstændige projekter i separate mapper (quiz-app, diverse lektionsprojekter) -- Oversættelsessystem ved brug af GitHub Actions (co-op-translator) -- Dokumentation serveres via Docsify og findes som PDF +- Uddannelseslager med lektion-baseret 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 serveret via Docsify og tilgængelig som PDF ## Opsætningskommandoer -Dette repository er primært til konsumering af uddannelsesindhold. For arbejde med specifikke projekter: +Dette lager er primært til forbrug af uddannelsesindhold. For arbejde med specifikke projekter: -### Hovedrepository opsætning +### Hovedlageropsæ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) + +### Quiz App Opsætning (Vue 3 + Vite) ```bash cd quiz-app @@ -40,7 +40,7 @@ npm run dev # Start udviklingsserver npm run build # Byg til produktion npm run lint # Kør ESLint ``` - + ### Bankprojekt API (Node.js + Express) ```bash @@ -50,7 +50,7 @@ npm start # Start API-server npm run lint # Kør ESLint npm run format # Formater med Prettier ``` - + ### Browserudvidelsesprojekter ```bash @@ -58,16 +58,16 @@ cd 5-browser-extension/solution npm install # Følg browser-specifikke instruktioner til indlæsning af udvidelser ``` - -### Rumspilsprojekter + +### Space Game Projekter ```bash cd 6-space-game/solution npm install # Åbn index.html i browseren eller brug Live Server ``` - -### Chatprojekt (Python Backend) + +### Chat Projekt (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -75,208 +75,208 @@ pip install openai # Indstil miljøvariablen GITHUB_TOKEN python api.py ``` - -## Udviklingsworkflow -### For indholdsleverandører +## Udviklingsarbejdsgang + +### For Indholdsbidragydere -1. **Fork repository** til din GitHub-konto -2. **Clone din fork** lokalt -3. **Opret en ny branch** til dine ændringer -4. Foretag ændringer til lektionsindhold eller kodeeksempler -5. Test eventuelle kodeændringer i relevante projektmapper -6. Indsend pull requests i henhold til bidragsretningslinjer +1. **Fork lageret** til din GitHub-konto +2. **Klon din fork** lokalt +3. **Opret en ny gren** til dine ændringer +4. Foretag ændringer til lektionsindhold eller kodeeksempler +5. Test eventuelle kodeændringer i relevante projektmapper +6. Indsend pull requests i henhold til bidragsretningslinjerne -### For lærende +### For Lærende -1. Fork eller klon repository -2. Naviger sekventielt i lektionsmapper -3. Læs README-filer for hver lektion -4. Tag pre-lesson quizzer på https://ff-quizzes.netlify.app/web/ -5. Arbejd gennem kodeeksempler i lektionsmapper -6. Fuldfør opgaver og udfordringer -7. Tag post-lesson quizzer +1. Fork eller klon lageret +2. Naviger til lektionsmapper i rækkefølge +3. Læs README-filer for hver lektion +4. Gennemfør før-lektion quizzer på https://ff-quizzes.netlify.app/web/ +5. Arbejd med kodeeksempler i lektionsmapper +6. Fuldfør opgaver og udfordringer +7. Tag efter-lektion quizzer -### Liveudvikling +### 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 extension til HTML-projekter -- **API-projekter**: Kør `npm start` i respektive API-mapper +- **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 respektive API-mapper ## Testinstruktioner -### Quiz App test +### Quiz App Test ```bash cd quiz-app -npm run lint # Tjek for problemer med kodestil +npm run lint # Tjek for kode stil problemer npm run build # Bekræft at build lykkes ``` - -### Bank API test + +### 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 +node server.js # Bekræft, at serveren starter uden fejl ``` - -### Generel testtilgang -- Dette er et uddannelsesrepository uden omfattende automatiserede tests -- Manuel test fokuserer på: - - Kodeeksempler kører fejlfrit - - Links i dokumentation fungerer korrekt - - Projektbygninger gennemføres succesfuldt - - Eksempler følger bedste praksis +### Generel Testtilgang + +- Dette er et uddannelseslager uden omfattende automatiserede tests +- Manuel test fokuserer på: + - Kodeeksempler kører uden fejl + - Links i dokumentationen fungerer korrekt + - Projekt builds gennemføres succesfuldt + - Eksempler følger bedste praksis -### Pre-indsendelsescheck +### Tjek Før Indsendelse -- Kør `npm run lint` i mapper med package.json -- Bekræft at markdown-links er gyldige -- Test kodeeksempler i browser eller Node.js -- Tjek at oversættelser bevarer korrekt struktur +- Kør `npm run lint` i mapper med package.json +- Bekræft at markdown-links er valide +- Test kodeeksempler i browser eller Node.js +- Kontrollér at oversættelser bevarer korrekt struktur -## Kode-stil retningslinjer +## Kodeformateringsretningslinjer ### JavaScript -- Brug moderne ES6+ syntaks -- Følg standard ESLint konfigurationer leveret i projekterne -- Brug meningsfulde variabel- og funktionsnavne for uddannelsesmæssig klarhed -- Tilføj kommentarer der forklarer koncepter for lærende -- Formater med Prettier hvor konfigureret +- 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 konfigureret ### HTML/CSS -- Semantiske HTML5 elementer -- Responsive designprincipper -- Klare klasse-navnekonventioner -- Kommentarer der forklarer CSS-teknikker for lærende +- Semantiske HTML5-elementer +- Responsive designprincipper +- Klare klassenavnekonventioner +- Kommentarer der forklarer CSS-teknikker for lærende ### Python -- PEP 8 stil retningslinjer -- Klare, uddannelsesmæssige kodeeksempler -- Type hints hvor hjælpsomt for læring +- PEP 8 stilretningslinjer +- Tydelige, pædagogiske kodeeksempler +- Type hints hvor hjælpsomt for læring -### Markdown dokumentation +### Markdown Dokumentation -- Klar overskriftshierarki -- Kodeblokke med sprogspecifikation -- Links til yderligere ressourcer -- Skærmbilleder og billeder i `images/` mapper -- Alt-tekst for billeder for tilgængelighed +- Klar overskriftshierarki +- Kodeblokke med sprogspecifikation +- Links til yderligere ressourcer +- Skærmbilleder og billeder i `images/` mapper +- Alt-tekst for 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 opbevaret i lektionsspecifikke `images/` mapper -- Oversættelser i `translations/{language-code}/` struktur +- Lektioner nummeret 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 -## Build og udrulning +## Byg og Udrul -### Quiz App udrulning (Azure Static Web Apps) +### Quiz App Udrulning (Azure Static Web Apps) -quiz-app er konfigureret til Azure Static Web Apps udrulning: +Quiz-app'en er konfigureret til Azure Static Web Apps udrulning: ```bash cd quiz-app npm run build # Opretter dist/-mappe -# Udruller via GitHub Actions-arbejdsgang ved push til main +# 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` -### Dokumentations PDF generering +Azure Static Web Apps konfiguration: +- **App placering**: `/quiz-app` +- **Output placering**: `dist` +- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +### Dokumentations PDF Generering ```bash npm install # Installer docsify-to-pdf npm run convert # Generer PDF fra docs ``` - -### Docsify dokumentation + +### Docsify Dokumentation ```bash npm install -g docsify-cli # Installer Docsify globalt docsify serve # Server på localhost:3000 ``` - -### Projekt-specifikke builds -Hver projektmappe kan have sin egen build-proces: -- Vue projekter: `npm run build` skaber produktionspakker -- Statisk projekter: Ingen build-step, filer serveres direkte +### Projekt-specifikke Builds + +Hver projektmappe kan have sin egen byggeproces: +- Vue-projekter: `npm run build` skaber produktionspakker +- Statiske projekter: Ingen build-step, server filer direkte -## Pull Request retningslinjer +## Pull Request Retningslinjer -### Titelformat +### Titel Format -Brug klare, beskrivende titler der angiver ændringsområdet: -- `[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` +Brug klare, beskrivende titler der angiver ændringsområdet: +- `[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` -### Nødvendige checks +### Krævede Tjek Før indsendelse af PR: -1. **Kodekvalitet**: - - Kør `npm run lint` i berørte projektmapper - - Ret alle lintfejl og advarsler +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 - - Sikr at der ikke er build-fejl +2. **Build Verifikation**: + - Kør `npm run build` hvis relevant + - Sikr at der ikke er build-fejl -3. **Linkvalidering**: - - Test alle markdown links - - Bekræft at billedreferencer virker +3. **Link Validering**: + - Test alle markdown links + - Bekræft billedreferencer fungerer -4. **Indholdsrevision**: - - Korrekturlæs stavning og grammatik - - Sikr at kodeeksempler er korrekte og uddannelsesmæssige - - Bekræft at oversættelser bevarer oprindelig betydning +4. **Indholdsgennemgang**: + - Korrekturlæs for stave- og grammatikfejl + - Sikr at kodeeksempler er korrekte og pædagogiske + - Bekræft at oversættelser bevarer original betydning ### Bidragskrav -- Accepter Microsoft CLA (automatisk check 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 -- Referer issues i PR-beskrivelse hvis relevant +- Accepter Microsoft CLA (automatisk check 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 +- Referer til issue-numre i PR-beskrivelse hvis relevant -### Review proces +### Gennemgangsproces -- PRs gennemgås af vedligeholdere og community -- Uddannelsesklarhed prioriteres -- Kodeeksempler skal følge gældende bedste praksis -- Oversættelser gennemgås for nøjagtighed og kulturel egnethed +- PR’er gennemgås af vedligeholdere og community +- Pædagogisk klarhed prioriteres +- Kodeeksempler skal følge aktuelle bedste praksisser +- Oversættelser vurderes for nøjagtighed og kulturel tilpasning ## Oversættelsessystem -### Automatisk oversættelse +### Automatisk Oversættelse -- Bruger GitHub Actions med co-op-translator workflow -- Oversætter automatisk til 50+ sprog -- Kildefiler i hovedmapper -- Oversatte filer i `translations/{language-code}/` mapper +- 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 +### Tilføjelse af Manuelle Oversættelsesforbedringer -1. Find fil i `translations/{language-code}/` -2. Foretag forbedringer samtidig med at struktur bevares -3. Sørg for at kodeeksempler forbliver funktionelle -4. Test evt. lokaliseret quizindhold +1. Find fil i `translations/{language-code}/` +2. Foretag forbedringer med bevaret struktur +3. Sikr at kodeeksempler forbliver funktionelle +4. Test eventuelt lokaliseret quiz-indhold -### Oversættelses metadata +### Oversættelses Metadata -Oversatte filer inkluderer metadata header: +Oversatte filer indeholder metadata header: ```markdown ``` - -## Fejlfinding og problemløsning -### Almindelige problemer +## 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 portkonflikter (standard: Vite bruger port 5173) +**Quiz app starter ikke**: +- Tjek Node.js version (v14+ anbefalet) +- Slet `node_modules` og `package-lock.json`, kør `npm install` igen +- Tjek for portkonflikter (standard: Vite bruger port 5173) -**API serveren starter ikke**: -- Bekræft at Node.js version opfylder minimum (node >=10) -- Tjek om port allerede er i brug -- Sørg for alle afhængigheder er installeret med `npm install` +**API server starter ikke**: +- Bekræft Node.js version minimum (node >=10) +- Tjek om port allerede er i brug +- Sikr at alle afhængigheder er installeret med `npm install` -**Browserudvidelse indlæses ikke**: -- Bekræft at manifest.json er korrekt formateret -- Tjek browserens konsol for fejl -- Følg browser-specifikke installationsinstruktioner for udvidelser +**Browserudvidelse loader ikke**: +- Bekræft at manifest.json er korrekt formateret +- Tjek browserkonsol for fejl +- Følg browser-specifikke installationsinstruktioner til udvidelser -**Python chat projekt problemer**: -- Sørg for OpenAI pakken er installeret: `pip install openai` -- Bekræft at GITHUB_TOKEN miljøvariablen er sat -- Check GitHub Models adgangstilladelser +**Python chat projekt problemer**: +- Sikr at OpenAI-pakken er installeret: `pip install openai` +- Bekræft at miljøvariablen GITHUB_TOKEN er sat +- Tjek GitHub Models adgangstilladelser -**Docsify serverer ikke dokumenter**: -- Installer docsify-cli globalt: `npm install -g docsify-cli` -- Kør fra repository rodmappe -- Tjek at `docs/_sidebar.md` eksisterer +**Docsify serverer ikke docs**: +- Installer docsify-cli globalt: `npm install -g docsify-cli` +- Kør fra lagerets rodmappe +- Tjek at `docs/_sidebar.md` findes -### Udviklingsmiljøtips +### Udviklingsmiljø Tips -- Brug VS Code med Live Server extension til HTML projekter -- Installer ESLint og Prettier extensions for konsistent formattering -- Brug browserens DevTools til debugging af JavaScript -- Til Vue projekter, installer Vue DevTools browser extension +- Brug VS Code med Live Server-udvidelsen til HTML-projekter +- Installer ESLint og Prettier-udvidelser for ensartet formatering +- Brug browser DevTools til fejlfinding af JavaScript +- For Vue projekter, installer Vue DevTools browserudvidelsen -### Ydeevne overvejelser +### Ydelsesbetragtninger -- Stort antal oversatte filer (50+ sprog) betyder at fulde clones er store -- Brug shallow clone hvis kun indhold arbejdes på: `git clone --depth 1` -- Ekskluder oversættelser fra søgninger når der arbejdes på engelsk indhold -- Buildprocesser kan være langsomme ved første kørsel (npm install, Vite build) +- Stort antal oversatte filer (50+ sprog) betyder at komplette kloner er store +- Brug shallow clone hvis du kun arbejder med indhold: `git clone --depth 1` +- Udeluk oversættelser fra søgninger ved arbejde med engelsk indhold +- Byggeprocesser kan være langsomme ved første kørsel (npm install, Vite build) -## Sikkerhedsovervejelser +## Sikkerhedsbetragtninger -### Miljøvariabler +### Miljøvariable -- API nøgler må aldrig committes til repository -- Brug `.env` filer (allerede i `.gitignore`) -- Dokumenter nødvendige miljøvariabler i projektets README +- API nøgler må aldrig committes til lager +- Brug `.env` filer (allerede i `.gitignore`) +- Dokumenter nødvendige miljøvariable i projekt-READMEs -### Python projekter +### Python Projekter -- Brug virtuelle miljøer: `python -m venv venv` -- Hold afhængigheder opdaterede -- GitHub tokens skal have minimal nødvendige tilladelser +- Brug virtuelle miljøer: `python -m venv venv` +- Hold afhængigheder opdaterede +- GitHub tokens skal have minimale nødvendige rettigheder -### GitHub Models adgang +### GitHub Models Adgang -- Personlige Access Tokens (PAT) kræves for GitHub Models -- Tokens skal gemmes som miljøvariabler -- Commit aldrig tokens eller credentials +- Personlige adgangstokens (PAT) kræves til GitHub Models +- Tokens skal gemmes som miljøvariable +- Committ aldrig tokens eller login-oplysninger -## Yderligere noter +## Yderligere Bemærkninger ### Målgruppe -- Fuldstændige begyndere til webudvikling -- Studerende og selvstuderende -- Lærere der bruger curriculum i klasseværelser -- Indhold designet for tilgængelighed og gradvis færdighedsopbygning +- Fulde begyndere til webudvikling +- Studerende og selv-studerende +- Lærere der bruger forløbet i klasseværelser +- Indhold designet til tilgængelighed og gradvis færdighedsopbygning ### Uddannelsesfilosofi -- Projektbaseret læringstilgang -- Hyppige videnschecks (quizzer) -- Praktiske kodningsøvelser -- Eksempler på virkelige anvendelser -- Fokus på grundlæggende før frameworks +- Projektbaseret læringstilgang +- Hyppige videnschecks (quizzer) +- Praktiske kodningsøvelser +- Eksempler på virkelige anvendelser +- Fokus på grundlæggende før frameworks -### Repository vedligeholdelse +### Lager Vedligeholdelse -- Aktivt community af lærende og bidragydere -- Regelmæssige opdateringer af afhængigheder og indhold -- Issues og diskussioner overvåges af vedligeholdere -- Oversættelsesopdateringer automatiseret via GitHub Actions +- Aktivt community af lærende og bidragydere +- Regelmæssige opdateringer til afhængigheder og indhold +- Issues og diskussioner overvåget af vedligeholdere +- Oversættelsesopdateringer automatiseret via GitHub Actions -### Relaterede ressourcer +### 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) anbefales til lærende -- Yderligere kurser: Generativ AI, Data Science, ML, IoT curriculum tilgængelige +- [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 +### Arbejde med Specifikke Projekter -For detaljerede instruktioner om individuelle projekter, se README-filer i: -- `quiz-app/README.md` - Vue 3 quiz applikation -- `7-bank-project/README.md` - Bankapplikation med autentifikation -- `5-browser-extension/README.md` - Udvikling af browserudvidelse -- `6-space-game/README.md` - Canvas-baseret spiludvikling -- `9-chat-project/README.md` - AI chat assistent projekt +For detaljerede instruktioner om enkelte projekter, se README-filerne i: +- `quiz-app/README.md` - Vue 3 quiz applikation +- `7-bank-project/README.md` - Banking app med autentificering +- `5-browser-extension/README.md` - Browserudvidelsesudvikling +- `6-space-game/README.md` - Canvas-baseret spiludvikling +- `9-chat-project/README.md` - AI chatassistent projekt -### Monorepo struktur +### Monorepo Struktur -Selvom det ikke er et traditionelt monorepo, indeholder dette repository 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 repo for fuld curriculum oplevelse +Selvom det ikke er et traditionelt monorepo, indeholder dette lager flere uafhængige projekter: +- Hver lektion er selvstændig +- Projekterne deler ikke afhængigheder +- Arbejd på individuelle projekter uden at påvirke andre +- Klon hele repo for fuldt forløbsoplevelse --- -**Ansvarsfraskrivelse**: -Dette dokument er 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 oprindelige dokument på dets modersmål 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. +**Ansvarsfraskrivelse**: +Dette dokument er 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, bedes du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. Ved kritiske informationer anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/README.md b/translations/da/README.md index e756cd1cd..269374da0 100644 --- a/translations/da/README.md +++ b/translations/da/README.md @@ -10,71 +10,81 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Webudvikling for begyndere - Et pensum +# Webudvikling for begyndere - en læseplan -Lær grundlæggende webudvikling med vores 12-ugers omfattende kursus fra Microsoft Cloud Advocates. Hver af de 24 lektioner dykker ned i JavaScript, CSS og HTML gennem praktiske projekter som terrarier, browserudvidelser og rumspil. Deltag i quizzer, diskussioner og praktiske opgaver. Forbedr dine færdigheder og optimer din viden med vores effektive projektbaserede pædagogik. Start din kodningsrejse i dag! +Lær grundlæggende webudvikling med vores 12-ugers omfattende kursus af Microsoft Cloud Advocates. Hver af de 24 lektioner dykker ned i JavaScript, CSS og HTML gennem praktiske projekter som terrarier, browserudvidelser og rumspil. Deltag i quizzer, diskussioner og praktiske opgaver. Forbedr dine færdigheder og optimer din vidensfastholdelse med vores effektive projektbaserede pædagogik. Start din kodningsrejse i dag! Deltag i Azure AI Foundry Discord-fællesskabet [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) Følg disse trin for at komme i gang med at bruge disse ressourcer: -1. **Fork depotet**: Klik på [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Deltag i Azure AI Foundry Discord og mød eksperter og andre udviklere**](https://discord.com/invite/ByRwuEEgH4) +1. **Fork Repositoryet**: Klik [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Klon Repositoryet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Deltag i Azure AI Foundry Discord og mød eksperter og medudviklere**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Flersproget support -#### Understøttet via GitHub Action (Automatiseret & Altid Opdateret) +#### Understøttet via GitHub Action (Automatiseret og altid opdateret) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](./README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) > **Foretrækker du at klone lokalt?** - -> Dette repository indeholder 50+ sprogoversættelser, som betydeligt øger downloadstørrelsen. For at klone uden oversættelser, brug sparsomet udtjekning: +> +> Dette repository indeholder 50+ sprogoversættelser, hvilket øger downloadstørrelsen betydeligt. For at klone uden oversættelser skal du bruge spars checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> > Dette giver dig alt, hvad du behøver for at gennemføre kurset med en meget hurtigere download. -**Hvis du ønsker at få tilføjet yderligere oversættelsessprog, findes de understøttede sprog [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Hvis du ønsker at få understøttelse af yderligere oversættelsessprog, er de listet [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Er du studerende?_ -Besøg [**Student Hub siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder begynderressourcer, studentpakker og endda måder at få en gratis certifikatkupon på. Dette er siden, du vil bogmærke og tjekke fra tid til anden, da vi månedligt udskifter indhold. +Besøg [**Student Hub siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), hvor du finder begynderressourcer, studenterpakker og endda muligheder for at få et gratis certifikatkupon. Dette er siden, du vil bogmærke og tjekke indimellem, da vi skifter indhold månedligt. ### 📣 Meddelelse - Nye GitHub Copilot Agent mode udfordringer at gennemføre! -Ny udfordring tilføjet, kig efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring for dig at fuldføre ved at bruge GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke bare generere tekst, men også skabe og redigere filer, køre kommandoer med mere. +Ny udfordring tilføjet, kig efter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny udfordring, som du skal gennemføre ved hjælp af GitHub Copilot og Agent mode. Hvis du ikke har brugt Agent mode før, kan den ikke kun generere tekst, men også oprette og redigere filer, køre kommandoer og mere. -### 📣 Meddelelse - _Nyt projekt at bygge med Generativ AI_ +### 📣 Meddelelse - _Nyt projekt at bygge ved hjælp af Generativ AI_ -Nyt AI-assistent projekt lige tilføjet, tjek det ud [projekt](./9-chat-project/README.md) +Nyt AI Assistant projekt er netop tilføjet, tjek det ud [projekt](./9-chat-project/README.md) -### 📣 Meddelelse - _Nyt pensum_ om Generativ AI for JavaScript er netop udgivet +### 📣 Meddelelse - _Ny læseplan_ om Generativ AI for JavaScript er netop udgivet -Gå ikke glip af vores nye pensum om Generativ AI! +Gå ikke glip af vores nye læseplan for Generativ AI! Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang! ![Background](../../translated_images/da/background.148a8d43afde5730.webp) - Lektioner, der dækker alt fra det grundlæggende til RAG. -- Interager med historiske karakterer ved hjælp af GenAI og vores følgesvend app. +- Interagér med historiske figurer ved hjælp af GenAI og vores følgesvend-app. - Sjov og engagerende fortælling, du vil rejse i tiden! ![character](../../translated_images/da/character.5c0dd8e067ffd693.webp) -Hver lektion inkluderer en opgave, en videnstest og en udfordring for at guide dig i læringsemner som: +Hver lektion inkluderer en opgave, en videnscheck og en udfordring, der guider dig i at lære emner som: - Prompting og prompt engineering -- Tekst- og billedapp generation +- Tekst- og billedappgenerering - Søgeapps Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at komme i gang! @@ -83,130 +93,129 @@ Besøg [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for at k ## 🌱 Kom godt i gang -> **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan I kan bruge dette pensum. Vi modtager meget gerne jeres feedback [i vores diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Lærere**, vi har [inkluderet nogle forslag](for-teachers.md) til, hvordan I kan bruge denne læseplan. Vi vil meget gerne have jeres feedback [i vores diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Elever](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver lektion, start med en quiz før lektion og følg op med at læse lektionens materiale, fuldføre de forskellige aktiviteter og tjek din forståelse med quiz efter lektionen. +**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver lektion, start med en pre-lecture quiz og følg op med at læse forelæsningsmaterialet, gennemføre de forskellige aktiviteter og tjek din forståelse med post-lecture quizzen. -For at forbedre din læringsoplevelse, forbind med dine kammerater og arbejd sammen om projekterne! Diskussioner opfordres i vores [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), hvor vores moderatorhold vil være tilgængelige for at svare på dine spørgsmål. +For at forbedre din læringsoplevelse, forbind med dine jævnbyrdige for at arbejde på projekterne sammen! Diskussioner opfordres i vores [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), hvor vores team af moderatorer vil være tilgængelige for at besvare dine spørgsmål. -For at udvikle din uddannelse yderligere anbefaler vi stærkt at udforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for yderligere studiematerialer. +For at fremme din uddannelse, anbefaler vi kraftigt at udforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for yderligere studiematerialer. ### 📋 Opsætning af dit miljø -Dette pensum har et udviklingsmiljø klar til brug! Når du går i gang, kan du vælge at køre pensum i en [Codespace](https://github.com/features/codespaces/) (_et browserbaseret miljø uden installation_), eller lokalt på din computer ved hjælp af en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Denne læseplan har et udviklingsmiljø klar til brug! Når du kommer i gang, kan du vælge at køre læseplanen i en [Codespace](https://github.com/features/codespaces/) (_et browser-baseret miljø, hvor ingen installation er nødvendig_), eller lokalt på din computer ved hjælp af en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Opret dit repository -For at du nemt kan gemme dit arbejde anbefales det, at du opretter din egen kopi af dette repository. Det kan du gøre ved at klikke på knappen **Use this template** øverst på siden. Dette vil oprette et nyt repository på din GitHub-konto med en kopi af pensum. +For at du nemt kan gemme dit arbejde anbefales det, at du opretter din egen kopi af dette repository. Det kan du gøre ved at klikke på **Use this template** knappen øverst på siden. Dette vil oprette et nyt repository i din GitHub-konto med en kopi af læseplanen. Følg disse trin: -1. **Fork depotet**: Klik på knappen "Fork" øverst til højre på denne side. -2. **Klon depotet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Fork Repositoryet**: Klik på "Fork" knappen øverst til højre på denne side. +2. **Klon Repositoryet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Kør pensum i en Codespace +#### Køre læseplanen i en Codespace -I din kopi af dette repository, som du har oprettet, klik på knappen **Code** og vælg **Open with Codespaces**. Dette vil oprette en ny Codespace, som du kan arbejde i. +I din kopi af dette repository, som du har oprettet, klik på **Code** knappen og vælg **Open with Codespaces**. Dette opretter en ny Codespace til dig at arbejde i. ![Codespace](../../translated_images/da/createcodespace.0238bbf4d7a8d955.webp) -#### Kør pensum lokalt på din computer - -For at køre dette pensum lokalt på din computer, skal du bruge en teksteditor, en browser og et kommandolinjeværktøj. Vores første lektion, [Introduktion til programmeringssprog og værktøjer](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide dig gennem forskellige muligheder for hver af disse værktøjer, så du kan vælge det, der passer bedst til dig. +#### Køre læseplanen lokalt på din computer -Vi anbefaler at bruge [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din editor, som også har en indbygget [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan downloade Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +For at køre denne læseplan lokalt på din computer, skal du bruge en teksteditor, en browser og et kommandolinjeværktøj. Vores første lektion, [Introduktion til programmeringssprog og handelsværktøjer](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide dig gennem forskellige valgmuligheder for hvert af disse værktøjer, så du kan vælge, hvad der passer bedst til dig. - -1. Klon dit repository til din computer. Det kan du gøre ved at klikke på knappen **Code** og kopiere URL’en: +Vi anbefaler at bruge [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din editor, som også har et indbygget [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan downloade Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Klon dit repository til din computer. Det kan du gøre ved at klikke på **Code**-knappen og kopiere URL'en: [CodeSpace](./images/createcodespace.png) - Åbn derefter [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), og kør følgende kommando, hvor du erstatter `` med den URL, du lige har kopieret: + + Åbn derefter [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) og kør følgende kommando, hvor du erstatter `` med den URL, du lige har kopieret: ```bash git clone ``` -2. Åbn mappen i Visual Studio Code. Det kan du gøre ved at klikke på **File** > **Open Folder** og vælge den mappe, du lige har klonet. +2. Åbn mappen i Visual Studio Code. Det kan du gøre ved at klikke på **File** > **Open Folder** og vælge den mappe, du netop har klonet. > Anbefalede Visual Studio Code-udvidelser: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for at forhåndsvise HTML-sider i Visual Studio Code +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for at kunne forhåndsvise HTML-sider i Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for at hjælpe dig med at skrive kode hurtigere ## 📂 Hver lektion inkluderer: -- valgfri sketchnote +- valgfri skitsetegning - valgfri supplerende video -- forudgående opvarmningsquiz før lektion -- skriftlig lektion -- for projektbaserede lektioner, trin-for-trin vejledninger til, hvordan man bygger projektet -- vidensprøver +- opvarmningsquiz før lektionen +- skreven lektion +- for projektbaserede lektioner, trin-for-trin vejledninger om, hvordan man bygger projektet +- videnschecks - en udfordring - supplerende læsning - opgave -- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/) +- [quiz efter lektion](https://ff-quizzes.netlify.app/web/) -> **En note om quizzer**: Alle quizzer findes i Quiz-app mappen, i alt 48 quizzer med tre spørgsmål hver. De er tilgængelige [her](https://ff-quizzes.netlify.app/web/). Quiz-appen kan køres lokalt eller implementeres til Azure; følg instruktionerne i `quiz-app` mappen. +> **En note om quizzes**: Alle quizzes findes i Quiz-app mappen, i alt 48 quizzes med tre spørgsmål hver. De er tilgængelige [her](https://ff-quizzes.netlify.app/web/); quiz-appen kan køres lokalt eller implementeres til Azure; følg instruktionerne i `quiz-app` mappen. ## 🗃️ Lektioner -| | Projekt Navn | Koncepter undervist | Læringsmål | Linket Lektion | Forfatter | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | -| 01 | Kom godt i gang | Introduktion til programmering og værktøjer | Lær de grundlæggende principper bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere | [Introduktion til programmeringssprog og værktøjer](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Kom godt i gang | Grundlæggende om GitHub, inklusiv samarbejde i teams | Hvordan man bruger GitHub i sit projekt, hvordan man samarbejder med andre om en kodebase | [Introduktion til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Kom godt i gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | [Grundlæggende om Tilgængelighed](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Grundlæggende | JavaScript datatyper | Grundlæggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Grundlæggende | Funktioner og metoder | Lær om funktioner og metoder til at styre en applikations logik | [Funktioner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher | -| 06 | JS Grundlæggende | Beslutninger med JS | Lær hvordan man laver betingelser i din kode ved hjælp af beslutningstagning | [Beslutningstagning](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Grundlæggende | Arrays og loops | Arbejd med data ved hjælp af arrays og loops i JavaScript | [Arrays og loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Byg HTML for at skabe et online terrarium med fokus på layout | [Introduktion til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Byg CSS for at style det online terrarium, med fokus på CSS-grundlæggende funktioner inklusiv at gøre siden responsiv | [Introduktion til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Byg JavaScript for at få terrariet til at fungere som en drag/drop interface, med fokus på closures og DOM-manipulation | [JavaScript Closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et skrive-spil | Lær hvordan du bruger tastaturhændelser til at styre logikken i din JavaScript-app | [Begivenhedsdrevet programmering](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie, og hvordan man scaffolder de første elementer i en browserudvidelse | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygge en form, kalde API og gemme variabler i lokal lagring | Byg JavaScript-elementerne i din browserudvidelse for at kalde en API ved hjælp af variabler gemt i lokal lagring | [API'er, formularer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Baggrundsprocesser i browseren, web performance | Brug browserens baggrundsprocesser til at håndtere udvidelsens ikon; lær om webperformance og nogle optimeringer | [Baggrundsopgaver og ydeevne](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv ved hjælp af både klasser og sammensætning samt Pub/Sub-mønsteret, som forberedelse til at bygge et spil | [Introduktion til avanceret spiludvikling](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning på canvas | Lær om Canvas API, der bruges til at tegne elementer på en skærm | [Tegning på Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skærmen | Opdag, hvordan elementer kan få bevægelse ved hjælp af kartesiske koordinater og Canvas API | [Flytning af elementer](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisiondetektion | Få elementer til at kollidere og reagere på hinanden ved tastetryk og lav en cooldown-funktion for at sikre spillets ydeevne | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Holde styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | [Pointoptælling](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Afslutte og genstarte spillet | Lær om hvordan man afslutter og genstarter spillet, inklusiv oprydning af assets og nulstilling af variable | [Afslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-skabeloner og ruter i en webapp | Lær hvordan man skaber fundamentet for en multipages website-arkitektur med routing og HTML-skabeloner | [HTML-skabeloner og ruter](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Byg en Login og Registreringsformular | Lær om at bygge formularer og håndtere valideringsrutiner | [Formularer](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder til at hente og bruge data | Hvordan data flyder ind og ud af din app, hvordan man henter, gemmer og bortskaffer det | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepter om state management | Lær hvordan din app bevarer state og hvordan man styrer den programmatisk | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Arbejde med VScode | Lær hvordan man bruger en kodeeditor | [Brug VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Arbejde med AI | Lær hvordan man bygger sin egen AI-assistent | [AI Assistant projekt](./9-chat-project/README.md) | Chris | +| | Projektnavn | Gennemgåede Begreber | Læringsmål | Linket Lektion | Forfatter | +| :-: | :------------------------------------------------------: | :------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Kom I Gang | Introduktion til programmering og værktøjer | Lær de grundlæggende elementer bag de fleste programmeringssprog og om software, der hjælper professionelle udviklere med deres arbejde | [Intro til programmeringssprog og værktøjer](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Kom I Gang | Grundlæggende GitHub, inkl. samarbejde i team | Hvordan man bruger GitHub i sit projekt, og hvordan man samarbejder med andre om en kodebase | [Intro til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Kom I Gang | Tilgængelighed | Lær det grundlæggende om webtilgængelighed | [Tilgængelighedsgrundlag](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Grundlæggende | JavaScript Datatyper | Grundlæggende JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Grundlæggende | Funktioner og Metoder | Lær om funktioner og metoder til at styre et programs logik | [Funktioner og Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher | +| 06 | JS Grundlæggende | Beslutningstagning med JS | Lær at skabe betingelser i din kode ved hjælp af beslutningsmetoder | [Beslutningstagning](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Grundlæggende | Arrays og Løkker | Arbejd med data ved brug af arrays og løkker i JavaScript | [Arrays og Løkker](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Byg HTML'en til at skabe et online terrarium med fokus på opbygning af layout | [Introduktion til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Byg CSS'en til at style det online terrarium med fokus på det grundlæggende i CSS, inkl. responsivt design | [Introduktion til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulation | Byg JavaScript til at få terrariet til at fungere som en drag/drop-grænseflade med fokus på closures og DOM-manipulation | [JavaScript Closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Byg et Typingspil | Lær at bruge tastaturbegivenheder til at styre logikken i din JavaScript-app | [Eventdrevet programmering](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbejde med browsere | Lær hvordan browsere fungerer, deres historie og hvordan man laver de første elementer i en browser-udvidelse | [Om browsere](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Byg et formular, kald et API og gem variabler i lokal lagring | Byg JavaScript-elementerne til din browserudvidelse for at kalde et API ved brug af variabler gemt i lokal lagring | [API'er, formularer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Baggrundsprocesser i browseren, webperformance | Brug browserens baggrundsprocesser til at styre udvidelsens ikon; lær om webperformance og nogle optimeringer for at forbedre | [Baggrundsopgaver og performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Mere avanceret spiludvikling med JavaScript | Lær om arv via både klasser og komposition samt Pub/Sub-mønsteret som forberedelse til et spil | [Introduktion til avanceret spiludvikling](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning til canvas | Lær om Canvas API, som bruges til at tegne elementer på en skærm | [Tegning til canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Flyt elementer rundt på skærmen | Opdag hvordan elementer kan bevæge sig vha. kartesiske koordinater og Canvas API | [Flyt elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionregistrering | Få elementer til at kollidere og reagere på hinanden ved tastetryk og tilføj en cooldown-funktion for at sikre spillets ydeevne | [Kollisionregistrering](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Hold styr på point | Udfør matematiske beregninger baseret på spillets status og præstation | [Hold styr på point](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Afslutning og genstart af spillet | Lær om at afslutte og genstarte spillet, inkl. oprydning af ressourcer og nulstilling af variabler | [Afslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-skabeloner og routes i en webapp | Lær hvordan man skaber arkitekturen for et multipages website ved hjælp af routing og HTML-skabeloner | [HTML-skabeloner og routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Byg en login- og registreringsformular | Lær om hvordan man laver formularer og håndterer valideringsrutiner | [Formularer](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder til hentning og brug af data | Hvordan data flyder ind og ud af din app, hvordan man henter, gemmer og bortskaffer det | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepter for tilstandsadministration | Lær hvordan din app bevarer tilstand og hvordan man programmerer styring af denne | [Tilstandsadministration](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Arbejde med VScode | Lær hvordan man bruger en kodeeditor | [Brug af VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Arbejde med AI | Lær hvordan du bygger din egen AI-assistent | [AI Assistent projekt](./9-chat-project/README.md) | Chris | ## 🏫 Pædagogik -Vores pensum er designet med to nøgleprincipper i pædagogik: +Vores læreplan er designet med to centrale pædagogiske principper for øje: * projektbaseret læring -* hyppige quizzer +* hyppige quizzes -Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, som nutidens webudviklere bruger. Studerende får mulighed for at udvikle praktisk erfaring ved at bygge et skrive-spil, et virtuelt terrarium, en miljøvenlig browserudvidelse, et rum-invader stil-spil og en bank-app til virksomheder. Ved slutningen af serien vil eleverne have opnået en solid forståelse for webudvikling. +Programmet underviser i grundlæggende JavaScript, HTML og CSS samt de nyeste værktøjer og teknikker, som nutidens webudviklere bruger. Studerende vil få mulighed for at opnå praktisk erfaring ved at bygge et typing-spil, virtuelt terrarium, miljøvenligt browser-udvidelse, rum-invader-stil spil og en bankapp til virksomheder. Ved slutningen af serien vil studerende have opnået en solid forståelse af webudvikling. -> 🎓 Du kan tage de første par lektioner i dette pensum som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn! +> 🎓 Du kan tage de første lektioner i denne læreplan som en [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn! -Ved at sikre, at indholdet stemmer overens med projekterne, bliver processen mere engagerende for eleverne, og fastholdelsen af koncepterne forbedres. Vi har også skrevet flere introduktionslektioner i JavaScript grundlæggende for at introducere begreber, kombineret med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen af videotutorials, hvor nogle af forfatterne har bidraget til dette pensum. +Ved at sikre, at indholdet er knyttet til projekter, bliver processen mere engagerende for studerende, og fastholdelsen af begreber styrkes. Vi har desuden skrevet flere introducerende lektioner i JavaScript grundlæggende for at introducere begreber, suppleret med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen af videotutorials, hvoraf nogle forfattere bidrog til denne læreplan. -Derudover sætter en quiz med lav risiko før en klasse intentionen hos eleven mod at lære et emne, mens en anden quiz efter klassen sikrer yderligere fastholdelse. Dette pensum er designet til at være fleksibelt og sjovt og kan tages som helhed eller delvist. Projekterne starter småt og bliver gradvist mere komplekse ved slutningen af 12-ugers cyklussen. +Derudover sætter en lavrisiko quiz før en klasse målrettet elevens intention om at lære et emne, mens en anden quiz efter klasse sikrer yderligere fastholdelse. Denne læreplan er designet til at være fleksibel og sjov og kan tages helt eller delvist. Projekterne starter småt og bliver gradvist mere komplekse hen imod slutningen af den 12-ugers cyklus. -Selvom vi bevidst har undgået at introducere JavaScript-rammer for at koncentrere os om de grundlæggende færdigheder, der er nødvendige som webudvikler, før man tager en ramme i brug, kunne et godt næste skridt efter at have gennemført dette pensum være at lære om Node.js via en anden samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Selvom vi har undgået at introducere JavaScript-rammeværk for at fokusere på de grundlæggende færdigheder, der kræves som webudvikler, før man tager et rammeværk i brug, vil et godt næste skridt i denne læreplans afslutning være at lære om Node.js via en anden samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Besøg vores [Code of Conduct](CODE_OF_CONDUCT.md) og [Contributing](CONTRIBUTING.md) retningslinjer. Vi byder konstruktiv feedback velkommen! +> Besøg vores [Adfærdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md) retningslinjer. Vi ser frem til din konstruktive feedback! ## 🧭 Offline adgang -Du kan køre denne dokumentation offline ved at bruge [Docsify](https://docsify.js.org/#/). Fork dette repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og i rodmappen for dette repo, skriv `docsify serve`. Hjemmesiden vil blive serveret på port 3000 på din localhost: `localhost:3000`. +Du kan køre denne dokumentation offline ved at bruge [Docsify](https://docsify.js.org/#/). Fork dette repo, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskine, og skriv derefter i rodmappen af dette repo `docsify serve`. Websitet vil blive serveret på port 3000 på din localhost: `localhost:3000`. ## 📘 PDF +En PDF med alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -En PDF af alle lektionerne kan findes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +## 🎒 Andre Kurser -## 🎒 Andre kurser Vores team producerer andre kurser! Tjek dem ud: @@ -216,7 +225,7 @@ Vores team producerer andre kurser! Tjek dem ud: [![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agenter +### Azure / Edge / MCP / Agents [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) @@ -224,7 +233,7 @@ Vores team producerer andre kurser! Tjek dem ud: --- -### Generativ AI Serie +### Generative AI Series [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -232,7 +241,7 @@ Vores team producerer andre kurser! Tjek dem ud: --- -### Grundlæggende Læring +### Core Learning [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -243,7 +252,7 @@ Vores team producerer andre kurser! Tjek dem ud: --- -### Copilot Serie +### Copilot Series [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) @@ -251,21 +260,21 @@ Vores team producerer andre kurser! Tjek dem ud: ## Få Hjælp -Hvis du går i stå eller har spørgsmål om at bygge AI-apps. Deltag sammen med andre elever og erfarne udviklere i diskussioner om MCP. Det er et støttende fællesskab, hvor spørgsmål er velkomne, og viden deles frit. +Hvis du sidder fast eller har spørgsmål om at bygge AI-apps. Deltag sammen med andre lærende og erfarne udviklere i diskussioner om MCP. Det er et støttende fællesskab, hvor spørgsmål er velkomne, og viden deles frit. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Hvis du har produktfeedback eller oplever fejl under byggeriet, besøg: +Hvis du har produktfeedback eller oplever fejl under udvikling, besøg: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Licens -Dette repository er licenseret under MIT-licensen. Se filen [LICENSE](../../LICENSE) for mere information. +Dette arkiv er licenseret under MIT-licensen. Se [LICENSE](../../LICENSE)-filen for mere information. --- **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 opstår som følge af brugen af denne oversættelse. +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 oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/fi/.co-op-translator.json b/translations/fi/.co-op-translator.json index 1d03ea269..1efcfb5b0 100644 --- a/translations/fi/.co-op-translator.json +++ b/translations/fi/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-04T01:14:39+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T18:28:51+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "fi" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:37:08+00:00", + "translation_date": "2026-03-06T18:32:27+00:00", "source_file": "AGENTS.md", "language_code": "fi" }, @@ -516,8 +516,8 @@ "language_code": "fi" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:32:01+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T18:24:56+00:00", "source_file": "README.md", "language_code": "fi" }, diff --git a/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 020d08458..9fd7b97b3 100644 --- a/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/fi/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ -# Johdatus ohjelmointikieliin ja moderneihin kehittäjätyökaluihin +# Johdanto ohjelmointikieliin ja moderneihin kehittäjätyökaluihin + +Hei siellä, tuleva kehittäjä! 👋 Saanko kertoa sinulle jotain, mikä saa minut yhä joka päivä kylmilleen? Olet kohta huomaamassa, että ohjelmointi ei ole pelkästään tietokoneista – se on kuin todellisia yliluonnollisia voimia, joiden avulla voit toteuttaa villeimmätkin ideasi! -Hei tuleva kehittäjä! 👋 Voinko kertoa sinulle jotain, mikä saa minut edelleen innostumaan joka päivä? Olet juuri astumassa maailmaan, jossa ohjelmointi ei ole pelkästään tietokoneiden kanssa puuhastelua – se on supervoima, jonka avulla voit toteuttaa villeimmät ideasi! +Tiedätkö sen hetken, kun käytät lempisovellustasi ja kaikki vain toimii täydellisesti? Kun napautat painiketta ja tapahtuu jotain täysin taianomaista, joka saa sinut sanomaan "vau, miten he TEKIVÄT sen?" No, joku aivan kuten sinä – todennäköisesti suosikkikahvilassaan klo 2 aamulla kolmannen espressonsa kanssa – kirjoitti koodin, joka loi tuon taian. Ja tässä on se, mikä räjäyttää mielesi: tämän oppitunnin lopussa et pelkästään ymmärrä, miten he sen tekivät, vaan haluat itse kokeilla sitä heti! -Tiedätkö sen hetken, kun käytät suosikkisovellustasi ja kaikki toimii täydellisesti? Kun painat nappia ja tapahtuu jotain aivan maagista, joka saa sinut ajattelemaan: "Vau, miten he TEKIVÄT tämän?" No, joku aivan kuten sinä – todennäköisesti istuen suosikkikahvilassaan aamuyöllä kolmannen espressonsa kanssa – kirjoitti koodin, joka loi tuon taian. Ja tässä tulee se, mikä räjäyttää mielesi: tämän oppitunnin lopussa et vain ymmärrä, miten he sen tekivät, vaan sinulla on valtava halu kokeilla sitä itse! +Kuule, ymmärrän täysin, jos ohjelmointi tuntuu nyt pelottavalta. Kun aloitin, luulin oikeasti, että täytyy olla jonkinlainen matematiikkagenius tai olla koodannut viisivuotiaasta lähtien. Mutta tässä se, mikä muutti täysin näkemykseni: ohjelmointi on kuin uuden kielen puhumisen opettelua. Aloitat "hei" ja "kiitos" -sanoilla, sitten siirryt kahvin tilaamiseen, ja ennen kuin huomaatkaan, käyt syvällisiä filosofisia keskusteluja! Paitsi että tässä tapauksessa keskustelet tietokoneiden kanssa, ja rehellisesti? Ne ovat kärsivällisimmät keskustelukumppanit, joita voit kuvitella – ne eivät koskaan arvostele virheitäsi ja ne ovat aina innoissaan yrittämään uudelleen! -Kuule, ymmärrän täysin, jos ohjelmointi tuntuu juuri nyt pelottavalta. Kun aloitin, ajattelin rehellisesti, että sinun täytyy olla jonkinlainen matemaattinen nero tai että sinun olisi pitänyt koodata jo viisivuotiaasta lähtien. Mutta tässä on se, mikä muutti täysin näkemykseni: ohjelmointi on aivan kuin uuden kielen oppimista. Aloitat "hei" ja "kiitos", sitten opit tilaamaan kahvia, ja ennen kuin huomaatkaan, käyt syvällisiä filosofisia keskusteluja! Paitsi että tässä tapauksessa keskustelet tietokoneiden kanssa, ja rehellisesti? Ne ovat kärsivällisimpiä keskustelukumppaneita, joita sinulla koskaan tulee olemaan – ne eivät koskaan tuomitse virheitäsi ja ovat aina valmiita yrittämään uudelleen! - -Tänään tutustumme uskomattomiin työkaluihin, jotka tekevät modernista web-kehityksestä paitsi mahdollisen, myös todella koukuttavan. Puhun samoista editoreista, selaimista ja työnkuluista, joita Netflixin, Spotifyn ja suosikkisi indie-sovellusstudion kehittäjät käyttävät joka päivä. Ja tässä tulee se osuus, joka saa sinut tanssimaan ilosta: suurin osa näistä ammattitason, teollisuusstandardin työkaluista on täysin ilmaisia! +Tänään tutustumme uskomattomiin työkaluihin, jotka tekevät modernista verkkokehityksestä paitsi mahdollista, myös vakavasti koukuttavaa. Puhun juuri samoista editoreista, selaimista ja työnkuluista, joita Netflixin, Spotifyn ja lempisi itsenäisen sovellusstudion kehittäjät käyttävät joka päivä. Ja tässä on osa, joka saa sinut tanssimaan ilosta: useimmat näistä ammattimaisista, alan standardityökaluista ovat täysin ilmaisia! ![Intro Programming](../../../../translated_images/fi/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title Ohjelmointimatkasi tänään + section Löydä + Mikä on ohjelmointi: 5: You + Ohjelmointikielet: 4: You + Työkalujen yleiskatsaus: 5: You + section Tutki + Koodieditorit: 4: You + Selaimet & kehitystyökalut: 5: You + Komentorivi: 3: You + section Harjoittele + Kielenetsivä: 4: You + Työkalujen tutkiminen: 5: You + Yhteisön yhdistäminen: 5: You ``` +## Katsotaan, mitä jo osaat! -## Katsotaan, mitä jo tiedät! +Ennen kuin hypätään hauskoihin juttuihin, olen utelias – mitä sinä jo tiedät tästä ohjelmoinnin maailmasta? Ja kuule, jos katsot näitä kysymyksiä ajatellen "minulla ei kirjaimellisesti ole mitään käsitystä tästä," se ei ole vain okei, se on täydellistä! Se tarkoittaa, että olet juuri oikeassa paikassa. Ajattele tätä testiä kuin alkulämmittelynä ennen treeniä – lämmittelemme vain aivolihaksiasi! -Ennen kuin sukellamme hauskoihin juttuihin, olen utelias – mitä tiedät jo tästä ohjelmointimaailmasta? Ja kuuntele, jos katsot näitä kysymyksiä ja ajattelet "Minulla ei ole aavistustakaan mistään tästä," se ei ole vain ok, vaan täydellistä! Se tarkoittaa, että olet juuri oikeassa paikassa. Ajattele tätä testiä kuin venyttelyä ennen treeniä – lämmitämme vain aivolihaksia! +[Osallistu ennakkotestiin](https://ff-quizzes.netlify.app/web/) -[Osallistu ennakkotestiin](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Seikkailu, johon olemme yhdessä ryhtymässä +## Seikkailu, johon olemme juuri lähdössä yhdessä -Okei, olen aidosti innoissani siitä, mitä aiomme tutkia tänään! Vakavasti, toivon, että voisin nähdä ilmeesi, kun jotkut näistä konsepteista loksahtavat paikoilleen. Tässä on uskomaton matka, jonka teemme yhdessä: +Okei, olen oikeasti täpinöissä siitä, mitä tänään aiomme tutkia! Vakavasti, toivon, että näkisin ilmeesi kun jotkut näistä käsitteistä loksahtaa paikalleen. Tässä on uskomaton matka, jolla olemme yhdessä: -- **Mitä ohjelmointi oikeastaan on (ja miksi se on siisteintä ikinä!)** – Tutkimme, miten koodi on kirjaimellisesti näkymätöntä taikaa, joka pyörittää kaikkea ympärilläsi, aina siitä herätyskellosta, joka tietää, että on maanantaiaamu, algoritmiin, joka täydellisesti valitsee Netflix-suosituksesi. -- **Ohjelmointikielet ja niiden hämmästyttävät persoonallisuudet** – Kuvittele, että astut juhliin, jossa jokaisella vieraalla on täysin erilaiset supervoimat ja ongelmanratkaisutaidot. Sellainen on ohjelmointikielten maailma, ja tulet rakastamaan niiden tapaamista! -- **Peruspalikat, jotka saavat digitaalisen taian tapahtumaan** – Ajattele näitä lopullisena luovana LEGO-sarjana. Kun ymmärrät, miten nämä palikat sopivat yhteen, huomaat, että voit kirjaimellisesti rakentaa mitä tahansa, mitä mielikuvituksesi keksii. -- **Ammattilaistyökalut, jotka saavat sinut tuntemaan kuin sinulle olisi annettu taikasauva** – En liioittele – nämä työkalut saavat sinut todella tuntemaan, että sinulla on supervoimia, ja parasta? Ne ovat samoja, joita ammattilaiset käyttävät! +- **Mitä ohjelmointi oikeasti on (ja miksi se on siisteintä koskaan!)** – Tutkimme, miten koodi on kirjaimellisesti näkymätön taika, joka pyörittää kaikkea ympärilläsi, siitä herätyskellosta, joka jotenkin tietää, että on maanantaiaamu, algoritmiin, joka valikoi täydellisesti Netflix-suosituksesi +- **Ohjelmointikielet ja niiden uskomattomat persoonallisuudet** – Kuvittele, että tulet juhliin, joissa jokaisella on täysin erilaiset supervoimat ja ongelmanratkaisutavat. Sellainen on ohjelmointikielten maailma, ja tulet rakastamaan niiden tapaamista! +- **Perusrakennuspalikat, jotka tekevät digitaalisesta taian mahdollisen** – Ajattele näitä kuin täydellistä luovaa LEGO-settiä. Kun ymmärrät, miten nämä palikat sopivat yhteen, huomaat voivasi rakentaa kirjaimellisesti mitä vain, mitä mielikuvituksesi haluaa +- **Ammattilaistyökalut, jotka saavat sinut tuntemaan kuin olisit juuri saanut haltuusi velhojen sauvan** – En liioittele – nämä työkalut saavat sinut oikeasti tuntemaan, että sinulla on supervoimat, ja parasta? Ne ovat samoja, joita ammattilaiset käyttävät! -> 💡 **Tässä on juttu**: Älä edes ajattele yrittäväsi muistaa kaikkea tänään! Juuri nyt haluan vain, että tunnet innostuksen siitä, mitä kaikkea on mahdollista tehdä. Yksityiskohdat jäävät mieleen luonnollisesti, kun harjoittelemme yhdessä – näin oikea oppiminen tapahtuu! +> 💡 **Tässä on pointti**: Älä edes yritä muistaa kaikkea jo tänään! Nyt haluan vain, että tunnet sen innostuksen kipinän mahdollisuuksista. Yksityiskohdat jäävät mieleen luonnollisesti harjoitellessamme yhdessä – näin oikea oppiminen tapahtuu! -> Voit käydä tämän oppitunnin [Microsoft Learnissa](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Voit käydä tämän oppitunnin myös [Microsoft Learnissä](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Mitä ohjelmointi oikeastaan *on*? +## Mitä ohjelmointi sitten *oikeasti on*? -Okei, käydään käsiksi miljoonan dollarin kysymykseen: mitä ohjelmointi oikeastaan on? +Okei, puretaan miljoonan dollarin kysymys: mitä ohjelmointi oikeastaan on? -Kerron sinulle tarinan, joka muutti täysin ajattelutapani. Viime viikolla yritin selittää äidilleni, miten käyttää uutta älytelevision kaukosäädintä. Huomasin sanovani asioita kuten "Paina punaista nappia, mutta ei sitä isoa punaista nappia, vaan sitä pientä punaista nappia vasemmalla... ei, sinun toisella vasemmalla... okei, nyt pidä sitä painettuna kaksi sekuntia, ei yhtä, ei kolmea..." Kuulostaako tutulta? 😅 +Kerron sinulle tarinan, joka muutti täysin ajattelutapani tätä kohtaan. Viime viikolla yritin selittää äidilleni, miten käytämme uutta älytelevision kaukosäädintä. Huomasin sanovani asioita kuten "Paina punaista painiketta, mutta ei isoa punaista, vaan pientä punaista vasemmalla... ei, toista sinun vasenta... okei, pidä sitä nyt kahden sekunnin ajan, ei yhden, ei kolmen..." Kuulostaako tutulta? 😅 -Tuo on ohjelmointia! Se on taidetta antaa uskomattoman yksityiskohtaisia, vaiheittaisia ohjeita jollekin, joka on erittäin voimakas mutta tarvitsee kaiken selitettynä täydellisesti. Paitsi että äitisi sijaan (joka voi kysyä "mikä punainen nappi?!"), selität tietokoneelle (joka tekee juuri sen, mitä sanot, vaikka se ei olisikaan ihan sitä, mitä tarkoitit). +Se on ohjelmointia! Se on taidetta antaa uskomattoman yksityiskohtaiset, vaihe vaiheelta ohjeet jollekin, joka on hyvin voimakas mutta tarvitsee kaiken selitettynä täydellisesti. Paitsi että sen sijaan, että selittäisit äidillesi (joka voisi kysyä "mikä punainen painike?"), selität tietokoneelle (joka tekee tarkalleen mitä sanot, vaikka et aivan tarkoittaisikaan sitä, mitä sanoit). -Tässä on se, mikä räjäytti mieleni, kun opin tämän: tietokoneet ovat itse asiassa melko yksinkertaisia pohjimmiltaan. Ne ymmärtävät kirjaimellisesti vain kaksi asiaa – 1 ja 0, mikä on käytännössä vain "kyllä" ja "ei" tai "päällä" ja "pois." Siinä kaikki! Mutta tässä tulee taika – meidän ei tarvitse puhua 1:illä ja 0:illa kuin olisimme Matrixissa. Siksi **ohjelmointikielet** tulevat apuun. Ne ovat kuin maailman paras kääntäjä, joka muuttaa normaalit ihmisen ajatukset tietokonekieleksi. +Tämä sai minut sanattomaksi ensimmäisenä oppimispäivänäni: tietokoneet ovat oikeasti melko yksinkertaisia ytimeltään. Ne ymmärtävät kirjaimellisesti vain kahta asiaa – ykköstä ja nollaa, joka on käytännössä "kyllä" ja "ei" tai "päälle" ja "pois." Siinä kaikki! Mutta tässä tulee taika – meidän ei tarvitse puhua pelkkiä ykkösiä ja nollia kuin The Matrixissa. Tässä kohtaa **ohjelmointikielet** tulevat apuun. Ne ovat kuin maailman paras kääntäjä, joka muuntaa täysin normaalit ihmismietteesi tietokoneen kielelle. -Ja tässä on se, mikä saa minut edelleen kylmille väreille joka aamu, kun herään: kirjaimellisesti *kaikki* digitaalinen elämässäsi alkoi jonkun kaltaisesi ihmisen toimesta, joka todennäköisesti istui pyjamissaan kahvikupin kanssa ja kirjoitti koodia kannettavallaan. Se Instagram-suodatin, joka saa sinut näyttämään täydelliseltä? Joku koodasi sen. Suositus, joka johdatti sinut uuteen suosikkikappaleeseesi? Kehittäjä rakensi sen algoritmin. Sovellus, joka auttaa sinua jakamaan ravintolalaskun ystäviesi kanssa? Jep, joku ajatteli "tämä on ärsyttävää, voisin varmaan korjata tämän" ja sitten... he tekivät sen! +Ja tässä on se, mikä edelleen saa minut kylmilleen joka aamu herätessäni: kirjaimellisesti *kaikki* digitaalisessa elämässäsi alkoi jostain ihan samasta kuin sinä nyt, varmaan pyjamassa kahvikuppi kädessä kirjoittamassa koodia kannettavallaan. Se Instagram-suodatin, joka saa sinut näyttämään virheettömältä? Joku koodasi sen. Suositus, joka johdatti sinut uuteen suosikkilauluusi? Kehittäjä loi sen algoritmin. Sovellus, joka auttaa yhdessä kavereiden kanssa jakamaan illallisajan laskun? Joo, joku ajatteli "tämä ärsyttää, voin korjata tämän" ja sitten... hän teki sen! -Kun opit ohjelmoimaan, et vain opi uutta taitoa – sinusta tulee osa tätä uskomatonta ongelmanratkaisijoiden yhteisöä, joka viettää päivänsä miettien: "Entä jos voisin rakentaa jotain, joka tekee jonkun päivästä hieman paremman?" Rehellisesti, voiko olla mitään siistimpää kuin se? +Kun opit ohjelmoimaan, et vain opiskele uutta taitoa – tulet osaksi tätä uskomatonta ongelmanratkaisuyhteisöä, joka käyttää päivänsä pohtien "Mitä jos voisin rakentaa jotain, joka tekee jonkun päivän juuri vähän paremmaksi?" Rehellisesti, onko mitään siistimpää? -✅ **Hauska faktaetsintä**: Tässä on jotain todella siistiä, mitä voit etsiä, kun sinulla on hetki aikaa – kuka luulet olleen maailman ensimmäinen tietokoneohjelmoija? Annan sinulle vihjeen: se ei ehkä ole se, mitä odotat! Tämän henkilön tarina on todella kiehtova ja osoittaa, että ohjelmointi on aina ollut luovaa ongelmanratkaisua ja laatikon ulkopuolella ajattelua. +✅ **Hauska tietopaja**: Tässä on juttu, jota on tosi hauska etsiä, kun sinulla on hetki vapaata – kuka oli maailman ensimmäinen tietokoneohjelmoija? Annan sinulle vinkin: se ei ehkä ole se, jota odotat! Tarina tästä henkilöstä on todella kiehtova ja osoittaa, että ohjelmointi on aina ollut luovaa ongelmanratkaisua ja laatikon ulkopuolista ajattelua. -### 🧠 **Tarkistuspiste: Miltä sinusta tuntuu?** +### 🧠 **Pysähdy hetkeksi: Miltä sinusta tuntuu?** -**Pohdi hetki:** -- Tuntuuko ajatus "ohjeiden antamisesta tietokoneille" nyt järkevältä? -- Voitko keksiä päivittäisen tehtävän, jonka haluaisit automatisoida ohjelmoinnin avulla? -- Mitä kysymyksiä sinulla herää tästä koko ohjelmointijutusta? +**Ota hetki pohdintaan:** +- Onko ajatus "antaa tietokoneille käskyjä" nyt sinulle järkevä? +- Keksitkö jokapäiväisen tehtävän, jonka haluaisit automatisoida ohjelmoinnilla? +- Mitä kysymyksiä mielessäsi nousee tästä koko ohjelmointiasiasiasta? -> **Muista**: On täysin normaalia, jos jotkut käsitteet tuntuvat vielä epäselviltä. Ohjelmoinnin oppiminen on kuin uuden kielen oppimista – aivojen täytyy rakentaa ne hermoyhteydet ajan kanssa. Olet hyvässä vauhdissa! +> **Muista**: On täysin normaalia, jos jotkut käsitteet tuntuvat nyt hämäriltä. Ohjelmoinnin oppiminen on kuin uuden kielen opettelu – aivosi rakentavat näitä hermoratoja ajan myötä. Olet loistava! -## Ohjelmointikielet ovat kuin erilaisia taikuuden muotoja +## Ohjelmointikielet ovat kuin erilaisia taikakikkojen makuja -Okei, tämä kuulostaa ehkä oudolta, mutta pysy mukana – ohjelmointikielet ovat kuin erilaisia musiikkityylejä. Mieti: sinulla on jazz, joka on sulavaa ja improvisoitua, rock, joka on voimakasta ja suoraviivaista, klassinen, joka on eleganttia ja strukturoitua, ja hip-hop, joka on luovaa ja ilmeikästä. Jokaisella tyylillä on oma tunnelmansa, oma intohimoisten fanien yhteisönsä, ja jokainen niistä sopii täydellisesti eri tilanteisiin ja mielialoihin. +Okei, tämä voi kuulostaa hassulta, mutta pysy mukana – ohjelmointikielet ovat paljon kuin eri musiikkityylit. Mieti: sinulla on jazz, joka on pehmeää ja improvisaatiopainotteista, rock joka on voimakasta ja suoraviivaista, klassinen joka on tyylikästä ja rakenteellista, sekä hip-hop luovaa ja ilmaisevaa. Jokaisella tyylillä on oma tunnelmansa, intohimoisten fanien yhteisönsä, ja kukin sopii erilaisiin mielialoihin ja tilaisuuksiin. -Ohjelmointikielet toimivat täsmälleen samalla tavalla! Et käyttäisi samaa kieltä hauskan mobiilipelin rakentamiseen kuin käyttäisit valtavan määrän ilmastodatan käsittelyyn, aivan kuten et soittaisi death metalia joogatunnilla (no, useimmilla joogatunneilla ainakin! 😄). +Ohjelmointikielet toimivat aivan samalla tavalla! Et käyttäisi samaa kieltä rakentamaan hauskaa mobiilipeliä kuin käsittelisit valtavia määriä ilmastotietoa, kuten et soittaisi death metalia joogaluokassa (no, enimmäkseen joogaluokissa! 😄). -Mutta tässä on se, mikä hämmästyttää minua joka kerta, kun ajattelen sitä: nämä kielet ovat kuin maailman kärsivällisin, briljantti tulkki, joka istuu vieressäsi. Voit ilmaista ideasi tavalla, joka tuntuu luonnolliselta ihmisaivoillesi, ja ne hoitavat kaiken uskomattoman monimutkaisen työn muuntaen sen 1:iksi ja 0:iksi, joita tietokoneet oikeasti puhuvat. Se on kuin ystävä, joka on täydellisesti sujuva sekä "ihmisen luovuudessa" että "tietokoneen logiikassa" – eikä hän koskaan väsy, tarvitse kahvitaukoja tai tuomitse sinua, vaikka kysyisit samaa kysymystä kahdesti! +Mutta tässä on se, mikä saa minut aina hämmästymään: nämä kielet ovat kuin maailman kärsivällisin ja nerokkain tulkki istumassa vieressäsi. Voit ilmaista ideasi luonnollisesti ihmismielesi tavoin, ja ne hoitavat äärettömän monimutkaisen työn kääntämällä sen tietokoneiden kielelle, ykkösiksi ja nolliksi. Se on kuin olisi ystävä, joka on aivan sujuva sekä "inhimillisessä luovuudessa" että "tietokoneen logiikassa" – eikä hän koskaan väsy, tarvitse kahvitaukoja, eikä arvostele, vaikket kysyisi samaa kahdesti! ### Suosittuja ohjelmointikieliä ja niiden käyttötarkoituksia ```mermaid mindmap - root((Programming Languages)) - Web Development + root((Ohjelmointikielet)) + Web-kehitys JavaScript - Frontend Magic - Interactive Websites + Frontend-taikuus + Interaktiiviset verkkosivut TypeScript - JavaScript + Types - Enterprise Apps + JavaScript + Tyypit + Yrityssovellukset Data & AI Python - Data Science - Machine Learning - Automation + Data-analytiikka + Koneoppiminen + Automaatio R - Statistics - Research - Mobile Apps + Tilastotiede + Tutkimus + Mobiilisovellukset Java Android - Enterprise + Yrityskäyttö Swift iOS - Apple Ecosystem + Applen ekosysteemi Kotlin - Modern Android - Cross-platform - Systems & Performance + Moderni Android + Monialustainen + Järjestelmät & Suorituskyky C++ - Games - Performance Critical + Pelit + Suorituskykykriittinen Rust - Memory Safety - System Programming + Muistin turvallisuus + Järjestelmäohjelmointi Go - Cloud Services - Scalable Backend + Pilvipalvelut + Skaalautuva backend ``` - -| Kieli | Parhaat käyttötarkoitukset | Miksi se on suosittu | -|-------|----------------------------|----------------------| -| **JavaScript** | Web-kehitys, käyttöliittymät | Toimii selaimissa ja mahdollistaa interaktiiviset verkkosivut | -| **Python** | Data-analytiikka, automaatio, tekoäly | Helppo lukea ja oppia, tehokkaat kirjastot | -| **Java** | Yrityssovellukset, Android-sovellukset | Alustariippumaton, kestävä suurille järjestelmille | -| **C#** | Windows-sovellukset, pelikehitys | Vahva Microsoft-ekosysteemin tuki | -| **Go** | Pilvipalvelut, taustajärjestelmät | Nopea, yksinkertainen, suunniteltu moderniin laskentaan | +| Kieli | Parhaiten sopii | Miksi se on suosittu | +|------------|----------------------------|--------------------------------------------| +| **JavaScript** | Verkkokehitys, käyttöliittymät | Toimii selaimissa ja pyörittää interaktiivisia verkkosivuja | +| **Python** | Data-analyysi, automaatio, tekoäly | Helppo lukea ja oppia, tehokkaat kirjastot | +| **Java** | Yrityssovellukset, Android-sovellukset | Alustariippumaton, vankka suurille järjestelmille | +| **C#** | Windows-sovellukset, pelikehitys | Vahva tuki Microsoftin ekosysteemissä | +| **Go** | Pilvipalvelut, backend-järjestelmät | Nopea, yksinkertainen, suunniteltu moderniin laskentaan | ### Korkean tason vs. matalan tason kielet -Okei, tämä oli rehellisesti se konsepti, joka sai aivoni ylikuormittumaan, kun aloitin oppimisen, joten jaan kanssasi vertauksen, joka lopulta sai minut ymmärtämään – ja toivon todella, että se auttaa sinua myös! +Okei, tämä oli oikeasti käsite, joka hajotti aivoni kun aloitin, joten jaan analogian, joka viimein sai homman loksahtamaan – ja toivon sydämestäni, että se auttaa sinua myös! -Kuvittele, että vierailet maassa, jossa et puhu kieltä, ja sinun täytyy epätoivoisesti löytää lähin wc (olemme kaikki olleet siinä tilanteessa, eikö? 😅): +Kuvittele, että olet vieraassa maassa, jossa et puhu kieltä, ja sinun tarvitsee todella löytää lähin wc (olemme kaikki olleet siellä, eikö niin? 😅): -- **Matalan tason ohjelmointi** on kuin oppisit paikallisen murteen niin hyvin, että voit jutella kadunkulman hedelmiä myyvän isoäidin kanssa käyttäen kulttuuriviittauksia, paikallista slangia ja sisäpiirivitsejä, jotka vain siellä kasvanut ymmärtäisi. Todella vaikuttavaa ja uskomattoman tehokasta... jos satut olemaan sujuva! Mutta melko ylivoimaista, kun yrität vain löytää wc:n. +- **Matalan tason ohjelmointi** on kuin oppisit paikallisjunttaa niin hyvin, että voit jutella kulmalla hedelmiä myyvän isoäidin kanssa käyttäen kulttuuriviitteitä, paikallista slangia ja sisäpiirin vitsejä, joita vain siellä syntynyt ymmärtää. Tosi vaikuttavaa ja uskomattoman tehokasta... jos osaat sen sujuvasti! Mutta aika sekavaa, jos vain yrität löytää vessan. -- **Korkean tason ohjelmointi** on kuin sinulla olisi se mahtava paikallinen ystävä, joka vain ymmärtää sinua. Voit sanoa "Minun täytyy todella löytää wc" tavallisella englannilla, ja hän hoitaa kaiken kulttuurisen käännöksen ja antaa sinulle ohjeet tavalla, joka käy järkeen ei-paikalliselle. +- **Korkean tason ohjelmointi** on kuin olisi se mahtava paikallinen ystävä, joka ymmärtää sinua täysin. Voit sanoa "Tarvitsen todella vessan" ihan suoraan englanniksi, ja hän hoitaa kaiken kulttuurikäännöksen ja antaa ohjeet tavalla, joka kuuluu järkevästi aivoillesi, jotka eivät ole paikallisia. Ohjelmoinnin termein: -- **Matalan tason kielet** (kuten Assembly tai C) antavat sinun käydä uskomattoman yksityiskohtaisia keskusteluja tietokoneen varsinaisen laitteiston kanssa, mutta sinun täytyy ajatella kuin kone, mikä on... no, sanotaan vain, että se on melko suuri henkinen muutos! -- **Korkean tason kielet** (kuten JavaScript, Python tai C#) antavat sinun ajatella kuin ihminen, kun ne hoitavat kaiken konepuheen kulissien takana. Lisäksi niillä on uskomattoman tervetulleita yhteisöjä, jotka ovat täynnä ihmisiä, jotka muistavat, millaista oli olla uusi ja haluavat aidosti auttaa! +- **Matalan tason kielet** (kuten Assembly tai C) antavat sinulle mahdollisuuden käydä uskomattoman yksityiskohtaisia keskusteluja tietokoneen fyysisen laitteiston kanssa, mutta sinun täytyy ajatella kuin kone, mikä on... no, sanotaan että iso henkinen muutos! +- **Korkean tason kielet** (kuten JavaScript, Python tai C#) antavat sinun ajatella kuin ihminen, kun ne huolehtivat koneen kielen takahuoneessa. Lisäksi niillä on uskomattoman lämminhenkisiä yhteisöjä täynnä ihmisiä, jotka muistavat miltä oli olla uusi ja haluavat oikeasti auttaa! -Arvaa, mitä suosittelen sinulle aloitettavaksi? 😉 Korkean tason kielet ovat kuin apupyörät, joita et koskaan oikeasti halua ottaa pois, koska ne tekevät koko kokemuksesta niin paljon nautinnollisemman! +Arvaa, mitä kieliä suosittelen aloittamaan? 😉 Korkean tason kielet ovat kuin apupyörät, joita et koskaan oikeastaan halua poistaa, koska ne tekevät koko kokemuksesta paljon hauskemman! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 Ihmisen ajatus:
'Haluan laskea Fibonaccin lukuja'"] --> B{Valitse kielitaso} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|Korkean tason| C["🌟 JavaScript/Python
Helppo lukea ja kirjoittaa"] + B -->|Matalan tason| D["⚙️ Assembly/C
Suora laitteiston ohjaus"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Kirjoita: fibonacci(10)"] + D --> F["📝 Kirjoita: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 Tietokoneen ymmärrys:
Kääntäjä hoitaa monimutkaisuuden"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Sama tulos:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Näytän sinulle miksi korkean tason kielet ovat niin paljon ystävällisempiä -### Näytän sinulle, miksi korkean tason kielet ovat niin paljon ystävällisempiä - -Okei, aion näyttää sinulle jotain, joka täydellisesti havainnollistaa, miksi rakastuin korkean tason kieliin, mutta ensin – sinun täytyy luvata minulle jotain. Kun näet ensimmäisen koodiesimerkin, älä panikoi! Sen on tarkoitus näyttää pelottavalta. Juuri sitä yritän tässä havainnollistaa! +Okei, aion näyttää sinulle jotakin, joka täydellisesti havainnollistaa miksi rakastuin korkean tason kieliin, mutta ensin – lupaa minulle yksi asia. Kun näet ensimmäisen koodiesimerkin, älä panikoi! Sen on tarkoitus näyttää pelottavalta. Juuri sitä tahdon korostaa! -Katsotaan täsmälleen sama tehtävä kirjoitettuna kahdella täysin erilaisella tyylillä. Molemmat luovat niin sanotun Fibonacci-jonon – se on kaunis matemaattinen kuvio, jossa jokainen luku on kahden edellisen summan: 0, 1, 1, 2, 3, 5, 8, 13... (Hauska fakta: löydät tämän kuvion kirjaimellisesti kaikkialta luonnosta – auringonkukan siemenistä, käpyjen kuvioista, jopa galaksien muodostumisesta!) +Katsomme täsmälleen samaa tehtävää kirjoitettuna kahdella täysin eri tyylillä. Molemmat luovat ns. Fibonaccin lukujonon – se on kaunis matemaattinen kuvio, jossa jokainen luku on kahden edellisen summa: 0, 1, 1, 2, 3, 5, 8, 13... (Hauska fakta: löydät tämän kuvion kirjaimellisesti kaikkialta luonnosta – auringonkukansiemenkiemuroista, käpyjen kuvioista, jopa galaksien muodostumisesta!) -Valmis näkemään ero? Mennään! +Valmiina näkemään eron? Mennään! **Korkean tason kieli (JavaScript) – Ihmisystävällinen:** ```javascript -// Step 1: Basic Fibonacci setup +// Vaihe 1: Perus Fibonacci-asetus const fibonacciCount = 10; let current = 0; let next = 1; @@ -186,31 +184,31 @@ console.log('Fibonacci sequence:'); ``` **Tämä koodi tekee seuraavaa:** -- **Määrittää** vakion, joka kertoo, kuinka monta Fibonacci-lukua haluamme tuottaa -- **Alustaa** kaksi muuttujaa seuraamaan nykyistä ja seuraavaa lukua jonossa -- **Asettaa** aloitusarvot (0 ja 1), jotka määrittävät Fibonacci-kuvion -- **Näyttää** otsikkoviestin, joka kertoo tuloksesta +- **Määrittelee** vakion, jolla kerrotaan, kuinka monta Fibonaccin lukua haluamme generoida +- **Alustaa** kaksi muuttujaa seuraamaan sekvenssin nykyistä ja seuraavaa lukua +- **Asettaa** alkuarvot (0 ja 1), jotka määrittävät Fibonaccin kaavan +- **Näyttää** otsikkoviestin tulosteksemme tunnistamiseksi ```javascript -// Step 2: Generate the sequence with a loop +// Vaihe 2: Luo sarja silmukalla for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Laske seuraava luku sarjassa const sum = current + next; current = next; next = sum; } ``` -**Tässä tapahtuu seuraavaa:** -- **Käydään läpi** jokainen sijainti jonossa `for`-silmukalla -- **Näytetään** jokainen luku sen sijainnin kanssa käyttämällä mallilausekkeita -- **Lasketaan** seuraava Fibonacci-luku lisäämällä nykyinen ja seuraava arvo -- **Päivitetään** seurantamuuttujat siirtyäksemme seuraavaan iteraatioon +**Erityiskohtia, mitä tässä tapahtuu:** +- **Toistetaan** silmukalla jokainen paikka sekvenssilistamme läpi +- **Näytetään** jokainen luku ja sen sijainti mallimerkintäällä +- **Lasketaan** seuraava Fibonaccin luku lisäämällä nykyinen ja seuraava arvo +- **Päivitetään** seurantamuuttujat siirtymään seuraavaan iteraatioon ```javascript -// Step 3: Modern functional approach +// Vaihe 3: Moderni funktionaalinen lähestymistapa const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,16 +219,16 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Käyttöesimerkki const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Yllä teimme:** -- **Luoimme** uudelleenkäytettävän funktion modernilla nuolifunktiosyntaksilla -- **Rakensimme** taulukon tallentamaan koko jonon sen sijaan, että näyttäisimme luvut yksi kerrallaan -- **Käytimme** taulukon indeksejä laskeaksemme jokaisen uuden luvun edellisistä arvoista -- **Palautimme** koko jonon joustavasti käytettäväksi ohjelman muissa osissa +**Yllä olemme:** +- **Luoneet** uudelleenkäytettävän funktion modernilla nuolifunktio-syntaksilla +- **Rakentaneet** taulukon tallentamaan koko sekvenssin sen sijaan, että näyttäisimme luvut yksitellen +- **Käyttäneet** taulukon indeksointia uuden luvun laskemiseksi edellisistä arvoista +- **Palauttaneet** koko sekvenssin joustavaa käyttöä varten ohjelman muissa osissa **Matalan tason kieli (ARM Assembly) – Tietokoneystävällinen:** @@ -259,59 +257,63 @@ back add r0,r1 end ``` -Huomaa, kuinka JavaScript-versio näyttää melkein kuin englanninkielisiltä ohjeilta, kun -- **Kommentit**: Korkean tason ohjelmointikielet kannustavat selittäviin kommentteihin, jotka tekevät koodista itseään dokumentoivan. -- **Rakenne**: JavaScriptin looginen kulku vastaa tapaa, jolla ihmiset ajattelevat ongelmia askel askeleelta. -- **Ylläpito**: JavaScript-version päivittäminen eri vaatimuksia varten on suoraviivaista ja selkeää. +Huomaat, miten JavaScript-versio lukee melkein kuin englanninkieliset ohjeet, kun taas Assembly-versio käyttää kryptisiä käskyjä, jotka ohjaavat suoraan tietokoneen prosessoria. Molemmat suorittavat saman tehtävän, mutta korkean tason kieli on paljon helpompi ihmisille ymmärtää, kirjoittaa ja ylläpitää. -✅ **Tietoa Fibonacci-jonosta**: Tämä uskomattoman kaunis lukujono (jossa jokainen luku on kahden edellisen summa: 0, 1, 1, 2, 3, 5, 8...) esiintyy kirjaimellisesti *kaikkialla* luonnossa! Löydät sen auringonkukan spiraaleista, käpyjen kuvioista, nautilus-kuorten kaarevuudesta ja jopa puiden oksien kasvutavasta. On aika hämmästyttävää, miten matematiikka ja koodi voivat auttaa meitä ymmärtämään ja luomaan uudelleen luonnon kauneuden luomiseen käyttämiä kuvioita! +**Tärkeimmät erot, jotka huomaat:** +- **Luettavuus**: JavaScript käyttää kuvailevia nimiä kuten `fibonacciCount`, kun taas Assembly käyttää kryptisiä tunnisteita kuten `r0`, `r1` +- **Kommentit**: Korkean tason kielet kannustavat selittäviin kommentteihin, jotka tekevät koodista itsekuvailevaa +- **Rakenne**: JavaScriptin looginen kulku vastaa ihmisten tapaa ajatella ongelmia askel askeleelta +- **Ylläpito**: JavaScript-version päivittäminen eri vaatimuksia varten on suoraviivaista ja selkeää -## Rakennuspalikat, jotka saavat taian aikaan +✅ **Tietoa Fibonacci-jonosta**: Tämä aivan upea lukumalli (jossa jokainen luku on kahden edellisen summa: 0, 1, 1, 2, 3, 5, 8...) esiintyy kirjaimellisesti *kaikkialla* luonnossa! Löydät sen auringonkukan spiraaleista, kävyistä, nautiluksen kuoren käyrästä ja jopa siitä, miten puun oksat kasvavat. On aika hämmästyttävää, miten matematiikka ja koodi voivat auttaa meitä ymmärtämään ja jäljentämään kauneuden luomisessa luonnon käyttämiä kuvioita! -Okei, nyt kun olet nähnyt, miltä ohjelmointikielet näyttävät käytännössä, puretaanpa perusosat, jotka muodostavat kirjaimellisesti jokaisen koskaan kirjoitetun ohjelman. Ajattele näitä kuin suosikkireseptisi olennaisia aineksia – kun ymmärrät, mitä kukin tekee, pystyt lukemaan ja kirjoittamaan koodia melkein millä tahansa kielellä! -Tämä on vähän kuin ohjelmoinnin kieliopin oppimista. Muistatko koulusta, kun opit substantiiveista, verbeistä ja siitä, miten lauseita muodostetaan? Ohjelmoinnilla on oma kielioppinsa, ja rehellisesti sanottuna se on paljon loogisempaa ja anteeksiantavampaa kuin englannin kielioppi koskaan oli! 😄 +## Rakennuspalikat, jotka tekevät taian mahdolliseksi -### Lauseet: Askeltasolla etenevät ohjeet +Okei, nyt kun olet nähnyt, miltä ohjelmointikielet näyttävät käytännössä, puretaan alas perustavanlaatuiset osat, jotka muodostavat kirjaimellisesti jokaisen koskaan kirjoitetun ohjelman. Ajattele näitä lempireseptisi olennaisina aineksina – kun ymmärrät, mitä kukin niistä tekee, osaat lukea ja kirjoittaa koodia lähes missä tahansa kielessä! -Aloitetaan **lauseista** – ne ovat kuin yksittäisiä lauseita keskustelussa tietokoneesi kanssa. Jokainen lause kertoo tietokoneelle, mitä tehdä, vähän kuin antaisi ohjeita: "Käänny tästä vasemmalle", "Pysähdy punaisissa valoissa", "Pysäköi tuohon paikkaan." +Tämä on vähän kuin ohjelmoinnin kieliopin oppimista. Muistatko koulusta, kun opit substantiiveista, verbeistä ja lauseiden rakentamisesta? Ohjelmoinnilla on oma kielioppinsa, ja rehellisesti sanottuna se on paljon loogisempi ja anteeksiantavampi kuin englannin kielioppi koskaan oli! 😄 -Rakastan lauseita niiden luettavuuden takia. Katso tätä: +### Lauseet: Askel askeleelta -ohjeet + +Aloitetaan **lauseista** – nämä ovat kuin yksittäisiä lauseita keskustelussa tietokoneesi kanssa. Jokainen lause kertoo tietokoneelle tehdä yhden tietyn asian, vähän kuin annat ohjeita: "Käänny vasemmalle tästä," "Pysähdy punaisiin liikennevaloihin," "Parkkeeraa siihen kohtaan." + +Mikä minua lauseissa viehättää, on niiden luettavuus. Katso tätä: ```javascript -// Basic statements that perform single actions +// Peruslauseet, jotka suorittavat yksittäisiä toimintoja const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **Tämä koodi tekee seuraavaa:** -- **Määrittää** vakion muuttujan käyttäjän nimen tallentamiseksi -- **Näyttää** tervehdysviestin konsolin tulosteessa -- **Laskee** ja tallentaa matemaattisen operaation tuloksen +- **Määrittele** vakio muuttuja tallentamaan käyttäjän nimi +- **Näytä** tervehdys viestinä konsoliin +- **Laske** ja tallenna matemaattisen laskutoimituksen tulos ```javascript -// Statements that interact with web pages +// Lauseet, jotka ovat vuorovaikutuksessa verkkosivujen kanssa document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Askel askeleelta, tässä tapahtuu:** -- **Muokkaa** verkkosivun otsikkoa, joka näkyy selaimen välilehdessä +**Askel askeleelta tässä tapahtuu:** +- **Muuta** verkkosivun otsikkoa, joka näkyy selaimen välilehdessä - **Vaihda** koko sivun taustaväri ### Muuttujat: Ohjelmasi muistijärjestelmä -Okei, **muuttujat** ovat rehellisesti yksi suosikkikonsepteistani opettaa, koska ne ovat niin samanlaisia kuin asiat, joita käytät jo joka päivä! +Okei, **muuttujat** ovat rehellisesti yksi suosikkikäsitteistäni opettaa, koska ne ovat niin samanlaisia kuin asioita, joita käytät joka päivä! -Ajattele hetki puhelimesi yhteystietoluetteloa. Et muista kaikkien puhelinnumeroita ulkoa – sen sijaan tallennat "Äiti", "Paras ystävä" tai "Pizzerian numero, joka toimittaa klo 2 asti" ja annat puhelimesi muistaa varsinaiset numerot. Muuttujat toimivat täsmälleen samalla tavalla! Ne ovat kuin nimettyjä säiliöitä, joihin ohjelmasi voi tallentaa tietoa ja hakea sen myöhemmin nimen avulla, joka oikeasti käy järkeen. +Ajattele hetkeksi puhelimesi yhteystietoluetteloa. Et opettele kaikkien puhelinnumeroita ulkoa – sen sijaan tallennat "Äiti", "Paras kaveri" tai "Pizzerian, joka toimittaa klo 2 asti" ja annat puhelimen muistaa oikeat numerot. Muuttujat toimivat aivan samalla tavalla! Ne ovat kuin nimettyjä säiliöitä, johon ohjelmasi voi tallentaa tietoa ja hakea sitä myöhemmin käyttökelpoisella nimellä. -Tässä on hienoa: muuttujat voivat muuttua ohjelman suorittamisen aikana (siitä nimi "muuttuja" – ymmärrätkö, mitä he tekivät?). Aivan kuten päivittäisit pizzerian yhteystiedot, kun löydät vielä paremman paikan, muuttujia voidaan päivittää, kun ohjelmasi oppii uutta tietoa tai tilanteet muuttuvat! +Tässä on se todella siisti juttu: muuttujat voivat muuttua ohjelman suorituksen aikana (juuri siksi ne ovat "muuttujia" – huomaatko sanaleikin?). Aivan kuten saatat päivittää pizzerian yhteystietoa löytäessäsi vielä paremman paikan, muuttujia voi päivittää, kun ohjelmasi oppii uutta tai tilanteet muuttuvat! -Näytän, kuinka kauniin yksinkertaista tämä voi olla: +Näytän sinulle, kuinka kauniin yksinkertaista tämä voi olla: ```javascript -// Step 1: Creating basic variables +// Vaihe 1: Perusmuuttujien luominen const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -319,13 +321,13 @@ let isRaining = false; ``` **Näiden käsitteiden ymmärtäminen:** -- **Tallenna** muuttumattomat arvot `const`-muuttujiin (kuten sivuston nimi) -- **Käytä** `let`-muuttujia arvoille, jotka voivat muuttua ohjelman aikana -- **Määritä** erilaisia tietotyyppejä: merkkijonoja (tekstiä), numeroita ja totuusarvoja (true/false) -- **Valitse** kuvaavia nimiä, jotka selittävät, mitä kukin muuttuja sisältää +- **Tallenna** muuttumattomia arvoja `const`-muuttujiin (esim. sivuston nimi) +- **Käytä** `let`-muuttujaa arvoihin, jotka voivat muuttua ohjelman aikana +- **Määritä** eri tietotyyppejä: merkkijonoja (teksti), numeroita ja boolean-arvoja (totta/epätosi) +- **Valitse** kuvailevia nimiä, jotka selittävät, mitä kukin muuttuja sisältää ```javascript -// Step 2: Working with objects to group related data +// Vaihe 2: Työskentely olioiden kanssa ryhmitelläksemme liittyvää dataa const weatherData = { location: "San Francisco", humidity: 65, @@ -333,50 +335,50 @@ const weatherData = { }; ``` -**Yllä olevassa olemme:** -- **Luoneet** olion ryhmitelläksemme yhteen liittyviä säätietoja -- **Järjestäneet** useita tietoja yhden muuttujan alle -- **Käyttäneet** avain-arvopareja merkitsemään jokainen tieto selkeästi +**Yllä olemme:** +- **Luo** objekti ryhmittelemään liittyvä säädata yhteen +- **Järjestä** useita tietoja yhden muuttujan alle +- **Käytä** avain-arvo-pareja selkeään tiedon merkitsemiseen ```javascript -// Step 3: Using and updating variables +// Vaihe 3: Muuttujien käyttäminen ja päivittäminen console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Muutettavien muuttujien päivittäminen currentWeather = "cloudy"; temperature = 68; ``` **Ymmärretään jokainen osa:** -- **Näytä** tietoa käyttämällä mallilausekkeita `${}`-syntaksilla -- **Pääsy** olion ominaisuuksiin piste-notaatiolla (`weatherData.windSpeed`) -- **Päivitä** `let`-muuttujia muuttuvien olosuhteiden mukaan +- **Näytä** tietoa käyttämällä template-litteraaleja `${}`-syntaksilla +- **Pääse** käsiksi oliomuuttujiin piste-syntaksilla (`weatherData.windSpeed`) +- **Päivitä** `let`-muuttujina määriteltyjä muuttujia muuttuvien olosuhteiden mukaan - **Yhdistä** useita muuttujia luodaksesi merkityksellisiä viestejä ```javascript -// Step 4: Modern destructuring for cleaner code +// Vaihe 4: Nykyaikainen destrukturointi siistimpään koodiin const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Mitä sinun tulee tietää:** -- **Poimi** tiettyjä ominaisuuksia olioista käyttämällä hajautusmäärittelyä -- **Luo** uusia muuttujia automaattisesti samoilla nimillä kuin olion avaimet -- **Yksinkertaista** koodia välttämällä toistuvaa piste-notaatiota +**Tärkeää tietää:** +- **Erottele** tiettyjä ominaisuuksia objekteista destrukturointia käyttäen +- **Luo** automaattisesti uusia muuttujia samaan nimeen kuin oliavaimet +- **Yksinkertaista** koodia välttämällä toistuvaa piste-syntaksia -### Ohjausvirta: Opeta ohjelmaasi ajattelemaan +### Ohjausvirtaus: Opettaa ohjelmaasi ajattelemaan -Okei, tässä kohtaa ohjelmointi muuttuu todella hämmästyttäväksi! **Ohjausvirta** tarkoittaa käytännössä ohjelman opettamista tekemään fiksuja päätöksiä, aivan kuten sinä teet joka päivä ajattelematta sitä. +Okei, nyt ohjelmointi muuttuu todella hämmästyttäväksi! **Ohjausvirtaus** tarkoittaa pohjimmiltaan ohjelman opettamista tekemään viisaita päätöksiä, aivan kuten sinä teet joka päivä ilman, että edes ajattelet sitä. -Kuvittele tämä: tänä aamuna kävit todennäköisesti läpi jotain sellaista kuin "Jos sataa, otan sateenvarjon. Jos on kylmä, puen takin. Jos olen myöhässä, jätän aamiaisen väliin ja nappaan kahvin matkalla." Aivosi seuraavat luonnollisesti tällaista jos-niin logiikkaa kymmeniä kertoja päivässä! +Kuvittele tämä: tänä aamuna kävit todennäköisesti läpi jotakin kuten "Jos sataa, otan sateenvarjon. Jos on kylmä, puen takin. Jos olen myöhässä, jätän aamupalan väliin ja nappaan kahvin matkalta." Aivosi seuraavat tätä jos-niin-logiikkaa kymmeniä kertoja päivässä! -Tämä tekee ohjelmista älykkäitä ja eloisia sen sijaan, että ne vain seuraisivat tylsää, ennalta määrättyä käsikirjoitusta. Ne voivat oikeasti tarkastella tilannetta, arvioida mitä tapahtuu ja reagoida asianmukaisesti. Se on kuin antaisi ohjelmallesi aivot, jotka voivat sopeutua ja tehdä valintoja! +Tämä tekee ohjelmista älykkään ja elävän tuntuisia sen sijaan, että ne seuraisivat tylsää, ennustettavaa käsikirjoitusta. Ne voivat todellakin arvioida tilannetta, arvioida, mitä tapahtuu, ja vastata sopivasti. Se on kuin antaisit ohjelmallesi aivot, jotka voivat sopeutua ja tehdä valintoja! -Haluatko nähdä, kuinka kauniisti tämä toimii? Näytän sinulle: +Haluatko nähdä, miten kauniisti tämä toimii? Näytän sinulle: ```javascript -// Step 1: Basic conditional logic +// Vaihe 1: Perusehtolause logic const userAge = 17; if (userAge >= 18) { @@ -388,13 +390,13 @@ if (userAge >= 18) { ``` **Tämä koodi tekee seuraavaa:** -- **Tarkistaa**, täyttääkö käyttäjän ikä äänestysvaatimuksen -- **Suorittaa** eri koodilohkoja ehdon tuloksen perusteella -- **Laskee** ja näyttää, kuinka kauan äänestyskelpoisuuteen on aikaa, jos ikä on alle 18 -- **Tarjoaa** tarkkaa ja hyödyllistä palautetta jokaiseen tilanteeseen +- **Tarkistaa** käyttäjän iän äänioikeuden vaatimuksen täyttymisen +- **Suorittaa** eri koodilohkot ehtotuloksen mukaan +- **Laskee** ja näyttää, kuinka kauan äänioikeuden saavuttamiseen on, jos alaikäinen +- **Antaa** spesifistä, hyödyllistä palautetta jokaisessa tilanteessa ```javascript -// Step 2: Multiple conditions with logical operators +// Vaihe 2: Useita ehtoja loogisilla operaattoreilla const userAge = 17; const hasPermission = true; @@ -408,24 +410,24 @@ if (userAge >= 18 && hasPermission) { ``` **Tässä tapahtuu:** -- **Yhdistää** useita ehtoja `&&` (ja)-operaattorilla -- **Luo** ehtohierarkian käyttämällä `else if` useille skenaarioille -- **Käsittele** kaikki mahdolliset tapaukset viimeisellä `else`-lauseella -- **Tarjoa** selkeää ja toimivaa palautetta jokaiseen eri tilanteeseen +- **Yhdistä** useita ehtoja käyttämällä `&&` (ja) -operaattoria +- **Luo** ehtohierarkia `else if`:llä monille vaihtoehdoille +- **Käsittele** kaikki mahdolliset tapaukset lopullisella `else`-lauseella +- **Anna** selkeää, toiminnallista palautetta eri tilanteisiin ```javascript -// Step 3: Concise conditional with ternary operator +// Vaihe 3: Ytimekäs ehto kolmioperaattorilla const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Mitä sinun tulee muistaa:** -- **Käytä** ternääristä operaattoria (`? :`) yksinkertaisiin kahden vaihtoehdon ehtoihin -- **Kirjoita** ehto ensin, sitten `?`, sen jälkeen tosi-tulos, sitten `:`, ja lopuksi epätosi-tulos -- **Sovella** tätä mallia, kun sinun täytyy määrittää arvoja ehtojen perusteella +**Muista tämä:** +- **Käytä** kolmioperaattoria (`? :`) yksinkertaisiin kahden vaihtoehdon ehtoihin +- **Kirjoita** ehto ensin, sitten `?`, sitten tosi-tulos, sitten `:`, sitten epätosi-tulos +- **Käytä** tätä kaavaa, kun haluat määrittää arvoja ehtojen mukaan ```javascript -// Step 4: Handling multiple specific cases +// Vaihe 4: Useiden erityistapausten käsittely const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -445,57 +447,56 @@ switch (dayOfWeek) { } ``` -**Tämä koodi tekee seuraavaa:** -- **Vertailee** muuttujan arvoa useisiin tiettyihin tapauksiin -- **Ryhmittele** samankaltaiset tapaukset yhteen (arkipäivät vs. viikonloput) -- **Suorita** sopiva koodilohko, kun osuma löytyy -- **Sisällytä** `default`-tapaus odottamattomien arvojen käsittelemiseksi -- **Käytä** `break`-lauseita estääksesi koodin jatkumisen seuraavaan tapaukseen +**Tämä koodi suorittaa:** +- **Vertaa** muuttujan arvoa useisiin erityistapauksiin +- **Ryhmää** samankaltaiset tapaukset (arkipäivät vs. viikonloput) +- **Suorita** sopiva koodilohko, kun löytyy vastaavuus +- **Sisällytä** `default`-tapaus odottamattomille arvoille +- **Käytä** `break`-lauseita estämään koodin jatkuminen seuraavaan tapaukseen -> 💡 **Reaaliaikainen vertauskuva**: Ajattele ohjausvirtaa kuin maailman kärsivällisintä GPS:ää, joka antaa sinulle ohjeita. Se saattaa sanoa "Jos Main Streetillä on ruuhkaa, ota moottoritie. Jos moottoritiellä on rakennustöitä, kokeile maisemareittiä." Ohjelmat käyttävät täsmälleen samaa ehdollista logiikkaa reagoidakseen älykkäästi eri tilanteisiin ja tarjotakseen käyttäjille parhaan mahdollisen kokemuksen. +> 💡 **Todellinen vertaus**: Ajattele ohjausvirtausta kuin maailman kärsivällisintä GPS:ää, joka antaa sinulle ohjeita. Se saattaa sanoa "Jos Main Streetillä on ruuhkaa, käytä moottoritietä. Jos moottoritie on suljettu rakennustöiden vuoksi, kokeile maalaismaisemareittiä." Ohjelmat käyttävät täysin samanlaista ehtologista logiikkaa vastatakseen älykkäästi eri tilanteisiin ja antaakseen käyttäjille parhaan mahdollisen kokemuksen. -### 🎯 **Käsitteiden tarkistus: Rakennuspalikoiden hallinta** +### 🎯 **Käsitteen tarkistus: Rakennuspalikoiden hallinta** -**Katsotaan, miten olet omaksunut perusteet:** -- Voitko selittää omin sanoin eron muuttujan ja lauseen välillä? -- Mieti todellisen maailman tilannetta, jossa käyttäisit jos-niin päätöstä (kuten äänestysesimerkki) -- Mikä ohjelmointilogiikassa yllätti sinut? +**Katsotaan, miten olet perusasioissa:** +- Osaatko selittää eron muuttujan ja lauseen välillä omin sanoin? +- Mieti oikean elämän tilannetta, jossa käyttäisit jos-niin-päätöstä (kuten äänestyksen esimerkki) +- Mikä ohjelmoinnin logiikassa yllätti sinut? -**Nopea itseluottamusbuusti:** +**Pikainen itseluottamuksen boosteri:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 Lauseet
(Ohjeet)"] --> B["📦 Muuttujat
(Tallennus)"] --> C["🔀 Ohjausvirta
(Päätökset)"] --> D["🎉 Toimiva Ohjelma!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` +✅ **Mitä seuraavaksi**: Tutustumme näihin käsitteisiin syvällisemmin ja meillä tulee olemaan mahtavaa yhdessä! Keskity nyt vain fiilistelemään kaikkea sitä upeaa potentiaalia, joka edessäsi on. Konkreettiset taidot ja tekniikat tarttuvat luonnostaan harjoitellessa – lupaan, että tästä tulee paljon hauskempaa kuin ehkä odotit! -✅ **Mitä seuraavaksi**: Meillä tulee olemaan aivan mahtavaa, kun sukellamme syvemmälle näihin käsitteisiin ja jatkamme tätä uskomatonta matkaa yhdessä! Juuri nyt keskity vain tuntemaan innostusta kaikista edessä olevista upeista mahdollisuuksista. Tietyt taidot ja tekniikat jäävät mieleen luonnollisesti, kun harjoittelemme yhdessä – lupaan, että tämä tulee olemaan paljon hauskempaa kuin odotit! +## Työkalut alan ammattilaisille -## Työkalut käyttöön +Okei, tässä kohtaa minua innostaa niin, että melkein pompin tuolissa! 🚀 Aiomme puhua uskomattomista työkaluista, jotka saavat sinut tuntemaan kuin saisit käsiisi digitaalisen avaruusaluksen avaimet. -Okei, tämä on rehellisesti se kohta, jossa innostun niin paljon, että tuskin pysyn paikallani! 🚀 Puhumme nyt uskomattomista työkaluista, jotka saavat sinut tuntemaan kuin sinulle olisi juuri annettu avaimet digitaaliseen avaruusalukseen. +Tiedätkö, kuinka kokilla on ne täydellisesti tasapainotetut veitset, jotka tuntuvat kuin käsiensä jatkeilta? Tai kuinka muusikolla on se yksi kitara, joka vaikuttaa soivan heti kun sitä koskettaa? No, kehittäjillä on omat versionsa näistä maagisista työkaluista, ja tässä tulee jotain, mikä varmasti vie jalat alta – suurin osa niistä on täysin ilmaisia! -Tiedätkö, miten kokilla on täydellisesti tasapainotetut veitset, jotka tuntuvat kuin käden jatkeilta? Tai miten muusikolla on se yksi kitara, joka tuntuu laulavan heti, kun hän koskettaa sitä? No, kehittäjillä on oma versio näistä maagisista työkaluista, ja tässä on se, mikä tulee täysin hämmästyttämään sinut – suurin osa niistä on täysin ilmaisia! +Olen melkein hypähtääni tuolissani ajatellessani, että saan jakaa nämä kanssasi, koska ne ovat täysin mullistaneet ohjelmistojen rakentamisen. Puhumme tekoälyn ohjaamista koodiavustajista, jotka auttavat kirjoittamaan koodiasi (en vitsaile!), pilviympäristöistä, joissa voit rakentaa kokonaisia sovelluksia kirjaimellisesti mistä tahansa Wi-Fi:n avulla, ja debuggaustyökaluista, jotka ovat niin kehittyneitä, että ne ovat kuin röntgensäteet ohjelmillesi. -Olen melkein hyppimässä tuolissani ajatellessani näiden jakamista kanssasi, koska ne ovat täysin mullistaneet tavan, jolla rakennamme ohjelmistoja. Puhumme tekoälyllä toimivista koodausavustajista, jotka voivat auttaa kirjoittamaan koodiasi (en edes vitsaile!), pilviympäristöistä, joissa voit rakentaa kokonaisia sovelluksia kirjaimellisesti mistä tahansa, missä on Wi-Fi, ja virheenkorjaustyökaluista, jotka ovat niin kehittyneitä, että ne ovat kuin röntgennäkö ohjelmillesi. - -Ja tässä on se osa, joka edelleen antaa minulle kylmiä väreitä: nämä eivät ole "aloittelijatyökaluja", jotka jäävät tarpeettomiksi. Nämä ovat täsmälleen samoja ammattikäyttöön tarkoitettuja työkaluja, joita Google, Netflix ja se indie-sovellusstudio, jota rakastat, käyttävät juuri tällä hetkellä. Tulet tuntemaan itsesi todelliseksi ammattilaiseksi niitä käyttäessäsi! +Ja tässä kohtaa saan kylmiä väreitä: nämä eivät ole "aloittelijan työkaluja", jotka kasvaa ulos käytöstä. Nämä ovat juuri niitä ammattilaistason työkaluja, joita Googlen, Netflixin ja sen indie-sovellusstudion kehittäjät käyttävät juuri nyt tässä hetkessä. Tulet tuntemaan olosi todelliseksi ammattilaiseksi käyttäessäsi niitä! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 Ideasi"] --> B["⌨️ Koodieditori
(VS Code)"] + B --> C["🌐 Selaimen kehitystyökalut
(Testaus & Virheiden korjaus)"] + C --> D["⚡ Komentorivi
(Automaatio & Työkalut)"] + D --> E["📚 Dokumentaatio
(Oppiminen & Viite)"] + E --> F["🚀 Mahtava verkkosovellus!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 AI-avustaja
(GitHub Copilot)"] + C -.-> H["📱 Laitteiden testaus
(Responsiivinen suunnittelu)"] + D -.-> I["📦 Paketinhallintaohjelmat
(npm, yarn)"] + E -.-> J["👥 Yhteisö
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -504,340 +505,350 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` - ### Koodieditorit ja IDE:t: Uudet digitaaliset parhaat ystäväsi -Puhutaan koodieditoreista – nämä tulevat vakavasti ottaen olemaan uusia suosikkipaikkojasi viettää aikaa! Ajattele niitä henkilökohtaisena koodauspyhättönäsi, jossa vietät suurimman osan ajastasi luoden ja viimeistellen digitaalisia luomuksiasi. +Puhutaan koodieditoreista – nämä ovat todella kohta uusi lempipaikkasi viettää aikaa! Ajattele niitä henkilökohtaisina koodauspyhätöinäsi, joissa vietät suurimman osan ajastasi luoden ja hiomassa digitaalisia luomuksiasi. -Mutta tässä on modernien editorien taika: ne eivät ole vain hienoja tekstieditoreita. Ne ovat kuin sinulla olisi kaikkein loistavin, tukevin koodausmentori istumassa vieressäsi 24/7. Ne korjaavat kirjoitusvirheesi ennen kuin edes huomaat niitä, ehdottavat parannuksia, jotka saavat sinut näyttämään nerolta, auttavat sinua ymmärtämään, mitä jokainen koodin osa tekee, ja jotkut niistä voivat jopa ennustaa, mitä olet kirjoittamassa ja tarjota valmiita ehdotuksia! +Mutta tässä on uudenaikaisten editorien taika: ne eivät ole pelkkiä hienoja tekstieditoreja. Ne ovat kuin älykkäin, kannustavin koodausmentori istumassa vierelläsi 24/7. Ne nappavat kirjoitusvirheesi ennen kuin edes huomaat niitä, ehdottavat parannuksia, jotka saavat sinut näyttämään neroilta, auttavat ymmärtämään, mitä jokainen koodinpätkä tekee, ja jotkut voivat jopa ennustaa, mitä olet kirjoittamassa, ja tarjoutua viimeistelemään ajatuksesi! -Muistan, kun ensimmäisen kerran löysin automaattisen täydennyksen – tunsin kirjaimellisesti eläväni tulevaisuudessa. Aloitat kirjoittamisen, ja editorisi sanoo: "Hei, ajattelitko tätä funktiota, joka tekee juuri sen, mitä tarvitset?" Se on kuin sinulla olisi ajatustenlukija koodauskaverina! +Muistan, kun löysin automaattisen täydennyksen – tunsin konkreettisesti eläväni tulevaisuudessa. Aloitat kirjoittamisen, ja editorisi sanoo: "Hei, ajattelitko tätä funktiota, joka tekee juuri sen, mitä tarvitset?" Se on kuin mieliluennan taitoinen koodikaveri! -**Mikä tekee näistä editoreista niin uskomattomia?** +**Mikä tekee näistä editoreista niin mahtavia?** -Modernit koodieditorit tarjoavat vaikuttavan valikoiman ominaisuuksia, jotka parantavat tuottavuuttasi: +Modernit koodieditorit tarjoavat vaikuttavan joukon ominaisuuksia, jotka nopeuttavat tuottavuuttasi: | Ominaisuus | Mitä se tekee | Miksi se auttaa | -|------------|---------------|-----------------| -| **Syntaksin korostus** | Värittää koodin eri osat | Tekee koodista helpommin luettavaa ja virheet helpommin havaittavia | -| **Automaattinen täydennys** | Ehdottaa koodia kirjoittaessasi | Nopeuttaa koodausta ja vähentää kirjoitusvirheitä | -| **Virheenkorjaustyökalut** | Auttaa löytämään ja korjaamaan virheitä | Säästää tunteja ongelmien selvittämisessä | -| **Laajennukset** | Lisää erikoistuneita ominaisuuksia | Mukauta editorisi mille tahansa teknologialle | +|---------|--------------|--------------| +| **Syntaksin korostus** | Värjää koodisi eri osat | Tekee koodista helpommin luettavaa ja virheet erottuvat | +| **Automaattinen täydennys** | Ehdottaa koodia kirjoitettaessa | Nopeuttaa kirjoittamista ja vähentää kirjoitusvirheitä | +| **Debuggaustyökalut** | Auttaa löytämään ja korjaamaan virheitä | Säästää tunteja vianetsintäaikaa | +| **Lisäosat** | Lisää erikoisominaisuuksia | Muokkaa editoria mihin tahansa teknologiaan sopivaksi | | **Tekoälyavustajat** | Ehdottaa koodia ja selityksiä | Nopeuttaa oppimista ja tuottavuutta | -> 🎥 **Videomateriaali**: Haluatko nähdä nämä työkalut toiminnassa? Katso tämä [Tools of the Trade -video](https://youtube.com/watch?v=69WJeXGBdxg) saadaksesi kattavan yleiskatsauksen. +> 🎥 **Videoresurssi**: Haluatko nähdä nämä työkalut käytännössä? Katso tämä [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) saadaksesi kattavan yleiskatsauksen. #### Suositellut editorit web-kehitykseen **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Ilmainen) - Suosituin web-kehittäjien keskuudessa -- Erinomainen laajennusekosysteemi -- Sisäänrakennettu terminaali ja Git-integraatio -- **Pakolliset laajennukset**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Tekoälyllä toimivat koodiehdotukset +- Erinomainen lisäosien ekosysteemi +- Sisäinen päätelaite ja Git-integraatio +- **Pakolliset lisäosat**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Tekoälypohjaiset koodiehdotukset - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Reaaliaikainen yhteistyö - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automaattinen koodin muotoilu - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Koodin kirjoitusvirheiden tarkistus + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Kirjoitusvirheiden tarkistus koodista **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Maksullinen, ilmainen opiskelijoille) -- Kehittyneet virheenkorjaus- ja testausvälineet +- Kehittyneet debuggaus- ja testausominaisuudet - Älykäs koodin täydennys - Sisäänrakennettu versionhallinta -**Pilvipohjaiset IDE:t** (Vaihtelevat hinnat) -- [GitHub Codespaces](https://github.com/features/codespaces) - Täysi VS Code selaimessasi -- [Replit](https://replit.com/) - Loistava oppimiseen ja koodin jakamiseen -- [StackBlitz](https://stackblitz.com/) - Välitön, täyden pinon web-kehitys +**Pilvipohjaiset IDE:t** (Erilaisia hinnoitteluita) +- [GitHub Codespaces](https://github.com/features/codespaces) - Koko VS Code selaimessasi +- [Replit](https://replit.com/) - Loistava koodin oppimiseen ja jakamiseen +- [StackBlitz](https://stackblitz.com/) - Välitön täyspäinen web-kehitys + +> 💡 **Aloitusvinkki**: Aloita Visual Studio Codella – se on ilmainen, laajasti käytetty teollisuudessa ja siinä on valtava yhteisö, joka luo hyödyllisiä tutoriaaleja ja lisäosia. -> 💡 **Aloitusvinkki**: Aloita Visual Studio Codella – se on ilmainen, laajasti käytetty teollisuudessa ja sillä on valtava yhteisö, joka luo hyödyllisiä opetusmateriaaleja ja laajennuksia. ### Verkkoselaimet: Salainen kehityslaboratoriosi -Okei, valmistaudu hämmästymään täysin! Tiedätkö, miten olet käyttänyt selaimia -Kun joku näytti minulle selaimen DevTools-työkalut ensimmäistä kertaa, vietin noin kolme tuntia vain klikkaillen ympäriinsä ja huudahdellen: "MITÄ, SE OSAA TEHDÄ TUONKIN?!" Voit kirjaimellisesti muokata mitä tahansa verkkosivustoa reaaliajassa, nähdä tarkalleen kuinka nopeasti kaikki latautuu, testata miltä sivustosi näyttää eri laitteilla ja jopa debugata JavaScriptiä kuin todellinen ammattilainen. Se on aivan uskomatonta! +Okei, valmistaudu kokemaan täydellinen ihmettely! Tiedätkö, kuinka olet käyttänyt selaimia selataksesi somea ja katsellaksesi videoita? No, ilmeisesti ne ovat piilottaneet tämän uskomattoman salaisen kehityslaboratorion koko ajan, odottaen vain, että löydät sen! + +Joka kerta, kun napsautat hiiren oikealla verkkosivulla ja valitset "Tarkastele elementtiä", avaat piilotetun maailmankehittäjätyökalut, jotka ovat rehellisesti voimakkaampia kuin jotkut kalliit ohjelmistot, joista olen maksanut satoja euroja. Se on kuin huomaisit, että tavallinen keittiösi on kätkenyt ammattilaiskokin laboratorion salapaneelin taakse! +Ensimmäisellä kerralla kun joku näytti minulle selaimen DevTools-työkalut, vietin noin kolme tuntia klikkaillen ympäriinsä ja ajatellen "ODOTA, VOI SE TEHDÄ SENKIN?!" Voit kirjaimellisesti muokata mitä tahansa verkkosivustoa reaaliajassa, nähdä tarkalleen kuinka nopeasti kaikki latautuu, testata miltä sivustosi näyttää eri laitteilla ja jopa virheenkorjata JavaScriptiä kuin oikea ammattilainen. Se on täysin uskomatonta! **Tässä syy, miksi selaimet ovat salainen aseesi:** -Kun luot verkkosivuston tai -sovelluksen, sinun täytyy nähdä, miltä se näyttää ja miten se toimii oikeassa maailmassa. Selaimet eivät ainoastaan näytä työtäsi, vaan ne tarjoavat myös yksityiskohtaista palautetta suorituskyvystä, saavutettavuudesta ja mahdollisista ongelmista. +Kun luot verkkosivustoa tai web-sovellusta, sinun täytyy nähdä, miltä se näyttää ja miten se käyttäytyy todellisessa maailmassa. Selaimet eivät pelkästään näytä työtäsi vaan tarjoavat myös yksityiskohtaista palautetta suorituskyvystä, saavutettavuudesta ja mahdollisista ongelmista. #### Selaimen kehittäjätyökalut (DevTools) -Modernit selaimet sisältävät kattavat kehitystyökalut: +Nykyaikaiset selaimet sisältävät kattavat kehityspaketit: -| Työkalukategoria | Mitä se tekee | Esimerkki käyttötapauksesta | -|------------------|---------------|-----------------------------| -| **Element Inspector** | Näytä ja muokkaa HTML/CSS reaaliajassa | Muokkaa tyylejä ja näe tulokset heti | -| **Konsoli** | Näytä virheilmoitukset ja testaa JavaScriptiä | Debugaa ongelmia ja kokeile koodia | -| **Verkkoseuranta** | Seuraa resurssien latautumista | Optimoi suorituskyky ja latausajat | -| **Saavutettavuuden tarkistus** | Testaa inklusiivista suunnittelua | Varmista, että sivustosi toimii kaikille käyttäjille | +| Työkaluluokka | Mitä se tekee | Käyttötapausesimerkki | +|---------------|--------------|------------------| +| **Elementtien tarkastaja** | Näytä ja muokkaa HTML:ää/CSS:ää reaaliajassa | Säädä muotoilua nähdäksesi välittömät tulokset | +| **Konsoli** | Näytä virheilmoituksia ja testaa JavaScriptiä | Virheenkorjaa ongelmia ja kokeile koodia | +| **Verkon valvoja** | Seuraa resurssien latautumista | Optimoi suorituskykyä ja latausaikoja | +| **Saavutettavuuden tarkistin** | Testaa inklusiivista suunnittelua | Varmista, että sivustosi toimii kaikille käyttäjille | | **Laitteiden simulaattori** | Esikatsele eri näyttökokoja | Testaa responsiivista suunnittelua ilman useita laitteita | #### Suositellut selaimet kehitykseen -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Alan standardi DevTools-työkaluilla ja kattavalla dokumentaatiolla -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Erinomainen CSS Grid- ja saavutettavuustyökalu -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Perustuu Chromiumiin ja sisältää Microsoftin kehittäjäresurssit +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Alan standardin DevTools laajalla dokumentaatiolla +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Erinomainen CSS Grid- ja saavutettavuustyökalut +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Chromium-pohjainen Microsoftin kehittäjäresursseilla + +> ⚠️ **Tärkeä testausvinkki**: Testaa aina verkkosivujasi useissa selaimissa! Mikä toimii täydellisesti Chromessa, saattaa näyttää erilaiselta Safarissa tai Firefoxissa. Ammattimaiset kehittäjät testaavat kaikissa suurimmissa selaimissa varmistaakseen yhtenäisen käyttökokemuksen. -> ⚠️ **Tärkeä testausvinkki**: Testaa verkkosivustosi aina useilla selaimilla! Se, mikä toimii täydellisesti Chromessa, saattaa näyttää erilaiselta Safarissa tai Firefoxissa. Ammattikehittäjät testaavat kaikilla suurilla selaimilla varmistaakseen yhtenäisen käyttäjäkokemuksen. -### Komentorivityökalut: Kehittäjän supervoimien portti +### Komentorivityökalut: Porttisi kehittäjän supervoimiin -Okei, ollaanpa täysin rehellisiä komentorivistä, koska haluan kertoa tämän sinulle sellaiselta, joka todella ymmärtää. Kun näin sen ensimmäistä kertaa – vain pelottava musta ruutu vilkkuvalla tekstillä – ajattelin kirjaimellisesti: "Ei, ei todellakaan! Tämä näyttää joltain 1980-luvun hakkerielokuvasta, enkä todellakaan ole tarpeeksi fiksu tähän!" 😅 +Okei, nyt ollaan täysin rehellisiä hetken ajan komentorivistä, koska haluan sinun kuulevan tämän jonkun, joka todella ymmärtää. Kun näin sen ensimmäisen kerran – pelottavan mustan ruudun välkkyvine teksteineen – ajattelin kirjaimellisesti: "Ei kiitos, ei todellakaan! Tämä näyttää joltakin 1980-luvun hakkelointielokuvasta, enkä ole varmasti tarpeeksi älykäs tähän!" 😅 -Mutta tässä on se, mitä toivon jonkun kertoneen minulle silloin, ja mitä kerron sinulle nyt: komentorivi ei ole pelottava – se on itse asiassa kuin suora keskustelu tietokoneesi kanssa. Ajattele sitä kuin eroa tilata ruokaa hienon sovelluksen kautta, jossa on kuvia ja valikoita (mikä on mukavaa ja helppoa), verrattuna siihen, että astut sisään suosikkiravintolaasi, jossa kokki tietää tarkalleen, mistä pidät, ja voi loihtia jotain täydellistä vain sanomalla "yllätä minut jollain mahtavalla." +Mutta tässä on se, mitä toivon jonkun olisi kertonut minulle silloin ja mitä sanon sinulle nyt: komentorivi ei ole pelottava – se on oikeastaan kuin suora keskustelu tietokoneesi kanssa. Ajattele sitä kuin eroa ruoan tilaamisessa hienon sovelluksen kautta kuvineen ja menuineen (mukavaa ja helppoa) ja suosikkiravintolaasi kävelemisessä, jossa kokki tietää tarkasti, mitä tykkäät, ja voi loihtia täydellisen aterian vain sanomalla "yllätytä minut jollain mahtavalla". -Komentorivi on paikka, jossa kehittäjät tuntevat itsensä todellisiksi velhoiksi. Kirjoitat muutaman taianomaisen sanan (okei, ne ovat vain komentoja, mutta ne tuntuvat taianomaisilta!), painat enteriä, ja BOOM – olet luonut kokonaisia projektirakenteita, asentanut tehokkaita työkaluja ympäri maailmaa tai julkaissut sovelluksesi internetiin miljoonien ihmisten nähtäväksi. Kun saat ensimmäisen maistiaisen siitä voimasta, se on rehellisesti sanottuna melko koukuttavaa! +Komentorivi on paikka, johon kehittäjät menevät tunteakseen itsensä totaalihaltijoiksi. Kirjoitat pari näennäisesti taianomaista sanaa (okei, ne ovat vain komentoja, mutta ne tuntuvat taianomaisilta!), painat enteriä ja BOOM – olet luonut kokonaisia projektirakenteita, asentanut maailmalta tehokkaita työkaluja tai julkaissut sovelluksesi internetissä miljoonien nähtäväksi. Kun maistat ensimmäisen kerran tätä voimaa, se voi todellakin olla koukuttavaa! **Miksi komentorivistä tulee suosikkityökalusi:** -Vaikka graafiset käyttöliittymät ovat hyviä moniin tehtäviin, komentorivi loistaa automaatiossa, tarkkuudessa ja nopeudessa. Monet kehitystyökalut toimivat ensisijaisesti komentorivikäyttöliittymien kautta, ja niiden tehokas käyttö voi parantaa tuottavuuttasi merkittävästi. +Vaikka graafiset käyttöliittymät ovat hienoja moniin tehtäviin, komentorivi loistaa automaatiossa, tarkkuudessa ja nopeudessa. Monet kehitystyökalut toimivat pääasiassa komentorivikäyttöliittymien kautta, ja niiden tehokas käyttö voi parantaa tuottavuuttasi merkittävästi. ```bash -# Step 1: Create and navigate to project directory +# Vaihe 1: Luo projektihakemisto ja siirry sinne mkdir my-awesome-website cd my-awesome-website ``` -**Tämä koodi tekee seuraavaa:** -- **Luo** uuden hakemiston nimeltä "my-awesome-website" projektillesi -- **Siirry** juuri luotuun hakemistoon aloittaaksesi työn +**Tässä mitä tämä koodi tekee:** +- **Luo** uuden hakemiston nimeltä "my-awesome-website" projektiisi varten +- **Siirry** vastaluotuun hakemistoon aloittaaksesi työskentelyn ```bash -# Step 2: Initialize project with package.json +# Vaihe 2: Alusta projekti package.json-tiedostolla npm init -y -# Install modern development tools +# Asenna nykyaikaiset kehitystyökalut npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **Vaihe vaiheelta, tässä tapahtuu:** -- **Alustetaan** uusi Node.js-projekti oletusasetuksilla komennolla `npm init -y` -- **Asennetaan** Vite moderniksi rakennustyökaluksi nopeaan kehitykseen ja tuotantoversioihin -- **Lisätään** Prettier automaattiseen koodin muotoiluun ja ESLint koodin laadun tarkistamiseen -- **Käytetään** `--save-dev`-lippua merkitsemään nämä vain kehityskäyttöön tarkoitetuiksi riippuvuuksiksi +- **Alusta** uusi Node.js-projekti oletusasetuksilla komennolla `npm init -y` +- **Asenna** Vite modernina rakennustyökaluna nopeaan kehitykseen ja tuotantoon +- **Lisää** Prettier automaattiseen koodin muotoiluun ja ESLint koodin laadun tarkistukseen +- **Käytä** `--save-dev` lipuketta merkkaamaan nämä vain kehitysaikaisiksi riippuvuuksiksi ```bash -# Step 3: Create project structure and files +# Vaihe 3: Luo projektin rakenne ja tiedostot mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Käynnistä kehityspalvelin npx vite ``` -**Yllä olevassa olemme:** -- **Järjestäneet** projektimme luomalla erilliset kansiot lähdekoodille ja aineistoille -- **Luoneet** perus HTML-tiedoston asianmukaisella dokumenttirakenteella -- **Käynnistäneet** Vite-kehityspalvelimen live-päivityksille ja moduulien kuuman korvaamisen tueksi +**Yllä olemme:** +- **Järjestäneet** projektin luomalla erilliset kansiot lähdekoodille ja resursseille +- **Generoineet** yksinkertaisen HTML-tiedoston oikealla asiakirjarakenteella +- **Käynnistäneet** Viten kehityspalvelimen live-latauksella ja kuuman moduulin korvauksella -#### Välttämättömät komentorivityökalut web-kehitykseen +#### Oleelliset komentorivityökalut web-kehitykseen -| Työkalu | Tarkoitus | Miksi tarvitset sen | -|---------|----------|---------------------| -| **[Git](https://git-scm.com/)** | Versionhallinta | Seuraa muutoksia, tee yhteistyötä muiden kanssa, varmuuskopioi työsi | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript-ajonaika & pakettien hallinta | Aja JavaScriptiä selainten ulkopuolella, asenna moderneja kehitystyökaluja | -| **[Vite](https://vitejs.dev/)** | Rakennustyökalu & kehityspalvelin | Salamannopea kehitys kuuman moduulien korvaamisen avulla | -| **[ESLint](https://eslint.org/)** | Koodin laatu | Löydä ja korjaa automaattisesti ongelmat JavaScriptissäsi | -| **[Prettier](https://prettier.io/)** | Koodin muotoilu | Pidä koodisi johdonmukaisesti muotoiltuna ja helposti luettavana | +| Työkalu | Tarkoitus | Miksi tarvitset sitä | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Versionhallinta | Seuraa muutoksia, tee yhteistyötä, varmuuskopioi työsi | +| **[Node.js & npm](https://nodejs.org/)** | JavaScriptin suoritusympäristö ja pakettien hallinta | Aja JavaScriptiä selainten ulkopuolella, asenna nykyaikaisia kehitystyökaluja | +| **[Vite](https://vitejs.dev/)** | Rakennustyökalu ja kehityspalvelin | Salamannopea kehitys kuuman moduulin korvauksella | +| **[ESLint](https://eslint.org/)** | Koodin laatu | Etsi ja korjaa JavaScript-ongelmia automaattisesti | +| **[Prettier](https://prettier.io/)** | Koodin muotoilu | Pidä koodi johdonmukaisesti muotoiltuna ja luettavana | #### Alustakohtaiset vaihtoehdot **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderni, monipuolinen terminaali -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tehokas skriptikieliympäristö -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Perinteinen Windows-komentorivi +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Moderni, monipuolinen terminaali +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Tehokas skriptausympäristö +- **[Komentokehote (Command Prompt)](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Perinteinen Windowsin komentorivi **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Sisäänrakennettu terminaalisovellus -- **[iTerm2](https://iterm2.com/)** - Parannettu terminaali edistyneillä ominaisuuksilla +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Valmiiksi asennettu pääteohjelma +- **[iTerm2](https://iterm2.com/)** – Paranneltu terminaali edistyneillä ominaisuuksilla **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Linuxin vakio komentokuori -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Edistynyt terminaaliemulaattori +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Vakio Linux-kuori +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – Edistynyt terminaaliemulaattori > 💻 = Esiasennettu käyttöjärjestelmään -> 🎯 **Oppimispolku**: Aloita peruskomennoilla, kuten `cd` (vaihda hakemistoa), `ls` tai `dir` (näytä tiedostot) ja `mkdir` (luo kansio). Harjoittele nykyaikaisia työnkulkuun liittyviä komentoja, kuten `npm install`, `git status` ja `code .` (avaa nykyinen hakemisto VS Codessa). Kun tunnet olosi mukavammaksi, opit luonnollisesti lisää kehittyneitä komentoja ja automaatiotekniikoita. +> 🎯 **Oppimispolku**: Aloita peruskomentoja kuten `cd` (vaihda hakemistoa), `ls` tai `dir` (näytä tiedostot) ja `mkdir` (luo kansio). Harjoittele moderneilla työnkulun komennoilla kuten `npm install`, `git status` ja `code .` (avaa nykyinen hakemisto VS Codessa). Kun tulet varmemmaksi, opit luonnollisesti edistyneempiä komentoja ja automaatiotekniikoita. + -### Dokumentaatio: Aina saatavilla oleva oppaasi +### Dokumentaatio: Aina saatavilla oleva oppimisoppaasi -Okei, haluan jakaa pienen salaisuuden, joka saa sinut tuntemaan olosi paljon paremmaksi aloittelijana: jopa kokeneimmat kehittäjät viettävät suuren osan ajastaan dokumentaatiota lukien. Eikä se johdu siitä, etteivät he tietäisi mitä tekevät – se on itse asiassa merkki viisaudesta! +Kerrotaanpa pieni salaisuus, joka saa sinut tuntemaan olosi paljon mukavammaksi aloittelijana: jopa kokeneimmat kehittäjät käyttävät suuren osan ajastaan dokumentaation lukemiseen. Eikä se johdu siitä, etteivätkö he tietäisi, mitä tekevät – se on itse asiassa merkki viisaudesta! -Ajattele dokumentaatiota kuin maailman kärsivällisimmät ja asiantuntevimmat opettajat, jotka ovat saatavilla 24/7. Ongelma keskellä yötä? Dokumentaatio on siellä lämpimän virtuaalisen halauksen ja juuri oikean vastauksen kanssa. Haluatko oppia jostain siististä uudesta ominaisuudesta, josta kaikki puhuvat? Dokumentaatio auttaa sinua askel askeleelta. Yritätkö ymmärtää, miksi jokin toimii niin kuin toimii? Kyllä – dokumentaatio selittää sen tavalla, joka vihdoin avaa silmäsi! +Ajattele dokumentaatiota kuin pääsyä maailman kärsivällisimpiin, asiantunteviin opettajiin, jotka ovat saatavilla 24/7. Jumiuduit ongelmaan klo 2 yöllä? Dokumentaatio on siellä lämpimällä virtuaalihalauksella ja juuri oikealla vastauksella. Haluatko oppia uudesta siististä ominaisuudesta, josta kaikki puhuvat? Dokumentaatio auttaa askel askeleelta esimerkeillä. Yrität ymmärtää, miksi jokin toimii juuri niin kuin se toimii? Arvasit oikein – dokumentaatio selittää sen tavalla, joka viimein saa ahaa-elämyksen aikaan! -Tässä on jotain, mikä muutti täysin näkökulmani: verkkokehityksen maailma liikkuu uskomattoman nopeasti, eikä kukaan (siis ei kukaan!) muista kaikkea ulkoa. Olen nähnyt 15+ vuoden kokemuksen omaavien seniorikehittäjien etsivän perussyntaksia, ja tiedätkö mitä? Se ei ole noloa – se on fiksua! Kyse ei ole täydellisestä muistista, vaan siitä, että osaa löytää luotettavat vastaukset nopeasti ja ymmärtää, miten niitä sovelletaan. +Tässä on jotakin, mikä kokonaan muutti näkemykseni: web-kehityksen maailma liikkuu uskomattoman nopeasti, eikä kukaan (tarkoitan ihan ketään!) muista kaikkea ulkoa. Olen nähnyt kokeneita kehittäjiä, joilla on yli 15 vuoden kokemus, hakemassa perustason syntakseja, ja tiedätkö mitä? Se ei ole mitään hävettävää – se on fiksua! Kyse ei ole täydellisestä muistista, vaan siitä, että tietää mistä löytää luotettavat vastaukset nopeasti ja osaa soveltaa niitä. -**Tässä tapahtuu todellinen taika:** +**Tässä todellinen taika tapahtuu:** -Ammattikehittäjät käyttävät merkittävän osan ajastaan dokumentaation lukemiseen – ei siksi, etteivät he tietäisi mitä tekevät, vaan koska verkkokehityksen kenttä kehittyy niin nopeasti, että ajan tasalla pysyminen vaatii jatkuvaa oppimista. Hyvä dokumentaatio auttaa sinua ymmärtämään, ei vain *miten* jotain käytetään, vaan myös *miksi* ja *milloin* sitä käytetään. +Ammattilaiset käyttävät merkittävän osan ajastaan dokumentaation lukemiseen – ei siksi, etteivätkö he tietäisi, mitä tekevät, vaan siksi, että web-kehityksen kenttä muuttuu niin nopeasti, että ajan tasalla pysyminen vaatii jatkuvaa opiskelua. Hyvä dokumentaatio auttaa ymmärtämään, ei pelkästään *miten* jotain käytetään, vaan *miksi* ja *milloin* sitä tehdään. -#### Välttämättömät dokumentaatioresurssit +#### Tärkeitä dokumentaatiolähteitä **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Verkkoteknologian dokumentaation kultastandardi -- Kattavat oppaat HTML:stä, CSS:stä ja JavaScriptistä +- Kultastandardi verkkoteknologian dokumentaatiossa +- Laajat oppaat HTML:stä, CSS:stä ja JavaScriptistä - Sisältää selainten yhteensopivuustiedot -- Tarjoaa käytännön esimerkkejä ja interaktiivisia demoja +- Käytännön esimerkit ja interaktiiviset demot **[Web.dev](https://web.dev)** (Googlelta) -- Modernin verkkokehityksen parhaat käytännöt +- Modernit web-kehityksen parhaat käytännöt - Suorituskyvyn optimointiohjeet -- Saavutettavuuden ja inklusiivisen suunnittelun periaatteet -- Tapaustutkimuksia tosielämän projekteista +- Saavutettavuus ja inklusiivisen suunnittelun periaatteet +- Tapaustutkimuksia oikeista projekteista **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Edge-selaimen kehitysresurssit -- Progressiivisten verkkosovellusten oppaat -- Alustojen välisten kehitysten näkemykset +- Edge-selaimen kehitysjulkaisut +- Progressiivisten web-appien ohjeet +- Monialustainen kehitystietoisuus **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Jäsenneltyjä oppimispolkuja -- Videokursseja alan asiantuntijoilta -- Käytännön koodausharjoituksia +- Jäsennellyt oppimiskurssit +- Video-opetuksia alan asiantuntijoilta +- Käytännön koodiharjoituksia -> 📚 **Opiskelustrategia**: Älä yritä opetella dokumentaatiota ulkoa – opettele sen sijaan navigoimaan siinä tehokkaasti. Tallenna usein käytetyt viitteet kirjanmerkkeihin ja harjoittele hakutoimintojen käyttöä löytääksesi nopeasti tietoa. +> 📚 **Opiskelustrategia**: Älä yritä opetella dokumentaatiota ulkoa – opettele navigoimaan siinä tehokkaasti. Kirjanmerkitä usein käytettyjä lähteitä ja harjoittele hakutoimintojen käyttöä löytääksesi tietoa nopeasti. -### 🔧 **Työkalujen hallinnan tarkistus: Mikä innostaa sinua?** +### 🔧 **Työkalujen hallinnan tarkistus: Mikä resonoi sinussa?** -**Pysähdy hetkeksi miettimään:** -- Mikä työkalu innostaa sinua eniten kokeilemaan ensimmäisenä? (Ei ole väärää vastausta!) -- Tuntuuko komentorivi edelleen pelottavalta, vai herättääkö se uteliaisuutesi? -- Voitko kuvitella käyttäväsi selaimen DevTools-työkaluja kurkistaaksesi suosikkisivustojesi kulissien taakse? +**Harkitse hetki:** +- Mikä työkalu innostaa sinua eniten kokeilemaan ensin? (Ei ole väärää vastausta!) +- Tuntuuko komentorivi edelleen pelottavalta vai oletko utelias sitä kohtaan? +- Voitko kuvitella käyttäväsi selaimen DevToolsia kurkistamaan suosikkisivustojesi kulissien taakse? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "Kehittäjän Aika Työkalujen Parissa" + "Koodieditori" : 40 + "Selaintestaus" : 25 + "Komentorivi" : 15 + "Dokumentaatioiden Lukeminen" : 15 + "Virheidenetsintä" : 5 ``` +> **Hauska havainto**: Useimmat kehittäjät viettävät noin 40 % ajastaan koodieditorissa, mutta huomaa kuinka paljon aikaa menee testaamiseen, oppimiseen ja ongelmanratkaisuun. Ohjelmointi ei ole pelkästään koodin kirjoittamista – se on käyttäjäkokemusten luomista! -> **Hauska huomio**: Useimmat kehittäjät viettävät noin 40 % ajastaan koodieditorissa, mutta huomaa, kuinka paljon aikaa kuluu testaamiseen, oppimiseen ja ongelmanratkaisuun. Ohjelmointi ei ole vain koodin kirjoittamista – se on kokemusten luomista! - -✅ **Ajateltavaa**: Tässä jotain mielenkiintoista pohdittavaa – miten luulet verkkosivustojen rakentamiseen käytettävien työkalujen (kehitys) eroavan niiden ulkoasun suunnitteluun käytettävistä työkaluista (suunnittelu)? Se on kuin ero arkkitehdin, joka suunnittelee kauniin talon, ja urakoitsijan, joka sen oikeasti rakentaa. Molemmat ovat ratkaisevan tärkeitä, mutta he tarvitsevat erilaiset työkalupakit! Tällainen ajattelu auttaa sinua näkemään laajemman kuvan siitä, miten verkkosivustot syntyvät. +✅ **Ajatuksen aihetta**: Tässä mielenkiintoinen pohdinta – miten luulet, että työkalut verkkosivustojen rakentamiseen (kehitys) eroavat niistä, mitä käytetään sivuston ulkoasun suunnitteluun (design)? Se on kuin ero arkkitehdin, joka suunnittelee kauniin talon, ja urakoitsijan välillä, joka sen rakentaa. Molemmat ovat elintärkeitä, mutta tarvitsevat erilaiset työkalupakit! Tällainen ajattelu auttaa sinua todella näkemään laajemmin, miten verkkosivustot elävät. -## GitHub Copilot Agent -haaste 🚀 +## GitHub Copilot Agent Challenge 🚀 Käytä Agent-tilaa suorittaaksesi seuraavan haasteen: -**Kuvaus:** Tutki modernin koodieditorin tai IDE:n ominaisuuksia ja osoita, kuinka se voi parantaa työskentelyäsi web-kehittäjänä. +**Kuvaus:** Tutki modernin koodieditorin tai IDE:n ominaisuuksia ja osoita, miten se voi parantaa työnkulkuasi web-kehittäjänä. -**Tehtävä:** Valitse koodieditori tai IDE (kuten Visual Studio Code, WebStorm tai pilvipohjainen IDE). Listaa kolme ominaisuutta tai laajennusta, jotka auttavat sinua kirjoittamaan, debuggaamaan tai ylläpitämään koodia tehokkaammin. Kerro lyhyesti, miten kukin hyödyttää työskentelyäsi. +**Pyyntö:** Valitse koodieditori tai IDE (kuten Visual Studio Code, WebStorm tai pilvipohjainen IDE). Listaa kolme ominaisuutta tai laajennusta, jotka auttavat sinua kirjoittamaan, virheenkorjaamaan tai ylläpitämään koodia tehokkaammin. Anna jokaiselle lyhyt selitys siitä, miten se hyödyttää työnkulkusi. --- ## 🚀 Haaste -**Oletko valmis ensimmäiseen tehtävääsi, salapoliisi?** +**Okei, etsivä, oletko valmis ensimmäiseen tapaustasi?** -Nyt kun sinulla on tämä mahtava perusta, minulla on seikkailu, joka auttaa sinua näkemään, kuinka uskomattoman monipuolinen ja kiehtova ohjelmointimaailma todella on. Ja kuuntele – tämä ei vielä koske koodin kirjoittamista, joten ei paineita! Ajattele itseäsi ohjelmointikielten salapoliisina ensimmäisellä jännittävällä tehtävällään! +Nyt kun sinulla on tämä mahtava perusta, minulla on seikkailu, joka auttaa sinua näkemään, kuinka uskomattoman monipuolinen ja kiehtova ohjelmointimaailma oikeasti on. Kuuntele – tässä ei vielä kirjoiteta koodia, eli ei painetta! Ajattele itseäsi ohjelmointikielten etsivänä ensimmäisessä jännittävässä tapauksessasi! -**Tehtäväsi, jos päätät hyväksyä sen:** -1. **Ryhdy kielitutkijaksi**: Valitse kolme ohjelmointikieltä täysin eri maailmoista – ehkä yksi, joka rakentaa verkkosivustoja, yksi, joka luo mobiilisovelluksia, ja yksi, joka käsittelee dataa tutkijoille. Etsi esimerkkejä samasta yksinkertaisesta tehtävästä, joka on kirjoitettu jokaisella kielellä. Lupaan, että hämmästyt siitä, kuinka erilaisilta ne voivat näyttää tehdessään täsmälleen samaa asiaa! +**Tehtäväsi, jos hyväksyt:** +1. **Tule kielen tutkijaksi**: Valitse kolme ohjelmointikieltä täysin eri etäisyyksiltä – vaikkapa yksi verkkosivustoja rakentava, yksi mobiilisovelluksia luova ja yksi tutkijoiden datan käsittelyyn käyttämä. Löydä esimerkkejä samasta yksinkertaisesta tehtävästä kirjoitettuna jokaisella kielellä. Lupaan, että tulet olemaan ihan hämmästynyt siitä, kuinka erilaisilta ne voivat näyttää samalla tehdessään täysin samaa asiaa! -2. **Paljasta niiden alkuperätarinat**: Mikä tekee kustakin kielestä erityisen? Tässä on siisti fakta – jokainen ohjelmointikieli on luotu, koska joku ajatteli: "Tiedätkö mitä? Tähän tiettyyn ongelmaan täytyy olla parempi ratkaisu." Voitko selvittää, mitkä nuo ongelmat olivat? Jotkut näistä tarinoista ovat todella kiehtovia! +2. **Paljasta niiden alkuperätarinat**: Mikä tekee kustakin kielestä erikoisen? Tässä kiva fakta – jokainen ohjelmointikieli on luotu siksi, että joku ajatteli: "Tiedätkö mitä? Täytyy olla parempi tapa ratkaista tämä tietty ongelma." Voitko selvittää, mitkä nämä ongelmat olivat? Jotkut näistä tarinoista ovat todella kiehtovia! -3. **Tutustu yhteisöihin**: Katso, kuinka tervetulleita ja intohimoisia kunkin kielen yhteisöt ovat. Joillakin on miljoonia kehittäjiä, jotka jakavat tietoa ja auttavat toisiaan, toisilla on pienempi mutta erittäin tiivis ja tukeva yhteisö. Tulet rakastamaan nähdäksesi, kuinka erilaisia persoonallisuuksia näillä yhteisöillä on! +3. **Tapaa yhteisöt**: Tutki, kuinka vastaanottavaisia ja intohimoisia kunkin kielen yhteisö on. Joillakin on miljoonia kehittäjiä jakamassa tietoa ja auttamassa toisiaan, toisilla on pienempi mutta äärimmäisen tiivis ja tukeva yhteisö. Tulet rakastamaan nähdä, millaisia persoonallisuuksia näillä yhteisöillä on! -4. **Kuuntele vaistoasi**: Mikä kieli tuntuu sinulle tällä hetkellä lähestyttävimmältä? Älä stressaa "täydellisen" valinnan tekemisestä – kuuntele vain vaistojasi! Tässä ei ole väärää vastausta, ja voit aina tutkia muita myöhemmin. +4. **Seuraa vaistoasi**: Mikä kieli tuntuu sinusta lähestyttävimmältä juuri nyt? Älä stressaa "täydellisen" valinnan tekemisestä – kuuntele vaan vaistojasi! Tässä ei ole oikeaa tai väärää vastausta, ja voit aina tutustua muihin myöhemmin. -**Bonus salapoliisityö**: Selvitä, mitkä suuret verkkosivustot tai sovellukset on rakennettu kunkin kielen avulla. Takaan, että tulet hämmästymään, kun saat selville, mikä pyörittää Instagramia, Netflixiä tai sitä mobiilipeliä, jota et voi lopettaa -## Arviointi ja itseopiskelu +**Lisävinkki etsivälle**: Katso, voitko löytää, millä suurilla verkkosivustoilla tai sovelluksilla kukin kieli on rakennettu. Takaan, että tulet järkyttymään, kun opit, mikä voimavara on Instagramin, Netflixin tai sen mobiilipelin takana, jota et voi lopettaa pelaamasta! -**Ota aikaa tutkiaksesi ja nauttiaksesi siitä!** +> 💡 **Muista**: Et yritä tulla asiantuntijaksi yhdessäkään näistä kielistä tänään. Olet vain tutustumassa ympäristöön ennen kuin päätät, mihin haluat asettua. Ota aikaa, pidä hauskaa ja anna uteliaisuutesi ohjata sinua! -Olet oppinut tänään paljon, ja siitä voit olla ylpeä! Nyt alkaa hauska osuus – tutkia aiheita, jotka herättivät uteliaisuutesi. Muista, tämä ei ole läksy – tämä on seikkailu! +## Juhlistetaan Löytöjäsi! -**Sukella syvemmälle asioihin, jotka innostavat sinua:** +Vau, olet sisäistänyt niin paljon uskomatonta tietoa tänään! Olen aidosti innoissani nähdessäni, kuinka paljon tästä mahtavasta matkasta on jäänyt mieleesi. Ja muista – tämä ei ole testi, jossa pitää saada kaikki täydellisesti. Tämä on enemmänkin juhla kaikista siisteistä asioista, joita olet oppinut tästä kiehtovasta maailmasta, johon olet sukeltamassa! -**Tutustu ohjelmointikieliin käytännössä:** -- Käy 2-3 sinua kiinnostavan ohjelmointikielen virallisilla verkkosivuilla. Jokaisella niistä on oma persoonallisuutensa ja tarinansa! -- Kokeile online-koodausalustoja, kuten [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) tai [Replit](https://replit.com/). Älä pelkää kokeilla – et voi rikkoa mitään! -- Lue, miten suosikkikielesi syntyi. Oikeasti, jotkut näistä tarinoista ovat todella kiehtovia ja auttavat sinua ymmärtämään, miksi kielet toimivat niin kuin toimivat. +[Suorita oppitunnin jälkeinen tietovisa](https://ff-quizzes.netlify.app/web/) -**Tule tutuksi uusien työkalujesi kanssa:** -- Lataa Visual Studio Code, jos et ole vielä tehnyt sitä – se on ilmainen ja tulet rakastamaan sitä! -- Käytä muutama minuutti Extensions-markkinapaikan selaamiseen. Se on kuin sovelluskauppa koodieditorillesi! -- Avaa selaimesi kehittäjätyökalut ja klikkaile ympäriinsä. Älä huolehdi, jos et ymmärrä kaikkea – tutustu vain siihen, mitä siellä on. +## Kertaus & Itsenäinen opiskelu -**Liity yhteisöön:** -- Seuraa joitakin kehittäjäyhteisöjä [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) tai [GitHub](https://github.com/) -sivustoilla. Ohjelmointiyhteisö on uskomattoman vastaanottavainen uusille tulokkaille! -- Katso joitakin aloittelijaystävällisiä koodausvideoita YouTubesta. Siellä on paljon mahtavia sisällöntuottajia, jotka muistavat, millaista on aloittaa alusta. -- Harkitse liittymistä paikallisiin tapaamisiin tai online-yhteisöihin. Uskokaa pois, kehittäjät rakastavat auttaa uusia tulokkaita! +**Ota aikaa tutkia ja pidä hauskaa!** +Olet edennyt tänään pitkälle, ja se on jotain, mistä voit olla ylpeä! Nyt tulee hauska osuus – tutkia aiheita, jotka herättivät uteliaisuutesi. Muista, tämä ei ole kotitehtävä – tämä on seikkailu! -> 🎯 **Kuuntele, tässä on mitä haluan sinun muistavan**: Sinun ei odoteta tulevan koodausvelhoksi yhdessä yössä! Juuri nyt tutustut tähän hämmästyttävään uuteen maailmaan, johon olet liittymässä. Ota aikaa, nauti matkasta ja muista – jokainen ihailemasi kehittäjä oli kerran täsmälleen samassa tilanteessa kuin sinä nyt, innostunut ja ehkä hieman hämmentynyt. Se on täysin normaalia, ja se tarkoittaa, että teet kaiken oikein. +**Sukella syvemmälle siihen, mikä innostaa sinua:** ---- +**Perehdy ohjelmointikieliin:** +- Vieraile 2-3 kielten virallisilla verkkosivuilla, jotka kiinnittivät huomiosi. Jokaisella on oma persoonallisuutensa ja tarinansa! +- Kokeile joitakin online-koodausympäristöjä kuten [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) tai [Replit](https://replit.com/). Älä pelkää kokeilla – et voi rikkoa mitään! +- Lue, miten lempiohjelmointikielesi sai alkunsa. Oikeasti, jotkut näistä alkuperätarinoista ovat kiehtovia ja auttavat sinua ymmärtämään, miksi kielet toimivat niin kuin toimivat. + +**Tutustu uusiin työkaluihisi:** +- Lataa Visual Studio Code, jos et vielä ole tehnyt niin – se on ilmainen ja tulet rakastamaan sitä! +- Käy läpi muutama minuutti Extensions-markkinapaikkaa. Se on kuin sovelluskauppa koodieditorillesi! +- Avaa selaimesi Developer Tools ja klikkaa ympäriinsä. Älä huoli, vaikka et ymmärtäisi kaikkea – tutustu vain siihen, mitä siellä on. + +**Liity yhteisöön:** +- Seuraa joitakin kehittäjäyhteisöjä [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) tai [GitHub](https://github.com/) -sivustoilla. Ohjelmointiyhteisö on todella tervetullut uusille tulokkaille! +- Katso aloittelijaystävällisiä koodausvideoita YouTubesta. On niin monia mahtavia tekijöitä, jotka muistavat, miltä alkutaival tuntuu. +- Harkitse liittymistä paikallisiin tapaamisiin tai verkkoyhteisöihin. Usko pois, kehittäjät rakastavat auttaa aloittelijoita! + +> 🎯 **Kuuntele, tässä mitä haluan sinun muistavan**: Sinulta ei odoteta, että sinusta tulee koodausvelho yhdessä yössä! Nyt olet vasta tutustumassa tähän hämmästyttävään uuteen maailmaan, johon olet liittymässä. Ota aikasi, nauti matkasta, ja muista – jokainen kehittäjä, jota ihailet, istui joskus täsmälleen siinä missä sinä nyt olet, innostuneena ja ehkä vähän hermostuneena. Se on täysin normaalia, ja se tarkoittaa, että teet oikein! ## Tehtävä -[Dokumentaation lukeminen](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **Pieni vinkki tehtävääsi**: Olisi mahtavaa nähdä sinun tutkivan joitakin työkaluja, joita emme ole vielä käsitelleet! Jätä väliin editorit, selaimet ja komentorivityökalut, joista olemme jo puhuneet – siellä on kokonainen uskomaton maailma upeita kehitystyökaluja, jotka odottavat löytämistä. Etsi sellaisia, joita aktiivisesti ylläpidetään ja joilla on elinvoimaisia, avuliaita yhteisöjä (niillä on yleensä parhaat tutoriaalit ja eniten tukevia ihmisiä, kun väistämättä törmäät haasteisiin ja tarvitset ystävällistä apua). +> 💡 **Pieni tsemppi tehtävääsi varten**: Haluaisin todella nähdä sinun tutkivan työkaluja, joita emme vielä ole käsitelleet! Ohita editorit, selaimet ja komentorivityökalut, joista olemme jo puhuneet – on olemassa kokonainen uskomaton maailma mahtavia kehitystyökaluja, jotka odottavat löytäjäänsä. Etsi sellaisia, joita ylläpidetään aktiivisesti ja joilla on eloisa, avulias yhteisö (näillä on yleensä parhaat opetusmateriaalit ja kaikkein tukevimmat ihmiset, kun joskus jumitut ja tarvitset ystävällisen käden auttamaan). --- ## 🚀 Ohjelmointimatkasi aikajana -### ⚡ **Mitä voit tehdä seuraavan 5 minuutin aikana** -- [ ] Lisää kirjanmerkkeihin 2-3 ohjelmointikielen verkkosivua, jotka herättivät kiinnostuksesi -- [ ] Lataa Visual Studio Code, jos et ole vielä tehnyt sitä -- [ ] Avaa selaimesi kehittäjätyökalut (F12) ja klikkaile ympäriinsä millä tahansa verkkosivulla +### ⚡ **Mitä voit tehdä seuraavien 5 minuutin aikana** +- [ ] Tallenna kirjanmerkkeihin 2-3 ohjelmointikielen verkkosivua, jotka kiinnittivät huomiosi +- [ ] Lataa Visual Studio Code, jos et ole vielä tehnyt niin +- [ ] Avaa selaimesi DevTools (F12) ja klikkaa ympäri mitä tahansa verkkosivua - [ ] Liity yhteen ohjelmointiyhteisöön (Dev.to, Reddit r/webdev tai Stack Overflow) ### ⏰ **Mitä voit saavuttaa tämän tunnin aikana** -- [ ] Tee oppitunnin jälkeinen kysely ja pohdi vastauksiasi +- [ ] Tee jälkimmäisen oppitunnin testi ja pohdi vastauksiasi - [ ] Asenna VS Codeen GitHub Copilot -laajennus -- [ ] Kokeile "Hello World" -esimerkkiä kahdella eri ohjelmointikielellä verkossa -- [ ] Katso YouTubesta video "Päivä kehittäjän elämässä" -- [ ] Aloita ohjelmointikielen etsintätehtäväsi (haasteesta) +- [ ] Kokeile ”Hello World” -esimerkkiä kahdessa eri ohjelmointikielessä verkossa +- [ ] Katso ”Päivä kehittäjän elämässä” -video YouTubessa +- [ ] Aloita ohjelmointikielesi salapoliisityö (haasteen avulla) ### 📅 **Viikon mittainen seikkailusi** -- [ ] Suorita tehtävä ja tutki 3 uutta kehitystyökalua -- [ ] Seuraa 5 kehittäjää tai ohjelmointiaiheista tiliä sosiaalisessa mediassa -- [ ] Kokeile rakentaa jotain pientä CodePenissä tai Replitissä (vaikka vain "Hei, [Nimesi]!") -- [ ] Lue yksi kehittäjän blogikirjoitus jonkun koodausmatkasta -- [ ] Liity virtuaaliseen tapaamiseen tai katso ohjelmointiaiheinen esitys -- [ ] Aloita valitsemasi kielen opiskelu verkkotutoriaalien avulla - -### 🗓️ **Kuukauden mittainen muodonmuutos** -- [ ] Rakenna ensimmäinen pieni projektisi (vaikka yksinkertainen verkkosivu riittää!) -- [ ] Osallistu avoimen lähdekoodin projektiin (aloita dokumentaation korjauksista) -- [ ] Ryhdy mentoriksi jollekin, joka on vasta aloittamassa ohjelmointimatkaansa +- [ ] Tee tehtävä ja tutki 3 uutta kehitystyökalua +- [ ] Seuraa 5 kehittäjää tai ohjelmointitiliä sosiaalisessa mediassa +- [ ] Kokeile rakentaa jotain pientä CodePenissä tai Replitissä (vaikka vain ”Hei, [Nimesi]!”) +- [ ] Lue yksi kehittäjäblogipostaus henkilön ohjelmointimatkasta +- [ ] Osallistu virtuaalitapaamiseen tai katso ohjelmointiluento +- [ ] Aloita valitun kielen opiskelu verkkotutorialeilla + +### 🗓️ **Kuukauden mittainen muutosmatkasi** +- [ ] Rakenna ensimmäinen pieni projektisi (myös yksinkertainen verkkosivu kelpaa!) +- [ ] Osallistu avoimen lähdekoodin projektiin (aloita dokumentaatiokorjauksista) +- [ ] Ohjaa joku, joka on vasta aloittamassa ohjelmointimatkaansa - [ ] Luo oma kehittäjäportfoliosivustosi -- [ ] Yhdistä paikallisiin kehittäjäyhteisöihin tai opintoryhmiin -- [ ] Aloita seuraavan oppimistavoitteesi suunnittelu +- [ ] Rakenna yhteyksiä paikallisiin kehittäjäyhteisöihin tai opintoryhmiin +- [ ] Aloita seuraavan oppimistavoitteen suunnittelu -### 🎯 **Lopullinen pohdinta** +### 🎯 **Viimeinen pohdintatarkastus** -**Ennen kuin jatkat, ota hetki juhliaksesi:** +**Ennen kuin jatkat, ota hetki juhlia:** - Mikä ohjelmoinnissa innosti sinua tänään? -- Mikä työkalu tai konsepti kiinnostaa sinua eniten? -- Miltä sinusta tuntuu aloittaa tämä ohjelmointimatka? -- Mikä kysymys sinulla olisi juuri nyt kehittäjälle? +- Mitä työkalua tai käsitettä haluat tutkia ensin? +- Miltä tuntuu aloittaa tämä ohjelmointimatka? +- Mikä on yksi kysymys, jonka haluaisit esittää kehittäjälle juuri nyt? ```mermaid journey - title Your Confidence Building Journey - section Today + title Itseluottamuksen Rakentamisen Matkasi + section Tänään Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section Tämä Viikko Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section Ensi Kuukausi Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **Muista**: Jokainen asiantuntija on joskus ollut aloittelija. Jokainen kokenut kehittäjä on joskus tuntenut täsmälleen samoin kuin sinä nyt – innostunut, ehkä hieman hämmentynyt ja ehdottomasti utelias siitä, mitä kaikkea on mahdollista saavuttaa. Olet mahtavassa seurassa, ja tämä matka tulee olemaan uskomaton. Tervetuloa ohjelmoinnin ihmeelliseen maailmaan! 🎉 +> 🌟 **Muista**: Jokainen asiantuntija on ollut joskus aloittelija. Jokainen kokenut kehittäjä on tuntenut täsmälleen samoin kuin sinä nyt – innostuneena, ehkä hieman ylikuormittuneena, ja ehdottomasti uteliaana siitä, mikä on mahdollista. Olet loistavassa seurassa, ja tämä matka tulee olemaan uskomaton. Tervetuloa ohjelmoinnin ihmeelliseen maailmaan! 🎉 --- -**Vastuuvapauslauseke**: -Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi katsoa ensisijaiseksi lähteeksi. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä. \ No newline at end of file + +**Vastuuvapauslauseke**: +Tämä asiakirja on käännetty käyttäen tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Pyrimme tarkkuuteen, mutta otathan huomioon, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja omalla kielellään on ensisijainen ja virallinen lähde. Tärkeissä asioissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tästä käännöksestä aiheutuvista väärinymmärryksistä tai virhetulkinnoista. + \ No newline at end of file diff --git a/translations/fi/AGENTS.md b/translations/fi/AGENTS.md index 126016364..b186db98f 100644 --- a/translations/fi/AGENTS.md +++ b/translations/fi/AGENTS.md @@ -2,36 +2,36 @@ ## Projektin yleiskuvaus -Tämä on opetuksellinen opetussuunnitelmarepositorio, joka on tarkoitettu web-kehityksen perusteiden opettamiseen aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates, ja se sisältää 24 käytännön oppituntia, jotka kattavat JavaScriptin, CSS:n ja HTML:n. +Tämä on opetussisältöjen arkisto, joka on tarkoitettu aloittelijoiden web-kehityksen perusteiden opettamiseen. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates, ja se sisältää 24 käytännönläheistä oppituntia JavaScriptin, CSS:n ja HTML:n parissa. ### Keskeiset osat -- **Opetussisältö**: 24 rakenteellista oppituntia projektipohjaisissa moduuleissa -- **Käytännön projektit**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor ja AI Chat Assistant -- **Interaktiiviset tietovisat**: 48 tietovisaa, joissa on 3 kysymystä (ennen ja jälkeen oppitunnin arvioinnit) -- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsin kautta -- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (tekoälyprojekteissa) +- **Opetussisältö**: 24 rakenteellista oppituntia, jotka on organisoitu projektiperusteisiin moduuleihin +- **Käytännön projektit**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor ja AI Chat Assistant +- **Interaktiiviset kyselyt**: 48 kyselyä, joissa on 3 kysymystä jokaisessa (ennen ja jälkeen oppituntiarvioinnit) +- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsilla +- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI-projekteissa) ### Arkkitehtuuri -- Opetuksellinen arkisto oppituntipohjaisella rakenteella -- Jokainen oppituntikansio sisältää README-tiedoston, koodiesimerkkejä ja ratkaisuja -- Itsenäiset projektit omissa hakemistoissaan (quiz-app, eri oppituntiprojektit) -- Käännösjärjestelmä GitHub Actionsin (co-op-translator) avulla -- Dokumentaatio tarjotaan Docsifylla ja se on saatavilla myös PDF:nä +- Opetussisältöarkisto oppituntirakenteella +- Jokaisessa oppituntikansiossa README, koodiesimerkit ja ratkaisut +- Itsenäiset projektit omissa hakemistoissaan (quiz-app, erilaiset oppituntiprojektit) +- Käännösjärjestelmä GitHub Actionsin avulla (co-op-translator) +- Dokumentaatio tarjotaan Docsifyllä ja saatavilla PDF-muodossa -## Asennuskomennot +## Asennuskäskyt -Tämä arkisto on ensisijaisesti tarkoitettu opetussisällön kulutukseen. Työskennellessäsi tiettyjen projektien kanssa: +Tämä arkisto on ensisijaisesti tarkoitettu opetussisällön kuluttamiseen. Jos työskentelet tiettyjen projektien kanssa: -### Pääarkiston asennus +### Pääarkiston pystytys ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - -### Quiz-sovelluksen asennus (Vue 3 + Vite) + +### Quiz Appin asennus (Vue 3 + Vite) ```bash cd quiz-app @@ -40,25 +40,25 @@ npm run dev # Käynnistä kehityspalvelin npm run build # Rakenna tuotantoon npm run lint # Suorita ESLint ``` - -### Pankkiprojektin API (Node.js + Express) + +### Bank Project API (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # Käynnistä API-palvelin -npm run lint # Suorita ESLint -npm run format # Muotoile Prettierilla +npm run lint # Aja ESLint +npm run format # Muotoile Prettierillä ``` - -### Selaimen laajennusprojektit + +### Selainlaajennusprojektit ```bash cd 5-browser-extension/solution npm install -# Noudata selaimen erityisiä laajennuksen latausohjeita +# Noudata selaimen erityisiä laajennusten latausohjeita ``` - + ### Space Game -projektit ```bash @@ -66,8 +66,8 @@ cd 6-space-game/solution npm install # Avaa index.html selaimessa tai käytä Live Serveriä ``` - -### Chat-projekti (Python backend) + +### Chat-projekti (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -75,208 +75,208 @@ pip install openai # Aseta GITHUB_TOKEN-ympäristömuuttuja python api.py ``` + +## Kehitystyönkulku -## Kehitysprosessi - -### Sisällön tekijöille +### Sisällöntuottajille -1. **Forkkaa arkisto** GitHub-tilillesi -2. **Kloonaa forkki** paikallisesti -3. **Luo uusi haara** muutoksillesi -4. Tee muutoksia oppituntisisältöön tai koodiesimerkkeihin -5. Testaa koodimuutokset asiaankuuluvissa projektihakemistoissa -6. Lähetä pull requestit ohjeiden mukaisesti +1. **Haarauta arkisto** GitHub-tilillesi +2. **Kloonaa oma haarukkasi** paikallisesti +3. **Luo uusi haara** muutoksille +4. Tee muutoksia oppituntisisältöön tai koodiesimerkkeihin +5. Testaa koodimuutokset sopivissa projektihakemistoissa +6. Lähetä vetopyynnöt ohjeiden mukaisesti ### Oppijoille -1. Forkkaa tai kloonaa arkisto -2. Siirry oppituntihakemistoihin peräkkäin -3. Lue jokaisen oppitunnin README-tiedostot -4. Täytä oppituntia edeltävät tietovisat osoitteessa https://ff-quizzes.netlify.app/web/ -5. Työskentele koodiesimerkkien parissa oppituntikansioissa -6. Suorita tehtävät ja haasteet -7. Tee oppituntia seuraavat tietovisat +1. Haarauta tai kloonaa arkisto +2. Siirry oppituntihakemistoihin peräkkäin +3. Lue kunkin oppitunnin README-tiedostot +4. Tee ennen oppituntia olevat kyselyt osoitteessa https://ff-quizzes.netlify.app/web/ +5. Työstä oppituntien koodiesimerkkejä kansioissa +6. Suorita tehtävät ja haasteet +7. Tee oppitunnin jälkeiset kyselyt ### Live-kehitys -- **Dokumentaatio**: Suorita `docsify serve` juurihakemistossa (portti 3000) -- **Quiz-sovellus**: Suorita `npm run dev` quiz-app-hakemistossa -- **Projektit**: Käytä VS Code Live Server -laajennusta HTML-projekteissa -- **API-projektit**: Suorita `npm start` vastaavissa API-hakemistoissa +- **Dokumentaatio**: Aja `docsify serve` juurikansiossa (portti 3000) +- **Quiz App**: Aja `npm run dev` quiz-app-hakemistossa +- **Projektit**: Käytä VS Coden Live Server -laajennusta HTML-projekteille +- **API-projektit**: Aja `npm start` vastaavissa API-hakemistoissa ## Testausohjeet -### Quiz-sovelluksen testaus +### Quiz Appin testaus ```bash cd quiz-app -npm run lint # Tarkista koodityyliongelmat +npm run lint # Tarkista koodityylin ongelmat npm run build # Varmista, että käännös onnistuu ``` - -### Pankki-API:n testaus + +### Bank API:n testaus ```bash cd 7-bank-project/api -npm run lint # Tarkista koodityyliongelmat -node server.js # Varmista, että palvelin käynnistyy virheittä +npm run lint # Tarkista koodityylin ongelmat +node server.js # Varmista, että palvelin käynnistyy ilman virheitä ``` - + ### Yleinen testausmenetelmä -- Tämä on opetuksellinen arkisto ilman kattavia automatisoituja testejä -- Manuaalinen testaus keskittyy: - - Koodiesimerkkien virheettömään suorittamiseen - - Dokumentaation linkkien toimivuuteen - - Projektikäännösten onnistumiseen - - Esimerkkien noudattavan parhaita käytäntöjä +- Tämä on opetussisältöarkisto ilman kattavia automaattisia testejä +- Manuaalisen testauksen painopisteet: + - Koodiesimerkkien suorittaminen ilman virheitä + - Dokumentaation linkkien toimivuus + - Projektien rakentamiset onnistuvat + - Esimerkit noudattavat parhaita käytäntöjä -### Ennen lähettämistä tehtävät tarkistukset +### Ennen lähettämistä tarkistukset -- Suorita `npm run lint` hakemistoissa, joissa on package.json -- Varmista markdown-linkkien pätevyys -- Testaa koodiesimerkit selaimessa tai Node.js:ssä -- Tarkista, että käännökset säilyttävät rakenteen +- Aja `npm run lint` saataville hakemistoissa, joissa on package.json +- Varmista markdown-linkkien toimivuus +- Testaa koodiesimerkkejä selaimessa tai Node.js:ssä +- Tarkista, että käännökset säilyttävät oikean rakenteen ## Koodityyliohjeet ### JavaScript -- Käytä modernia ES6+ syntaksia -- Noudata projektien antamia ESLint-asetuksia -- Käytä merkityksellisiä muuttuja- ja funktioiden nimiä opetuksen selkeyden vuoksi -- Lisää kommentteja, jotka selittävät käsitteitä oppijoille -- Muotoile Prettierillä, missä konfiguroitu +- Käytä nykyaikaista ES6+-syntaksia +- Seuraa projektien tarjoamia ESLint-määrityksiä +- Käytä merkityksellisiä muuttuja- ja funktioiden nimiä opetuksen selkeyden vuoksi +- Lisää kommentteja käsitteiden selityksiin oppijoille +- Muotoile koodi Prettierillä missä se on konfiguroitu ### HTML/CSS -- Semanttiset HTML5-elementit -- Responsiivisen suunnittelun periaatteet -- Selkeät luokkien nimikäytännöt -- Kommentit, jotka selittävät CSS-tekniikoita oppijoille +- Semanttiset HTML5-elementit +- Responsiivisen suunnittelun periaatteet +- Selkeät luokkien nimeämiskäytännöt +- Kommentit CSS-tekniikoiden selittämiseksi oppijoille ### Python -- PEP 8 -tyyliohjeet -- Selkeät, opetukselliset koodiesimerkit -- Tyyppivihjeet, jos hyödyllisiä oppimisen kannalta +- PEP 8 -tyyliohjeiden seuraaminen +- Selkeät, opettavaiset koodiesimerkit +- Tyyppivihjeet, kun se tukee oppimista ### Markdown-dokumentaatio -- Selkeä otsikkohierarkia -- Koodilohkot kielimäärittelyillä -- Linkit lisäresursseihin -- Kuvakaappaukset ja kuvat `images/` hakemistoissa -- Kuvien alt-tekstit saavutettavuutta varten +- Selkeä otsikkohierarkia +- Koodilohkot kielimäärittelyillä +- Linkit lisäresursseihin +- Kuvakaappaukset ja kuvat `images/`-hakemistoissa +- Kuville alt-tekstit saavutettavuutta varten -### Tiedostojen järjestely +### Tiedostojen organisointi -- Oppitunnit numeroitu peräkkäin (1-getting-started-lessons, 2-js-basics jne.) -- Jokaisella projektilla on `solution/` ja usein `start/` tai `your-work/` hakemistot -- Kuvat tallennettu oppituntikohtaisiin `images/` kansioihin -- Käännökset sijaitsevat `translations/{language-code}/` rakenteessa +- Oppitunnit numeroitu peräkkäin (1-getting-started-lessons, 2-js-basics jne.) +- Jokaisessa projektissa on `solution/` ja usein `start/` tai `your-work/` -kansiot +- Kuvat ovat oppituntikohtaisissa `images/`-kansioissa +- Käännökset sijaitsevat `translations/{language-code}/` -rakenteessa -## Kokoaminen ja julkaisu +## Kokoaminen ja käyttöönotto -### Quiz-sovelluksen julkaisu (Azure Static Web Apps) +### Quiz Appin käyttöönotto (Azure Static Web Apps) -Quiz-app on konfiguroitu Azure Static Web Apps -julkaisua varten: +Quiz-app on konfiguroitu Azure Static Web Apps -käyttöönottoa varten: ```bash cd quiz-app -npm run build # Luo dist/-kansion -# Ottaa käyttöön GitHub Actions -työnkulun kautta siirron yhteydessä main-haaraan +npm run build # Luo dist/ kansion +# Julkaisee GitHub Actions -työnkulun kautta push-toiminnolla main-haaraan ``` + +Azure Static Web Apps -konfigurointi: +- **Sovelluksen sijainti**: `/quiz-app` +- **Tulostussijainti**: `dist` +- **Työnkulku**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -Azure Static Web Apps -konfiguraatio: -- **Sovelluksen sijainti**: `/quiz-app` -- **Tulosteen sijainti**: `dist` -- **Työnkulku**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - -### Dokumentaation PDF:n luonti +### Dokumentaation PDF:n generointi ```bash npm install # Asenna docsify-to-pdf -npm run convert # Luo PDF docsista +npm run convert # Luo PDF docs-sisällöstä ``` - + ### Docsify-dokumentaatio ```bash npm install -g docsify-cli # Asenna Docsify globaalisti -docsify serve # Tarjoa palvelu localhost:3000:ssa +docsify serve # Palvele localhost:3000:ssa ``` + +### Projektikohtaiset kokoamiset -### Projektikohtaiset rakentamiset - -Jokaisella projektihakemistolla voi olla oma rakennusprosessi: -- Vue-projektit: `npm run build` luo tuotantopaketteja -- Staattiset projektit: Ei rakennusvaihetta, palvele tiedostot suoraan +Jokaisella projektihakemistolla voi olla oma build-prosessinsa: +- Vue-projektit: `npm run build` luo tuotantopaketteja +- Staattiset projektit: Ei build-vaihetta, tiedostot palvellaan suoraan -## Pull request -ohjeet +## Vetopyyntöohjeet -### Otsikkomuoto +### Otsikon muotoilu -Käytä selkeitä, kuvaavia otsikoita, jotka kertovat muutoksen alueen: -- `[Quiz-app] Lisää uusi tietovisa oppitunnille X` -- `[Lesson-3] Korjaa kirjoitusvirhe terrarium-projektissa` -- `[Translation] Lisää espanjankielinen käännös oppitunnille 5` -- `[Docs] Päivitä asennusohjeet` +Käytä selkeitä, kuvaavia otsikoita, jotka osoittavat muutoksen alueen: +- `[Quiz-app] Lisää uusi kysely oppitunnille X` +- `[Lesson-3] Korjaa kirjoitusvirhe terrarium-projektissa` +- `[Translation] Lisää espanjankielinen käännös oppitunnille 5` +- `[Docs] Päivitä asennusohjeet` -### Vaadittavat tarkistukset +### Pakolliset tarkistukset -Ennen PR:n lähettämistä: +Ennen vetopyynnön lähettämistä: -1. **Koodin laatu**: - - Suorita `npm run lint` vaikutuksille joutuvissa hakemistoissa - - Korjaa kaikki lint-virheet ja -varoitukset +1. **Koodin laatu**: + - Aja `npm run lint` kyseisissä projektihakemistoissa + - Korjaa kaikki lint-virheet ja varoitukset -2. **Rakennuksen varmistus**: - - Suorita `npm run build` jos sovellettavissa - - Varmista ettei rakennusvirheitä ilmene +2. **Buildin varmistus**: + - Aja `npm run build` tarvittaessa + - Varmista, ettei build-virheitä ilmene -3. **Linkkien tarkistus**: - - Testaa kaikki markdown-linkit - - Varmista kuvaviitteiden toimivuus +3. **Linkkien validointi**: + - Testaa kaikki markdown-linkit + - Varmista kuvaviitteiden toimivuus -4. **Sisällön tarkastus**: - - Tarkista oikeinkirjoitus ja kielioppi - - Varmista koodiesimerkkien oikeellisuus ja opetuksellisuus - - Tarkista, että käännökset säilyttävät alkuperäisen merkityksen +4. **Sisältötarkastus**: + - Oikolue oikeinkirjoitus ja kielioppi + - Varmista, että koodiesimerkit ovat oikein ja opetuksellisia + - Varmista, että käännökset säilyttävät alkuperäisen merkityksen -### Osallistumisvaatimukset +### Osallistumisen vaatimukset -- Hyväksy Microsoft CLA (automaattinen tarkistus ensimmäisessä PR:ssa) -- Noudata [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Katso yksityiskohtaiset ohjeet [CONTRIBUTING.md](./CONTRIBUTING.md) tiedostosta -- Viittaa issue-numeroihin PR-kuvauksessa, jos sovellettavissa +- Hyväksy Microsoftin CLA (automaattinen tarkistus ensimmäisellä PR:llä) +- Noudata [Microsoft Open Source Code of Conductia](https://opensource.microsoft.com/codeofconduct/) +- Katso [CONTRIBUTING.md](./CONTRIBUTING.md) yksityiskohtaiset ohjeet +- Viittaa ongelmanumeroihin PR-kuvauksessa tarvittaessa -### Tarkastusprosessi +### Arviointiprosessi -- PR:t tarkastetaan ylläpitäjien ja yhteisön toimesta -- Opetuksellinen selkeys on prioriteetti -- Koodiesimerkkien tulee noudattaa nykyisiä parhaita käytäntöjä -- Käännökset tarkastetaan tarkkuudesta ja kulttuurillisesta sopivuudesta +- Vetopyynnöt arvioivat ylläpitäjät ja yhteisö +- Opetuksellisuus on prioriteetti +- Koodiesimerkkien on noudatettava nykyisiä parhaita käytäntöjä +- Käännökset tarkastetaan tarkkuuden ja kulttuurisopivuuden varmistamiseksi ## Käännösjärjestelmä ### Automaattinen käännös -- Käyttää GitHub Actionsia co-op-translator -työnkulun kanssa -- Kääntää automaattisesti yli 50 kielelle -- Lähdetiedostot ovat pääkansioissa -- Käännetyt tiedostot ovat `translations/{language-code}/` hakemistoissa +- Käyttää GitHub Actionseja co-op-translator-työnkululla +- Kääntää yli 50 kielelle automaattisesti +- Lähdetiedostot pääkansioissa +- Käännetyt tiedostot kansioissa `translations/{language-code}/` -### Käsin tehtävät käännösten parannukset +### Manuaalisten käännösten parannusten lisääminen -1. Etsi tiedosto `translations/{language-code}/` hakemistosta -2. Tee parannuksia säilyttäen rakenne -3. Varmista, että koodiesimerkit toimivat edelleen -4. Testaa mahdolliset lokalisoidut tietovisasisällöt +1. Etsi tiedosto kansiosta `translations/{language-code}/` +2. Tee parannuksia rakenteen säilyttämiseksi +3. Varmista, että koodiesimerkit toimivat edelleen +4. Testaa mahdolliset lokalisoidut kyselysisällöt ### Käännösten metatiedot -Käännetyt tiedostot sisältävät metatietojen otsikon: +Käännetyissä tiedostoissa on metatietopääte: ```markdown ``` + +## Virheiden etsintä ja vianmääritys -## Virheenkorjaus ja vianetsintä - -### Yleisimmät ongelmat +### Yleiset ongelmat -**Quiz-sovellus ei käynnisty**: -- Tarkista Node.js:n versio (v14+ suositeltava) -- Poista `node_modules` ja `package-lock.json`, suorita `npm install` uudelleen -- Tarkista, etteivät portit ole varattu (oletus: Vite käyttää porttia 5173) +**Quiz app ei käynnisty**: +- Tarkista Node.js-versio (v14+ suositeltu) +- Poista `node_modules` ja `package-lock.json`, aja `npm install` uudelleen +- Tarkista porttikonfliktit (oletus: Vite käyttää porttia 5173) -**API-palvelin ei käynnisty**: -- Varmista, että Node.js versio on vähintään (node >=10) -- Tarkista, onko portti jo käytössä -- Varmista, että kaikki riippuvuudet on asennettu `npm install` komennolla +**API-palvelin ei käynnisty**: +- Varmista, että Node.js-versio on vähintään 10 tai uudempi +- Tarkista, onko portti jo käytössä +- Varmista, että kaikki riippuvuudet on asennettu komennolla `npm install` -**Selaimen laajennus ei lataudu**: -- Varmista, että manifest.json on oikein muotoiltu -- Tarkista selaimen konsolista virheet -- Noudata selaimesta riippuvia asennusohjeita laajennukselle +**Selainlaajennus ei lataudu**: +- Varmista manifest.json:n oikea muotoilu +- Tarkista selaimen konsolivirheet +- Noudata selainkohtaisia laajennuksen asennusohjeita -**Python chat-projektin ongelmat**: -- Varmista, että OpenAI-paketti on asennettu: `pip install openai` -- Varmista, että GITHUB_TOKEN -ympäristömuuttuja on asetettu -- Tarkista GitHub Models -käyttöoikeudet +**Pythonin chat-projektin ongelmat**: +- Varmista, että OpenAI-paketti on asennettu: `pip install openai` +- Varmista, että GITHUB_TOKEN-ympäristömuuttuja on asetettu +- Tarkista GitHub Models -käyttöoikeudet -**Docsify ei tarjoa dokumentaatiota**: -- Asenna docsify-cli globaalisti: `npm install -g docsify-cli` -- Suorita reposta juurihakemistosta -- Varmista, että `docs/_sidebar.md` tiedosto on olemassa +**Docsify ei palvele dokumentaatiota**: +- Asenna docsify-cli globaalisti: `npm install -g docsify-cli` +- Aja arkiston juurikansiosta +- Tarkista, että `docs/_sidebar.md` on olemassa -### Kehitysympäristön vinkit +### Kehitysympäristön vinkkejä -- Käytä VS Codea Live Server -laajennuksella HTML-projekteissa -- Asenna ESLint ja Prettier -laajennukset yhdenmukaiseen muotoiluun -- Käytä selaimen DevToolsia JavaScriptin virheenkorjaukseen -- Vue-projekteissa asenna Vue DevTools -selaimen laajennus +- Käytä VS Codea Live Server -laajennuksella HTML-projekteille +- Asenna ESLint- ja Prettier-laajennukset yhtenäiseen muotoiluun +- Käytä selaimen DevToolsia JavaScriptin virheenkorjaukseen +- Vue-projekteissa asenna Vue DevTools -selaimien laajennus ### Suorituskyvyn huomioita -- Suuri määrä käännettyjä tiedostoja (yli 50 kieltä) tekee kokonaishakkereista suuria -- Käytä kevyttä kloonausta, jos työskentelet vain sisällön kanssa: `git clone --depth 1` -- Poissulje käännökset hauista, kun työskentelet englanninkielisen sisällön parissa -- Rakennusprosessit voivat olla hitaita ensimmäisellä kerralla (npm install, Vite build) +- Suuri määrä käännettyjä tiedostoja (yli 50 kieltä) tekee täydellisistä klooneista suuria +- Käytä matalaa kloonausta, jos työskentelet vain sisällön parissa: `git clone --depth 1` +- Sulje käännökset haut pois haettaessa englanninkielistä sisältöä +- Build-prosessit voivat olla hitaita ensimmäisellä kerralla (npm install, Vite build) ## Turvallisuusnäkökohdat ### Ympäristömuuttujat -- API-avaimia ei tulisi koskaan sitoa arkistoon -- Käytä `.env`-tiedostoja (jo sisällytetty `.gitignore`-tiedostoon) -- Dokumentoi tarvittavat ympäristömuuttujat projektien READMEihin +- API-avaimia ei koskaan tule tallentaa arkistoon +- Käytä `.env`-tiedostoja (jo sisällytetty `.gitignoreen`) +- Dokumentoi tarvittavat ympäristömuuttujat projektien READMEissä ### Python-projektit -- Käytä virtuaaliympäristöjä: `python -m venv venv` -- Pidä riippuvuudet ajan tasalla -- GitHub-tokeneilla tulisi olla vain tarvittavat vähimmäisoikeudet +- Käytä virtuaaliympäristöjä: `python -m venv venv` +- Pidä riippuvuudet ajan tasalla +- GitHub-tokenien käyttöoikeuksien tulisi olla mahdollisimman rajatut -### GitHub Models -käyttö +### GitHub Models -käyttöoikeudet -- Henkilökohtaiset käyttöoikeustokenit (PAT) vaaditaan GitHub Models -käyttöön -- Tokeneita tulee säilyttää ympäristömuuttujina -- Älä koskaan sido tokeneita tai tunnuksia arkistoon +- Henkilökohtaiset käyttöoikeustunnukset (PAT) vaaditaan GitHub Modelsille +- Tunnukset tulee tallentaa ympäristömuuttujiin +- Älä koskaan tallenna tunnuksia tai tunnistetietoja arkistoon -## Lisätiedot +## Lisähuomiot ### Kohdeyleisö -- Täysin aloittelijat web-kehityksessä -- Opiskelijat ja itseopiskelijat -- Opettajat, jotka käyttävät opetussuunnitelmaa luokkahuoneissa -- Sisältö on suunniteltu saavutettavaksi ja taitojen asteittaiseen kehittämiseen +- Täysin aloittelijat web-kehityksessä +- Opiskelijat ja itseopiskelijat +- Opettajat, jotka käyttävät opetussuunnitelmaa luokkahuoneissa +- Sisältö on suunniteltu saavutettavuus ja taitojen asteittaista kehittämistä varten ### Opetuksellinen filosofia -- Projektipohjainen oppimisen lähestymistapa -- Säännölliset tietovisat tiedon tarkistamiseksi -- Käytännön koodausharjoitukset -- Todellisen maailman sovellusesimerkit -- Perusteiden painotus ennen kehyksiä +- Projektipohjainen oppimismenetelmä +- Usein toistuvat tietämyksen tarkistukset (kyselyt) +- Käytännön koodausharjoitukset +- Todelliset sovellusesimerkit +- Painotus perusteissa ennen kehyskirjastoja ### Arkiston ylläpito -- Aktiivinen oppijoiden ja osallistujien yhteisö -- Säännölliset päivitykset riippuvuuksiin ja sisältöön -- Ongelmatilanteet ja keskustelut ylläpitäjien valvonnassa -- Käännöspäivitykset automatisoitu GitHub Actionsin avulla +- Aktiivinen oppijoiden ja sisällöntuottajien yhteisö +- Riittävä päivitys riippuvuuksiin ja sisältöihin +- Ongelmia ja keskusteluita valvovat ylläpitäjät +- Käännöspäivitykset automatisoitu GitHub Actionsien avulla ### Aiheeseen liittyvät resurssit -- [Microsoft Learn -moduulit](https://docs.microsoft.com/learn/) -- [Student Hubin resurssit](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) suositellaan oppijoille -- Lisäkursseja: Generative AI, Data Science, ML, IoT -opetussuunnitelmia saatavilla +- [Microsoft Learn -moduulit](https://docs.microsoft.com/learn/) +- [Student Hub -resurssit](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) suositellaan oppijoille +- Lisäkursseja: Generative AI, Data Science, ML, IoT opetussuunnitelmat saatavilla -### Työskentely yksittäisten projektien kanssa +### Työskentely tietyissä projekteissa -Yksityiskohtaiset ohjeet yksittäisistä projekteista löytyvät README-tiedostoista: -- `quiz-app/README.md` - Vue 3 tietovisasovellus -- `7-bank-project/README.md` - Pankkisovellus autentikoinnilla -- `5-browser-extension/README.md` - Selaimen laajennuksen kehitys -- `6-space-game/README.md` - Canvas-pohjainen peli -- `9-chat-project/README.md` - Tekoälyllä toimivan chat-avustajan projekti +Yksityiskohtaiset ohjeet yksittäisille projekteille löytyvät näistä README-tiedostoista: +- `quiz-app/README.md` - Vue 3 -kyselysovellus +- `7-bank-project/README.md` - Pankkisovellus todennuksella +- `5-browser-extension/README.md` - Selainlaajennuskehitys +- `6-space-game/README.md` - Canvas-pohjainen pelikehitys +- `9-chat-project/README.md` - AI-chat-avustajaprojekti -### Monorepo-rakenne +### Monorepokoko -Vaikka tämä ei ole perinteinen monorepo, tämä arkisto sisältää useita itsenäisiä projekteja: -- Jokainen oppitunti on itsenäinen -- Projektit eivät jaa riippuvuuksia -- Työskentele yksittäisten projektien parissa vaikuttamatta muihin -- Kloonaa koko arkisto saadaksesi koko opetussuunnitelman kokemuksen +Vaikka kyseessä ei ole perinteinen monorepo, tämä arkisto sisältää useita riippumattomia projekteja: +- Jokainen oppitunti on itsenäinen +- Projektit eivät jaa riippuvuuksia +- Työskentele yksittäisten projektien parissa ilman vaikutusta muihin +- Kloonaa koko arkisto saadaksesi koko opetussuunnitelman kokemuksen --- **Vastuuvapauslauseke**: -Tämä asiakirja on käännetty käyttäen tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, on hyvä huomioida, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulee pitää auktoritatiivisena lähteenä. Tärkeissä asioissa suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa mistään väärinymmärryksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä. +Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ota huomioon, että automaattiset käännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulee pitää virallisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa mahdollisista väärinymmärryksistä tai tulkinnoista, jotka johtuvat tämän käännöksen käytöstä. \ No newline at end of file diff --git a/translations/fi/README.md b/translations/fi/README.md index 6f8b87d80..91fb8e16d 100644 --- a/translations/fi/README.md +++ b/translations/fi/README.md @@ -10,203 +10,213 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Verkkokehitys aloittelijoille - Opetussuunnitelma +# Verkkokehitys aloittelijoille – opetussuunnitelma -Opi verkkokehityksen perusteet kattavassa 12 viikon kurssissamme, jonka järjestävät Microsoft Cloud Advocates -tiimin jäsenet. Jokainen 24 oppitunnista sukeltaa JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terrarion, selaimen laajennusten ja avaruuspeliin, kautta. Osallistu tietokilpailuihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella opetuksellamme. Aloita koodausmatkasi tänään! +Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavan kurssin avulla. Jokaisessa 24 oppitunnissa perehdytään JavaScriptiin, CSS:ään ja HTML:ään käytännön projekteilla, kuten terrarioilla, selainlaajennuksilla ja avaruuspeleillä. Osallistu tietovisoihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi tiedon omaksumisesi tehokkaan projektipohjaisen opetustapamme avulla. Aloita koodausmatkasi tänään! Liity Azure AI Foundry Discord -yhteisöön [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Noudata näitä ohjeita aloittaaksesi näiden resurssien käytön: -1. **Forkkaa Repository**: Klikkaa [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Kloonaa Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Liity Azure AI Foundry Discordiin ja tapaa asiantuntijoita ja muita kehittäjiä**](https://discord.com/invite/ByRwuEEgH4) +Seuraa näitä vaiheita aloittaaksesi näiden resurssien käytön: +1. **Forkkaa repositorio**: Klikkaa [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Kloonaa repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Liity Azure AI Foundry Discordiin ja tapaa asiantuntijoita sekä muita kehittäjiä**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Monikielinen tuki -#### Tuettu GitHub Actionin kautta (Automaattinen & Aina ajan tasalla) +#### Tuettu GitHub Actionin kautta (automaattinen ja aina ajan tasalla) -[Arabia](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burma (Myanmar)](../my/README.md) | [Kiina (yksinkertaistettu)](../zh-CN/README.md) | [Kiina (perinteinen, Hongkong)](../zh-HK/README.md) | [Kiina (perinteinen, Macao)](../zh-MO/README.md) | [Kiina (perinteinen, Taiwan)](../zh-TW/README.md) | [Kroatia](../hr/README.md) | [Tsekki](../cs/README.md) | [Tanska](../da/README.md) | [Hollanti](../nl/README.md) | [Viro](../et/README.md) | [Suomi](./README.md) | [Ranska](../fr/README.md) | [Saksa](../de/README.md) | [Kreikka](../el/README.md) | [Heprea](../he/README.md) | [Hindi](../hi/README.md) | [Unkari](../hu/README.md) | [Indonesia](../id/README.md) | [Italia](../it/README.md) | [Japani](../ja/README.md) | [Kannada](../kn/README.md) | [Korea](../ko/README.md) | [Liettua](../lt/README.md) | [Malaiji](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norja](../no/README.md) | [Persia (Farsi)](../fa/README.md) | [Puola](../pl/README.md) | [Portugali (Brasilia)](../pt-BR/README.md) | [Portugali (Portugali)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romania](../ro/README.md) | [Venäjä](../ru/README.md) | [Serbia (kyrillinen)](../sr/README.md) | [Slovakki](../sk/README.md) | [Sloveeni](../sl/README.md) | [Espanja](../es/README.md) | [Swahili](../sw/README.md) | [Ruotsi](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkki](../tr/README.md) | [Ukraina](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md) +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](./README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Haluatko Kloonaa Paikallisesti?** - -> Tämä arkisto sisältää yli 50 kielen käännöksiä, jotka lisäävät huomattavasti lataustiedoston kokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkout:a: +> **Haluatko kloonata paikallisesti?** +> +> Tämä repositorio sisältää yli 50 kielen käännökset, mikä lisää merkittävästi latauskokoa. Jos haluat kloonata ilman käännöksiä, käytä sparse checkoutia: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Tämä antaa sinulle kaiken tarvittavan kurssin suorittamiseen paljon nopeammalla latauksella. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Näin saat kaiken tarvitsemasi kurssin suorittamiseen nopeammalla latauksella. -**Jos haluat lisätä lisää käännettyjä kieliä, tuetut kielet löytyvät [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Jos haluat, että muita kieliä tuetaan, ne löytyvät listattuna [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Avaa Visual Studio Codessa](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Avaa%20Visual%20Studio%20Codessa&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Oletko opiskelija?_ -Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa silloin tällöin, sillä sisältömme vaihtuu kuukausittain. +Vieraile [**Opiskelijakeskussivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloittelijoille tarkoitettuja materiaaleja, opiskelijapaketteja ja jopa tapoja saada ilmainen todistusvakuuttaja. Tämä sivu kannattaa lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä päivitätämme sisältöä kuukausittain. -### 📣 Ilmoitus - Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi! +### 📣 Ilmoitus – Uudet GitHub Copilot Agent -tilahaasteet suoritettavaksi! -Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste sinulle, joka suoritetaan käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole käyttänyt Agent-tilaa aiemmin, se pystyy paitsi tuottamaan tekstiä, myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja muuta. +Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole käyttänyt Agent-tilaa aiemmin, se ei vain luo tekstiä, vaan voi myös luoda ja muokata tiedostoja, suorittaa komentoja ja muuta. -### 📣 Ilmoitus - _Uusi Generatiivisen tekoälyn projekti rakennettavaksi_ +### 📣 Ilmoitus – _Uusi Generatiivisen tekoälyn projekti_ -Uusi tekoälyavustajaprojekti juuri lisätty, tutustu [projektiin](./9-chat-project/README.md) +Uusi tekoälyavustajaprojekti lisätty, tutustu projektiin [tästä](./9-chat-project/README.md) -### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generatiivisesta tekoälystä JavaScriptille juuri julkaistu +### 📣 Ilmoitus – _Uusi Generatiivisen tekoälyn opetussuunnitelma JavaScriptille julkaistu_ -Älä jää paitsi uudesta Generative AI -opetussuunnitelmastamme! +Älä missaa uutta Generatiivisen tekoälyn opetussuunnitelmaamme! Aloita osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! -![Tausta](../../translated_images/fi/background.148a8d43afde5730.webp) +![Background](../../translated_images/fi/background.148a8d43afde5730.webp) -- Oppitunteja kaikesta alkeista RAG:iin asti. -- Ole vuorovaikutuksessa historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla. -- Hauska ja mukaansatempaava kertomus, matkustat ajassa! +- Oppitunnit kattavat kaiken perusasioista RAG:iin. +- Keskustele historiallisten hahmojen kanssa GenAI:n ja sovelluksemme avulla. +- Hauska ja mukaansatempaava kertomus, jossa matkustat ajassa! -![hahmo](../../translated_images/fi/character.5c0dd8e067ffd693.webp) +![character](../../translated_images/fi/character.5c0dd8e067ffd693.webp) -Jokaisessa oppitunnissa on suoritettava tehtävä, tietotarkistus ja haaste, jotka ohjaavat sinua oppimaan aiheista kuten: -- Kehote ja kehotteen suunnittelu -- Tekstin ja kuvan sovellustuotanto +Jokaisessa oppitunnissa on suoritettava tehtävä, tiedon tarkistus ja haaste, jotka ohjaavat sinua oppimaan mm.: +- Käskyttäminen ja kehotteiden suunnittelu +- Tekstin ja kuvan sovellusgenerointi - Hakusovellukset -Aloita osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! +Aloita osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) -## 🌱 Aloittaminen +## 🌱 Aloita -> **Opettajat**, olemme [sisällyttäneet joitain ehdotuksia](for-teachers.md) tämän opetussuunnitelman käytöstä. Haluaisimme saada palautettanne [keskustelufoorumissamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Opettajat**, olemme [sisällyttäneet joitain ehdotuksia](for-teachers.md) opetussuunnitelman käyttöön. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti ennakkotietovisalla ja jatka sitten luentomateriaalin lukemiseen, erilaisten aktiviteettien suorittamiseen ja ymmärryksesi tarkistamiseen luennon jälkeisellä visalla. +**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, aloita jokainen oppitunti esiluennon tietovisalla ja jatka lukemalla luentomateriaali, suorittamalla erilaisia aktiviteetteja ja testaa ymmärryksesi jälkiluennon tietovisalla. -Parantaaksesi oppimiskokemustasi, ota yhteyttä muihin oppijoihin työskennelläksesi projekteissa yhdessä! Keskusteluja kannustetaan [keskustelufoorumissamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi. +Paranna oppimiskokemustasi tekemällä projekteja yhdessä muiden kanssa! Keskustelua suositellaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on käytettävissä vastaamaan kysymyksiisi. -Jatka opiskelua tutustumalla suositelloimme [Microsoft Learning -materiaaleihin](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon). +Koulutuksesi tueksi suosittelemme tutustumaan [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) -sivustoon lisämateriaalien saamiseksi. -### 📋 Ympäristön asettaminen +### 📋 Ympäristön käyttöönotto -Tässä opetussuunnitelmassa on kehitysympäristö valmiina käyttöön! Alkaessasi voit valita suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (selainsovellus, johon ei tarvitse asentaa mitään) tai paikallisesti tietokoneella tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Tässä opetussuunnitelmassa on valmis kehitysympäristö! Voit aloittaa käyttämällä kurssia [Codespacessa](https://github.com/features/codespaces/) (_selaimessa toimiva, ilman asennuksia toimiva ympäristö_) tai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Codella](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Luo oma repositoriosi -Jotta voit helposti tallentaa työsi, on suositeltavaa luoda oma kopiosi tästä repositoriosta. Voit tehdä tämän napsauttamalla sivun yläreunassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi opetussuunnitelman kopion kera. +Jotta voit helposti tallentaa työsi, suosittelemme, että luot oman kopion tästä repositoriosta. Voit tehdä tämän klikkaamalla sivun yläosassa olevaa **Use this template** -painiketta. Tämä luo uuden repositorion GitHub-tilillesi kopiona opetussuunnitelmasta. Noudata näitä ohjeita: -1. **Forkkaa Repository**: Klikkaa "Fork" -painiketta tämän sivun oikeassa yläkulmassa. -2. **Kloonaa Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Forkkaa repositorio**: Klikkaa sivun oikeassa yläkulmassa "Fork" -painiketta. +2. **Kloonaa repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Suorita opetussuunnitelma Codespacessa +#### Opetussuunnitelman suorittaminen Codespacessa -Oman kopiosi repositoriosta, jonka loit, klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä. +Omaasi luodussa kopiossa klikkaa **Code** -painiketta ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-ympäristön työskentelyä varten. ![Codespace](../../translated_images/fi/createcodespace.0238bbf4d7a8d955.webp) -#### Suorita opetussuunnitelma paikallisesti tietokoneellasi - -Suorittaaksesi opetussuunnitelman paikallisesti tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikielien ja työkalujen perusasioiden esittely](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinua erilaisten näiden työkalujen vaihtoehtojen valinnassa. +#### Opetussuunnitelman suorittaminen paikallisesti tietokoneellasi -Suosituksemme on käyttää tekstieditorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), jossa on myös sisäänrakennettu [Komentorivi](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [tästä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Kurssin ajamiseen paikallisesti tietokoneellasi tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikielten ja työkalujen esittely](../../1-getting-started-lessons/1-intro-to-programming-languages), esittelee eri vaihtoehtoja näille työkaluilla, jotta voit valita sinulle parhaiten sopivat. -1. Kloonaa oma repositoriosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code** -painiketta ja kopioimalla URL-osoitteen: +Suosittelemme käyttämään tekstieditorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), jossa on myös sisäänrakennettu [Pääte](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [tästä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Kloonaa varastosi tietokoneellesi. Voit tehdä tämän napsauttamalla **Code**-painiketta ja kopioimalla URL-osoitteen: [CodeSpace](./images/createcodespace.png) - Avaa sitten [Terminaali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento korvaten `` juuri kopioimallasi URL-osoitteella: + + Sitten avaa [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `` juuri kopioimallasi URL-osoitteella: ```bash git clone ``` -2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **Tiedosto** > **Avaa kansio** ja valitsemalla juuri kloonaamasi kansion. +2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion. -> Suositellut Visual Studio Code -laajennukset: +> Suositellut Visual Studio Code -laajennukset: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - koodin kirjoittamisen nopeuttamiseen +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - esikatsella HTML-sivuja Visual Studio Codessa +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaa sinua kirjoittamaan koodia nopeammin ## 📂 Jokainen oppitunti sisältää: - valinnaisen luonnosmuistiinpanon - valinnaisen lisävideon -- ennakkolämmittelykyselyn -- kirjoitetun oppitunnin +- lämmittelykyselyn ennen oppituntia +- kirjallisen oppitunnin - projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen -- tietovarmistukset +- tietovisakokeet - haasteen - lisälukemista - tehtävän -- [oppitunnin jälkeisen kyselyn](https://ff-quizzes.netlify.app/web/) +- [oppitunnin jälkeisen tietovisan](https://ff-quizzes.netlify.app/web/) -> **Huomautus kyselyistä**: Kaikki kyselyt on koottu Quiz-app-kansioon, yhteensä 48 kyselyä, joissa kullakin on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Kyselysovelluksen voi suorittaa paikallisesti tai ottaa käyttöön Azureen; noudata `quiz-app`-kansion ohjeita. +> **Muistutus tietovisoista**: Kaikki tietovisat löytyvät Quiz-app-kansiosta, yhteensä 48 tietovisaa, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Tietovisasovellus voidaan suorittaa paikallisesti tai ottaa käyttöön Azureen; seuraa ohjeita `quiz-app`-kansiossa. ## 🗃️ Oppitunnit | | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä | -| :-: | :--------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit ohjelmointikielten perustan ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Aloittaminen | GitHubin perusteet, tiimityöskentely | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Aloittaminen | Saavutettavuus | Opit verkkosaavutettavuuden perusteet | [Saavutettavuuden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Perusteet | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Tietotyypit](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Perusteet | Funktiot ja metodit | Opit funktioista ja metodeista sovelluksen logiikan hallinnassa | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher | -| 06 | JS Perusteet | Päätöksenteko JS:llä | Opit luomaan olosuhteita koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Perusteet | Taulukot ja silmukat | Työskentele tietojen kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi online-terraariumin, keskittyen asettelun tekemiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tietoystävän terraariumin tyylittelyä varten, keskittyen CSS:n perusteisiin mukaan lukien responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript sulkeet, DOM-manipulointi | Rakenna JavaScript, joka mahdollistaa terraariumin toiminnan drag/drop-käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulointiin | [JavaScript sulkeet ja DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kirjoituspelin rakentaminen | Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Selainten toiminta | Opit miten selaimet toimivat, niiden historian ja miten rakentaa ensimmäiset elementit selainlaajennukseen | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallennus | Rakenna selainlaajennukseesi JavaScript-elementit API-kutsuihin paikallisesti tallennettujen muuttujien avulla | [APIt, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Selaintaustaprosessit, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimointikeinoista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opit periytymisestä luokkien ja komposition avulla sekä Pub/Sub-kuvioista valmistautuessasi pelin rakentamiseen | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opit Canvas API:stä, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen kankaalle](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Tutustu, miten elementit saavat liikkeen käyttäen karteesisia koordinaatteja ja Canvas API:ta | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee, että elementit törmäävät ja reagoivat toisiinsa näppäinyhdistelmillä ja tarjoavat jäähdytystoiminnon pelin suorituskyvyn turvaamiseksi | [Törmäyksentunnistus](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Tee matemaattisia laskelmia pelin tilan ja suorituksen perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opit pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivous ja muuttujien arvojen nollaus | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit web-sovelluksessa | Opit luomaan monisivuisen verkkosivuston arkkitehtuurin runkoa reitityksen ja HTML-mallien avulla | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakeminen ja käyttö | Kuinka data virtaa sovellukseesi, miten hakea, tallentaa ja poistaa sitä | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Pankkisovellus](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit, miten sovelluksesi säilyttää tilan ja miten hallita sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Selain/VScode-koodi](../../8-code-editor) | Työskentely VScoden kanssa | Opit käyttämään koodieditoria | [Käytä VScode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opit rakentamaan oman tekoälyavustajan | [AI-avustajaprojekti](./9-chat-project/README.md) | Chris | +| :-: | :-------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit useimpien ohjelmointikielten perusteet ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä työssään | [Johdatus ohjelmointikieliin ja työkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Aloittaminen | GitHubin perusteet, mukaan lukien tiimityö | Kuinka käyttää GitHubia projektissasi, miten tehdä yhteistyötä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Aloittaminen | Saavutettavuus | Opit verkkosaavutettavuuden perusteet | [Saavutettavuuden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Perusteet | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Tietotyypit](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Perusteet | Funktiot ja metodit | Opit funktioista ja metodeista sovelluksen loogisen virran hallintaan | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher | +| 06 | JS Perusteet | Päätöksenteko JavaScriptillä | Opit luomaan ehtoja koodissasi päätöksentekomenetelminä | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Perusteet | Taulukot ja silmukat | Työskentele tietojen kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML verkossa toimivan terrariumin luomiseen keskittyen asettelun rakentamiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylitämään verkossa olevaa terrariumia, keskittyen CSS:n perusteisiin ja sivun responsiivisuuden tekemiseen | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-sulkeet, DOM-manipulointi | Rakenna JavaScript, joka mahdollistaa terrariumin toiminnan drag & drop -käyttöliittymänä, keskittyen sulkeisiin ja DOM-manipulointiin | [JavaScript-sulkeet, DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Rakennetaan kirjoituspeli | Opit käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi miten selaimet toimivat, niiden historiasta ja miten rakennetaan selaimen laajennuksen ensimmäiset osat | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsu ja muuttujien tallennus paikalliseen tallennustilaan | Rakenna JavaScript-selaimen laajennuksen osat, jotka käyttävät API-kutsua paikalliseen tallennustilaan tallennettujen muuttujien avulla | [API:t, lomakkeet ja paikallinen tallennustila](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, web-suorituskyky | Käytä selaimen taustaprosesseja laajennuksen kuvakkeen hallintaan; opi web-suorituskyvystä ja joistakin optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opit perinnöstä käyttäen sekä luokkia että koostetta sekä julkaisija-tilaaja-mallia pelin rakentamisen valmisteluna | [Johdatus edistyneeseen pelikehitykseen](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen canvas-elementtiin | Opit Canvas API:n, jota käytetään elementtien piirtämiseen näyttöön | [Piirtäminen canvas-elementtiin](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Tutustu miten elementeille saadaan liikettä kartesiakkoordinaattien ja Canvas API:n avulla | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee elementtien törmäyksiä ja reagoi niihin käyttämällä näppäimistön painalluksia ja tarjoa cooldown-toiminto pelin suorituskyvyn turvaamiseksi | [Törmäyksentunnistus](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita laskelmia pelin tilan ja suorituskyvyn pohjalta | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistäminen | Opit pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivous ja muuttujien arvon nollaaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallipohjat ja reitit web-sovelluksessa | Opit luomaan monisivuisen verkkosivuston arkkitehtuurin rungon reitityksen ja HTML-mallipohjien avulla | [HTML-mallipohjat ja reitit](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Tietojen hakemisen ja käyttämisen menetelmät | Miten tiedot virtaavat sovellukseesi ja siitä ulos, miten hakea, tallentaa ja poistaa niitä | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit miten sovelluksesi säilyttää tilan ja miten hallita sitä ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Työskentely VScoden kanssa | Opit käyttämään koodieditoria | [Käytä VScode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opit rakentamaan oman tekoälyavustajan | [Tekoälyavustajan projekti](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogiikka -Oppimateriaalimme on suunniteltu kahden keskeisen pedagogisen periaatteen pohjalta: -* projektioppiminen -* usein toistuvat kyselyt +Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti: +* projektipohjainen oppiminen +* usein toistuvat tietovisat -Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä nykyaikaisten web-kehittäjien käyttämiä työkaluja ja tekniikoita. Oppilailla on mahdollisuus kehittää käytännön taitoja rakentamalla kirjoituspeli, virtuaaliterraario, ympäristöystävällinen selainlaajennus, avaruustyyppinen peli ja liiketoiminta-pankkisovellus. Sarjan lopussa opiskelijoilla on vankka ymmärrys web-kehityksestä. +Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusasiat sekä viimeisimmät työkalut ja tekniikat, joita nykypäivän web-kehittäjät käyttävät. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ympäristöystävällisen selainlaajennuksen, avaruustyyppisen pelin ja yrityksille tarkoitetun pankkisovelluksen. Sarjan lopussa opiskelijat ovat saaneet vahvan ymmärryksen web-kehityksestä. -> 🎓 Voit suorittaa tämän oppilaitoksen ensimmäiset oppitunnit [Oppimispolku](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)-muodossa Microsoft Learnissa! +> 🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit Microsoft Learnin [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kurssina! -Varmistamalla sisällön yhteensopivuuden projektien kanssa prosessi tulee opiskelijoille mielekkäämmäksi ja käsitteiden omaksuminen tehostuu. Kirjoitimme myös useita aloitusoppitunteja JavaScript-perusteista käynnistämään kokonaisuuden, jotka on yhdistetty videosarjaan "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", joiden tekijät osallistuivat tähän oppimateriaalin kokoamiseen. +Varmistamalla, että sisältö vastaa projekteja, prosessi on opiskelijoille kiinnostavampi ja käsitteiden oppiminen parantuu. Kirjoitimme myös useita JavaScriptin perusteiden aloitusoppitunteja käsitteiden esittelemiseksi, parina videona "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videosarjasta, jonka osan tekijöistä osallistui tähän opetussuunnitelmaan. -Lisäksi aloituskysely luokkahuoneen edellä asettaa opiskelijan tavoitteen aiheeseen tutustumiselle, ja luokan jälkeinen toinen kysely tukee oppien säilymistä. Tämä oppimateriaali on suunniteltu joustavaksi ja hauskaksi, ja se voidaan suorittaa kokonaisuudessaan tai osittain. Projektit alkavat pienestä ja monimutkaistuvat viimeistään 12 viikon syklin loppuun mennessä. +Lisäksi ennen luokkaa suoritettava pieni tietovisa asettaa opiskelijan tavoitteeksi aiheen oppimisen, ja toinen tietovisa luokan jälkeen varmistaa syvemmän oppimisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja se voidaan suorittaa kokonaan tai osittain. Projektit alkavat pieninä ja kasvavat monimutkaisemmiksi 12 viikon jakson loppua kohden. -Vaikka olemme tietoisesti välttäneet JavaScript-kehysten käyttöönottoa keskittyäksemme web-kehittäjän perusvalmiuksiin ennen kehysten omaksumista, hyvä seuraava askel tämän oppimateriaalin suorittamisen jälkeen on oppia Node.js:stä toisen videosarjan avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Vaikka olemme tietoisesti välttäneet JavaScript-kehysten esittelyä keskittyäksemme perusosaamiseen web-kehittäjänä ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman jälkeen olisi Node.js:n opettelu toisen videosarjan avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Tutustu myös [käytösohjeisiimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi! +> Tutustu [käyttäytymissääntöihimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi! ## 🧭 Offline-käyttö -Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsifya](https://docsify.js.org/#/). Haarauta tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikallisesti ja kirjoita tämän repokansion juurikansiossa komento `docsify serve`. Verkkosivusto toimii portissa 3000 paikallisessa koneessasi: `localhost:3000`. +Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repo, asenna [Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita tämän reposton juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 paikallisessa isäntäkoneessasi: `localhost:3000`. ## 📘 PDF - -Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +Kaikkien oppituntien PDF löytyy täältä [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Muut kurssit -Tiimimme tuottaa muitakin kursseja! Tutustu: + +Tiimimme tuottaa myös muita kursseja! Tutustu: ### LangChain @@ -223,7 +233,7 @@ Tiimimme tuottaa muitakin kursseja! Tutustu: --- -### Generatiivisen tekoälyn sarja +### Generative AI Series [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -231,7 +241,7 @@ Tiimimme tuottaa muitakin kursseja! Tutustu: --- -### Perusteet +### Core Learning [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -242,29 +252,29 @@ Tiimimme tuottaa muitakin kursseja! Tutustu: --- -### Copilot-sarja +### Copilot Series [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## Apua saamaan +## Apua -Jos jumitut tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukeva yhteisö, jossa kysymyksiä saa esittää ja tietoa jaetaan vapaasti. +Jos jäät jumiin tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on kannustava yhteisö, jossa kysymykset ovat tervetulleita ja tieto jaetaan vapaasti. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Jos sinulla on tuotteen palautetta tai kohtaat virheitä rakentamisen aikana, käy: +Jos sinulla on tuotepalautetta tai kohtaat virheitä rakennuksen aikana, käy osoitteessa: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Lisenssi -Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja löytyy tiedostosta [LICENSE](../../LICENSE). +Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja saat tiedostosta [LICENSE](../../LICENSE). --- **Vastuuvapauslauseke**: -Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ole hyvä ja huomioi, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä tulisi pitää virallisena lähteenä. Tärkeissä tiedoissa suositellaan ammattilaisten tekemää ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinymmärryksistä tai tulkinnoista. +Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ota huomioon, että automaattikäännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja omalla kielellään on virallinen ja luotettava lähde. Tärkeissä asioissa suosittelemme ammattimaista ihmis kääntäjän tekemää käännöstä. Emme ole vastuussa mahdollisista väärinymmärryksistä tai tulkinnoista, jotka johtuvat tämän käännöksen käytöstä. \ No newline at end of file diff --git a/translations/no/.co-op-translator.json b/translations/no/.co-op-translator.json index e4e16a3c5..8d3c0a00a 100644 --- a/translations/no/.co-op-translator.json +++ b/translations/no/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-07T00:56:37+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T18:23:07+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "no" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:35:49+00:00", + "translation_date": "2026-03-06T18:31:13+00:00", "source_file": "AGENTS.md", "language_code": "no" }, @@ -516,8 +516,8 @@ "language_code": "no" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:29:49+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T18:19:02+00:00", "source_file": "README.md", "language_code": "no" }, diff --git a/translations/no/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/no/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 43727b95e..15541812a 100644 --- a/translations/no/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/no/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,12 +1,12 @@ # Introduksjon til programmeringsspråk og moderne utviklerverktøy + +Hei der, fremtidige utvikler! 👋 Kan jeg fortelle deg noe som fortsatt gir meg frysninger hver eneste dag? Du er i ferd med å oppdage at programmering ikke bare handler om datamaskiner – det handler om å ha faktiske superkrefter for å bringe dine villeste ideer til live! -Hei der, fremtidige utvikler! 👋 Kan jeg fortelle deg noe som fortsatt gir meg gåsehud hver eneste dag? Du er i ferd med å oppdage at programmering ikke bare handler om datamaskiner – det handler om å ha ekte superkrefter til å bringe dine villeste ideer til live! +Du vet det øyeblikket når du bruker favorittappen din og alt bare klikker perfekt? Når du trykker på en knapp og noe helt magisk skjer som får deg til å si "wow, hvordan klarte de DET?" Vel, noen akkurat som deg – sannsynligvis sittende på sin favorittkafé klokken 2 om natten med sin tredje espresso – skrev koden som skapte den magien. Og her er det som kommer til å blåse deg av banen: innen slutten av denne leksjonen vil du ikke bare forstå hvordan de gjorde det, men du vil være ivrig etter å prøve det selv! -Du vet det øyeblikket når du bruker din favorittapp og alt bare klikker perfekt? Når du trykker på en knapp og noe helt magisk skjer som får deg til å si "wow, hvordan FIKK de til det?" Vel, noen akkurat som deg – sannsynligvis sittende på sin favorittkafé klokken 2 om natten med sin tredje espresso – skrev koden som skapte den magien. Og her er noe som kommer til å blåse deg av banen: innen slutten av denne leksjonen vil du ikke bare forstå hvordan de gjorde det, men du vil være ivrig etter å prøve det selv! +Se, jeg skjønner helt om programmering føles skremmende akkurat nå. Da jeg begynte, trodde jeg ærlig talt at man måtte være et slags mattegeni eller ha programmert siden man var fem år gammel. Men her er hva som helt endret perspektivet mitt: programmering er akkurat som å lære å føre samtaler på et nytt språk. Du begynner med "hei" og "takk," så jobber du deg opp til å bestille kaffe, og før du vet ordet av det, har du dype filosofiske diskusjoner! Bortsett fra at i dette tilfellet fører du samtaler med datamaskiner, og ærlig talt? De er de mest tålmodige samtalepartnerne du noen gang vil møte – de dømmer aldri feilene dine og er alltid gira på å prøve igjen! -Se, jeg skjønner helt hvis programmering føles skremmende akkurat nå. Da jeg først begynte, trodde jeg ærlig talt at du måtte være en slags matematikkgeni eller ha programmert siden du var fem år gammel. Men her er det som helt endret perspektivet mitt: programmering er akkurat som å lære å ha samtaler på et nytt språk. Du begynner med "hei" og "takk," så jobber du deg opp til å bestille kaffe, og før du vet ordet av det, har du dype filosofiske diskusjoner! Bortsett fra at i dette tilfellet har du samtaler med datamaskiner, og ærlig talt? De er de mest tålmodige samtalepartnerne du noensinne vil ha – de dømmer aldri feilene dine og er alltid glade for å prøve igjen! - -I dag skal vi utforske de utrolige verktøyene som gjør moderne webutvikling ikke bare mulig, men virkelig vanedannende. Jeg snakker om de samme redaktørene, nettleserne og arbeidsflytene som utviklere hos Netflix, Spotify og ditt favoritt indie app-studio bruker hver eneste dag. Og her er delen som får deg til å danse av glede: de fleste av disse profesjonelle, industristandard verktøyene er helt gratis! +I dag skal vi utforske de utrolige verktøyene som gjør moderne webutvikling ikke bare mulig, men også skikkelig vanedannende. Jeg snakker om de eksakte samme editorene, nettleserne og arbeidsflytene som utviklere hos Netflix, Spotify og ditt favoritt indie app-studio bruker hver eneste dag. Og her er delen som kommer til å få deg til å gjøre en gledessang: de fleste av disse profesjonelle, industristandard verktøyene er helt gratis! ![Intro Programming](../../../../translated_images/no/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) @@ -20,65 +20,65 @@ journey Verktøyoversikt: 5: You section Utforsk Kodeeditorer: 4: You - Nettlesere og utviklerverktøy: 5: You + Nettlesere & utviklerverktøy: 5: You Kommandolinje: 3: You section Øv - Språkdettektiv: 4: You + Språketektiv: 4: You Verktøyutforskning: 5: You - Fellesskapskontakt: 5: You + Fellesskapskobling: 5: You ``` ## La oss se hva du allerede kan! -Før vi hopper inn i det morsomme, er jeg nysgjerrig – hva vet du allerede om denne programmeringsverdenen? Og hør her, hvis du ser på disse spørsmålene og tenker "jeg har bokstavelig talt null peiling på noe av dette," så er det ikke bare greit, det er perfekt! Det betyr at du er akkurat på rett sted. Se på denne quizen som å varme opp før trening – vi varmer bare opp de hjerne-musklene! +Før vi kaster oss ut i de morsomme tingene, er jeg nysgjerrig – hva vet du allerede om denne programmeringsverdenen? Og hør her, hvis du ser på disse spørsmålene og tenker "jeg har virkelig null peiling på noe av dette," så er det ikke bare greit, det er perfekt! Det betyr at du er nøyaktig på rett plass. Tenk på denne quizen som oppvarming før trening – vi varmer bare opp de hjerne-musklene! -[Ta forprøve quizen](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Ta før-leksjons quiz](https://ff-quizzes.netlify.app/web/) -## Eventyret vi skal begi oss ut på sammen +## Eventyret vi skal gå på sammen -Ok, jeg spretter virkelig av begeistring for hva vi skal utforske i dag! Ærlig, jeg skulle ønske jeg kunne se ansiktet ditt når noen av disse konseptene klikker. Her er den utrolige reisen vi skal ta sammen: +Ok, jeg er virkelig gira på det vi skal utforske i dag! Seriøst, jeg skulle bare ønske jeg kunne se ansiktet ditt når noen av disse konseptene klikker. Her er den utrolige reisen vi tar sammen: -- **Hva programmering faktisk er (og hvorfor det er det kuleste som finnes!)** – Vi skal oppdage hvordan kode bokstavelig talt er den usynlige magien som driver alt rundt deg, fra den alarmen som på en eller annen måte vet at det er mandag morgen til algoritmen som perfekt kuraterer Netflix-anbefalingene dine -- **Programmeringsspråk og deres fantastiske personligheter** – Tenk deg å gå inn i en fest der hver person har helt forskjellige superkrefter og måter å løse problemer på. Det er akkurat slik programmeringsspråkverdenen er, og du kommer til å elske å møte dem! -- **De grunnleggende byggeklossene som skaper digital magi** – Tenk på disse som det ultimate kreative LEGO-settet. Når du forstår hvordan disse bitene passer sammen, vil du innse at du bokstavelig talt kan bygge hva som helst fantasien din drømmer om -- **Profesjonelle verktøy som får deg til å føle at du akkurat har fått tildelt en trollmanns stav** – Jeg overdriver ikke – disse verktøyene vil virkelig få deg til å føle at du har superkrefter, og det beste? Det er de samme proffene bruker! +- **Hva programmering faktisk er (og hvorfor det er det kuleste som finnes!)** – Vi skal oppdage hvordan kode bokstavelig talt er den usynlige magien som driver alt rundt deg, fra den alarmen som på mystisk vis vet at det er mandag morgen til algoritmen som perfekt kuraterer Netflix-anbefalingene dine +- **Programmeringsspråk og deres fantastiske personligheter** – Tenk deg å gå inn i en fest hvor hver person har helt forskjellige superkrefter og måter å løse problemer på. Slik er programmeringsspråkverdenen, og du kommer til å elske å bli kjent med dem! +- **De grunnleggende byggeklossene som får digital magi til å skje** – Tenk på disse som det ultimate kreative LEGO-settet. Når du forstår hvordan disse bitene passer sammen, vil du innse at du bokstavelig talt kan bygge hva som helst fantasien din drømmer om +- **Profesjonelle verktøy som får deg til å føle at du akkurat har fått overlevert en trollmanns tryllestav** – Jeg overdriver ikke – disse verktøyene vil virkelig få deg til å føle at du har superkrefter, og det beste? De er de samme proffene bruker! -> 💡 **Her er greia**: Ikke engang tenk på å prøve å huske alt i dag! Akkurat nå vil jeg bare at du skal kjenne på den gnisten av spenning over hva som er mulig. Detaljene vil feste seg naturlig når vi øver sammen – det er slik ekte læring skjer! +> 💡 **Her er saken**: Ikke engang tenk på å prøve å huske alt i dag! Akkurat nå vil jeg bare at du skal kjenne gnisten av spenning for hva som er mulig. Detaljene sitter naturlig når vi øver sammen – det er slik ekte læring skjer! -> Du kan ta denne leksjonen på [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Du kan ta denne leksjonen på [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Så hva *er* egentlig programmering? +## Hva er egentlig *programmering*? -Alright, la oss ta for oss milliondollerspørsmålet: hva er programmering, egentlig? +Ok, la oss ta million-spørsmålet: hva er programmering, egentlig? -Jeg skal gi deg en historie som helt endret hvordan jeg tenker om dette. Forrige uke prøvde jeg å forklare til mamma hvordan hun skal bruke den nye fjernkontrollen til smart-TV-en vår. Jeg fanget meg selv i å si ting som "Trykk på den røde knappen, men ikke den store røde knappen, den lille røde knappen til venstre... nei, din andre venstre... ok, hold den i to sekunder nå, ikke ett, ikke tre..." Kjenner du deg igjen? 😅 +Jeg skal fortelle deg en historie som helt endret hvordan jeg tenker på dette. Forrige uke prøvde jeg å forklare til mamma hvordan hun skulle bruke vår nye smarte TV-fjernkontroll. Jeg fanget meg selv i å si ting som "Trykk på den røde knappen, men ikke den store røde knappen, den lille røde knappen på venstre side... nei, den andre venstre... ok, hold den nå i to sekunder, ikke ett, ikke tre..." Kjenner du deg igjen? 😅 -Det er programmering! Det er kunsten å gi utrolig detaljerte, trinnvise instruksjoner til noe som er veldig kraftfullt men som må ha alt forklart perfekt. Bortsett fra at i stedet for å forklare til mamma (som kan spørre "hvilken røde knapp?!"), forklarer du til en datamaskin (som bare gjør akkurat det du sier, selv om det du sa ikke helt var det du mente). +Det er programmering! Det er kunsten å gi utrolig detaljerte, trinn-for-trinn instruksjoner til noe som er veldig kraftfullt men som trenger at alt blir forklart helt presist. Bortsett fra at i stedet for å forklare til mamma (som kan spørre "hvilken rød knapp?!"), forklarer du til en datamaskin (som bare gjør akkurat det du sier, selv om det du sa ikke helt var det du mente). -Her er noe som blåste meg av banen da jeg først lærte det: datamaskiner er faktisk ganske enkle innerst inne. De forstår bokstavelig talt kun to ting – 1 og 0, som egentlig bare betyr "ja" og "nei" eller "på" og "av." Det er det! Men her blir det magisk – vi trenger ikke snakke i 1-ere og 0-ere som i Matrix. Det er her **programmeringsspråk** kommer til unnsetning. De er som verdens beste oversetter som tar dine helt normale mennesketanker og oversetter dem til datamaskinens språk. +Her er det som blåste meg av banen da jeg først lærte det: datamaskiner er faktisk ganske enkle i kjernen. De forstår bokstavelig talt bare to ting – 1 og 0, som egentlig bare betyr "ja" og "nei" eller "på" og "av." Det er det! Men der det blir magisk – vi trenger ikke å snakke i 1 og 0 som om vi er i The Matrix. Det er der **programmeringsspråkene** kommer til unnsetning. De er som verdens beste tolk som tar dine helt vanlige menneskelige tanker og oversetter dem til datamaskinens språk. -Og her er noe som fortsatt gir meg ekte gåsehud hver morgen jeg våkner: bokstavelig talt *alt* digitalt i livet ditt startet med noen akkurat som deg, sannsynligvis sittende i pysjen med en kopp kaffe, og skrev kode på sin bærbare PC. Den Instagram-filteret som får deg til å se feilfri ut? Noen programmerte det. Anbefalingen som førte deg til din nye favorittsang? En utvikler bygde den algoritmen. Appen som hjelper deg å dele regningen på middag med venner? Jep, noen tenkte "dette er irriterende, jeg tror jeg kan fikse det" og så... gjorde de det! +Og her er det som fortsatt gir meg ekte frysninger hver morgen når jeg våkner: bokstavelig talt *alt* digitalt i livet ditt startet med noen akkurat som deg, sannsynligvis sittende i pysjamas med en kopp kaffe, og skrev kode på sin laptop. Det Instagram-filteret som får deg til å se feilfri ut? Noen har kodet det. Anbefalingen som ledet deg til din nye favorittsang? En utvikler bygde den algoritmen. Appen som hjelper deg med å splitte middagsregningen med venner? Jepp, noen tenkte "dette er irriterende, jeg tror jeg kan fikse dette" og så... gjorde de det! -Når du lærer å programmere, plukker du ikke bare opp en ny ferdighet – du blir en del av dette utrolige fellesskapet av problemløsere som tilbringer dagene sine med å tenke, "Hva om jeg kunne lage noe som gjør noens dag bare litt bedre?" Ærlig talt, finnes det noe kulere enn det? +Når du lærer å programmere, plukker du ikke bare opp en ny ferdighet – du blir en del av dette utrolige fellesskapet av problemløsere som tilbringer dagene sine med å tenke, "Hva om jeg kunne lage noe som gjør noens dag litt bedre?" Ærlig talt, finnes det noe kulere enn det? -✅ **Morsom faktajakt**: Her er noe skikkelig kult å sjekke ut når du har et ledig øyeblikk – hvem tror du var verdens første dataprogrammerer? Jeg gir deg et hint: det er kanskje ikke den du forventer! Historien bak denne personen er helt fascinerende og viser at programmering alltid har handlet om kreativ problemløsning og å tenke utenfor boksen. +✅ **Morsom fakta-jakt**: Her er noe superkult du kan se opp når du har en ledig stund – hvem tror du var verdens første dataprogrammerer? Jeg gir deg et hint: det er kanskje ikke den du forventer! Historien bak denne personen er helt fascinerende og viser at programmering alltid har handlet om kreativ problemløsning og å tenke utenfor boksen. -### 🧠 **Sjekk-inn tid: Hvordan har du det?** +### 🧠 **Sjekk inn: Hvordan har du det?** -**Ta et øyeblikk til å reflektere:** +**Ta et øyeblikk for refleksjon:** - Gir ideen om "å gi instruksjoner til datamaskiner" mening for deg nå? -- Kan du tenke deg en daglig oppgave du gjerne vil automatisere med programmering? -- Hvilke spørsmål maler seg opp i hodet ditt om hele dette programmeringstemaet? +- Kan du tenke på en daglig oppgave du gjerne vil automatisere med programmering? +- Hvilke spørsmål bobler opp i hodet ditt om hele dette programmeringsgreiene? -> **Husk**: Det er helt normalt om noen konsepter føles uklare akkurat nå. Å lære programmering er som å lære et nytt språk – det tar tid for hjernen å bygge de nevronale stiene. Du gjør det kjempebra! +> **Husk**: Det er helt normalt om noen konsepter føles uklare nå. Å lære programmering er som å lære et nytt språk – det tar tid for hjernen å bygge de nevrale forbindelsene. Du gjør det kjempebra! -## Programmeringsspråk er som forskjellige smaker av magi +## Programmeringsspråk er som forskjellige magisorter -Ok, dette kommer til å høres rart ut, men heng med – programmeringsspråk er mye som forskjellige musikksjangre. Tenk på det: du har jazz, som er smooth og improvisasjonspreget, rock som er kraftfull og rett fram, klassisk som er elegant og strukturert, og hip-hop som er kreativ og uttrykksfull. Hver stil har sin egen stemning, sitt eget fellesskap av lidenskapelige fans, og hver passer perfekt til forskjellige humør og anledninger. +Ok, dette kommer til å høres rart ut, men heng med – programmeringsspråk er veldig lik forskjellige typer musikk. Tenk på det: du har jazz, som er smooth og improvisatorisk, rock som er kraftfull og rett fram, klassisk som er elegant og strukturert, og hip-hop som er kreativ og uttrykksfull. Hver stil har sin egen stemning, sitt eget fellesskap av lidenskapelige fans, og hver er perfekt for forskjellige stemninger og anledninger. -Programmeringsspråk fungerer helt likt! Du ville ikke brukt det samme språket til å lage et morsomt mobilspill som du ville brukt til å analysere enorme mengder klimadata, akkurat som du ikke ville spilt death metal på en yogatime (vel, de fleste yogatimer iallfall! 😄). +Programmeringsspråk fungerer akkurat på samme måte! Du ville ikke brukt det samme språket til å lage et morsomt mobilspill som du ville brukt til å bearbeide store mengder klimadata, akkurat slik du ikke ville spilt death metal på en yogatime (vel, kanskje ikke på de fleste yogatimene i hvert fall! 😄). -Men her er noe som virkelig blåser meg av banen hver gang jeg tenker på det: disse språkene er som å ha verdens mest tålmodige, briljante tolk sittende rett ved siden av deg. Du kan uttrykke ideene dine på en måte som føles naturlig for din menneskehjerne, og de ordner alt det utrolig komplekse arbeidet med å oversette det til 1-ere og 0-ere som datamaskiner faktisk snakker. Det er som å ha en venn som er helt flytende i både "menneskelig kreativitet" og "datamaskinlogikk" – og som aldri blir trøtt, aldri trenger kaffepauser, og aldri dømmer deg for å stille samme spørsmål to ganger! +Men her er det som blåser meg av banen hver gang jeg tenker på det: disse språkene er som å ha den mest tålmodige, geniale tolken i verden sittende rett ved siden av deg. Du kan uttrykke ideene dine på en måte som føles naturlig for din menneskehjerne, og de håndterer alt det utrolig komplekse arbeidet med å oversette det til 1 og 0 som datamaskiner faktisk forstår. Det er som å ha en venn som er perfekt flytende i både "menneskelig kreativitet" og "datamaskinlogikk" – og de blir aldri slitne, trenger aldri kaffepauser og dømmer deg aldri for å stille samme spørsmål to ganger! ### Populære programmeringsspråk og deres bruksområder @@ -88,11 +88,11 @@ mindmap Webutvikling JavaScript Frontend Magi - Interaktive Nettsteder + Interaktive Nettsider TypeScript JavaScript + Typer Bedriftsapper - Data & AI + Data & KI Python Datavitenskap Maskinlæring @@ -106,69 +106,69 @@ mindmap Bedrift Swift iOS - Apple-økosystem + Apple Økosystem Kotlin Moderne Android - Plattformuavhengig + Kryssplattform Systemer & Ytelse C++ Spill - Ytelseskritisk + Kritisk Ytelse Rust - Minnesikkerhet + Minne Sikkerhet Systemprogrammering Go - Skybaserte Tjenester + Sky Tjenester Skalerbar Backend ``` -| Språk | Best til | Hvorfor det er populært | +| Språk | Best for | Hvorfor det er populært | |----------|----------|------------------| | **JavaScript** | Webutvikling, brukergrensesnitt | Kjører i nettlesere og driver interaktive nettsider | -| **Python** | Dataanalyse, automatisering, AI | Lett å lese og lære, kraftige biblioteker | -| **Java** | Enterprise-applikasjoner, Android-apper | Plattformuavhengig, robust for store systemer | -| **C#** | Windows-programmer, spillutvikling | Sterk støtte fra Microsoft-økosystemet | -| **Go** | Skytjenester, backendsystemer | Raskt, enkelt, designet for moderne databehandling | +| **Python** | Data science, automatisering, AI | Lett å lese og lære, kraftige biblioteker | +| **Java** | Forretningsapplikasjoner, Android-apper | Plattformuavhengig, robust for store systemer | +| **C#** | Windows-applikasjoner, spillutvikling | Sterk støtte i Microsoft-økosystemet | +| **Go** | Sky-tjenester, backend-systemer | Rask, enkel, designet for moderne databehandling | -### Høynivå- vs. lavnivåspråk +### Høynivå- kontra lavnivåspråk -Ok, dette var ærlig talt konseptet som knuste hjernen min første gang jeg lærte det, så jeg deler analogien som endelig fikk det til å klikke for meg – og jeg håper virkelig den hjelper deg også! +Ok, dette var ærlig talt konseptet som knuste hjernen min da jeg først begynte å lære, så jeg skal dele analogien som endelig fikk det til å klikke for meg – og jeg håper virkelig det hjelper deg også! -Se for deg at du besøker et land hvor du ikke snakker språket, og du desperat trenger å finne nærmeste toalett (det har vi alle vært ute for, ikke sant? 😅): +Tenk deg at du besøker et land hvor du ikke snakker språket, og du desperat trenger å finne nærmeste toalett (vi har alle vært der, ikke sant? 😅): -- **Lavnivå-programmering** er som å lære lokal dialekt så godt at du kan prate med bestemoren som selger frukt i hjørnet, med kulturelle referanser, lokal slang, og interne vitser som bare noen oppvokst der forstår. Superimponerende og utrolig effektivt... hvis du tilfeldigvis er flytende! Men ganske overveldende når du bare prøver å finne et toalett. +- **Lavnivå-programmering** er som å lære den lokale dialekten så godt at du kan prate med bestemoren som selger frukt i hjørnet ved å bruke kulturelle referanser, lokal slang og interne vitser som bare noen som har vokst opp der ville forstå. Superimponerende og utrolig effektivt... om du tilfeldigvis er flytende! Men ganske overveldende når du bare prøver å finne et toalett. -- **Høynivå-programmering** er som å ha den fantastiske lokalvennen som bare forstår deg. Du kan si "Jeg trenger virkelig å finne et toalett" på vanlig engelsk, og de ordner all kulturell oversettelse og gir deg veibeskrivelse på en måte som gir perfekt mening for din ikke-lokale hjerne. +- **Høynivå-programmering** er som å ha den fantastiske lokale vennen som bare forstår deg. Du kan si "Jeg trenger virkelig å finne et toalett" på vanlig engelsk, og de tar seg av all kulturell oversettelse og gir deg veibeskrivelse på en måte som gir perfekt mening for din ikke-lokale hjerne. I programmering betyr det: -- **Lavnivåspråk** (som Assembly eller C) lar deg ha utrolig detaljerte samtaler med datamaskinens egentlige maskinvare, men du må tenke som en maskin, som er... la oss si det: en ganske stor mental omstilling! -- **Høynivåspråk** (som JavaScript, Python eller C#) lar deg tenke som et menneske mens de tar seg av maskinspråket i kulissene. I tillegg har de ekstremt inkluderende fellesskap fulle av folk som husker hvordan det var å være ny og som virkelig ønsker å hjelpe! +- **Lavnivåspråk** (som Assembly eller C) lar deg ha utrolig detaljerte samtaler med datamaskinens faktiske maskinvare, men du må tenke som en maskin, noe som er... vel, la oss bare si det er et ganske stort mentalt skifte! +- **Høynivåspråk** (som JavaScript, Python eller C#) lar deg tenke som et menneske mens de håndterer all maskinspråket i bakgrunnen. Pluss, de har disse utrolig innbydende fellesskapene fulle av folk som husker hvordan det var å være ny og virkelig ønsker å hjelpe! -Gjett hvilke jeg anbefaler at du begynner med? 😉 Høynivåspråk er som å ha støttehjul som du aldri egentlig vil ta av fordi de gjør hele opplevelsen mye mer behagelig! +Gjett hvilke jeg kommer til å foreslå du starter med? 😉 Høynivåspråk er som å ha støttehjul på sykkelen som du aldri egentlig vil ta av fordi de gjør hele opplevelsen så mye mer hyggelig! ```mermaid flowchart TB - A["👤 Menneskelig tanke:
'Jeg vil beregne Fibonacci-tall'"] --> B{Velg språknivå} + A["👤 Menneskelig Tanke:
'Jeg vil beregne Fibonacci-tall'"] --> B{Velg Språknivå} B -->|High-Level| C["🌟 JavaScript/Python
Lett å lese og skrive"] - B -->|Low-Level| D["⚙️ Assembly/C
Direkte maskinvarestyring"] + B -->|Low-Level| D["⚙️ Assembly/C
Direkte maskinvarekontroll"] C --> E["📝 Skriv: fibonacci(10)"] D --> F["📝 Skriv: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Datamaskinforståelse:
Oversetter håndterer kompleksitet"] + E --> G["🤖 Datamaskinforståelse:
Oversetter håndterer kompleksiteten"] F --> G - G --> H["💻 Samme resultat:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Samme Resultat:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### La meg vise deg hvorfor høynivåspråk er så mye mer vennlige +### La meg vise deg hvorfor høynivåspråk er mye vennligere -Ok, jeg skal vise deg noe som perfekt demonstrerer hvorfor jeg forelsket meg i høynivåspråk, men først – jeg trenger at du lover meg noe. Når du ser det første kodeeksempelet, ikke få panikk! Det skal se skremmende ut. Det er poenget mitt! +Ok, jeg er i ferd med å vise deg noe som perfekt demonstrerer hvorfor jeg forelsket meg i høynivåspråk, men først – jeg trenger at du lover meg noe. Når du ser det første kode-eksemplet, ikke få panikk! Det skal se skremmende ut. Det er akkurat poenget mitt! -Vi skal se på den samme oppgaven skrevet i to helt ulike stiler. Begge lager det som kalles Fibonacci-sekvensen – det er et vakkert matematisk mønster der hvert tall er summen av de to forrige: 0, 1, 1, 2, 3, 5, 8, 13... (Morsom fakta: du finner dette mønsteret bokstavelig talt overalt i naturen – solsikkefrøspiraler, konglestrukturer, til og med hvordan galakser dannes!) +Vi skal se på den nøyaktige samme oppgaven skrevet i to helt forskjellige stiler. Begge lager det som kalles Fibonacci-sekvensen – det er et vakkert matematisk mønster hvor hvert tall er summen av de to foregående: 0, 1, 1, 2, 3, 5, 8, 13... (Morsomt faktum: du finner dette mønsteret bokstavelig talt overalt i naturen – solsikkefrøspiraler, konglekroner, til og med måten galakser formes på!) Klar til å se forskjellen? La oss gå! @@ -184,10 +184,10 @@ console.log('Fibonacci sequence:'); ``` **Dette gjør koden:** -- **Deklarerer** en konstant som spesifiserer hvor mange Fibonacci-tall vi vil generere -- **Initialiserer** to variabler som følger med det nåværende og neste tallet i sekvensen +- **Deklarerer** en konstant for å spesifisere hvor mange Fibonacci-tall vi vil generere +- **Initialiserer** to variabler for å holde styr på nåværende og neste tall i sekvensen - **Setter opp** startverdiene (0 og 1) som definerer Fibonacci-mønsteret -- **Viser** en overskrift for å identifisere vår utdata +- **Viser** en overskriftsmelding for å identifisere vår utdata ```javascript // Trinn 2: Generer sekvensen med en løkke @@ -201,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**Her bryter vi ned hva som skjer:** -- **Looper** gjennom hver posisjon i sekvensen ved hjelp av en `for`-løkke -- **Viser** hvert tall med sin posisjon ved hjelp av malstrengformattering -- **Beregner** neste Fibonacci-tall ved å legge sammen nåværende og neste verdi -- **Oppdaterer** våre sporingsvariabler for å gå videre til neste iterasjon +**Bryter ned hva som skjer her:** +- **Looper** gjennom hver posisjon i sekvensen med en `for`-løkke +- **Viser** hvert tall med posisjonen sin ved bruk av template literals +- **Beregner** det neste Fibonacci-tallet ved å legge sammen nåværende og neste verdi +- **Oppdaterer** våre variabler for å gå videre til neste iterasjon ```javascript // Trinn 3: Moderne funksjonell tilnærming @@ -224,11 +224,11 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**I koden ovenfor har vi:** +**I det over har vi:** - **Laget** en gjenbrukbar funksjon med moderne pilfunksjon-syntaks -- **Bygget** et array for å lagre hele sekvensen i stedet for å vise tallene ett og ett +- **Bygget** en array for å lagre hele sekvensen istedenfor å vise ett og ett tall - **Brukt** array-indeksering for å beregne hvert nytt tall fra tidligere verdier -- **Returnert** hele sekvensen for fleksibel bruk i andre deler av programmet vårt +- **Returnert** hele sekvensen for fleksibel bruk i andre deler av programmet **Lavnivåspråk (ARM Assembly) – Datamaskinvennlig:** @@ -257,31 +257,31 @@ back add r0,r1 end ``` -Legg merke til hvordan JavaScript-versjonen nesten leser som engelske instruksjoner, mens Assembly-versjonen bruker kryptiske kommandoer som direkte styrer datamaskinens prosessor. Begge gjør akkurat den samme oppgaven, men høynivåspråket er mye enklere for mennesker å forstå, skrive og vedlikeholde. +Legg merke til hvordan JavaScript-versjonen leses nesten som engelskinstruksjoner, mens Assembly-versjonen bruker kryptiske kommandoer som styrer datamaskinens prosessor direkte. Begge oppnår den nøyaktige samme oppgaven, men høynivåspråket er mye enklere for mennesker å forstå, skrive og vedlikeholde. **Viktige forskjeller du vil legge merke til:** - **Lesbarhet**: JavaScript bruker beskrivende navn som `fibonacciCount` mens Assembly bruker kryptiske etiketter som `r0`, `r1` -- **Kommentarer**: Høynivåspråk oppmuntrer til forklarende kommentarer som gjør koden selvforklarende -- **Struktur**: JavaScripts logiske flyt samsvarer med hvordan mennesker tenker på problemer steg for steg -- **Vedlikehold**: Oppdatering av JavaScript-versjonen for ulike krav er enkelt og tydelig +- **Kommentarer**: Høynivåspråk oppfordrer til forklarende kommentarer som gjør koden selvforklarende +- **Struktur**: JavaScripts logiske flyt matcher hvordan mennesker tenker på problemer trinn for trinn +- **Vedlikehold**: Å oppdatere JavaScript-versjonen for ulike krav er enkelt og klart -✅ **Om Fibonacci-sekvensen**: Dette absolutt praktfulle tallmønsteret (der hvert tall er summen av de to foregående: 0, 1, 1, 2, 3, 5, 8...) dukker bokstavelig talt opp *overalt* i naturen! Du finner det i solsikkespiraler, konglemønstre, måten nautilusskjell krummer seg på, og til og med i hvordan greiner på trær vokser. Det er ganske forbløffende hvordan matte og kode kan hjelpe oss å forstå og gjenskape mønstrene som naturen bruker for å skape skjønnhet! +✅ **Om Fibonacci-sekvensen**: Dette helt fantastiske tallmønsteret (hvor hvert tall er summen av de to foregående: 0, 1, 1, 2, 3, 5, 8...) dukker bokstavelig talt opp *overalt* i naturen! Du finner det i solsikkespiraler, konglemønstre, hvordan nautilusskall krummer seg og til og med i hvordan tregrener vokser. Det er ganske utrolig hvordan matematikk og kode kan hjelpe oss med å forstå og gjenskape mønstrene naturen bruker for å skape skjønnhet! -## Byggeklossene som får magien til å skje +## Byggesteinene som får magien til å skje -Ok, nå som du har sett hvordan programmeringsspråk ser ut i praksis, la oss bryte ned de grunnleggende delene som utgjør bokstavelig talt ethvert program som noen gang er skrevet. Tenk på disse som de essensielle ingrediensene i din favorittoppskrift – når du forstår hva hver enkelt gjør, kan du lese og skrive kode i stort sett ethvert språk! +Ok, nå som du har sett hvordan programmeringsspråk ser ut i praksis, la oss bryte ned de grunnleggende delene som utgjør bokstavelig talt hvert program som noen gang er skrevet. Tenk på disse som de essensielle ingrediensene i din favorittoppskrift – når du forstår hva hver enkelt gjør, vil du kunne lese og skrive kode i omtrent hvilket som helst språk! -Dette er litt som å lære programmeringens grammatikk. Husker du på skolen da du lærte om substantiv, verb, og hvordan du setter sammen setninger? Programmering har sin egen versjon av grammatikk, og ærlig talt er den mye mer logisk og tilgivende enn engelsk grammatikk noen gang var! 😄 +Dette er litt som å lære programmeringens grammatikk. Husker du da du gikk på skolen og lærte om substantiv, verb og hvordan sette sammen setninger? Programmering har sin egen versjon av grammatikk, og ærlig talt, den er mye mer logisk og tilgivende enn engelsk grammatikk noen gang var! 😄 -### Setninger: Instruksjonene steg for steg +### Setninger: Steg-for-steg-instruksjoner -La oss starte med **setninger** – disse er som individuelle setninger i en samtale med datamaskinen din. Hver setning forteller datamaskinen å gjøre én bestemt ting, litt som å gi veibeskrivelser: "Ta til venstre her," "Stopp ved rødt lys," "Parker på den plassen." +La oss starte med **setninger** – disse er som enkeltsetninger i en samtale med datamaskinen din. Hver setning forteller datamaskinen å gjøre en spesifikk ting, omtrent som å gi veibeskrivelser: "Sving til venstre her," "Stopp ved det røde lyset," "Parkér på det stedet." -Det jeg elsker med setninger, er hvor lesbare de vanligvis er. Se her: +Det jeg elsker med setninger er hvor lesbare de vanligvis er. Se på dette: ```javascript -// Grunnleggende utsagn som utfører enkelt handlinger +// Grunnleggende uttalelser som utfører enkelthandlinger const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; @@ -289,26 +289,26 @@ const sum = 5 + 3; **Slik fungerer denne koden:** - **Deklarer** en konstant variabel for å lagre en brukers navn -- **Viser** en hilsen i konsollutskriften +- **Viser** en hilsen til konsollutgangen - **Beregner** og lagrer resultatet av en matematisk operasjon ```javascript -// Setninger som samhandler med nettsider +// Utsagn som samhandler med nettsider document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Steg for steg, slik skjer det:** +**Trinn for trinn, slik skjer det:** - **Endrer** nettsidens tittel som vises i nettleserfanen -- **Endrer** bakgrunnsfargen for hele sideskroppen +- **Endrer** bakgrunnsfargen på hele sidens kropp ### Variabler: Programmets minnesystem Ok, **variabler** er ærlig talt et av mine absolutte favorittkonsepter å lære bort fordi de er så mye som ting du allerede bruker hver eneste dag! -Tenk på kontaktlisten på telefonen din et øyeblikk. Du husker ikke folks telefonnumre – i stedet lagrer du "Mamma," "Bestevenn," eller "Pizza-stedet som leverer til klokka 2 om natta" og lar telefonen huske de faktiske numrene. Variabler fungerer på akkurat samme måte! De er som merkede beholdere hvor programmet ditt kan lagre informasjon og hente det igjen senere ved hjelp av et navn som faktisk gir mening. +Tenk på kontaktlisten på telefonen din et øyeblikk. Du husker ikke alles telefonnummer – du lagrer i stedet "Mamma," "Bestevenn," eller "Pizzastedet som leverer til kl. 2" og lar telefonen huske de faktiske numrene. Variabler fungerer akkurat på samme måte! De er som merkede beholdere hvor programmet ditt kan lagre informasjon og hente den senere ved å bruke et navn som faktisk gir mening. -Det som er skikkelig kult: variabler kan endre seg mens programmet kjører (derfor navnet "variabel" – ser du hva de gjorde der?). Akkurat som du kanskje oppdaterer kontakten til pizzastedet når du finner et enda bedre sted, kan variabler oppdateres når programmet lærer ny informasjon eller når situasjoner endrer seg! +Det som er skikkelig kult: variabler kan endres mens programmet kjører (derfor navnet "variabel" – ser du hva de gjorde der?). Akkurat som du kanskje oppdaterer pizzakontakten når du finner et enda bedre sted, kan variablene oppdateres når programmet ditt lærer ny informasjon eller situasjoner endres! La meg vise deg hvor vakkert enkelt dette kan være: @@ -321,10 +321,10 @@ let isRaining = false; ``` **Å forstå disse konseptene:** -- **Lagrer** uforanderlige verdier i `const`-variabler (som nettstedets navn) -- **Bruker** `let` for verdier som kan endre seg gjennom programmet -- **Tildeler** ulike datatyper: strenger (tekst), tall og booleans (sant/usant) -- **Velger** beskrivende navn som forklarer hva hver variabel inneholder +- **Lagre** uforanderlige verdier i `const`-variabler (som nettstedets navn) +- **Bruke** `let` for verdier som kan endre seg gjennom programmet +- **Tilordne** forskjellige datatyper: strenger (tekst), tall og booleans (true/false) +- **Velge** beskrivende navn som forklarer hva hver variabel inneholder ```javascript // Trinn 2: Arbeide med objekter for å gruppere relatert data @@ -335,10 +335,10 @@ const weatherData = { }; ``` -**I eksempelet over har vi:** +**I eksemplet over har vi:** - **Opprettet** et objekt for å gruppere relatert værinformasjon - **Organisert** flere datadeler under ett variabelnavn -- **Brukt** nøkkel-verdi-par for tydelig å merke hver informasjon +- **Brukt** nøkkel-verdi-par for å tydelig merke hver informasjonsbit ```javascript // Trinn 3: Bruke og oppdatere variabler @@ -351,10 +351,10 @@ temperature = 68; ``` **La oss forstå hver del:** -- **Viser** informasjon ved hjelp av template-literals med `${}`-syntaks -- **Tilgang** til objektets egenskaper med punktnotation (`weatherData.windSpeed`) -- **Oppdaterer** variabler deklarert med `let` for å reflektere endrede forhold -- **Kombinerer** flere variabler for å lage meningsfulle meldinger +- **Vis** informasjon ved hjelp av mal-litteraler med `${}`-syntaks +- **Tilgang** til objektets egenskaper med dot-notasjon (`weatherData.windSpeed`) +- **Oppdater** variabler deklarert med `let` for å gjenspeile endrede forhold +- **Kombiner** flere variabler for å lage meningsfulle meldinger ```javascript // Trinn 4: Moderne destrukturering for renere kode @@ -362,23 +362,23 @@ const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Det du trenger å vite:** -- **Eksktrakter** spesifikke egenskaper fra objekter ved hjelp av destrukturering -- **Oppretter** nye variabler automatisk med samme navn som objektets nøkler -- **Forenkler** kode ved å unngå repeterende punktnotation +**Det du må vite:** +- **Hent ut** spesifikke egenskaper fra objekter med destrukturering +- **Opprette** nye variabler automatisk med samme navn som objektets nøkler +- **Forenkle** koden ved å unngå gjentatt dot-notasjon -### Kontrollflyt: Lærer programmet ditt å tenke +### Kontrollflyt: Lær programmet ditt å tenke -Ok, nå blir programmering helt sinnssykt spennende! **Kontrollflyt** handler i bunn og grunn om å lære programmet ditt å ta smarte valg, akkurat som du gjør hver eneste dag uten å tenke på det. +Ok, dette er der programmering blir helt sinnssykt! **Kontrollflyt** er i bunn og grunn å lære programmet ditt å ta smarte avgjørelser, akkurat som du gjør hver eneste dag uten engang å tenke over det. -Se for deg: i dag morges gikk du sikkert gjennom noe som "Hvis det regner, tar jeg med paraply. Hvis det er kaldt, tar jeg på jakke. Hvis jeg er sen, hopper jeg over frokost og tar kaffe på veien." Hjernen din følger naturlig denne hvis-så-logikken dusinvis av ganger hver dag! +Se for deg: i dag tidlig gikk du sannsynligvis gjennom noe som "Hvis det regner, tar jeg med paraply. Hvis det er kaldt, tar jeg på jakke. Hvis jeg er sen, hopper jeg over frokost og tar med kaffe." Hjernen din følger naturlig denne hvis-da-logikken dusinvis av ganger hver dag! -Dette er det som gjør at programmer føles intelligente og levende i stedet for bare å følge et kjedelig, forutsigbart manus. De kan faktisk se på en situasjon, vurdere hva som skjer, og svare passende. Det er som å gi programmet ditt en hjerne som kan tilpasse seg og ta valg! +Dette gjør at programmer føles intelligente og levende, i stedet for bare å følge noen kjedelige, forutsigbare skript. De kan faktisk se på en situasjon, vurdere hva som skjer, og reagere passende. Det er som å gi programmet ditt en hjerne som kan tilpasse seg og ta valg! -Vil du se hvor vakkert dette fungerer? La meg vise deg: +Vil du se hvor fint dette fungerer? La meg vise deg: ```javascript -// Trinn 1: Grunnleggende betingelseslogikk +// Trinn 1: Grunnleggende betinget logikk const userAge = 17; if (userAge >= 18) { @@ -390,13 +390,13 @@ if (userAge >= 18) { ``` **Dette gjør koden:** -- **Sjekker** om brukerens alder møter kravene for å stemme -- **Utfører** ulike kodeblokker basert på betingelsens resultat -- **Beregner** og viser hvor lenge det er til stemmeretten oppnås hvis under 18 -- **Gir** spesifikk, hjelpsom tilbakemelding for hvert scenario +- **Sjekker** om brukerens alder møter stemmerettskravet +- **Utfører** forskjellige kodeblokker basert på resultatet +- **Beregner** og viser hvor lenge til stemmerettelighet hvis under 18 +- **Gir** spesifikke, hjelpsomme tilbakemeldinger for hver situasjon ```javascript -// Trinn 2: Flere betingelser med logiske operatorer +// Steg 2: Flere betingelser med logiske operatorer const userAge = 17; const hasPermission = true; @@ -409,22 +409,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**Bryter ned hva som skjer her:** +**Slik brytes det ned:** - **Kombinerer** flere betingelser med `&&` (og)-operatoren -- **Oppretter** et hierarki av betingelser med `else if` for flere scenarier -- **Håndterer** alle mulige tilfeller med en avsluttende `else`-setning -- **Gir** klare, handlingsorienterte tilbakemeldinger for hver ulik situasjon +- **Oppretter** et hierarki av betingelser med `else if` for flere scenarioer +- **Håndterer** alle mulige tilfeller med en siste `else`-setning +- **Gir** klare og handlingsrettede tilbakemeldinger for hver situasjon ```javascript -// Steg 3: Kortfattet betingelse med ternær operator +// Trinn 3: Konsis betingelse med ternæroperator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **Det du må huske:** -- **Bruker** ternæroperatoren (`? :`) for enkle to-vals-betingelser -- **Skriver** betingelsen først, så `?`, så sant-resultat, deretter `:`, og til slutt usant-resultat -- **Bruker** dette mønsteret når du trenger å tildele verdier basert på betingelser +- **Bruk** den ternære operatoren (`? :`) for enkle to-alternativ-betingelser +- **Skriv** betingelse først, etterfulgt av `?`, så sant resultat, deretter `:`, og så usant resultat +- **Bruk** dette mønsteret når du trenger å tilordne verdier basert på betingelser ```javascript // Trinn 4: Håndtering av flere spesifikke tilfeller @@ -448,54 +448,54 @@ switch (dayOfWeek) { ``` **Denne koden gjør følgende:** -- **Sammenligner** variabelverdien med flere spesifikke tilfeller -- **Grupperer** lignende tilfeller (ukedager vs. helger) -- **Utfører** riktig blokkkode når en samsvar finnes -- **Inkluderer** en `default`-case for uventede verdier -- **Bruker** `break` for å forhindre koden i å fortsette til neste case +- **Matcher** variabelverdien mot flere spesifikke tilfeller +- **Grupperer** lignende tilfeller sammen (ukedager vs. helger) +- **Utfører** passende kodeblokk når en match finnes +- **Inkluderer** en `default`-tilfelle for å håndtere uventede verdier +- **Bruker** `break`-setninger for å forhindre at koden fortsetter til neste tilfelle -> 💡 **Virkelighetsanalogien**: Tenk på kontrollflyt som å ha verdens mest tålmodige GPS som gir deg veibeskrivelser. Den kan si "Hvis det er trafikk i Main Street, ta motorveien i stedet. Hvis veiarbeid blokkerer motorveien, prøv den naturskjønne veien." Programmer bruker nøyaktig samme type betinget logikk for å svare intelligent på forskjellige situasjoner og alltid gi brukerne den beste mulige opplevelsen. +> 💡 **Virkelighetsanalog**: Tenk på kontrollflyt som verdens mest tålmodige GPS som gir deg veibeskrivelser. Den kan si "Hvis det er trafikk i Main Street, ta motorveien i stedet. Hvis veiarbeid blokkerer motorveien, prøv den naturskjønne ruten." Programmer bruker akkurat samme type betingede logikk for å svare intelligent på ulike situasjoner og alltid gi brukerne den best mulige opplevelsen. -### 🎯 **Konsept-sjekk: Behersk byggeklossene** +### 🎯 **Konsept-sjekk: Mester i byggesteiner** **La oss se hvordan det går med det grunnleggende:** -- Kan du forklare forskjellen på en variabel og en setning med egne ord? -- Tenk på et virkelig scenario hvor du ville brukt en hvis-så-beslutning (som i vårt stemme-eksempel) -- Hva er én ting ved programmeringslogikk som overrasket deg? +- Kan du forklare forskjellen mellom en variabel og en setning med egne ord? +- Tenk på et virkelig scenario hvor du ville brukt en hvis-da-beslutning (som stemmeeksemplet vårt) +- Hva er én ting om programmeringslogikk som overrasket deg? -**Rask selvtillits-boost:** +**Rask selvtillitsboost:** ```mermaid flowchart LR - A["📝 Utsagn
(Instruksjoner)"] --> B["📦 Variabler
(Lagring)"] --> C["🔀 Kontrollflyt
(Beslutninger)"] --> D["🎉 Fungerende program!"] + A["📝 Setninger
(Instruksjoner)"] --> B["📦 Variabler
(Lagring)"] --> C["🔀 Kontrollflyt
(Beslutninger)"] --> D["🎉 Fungert program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Hva som kommer nå**: Vi skal ha det utrolig gøy med å dykke dypere inn i disse konseptene mens vi fortsetter denne utrolige reisen sammen! Akkurat nå, fokuser bare på å kjenne på spenningen over alle de fantastiske mulighetene som ligger foran deg. De spesifikke ferdighetene og teknikkene vil naturlig feste seg når vi øver sammen – jeg lover dette kommer til å bli så mye morsommere enn du kanskje forventer! +✅ **Hva som kommer nå**: Vi skal ha det utrolig gøy med å dykke dypere inn i disse konseptene mens vi fortsetter denne utrolige reisen sammen! For nå, bare fokuser på å kjenne spenningen for alle de fantastiske mulighetene foran deg. De spesifikke ferdighetene og teknikkene vil komme naturlig ettersom vi øver sammen – jeg lover dette blir mye mer moro enn du kanskje forventer! -## Verktøyene for jobben +## Verktøyene i faget -Ok, her blir jeg faktisk så gira at jeg nesten ikke klarer å holde meg! 🚀 Vi skal snakke om de utrolige verktøyene som får deg til å føle at du akkurat har fått nøklene til et digitalt romskip. +Ok, ærlig talt, her blir jeg så gira at jeg nesten ikke klarer å holde meg! 🚀 Vi skal snakke om de utrolige verktøyene som kommer til å få deg til å føle at du nettopp har fått nøklene til et digitalt romskip. -Du vet hvordan en kokk har de perfekt balanserte knivene som føles som en forlengelse av hendene? Eller hvordan en musiker har den ene gitaren som nesten synger fra første berøring? Vel, utviklere har sin egen versjon av slike magiske verktøy, og her er det som virkelig kommer til å blåse deg av banen – de fleste av dem er helt gratis! +Vet du hvordan en kokk har de perfekte balanseknivene som føles som en forlengelse av hendene? Eller hvordan en musiker har den ene gitaren som virker som den synger i det de tar på den? Vel, utviklere har vår egen versjon av disse magiske verktøyene, og her kommer det som kommer til å blåse deg av banen – de fleste av dem er helt gratis! -Jeg sitter nesten og hopper i stolen bare ved tanken på å dele disse med deg, fordi de har fullstendig revolusjonert hvordan vi bygger programvare. Vi snakker AI-drevne kodeassistenter som kan hjelpe deg å skrive koden (jeg tuller ikke engang!), skybaserte miljøer hvor du bokstavelig talt kan bygge hele applikasjoner hvor som helst med Wi-Fi, og feilsøkingsverktøy så avanserte at det er som å ha røntgensyn for programmene dine. +Jeg hopper nesten i stolen av begeistring over å dele disse med deg fordi de har revolusjonert hvordan vi bygger programvare. Vi snakker om AI-drevne kodeassistenter som kan hjelpe deg med å skrive kode (jeg tuller ikke!), cloud-miljøer hvor du kan bygge hele applikasjoner fra bokstavelig talt hvor som helst med Wi-Fi, og feilsøkingsverktøy så avanserte at de føles som røntgensyn for programmene dine. -Og her er delen som fortsatt gir meg gåsehud: dette er ikke "begynnerverktøy" som du vil vokse fra. Dette er akkurat de samme profesjonelle verktøyene som utviklere hos Google, Netflix og indie-appstudioet du digger bruker akkurat nå. Du kommer til å føle deg som en proff når du bruker dem! +Og her er den delen som fortsatt gir meg frysninger: dette er ikke "begynnerverktøy" du vokser fra. Dette er de samme profesjonelle verktøyene som utviklere i Google, Netflix, og det indie app-studioet du elsker bruker akkurat nå. Du kommer til å føle deg som en proff ved å bruke dem! ```mermaid graph TD - A["💡 Din Idé"] --> B["⌨️ Kodeeditor
(VS Code)"] - B --> C["🌐 Nettleser DevTools
(Testing & Feilsøking)"] - C --> D["⚡ Kommandolinje
(Automatisering & Verktøy)"] - D --> E["📚 Dokumentasjon
(Læring & Referanse)"] - E --> F["🚀 Fantastisk Nettapp!"] + A["💡 Din ide"] --> B["⌨️ Kodeeditor
(VS Code)"] + B --> C["🌐 Nettleser DevTools
(Testing og feilsøking)"] + C --> D["⚡ Kommandolinje
(Automatisering og verktøy)"] + D --> E["📚 Dokumentasjon
(Læring og referanse)"] + E --> F["🚀 Fantastisk nettapp!"] - B -.-> G["🤖 AI Assistent
(GitHub Copilot)"] - C -.-> H["📱 Enhetstesting
(Responsivt Design)"] - D -.-> I["📦 Pakkebehandlere
(npm, yarn)"] + B -.-> G["🤖 AI-assistent
(GitHub Copilot)"] + C -.-> H["📱 Enhetstesting
(Responsivt design)"] + D -.-> I["📦 Pakkehåndterere
(npm, yarn)"] E -.-> J["👥 Fellesskap
(Stack Overflow)"] style A fill:#fff59d @@ -505,96 +505,96 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Kodeeditorer og IDEer: Dine nye digitale bestevenner +### Kodeeditorer og IDE-er: Dine nye digitale bestevenner -La oss snakke om kodeeditorer – disse kommer seriøst til å bli dine nye favorittsteder å henge! Tenk på dem som ditt personlige kodefristed hvor du kommer til å tilbringe mesteparten av tiden din med å skape og perfeksjonere dine digitale kreasjoner. +La oss snakke om kodeeditorer – disse kommer seriøst til å bli dine nye favorittsteder å henge! Tenk på dem som din personlige kodebastion hvor du tilbringer mesteparten av tiden din på å lage og perfeksjonere dine digitale kreasjoner. -Men det som er helt magisk med moderne editorer: de er ikke bare fancy tekstredigerere. Det er som å ha den mest briljante og støttende kode-mentoren sittende rett ved siden av deg 24/7. De fanger opp skrivefeil før du engang legger merke til dem, foreslår forbedringer som får deg til å se ut som et geni, hjelper deg å forstå hva hver bit av koden gjør, og noen av dem kan til og med forutsi hva du kommer til å skrive og tilby å fullføre tankene dine! +Men det som er helt magisk med moderne editorer: de er ikke bare fancy tekstredigerere. De er som å ha den mest briljante, støttende kodeveilederen som sitter rett ved siden av deg 24/7. De fanger opp skrivefeil før du merker dem, foreslår forbedringer som får deg til å se ut som et geni, hjelper deg å forstå hva hver liten del av koden gjør, og noen av dem kan til og med forutsi hva du holder på å skrive og tilby å fullføre tankene dine! -Jeg husker da jeg først oppdaget auto-fullføring – jeg følte bokstavelig talt at jeg levde i fremtiden. Du begynner å skrive noe, og redigereren sier, "Hei, tenkte du på denne funksjonen som gjør akkurat det du trenger?" Det er som å ha en tankeleser som kodekompis! +Jeg husker da jeg først oppdaget autfullføring – jeg følte bokstavelig talt at jeg levde i framtiden. Du begynner å skrive noe, og editoren sier, "Hei, tenkte du på denne funksjonen som gjør akkurat det du trenger?" Det er som å ha en tankeleser som kodekompis! **Hva gjør disse editorene så utrolige?** -Moderne kodeeditorer tilbyr et imponerende sett med funksjoner designet for å øke produktiviteten din: +Moderne kodeeditorer tilbyr en imponerende rekke funksjoner designet for å øke produktiviteten din: | Funksjon | Hva den gjør | Hvorfor det hjelper | -|----------|--------------|---------------------| -| **Syntax highlighting** | Farger ulike deler av koden din | Gjør koden enklere å lese og oppdage feil | -| **Autofullføring** | Foreslår kode mens du skriver | Farter opp koding og reduserer skrivefeil | -| **Feilsøkingsverktøy** | Hjelper deg å finne og fikse feil | Spar timer med feilsøking | -| **Utvidelser** | Legger til spesialfunksjoner | Tilpass editoren for hvilken som helst teknologi | -| **AI-assistenter** | Foreslår kode og forklaringer | Akselererer læring og produktivitet | +|---------|--------------|--------------| +| **Syntaksutheving** | Farger forskjellige deler av koden din | Gjør koden lettere å lese og oppdage feil | +| **Autocompletion** | Foreslår kode mens du skriver | Øker hastigheten på koding og reduserer skrivefeil | +| **Feilsøkingsverktøy** | Hjelper deg finne og fikse feil | Spar timer med feilsøking | +| **Utvidelser** | Legg til spesialiserte funksjoner | Tilpass editoren for hvilken som helst teknologi | +| **AI-assistenter** | Foreslår kode og forklaringer | Øker læring og produktivitet | -> 🎥 **Videoressurs**: Vil du se disse verktøyene i aksjon? Sjå denne [Tools of the Trade videoen](https://youtube.com/watch?v=69WJeXGBdxg) for en grundig oversikt. +> 🎥 **Videoressurs**: Vil du se disse verktøyene i aksjon? Sjekk ut denne [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for en omfattende oversikt. #### Anbefalte editorer for webutvikling **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) -- Mest populær blant webutviklere -- Fantastisk økosystem av utvidelser +- Mest brukt blant webutviklere +- Utmerket økosystem for utvidelser - Innebygd terminal og Git-integrasjon -- **Må-ha-utvidelser**: +- **Må ha-utvidelser**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-drevne kodeforslag - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Samarbeid i sanntid + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Sanntidssamarbeid - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatisk kodeformatering - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fanger skrivefeil i koden + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fanger skrivefeil i koden din **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betalt, gratis for studenter) - Avanserte feilsøkings- og testverktøy - Intelligent kodefullføring - Innebygd versjonskontroll -**Skybaserte IDEer** (Ulike priser) +**Cloud-baserte IDE-er** (Forskjellige prisklasser) - [GitHub Codespaces](https://github.com/features/codespaces) - Full VS Code i nettleseren - [Replit](https://replit.com/) - Flott for læring og deling av kode - [StackBlitz](https://stackblitz.com/) - Umiddelbar full-stack webutvikling -> 💡 **Kom i gang-tipset**: Start med Visual Studio Code – det er gratis, mye brukt i bransjen, og har et enormt fellesskap som lager hjelpsomme tutorials og utvidelser. +> 💡 **Kom i gang-tips**: Start med Visual Studio Code – det er gratis, mye brukt i bransjen, og har et enormt fellesskap som lager hjelpsomme tutorials og utvidelser. ### Nettlesere: Ditt hemmelige utviklingslaboratorium -Ok, gjør deg klar til å få helt hodet blåst av! Du vet hvordan du har brukt nettlesere til å scrolle gjennom sosiale medier og se videoer? Vel, det viser seg at de har gjemt på dette utrolige hemmelige utviklingslaboratoriet hele tiden, bare ventet på at du skulle oppdage det! +Ok, gjør deg klar til å bli helt overveldet! Du vet hvordan du har brukt nettlesere til å bla gjennom sosiale medier og se videoer? Vel, det viser seg at de har skjult dette utrolige hemmelige utviklingslaboratoriet hele tiden, bare ventende på at du skal oppdage det! -Hver gang du høyreklikker på en nettside og velger "Inspiser element," åpner du en skjult verden av utviklerverktøy som ærlig talt er kraftigere enn noen dyr programvare jeg pleide å betale hundrevis av dollar for. Det er som å oppdage at ditt vanlige kjøkken har gjemt et profesjonelt kokkelaboratorium bak en hemmelig luke! -Første gang noen viste meg nettleserens DevTools, brukte jeg omtrent tre timer bare på å klikke rundt og si "VENT, KAN DEN GJØRE DET OGSÅ?!" Du kan bokstavelig talt redigere hvilken som helst nettside i sanntid, se nøyaktig hvor raskt alt laster, teste hvordan siden din ser ut på forskjellige enheter, og til og med feilsøke JavaScript som en proff. Det er helt fantastisk! +Hver eneste gang du høyreklikker på en nettside og velger "Inspiser element," åpner du en skjult verden av utviklerverktøy som ærlig talt er kraftigere enn noe dyrt programvare jeg pleide å betale hundrevis av kroner for. Det er som å oppdage at ditt vanlige kjøkken har skjult et profesjonelt kokkelaboratorium bak en hemmelig luke! +Første gang noen viste meg nettleserens DevTools, brukte jeg omtrent tre timer bare på å klikke rundt og si "VENT, KAN DEN GJØRE DETTE OGSÅ?!" Du kan bokstavelig talt redigere hvilken som helst nettside i sanntid, se nøyaktig hvor raskt alt lastes, teste hvordan siden din ser ut på forskjellige enheter, og til og med feilsøke JavaScript som en ekte proff. Det er helt utrolig! **Her er hvorfor nettlesere er ditt hemmelige våpen:** -Når du lager en nettside eller webapplikasjon, må du se hvordan den ser ut og oppfører seg i den virkelige verden. Nettlesere viser ikke bare arbeidet ditt, men gir også detaljert tilbakemelding om ytelse, tilgjengelighet og potensielle problemer. +Når du lager en nettside eller webapplikasjon, trenger du å se hvordan den ser ut og oppfører seg i virkeligheten. Nettlesere viser ikke bare arbeidet ditt, men gir også detaljert tilbakemelding om ytelse, tilgjengelighet og potensielle problemer. -#### Nettleserens utviklerverktøy (DevTools) +#### Browser Developer Tools (DevTools) -Moderne nettlesere inkluderer omfattende utviklingspakker: +Moderne nettlesere inkluderer omfattende utviklingsverktøy: | Verktøykategori | Hva det gjør | Eksempelbruk | |-----------------|--------------|--------------| -| **Elementinspektør** | Se og rediger HTML/CSS i sanntid | Juster styling for å se umiddelbare resultater | -| **Konsoll** | Se feilmeldinger og test JavaScript | Feilsøk problemer og eksperimenter med kode | -| **Nettverksovervåker** | Følg hvordan ressurser lastes | Optimaliser ytelse og lastetider | -| **Tilgjengelighetssjekker** | Test for inkluderende design | Sikre at siden din fungerer for alle brukere | -| **Enhetssimulator** | Forhåndsvis på forskjellige skjermstørrelser | Test responsivt design uten flere enheter | +| **Elementinspektør** | Se og redigere HTML/CSS i sanntid | Justere stil for å se resultater umiddelbart | +| **Konsoll** | Se feilmeldinger og teste JavaScript | Feilsøke problemer og eksperimentere med kode | +| **Nettverksmonitor** | Spore hvordan ressurser lastes | Optimalisere ytelse og lastetider | +| **Tilgjengelighetstester** | Teste for inkluderende design | Sikre at siden fungerer for alle brukere | +| **Enhetssimulator** | Forhåndsvise på forskjellige skjermstørrelser | Teste responsivt design uten flere enheter | #### Anbefalte nettlesere for utvikling -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industriens standard DevTools med omfattende dokumentasjon -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Fremragende CSS Grid og tilgjengelighetsverktøy -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Bygget på Chromium med Microsofts utviklerressurser +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Bransjestandard DevTools med omfattende dokumentasjon +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Utmerkede CSS Grid- og tilgjengelighetsverktøy +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Basert på Chromium med Microsofts utviklerressurser -> ⚠️ **Viktig testingstips**: Test alltid nettsidene dine i flere nettlesere! Det som fungerer perfekt i Chrome kan se annerledes ut i Safari eller Firefox. Profesjonelle utviklere tester på tvers av alle større nettlesere for å sikre konsistente brukeropplevelser. +> ⚠️ **Viktig testtips**: Test alltid nettsidene dine i flere nettlesere! Det som fungerer perfekt i Chrome, kan se annerledes ut i Safari eller Firefox. Profesjonelle utviklere tester på tvers av alle store nettlesere for å sikre en jevn brukeropplevelse. ### Kommandolinjeverktøy: Din inngangsport til utviklersuperkrefter -Ok, la oss ha et helt ærlig øyeblikk her om kommandolinjen, fordi jeg vil at du skal høre dette fra noen som virkelig forstår det. Da jeg først så den – bare denne skumle svarte skjermen med blinkende tekst – tenkte jeg bokstavelig talt, "Nei, absolutt ikke! Dette ser ut som noe fra en hackerfilm på 1980-tallet, og jeg er definitivt ikke smart nok for dette!" 😅 +Ok, la oss ha et ærlig øyeblikk her om kommandolinjen, for jeg vil at du skal høre dette fra noen som virkelig forstår det. Da jeg først så den – bare denne skumle svarte skjermen med blinkende tekst – tenkte jeg bokstavelig talt, "Nei, absolutt ikke! Dette ser ut som noe fra en hackerfilm på 80-tallet, og jeg er definitivt ikke smart nok for dette!" 😅 -Men her er hva jeg skulle ønske noen hadde fortalt meg da, og hva jeg forteller deg akkurat nå: kommandolinjen er ikke skummel – det er faktisk som å ha en direkte samtale med datamaskinen din. Tenk på det som forskjellen mellom å bestille mat gjennom en fancy app med bilder og menyer (som er greit og enkelt) versus å gå inn i din favoritt lokale restaurant der kokken vet nøyaktig hva du liker og kan trylle fram noe perfekt bare ved at du sier "overrask meg med noe fantastisk." +Men her er det jeg skulle ønske noen hadde fortalt meg den gang, og det jeg sier til deg nå: kommandolinjen er ikke skummel – det er faktisk som å ha en direkte samtale med datamaskinen din. Tenk på det som forskjellen mellom å bestille mat via en fancy app med bilder og menyer (som er enkelt og greit) versus å gå inn på din favorittlokale restaurant hvor kokken vet nøyaktig hva du liker og kan lage noe perfekt bare ved at du sier "overrask meg med noe fantastisk." -Kommandolinjen er stedet hvor utviklere føler seg som ekte trollmenn. Du skriver noen tilsynelatende magiske ord (ok, det er bare kommandoer, men de føles magiske!), trykker enter, og BOOM – du har laget hele prosjektstrukturer, installert kraftige verktøy fra hele verden, eller rullet ut appen din på internett for millioner å se. Når du først kjenner på den kraften, er det faktisk ganske vanedannende! +Kommandolinjen er stedet hvor utviklere føler seg som ekte trollmenn. Du skriver noen tilsynelatende magiske ord (ok, det er bare kommandoer, men de føles magiske!), trykker enter, og BOOM – du har opprettet hele prosjektstrukturer, installert kraftige verktøy fra hele verden, eller publisert appen din på Internett slik at millioner kan se den. Når du først smaker på den kraften, blir det ærlig talt ganske avhengighetsskapende! -**Hvorfor kommandolinjen blir ditt favorittverktøy:** +**Hvorfor kommandolinjen vil bli ditt favorittverktøy:** -Mens grafiske grensesnitt er flotte for mange oppgaver, utmerker kommandolinjen seg på automatisering, presisjon og fart. Mange utviklingsverktøy fungerer primært gjennom kommandolinjegrensesnitt, og å lære å bruke dem effektivt kan forbedre produktiviteten din dramatisk. +Mens grafiske grensesnitt er flotte for mange oppgaver, utmerker kommandolinjen seg på automatisering, presisjon og fart. Mange utviklingsverktøy fungerer primært gjennom kommandolinjegrensesnitt, og å lære å bruke dem effektivt kan dramatisk forbedre produktiviteten din. ```bash # Trinn 1: Opprett og naviger til prosjektmappen @@ -603,11 +603,11 @@ cd my-awesome-website ``` **Dette gjør koden:** -- **Oppretter** en ny katalog kalt "my-awesome-website" for prosjektet ditt -- **Går inn** i den nylig opprettede katalogen for å begynne å jobbe +- **Oppretter** en ny mappe kalt "my-awesome-website" for prosjektet ditt +- **Går inn** i den nylig opprettede mappen for å begynne arbeidet ```bash -# Trinn 2: Initialiser prosjektet med package.json +# Trinn 2: Initialiser prosjekt med package.json npm init -y # Installer moderne utviklingsverktøy @@ -616,10 +616,10 @@ npm install --save-dev @eslint/js ``` **Steg for steg, dette skjer:** -- **Initierer** et nytt Node.js-prosjekt med standardinnstillinger via `npm init -y` -- **Installerer** Vite som et moderne byggeverktøy for rask utvikling og produksjonsbygging -- **Legger til** Prettier for automatisk kodeformatering og ESLint for kvalitetskontroll av kode -- **Bruker** flagget `--save-dev` for å markere dem som utviklingsavhengigheter +- **Initialiserer** et nytt Node.js-prosjekt med standardinnstillinger via `npm init -y` +- **Installerer** Vite som et moderne byggverktøy for rask utvikling og produksjonsbygg +- **Legger til** Prettier for automatisk kodingformattering og ESLint for kodekvalitetssjekker +- **Bruker** flagget `--save-dev` for å merke disse som kun utviklingsavhengigheter ```bash # Trinn 3: Opprett prosjektstruktur og filer @@ -630,26 +630,26 @@ echo 'My Site

Hello Wo npx vite ``` -**I det ovenfor har vi:** -- **Organisert** prosjektet ved å lage separate mapper for kildekode og ressurser -- **Generert** en enkel HTML-fil med korrekt dokumentstruktur +**Her har vi:** +- **Organisert** prosjektet ved å lage egne mapper for kildekode og ressurser +- **Generert** en grunnleggende HTML-fil med riktig dokumentstruktur - **Startet** Vite utviklingsserver for live reload og hot module replacement -#### Viktige kommandolinjeverktøy for webutvikling +#### Essensielle kommandolinjeverktøy for webutvikling | Verktøy | Formål | Hvorfor du trenger det | |---------|--------|-----------------------| -| **[Git](https://git-scm.com/)** | Versjonskontroll | Følg endringer, samarbeid med andre, sikkerhetskopier arbeidet ditt | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript-runtime & pakkebehandling | Kjør JavaScript utenfor nettlesere, installer moderne utviklingsverktøy | -| **[Vite](https://vitejs.dev/)** | Byggeverktøy & utviklingsserver | Lynrask utvikling med hot module replacement | -| **[ESLint](https://eslint.org/)** | Kodekvalitet | Finn og fiks problemer i JavaScript automatisk | -| **[Prettier](https://prettier.io/)** | Kodeformatering | Hold koden din konsekvent formatert og lesbar | +| **[Git](https://git-scm.com/)** | Versjonskontroll | Spore endringer, samarbeide med andre, sikkerhetskopiere arbeidet | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript-runtime & pakkebehandling | Kjøre JavaScript utenfor nettlesere, installere moderne utviklingsverktøy | +| **[Vite](https://vitejs.dev/)** | Byggverktøy & utviklingsserver | Lynrask utvikling med hot module replacement | +| **[ESLint](https://eslint.org/)** | Kvalitetskontroll på kode | Finn og fikse problemer automatisk i JavaScript-koden | +| **[Prettier](https://prettier.io/)** | Kodeformattering | Holde koden din konsekvent formatert og lett å lese | #### Plattformspesifikke alternativer **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderne, funksjonsrik terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftig skriptmiljø +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftig skriptemiljø - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradisjonell Windows kommandolinje **macOS:** @@ -657,78 +657,78 @@ npx vite - **[iTerm2](https://iterm2.com/)** - Forbedret terminal med avanserte funksjoner **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux-shell +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux-skall - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Avansert terminalemulator -> 💻 = Forhåndsinstallert i operativsystemet +> 💻 = Forhåndsinstallert på operativsystemet -> 🎯 **Læringsvei**: Start med grunnleggende kommandoer som `cd` (bytt katalog), `ls` eller `dir` (list filer), og `mkdir` (lag mappe). Øv på moderne arbeidsflytkommandoer som `npm install`, `git status` og `code .` (åpner gjeldende katalog i VS Code). Når du blir mer komfortabel, vil du naturlig plukke opp mer avanserte kommandoer og automatiseringsteknikker. +> 🎯 **Læringsvei**: Start med grunnleggende kommandoer som `cd` (endre mappe), `ls` eller `dir` (liste filer) og `mkdir` (lage mappe). Øv med moderne arbeidsflytkommandoer som `npm install`, `git status` og `code .` (åpner gjeldende mappe i VS Code). Når du blir tryggere, lærer du naturlig mer avanserte kommandoer og automatiseringsteknikker. ### Dokumentasjon: Din alltid tilgjengelige læringsmentor -Ok, la meg dele en liten hemmelighet som kommer til å få deg til å føle deg mye bedre med å være nybegynner: selv de mest erfarne utviklerne bruker en stor del av tiden sin på å lese dokumentasjon. Og det er ikke fordi de ikke vet hva de gjør – det er faktisk et tegn på visdom! +Ok, la meg dele en liten hemmelighet som vil få deg til å føle deg mye bedre som nybegynner: selv de mest erfarne utviklerne bruker store deler av tiden sin på å lese dokumentasjon. Og det er ikke fordi de ikke vet hva de gjør – det er faktisk et tegn på klokskap! -Tenk på dokumentasjon som å ha tilgang til verdens mest tålmodige, kunnskapsrike lærere som er tilgjengelige 24/7. Står du fast på et problem klokka 2 om natten? Dokumentasjonen er der med en varm virtuell klem og akkurat det svaret du trenger. Vil du lære om en kul ny funksjon alle snakker om? Dokumentasjonen har ryggen din med trinnvise eksempler. Prøver du å forstå hvorfor noe fungerer som det gjør? Du gjettet det – dokumentasjonen er klar til å forklare det på en måte som endelig får det til å klaffe! +Tenk på dokumentasjon som å ha tilgang til verdens mest tålmodige, kunnskapsrike lærere som er tilgjengelige 24/7. Står du fast på et problem klokken 2 om natten? Dokumentasjon er der med en varm virtuell klem og akkurat det svaret du trenger. Vil du lære om en kul ny funksjon alle snakker om? Dokumentasjonen hjelper deg med trinnvise eksempler. Prøver du å forstå hvorfor noe fungerer som det gjør? Gjett hva – dokumentasjonen forklarer det på en måte som endelig får det til å “klikke”! -Her er noe som helt endret mitt perspektiv: webutviklingsverdenen beveger seg utrolig raskt, og ingen (jeg mener absolutt ingen!) har alt i hodet. Jeg har sett seniorutviklere med over 15 års erfaring slå opp grunnleggende syntaks, og vet du hva? Det er ikke flaut – det er smart! Det handler ikke om å huske alt perfekt; det handler om å vite hvor du finner pålitelige svar raskt og hvordan bruke dem. +Her er noe som helt forandret perspektivet mitt: webutvikling beveger seg utrolig raskt, og ingen (jeg mener absolutt ingen!) husker alt i hodet. Jeg har sett seniorutviklere med 15+ år erfaring slå opp grunnleggende syntaks, og vet du hva? Det er ikke flaut – det er smart! Det handler ikke om perfekt hukommelse; det handler om å vite hvor man finner pålitelige svar raskt og hvordan man bruker dem. **Her skjer den virkelige magien:** -Profesjonelle utviklere bruker mye tid på å lese dokumentasjon – ikke fordi de ikke vet hva de gjør, men fordi webutviklingslandskapet utvikler seg så fort at det krever kontinuerlig læring for å holde seg oppdatert. God dokumentasjon hjelper deg å forstå ikke bare *hvordan* man bruker noe, men *hvorfor* og *når* man skal bruke det. +Profesjonelle utviklere bruker en betydelig del av tiden sin på å lese dokumentasjon – ikke fordi de ikke kan, men fordi webutviklingslandskapet endrer seg så raskt at kontinuerlig læring er nødvendig for å henge med. God dokumentasjon hjelper deg å forstå ikke bare *hvordan* du bruker noe, men også *hvorfor* og *når* det skal brukes. -#### Viktige dokumentasjonsressurser +#### Essensielle dokumentasjonsressurser **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Gullstandarden for webteknologidokumentasjon +- Gullstandarden for dokumentasjon om webteknologi - Omfattende guider for HTML, CSS og JavaScript -- Inkluderer nettleserkompatibilitetsinformasjon -- Har praktiske eksempler og interaktive demoer +- Inkluderer informasjon om nettleserkompatibilitet +- Har praktiske eksempler og interaktive demos -**[Web.dev](https://web.dev)** (av Google) +**[Web.dev](https://web.dev)** (fra Google) - Moderne beste praksis for webutvikling - Veiledninger for ytelsesoptimalisering -- Tilgjengelighets- og inkluderende designprinsipper +- Tilgjengelighet og prinsipper for inkluderende design - Casestudier fra virkelige prosjekter **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Utviklerressurser for Edge-nettleser +- Ressurser for Edge-nettleserutvikling - Veiledninger for Progressive Web Apps -- Innsikt om kryssplattformutvikling +- Innsikt i tverrplattformutvikling **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturerte læringsplaner +- Strukturerte læringsløp - Videokurs fra bransjeeksperter -- Praktiske kodingøvelser +- Hands-on kodeøvelser -> 📚 **Studietips**: Ikke prøv å memorer dokumentasjonen – lær heller hvordan du navigerer den effektivt. Bokmerk ofte brukte referanser og øv på å bruke søkefunksjonene for å finne spesifikk informasjon raskt. +> 📚 **Studieteknikk**: Ikke prøv å memorere dokumentasjonen – lær heller hvordan du effektivt navigerer i den. Bokmerk ofte brukte referanser og øv på å bruke søkefunksjoner for å finne spesifikk informasjon raskt. -### 🔧 **Verktøymestertest: Hva treffer deg mest?** +### 🔧 **Verktøymester-sjekk: Hva klinger med deg?** -**Ta et øyeblikk til å tenke på:** -- Hvilket verktøy gleder du deg mest til å prøve først? (Det finnes ikke incorrect svar!) +**Ta et øyeblikk og tenk over:** +- Hvilket verktøy gleder du deg mest til å prøve først? (Det finnes ikke noe feil svar!) - Føles kommandolinjen fortsatt skummel, eller er du nysgjerrig på den? -- Kan du se for deg å bruke nettleserens DevTools for å titte bak kulissene på dine favorittnettsider? +- Kan du forestille deg å bruke nettleserens DevTools for å kikke bak kulissene på favorittnettsidene dine? ```mermaid -pie title "Utviklertid Brukt med Verktøy" +pie title "Utviklertid brukt med verktøy" "Kodeeditor" : 40 "Nettlesertesting" : 25 "Kommandolinje" : 15 - "Leser Dokumentasjon" : 15 + "Leser dokumentasjon" : 15 "Feilsøking" : 5 ``` -> **Morsomt innblikk**: De fleste utviklere bruker omtrent 40 % av tiden sin i kodeeditoren, men legg merke til hvor mye tid som går til testing, læring og problemløsning. Programmering handler ikke bare om å skrive kode – det handler om å skape opplevelser! +> **Morsom innsikt**: De fleste utviklere bruker omtrent 40 % av tiden i kodeeditoren, men legg merke til hvor mye tid som går til testing, læring og problemløsning. Programmering handler ikke bare om å skrive kode – det handler om å skape opplevelser! -✅ **En tanke å tygge på**: Her er noe interessant å fundere over – hvordan tror du verktøyene for å bygge nettsider (utvikling) kan være annerledes enn verktøyene for å designe hvordan de ser ut (design)? Det er som forskjellen mellom en arkitekt som designer et vakkert hus og entreprenøren som faktisk bygger det. Begge er viktige, men de trenger forskjellige verktøykasser! Denne typen tenking vil virkelig hjelpe deg å se det større bildet av hvordan nettsider blir til. +✅ **Noe å tenke på**: Her er noe interessant å gruble på – hvordan tror du verktøyene for å bygge nettsider (utvikling) kan være annerledes enn verktøyene for å designe hvordan de ser ut (design)? Det er som forskjellen mellom en arkitekt som tegner et vakkert hus og entreprenøren som faktisk bygger det. Begge er viktige, men trenger forskjellige verktøykasser! Denne typen tenkning vil virkelig hjelpe deg å se hele bildet av hvordan nettsider blir til. -## GitHub Copilot Agent-utfordring 🚀 +## GitHub Copilot Agent Challenge 🚀 -Bruk Agent-modusen til å fullføre følgende utfordring: +Bruk Agent-modus til å fullføre følgende utfordring: **Beskrivelse:** Utforsk funksjonene til en moderne kodeeditor eller IDE og vis hvordan den kan forbedre arbeidsflyten din som webutvikler. -**Prompt:** Velg en kodeeditor eller IDE (for eksempel Visual Studio Code, WebStorm eller en skybasert IDE). List opp tre funksjoner eller utvidelser som hjelper deg å skrive, feilsøke eller vedlikeholde kode mer effektivt. For hver, gi en kort forklaring på hvordan det gagner arbeidsflyten din. +**Oppgave:** Velg en kodeeditor eller IDE (som Visual Studio Code, WebStorm, eller en skybasert IDE). List opp tre funksjoner eller utvidelser som hjelper deg med å skrive, feilsøke eller vedlikeholde kode mer effektivt. For hver, gi en kort forklaring på hvordan det gagner arbeidsflyten din. --- @@ -736,50 +736,50 @@ Bruk Agent-modusen til å fullføre følgende utfordring: **Ok, detektiv, klar for din første sak?** -Nå som du har dette fantastiske grunnlaget, har jeg et eventyr som skal hjelpe deg å se hvor utrolig mangfoldig og fascinerende programmeringsverdenen virkelig er. Og hør her – dette handler ikke om å skrive kode ennå, så ingen press! Tenk på deg selv som en programmeringsspråkdetektiv på din aller første spennende sak! +Nå som du har dette fantastiske grunnlaget, har jeg et eventyr som skal hjelpe deg å se hvor utrolig variert og fascinerende programmeringsverdenen virkelig er. Og hør her – dette handler ikke om å skrive kode ennå, så ingen press! Tenk på deg selv som en programmeringsspråkdetektiv med din aller første spennende sak! -**Din oppgave, hvis du velger å akseptere den:** -1. **Bli en språkutforsker**: Velg tre programmeringsspråk fra helt forskjellige verdener – kanskje ett som bygger nettsider, ett som lager mobilapper, og ett som bearbeider data for forskere. Finn eksempler på samme enkle oppgave skrevet i hvert språk. Jeg lover du kommer til å bli helt forbløffet over hvor forskjellige de kan se ut mens de gjør akkurat det samme! +**Ditt oppdrag, hvis du velger å akseptere det:** +1. **Bli en språkutforsker**: Velg tre programmeringsspråk fra helt forskjellige univers – kanskje ett som lager nettsider, ett som lager mobilapper og ett som bearbeider data for vitenskapsfolk. Finn eksempler på samme enkle oppgave skrevet i hvert språk. Jeg lover du blir helt forbløffet over hvor forskjellige de kan se ut, selv om de gjør akkurat det samme! -2. **Avdekk deres opprinnelseshistorier**: Hva gjør hvert språk spesielt? Her er en kul fakta – hvert eneste programmeringsspråk ble laget fordi noen tenkte, "Vet du hva? Det må finnes en bedre måte å løse akkurat dette spesifikke problemet på." Kan du finne ut hva disse problemene var? Noen av disse historiene er genuint fascinerende! +2. **Avdekk opprinnelseshistoriene**: Hva gjør hvert språk unikt? Her er en kul fakta – hvert eneste programmeringsspråk ble skapt fordi noen tenkte, "Vet du hva? Det må finnes en bedre måte å løse dette spesifikke problemet på." Kan du finne ut hvilke problemer de var? Noen av disse historiene er virkelig fascinerende! -3. **Møt fellesskapene**: Sjekk hvor imøtekommende og engasjert hvert språk sitt fellesskap er. Noen har millioner av utviklere som deler kunnskap og hjelper hverandre, andre er mindre, men utrolig sammensveiset og støttende. Du kommer til å elske å se de forskjellige personlighetene disse fellesskapene har! +3. **Møt fellesskapene**: Se hvor inkluderende og lidenskapelige hvert språks fellesskap er. Noen har millioner av utviklere som deler kunnskap og hjelper hverandre, andre er mindre men utrolig sammensveiset og støttende. Du kommer til å elske å se de forskjellige personlighetene i disse fellesskapene! -4. **Følg magefølelsen**: Hvilket språk føles mest tilgjengelig for deg akkurat nå? Ikke stress med å ta det "perfekte" valget – bare lytt til instinktene dine! Det finnes ærlig talt ikke noe feil svar her, og du kan alltid utforske andre senere. +4. **Følg magefølelsen**: Hvilket språk føles mest tilgjengelig for deg akkurat nå? Ikke stress over å velge det "perfekte" – bare stol på instinktene dine! Det finnes ærlig talt ingen feil svar her, og du kan alltid utforske flere senere. -**Bonus etterforskning**: Se om du kan oppdage hvilke store nettsider eller apper som er bygget med hvert språk. Jeg garanterer at du vil bli sjokkert over å lære hva som driver Instagram, Netflix eller det mobilspillet du ikke klarer å slutte å spille! +**Bonusdetektivarbeid**: Se om du kan finne ut hvilke store nettsteder eller apper som er laget med hvert språk. Jeg lover at du blir sjokkert over å lære hva som driver Instagram, Netflix eller det mobilspillet du ikke klarer å legge fra deg! -> 💡 **Husk**: Du prøver ikke å bli ekspert i noe av disse språkene i dag. Du blir bare kjent med nabolaget før du bestemmer deg for hvor du vil slå deg ned. Ta deg tid, ha det gøy med det, og la nysgjerrigheten lede deg! +> 💡 **Husk**: Du trenger ikke bli ekspert i noen av disse språkene i dag. Du blir bare kjent med "nabolaget" før du bestemmer deg for hvor du vil slå deg ned. Ta deg tid, ha det gøy, og la nysgjerrigheten lede deg! ## La oss feire det du har oppdaget! -Herregud, du har absorbert så mye utrolig informasjon i dag! Jeg gleder meg oppriktig til å se hvor mye av denne fantastiske reisen som har satt seg hos deg. Og husk – dette er ikke en test hvor du må få alt perfekt. Dette er mer som en feiring av alt det kule du har lært om denne fascinerende verdenen du snart skal dykke inn i! +Herregud, du har sugd til deg så mye utrolig informasjon i dag! Jeg er virkelig spent på å se hvor mye av denne fantastiske reisen som har festet seg hos deg. Og husk – dette er ikke en test hvor du må få alt perfekt. Dette er mer som en feiring av alt det kule du har lært om denne fascinerende verdenen du er i ferd med å dykke ned i! [Ta quizzen etter leksjonen](https://ff-quizzes.netlify.app/web/) -## Gjennomgang & Selvlæring -**Ta deg tid til å utforske og ha det gøy med det!** +## Gjennomgang & Selvstudium -Du har dekket mye i dag, og det er noe du kan være stolt av! Nå kommer den morsomme delen – å utforske emnene som vekket nysgjerrigheten din. Husk, dette er ikke lekser – det er et eventyr! +**Ta deg tid til å utforske og ha det gøy med det!** +Du har dekket mye i dag, og det er noe å være stolt av! Nå kommer den morsomme delen – å utforske de temaene som vekket din nysgjerrighet. Husk, dette er ikke lekser – det er et eventyr! -**Dyk dypere inn i det som begeistrer deg:** +**Dykk dypere inn i det som begeistrer deg:** -**Prøv deg på programmeringsspråk:** +**Bli praktisk med programmeringsspråk:** - Besøk de offisielle nettsidene til 2-3 språk som fanget oppmerksomheten din. Hvert språk har sin egen personlighet og historie! -- Prøv noen nettbaserte kodeleker som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Ikke vær redd for å eksperimentere – du kan ikke ødelegge noe! -- Les om hvordan ditt favorittspråk ble til. Seriøst, noen av disse opprinnelseshistoriene er fascinerende og vil hjelpe deg å forstå hvorfor språk fungerer slik de gjør. +- Prøv noen nettbaserte kodelekeplasser som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Ikke vær redd for å eksperimentere – du kan ikke ødelegge noe! +- Les om hvordan favorittspråket ditt ble til. Seriøst, noen av disse opprinnelseshistoriene er fascinerende og vil hjelpe deg å forstå hvorfor språk fungerer slik de gjør. **Bli komfortabel med dine nye verktøy:** -- Last ned Visual Studio Code hvis du ikke har gjort det allerede – det er gratis og du kommer til å elske det! +- Last ned Visual Studio Code hvis du ikke allerede har det – det er gratis, og du kommer til å elske det! - Bruk noen minutter på å bla gjennom Extensions-markedet. Det er som en app-butikk for kodeeditoren din! -- Åpne nettleserens Developer Tools og klikk litt rundt. Ikke bekymre deg for å forstå alt – bli bare kjent med hva som finnes. +- Åpne nettleserens Utviklerverktøy og klikk rundt. Ikke bekymre deg for å forstå alt – bli bare kjent med hva som finnes der. **Bli med i fellesskapet:** -- Følg noen utviklerfellesskap på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringsmiljøet er utrolig imøtekommende for nybegynnere! -- Se på noen nybegynnervennlige kodingsvideoer på YouTube. Det finnes så mange flinke skapere der ute som husker hvordan det er å begynne. +- Følg noen utviklerfellesskap på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringsfellesskapet er utrolig imøtekommende for nykommere! +- Se noen nybegynnervennlige kodevideoer på YouTube. Det finnes mange flinke skapere der ute som husker hvordan det er å være i starten. - Vurder å bli med på lokale meetups eller nettbaserte fellesskap. Tro meg, utviklere elsker å hjelpe nykommere! -> 🎯 **Hør her, dette vil jeg at du skal huske**: Du forventes ikke å bli en kodeekspert over natten! Akkurat nå blir du bare kjent med denne fantastiske nye verdenen du skal bli en del av. Ta deg tid, nyt reisen, og husk – hver eneste utvikler du beundrer satt en gang nøyaktig der du er nå, full av spenning og kanskje litt overveldet. Det er helt normalt, og betyr at du gjør det riktig! +> 🎯 **Hør her, dette vil jeg at du skal huske**: Du forventes ikke å bli en kodeekspert over natten! Akkurat nå blir du bare kjent med denne fantastiske nye verdenen du er i ferd med å bli en del av. Ta deg tid, nyt reisen, og husk – hver eneste utvikler du beundrer satt en gang akkurat der du er nå, følte seg spent og kanskje litt overveldet. Det er helt normalt, og det betyr at du gjør det riktig! @@ -787,70 +787,70 @@ Du har dekket mye i dag, og det er noe du kan være stolt av! Nå kommer den mor [Reading the Docs](assignment.md) -> 💡 **Et lite dytt for oppgaven din**: Jeg vil virkelig gjerne se at du utforsker noen verktøy vi ikke har dekket ennå! Hopp over editorene, nettleserne og kommandolinjeverktøyene vi allerede har snakket om – det finnes et helt utrolig univers av fantastiske utviklingsverktøy der ute som bare venter på å bli oppdaget. Se etter de som aktivt blir vedlikeholdt og har livlige, hjelpsomme fellesskap (disse har ofte de beste veiledningene og de mest støttende menneskene når du uunngåelig står fast og trenger en vennlig hånd). +> 💡 **Et lite dytt for oppgaven din**: Jeg vil virkelig gjerne se at du utforsker noen verktøy vi ikke har dekket ennå! Hopp over editorer, nettlesere og kommandolinjeverktøy vi allerede har snakket om – det finnes et helt utrolig univers av fantastiske utviklingsverktøy der ute som bare venter på å bli oppdaget. Se etter de som aktivt vedlikeholdes og har levende, hjelpsomme fellesskap (disse pleier å ha de beste veiledningene og de mest støttende menneskene når du uunngåelig står fast og trenger en vennlig hånd). --- -## 🚀 Din programmeringsreise Tidslinje +## 🚀 Din programmeringsreise tidslinje ### ⚡ **Hva du kan gjøre de neste 5 minuttene** -- [ ] Bokmerk 2-3 programmeringsspråks-nettsider som fanget din interesse -- [ ] Last ned Visual Studio Code hvis du ikke har gjort det allerede -- [ ] Åpne nettleserens DevTools (F12) og klikk rundt på en nettside -- [ ] Bli med i et programmeringsfellesskap (Dev.to, Reddit r/webdev, eller Stack Overflow) +- [ ] Bokmerke 2-3 programmeringsspråk-nettsider som fanget oppmerksomheten din +- [ ] Last ned Visual Studio Code hvis du ikke allerede har det +- [ ] Åpne nettleserens DevTools (F12) og klikk rundt på en hvilken som helst nettside +- [ ] Bli med i ett programmeringsfellesskap (Dev.to, Reddit r/webdev, eller Stack Overflow) -### ⏰ **Hva du kan oppnå denne timen** -- [ ] Fullfør quizen etter leksjonen og reflekter over svarene dine +### ⏰ **Hva du kan få til denne timen** +- [ ] Fullfør quizzen etter leksjonen og reflekter over svarene dine - [ ] Sett opp VS Code med GitHub Copilot-utvidelsen - [ ] Prøv et "Hello World"-eksempel i 2 forskjellige programmeringsspråk på nett -- [ ] Se en «En dag i livet til en utvikler»-video på YouTube -- [ ] Start din programmeringsspråks-detektivforskning (fra utfordringen) +- [ ] Se en "En dag i en utviklers liv"-video på YouTube +- [ ] Start detektivarbeidet ditt med programmeringsspråk (fra utfordringen) -### 📅 **Ditt ukeslange eventyr** +### 📅 **Ditt eventyr denne uken** - [ ] Fullfør oppgaven og utforsk 3 nye utviklingsverktøy -- [ ] Følg 5 utviklere eller programmeringskontoer i sosiale medier -- [ ] Prøv å bygge noe lite i CodePen eller Replit (selv bare "Hei, [Ditt Navn]!") -- [ ] Les et utviklerblogginnlegg om noens programmeringsreise -- [ ] Bli med på en virtuelt meetup eller se et programmeringsforedrag -- [ ] Begynn å lære ditt valgte språk med nettbaserte tutorials +- [ ] Følg 5 utviklere eller programmeringskontoer på sosiale medier +- [ ] Prøv å bygge noe lite i CodePen eller Replit (selv bare "Hello, [Ditt navn]!") +- [ ] Les et blogginnlegg fra en utvikler om noens kode-reise +- [ ] Bli med på et virtuelt meetup eller se et programmeringsforedrag +- [ ] Begynn å lære ditt valgte språk med nettbaserte veiledninger -### 🗓️ **Din månedslange transformasjon** +### 🗓️ **Din transformasjon denne måneden** - [ ] Bygg ditt første lille prosjekt (selv en enkel nettside teller!) -- [ ] Bidra til et åpen kildekode-prosjekt (start med dokumentasjonsfikser) -- [ ] Veiled noen som nettopp har begynt sin programmeringsreise -- [ ] Lag din utviklerportefølje-nettside +- [ ] Bidra til et open source-prosjekt (start med dokumentasjonsfikser) +- [ ] Mentor noen som nettopp har startet sin programmeringsreise +- [ ] Lag din egen utviklerporteføljenettside - [ ] Knytt kontakt med lokale utviklerfellesskap eller studiegrupper -- [ ] Begynn å planlegge ditt neste læringsmål +- [ ] Begynn å planlegge din neste læringsmilepæl -### 🎯 **Endelig refleksjon** +### 🎯 **Sluttrefleksjon** **Før du går videre, ta et øyeblikk til å feire:** - Hva er én ting ved programmering som begeistret deg i dag? - Hvilket verktøy eller konsept vil du utforske først? -- Hvordan føler du om å starte denne programmeringsreisen? +- Hvordan føler du deg ved å starte denne programmeringsreisen? - Hva er ett spørsmål du gjerne vil stille en utvikler akkurat nå? ```mermaid journey - title Din Reise for Å Bygge Selvtillit + title Din Selvtillitsbyggingsreise section I dag Nysgjerrig: 3: You Overveldet: 4: You Spent: 5: You - section Denne Uken + section Denne uken Utforsker: 4: You Lærer: 5: You - Knytter Kontakter: 4: You - section Neste Måned + Knytter kontakter: 4: You + section Neste måned Bygger: 5: You Selvsikker: 5: You - Hjelper Andre: 5: You + Hjelper andre: 5: You ``` -> 🌟 **Husk**: Hver ekspert var en gang en nybegynner. Hver seniorutvikler har følt akkurat det samme som du gjør nå – spent, kanskje litt overveldet, og definitivt nysgjerrig på hva som er mulig. Du er i fantastisk selskap, og denne reisen kommer til å bli utrolig. Velkommen til den fantastiske verdenen av programmering! 🎉 +> 🌟 **Husk**: Hver ekspert har vært nybegynner. Hver seniorutvikler har en gang følt akkurat det du føler nå – spent, kanskje litt overveldet, og definitivt nysgjerrig på hva som er mulig. Du er i fantastisk selskap, og denne reisen kommer til å bli utrolig. Velkommen til den herlige verden av programmering! 🎉 --- **Ansvarsfraskrivelse**: -Dette 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, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på morsmålet skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. +Dette dokumentet har blitt oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst merk at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. \ No newline at end of file diff --git a/translations/no/AGENTS.md b/translations/no/AGENTS.md index d66690106..5c8bee463 100644 --- a/translations/no/AGENTS.md +++ b/translations/no/AGENTS.md @@ -2,14 +2,14 @@ ## Prosjektoversikt -Dette er et utdanningsrepository for å lære bort 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. +Dette er et utdanningspensum-repositorium for å lære webutviklingsgrunnlag til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML. -### Nøkkelkomponenter +### Hovedkomponenter - **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler -- **Praktiske prosjekter**: Terrarium, Typing Game, Nettleserutvidelse, Space Game, Banking App, Code Editor og AI Chat Assistant -- **Interaktive quizzer**: 48 quizzer med 3 spørsmål hver (før og etter leksjon) -- **Flerspråklig støtte**: Automatiserte oversettelser for 50+ språk via GitHub Actions +- **Praktiske prosjekter**: Terrarium, Typing Game, Nettleserutvidelse, Space Game, Bankapp, Kodeeditor og AI Chat-assistent +- **Interaktive quizzer**: 48 quizzer med 3 spørsmål hver (før- og etterleksjon vurderinger) +- **Flerspråklig støtte**: Automatiske oversettelser til 50+ språk via GitHub Actions - **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI-prosjekter) ### Arkitektur @@ -17,14 +17,14 @@ Dette er et utdanningsrepository for å lære bort grunnleggende webutvikling ti - Utdanningsrepository med leksjonsbasert struktur - Hver leksjonsmappe inneholder README, kodeeksempler og løsninger - Frittstående prosjekter i egne kataloger (quiz-app, ulike leksjonsprosjekter) -- Oversettelsessystem ved bruk av GitHub Actions (co-op-translator) -- Dokumentasjon levert via Docsify og tilgjengelig som PDF +- Oversettelsessystem med GitHub Actions (co-op-translator) +- Dokumentasjon servert via Docsify og tilgjengelig som PDF ## Oppsettskommandoer -Dette repositoryet er primært for konsumering av utdanningsinnhold. For arbeid med spesifikke prosjekter: +Dette repositoriet er primært for konsumering av utdanningsinnhold. For arbeid med spesifikke prosjekter: -### Hovedrepository Oppsett +### Hovedrepository-oppsett ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git @@ -56,7 +56,7 @@ npm run format # Formater med Prettier ```bash cd 5-browser-extension/solution npm install -# Følg nettleserspesifikke instruksjoner for lasting av utvidelser +# Følg nettleserspesifikke instruksjoner for utvidelsesinnlasting ``` ### Space Game Prosjekter @@ -67,7 +67,7 @@ npm install # Åpne index.html i nettleser eller bruk Live Server ``` -### Chat Prosjekt (Python Backend) +### Chat-prosjekt (Python backend) ```bash cd 9-chat-project/solution/backend/python @@ -78,57 +78,57 @@ python api.py ## Utviklingsarbeidsflyt -### For innholdsleverandører +### For innholdsbidragsytere -1. **Fork repositoryet** til din GitHub-konto +1. **Fork repositoriet** til din GitHub-konto 2. **Klon din fork** lokalt -3. **Opprett en ny branch** for endringene dine +3. **Opprett en ny gren** for endringene dine 4. Gjør endringer i leksjonsinnhold eller kodeeksempler -5. Test eventuelle kodeendringer i relevante prosjektkataloger -6. Send pull requests i henhold til retningslinjene for bidrag +5. Test eventuelle kodeendringer i relevante prosjektmapper +6. Send inn pull requests i henhold til retningslinjer for bidrag ### For lærende -1. Fork eller klon repositoryet -2. Naviger til leksjonskatalogene i rekkefølge -3. Les README-filene for hver leksjon -4. Fullfør før-leksjon quizzer på https://ff-quizzes.netlify.app/web/ -5. Jobb gjennom kodeeksempler i leksjonsmappene +1. Fork eller klon repositoriet +2. Naviger gjennom leksjonsmapper sekvensielt +3. Les README-filer for hver leksjon +4. Fullfør før-leksjons-quizzer på https://ff-quizzes.netlify.app/web/ +5. Arbeid gjennom kodeeksempler i leksjonsmapper 6. Fullfør oppgaver og utfordringer -7. Ta etter-leksjon quizzer +7. Ta etter-leksjons-quizzer ### Live utvikling -- **Dokumentasjon**: Kjør `docsify serve` i roten (port 3000) +- **Dokumentasjon**: Kjør `docsify serve` i root (port 3000) - **Quiz App**: Kjør `npm run dev` i quiz-app katalogen - **Prosjekter**: Bruk VS Code Live Server extension for HTML-prosjekter - **API-prosjekter**: Kjør `npm start` i respektive API-kataloger ## Testinstruksjoner -### Testing av Quiz App +### Quiz App testing ```bash cd quiz-app -npm run lint # Sjekk for kode stil problemer -npm run build # Bekreft at byggingen lykkes +npm run lint # Sjekk for problemer med kodeformat +npm run build # Verifiser at byggingen lykkes ``` -### Testing av Bank API +### Bank API testing ```bash cd 7-bank-project/api -npm run lint # Sjekk for kode stil problemer -node server.js # Bekreft at server starter uten feil +npm run lint # Sjekk for kodesstilproblemer +node server.js # Bekreft at serveren starter uten feil ``` ### Generell testtilnærming -- Dette er et utdanningsrepository uten omfattende automatiserte tester +- Dette er et utdanningsrepository uten omfattende automatiske tester - Manuell testing fokuserer på: - Kodeeksempler kjører uten feil - - Lenker i dokumentasjonen fungerer riktig - - Prosjektbyggeoperasjoner fullføres uten feil + - Lenker i dokumentasjonen fungerer som de skal + - Prosjektbygg fullføres suksessfullt - Eksempler følger beste praksis ### Sjekk før innsending @@ -136,126 +136,126 @@ node server.js # Bekreft at server starter uten feil - Kjør `npm run lint` i kataloger med package.json - Verifiser at markdown-lenker er gyldige - Test kodeeksempler i nettleser eller Node.js -- Sjekk at oversettelser opprettholder korrekt struktur +- Sjekk at oversettelser opprettholder riktig struktur -## Kode stil retningslinjer +## Retningslinjer for kodestil ### JavaScript -- Bruk moderne ES6+ syntax -- Følg standard ESLint-konfigurasjoner gitt i prosjektene -- Bruk meningsfulle variabel- og funksjonsnavn for utdanningsklarhet +- Bruk moderne ES6+ syntaks +- Følg standard ESLint-konfigurasjoner levert i prosjektene +- Bruk meningsfulle variable- og funksjonsnavn for pedagogisk klarhet - Legg til kommentarer som forklarer konsepter for lærende -- Formater med Prettier der dette er konfigurert +- Formater med Prettier der det er konfigurert ### HTML/CSS - Semantiske HTML5-elementer -- Responsive designprinsipper -- Klare klasse-navnekonvensjoner +- Responsivt designprinsipper +- Klare klassenavnkonvensjoner - Kommentarer som forklarer CSS-teknikker for lærende ### Python -- PEP 8 stilretningslinjer -- Tydelige, pedagogiske kodeeksempler -- Type hints hvor hjelpsomt for læring +- PEP 8 stil retningslinjer +- Klare, pedagogiske kodeeksempler +- Typehinting der det er nyttig for læring -### Markdown-dokumentasjon +### Markdown Dokumentasjon -- Klar overskriftsstruktur -- Kodeblokker med språkspesifikasjon -- Lenker til tilleggsmateriale -- Skjermbilder og bilder i `images/` kataloger +- Klar overskriftshierarki +- Kodeblokker med spesifisering av språk +- Lenker til ytterligere ressurser +- Skjermbilder og bilder i `images/` mapper - Alt-tekst for bilder for tilgjengelighet ### Filorganisering - Leksjoner nummerert sekvensielt (1-getting-started-lessons, 2-js-basics, osv.) -- Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/` kataloger -- Bilder lagres i leksjon-spesifikke `images/` mapper -- Oversettelser lagres i `translations/{language-code}/` struktur +- Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/` mapper +- Bilder lagres i leksjonsspesifikke `images/` mapper +- Oversettelser i `translations/{language-code}/` struktur ## Bygging og distribusjon -### Distribusjon av Quiz App (Azure Static Web Apps) +### Quiz App distribusjon (Azure Static Web Apps) -quiz-app er konfigurert for distribusjon til Azure Static Web Apps: +Quiz-appen er konfigurert for distribusjon på Azure Static Web Apps: ```bash cd quiz-app -npm run build # Oppretter dist/-mappen +npm run build # Oppretter dist/-mappe # Distribuerer via GitHub Actions-arbeidsflyt ved push til main ``` Azure Static Web Apps konfigurasjon: -- **App-plassering**: `/quiz-app` -- **Output-plassering**: `dist` +- **App-lokasjon**: `/quiz-app` +- **Output-lokasjon**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Generering av PDF-dokumentasjon +### Dokumentasjon PDF-generering ```bash npm install # Installer docsify-to-pdf npm run convert # Generer PDF fra docs ``` -### Docsify-dokumentasjon +### Docsify dokumentasjon ```bash npm install -g docsify-cli # Installer Docsify globalt -docsify serve # Tjen på localhost:3000 +docsify serve # Server på localhost:3000 ``` ### Prosjektspesifikke bygg Hver prosjektkatalog kan ha egen byggeprosess: - Vue-prosjekter: `npm run build` lager produksjonspakker -- Statisk prosjekter: Ingen byggeprosess, server filer direkte +- Statiske prosjekter: Ingen byggeprosess, server filer direkte -## Retningslinjer for pull requests +## Retningslinjer for pull-forespørsler ### Tittelformat -Bruk klare, beskrivende titler som angir område for endring: +Bruk klare, beskrivende titler som angir endringsområdet: - `[Quiz-app] Legg til ny quiz for leksjon X` -- `[Lesson-3] Rett skrivefeil i terrarium-prosjekt` +- `[Lesson-3] Fiks skrivefeil i terrarium-prosjekt` - `[Translation] Legg til spansk oversettelse for leksjon 5` - `[Docs] Oppdater oppsettinstruksjoner` -### Nødvendige sjekker +### Krav til sjekker -Før du sender en PR: +Før innsending av PR: 1. **Kodekvalitet**: - - Kjør `npm run lint` i berørte prosjektkataloger + - Kjør `npm run lint` i berørte prosjektmapper - Rett opp alle lint-feil og advarsler 2. **Byggeverifisering**: - - Kjør `npm run build` om relevant - - Sørg for at det ikke er byggefeil + - Kjør `npm run build` hvis aktuelt + - Sørg for ingen byggefeil -3. **Lenkekontroll**: +3. **Lenkevalidering**: - Test alle markdown-lenker - - Verifiser at bildehenvisninger fungerer + - Verifiser at bildefreferanser fungerer -4. **Innholdsgjennomgang**: - - Korrekturles for stavefeil og grammatikk - - Sørg for at kodeeksempler er riktige og pedagogiske - - Dobbeltsjekk at oversettelser beholder opprinnelig betydning +4. **Innholdsgranskning**: + - Korrekturles for stave- og grammatikkfeil + - Sørg for at kodeeksempler er korrekte og pedagogiske + - Verifiser at oversettelser opprettholder original betydning ### Bidragskrav -- Aksepter Microsoft CLA (automatisk sjekk på første PR) +- Aksepter Microsoft CLA (automatisk sjekk ved første PR) - Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerte retningslinjer -- Referer til issue-numre i PR-beskrivelse om relevant +- Referer til issues i PR-beskrivelse ved behov ### Gjennomgangsprosess -- PRer gjennomgås av vedlikeholdere og fellesskap -- Utdanningsklarhet prioriteres -- Kodeeksempler skal følge gjeldende beste praksis +- PRs granskes av vedlikeholdere og community +- Pedagogisk klarhet prioriteres +- Kodeeksempler bør følge gjeldende beste praksis - Oversettelser vurderes for nøyaktighet og kulturell tilpasning ## Oversettelsessystem @@ -265,18 +265,18 @@ Før du sender en PR: - Bruker GitHub Actions med co-op-translator workflow - Oversetter automatisk til 50+ språk - Kildefiler i hovedkataloger -- Oversatte filer i `translations/{language-code}/` kataloger +- Oversatte filer i `translations/{language-code}/` mapper ### Legge til manuelle oversettelsesforbedringer 1. Finn fil i `translations/{language-code}/` 2. Gjør forbedringer samtidig som struktur bevares -3. Sørg for at kodeeksempler forblir funksjonelle -4. Test eventuelt lokaliserte quizinnhold +3. Sørg for at kodeeksempler fortsatt fungerer +4. Test eventuelt lokalisert quiz-innhold ### Oversettelsesmetadata -Oversatte filer inkluderer metadata header: +Oversatte filer inkluderer metadata-overskrift: ```markdown **Ansvarsfraskrivelse**: -Dette 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 automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. +Dette 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 automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på dets originale språk bør betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. \ No newline at end of file diff --git a/translations/no/README.md b/translations/no/README.md index 99014091b..b4b8ba6b6 100644 --- a/translations/no/README.md +++ b/translations/no/README.md @@ -10,71 +10,81 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Webutvikling for nybegynnere - en læreplan +# Webutvikling for nybegynnere - Et læreplan -Lær det grunnleggende om webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizzer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsbevaringen med vår effektive prosjektbaserte pedagogikk. Start din kodingreise i dag! +Lær grunnleggende webutvikling med vårt 12-ukers omfattende kurs av Microsoft Cloud Advocates. Hver av de 24 leksjonene dykker ned i JavaScript, CSS og HTML gjennom praktiske prosjekter som terrarier, nettleserutvidelser og romspill. Delta i quizer, diskusjoner og praktiske oppgaver. Forbedre ferdighetene dine og optimaliser kunnskapsretensjonen med vår effektive prosjektbaserte pedagogikk. Start din kode-reise i dag! Bli med i Azure AI Foundry Discord-fellesskapet [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) Følg disse trinnene for å komme i gang med disse ressursene: -1. **Lag en gaffel av repositoriet**: Klikk [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Klon repositoriet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Bli med i Azure AI Foundry Discord og møt eksperter og andre utviklere**](https://discord.com/invite/ByRwuEEgH4) +1. **Fork repoet**: Klikk [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Klon repoet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Bli med i Azure AI Foundry Discord og møt eksperter og medutviklere**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Flerspråklig støtte -#### Støttet via GitHub Action (Automatisk og alltid oppdatert) +#### Støttes via GitHub Action (Automatisk og alltid oppdatert) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](./README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) > **Foretrekker du å klone lokalt?** - -> Dette repositoriet inkluderer 50+ språkoversettelser som øker nedlastningsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout: +> +> Dette repoet inkluderer 50+ språkoversettelser som øker nedlastingsstørrelsen betydelig. For å klone uten oversettelser, bruk sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Dette gir deg alt du trenger for å fullføre kurset med en mye raskere nedlasting. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Dette gir deg alt du trenger for å fullføre kurset med mye raskere nedlasting. -**Hvis du ønsker at flere oversettelsesspråk skal støttes, er de oppført [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Hvis du ønsker at flere oversettelsesspråk skal støttes, er disse oppført [her](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Er du student?_ -Besøk [**Student Hub-side**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finner nybegynnerressurser, studentpakker og til og med måter å få et gratis sertifikatkupong på. Dette er siden du vil bokmerke og sjekke fra tid til annen ettersom vi bytter ut innhold månedlig. +Besøk [**Student Hub-siden**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) hvor du finner nybegynnerressurser, studentpakker og til og med måter å få en gratis sertifikatkupong på. Dette er siden du bør bokmerke og sjekke fra tid til annen da vi bytter ut innhold månedlig. -### 📣 Kunngjøring - Nye GitHub Copilot Agent modus utfordringer å fullføre! +### 📣 Annonsering - Nye utfordringer i GitHub Copilot Agent-modus å fullføre! -Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitler. Det er en ny utfordring for deg å fullføre ved hjelp av GitHub Copilot og Agent-modus. Om du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også lage og redigere filer, kjøre kommandoer og mer. +Ny utfordring lagt til, se etter "GitHub Copilot Agent Challenge 🚀" i de fleste kapitlene. Det er en ny utfordring du kan fullføre ved å bruke GitHub Copilot og Agent-modus. Hvis du ikke har brukt Agent-modus før, kan den ikke bare generere tekst, men også opprette og redigere filer, kjøre kommandoer og mer. -### 📣 Kunngjøring - _Nytt prosjekt å bygge med Generativ AI_ +### 📣 Annonsering - _Nytt prosjekt å bygge med Generativ AI_ -Nytt AI Assistant-prosjekt nettopp lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md) +Nytt AI-assistentprosjekt nettopp lagt til, sjekk det ut [prosjekt](./9-chat-project/README.md) -### 📣 Kunngjøring - _Ny læreplan_ om Generativ AI for JavaScript er nettopp lansert +### 📣 Annonsering - _Ny læreplan_ om Generativ AI for JavaScript ble nettopp utgitt -Ikke gå glipp av vår nye Generativ AI læreplan! +Ikke gå glipp av vår nye læreplan for Generativ AI! Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang! ![Background](../../translated_images/no/background.148a8d43afde5730.webp) - Leksjoner som dekker alt fra grunnleggende til RAG. -- Kommuniser med historiske karakterer med GenAI og vår følgesvenn-app. -- Morsom og engasjerende fortelling, du vil reise i tid! +- Samhandle med historiske personer ved hjelp av GenAI og vår følgesvenn-app. +- Moro og engasjerende fortelling, du vil reise i tid! ![character](../../translated_images/no/character.5c0dd8e067ffd693.webp) -Hver leksjon inkluderer en oppgave å fullføre, en kunnskapstest og en utfordring for å veilede deg gjennom læringsemner som: -- Prompting og prompt-engineering -- Tekst- og bildeapp-generering +Hver leksjon inkluderer en oppgave å fullføre, en kunnskapskontroll og en utfordring for å veilede deg i læring av temaer som: +- Prompting og prompt engineering +- Tekst- og bildeappgenerering - Søkeapper Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang! @@ -83,131 +93,130 @@ Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å k ## 🌱 Komme i gang -> **Lærere**, vi har [inkludert noen forslag](for-teachers.md) til hvordan bruke denne læreplanen. Vi setter stor pris på din tilbakemelding [i vår diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Lærere**, vi har [inkludert noen forslag](for-teachers.md) til hvordan du kan bruke denne læreplanen. Vi vil gjerne ha tilbakemeldinger [i vårt diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Lærende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en pre-forelesningsquiz og følg deretter med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekk forståelsen din med post-forelesningsquizen. +**[Elever](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for hver leksjon, start med en for-forelesningsquiz og følg opp med å lese forelesningsmaterialet, fullføre de ulike aktivitetene og sjekke forståelsen med etter-forelesningsquiz. -For å forbedre læringsopplevelsen din, koble deg sammen med dine jevnaldrende for å jobbe med prosjektene sammen! Diskusjoner oppfordres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelig for å svare på dine spørsmål. +For å forbedre læringsopplevelsen, koble deg sammen med dine medstudenter for å jobbe på prosjektene sammen! Diskusjoner oppfordres i vårt [diskusjonsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) hvor vårt team av moderatorer vil være tilgjengelig for å svare på spørsmålene dine. -For å videreutvikle utdannelsen din, anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for tilleggsmateriell. +For å utvide utdannelsen anbefaler vi sterkt å utforske [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for ekstra studiemateriell. ### 📋 Sette opp miljøet ditt -Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten behov for installasjoner_), eller lokalt på din datamaskin ved bruk av en tekstredigerer som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Denne læreplanen har et utviklingsmiljø klart til bruk! Når du kommer i gang kan du velge å kjøre læreplanen i en [Codespace](https://github.com/features/codespaces/) (_et nettleserbasert miljø uten behov for installasjoner_), eller lokalt på datamaskinen din ved å bruke en teksteditor som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Opprett ditt eget repository -For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repositoriet. Du kan gjøre dette ved å klikke på **Use this template** knappen øverst på siden. Dette vil opprette et nytt repository i din GitHub-konto med en kopi av læreplanen. +For at du enkelt skal kunne lagre arbeidet ditt, anbefales det at du oppretter din egen kopi av dette repoet. Du kan gjøre dette ved å klikke på **Use this template**-knappen øverst på siden. Dette vil lage et nytt repository i din GitHub-konto med en kopi av læreplanen. Følg disse trinnene: -1. **Lag en gaffel av repositoriet**: Klikk på "Fork"-knappen øverst til høyre på denne siden. -2. **Klon repositoriet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Fork repoet**: Klikk på "Fork"-knappen øverst til høyre på denne siden. +2. **Klon repoet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Kjøre læreplanen i en Codespace -I din kopi av dette repositoriet du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i. +I din kopi av repoet som du opprettet, klikk på **Code**-knappen og velg **Open with Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i. ![Codespace](../../translated_images/no/createcodespace.0238bbf4d7a8d955.webp) #### Kjøre læreplanen lokalt på din datamaskin -For å kjøre denne læreplanen lokalt på datamaskinen din trenger du en tekstredigerer, en nettleser og et kommandolinjeverktøy. Vår første leksjon, [Introduksjon til programmeringsspråk og verktøy](../../1-getting-started-lessons/1-intro-to-programming-languages), vil guide deg gjennom ulike alternativer for hver av disse verktøyene slik at du kan velge det som passer best for deg. - -Vår anbefaling er å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som redigerer, som også har en innebygd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan laste ned Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). - +For å kjøre denne læreplanen lokalt på din datamaskin trenger du en teksteditor, en nettleser og et kommandolinjeverktøy. Vår første leksjon, [Introduksjon til programmeringsspråk og verktøy](../../1-getting-started-lessons/1-intro-to-programming-languages), vil lede deg gjennom ulike valg for hvert av disse verktøyene slik at du kan velge det som passer best for deg. +Vi anbefaler å bruke [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din editor, som også har en innebygd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan laste ned Visual Studio Code [her](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Klon ditt repository til din datamaskin. Du kan gjøre dette ved å klikke på **Code**-knappen og kopiere URL-en: [CodeSpace](./images/createcodespace.png) -Deretter åpner du [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) og kjører følgende kommando, og erstatter `` med URL-en du nettopp kopierte: + + Åpne deretter [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) og kjør følgende kommando, erstatt `` med URL-en du nettopp kopierte: ```bash git clone ``` -2. Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke **Fil** > **Åpne mappe** og velge mappen du nettopp klonet. +2. Åpne mappen i Visual Studio Code. Du kan gjøre dette ved å klikke **File** > **Open Folder** og velge mappen du nettopp klonet. > Anbefalte Visual Studio Code-utvidelser: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for å forhåndsvise HTML-sider i Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for å hjelpe deg å skrive kode raskere +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - for å hjelpe deg skrive kode raskere -## 📂 Hver leksjon inneholder: +## 📂 Hver leksjon inkluderer: -- valgfri skisse -- valgfri supplerende video +- valgfri skisse-notat +- valgfri tilleggsvideo - oppvarmingsquiz før leksjonen - skriftlig leksjon -- for prosjektbaserte leksjoner, trinnvise guider for hvordan du bygger prosjektet +- for prosjektrelaterte leksjoner, steg-for-steg guider for hvordan bygge prosjektet - kunnskapstester - en utfordring -- supplerende lesing +- tilleggslesning - oppgave - [quiz etter leksjonen](https://ff-quizzes.netlify.app/web/) -> **En merknad om quizer**: Alle quizer er samlet i Quiz-app mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige [her](https://ff-quizzes.netlify.app/web/). quiz-appen kan kjøres lokalt eller deployeres til Azure; følg instruksjonene i `quiz-app`-mappen. +> **En merknad om quizer**: Alle quizer ligger i Quiz-app-mappen, totalt 48 quizer med tre spørsmål hver. De er tilgjengelige [her](https://ff-quizzes.netlify.app/web/) quiz-appen kan kjøres lokalt eller distribueres til Azure; følg instruksjonene i `quiz-app`-mappen. ## 🗃️ Leksjoner -| | Prosjektnavn | Konsepter som læres | Læringsmål | Tilknyttet leksjon | Forfatter | -| :-: | :------------------------------------------------------: | :------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | -| 01 | Komme i gang | Introduksjon til programmering og verktøy for faget | Lær det grunnleggende bak de fleste programmeringsspråk og om programvare som hjelper profesjonelle utviklere å gjøre jobben sin | [Introduksjon til programmeringsspråk og verktøy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Komme i gang | Grunnleggende om GitHub, inkludert samarbeid i team | Hvordan bruke GitHub i prosjektet ditt, hvordan samarbeide med andre på en kodebase | [Introduksjon til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om nettside-tilgjengelighet | [Tilgjengelighet Grunnleggende](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Grunnleggende | JavaScript-datatyper | Grunnleggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å håndtere et applikasjons logikkflyt | [Funksjoner og Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher | -| 06 | JS Grunnleggende | Å ta beslutninger med JS | Lær hvordan du lager betingelser i koden din ved å bruke beslutningsmetoder | [Ta beslutninger](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Grunnleggende | Arrays og løkker | Arbeide med data ved bruk av arrays og løkker i JavaScript | [Arrays og løkker](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Bygg HTML for å lage et virtuelt terrarium, med fokus på å bygge en layout | [Introduksjon til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Bygg CSS for å style det virtuelle terrariet, med fokus på grunnleggende CSS inkludert making siden responsiv | [Introduksjon til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, DOM-manipulering | Bygg JavaScript for å gjøre terrariet funksjonelt som et dra/slipp-grensesnitt, med fokus på closures og DOM-manipulering | [JavaScript closures, DOM-manipulering](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Lag et Skrivespill | Lær hvordan du bruker tastaturhendelser for å drive logikken i JavaScript-appen din | [Hendelsesdrevet Programmering](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie, og hvordan du bygger opp de første elementene i en nettleserutvidelse | [Om nettlesere](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lage et skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementene til nettleserutvidelsen din for å kalle et API ved bruk av variabler lagret i lokal lagring | [APIer, skjemautfylling og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrunnsprosesser i nettleseren, web-ytelse | Bruk nettleserens bakgrunnsprosesser for å administrere utvidelsens ikon; lær om web-ytelse og noen optimaliseringer for å gjøre | [Bakgrunnsoppgaver og ytelse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avansert spillutvikling med JavaScript | Lær om arv ved å bruke både klasser og komposisjon og Pub/Sub-mønsteret, som en forberedelse til å lage et spill | [Introduksjon til avansert spillutvikling](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning til lerret | Lær om Canvas API, som brukes til å tegne elementer på skjermen | [Tegning til lerret](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skjermen | Oppdag hvordan elementer kan få bevegelse ved hjelp av kartesiske koordinater og Canvas API | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisjonsdeteksjon | La elementer kollidere og reagere på hverandre ved hjelp av tastetrykk og implementer en cooldown-funksjon for å sikre spillytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Hold styr på poeng | Utfør matematiske beregninger basert på spillets status og ytelse | [Poengtelling](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Avslutte og starte spillet på nytt | Lær om å avslutte og restarte spillet, inkludert å rydde opp ressurser og tilbakestille variabelverdier | [Avslutningsbetingelsen](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-maler og ruter i et webapp | Lær hvordan du lager grunnstrukturen til en flersidig nettsides arkitektur ved bruk av routing og HTML-maler | [HTML-maler og ruter](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Lag en innloggings- og registreringsskjema | Lær om å lage skjemaer og håndtere valideringsrutiner | [Skjemaer](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder for å hente og bruke data | Hvordan data flyter inn og ut av appen din, hvordan hente det, lagre det, og kvitte seg med det | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Begreper om tilstandsadministrasjon | Lær hvordan appen din beholder tilstand og hvordan du kan styre den programmessig | [Tilstandsadministrasjon](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeider med VScode | Lær hvordan du bruker en kode-editor| [Bruk VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeider med AI | Lær hvordan du bygger din egen AI-assistent | [AI Assistent prosjekt](./9-chat-project/README.md) | Chris | +| | Prosjektnavn | Konsepter som læres | Læringsmål | Lenket leksjon | Forfatter | +| :-: | :------------------------------------------------------: | :-----------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | +| 01 | Komme i gang | Introduksjon til programmering og verktøy i faget | Lær grunnlaget bak de fleste programmeringsspråk og programvare som hjelper profesjonelle utviklere | [Introduksjon til programmeringsspråk og verktøy i faget](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Komme i gang | Grunnleggende GitHub, inkludert arbeid i teamet | Hvordan bruke GitHub i ditt prosjekt, og hvordan samarbeide med andre på en kodebase | [Introduksjon til GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Komme i gang | Tilgjengelighet | Lær det grunnleggende om nettilgjengelighet | [Grunnleggende tilgjengelighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Grunnleggende | JavaScript datatype | Grunnleggende om JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Grunnleggende | Funksjoner og metoder | Lær om funksjoner og metoder for å styre en applikasjons logikk | [Funksjoner og metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine og Christopher | +| 06 | JS Grunnleggende | Å ta beslutninger med JS | Lær hvordan lage betingelser i koden din ved hjelp av beslutningsmetoder | [Beslutningstaking](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Grunnleggende | Lister og løkker | Arbeid med data ved bruk av lister og løkker i JavaScript | [Lister og løkker](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praksis | Bygg HTML for å lage et online terrarium, med fokus på layout | [Introduksjon til HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praksis | Bygg CSS for å style det online terrariet, med fokus på grunnleggende CSS inkludert responsiv side | [Introduksjon til CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulasjon | Bygg JavaScript for å gjøre terrariet til en drag/drop-grensesnitt, med fokus på closures og DOM-manipulasjon | [JavaScript Closures, DOM-manipulasjon](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg et skrive-spill | Lær hvordan du bruker tastaturevents for å styre logikken i ditt JavaScript-app | [Event-drevet programmering](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeide med nettlesere | Lær hvordan nettlesere fungerer, deres historie og hvordan skissere de første elementene i en nettleserutvidelse | [Om nettlesere](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygging av skjema, kalle et API og lagre variabler i lokal lagring | Bygg JavaScript-elementer i nettleserutvidelsen din som kaller et API ved bruk av variabler lagret i lokal lagring | [API-er, skjemaer og lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrunnsprosesser i nettleseren, web-ytelse | Bruk nettleserens bakgrunnsprosesser til å styre utvidelsens ikon; lær om web-ytelse og noen optimaliseringer | [Bakgrunnsoppgaver og ytelse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avansert spillutvikling med JavaScript | Lær om arv ved bruk av både klasser og komposisjon og Pub/Sub-mønsteret, som forberedelse til å bygge et spill | [Introduksjon til avansert spillutvikling](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Tegning til canvas | Lær om Canvas API, brukt for å tegne elementer på en skjerm | [Tegning til Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Flytte elementer rundt på skjermen | Oppdag hvordan elementer kan få bevegelse ved hjelp av kartesiske koordinater og Canvas API | [Flytte elementer rundt](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisjonsdeteksjon | Få elementer til å kollidere og reagere på hverandre ved hjelp av tastetrykk og tilby en cooldown-funksjon for å sikre ytelse | [Kollisjonsdeteksjon](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Holde styr på poeng | Utfør matematiske beregninger basert på spillets status og ytelse | [Holde styr på poeng](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Avslutte og starte spillet på nytt | Lær om å avslutte og starte spillet på nytt, inkludert opprydding av ressurser og tilbakestilling av variabler | [Sluttbetingelsen](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-maler og ruter i en webapp | Lær hvordan lage strukturen for en nettsides arkitektur med routing og HTML-maler | [HTML-maler og ruter](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygge påloggings- og registreringsskjema | Lær om bygging av skjemaer og håndtering av valideringsrutiner | [Skjemaer](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder for henting og bruk av data | Hvordan data flyter inn og ut av appen din, hvordan hente, lagre og kvitte seg med den | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsepter innen tilstandshåndtering | Lær hvordan appen din beholder tilstand og hvordan styre den programmatisk | [Tilstandshåndtering](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeide med VScode | Lær hvordan du bruker en kodeeditor| [Bruk VScode kodeeditor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeide med AI | Lær hvordan bygge din egen AI-assistent | [AI Assistant-prosjekt](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogikk -Vårt pensum er designet med to viktige pedagogiske prinsipper i tankene: +Vårt pensum er utformet med to viktige pedagogiske prinsipper i tankene: * prosjektbasert læring * hyppige quizer -Programmet lærer grunnleggende JavaScript, HTML og CSS, samt de nyeste verktøyene og teknikkene som dagens webutviklere bruker. Studentene vil få muligheten til å utvikle praktisk erfaring ved å bygge et skrivespill, virtuelt terrarium, miljøvennlig nettleserutvidelse, rom-invader-stil spill og en bankapp for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling. +Programmet lærer grunnleggende JavaScript, HTML, og CSS, samt de nyeste verktøyene og teknikkene som dagens webutviklere bruker. Studenter får muligheten til å utvikle praktisk erfaring ved å bygge et skrive-spill, virtuelt terrarium, miljøvennlig nettleserutvidelse, et Space Invaders-inspirert spill og en bank-app for bedrifter. Ved slutten av serien vil studentene ha oppnådd en solid forståelse av webutvikling. > 🎓 Du kan ta de første leksjonene i dette pensumet som en [Læringssti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn! -Ved å sikre at innholdet stemmer overens med prosjektene, gjøres prosessen mer engasjerende for studentene og lagring av konsepter vil bli forbedret. Vi skrev også flere startleksjoner i JavaScript-grunnleggende for å introdusere konsepter, koblet med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen av videotutorials, noen av forfatterne bidro til dette pensumet. +Ved å sikre at innholdet stemmer overens med prosjektene, blir prosessen mer engasjerende for studentene og konseptene blir bedre husket. Vi skrev også flere oppstartleksjoner i JavaScript-grunnleggende for å introdusere konsepter, kombinert med en video fra "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-samlingen av videotutorials, hvor noen av forfatterne bidro til dette pensumet. -I tillegg setter en lavterskelquiz før en time intensjonen til studenten om å lære et tema, mens en andre quiz etter timen sikrer ytterligere lagring. Dette pensumet er designet for å være fleksibelt og morsomt og kan tas i sin helhet eller delvis. Prosjektene starter smått og blir stadig mer komplekse innen slutten av 12-ukers syklusen. +I tillegg setter en lavterskel-quiz før en klasse intensjonen for studenten mot å lære et tema, mens en andre quiz etter klassen sikrer videre hukommelse. Dette pensumet er designet for å være fleksibelt og morsomt, og kan tas i sin helhet eller delvis. Prosjektene starter smått og blir stadig mer komplekse innen slutten av en 12-ukers syklus. -Selv om vi med vilje har unngått å introdusere JavaScript-rammeverk for å fokusere på grunnleggende ferdigheter som trengs som webutvikler før man tar i bruk et rammeverk, vil et godt neste steg etter å ha fullført dette pensumet være å lære om Node.js via en annen samling videoer: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Selv om vi bevisst har unngått å introdusere JavaScript-rammeverk for å fokusere på grunnleggende ferdigheter som kreves som webutvikler før du tar i bruk et rammeverk, vil et godt neste steg etter dette pensumet være å lære om Node.js via en annen videosamling: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Besøk våre retningslinjer for [Atferdskodeks](CODE_OF_CONDUCT.md) og [Bidra](CONTRIBUTING.md). Vi ønsker din konstruktive tilbakemelding velkommen! +> Besøk våre retningslinjer for [Adferdskodeks](CODE_OF_CONDUCT.md) og [Bidrag](CONTRIBUTING.md). Vi setter pris på din konstruktive tilbakemelding! -## 🧭 Offline-tilgang +## 🧭 Frakoblet tilgang -Du kan kjøre denne dokumentasjonen offline ved å bruke [Docsify](https://docsify.js.org/#/). Fork dette repoet, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskin, og deretter i rotmappen til dette repoet, skriv `docsify serve`. Nettstedet vil serveres på port 3000 på din localhost: `localhost:3000`. +Du kan kjøre denne dokumentasjonen frakoblet ved å bruke [Docsify](https://docsify.js.org/#/). Fork dette repoet, [installer Docsify](https://docsify.js.org/#/quickstart) på din lokale maskin, og så i rotmappen av dette repoet, skriv `docsify serve`. Nettstedet vil bli servert på port 3000 på din localhost: `localhost:3000`. ## 📘 PDF - En PDF av alle leksjonene kan finnes [her](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -## 🎒 Andre Kurs -Teamet vårt produserer andre kurs! Sjekk ut: +## 🎒 Andre kurs + +Vårt team produserer andre kurs! Sjekk ut: ### LangChain @@ -216,7 +225,7 @@ Teamet vårt produserer andre kurs! Sjekk ut: [![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agenter +### Azure / Edge / MCP / Agents [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) @@ -224,7 +233,7 @@ Teamet vårt produserer andre kurs! Sjekk ut: --- -### Generativ AI-serie +### Generative AI Series [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -232,7 +241,7 @@ Teamet vårt produserer andre kurs! Sjekk ut: --- -### Kjerneopplæring +### Core Learning [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -243,7 +252,7 @@ Teamet vårt produserer andre kurs! Sjekk ut: --- -### Copilot-serie +### Copilot Series [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) @@ -251,21 +260,21 @@ Teamet vårt produserer andre kurs! Sjekk ut: ## Få hjelp -Hvis du sitter fast eller har noen spørsmål om å bygge AI-apper. Bli med andre lærende og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne og kunnskap deles fritt. +Hvis du sitter fast eller har spørsmål om å bygge AI-apper. Bli med andre elever og erfarne utviklere i diskusjoner om MCP. Det er et støttende fellesskap hvor spørsmål er velkomne, og kunnskap deles fritt. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Hvis du har produktfeedback eller finner feil mens du bygger, besøk: +Hvis du har produktinnspill eller feil under bygging, besøk: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Lisens -Dette depotet er lisensiert under MIT-lisensen. Se [LICENSE](../../LICENSE)-filen for mer informasjon. +Dette depotet er lisensiert under MIT-lisensen. Se [LICENSE](../../LICENSE) filen for mer informasjon. --- **Ansvarsfraskrivelse**: -Dette dokumentet er oversatt ved bruk 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 automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. +Dette 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 automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på dets opprinnelige språk skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi påtar oss ikke ansvar for eventuelle misforståelser eller feiltolkninger som følge av bruken av denne oversettelsen. \ No newline at end of file