diff --git a/translations/da/for-teachers.md b/translations/da/for-teachers.md index cc726c387..8f009bb10 100644 --- a/translations/da/for-teachers.md +++ b/translations/da/for-teachers.md @@ -42,10 +42,10 @@ Dette pensum inkluderer importbare pakker til almindelige LMS-arbejdsgange. - Moodle Cloud har begrænset Common Cartridge-support. Foretræk Moodle-filen ovenfor, som også kan uploades til Canvas. - Efter import, gennemgå moduler, deadlines og quizindstillinger for at matche din terminsplan. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.da.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.da.png) > Pensum i et Moodle-klasselokale -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.da.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.da.png) > Pensum i Canvas ### Brug repoet direkte (uden Classroom) 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 033b0aef0..611e41f96 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 @@ -17,7 +17,7 @@ Kuule, ymmärrän täysin, jos ohjelmointi tuntuu juuri nyt pelottavalta. Kun al 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! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.fi.png) +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.fi.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fi/1-getting-started-lessons/2-github-basics/README.md b/translations/fi/1-getting-started-lessons/2-github-basics/README.md index 157a8efca..ba63c8a46 100644 --- a/translations/fi/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/fi/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Tiedän, että tämä voi tuntua aluksi paljolta – muistan itsekin tuijottanee Otamme tämän matkan yhdessä, askel kerrallaan. Ei kiirettä, ei painetta – vain sinä, minä ja muutama todella siisti työkalu, joista tulee pian uusia parhaita ystäviäsi! -![Johdanto GitHubiin](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.fi.png) +![Johdanto GitHubiin](../../../../translated_images/webdev101-github.8846d7971abef6f9.fi.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -605,7 +605,7 @@ Etsi ensin GitHubista repositorio (tai **repo**), joka kiinnostaa sinua ja johon ✅ Hyvä tapa löytää 'aloittelijaystävällisiä' repoja on [etsiä tagilla 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopioi repo paikallisesti](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.fi.png) +![Kopioi repo paikallisesti](../../../../translated_images/clone_repo.5085c48d666ead57.fi.png) Koodin kopioimiseen on useita tapoja. Yksi tapa on "klonata" repositorion sisältö HTTPS:n, SSH:n tai GitHub CLI:n (komentoriviliittymän) avulla. diff --git a/translations/fi/1-getting-started-lessons/3-accessibility/README.md b/translations/fi/1-getting-started-lessons/3-accessibility/README.md index 689381778..3d6100c2b 100644 --- a/translations/fi/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/fi/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Luodaan saavutettavia verkkosivuja -![Kaikki saavutettavuudesta](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.fi.png) +![Kaikki saavutettavuudesta](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.fi.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fi/2-js-basics/1-data-types/README.md b/translations/fi/2-js-basics/1-data-types/README.md index e81964179..b627d28ae 100644 --- a/translations/fi/2-js-basics/1-data-types/README.md +++ b/translations/fi/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScriptin perusteet: Tietotyypit -![JavaScriptin perusteet - Tietotyypit](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.fi.png) +![JavaScriptin perusteet - Tietotyypit](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.fi.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fi/2-js-basics/2-functions-methods/README.md b/translations/fi/2-js-basics/2-functions-methods/README.md index 43c5f7cfb..273dc257c 100644 --- a/translations/fi/2-js-basics/2-functions-methods/README.md +++ b/translations/fi/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScriptin perusteet: metodit ja funktiot -![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.fi.png) +![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.fi.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fi/2-js-basics/3-making-decisions/README.md b/translations/fi/2-js-basics/3-making-decisions/README.md index a1ee27e84..1334edc43 100644 --- a/translations/fi/2-js-basics/3-making-decisions/README.md +++ b/translations/fi/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScriptin perusteet: Päätöksenteko -![JavaScriptin perusteet - Päätöksenteko](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.fi.png) +![JavaScriptin perusteet - Päätöksenteko](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.fi.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/fi/2-js-basics/4-arrays-loops/README.md b/translations/fi/2-js-basics/4-arrays-loops/README.md index d6d32c116..e1802ccf6 100644 --- a/translations/fi/2-js-basics/4-arrays-loops/README.md +++ b/translations/fi/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScriptin perusteet: Taulukot ja silmukat -![JavaScriptin perusteet - Taulukot](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.fi.png) +![JavaScriptin perusteet - Taulukot](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.fi.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fi/3-terrarium/1-intro-to-html/README.md b/translations/fi/3-terrarium/1-intro-to-html/README.md index 18287b305..c4dd2bf27 100644 --- a/translations/fi/3-terrarium/1-intro-to-html/README.md +++ b/translations/fi/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Johdatus HTML:ään](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.fi.png) +![Johdatus HTML:ään](../../../../translated_images/webdev101-html.4389c2067af68e98.fi.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) HTML eli HyperText Markup Language on jokaisen verkkosivun perusta, jonka olet koskaan vieraillut. Ajattele HTML:ää verkkosivujen "luurankona" – se määrittää, mihin sisältö sijoitetaan, miten se järjestetään ja mitä kukin osa edustaa. Vaikka CSS myöhemmin "pukee" HTML:n väreillä ja asetteluilla ja JavaScript tuo siihen interaktiivisuutta, HTML tarjoaa olennaisen rakenteen, joka tekee kaiken muun mahdolliseksi. @@ -88,7 +88,7 @@ Luo oma kansio terraario-projektillesi ja lisää ensimmäinen HTML-tiedostosi. 4. Explorer-paneelissa klikkaa "New File" -ikonia 5. Nimeä tiedostosi `index.html` -![VS Code Explorer näyttää uuden tiedoston luomisen](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.fi.png) +![VS Code Explorer näyttää uuden tiedoston luomisen](../../../../translated_images/vs-code-index.e2986cf919471eb9.fi.png) **Vaihtoehto 2: Käytä terminaalikomentoja** ```bash diff --git a/translations/fi/3-terrarium/2-intro-to-css/README.md b/translations/fi/3-terrarium/2-intro-to-css/README.md index 0b0a171f3..2a9d11283 100644 --- a/translations/fi/3-terrarium/2-intro-to-css/README.md +++ b/translations/fi/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Johdatus CSS:ään](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.fi.png) +![Johdatus CSS:ään](../../../../translated_images/webdev101-css.3f7af5991bf53a20.fi.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) Muistatko, kuinka HTML-terrariumisi näytti melko yksinkertaiselta? CSS:n avulla voimme muuttaa tuon pelkistetyn rakenteen visuaalisesti houkuttelevaksi. @@ -205,7 +205,7 @@ body { Avaa selaimesi kehitystyökalut (F12), siirry Elements-välilehteen ja tarkista `

`-elementtisi. Näet, että se perii fonttiperheen body-elementiltä: -![peritty fontti](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.fi.png) +![peritty fontti](../../../../translated_images/1.cc07a5cbe114ad1d.fi.png) ✅ **Kokeilua**: Kokeile asettaa muita periytyviä ominaisuuksia ``-elementille, kuten `color`, `line-height` tai `text-align`. Mitä tapahtuu otsikolle ja muille elementeille? @@ -592,7 +592,7 @@ Valmis parantamaan terrariumiasi realistisilla lasin heijastuksilla? Tämä tekn Luot hienovaraisia korostuksia, jotka simuloivat, miten valo heijastuu lasipinnoilta. Tämä lähestymistapa on samanlainen kuin miten renessanssimaalari Jan van Eyck käytti valoa ja heijastusta saadakseen maalatun lasin näyttämään kolmiulotteiselta. Tässä on tavoitteenasi: -![valmis terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.fi.png) +![valmis terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.fi.png) **Haasteesi:** - **Luo** hienovaraisia valkoisia tai vaaleanvärisiä soikeita muotoja lasin heijastuksille diff --git a/translations/fi/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/fi/3-terrarium/3-intro-to-DOM-and-closures/README.md index 69ae4e742..e7f1ae3a9 100644 --- a/translations/fi/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/fi/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM ja sulkeuma](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.fi.png) +![DOM ja sulkeuma](../../../../translated_images/webdev101-js.10280393044d7eaa.fi.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) Tervetuloa yhteen verkkokehityksen kiehtovimmista osa-alueista – interaktiivisuuden luomiseen! Document Object Model (DOM) toimii sillan tavoin HTML:n ja JavaScriptin välillä, ja tänään käytämme sitä herättääksemme terrariosi eloon. Kun Tim Berners-Lee loi ensimmäisen verkkoselaimen, hän kuvitteli verkon, jossa dokumentit voisivat olla dynaamisia ja interaktiivisia – DOM tekee tämän vision mahdolliseksi. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM-puun esitys](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.fi.png) +![DOM-puun esitys](../../../../translated_images/dom-tree.7daf0e763cbbba92.fi.png) > DOM:n ja sitä vastaavan HTML-koodin esitys. Lähde: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Sulkeumien ymmärtäminen**: Sulkeumat ovat merkittävä aihe JavaScriptissä, ja monet kehittäjät käyttävät niitä vuosia ennen kuin täysin ymmärtävät kaikki teoreettiset näkökohdat. Tänään keskitymme käytännön sovellukseen – näet, kuinka sulkeumat syntyvät luonnollisesti interaktiivisia ominaisuuksia rakentaessamme. Ymmärrys kehittyy, kun näet, kuinka ne ratkaisevat todellisia ongelmia. -![DOM-puun esitys](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.fi.png) +![DOM-puun esitys](../../../../translated_images/dom-tree.7daf0e763cbbba92.fi.png) > DOM:n ja sitä vastaavan HTML-koodin esitys. Lähde: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -589,7 +589,7 @@ Testaa nyt interaktiivista terrariumiasi! Avaa `index.html`-tiedosto verkkoselai - **Laitteiden välinen tuki**: Toimii sekä työpöydällä että mobiililaitteilla - **Suorituskyky huomioitu**: Ei muistivuotoja tai tarpeettomia laskelmia -![valmis terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.fi.png) +![valmis terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.fi.png) --- diff --git a/translations/fi/3-terrarium/README.md b/translations/fi/3-terrarium/README.md index e0237660c..5548917aa 100644 --- a/translations/fi/3-terrarium/README.md +++ b/translations/fi/3-terrarium/README.md @@ -1,45 +1,30 @@ -# Minun Terraarioni: Projekti HTML:n, CSS:n ja DOM-manipulaation oppimiseen JavaScriptin avulla 🌵🌱 +## Julkaise Terrariumisi -Pieni drag and drop -koodimeditaatio. Vähän HTML:ää, JS:ää ja CSS:ää käyttäen voit rakentaa verkkokäyttöliittymän, tyylitellä sen ja lisätä siihen useita haluamiasi vuorovaikutuksia. +Voit julkaista Terrariumisi verkossa käyttämällä **Azure Static Web Apps** -palvelua. -![minun terraarioni](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.fi.png) +1. Tee fork tästä repositoriosta -# Oppitunnit +2. Paina tätä painiketta 👇 -1. [Johdanto HTML:ään](./1-intro-to-html/README.md) -2. [Johdanto CSS:ään](./2-intro-to-css/README.md) -3. [Johdanto DOM:iin ja JS Closures -toimintoihin](./3-intro-to-DOM-and-closures/README.md) +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -## Tekijät - -Kirjoitettu ♥️:lla [Jen Looperin](https://www.twitter.com/jenlooper) toimesta. - -CSS:n avulla luotu terraario on saanut inspiraationsa Jakub Mandran lasipurkki [codepenistä](https://codepen.io/Rotarepmi/pen/rjpNZY). - -Taide on käsin piirretty [Jen Looperin](http://jenlooper.com) toimesta Procreate-sovelluksen avulla. - -## Julkaise Terraariosi - -Voit julkaista terraariosi verkossa käyttämällä Azure Static Web Apps -palvelua. - -1. Haarauta tämä repo - -2. Paina tätä painiketta - -[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) - -3. Käy läpi ohjattu toiminto sovelluksesi luomiseksi. Varmista, että asetat sovelluksen juuren joko `/solution`-kansioon tai koodipohjasi juureen. Tässä sovelluksessa ei ole API:ta, joten siitä ei tarvitse huolehtia. Haarautettuun repositorioosi luodaan GitHub-kansio, joka auttaa Azure Static Web Apps -rakennuspalveluita rakentamaan ja julkaisemaan sovelluksesi uuteen URL-osoitteeseen. +3. Seuraa asennusvelhon ohjeita luodaksesi sovelluksesi. + - Aseta **App root** joko `/solution` tai koodipohjasi juureen. + - Tässä sovelluksessa ei ole APIa, joten voit ohittaa API:n määrityksen. + - `.github`-kansio luodaan automaattisesti auttamaan Azure Static Web Appsia rakentamaan ja julkaisemaan sovelluksesi. --- -**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 pitää ensisijaisena lähteenä. 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ämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Pyrimme tarkkuuteen, mutta ota huomioon, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäiskielellä pidetään virallisena lähteenä. Tärkeissä tiedoissa suositellaan ammattimaisen ihmiskääntäjän käyttöä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista. + \ No newline at end of file diff --git a/translations/fi/3-terrarium/solution/README.md b/translations/fi/3-terrarium/solution/README.md index 63ad20250..a009d8262 100644 --- a/translations/fi/3-terrarium/solution/README.md +++ b/translations/fi/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Pieni vedä ja pudota -koodimeditaatio. Vähän HTML:ää, JS:ää ja CSS:ää käyttäen voit rakentaa verkkokäyttöliittymän, tyylitellä sen ja lisätä siihen vuorovaikutteisuutta. -![minun terraarioni](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.fi.png) +![minun terraarioni](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.fi.png) ## Tekijät diff --git a/translations/fi/5-browser-extension/1-about-browsers/README.md b/translations/fi/5-browser-extension/1-about-browsers/README.md index 6519a94e5..8b541fc1a 100644 --- a/translations/fi/5-browser-extension/1-about-browsers/README.md +++ b/translations/fi/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Selaimen luonnos](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.fi.jpg) +![Selaimen luonnos](../../../../translated_images/browser.60317c9be8b7f84a.fi.jpg) > Luonnos: [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Ennakkokysely @@ -79,7 +79,7 @@ Tämä prosessi muistuttaa, kuinka ensimmäinen selain, WorldWideWeb, suunnitelt ✅ **Pieni historia**: Ensimmäinen selain oli nimeltään 'WorldWideWeb' ja sen loi Sir Timothy Berners-Lee vuonna 1990. -![varhaiset selaimet](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.fi.jpg) +![varhaiset selaimet](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.fi.jpg) > Joitakin varhaisia selaimia, lähde: [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Kuinka selaimet käsittelevät verkkosisältöä @@ -198,7 +198,7 @@ quadrantChart Laajennuksen asennusprosessin ymmärtäminen auttaa sinua ennakoimaan käyttäjäkokemusta, kun ihmiset asentavat laajennuksesi. Asennusprosessi on standardoitu moderneissa selaimissa, pienillä käyttöliittymäsuunnittelun eroilla. -![kuvakaappaus Edge-selaimesta, jossa edge://extensions-sivu ja asetukset-valikko ovat avoinna](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.fi.png) +![kuvakaappaus Edge-selaimesta, jossa edge://extensions-sivu ja asetukset-valikko ovat avoinna](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.fi.png) > **Tärkeää**: Varmista, että kehittäjätila on kytketty päälle ja salli laajennusten asentaminen muista kaupoista testatessasi omia laajennuksiasi. @@ -313,10 +313,10 @@ Tämä noudattaa progressiivisen paljastamisen periaatetta, jota on käytetty k ### Laajennusnäkymien yleiskatsaus **Asetusnäkymä** - Ensimmäisen käyttökerran asetukset: -![kuvakaappaus valmiista laajennuksesta avoinna selaimessa, jossa näkyy lomake alueen nimen ja API-avaimen syöttämiseksi.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.fi.png) +![kuvakaappaus valmiista laajennuksesta avoinna selaimessa, jossa näkyy lomake alueen nimen ja API-avaimen syöttämiseksi.](../../../../translated_images/1.b6da8c1394b07491.fi.png) **Tulosnäkymä** - Hiilijalanjälkitietojen näyttö: -![kuvakaappaus valmiista laajennuksesta, joka näyttää hiilen käytön ja fossiilisten polttoaineiden prosenttiosuuden US-NEISO-alueelle.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.fi.png) +![kuvakaappaus valmiista laajennuksesta, joka näyttää hiilen käytön ja fossiilisten polttoaineiden prosenttiosuuden US-NEISO-alueelle.](../../../../translated_images/2.1dae52ff08042246.fi.png) ### Asetuslomakkeen rakentaminen diff --git a/translations/fi/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/fi/5-browser-extension/2-forms-browsers-local-storage/README.md index 949e63ff6..06366070d 100644 --- a/translations/fi/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/fi/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -266,7 +266,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Paikallisen tallennuksen näkymä](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.fi.png) +![Paikallisen tallennuksen näkymä](../../../../translated_images/localstorage.472f8147b6a3f8d1.fi.png) > ⚠️ **Tietoturvahuomio**: Tuotantosovelluksissa API-avainten tallentaminen LocalStorageen aiheuttaa tietoturvariskejä, koska JavaScript voi käyttää näitä tietoja. Oppimiskäyttöön tämä lähestymistapa toimii hyvin, mutta oikeissa sovelluksissa tulisi käyttää turvallista palvelinpuolen tallennusta arkaluontoisille tunnuksille. diff --git a/translations/fi/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/fi/5-browser-extension/3-background-tasks-and-performance/README.md index 974c8fd91..dfc05f1ca 100644 --- a/translations/fi/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/fi/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Avaa Edge-selaimen kehitystyökalut klikkaamalla oikeassa yläkulmassa olevia ko Kokeillaan tätä. Avaa verkkosivusto (Microsoft.com toimii hyvin tähän) ja klikkaa 'Tallenna'-painiketta. Päivitä sivu ja katso, kuinka profiilintyökalu tallentaa kaiken, mitä tapahtuu. Kun lopetat tallennuksen, näet yksityiskohtaisen erittelyn siitä, kuinka selain 'skriptasi', 'renderöi' ja 'maalasi' sivuston. Se muistuttaa minua siitä, kuinka ohjauskeskus seuraa jokaista järjestelmää raketin laukaisun aikana – saat reaaliaikaista dataa siitä, mitä tapahtuu ja milloin. -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.fi.png) +![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.fi.png) ✅ [Microsoftin dokumentaatio](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sisältää paljon lisätietoa, jos haluat syventyä aiheeseen. @@ -136,11 +136,11 @@ Valitse profiilin aikajanan osia zoomataksesi tapahtumiin, jotka tapahtuvat sivu Saat yleiskuvan sivusi suorituskyvystä valitsemalla osan profiilin aikajanasta ja katsomalla yhteenvetopaneelia: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.fi.png) +![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.fi.png) Tarkista Tapahtumaloki-paneeli nähdäksesi, kestikö jokin tapahtuma yli 15 ms: -![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.fi.png) +![Edge event log](../../../../translated_images/log.804026979f3707e0.fi.png) ✅ Tutustu profiilityökaluusi! Avaa kehitystyökalut tällä sivustolla ja katso, onko pullonkauloja. Mikä on hitaimmin latautuva resurssi? Nopein? diff --git a/translations/fi/5-browser-extension/README.md b/translations/fi/5-browser-extension/README.md index 9c53c1c0c..1f4796e3b 100644 --- a/translations/fi/5-browser-extension/README.md +++ b/translations/fi/5-browser-extension/README.md @@ -23,7 +23,7 @@ Tätä laajennusta käyttäjä voi kutsua ad hoc -tyyliin, kun API-avain ja alue ### Kiitokset -![vihreä selaimen laajennus](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png) +![vihreä selaimen laajennus](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.fi.png) ## Kiitokset diff --git a/translations/fi/5-browser-extension/solution/README.md b/translations/fi/5-browser-extension/solution/README.md index 7a8895300..734a287eb 100644 --- a/translations/fi/5-browser-extension/solution/README.md +++ b/translations/fi/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Käyttämällä tmrow:n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen voit rakentaa selainlaajennuksen, joka muistuttaa sinua suoraan selaimessa siitä, kuinka kuormittavaa alueesi sähkönkulutus on. Tämän laajennuksen satunnainen käyttö auttaa sinua tekemään päätöksiä toimistasi tämän tiedon perusteella. -![laajennuksen kuvakaappaus](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png) +![laajennuksen kuvakaappaus](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.fi.png) ## Aloittaminen @@ -31,7 +31,7 @@ npm run build Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikean yläkulman 'kolmen pisteen' valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Lataa purkamaton' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio kehotteessa, ja laajennus latautuu. Käyttääksesi sitä tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi tämän sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän koodia 'US-NEISO'). -![asennus](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png) +![asennus](../../../../translated_images/install-on-edge.78634f02842c4828.fi.png) Kun API-avain ja alueen koodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, mitkä energiaintensiiviset toiminnot olisivat sopivia suorittaa. Tämän 'pistejärjestelmän' konsepti tuli minulle [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seuraamiseen. diff --git a/translations/fi/5-browser-extension/solution/translation/README.fr.md b/translations/fi/5-browser-extension/solution/translation/README.fr.md index df8f14ea4..8aa7b31aa 100644 --- a/translations/fi/5-browser-extension/solution/translation/README.fr.md +++ b/translations/fi/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Käyttämällä tmrow'n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen, luo selainlaajennus, joka muistuttaa sinua suoraan selaimessasi alueesi sähkönkulutuksesta. Tämän ad hoc -laajennuksen käyttö auttaa sinua tekemään päätöksiä toimintasi suhteen näiden tietojen perusteella. -![laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png) +![laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.fi.png) ## Aloittaminen @@ -31,7 +31,7 @@ npm run build Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikean yläkulman 'kolmen pisteen' valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Lataa purkamaton laajennus' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio kehotteessa, ja laajennus latautuu. Käyttääksesi laajennusta tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map -karttaa](https://www.electricitymap.org/map) (esimerkiksi Bostonissa käytän 'US-NEISO'). -![asennus](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png) +![asennus](../../../../../translated_images/install-on-edge.78634f02842c4828.fi.png) Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillisen pisteen tulisi muuttua heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeen siitä, millaisia energiaintensiivisiä toimintoja olisi sopivaa tehdä. Tämän 'pistejärjestelmän' konsepti on saanut inspiraationsa [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen osalta. diff --git a/translations/fi/5-browser-extension/solution/translation/README.hi.md b/translations/fi/5-browser-extension/solution/translation/README.hi.md index 0d4ab73f9..43302c1f6 100644 --- a/translations/fi/5-browser-extension/solution/translation/README.hi.md +++ b/translations/fi/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Tmrow:n CO2 Signal API:n avulla seurataan sähkönkulutusta ja luodaan selainlaajennus, joka muistuttaa sinua siitä, kuinka kuormittavaa alueesi sähkönkäyttö on selaimessasi. Tämän laajennuksen käyttö auttaa sinua tekemään päätöksiä toiminnastasi tämän tiedon perusteella. -![Laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png) +![Laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.fi.png) ## Aloittaminen @@ -31,7 +31,7 @@ npm run build Asentaaksesi sen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa löytääksesi laajennuspaneelin. Valitse sieltä "Lataa purkamaton" ladataksesi uuden laajennuksen. Avaa kehotteessa "dist"-kansio, ja laajennus latautuu. Käyttääksesi sitä, tarvitset CO2 Signal API -avaimen ([saatavilla sähköpostitse täältä](https://www.co2snal.com/) - syötä sähköpostiosoitteesi sivun laatikkoon) ja [alueesi koodin](http://api.electricitymap.org/v3/zones) [Electricity Map](https://www.electricitymap.org/map) -sivustolta (esimerkiksi Bostonissa käytän "US-NEISO"). -![Asennus](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png) +![Asennus](../../../../../translated_images/install-on-edge.78634f02842c4828.fi.png) Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkissa oleva värillinen piste muuttuu heijastamaan alueesi energiankäyttöä ja antaa sinulle indikaattorin siitä, mitkä energiaintensiiviset toiminnot sopivat parhaiten suoritettavaksi. Tämän "piste"-järjestelmän idea tuli minulle Kalifornian päästöjen [Energy Lollipop -laajennuksesta](https://energylollipop.com/). diff --git a/translations/fi/5-browser-extension/solution/translation/README.it.md b/translations/fi/5-browser-extension/solution/translation/README.it.md index 3add37752..df2b8544f 100644 --- a/translations/fi/5-browser-extension/solution/translation/README.it.md +++ b/translations/fi/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Tässä projektissa käytetään tmrow:n Signal CO2 -rajapintaa sähköenergian käytön seuraamiseen. Tarkoituksena on luoda selainlaajennus, joka muistuttaa suoraan selaimessa, kuinka kuormittavaa sähköenergian käyttö on omalla alueella. Tämän laajennuksen avulla voi arvioida omia toimintojaan näiden tietojen perusteella. -![laajennuksen näkymä](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png) +![laajennuksen näkymä](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.fi.png) ## Aloittaminen @@ -31,7 +31,7 @@ npm run build Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa ja etsi Laajennukset-paneeli. Jos kehittäjätila ei ole vielä käytössä, ota se käyttöön (vasemmassa alakulmassa). Valitse "Lataa purkamaton" lisätäksesi uuden laajennuksen. Avaa "dist"-kansio kehotteessa, ja laajennus ladataan. Käyttöä varten tarvitset API-avaimen CO2 Signal -rajapintaan (voit [hankkia sen sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi sivulla olevaan kenttään) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [sähkökarttaa](https://www.electricitymap.org/map) (esimerkiksi Bostonissa "US-NEISO"). -![asennus](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png) +![asennus](../../../../../translated_images/install-on-edge.78634f02842c4828.fi.png) Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkissa oleva väripiste muuttuu heijastamaan alueen energiankäyttöä. Se antaa myös vihjeitä siitä, mitkä korkean energiankulutuksen toiminnot olisivat sopivia suorittaa. Tämän "pistejärjestelmän" konsepti on peräisin [Energy Lollipop -laajennuksesta](https://energylollipop.com/), joka seuraa Kalifornian päästöjä. diff --git a/translations/fi/5-browser-extension/solution/translation/README.ja.md b/translations/fi/5-browser-extension/solution/translation/README.ja.md index 4c5db2b7c..da4062737 100644 --- a/translations/fi/5-browser-extension/solution/translation/README.ja.md +++ b/translations/fi/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Rakennetaan selainlaajennus, joka käyttää tmrow:n CO2 Signal API:ta seuratakseen energiankulutusta ja näyttää muistutuksena, kuinka paljon sähköä alueellasi käytetään. Tämän laajennuksen avulla voit tehdä päätöksiä toiminnastasi tämän tiedon perusteella. -![laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png) +![laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.fi.png) ## Aloitus @@ -31,7 +31,7 @@ npm run build Asentaaksesi laajennuksen Edge-selaimeen, etsi selaimen oikeasta yläkulmasta "kolmen pisteen" valikosta "Laajennukset"-paneeli. Valitse sieltä "Load Unpacked" ja lataa uusi laajennus. Kun sinua kehotetaan, avaa "dist"-kansio, jolloin laajennus latautuu. Käyttääksesi laajennusta tarvitset CO2 Signal API:n API-avaimen ([hanki yksi sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostisi tämän sivun laatikkoon) sekä [Electricity Map](https://www.electricitymap.org/map) -sivuston mukaisen [aluekoodin](http://api.electricitymap.org/v3/zones) (esimerkiksi Bostonissa käytetään 'US-NEISO'). -![asennus](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png) +![asennus](../../../../../translated_images/install-on-edge.78634f02842c4828.fi.png) Kun syötät API-avaimen ja aluekoodin laajennuksen käyttöliittymään, selainlaajennuspalkissa näkyvä värillinen piste muuttuu ja heijastaa alueesi energiankulutusta. Tämä auttaa sinua arvioimaan, millaisia energiaa vaativia toimintoja on sopivaa tehdä. Tämän "piste"-järjestelmän idea tuli minulle Kalifornian päästöjen [Energy Lollipop -laajennuksesta](https://energylollipop.com/). diff --git a/translations/fi/5-browser-extension/solution/translation/README.ms.md b/translations/fi/5-browser-extension/solution/translation/README.ms.md index f4326af72..cc82e920d 100644 --- a/translations/fi/5-browser-extension/solution/translation/README.ms.md +++ b/translations/fi/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Käyttämällä tmrow:n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen, rakenna selaimen laajennus, joka antaa sinulle ilmoituksia siitä, kuinka raskasta alueesi sähkönkulutus on. Tämän laajennuksen käyttö auttaa sinua tekemään tietoisempia päätöksiä toiminnastasi näiden tietojen perusteella. -![selaimen laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png) +![selaimen laajennuksen kuvakaappaus](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.fi.png) ## Aloita tästä @@ -31,7 +31,7 @@ npm run build Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Load Unpacked' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio pyynnön mukaisesti, ja laajennus latautuu. Käyttääksesi sitä tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän 'US-NEISO'). -![lataus käynnissä](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png) +![lataus käynnissä](../../../../../translated_images/install-on-edge.78634f02842c4828.fi.png) Kun API-avain ja aluekoodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, millaisia raskaita toimintoja kannattaa tehdä. Tämän "pistejärjestelmän" konsepti tuli minulle [Energy Lollipop -selaimen laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seuraamiseen. diff --git a/translations/fi/5-browser-extension/start/README.md b/translations/fi/5-browser-extension/start/README.md index ade089dad..e60fe4ecc 100644 --- a/translations/fi/5-browser-extension/start/README.md +++ b/translations/fi/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Käyttämällä tmrow'n CO2 Signal API:ta sähkönkulutuksen seuraamiseen, voit rakentaa selaimen laajennuksen, joka muistuttaa sinua suoraan selaimessa siitä, kuinka kuormittavaa alueesi sähkönkulutus on. Tämän laajennuksen satunnainen käyttö auttaa sinua tekemään harkittuja päätöksiä toimistasi tämän tiedon perusteella. -![laajennuksen kuvakaappaus](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.fi.png) +![laajennuksen kuvakaappaus](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.fi.png) ## Aloittaminen @@ -31,7 +31,7 @@ npm run build Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikean yläkulman "kolmen pisteen" valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä "Lataa purkamaton" ladataksesi uuden laajennuksen. Avaa kehotteessa "dist"-kansio, ja laajennus latautuu. Käyttääksesi sitä, tarvitset API-avaimen CO2 Signal API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi tämän sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän koodia 'US-NEISO'). -![asennus](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.fi.png) +![asennus](../../../../translated_images/install-on-edge.78634f02842c4828.fi.png) Kun API-avain ja alueen koodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, mitkä energiaintensiiviset toiminnot olisivat sopivia suorittaa. Tämän "piste"-järjestelmän konsepti on peräisin [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seurantaan. diff --git a/translations/fi/6-space-game/2-drawing-to-canvas/README.md b/translations/fi/6-space-game/2-drawing-to-canvas/README.md index ff38bf6e4..06e7be130 100644 --- a/translations/fi/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/fi/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![canvasin ruudukko](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.fi.png) +![canvasin ruudukko](../../../../translated_images/canvas_grid.5f209da785ded492.fi.png) > Kuva [MDN:stä](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Canvas-elementille piirtäminen noudattaa samaa kolmen vaiheen prosessia, joka muodostaa kaikkien canvas-grafiikoiden perustan. Kun teet tämän muutaman kerran, se muuttuu toiseksi luonteeksi: @@ -329,11 +329,11 @@ Sinun tulee rakentaa verkkosivu, jossa on Canvas-elementti. Sen tulisi näyttä - Sankarilaiva - ![Sankarilaiva](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.fi.png) + ![Sankarilaiva](../../../../translated_images/player.dd24c1afa8c71e9b.fi.png) - 5*5 hirviöjoukko - ![Hirviölaiva](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.fi.png) + ![Hirviölaiva](../../../../translated_images/enemyShip.5df2a822c16650c2.fi.png) ### Suositellut kehitysvaiheet @@ -467,7 +467,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Valmis tulos näyttää tältä: -![Musta ruutu, jossa sankari ja 5*5 hirviötä](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.fi.png) +![Musta ruutu, jossa sankari ja 5*5 hirviötä](../../../../translated_images/partI-solution.36c53b48c9ffae2a.fi.png) ## Ratkaisu diff --git a/translations/fi/6-space-game/5-keeping-score/README.md b/translations/fi/6-space-game/5-keeping-score/README.md index e38eb14a6..135c0e7ad 100644 --- a/translations/fi/6-space-game/5-keeping-score/README.md +++ b/translations/fi/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Pistejärjestelmä**: Jokainen tuhottu vihollisalus antaa 100 pistettä (pyöreät numerot ovat helpompia pelaajien laskea mielessään). Pisteet näytetään vasemmassa alakulmassa. -- **Elämälaskuri**: Sankarisi aloittaa kolmella elämällä – standardi, jonka varhaiset arcade-pelit asettivat tasapainottamaan haastetta ja pelattavuutta. Jokainen törmäys viholliseen maksaa yhden elämän. Näytämme jäljellä olevat elämät oikeassa alakulmassa aluksen ikoneilla ![elämäkuva](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.fi.png). +- **Elämälaskuri**: Sankarisi aloittaa kolmella elämällä – standardi, jonka varhaiset arcade-pelit asettivat tasapainottamaan haastetta ja pelattavuutta. Jokainen törmäys viholliseen maksaa yhden elämän. Näytämme jäljellä olevat elämät oikeassa alakulmassa aluksen ikoneilla ![elämäkuva](../../../../translated_images/life.6fb9f50d53ee0413.fi.png). ## Aloitetaan rakentaminen! diff --git a/translations/fi/7-bank-project/1-template-route/README.md b/translations/fi/7-bank-project/1-template-route/README.md index 01af035dd..bc290c8d4 100644 --- a/translations/fi/7-bank-project/1-template-route/README.md +++ b/translations/fi/7-bank-project/1-template-route/README.md @@ -639,7 +639,7 @@ sequenceDiagram `history.pushState` luo uusia merkintöjä selaimen navigointihistoriaan. Voit tarkistaa tämän pitämällä *takaisin-painiketta* painettuna selaimessasi, sen pitäisi näyttää jotain tällaista: -![Navigointihistorian kuvakaappaus](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.fi.png) +![Navigointihistorian kuvakaappaus](../../../../translated_images/history.7fdabbafa521e064.fi.png) Jos yrität klikata takaisin-painiketta muutaman kerran, huomaat, että nykyinen URL-osoite muuttuu ja historia päivittyy, mutta sama template pysyy näytettynä. diff --git a/translations/fi/7-bank-project/2-forms/README.md b/translations/fi/7-bank-project/2-forms/README.md index 7cb4ad715..3c2f19288 100644 --- a/translations/fi/7-bank-project/2-forms/README.md +++ b/translations/fi/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Ensiksi tarkastellaan, mitä tapahtuu peruslomakkeen lähetyksessä: 2. Tarkkaile muutoksia selaimesi osoiterivillä 3. Huomaa, kuinka sivu latautuu uudelleen ja tiedot näkyvät URL-osoitteessa -![Kuvakaappaus selaimen URL-osoitteen muutoksesta Rekisteröidy-painikkeen klikkauksen jälkeen](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.fi.png) +![Kuvakaappaus selaimen URL-osoitteen muutoksesta Rekisteröidy-painikkeen klikkauksen jälkeen](../../../../translated_images/click-register.e89a30bf0d4bc9ca.fi.png) ### HTTP-menetelmien vertailu @@ -350,7 +350,7 @@ Konfiguroidaan rekisteröintilomakkeesi kommunikoimaan oikein taustapalvelimen A 2. **Klikkaa** "Luo tili" -painiketta 3. **Tarkkaile** palvelimen vastausta selaimessasi -![Selaimen ikkuna osoitteessa localhost:5000/api/accounts, jossa näkyy JSON-merkkijono käyttäjätiedoilla](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.fi.png) +![Selaimen ikkuna osoitteessa localhost:5000/api/accounts, jossa näkyy JSON-merkkijono käyttäjätiedoilla](../../../../translated_images/form-post.61de4ca1b964d91a.fi.png) **Mitä sinun pitäisi nähdä:** - **Selaimen uudelleenohjaus** API-päätepisteen URL-osoitteeseen @@ -554,7 +554,7 @@ async function register() { 3. **Klikkaa** "Luo tili" 4. **Tarkkaile** konsoliviestejä ja käyttäjäpalautetta -![Näyttökuva, jossa näkyy lokiviesti selaimen konsolissa](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.fi.png) +![Näyttökuva, jossa näkyy lokiviesti selaimen konsolissa](../../../../translated_images/browser-console.efaf0b51aaaf6778.fi.png) **Mitä sinun pitäisi nähdä:** - **Lataustila** näkyy lähetyspainikkeessa @@ -729,7 +729,7 @@ Parannetaan rekisteröintilomakettasi vankalla validoinnilla, joka tarjoaa erino 3. **Kokeile** erikoismerkkejä käyttäjänimi-kentässä 4. **Anna** negatiivinen saldo -![Näyttökuva, jossa näkyy validointivirhe lomakkeen lähettämisen yhteydessä](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.fi.png) +![Näyttökuva, jossa näkyy validointivirhe lomakkeen lähettämisen yhteydessä](../../../../translated_images/validation-error.8bd23e98d416c22f.fi.png) **Mitä huomaat:** - **Selaimen näyttämät** natiivivalidointiviestit @@ -859,7 +859,7 @@ Näytä virheilmoitus HTML:ssä, jos käyttäjä on jo olemassa. Tässä on esimerkki siitä, miltä lopullinen kirjautumissivu voi näyttää pienen tyylittelyn jälkeen: -![Näyttökuva kirjautumissivusta CSS-tyylien lisäämisen jälkeen](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.fi.png) +![Näyttökuva kirjautumissivusta CSS-tyylien lisäämisen jälkeen](../../../../translated_images/result.96ef01f607bf856a.fi.png) ## Luentojälkeinen kysely diff --git a/translations/fi/7-bank-project/3-data/README.md b/translations/fi/7-bank-project/3-data/README.md index c24b2ddf5..41435ff1e 100644 --- a/translations/fi/7-bank-project/3-data/README.md +++ b/translations/fi/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Päivitysprosessi monisivuisessa sovelluksessa](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.fi.png) +![Päivitysprosessi monisivuisessa sovelluksessa](../../../../translated_images/mpa.7f7375a1a2d4aa77.fi.png) **Miksi tämä lähestymistapa tuntui kömpelöltä:** - Jokainen klikkaus tarkoitti koko sivun uudelleenrakentamista @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Päivitysprosessi yksisivuisessa sovelluksessa](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.fi.png) +![Päivitysprosessi yksisivuisessa sovelluksessa](../../../../translated_images/spa.268ec73b41f992c2.fi.png) **Miksi SPA:t tuntuvat niin paljon paremmilta:** - Vain ne osat, jotka oikeasti muuttuivat, päivitetään (fiksua, eikö?) @@ -515,7 +515,7 @@ if (data.error) { Nyt kun testaat virheellisellä tilillä, näet hyödyllisen virheilmoituksen suoraan sivulla! -![Näyttökuva, jossa virheilmoitus näkyy kirjautumisen aikana](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.fi.png) +![Näyttökuva, jossa virheilmoitus näkyy kirjautumisen aikana](../../../../translated_images/login-error.416fe019b36a6327.fi.png) #### Vaihe 4: Ole inklusiivinen saavutettavuuden suhteen @@ -928,7 +928,7 @@ Valmis viemään pankkisovelluksesi seuraavalle tasolle? Tehdään siitä jotain Tältä viimeistelty kojelauta voisi näyttää: -![Esimerkkikuva viimeistellystä kojelaudasta tyylittelyn jälkeen](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.fi.png) +![Esimerkkikuva viimeistellystä kojelaudasta tyylittelyn jälkeen](../../../../translated_images/screen2.123c82a831a1d14a.fi.png) Sinun ei tarvitse kopioida tätä täysin - käytä sitä inspiraationa ja tee siitä oman näköisesi! diff --git a/translations/fi/7-bank-project/4-state-management/README.md b/translations/fi/7-bank-project/4-state-management/README.md index 4f006ccc1..cd28c67db 100644 --- a/translations/fi/7-bank-project/4-state-management/README.md +++ b/translations/fi/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Kuten Titanicin osastoitu rakenne, joka vaikutti vankalta, kunnes useat osastot Sen sijaan, että juoksisimme ympyrää, luomme **keskitetyn tilanhallintajärjestelmän**. Ajattele sitä kuin yhtä todella järjestelmällistä henkilöä, joka vastaa kaikesta tärkeästä: -![Kaavio, joka näyttää datavirrat HTML:n, käyttäjän toimien ja tilan välillä](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.fi.png) +![Kaavio, joka näyttää datavirrat HTML:n, käyttäjän toimien ja tilan välillä](../../../../translated_images/data-flow.fa2354e0908fecc8.fi.png) ```mermaid flowchart TD diff --git a/translations/fi/7-bank-project/4-state-management/assignment.md b/translations/fi/7-bank-project/4-state-management/assignment.md index 477c8c8a0..b656b0030 100644 --- a/translations/fi/7-bank-project/4-state-management/assignment.md +++ b/translations/fi/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Katso [palvelimen API-dokumentaatio](../api/README.md) saadaksesi tietoa: **Odotettu tulos:** Tehtävän suorittamisen jälkeen pankkisovelluksessasi pitäisi olla täysin toimiva "Lisää tapahtuma" -ominaisuus, joka näyttää ja käyttäytyy ammattimaisesti: -![Näyttökuva esimerkkidialogista "Lisää tapahtuma"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.fi.png) +![Näyttökuva esimerkkidialogista "Lisää tapahtuma"](../../../../translated_images/dialog.93bba104afeb79f1.fi.png) ## Toteutuksen testaus diff --git a/translations/fi/7-bank-project/README.md b/translations/fi/7-bank-project/README.md index f9ac81d53..84d158c40 100644 --- a/translations/fi/7-bank-project/README.md +++ b/translations/fi/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Tässä projektissa opit rakentamaan kuvitteellisen pankin. Näissä oppitunneissa annetaan ohjeita siitä, miten verkkosovellus suunnitellaan ja reitit määritetään, miten lomakkeita rakennetaan, tilaa hallitaan ja tietoja haetaan API:sta, josta voit hakea pankin tiedot. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.fi.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.fi.png) | +| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.fi.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.fi.png) | |--------------------------------|--------------------------------| ## Oppitunnit diff --git a/translations/fi/8-code-editor/1-using-a-code-editor/README.md b/translations/fi/8-code-editor/1-using-a-code-editor/README.md index b7ba49bd7..0a1591c11 100644 --- a/translations/fi/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/fi/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Aivan kuten Alexander Graham Bellin puhelin yhdisti etäisiä paikkoja, GitHub-t Kun kaikki on latautunut, näet kauniin ja selkeän työtilan, joka on suunniteltu pitämään sinut keskittyneenä siihen, mikä on tärkeää – koodisi! -![VSCode.dev:n oletuskäyttöliittymä](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.fi.png) +![VSCode.dev:n oletuskäyttöliittymä](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.fi.png) **Tässä on kierros naapurustossa:** - **Toimintopalkki** (vasemmalla oleva kaistale): Päänavigointisi, jossa on Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩 ja Settings ⚙️ @@ -233,7 +233,7 @@ Tämä on täydellinen, kun aloitat VSCode.devissä ja haluat avata tietyn repos 1. Siirry osoitteeseen [vscode.dev](https://vscode.dev), jos et ole jo siellä 2. Etsi "Open Remote Repository" -painike aloitusnäytöltä ja klikkaa sitä - ![Avaa etärepositorio](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.fi.png) + ![Avaa etärepositorio](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.fi.png) 3. Liitä mikä tahansa GitHub-repositorion URL (kokeile tätä: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Paina Enter ja katso, kuinka taikuus tapahtuu! @@ -242,7 +242,7 @@ Tämä on täydellinen, kun aloitat VSCode.devissä ja haluat avata tietyn repos Haluatko tuntea itsesi koodausvelhoksi? Kokeile tätä näppäinyhdistelmää: Ctrl+Shift+P (tai Cmd+Shift+P Macilla) avataksesi komentopalettin: -![Komentopaletti](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.fi.png) +![Komentopaletti](../../../../translated_images/palette-menu.4946174e07f42622.fi.png) **Komentopaletti on kuin hakukone kaikelle, mitä voit tehdä:** - Kirjoita "open remote", ja se löytää repositorion avaajan puolestasi @@ -304,7 +304,7 @@ Aivan kuten arkkitehdin toimistossa piirustusten järjestäminen, tiedostojen lu 3. Syötä tiedoston nimi, mukaan lukien oikea tiedostopääte (`style.css`, `script.js`, `index.html`) 4. Paina Enter luodaksesi tiedoston -![Uuden tiedoston luominen](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.fi.png) +![Uuden tiedoston luominen](../../../../translated_images/create-new-file.2814e609c2af9aeb.fi.png) **Nimeämiskäytännöt:** - Käytä kuvailevia nimiä, jotka kertovat tiedoston tarkoituksen @@ -322,7 +322,7 @@ Tässä alkaa todellinen hauskuus! VSCode.dev:n editori on täynnä hyödyllisi 2. Aloita kirjoittaminen ja katso, kuinka VSCode.dev auttaa sinua väreillä, ehdotuksilla ja virheiden tunnistamisella 3. Tallenna työsi Ctrl+S (Windows/Linux) tai Cmd+S (Mac) – vaikka se tallentaa automaattisesti! -![Tiedostojen muokkaaminen VSCode.devissä](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.fi.png) +![Tiedostojen muokkaaminen VSCode.devissä](../../../../translated_images/edit-a-file.52c0ee665ef19f08.fi.png) **Siistit jutut, jotka tapahtuvat koodatessasi:** - Koodisi saa kauniin värikoodauksen, joten sitä on helppo lukea @@ -398,7 +398,7 @@ Laajennusmarkkinapaikka on todella hyvin järjestetty, joten et eksy etsiessäsi 2. Selaa tai etsi jotain tiettyä 3. Klikkaa mitä tahansa kiinnostavaa saadaksesi lisätietoja -![Laajennusmarkkinapaikan käyttöliittymä](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.fi.png) +![Laajennusmarkkinapaikan käyttöliittymä](../../../../translated_images/extensions.eca0e0c7f59a10b5.fi.png) **Mitä siellä näet:** @@ -451,7 +451,7 @@ Useimmissa laajennuksissa on asetuksia, joita voit säätää, jotta ne toimivat 3. Valitse "Laajennuksen asetukset" pudotusvalikosta 4. Säädä asetuksia, kunnes ne tuntuvat sopivilta työnkulullesi -![Laajennusasetusten räätälöinti](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.fi.png) +![Laajennusasetusten räätälöinti](../../../../translated_images/extension-settings.21c752ae4f4cdb78.fi.png) **Yleisiä asioita, joita saatat haluta säätää:** - Miten koodisi muotoillaan (välilehdet vs välilyönnit, rivin pituus jne.) diff --git a/translations/fi/8-code-editor/1-using-a-code-editor/assignment.md b/translations/fi/8-code-editor/1-using-a-code-editor/assignment.md index c52b0a151..03887bad3 100644 --- a/translations/fi/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/fi/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Koska VSCode.dev vaatii vähintään yhden tiedoston repositorion avaamiseen, lu 4. **Kirjoita** commit-viesti: "Lisätty alkuperäinen HTML-rakenne" 5. **Klikkaa** "Commit new file" tallentaaksesi muutokset -![Luodaan alkuperäinen tiedosto GitHubissa](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.fi.png) +![Luodaan alkuperäinen tiedosto GitHubissa](../../../../translated_images/new-file-github.com.c886796d800e8056.fi.png) **Mitä tämä alkuperäinen asetus saavuttaa:** - **Luo** asianmukaisen HTML5-dokumenttirakenteen semanttisilla elementeillä @@ -104,7 +104,7 @@ Nyt kun repositorion perusta on luotu, siirrytään VSCode.dev:iin varsinaista k ✅ **Onnistumisen merkki**: Näet projektitiedostosi Explorer-sivupalkissa ja `index.html`-tiedoston muokattavissa pääeditorialueella. -![Projekti ladattu VSCode.dev:ssä](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.fi.png) +![Projekti ladattu VSCode.dev:ssä](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.fi.png) **Mitä näet käyttöliittymässä:** - **Explorer-sivupalkki**: **Näyttää** repositorion tiedostot ja kansiorakenteen @@ -448,7 +448,7 @@ Laajennukset parantavat kehityskokemustasi tarjoamalla reaaliaikaisia esikatselu **Välittömät tulokset asennuksen jälkeen:** Kun CodeSwing on asennettu, näet ansioluettelosivustosi reaaliaikaisen esikatselun editorissa. Tämä mahdollistaa sen, että näet tarkalleen, miltä sivustosi näyttää tehdessäsi muutoksia. -![CodeSwing-laajennus näyttää reaaliaikaisen esikatselun](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.fi.png) +![CodeSwing-laajennus näyttää reaaliaikaisen esikatselun](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.fi.png) **Parannetun käyttöliittymän ymmärtäminen:** - **Jaettu näkymä**: **Näyttää** koodisi toisella puolella ja reaaliaikaisen esikatselun toisella diff --git a/translations/fi/9-chat-project/README.md b/translations/fi/9-chat-project/README.md index 1ad33cb6e..09b5d6534 100644 --- a/translations/fi/9-chat-project/README.md +++ b/translations/fi/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Tältä valmis projektisi näyttää: -![Keskustelusovelluksen käyttöliittymä, jossa näkyy keskustelu käyttäjän ja tekoälyavustajan välillä](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fi.png) +![Keskustelusovelluksen käyttöliittymä, jossa näkyy keskustelu käyttäjän ja tekoälyavustajan välillä](../../../translated_images/screenshot.0a1ee0d123df681b.fi.png) ## 🗺️ Oppimismatka tekoälysovellusten kehittämiseen @@ -194,7 +194,7 @@ mindmap **Keskeinen periaate**: Tekoälysovellusten kehitys yhdistää perinteiset verkkokehitystaidot tekoälypalveluiden integrointiin, luoden älykkäitä sovelluksia, jotka tuntuvat käyttäjille luonnollisilta ja reagoivilta. -![GitHub Models AI Playground -käyttöliittymä, jossa mallin valinta ja testausalue](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fi.png) +![GitHub Models AI Playground -käyttöliittymä, jossa mallin valinta ja testausalue](../../../translated_images/playground.d2b927122224ff8f.fi.png) **Mikä tekee Playgroundista niin hyödyllisen:** - **Kokeile** eri tekoälymalleja, kuten GPT-4o-mini, Claude ja muita (kaikki ilmaisia!) @@ -204,7 +204,7 @@ mindmap Kun olet kokeillut hieman, klikkaa vain "Code"-välilehteä ja valitse ohjelmointikieli saadaksesi toteutuskoodin, jota tarvitset. -![Playground-vaihtoehto, jossa näkyy koodin generointivaihtoehdot eri ohjelmointikielille](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fi.png) +![Playground-vaihtoehto, jossa näkyy koodin generointivaihtoehdot eri ohjelmointikielille](../../../translated_images/playground-choice.1d23ba7d407f4758.fi.png) ## Python-taustaintegraation asettaminen @@ -2141,14 +2141,14 @@ Haluatko kokeilla tätä projektia pilvipohjaisessa kehitysympäristössä? GitH - **Siirry** [Web Dev For Beginners -repositoryyn](https://github.com/microsoft/Web-Dev-For-Beginners) - **Klikkaa** "Use this template" oikeassa yläkulmassa (varmista, että olet kirjautunut GitHubiin) -![Luo mallista -käyttöliittymä, jossa näkyy vihreä "Use this template" -painike](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fi.png) +![Luo mallista -käyttöliittymä, jossa näkyy vihreä "Use this template" -painike](../../../translated_images/template.67ad477109d29a2b.fi.png) **Vaihe 2: Käynnistä Codespaces** - **Avaa** juuri luomasi repository - **Klikkaa** vihreää "Code"-painiketta ja valitse "Codespaces" - **Valitse** "Create codespace on main" aloittaaksesi kehitysympäristön -![Luo Codespace -käyttöliittymä, jossa näkyy vaihtoehdot pilvipohjaisen kehitysympäristön käynnistämiseen](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fi.png) +![Luo Codespace -käyttöliittymä, jossa näkyy vaihtoehdot pilvipohjaisen kehitysympäristön käynnistämiseen](../../../translated_images/codespace.bcecbdf5d2747d3d.fi.png) **Vaihe 3: Ympäristön konfigurointi** Kun Codespace latautuu, sinulla on käytössäsi: diff --git a/translations/fi/README.md b/translations/fi/README.md index 6f1a9a3af..b8a94c7a7 100644 --- a/translations/fi/README.md +++ b/translations/fi/README.md @@ -1,261 +1,280 @@ -[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Verkkokehitys aloittelijoille - Opetussuunnitelma +# Verkkokehitys aloittelijoille - Opetussuunnitelma -Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista käsittelee JavaScriptiä, CSS:ää ja HTML:ää käytännön projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visoihin, keskusteluihin ja käytännön tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella lähestymistavallamme. Aloita koodausmatkasi jo tänään! +Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavassa kurssissa. Jokainen 24 oppitunnista syventyy JavaScriptiin, CSS:ään ja HTML:ään käytännön projektien, kuten terrarionien, selainlaajennusten ja avaruuspeliensä kautta. Osallistu tietovisailuihin, keskusteluihin ja käytännön tehtäviin. Kehitä taitojasi ja optimoi oppimisesi tehokkaan projektioppimisen menetelmämme avulla. Aloita koodausmatkasi jo tänään! -Liity Azure AI Foundry Discord -yhteisöön +Liity Azure AI Foundry Discord -yhteisöön -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Seuraa näitä ohjeita aloittaaksesi näiden resurssien käytön: -1. **Haarauta arkisto**: 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 arkisto**: `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) +Noudata näitä ohjeita 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 +### 🌐 Monikielinen tuki -#### Tuettu GitHub Actionin kautta (automaattinen ja aina ajan tasalla) +#### Tuettu GitHub Actionin kautta (Automaattinen & aina ajan tasalla) - -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../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) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) - + +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../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)](../br/README.md) | [Portuguese (Portugal)](../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) -**Jos haluat lisätä uusia käännöksiä, tuetut kielet löytyvät [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +> **Haluatko kloonata paikallisesti?** -[![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) +> 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 +> 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' +> ``` +> Saat kaiken tarvitsemasi kurssin suorittamiseen huomattavasti nopeammalla latauksella. + -#### 🧑‍🎓 _Oletko opiskelija?_ +**Jos haluat lisää tuettuja käännöskieliä, ne on listattu [tässä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta löydät aloitteleville suunnattuja resursseja, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä sisältö vaihtuu kuukausittain. +[![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) -### 📣 Ilmoitus - Uusia GitHub Copilot Agent -haasteita! +#### 🧑‍🎓 _Oletko opiskelija?_ -Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa GitHub Copilotin ja Agent-tilan avulla. 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 paljon muuta. +Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), jolta löydät aloittelijan resurssit, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattikuponki. Tämä on sivu, jonka haluat lisätä kirjanmerkkeihin ja tarkistaa säännöllisesti, sillä päivitämme sisältöä kuukausittain. -### 📣 Ilmoitus - _Uusi projekti Generative AI:n avulla_ +### 📣 Ilmoitus - Uudet GitHub Copilot Agent -tilan haasteet suoritettaviksi! -Uusi AI Assistant -projekti on juuri lisätty, tutustu siihen [projekti](./09-chat-project/README.md) +Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge 🚀" useimmista luvuista. Tämä on uusi haaste, jonka suoritat GitHub Copilotin ja Agent-tilan avulla. Jos et ole käyttänyt Agent-tilaa aiemmin, se pystyy paitsi tuottamaan tekstiä, myös luomaan ja muokkaamaan tiedostoja, suorittamaan komentoja ja paljon muuta. -### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generative AI:sta JavaScriptille julkaistu +### 📣 Ilmoitus - _Uusi Generatiivisen tekoälyn projekti_ -Älä missaa uutta Generative AI -opetussuunnitelmaamme! +Uusi AI-avustajaprojekti juuri lisätty, tutustu projektiin [tästä](./9-chat-project/README.md) -Vieraile [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi! +### 📣 Ilmoitus - _Uusi opetussuunnitelma_ Generatiivisesta tekoälystä JavaScriptille julkaistu -![Tausta](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.fi.png) +Älä jää paitsi uudesta Generatiivisen AI:n opetussuunnitelmastamme! -- Oppitunteja, jotka kattavat kaiken perusteista RAG:iin. -- Keskustele historiallisten hahmojen kanssa GenAI:n ja kumppanisovelluksemme avulla. -- Hauska ja mukaansatempaava tarina, jossa matkustat ajassa! +Käy osoitteessa [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi! -![hahmo](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.fi.png) +![Background](../../translated_images/background.148a8d43afde5730.fi.png) -Jokainen oppitunti sisältää tehtävän, tietotestin ja haasteen, jotka ohjaavat sinua oppimaan aiheita, kuten: -- Kehotus ja kehotustekniikat -- Teksti- ja kuvasovellusten luominen -- Hakusovellukset +- Oppitunnit kattavat kaiken perusteista RAG:iin. +- Vuorovaikutus historiallisten hahmojen kanssa GenAI:n ja lisäsovelluksemme kautta. +- Hauska ja mukaansatempaava tarinankerronta, matkustat ajassa! -Vieraile [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) aloittaaksesi! +![character](../../translated_images/character.5c0dd8e067ffd693.fi.png) -## 🌱 Aloittaminen -> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) tämän opetussuunnitelman käyttöön. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +Jokaisessa oppitunnissa on tehtävä suoritettavaksi, tietoarviointi ja haaste, jotka ohjaavat sinua oppimaan aiheista kuten: +- Kehotteen kirjoittaminen ja kehoteinsinööritys +- Teksti- ja kuva-applikaatioiden generointi +- Hakusovellukset -**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaisessa oppitunnissa aloita ennakkotestillä ja jatka lukemalla oppimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkista ymmärryksesi jälkitestillä. +Käy osoitteessa [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) aloittaaksesi! -Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa työskennelläksesi projekteissa yhdessä! Keskustelut ovat tervetulleita [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi. -Jatkaaksesi oppimistasi suosittelemme tutustumaan [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) -sivustoon lisämateriaalien löytämiseksi. -### 📋 Ympäristön asettaminen +## 🌱 Aloittaminen -Tämä opetussuunnitelma sisältää valmiin kehitysympäristön! Aloittaessasi voit valita, haluatko suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (_selaimessa toimiva ympäristö, ei asennuksia tarvita_) vai paikallisesti tietokoneellasi käyttämällä tekstieditoria, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) siitä, miten tätä opetussuunnitelmaa voi käyttää. Haluaisimme saada palautetta [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -#### Luo oma arkistosi -Jotta voit helposti tallentaa työsi, suosittelemme luomaan oman kopion tästä arkistosta. Voit tehdä tämän klikkaamalla **Käytä tätä mallia** -painiketta sivun yläosassa. Tämä luo uuden arkiston GitHub-tilillesi kopiona opetussuunnitelmasta. +**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaista oppituntia varten aloita esiluentotestillä ja jatka luentomateriaalin lukemisella, erilaisten aktiviteettien suorittamisella ja tarkista ymmärryksesi jälkiluentotestillä. -Seuraa näitä ohjeita: -1. **Haarauta arkisto**: Klikkaa "Fork"-painiketta tämän sivun oikeassa yläkulmassa. -2. **Kloonaa arkisto**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Paranna oppimiskokemustasi yhdistämällä vertaisryhmiesi kanssa projektityöhön! Keskusteluja suositellaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi. -#### Opetussuunnitelman suorittaminen Codespacessa +Jatkaaksesi opiskelua suosittelemme vahvasti tutustumaan [Microsoft Learniin](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) lisäoppimateriaalien saamiseksi. -Omassa kopiossasi tästä arkistosta, jonka loit, klikkaa **Code**-painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit työskennellä. +### 📋 Ympäristön pystyttäminen -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.fi.png) +Tässä opetussuunnitelmassa on valmiiksi määritetty kehitysympäristö! Voit aloittaessasi valita suorittavasi opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (_selainnäkymäinen, asennuksia ei tarvita_), tai paikallisesti tietokoneellasi tekstieditorilla, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Opetussuunnitelman suorittaminen paikallisesti tietokoneellasi +#### Luo oma repositoriosi +Työsi tallentamisen helpottamiseksi on suositeltavaa luoda oma kopiosi tästä repositoriosta. Voit tehdä sen klikkaamalla sivun ylälaidasta kohtaa **Use this template**. Tämä luo uuden repositorion GitHub-tilillesi kopiona opetussuunnitelmasta. -Suorittaaksesi tämän opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Johdanto ohjelmointikieliin ja työkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat työkalut. +Noudata näitä ohjeita: +1. **Forkkaa repositorio**: Klikkaa oikeasta yläkulmasta "Fork". +2. **Kloonaa repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myös sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +#### Opetussuunnitelman suorittaminen Codespacessa -1. Kloonaa arkistosi tietokoneellesi. Voit tehdä tämän klikkaamalla **Code**-painiketta ja kopioimalla URL-osoitteen: +Omassa kopiossasi tästä repositoriosta, jonka loit, klikkaa **Code** ja valitse **Open with Codespaces**. Tämä luo sinulle uuden Codespace-työtilan. - [CodeSpace](./images/createcodespace.png) +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.fi.png) - Avaa sitten [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: +#### Opetussuunnitelman suorittaminen paikallisesti tietokoneella + +Jos haluat suorittaa opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityökalun. Ensimmäinen oppituntimme, [Ohjelmointikieliin ja työkaluisiin perehtyminen](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehdoissa kuhunkin näistä työkaluista, jotta voit valita sinulle parhaiten sopivat. + +Suosittelemme käyttämään editorina [Visual Studio Codea](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), joka sisältää myös sisäänrakennetun [Päätteen](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 repositoriosi tietokoneellesi. Voit tehdä tämän klikkaamalla **Code** ja kopioimalla URL-osoitteen: + + [CodeSpace](./images/createcodespace.png) +Sitten avaa [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -sovelluksessa ja suorita seuraava komento korvaten `` äsken kopioimallasi URL-osoitteella: ```bash git clone ``` - -2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän klikkaamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion. -> 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) - auttaa sinua kirjoittamaan koodia nopeammin +2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän valitsemalla **File** > **Open Folder** ja valitsemalla juuri kloonatun kansion. + + +> Suositellut Visual Studio Code -laajennukset: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun suoraan Visual Studio Codessa +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttamaan koodin kirjoittamisessa nopeammin ## 📂 Jokainen oppitunti sisältää: -- valinnainen luonnosmuistiinpano -- valinnainen lisävideo -- alkulämmittelykysely ennen oppituntia -- kirjallinen oppitunti -- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen -- tietojen tarkistukset -- haaste +- valinnaisen muistion +- valinnaisen lisävideo +- ennakkoharjoituksen / lämmittelykyselyn +- kirjallisen oppitunnin +- projektipohjaisissa oppitunneissa ohjeet projektin rakentamiseen vaihe vaiheelta +- tietotarkistuksia +- haasteen - lisälukemista -- tehtävä -- [kysely oppitunnin jälkeen](https://ff-quizzes.netlify.app/web/) +- tehtävän +- [jälkioppitunnin kyselyn](https://ff-quizzes.netlify.app/web/) -> **Huomio kyselyistä**: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [täällä](https://ff-quizzes.netlify.app/web/), ja kyselysovelluksen voi ajaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa. +> **Huomautus kyselyistä**: Kaikki kyselyt löytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [tässä](https://ff-quizzes.netlify.app/web/). Kyselysovellus voidaan suorittaa paikallisesti tai ottaa käyttöön Azureen; noudata ohjeita `quiz-app`-kansiossa. ## 🗃️ Oppitunnit -| | Projektin nimi | Opetettavat käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Aloitetaan | Johdatus ohjelmointiin ja työkaluihin | Opi ohjelmointikielten perusperiaatteet 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 | Aloitetaan | GitHubin perusteet, sisältää tiimityöskentelyn | 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 | Aloitetaan | Saavutettavuus | Opi verkkosaavutettavuuden perusteet | [Saavutettavuuden perusteet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS:n perusteet | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Tietotyypit](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS:n perusteet | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallintaan | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher | -| 06 | JS:n perusteet | Päätöksenteko JS:llä | Opi luomaan ehtoja koodissasi päätöksentekomenetelmien avulla | [Päätöksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS:n perusteet | Taulukot ja silmukat | Työskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terraario](./3-terrarium/solution/README.md) | HTML käytännössä | Rakenna HTML luodaksesi verkkoterraarion, keskittyen asettelun rakentamiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terraario](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylittääksesi verkkoterraarion, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terraario](./3-terrarium/solution/README.md) | JavaScriptin sulkeumat, DOM-manipulointi | Rakenna JavaScript, jotta terraario toimii vedä/pudota-käyttöliittymänä, keskittyen sulkeumiin ja DOM-manipulointiin | [JavaScriptin sulkeumat, DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Kirjoituspeli](./4-typing-game/solution/README.md) | Rakenna kirjoituspeli | Opi käyttämään näppäimistötapahtumia JavaScript-sovelluksesi logiikan ohjaamiseen | [Tapahtumapohjainen ohjelmointi](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opi, miten selaimet toimivat, niiden historia ja miten luoda selainlaajennuksen ensimmäiset elementit | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallentaminen paikallisesti | Rakenna selainlaajennuksesi JavaScript-elementit kutsumaan API:a käyttäen paikallisesti tallennettuja muuttujia | [API:t, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Avaruuspeli](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opi perimästä käyttäen sekä luokkia että koostumusta sekä Pub/Sub-mallia pelin rakentamisen valmistelussa | [Johdatus edistyneeseen pelikehitykseen](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Avaruuspeli](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opi Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Piirtäminen kankaalle](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Avaruuspeli](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytöllä | Opi, miten elementit voivat liikkua käyttäen koordinaatistoa ja Canvas API:a | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Avaruuspeli](./6-space-game/solution/README.md) | Törmäyksen tunnistus | Tee elementeistä törmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi | [Törmäyksen tunnistus](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Avaruuspeli](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Avaruuspeli](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit verkkosovelluksessa | Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta käyttäen reititystä ja HTML-malleja | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröintilomakkeen rakentaminen | Opi rakentamaan lomakkeita ja käsittelemään validointirutiineja | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakemisen ja käytön menetelmät | Miten data virtaa sovellukseesi, miten sitä haetaan, tallennetaan ja hävitetään | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Pankkisovellus](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Selain/VSCode-koodi](../../8-code-editor) | Työskentely VSCode:lla | Opi käyttämään koodieditoria | [Käytä VSCode-koodieditoria](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI-avustajat](./9-chat-project/README.md) | Työskentely tekoälyn kanssa | Opi rakentamaan oma tekoälyavustaja | [Tekoälyavustajaprojekti](./9-chat-project/README.md) | Chris | +| | Projektin nimi | Opitut käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä | +| :-: | :--------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Aloittaminen | Johdatus ohjelmointiin ja työkaluihin | Opit ohjelmointikielten perustan ja ohjelmistot, jotka auttavat ammattilaisia työssään | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Aloittaminen | GitHubin perusteet, myös tiimityöskentely | Kuinka käyttää GitHubia projektissa ja miten tehdä yhteistyötä koodipohjalla | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Aloittaminen | Esteettömyys | Opit verkkosivujen esteettömyyden perusteet | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | JavaScriptin tietotyypit | JavaScriptin tietotyyppien perusteet | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | Funktiot ja metodit | Opit sovelluksen logiikan hallinnan funktioiden ja metodien avulla | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher | +| 06 | JS Basics | Päätöksenteko JavaScriptillä | Kuinka luoda ehtoja koodissasi päätöksentekomenetelmien avulla | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | Taulukot ja silmukat | Työskentele datan kanssa taulukoiden ja silmukoiden avulla JavaScriptissä | [Arrays and Loops](./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 layoutin rakentamiseen | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännössä | Rakenna CSS tyylittääksesi online-terraariumia, keskittyen CSS:n perusteisiin mukaan lukien sivun responsiivisuuden tekemisen | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptin sulut (closures), DOM-manipulointi | Rakenna JavaScript, joka tekee terraariumista toimivan drag/drop-käyttöliittymän, keskittyen sulkuihin ja DOM-manipulointiin | [JavaScript Closures, DOM manipulation](./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-sovelluksen logiikan ohjaamiseen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Työskentely selainten kanssa | Opit, miten selaimet toimivat, niiden historian ja miten luoda ensimmäiset elementit selaimen laajennukseen | [About Browsers](./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 paikalliseen muistiin | Rakenna selaimen laajennuksen JavaScript-elementit API:n kutsumiseen käyttäen muuttujiin tallennettuja paikalliseen muistiin | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosivuston suorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi web-suorituskyvystä ja optimoinnista | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opit periytymisestä luokkien ja koostumisen avulla sekä Pub/Sub-kuvion, valmistautuen pelin rakentamiseen | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Piirtäminen kankaalle | Opit Canvas API:sta, jota käytetään elementtien piirtämiseen näytölle | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Elementtien liikuttaminen ruudulla | Opi, miten elementtejä voi liikuttaa kartesisilla koordinaateilla ja Canvas API:lla | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Törmäyksentunnistus | Tee elementeistä törmäileviä ja reagoivia toisiinsa näppäinpainallusten avulla, ja lisää cooldown-funktio pelin suorituskyvyn varmistamiseksi | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Pisteiden kirjaaminen | Suorita matemaattisia laskuja pelin tilan ja suorituskyvyn mukaan | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Pelin lopetus ja uudelleenkäynnistys | Opit pelin lopettamisesta ja uudelleenkäynnistyksestä, mukaan lukien resurssien siistimisestä ja muuttujien nollaamisesta | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallit ja reititykset web-sovelluksessa | Opit rakentamaan monisivuisen verkkosivuston arkkitehtuurin reitityksen ja HTML-mallien avulla | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisteröitymislomakkeen rakentaminen | Opit lomakkeiden rakentamisesta ja validointirutiinien hallinnasta | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Tietojen hakemisen ja käytön menetelmät | Kuinka tieto virtaa sovellukseen ja sieltä ulos, miten hakea, tallentaa ja poistaa sitä | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opit, kuinka sovelluksesi säilyttää tilaa ja miten sitä hallitaan ohjelmallisesti | [State Management](./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 | [Use VScode Code Editor](./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 Assistant project](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogiikka -Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti: +Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaan: * projektipohjainen oppiminen -* toistuvat kyselyt +* usein toistuvat kyselyt -Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat työkalut ja tekniikat, joita nykypäivän verkkokehittäjät käyttävät. Opiskelijat saavat käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terraarion, ympäristöystävällisen selainlaajennuksen, avaruusinvader-tyylisen pelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä. +Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä viimeisimmät työkalut ja tekniikat, joita nykyiset web-kehittäjät käyttävät. Oppilaat pääsevät kehittämään käytännön kokemusta rakentamalla kirjoituspelin, virtuaalisen terraariumin, ympäristöystävällisen selaimen laajennuksen, avaruuslainen henkisen pelin ja pankkisovelluksen yrityksille. Sarjan lopussa oppilaat ovat saaneet vankan ymmärryksen web-kehityksestä. -> 🎓 Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kurssina 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) -polun kautta! -Varmistamalla, että sisältö liittyy projekteihin, prosessi on opiskelijoille kiinnostavampi ja käsitteiden muistaminen paranee. Kirjoitimme myös useita JavaScriptin perusteisiin liittyviä aloitusoppitunteja käsitteiden esittelemiseksi, yhdistettynä videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalikokoelmasta, joiden tekijät osallistuivat tämän opetussuunnitelman laatimiseen. +Varmistamalla, että sisältö vastaa projekteja, prosessi on opiskelijoille mielekkäämpi ja käsitteiden muistaminen tehostuu. Kirjoitimme lisäksi useita aloitusoppitunteja JavaScriptin perusteista esitelläksemme käsitteitä, yhdistettynä videoihin "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videokokoelmasta, joiden tekijät osallistuivat tähän opetussuunnitelmaan. -Lisäksi matalan kynnyksen kysely ennen oppituntia suuntaa opiskelijan huomion aiheen oppimiseen, kun taas toinen kysely oppitunnin jälkeen varmistaa paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä. +Lisäksi oppituntia edeltävä matalariskinen kysely asettaa opiskelijalle opiskeluaiheen tavoitteen, ja oppitunnin jälkeinen toinen kysely varmistaa jatkumon. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaisuudessaan tai osittain. Projektit alkavat pieninä ja muuttuvat yhä vaativammiksi 12 viikon aikana. -Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme verkkokehittäjänä tarvittaviin perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi oppia Node.js:stä toisen videosarjan kautta: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Vaikka tarkoituksella olemme välttäneet JavaScript-kirjastojen käyttöönottoa keskittyäksemme verkkokehittäjän perustaitoihin ennen kehysten käyttöönottoa, hyvä seuraava askel tämän opetussuunnitelman jälkeen olisi oppia Node.js:stä toisen videokokoelman kautta: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Tutustu [käytännesääntöihimme](CODE_OF_CONDUCT.md) ja [ohjeisiin osallistumiseen](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi! +> Tutustu [käyttäytymissääntöihimme](CODE_OF_CONDUCT.md) ja [osallistumisohjeisiin](CONTRIBUTING.md). Arvostamme rakentavaa palautettasi! ## 🧭 Offline-käyttö -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 repon juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 localhostissasi: `localhost:3000`. +Voit käyttää tätä dokumentaatiota offline-tilassa käyttämällä [Docsify](https://docsify.js.org/#/). Haarauta tämä repositorio, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja siirry tämän repositorion juurikansioon, kirjoita `docsify serve`. Sivusto palvelee portissa 3000 paikallisessa koneessasi: `localhost:3000`. ## 📘 PDF -Kaikkien oppituntien PDF löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +PDF-versio kaikista oppitunneista löytyy [täältä](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Muut kurssit - Tiimimme tuottaa myös muita kursseja! Tutustu: -### 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 aloittelijoille](https://img.shields.io/badge/Edge%20AI%20aloittelijoille-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP aloittelijoille](https://img.shields.io/badge/MCP%20aloittelijoille-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI-agentit aloittelijoille](https://img.shields.io/badge/AI%20agentit%20aloittelijoille-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +### LangChain +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Generatiivisen tekoälyn sarja -[![Generatiivinen tekoäly aloittelijoille](https://img.shields.io/badge/Generatiivinen%20tekoäly%20aloittelijoille-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Generatiivinen tekoäly (.NET)](https://img.shields.io/badge/Generatiivinen%20tekoäly%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) -[![Generatiivinen tekoäly (Java)](https://img.shields.io/badge/Generatiivinen%20tekoäly%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) -[![Generatiivinen tekoäly (JavaScript)](https://img.shields.io/badge/Generatiivinen%20tekoäly%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +### 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) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - -### Keskeiset oppimateriaalit -[![ML aloittelijoille](https://img.shields.io/badge/ML%20aloittelijoille-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Data-analytiikka aloittelijoille](https://img.shields.io/badge/Data-analytiikka%20aloittelijoille-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![Tekoäly aloittelijoille](https://img.shields.io/badge/Tekoäly%20aloittelijoille-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Kyberturvallisuus aloittelijoille](https://img.shields.io/badge/Kyberturvallisuus%20aloittelijoille-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Web-kehitys aloittelijoille](https://img.shields.io/badge/Web-kehitys%20aloittelijoille-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT aloittelijoille](https://img.shields.io/badge/IoT%20aloittelijoille-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![XR-kehitys aloittelijoille](https://img.shields.io/badge/XR-kehitys%20aloittelijoille-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) + +### 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) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- + +### 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) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) -### Copilot-sarja -[![Copilot tekoälyavusteiseen ohjelmointiin](https://img.shields.io/badge/Copilot%20tekoälyavusteiseen%20ohjelmointiin-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot C#/.NET:lle](https://img.shields.io/badge/Copilot%20C%23/.NET:lle-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-seikkailu](https://img.shields.io/badge/Copilot-seikkailu-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +--- + +### 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 saatavilla +## Apua saatavana -Jos jäät jumiin tai sinulla on kysymyksiä tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukevainen yhteisö, jossa kysymykset ovat tervetulleita ja tietoa jaetaan avoimesti. +Jos jumitut tai sinulla on kysyttävää tekoälysovellusten rakentamisesta. Liity muiden 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) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Jos sinulla on tuotepalautetta tai virheitä rakentamisen aikana, vieraile: +Jos sinulla on tuotepalaute tai kohtaat virheitä rakentamisen aikana, käy: -[![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) +[![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 +## Lisenssi -Tämä arkisto on lisensoitu MIT-lisenssillä. Katso [LICENSE](../../LICENSE) tiedosto saadaksesi lisätietoja. +Tämä arkisto on lisensoitu MIT-lisenssillä. Lisätietoja löydät 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, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. 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ä. +Tämä asiakirja on käännetty tekoälypohjaisella käännöspalvelulla [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, automaattisissa käännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen omalla kielellä tulee pitää virallisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista. \ No newline at end of file diff --git a/translations/fi/for-teachers.md b/translations/fi/for-teachers.md index cc768873e..6a7cdc6bb 100644 --- a/translations/fi/for-teachers.md +++ b/translations/fi/for-teachers.md @@ -42,10 +42,10 @@ Tämä opetusohjelma sisältää tuontipaketteja yleisiin LMS-työnkulkuihin. - Moodle Cloud tukee rajoitetusti Common Cartridgea. Suosi yllä olevaa Moodle-tiedostoa, joka voidaan myös ladata Canvasiin. - Tuonnin jälkeen tarkista moduulit, määräajat ja visailuasetukset, jotta ne vastaavat lukukautesi aikataulua. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.fi.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.fi.png) > Opetusohjelma Moodle-luokassa -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.fi.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.fi.png) > Opetusohjelma Canvasissa ### Repositorion käyttö suoraan (ilman Classroomia) diff --git a/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 468153e78..9482dda99 100644 --- a/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Luister, ik snap het helemaal als programmeren nu nog intimiderend lijkt. Toen i Vandaag gaan we de geweldige tools verkennen die moderne webontwikkeling niet alleen mogelijk maken, maar ook verslavend leuk. Ik heb het over dezelfde editors, browsers en workflows die ontwikkelaars bij Netflix, Spotify en je favoriete indie-appstudio elke dag gebruiken. En hier komt het deel dat je een vreugdedansje laat doen: de meeste van deze professionele, industrienorm-tools zijn helemaal gratis! -![Intro Programmering](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.nl.png) +![Intro Programmering](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/1-getting-started-lessons/2-github-basics/README.md b/translations/nl/1-getting-started-lessons/2-github-basics/README.md index e798519a3..3ca3bdaf3 100644 --- a/translations/nl/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/nl/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Ik weet dat dit in het begin misschien wat overweldigend lijkt – ik herinner m We gaan deze reis samen maken, stap voor stap. Geen haast, geen druk – alleen jij, ik, en een paar echt coole tools die je nieuwe beste vrienden gaan worden! -![Intro tot GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.nl.png) +![Intro tot GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -604,7 +604,7 @@ Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert ✅ Een goede manier om 'beginner-vriendelijke' repos te vinden is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Een repo lokaal kopiëren](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.nl.png) +![Een repo lokaal kopiëren](../../../../translated_images/clone_repo.5085c48d666ead57.nl.png) Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "clonen", met behulp van HTTPS, SSH, of de GitHub CLI (Command Line Interface). diff --git a/translations/nl/1-getting-started-lessons/3-accessibility/README.md b/translations/nl/1-getting-started-lessons/3-accessibility/README.md index a9b1b5a5a..9d272dcd0 100644 --- a/translations/nl/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/nl/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Toegankelijke Webpagina's Maken -![Alles Over Toegankelijkheid](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.nl.png) +![Alles Over Toegankelijkheid](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/2-js-basics/1-data-types/README.md b/translations/nl/2-js-basics/1-data-types/README.md index 572b432eb..468526c0f 100644 --- a/translations/nl/2-js-basics/1-data-types/README.md +++ b/translations/nl/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basisprincipes: Gegevenstypen -![JavaScript Basisprincipes - Gegevenstypen](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.nl.png) +![JavaScript Basisprincipes - Gegevenstypen](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/2-js-basics/2-functions-methods/README.md b/translations/nl/2-js-basics/2-functions-methods/README.md index 3f3418dd0..02ef9a8ae 100644 --- a/translations/nl/2-js-basics/2-functions-methods/README.md +++ b/translations/nl/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basis: Methoden en Functies -![JavaScript Basis - Functies](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.nl.png) +![JavaScript Basis - Functies](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/2-js-basics/3-making-decisions/README.md b/translations/nl/2-js-basics/3-making-decisions/README.md index fd970f2ae..32cfe061a 100644 --- a/translations/nl/2-js-basics/3-making-decisions/README.md +++ b/translations/nl/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basis: Beslissingen nemen -![JavaScript Basis - Beslissingen nemen](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.nl.png) +![JavaScript Basis - Beslissingen nemen](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/nl/2-js-basics/4-arrays-loops/README.md b/translations/nl/2-js-basics/4-arrays-loops/README.md index f70a79619..6c808607f 100644 --- a/translations/nl/2-js-basics/4-arrays-loops/README.md +++ b/translations/nl/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basis: Arrays en Lussen -![JavaScript Basis - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.nl.png) +![JavaScript Basis - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/3-terrarium/1-intro-to-html/README.md b/translations/nl/3-terrarium/1-intro-to-html/README.md index 79868da97..35ba10759 100644 --- a/translations/nl/3-terrarium/1-intro-to-html/README.md +++ b/translations/nl/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Introductie tot HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.nl.png) +![Introductie tot HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) HTML, of HyperText Markup Language, is de basis van elke website die je ooit hebt bezocht. Zie HTML als het skelet dat structuur geeft aan webpagina's – het bepaalt waar de inhoud komt, hoe het georganiseerd is en wat elk onderdeel betekent. Terwijl CSS later je HTML "aankleedt" met kleuren en lay-outs, en JavaScript het tot leven brengt met interactiviteit, biedt HTML de essentiële structuur die alles mogelijk maakt. @@ -88,7 +88,7 @@ Je maakt een speciale map voor je terrariumproject en voegt je eerste HTML-besta 4. Klik in het Explorer-paneel op het pictogram "New File" 5. Noem je bestand `index.html` -![VS Code Explorer toont het maken van een nieuw bestand](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.nl.png) +![VS Code Explorer toont het maken van een nieuw bestand](../../../../translated_images/vs-code-index.e2986cf919471eb9.nl.png) **Optie 2: Gebruik Terminalcommando's** ```bash diff --git a/translations/nl/3-terrarium/2-intro-to-css/README.md b/translations/nl/3-terrarium/2-intro-to-css/README.md index adf656efd..9561a536a 100644 --- a/translations/nl/3-terrarium/2-intro-to-css/README.md +++ b/translations/nl/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Introductie tot CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.nl.png) +![Introductie tot CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) Weet je nog hoe je HTML-terrarium er vrij basic uitzag? Met CSS transformeren we die eenvoudige structuur tot iets visueel aantrekkelijks. @@ -205,7 +205,7 @@ body { Open de ontwikkelaarstools van je browser (F12), ga naar het tabblad Elements en inspecteer je `

`-element. Je zult zien dat het de lettertypefamilie van het body-element erft: -![geërfd lettertype](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.nl.png) +![geërfd lettertype](../../../../translated_images/1.cc07a5cbe114ad1d.nl.png) ✅ **Experimenteren**: Probeer andere overerfbare eigenschappen in te stellen op `` zoals `color`, `line-height` of `text-align`. Wat gebeurt er met je koptekst en andere elementen? @@ -599,7 +599,7 @@ Klaar om je terrarium te verbeteren met realistische glans op glas? Deze technie Je gaat subtiele highlights creëren die simuleren hoe licht reflecteert op glasoppervlakken. Deze aanpak is vergelijkbaar met hoe Renaissance-schilders zoals Jan van Eyck licht en reflectie gebruikten om geschilderd glas driedimensionaal te laten lijken. Dit is wat je wilt bereiken: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.nl.png) +![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.nl.png) **Jouw uitdaging:** - **Creëer** subtiele witte of lichtgekleurde ovale vormen voor de glans op het glas diff --git a/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md index 682cd68db..f54a11818 100644 --- a/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM en een closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.nl.png) +![DOM en een closure](../../../../translated_images/webdev101-js.10280393044d7eaa.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) Welkom bij een van de meest boeiende aspecten van webontwikkeling - interactief maken! Het Document Object Model (DOM) is als een brug tussen je HTML en JavaScript, en vandaag gaan we het gebruiken om je terrarium tot leven te brengen. Toen Tim Berners-Lee de eerste webbrowser creëerde, stelde hij zich een web voor waar documenten dynamisch en interactief konden zijn - de DOM maakt die visie mogelijk. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM boomrepresentatie](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.nl.png) +![DOM boomrepresentatie](../../../../translated_images/dom-tree.7daf0e763cbbba92.nl.png) > Een representatie van de DOM en de HTML-markup die ernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Closures begrijpen**: Closures zijn een belangrijk onderwerp in JavaScript, en veel ontwikkelaars gebruiken ze jarenlang voordat ze alle theoretische aspecten volledig begrijpen. Vandaag richten we ons op praktische toepassing - je zult zien dat closures natuurlijk ontstaan terwijl we onze interactieve functies bouwen. Begrip zal zich ontwikkelen naarmate je ziet hoe ze echte problemen oplossen. -![DOM boomrepresentatie](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.nl.png) +![DOM boomrepresentatie](../../../../translated_images/dom-tree.7daf0e763cbbba92.nl.png) > Een representatie van de DOM en de HTML-markup die ernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ Test nu jouw interactieve terrarium! Open je `index.html`-bestand in een webbrow - **Ondersteuning voor meerdere apparaten**: Werkt op desktop en mobiel - **Prestatiebewust**: Geen geheugenlekken of overbodige berekeningen -![afgewerkt terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.nl.png) +![afgewerkt terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.nl.png) --- diff --git a/translations/nl/3-terrarium/README.md b/translations/nl/3-terrarium/README.md index b92d9b6a4..72d29d144 100644 --- a/translations/nl/3-terrarium/README.md +++ b/translations/nl/3-terrarium/README.md @@ -1,45 +1,30 @@ -# Mijn Terrarium: Een project om te leren over HTML, CSS en DOM-manipulatie met JavaScript 🌵🌱 +## Zet je Terrarium in productie -Een kleine drag-and-drop code-meditatie. Met een beetje HTML, JS en CSS kun je een webinterface bouwen, deze stylen en zelfs meerdere interacties naar keuze toevoegen. +Je kunt je Terrarium publiceren op het web met behulp van **Azure Static Web Apps**. -![mijn terrarium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.nl.png) +1. Fork deze repo -# Lessen +2. Druk op deze knop 👇 -1. [Introductie tot HTML](./1-intro-to-html/README.md) -2. [Introductie tot CSS](./2-intro-to-css/README.md) -3. [Introductie tot DOM en JS Closures](./3-intro-to-DOM-and-closures/README.md) +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -## Credits - -Geschreven met ♥️ door [Jen Looper](https://www.twitter.com/jenlooper) - -Het terrarium gemaakt via CSS is geïnspireerd door Jakub Mandra's glazen pot [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). - -De illustraties zijn met de hand getekend door [Jen Looper](http://jenlooper.com) met behulp van Procreate. - -## Publiceer je Terrarium - -Je kunt je terrarium op het web publiceren met behulp van Azure Static Web Apps. - -1. Fork deze repository - -2. Druk op deze knop - -[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) - -3. Doorloop de wizard om je app te maken. Zorg ervoor dat je de app-root instelt op ofwel `/solution` of de root van je codebase. Er is geen API in deze app, dus daar hoef je je geen zorgen over te maken. Een GitHub-map wordt aangemaakt in je geforkte repository die Azure Static Web Apps' buildservices helpt om je app te bouwen en te publiceren naar een nieuwe URL. +3. Volg de setup wizard om je app te maken. + - Stel de **App root** in op `/solution` of de root van je codebase. + - Er is geen API in deze app, dus je kunt de API-configuratie overslaan. + - Er wordt automatisch een `.github`-map gemaakt om Azure Static Web Apps te helpen je app te bouwen en publiceren. --- + **Disclaimer**: -Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. \ No newline at end of file +Dit document is vertaald met behulp van de AI-vertalingsdienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het oorspronkelijke document in de originele taal moet worden beschouwd als de gezaghebbende bron. Voor belangrijke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor enige misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. + \ No newline at end of file diff --git a/translations/nl/3-terrarium/solution/README.md b/translations/nl/3-terrarium/solution/README.md index db2f30b70..50e8cbc6a 100644 --- a/translations/nl/3-terrarium/solution/README.md +++ b/translations/nl/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Een kleine drag-and-drop code-meditatie. Met een beetje HTML, JS en CSS kun je een webinterface bouwen, deze stylen en interactie toevoegen. -![mijn terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.nl.png) +![mijn terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.nl.png) ## Credits diff --git a/translations/nl/5-browser-extension/1-about-browsers/README.md b/translations/nl/5-browser-extension/1-about-browsers/README.md index 8880184a5..b7fc27548 100644 --- a/translations/nl/5-browser-extension/1-about-browsers/README.md +++ b/translations/nl/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.nl.jpg) +![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84a.nl.jpg) > Sketchnote door [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Pre-Les Quiz @@ -79,7 +79,7 @@ Dit proces weerspiegelt hoe de eerste webbrowser, WorldWideWeb, werd ontworpen d ✅ **Een beetje geschiedenis**: De eerste browser heette 'WorldWideWeb' en werd in 1990 gemaakt door Sir Timothy Berners-Lee. -![vroegtijdige browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.nl.jpg) +![vroegtijdige browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.nl.jpg) > Enkele vroegtijdige browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Hoe Browsers Webinhoud Verwerken @@ -198,7 +198,7 @@ quadrantChart Het begrijpen van het installatieproces van extensies helpt je de gebruikerservaring te anticiperen wanneer mensen je extensie installeren. Het installatieproces is gestandaardiseerd in moderne browsers, met kleine variaties in interfaceontwerp. -![screenshot van de Edge-browser die de open edge://extensions-pagina en het open instellingenmenu toont](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.nl.png) +![screenshot van de Edge-browser die de open edge://extensions-pagina en het open instellingenmenu toont](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.nl.png) > **Belangrijk**: Zorg ervoor dat je ontwikkelaarsmodus inschakelt en extensies van andere winkels toestaat bij het testen van je eigen extensies. @@ -313,10 +313,10 @@ Dit volgt het principe van progressieve onthulling dat sinds de vroege dagen van ### Overzicht van Extensie Weergaven **Setup Weergave** - Configuratie voor eerste gebruik: -![screenshot van de voltooide extensie geopend in een browser, met een formulier met invoervelden voor regio en API-sleutel.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.nl.png) +![screenshot van de voltooide extensie geopend in een browser, met een formulier met invoervelden voor regio en API-sleutel.](../../../../translated_images/1.b6da8c1394b07491.nl.png) **Resultaten Weergave** - Weergave van CO2-voetafdrukgegevens: -![screenshot van de voltooide extensie die waarden toont voor CO2-gebruik en percentage fossiele brandstoffen voor de regio US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.nl.png) +![screenshot van de voltooide extensie die waarden toont voor CO2-gebruik en percentage fossiele brandstoffen voor de regio US-NEISO.](../../../../translated_images/2.1dae52ff08042246.nl.png) ### Het Configuratieformulier Bouwen diff --git a/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md index fd02be7c3..d71a6e236 100644 --- a/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.nl.png) +![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d1.nl.png) > ⚠️ **Beveiligingsoverweging**: In productie-applicaties brengt het opslaan van API-sleutels in LocalStorage beveiligingsrisico's met zich mee, omdat JavaScript toegang heeft tot deze gegevens. Voor leerdoeleinden werkt deze aanpak prima, maar echte applicaties zouden veilige server-side opslag moeten gebruiken voor gevoelige inloggegevens. diff --git a/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md index 163ee40a1..fcf579929 100644 --- a/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Om Developer Tools in Edge te openen, klik je op die drie puntjes rechtsboven, g Laten we dit uitproberen. Open een website (Microsoft.com werkt goed hiervoor) en klik op die 'Opnemen'-knop. Vernieuw nu de pagina en bekijk hoe de profiler alles vastlegt wat er gebeurt. Wanneer je stopt met opnemen, zie je een gedetailleerde uitsplitsing van hoe de browser de site 'script', 'rendert' en 'schildert'. Het doet me denken aan hoe de missiecontrole elk systeem monitort tijdens een raketlancering - je krijgt realtime gegevens over precies wat er gebeurt en wanneer. -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.nl.png) +![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.nl.png) ✅ De [Microsoft Documentatie](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) heeft veel meer details als je dieper wilt duiken. @@ -136,11 +136,11 @@ Selecteer elementen van de profieltijdlijn om in te zoomen op gebeurtenissen die Krijg een momentopname van de prestaties van je pagina door een deel van de profieltijdlijn te selecteren en naar het samenvattingspaneel te kijken: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.nl.png) +![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.nl.png) Controleer het Event Log-paneel om te zien of een gebeurtenis langer dan 15 ms duurde: -![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.nl.png) +![Edge event log](../../../../translated_images/log.804026979f3707e0.nl.png) ✅ Leer je profiler kennen! Open de ontwikkelaarstools op deze site en kijk of er knelpunten zijn. Wat is het langzaamst ladende bestand? Het snelste? diff --git a/translations/nl/5-browser-extension/README.md b/translations/nl/5-browser-extension/README.md index 6d7d96d89..e596aba6b 100644 --- a/translations/nl/5-browser-extension/README.md +++ b/translations/nl/5-browser-extension/README.md @@ -23,7 +23,7 @@ Deze extensie kan ad hoc door een gebruiker worden opgeroepen zodra een API-sleu ### Credits -![een groene browserextensie](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png) +![een groene browserextensie](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.nl.png) ## Credits diff --git a/translations/nl/5-browser-extension/solution/README.md b/translations/nl/5-browser-extension/solution/README.md index a4e8def4b..469fff378 100644 --- a/translations/nl/5-browser-extension/solution/README.md +++ b/translations/nl/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik bij te houden en bouw een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie. -![extensie screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png) +![extensie screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.nl.png) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om de extensie op Edge te installeren, gebruik je het menu met de 'drie stippen' rechtsboven in de browser om het Extensies-paneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO'). -![installeren](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png) +![installeren](../../../../translated_images/install-on-edge.78634f02842c4828.nl.png) Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Het geeft je een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.fr.md b/translations/nl/5-browser-extension/solution/translation/README.fr.md index 2f1ab9638..5eb63c837 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.fr.md +++ b/translations/nl/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, maak je een browserextensie zodat je direct in je browser een herinnering kunt krijgen over het elektriciteitsverbruik in jouw regio. Het gebruik van deze ad-hoc extensie helpt je om je activiteiten te beoordelen op basis van deze informatie. -![extensie screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png) +![extensie screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.nl.png) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Selecteer daar 'Uitgepakte extensie laden' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er hier een via e-mail](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO'). -![installatie](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png) +![installatie](../../../../../translated_images/install-on-edge.78634f02842c4828.nl.png) Zodra de API-sleutel en de regio zijn ingevoerd in de extensie-interface, zou het gekleurde puntje in de extensiebalk van de browser moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten op dat moment geschikt zijn. Het concept achter dit 'puntensysteem' is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.hi.md b/translations/nl/5-browser-extension/solution/translation/README.hi.md index 9fbb7c7e8..a4b81cf42 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.hi.md +++ b/translations/nl/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, bouwen we een browser-extensie die je eraan herinnert hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie te gebruiken, kun je op basis van deze informatie beslissingen nemen over je activiteiten. -![Extensie Screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png) +![Extensie Screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.nl.png) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om te installeren in Edge, gebruik het 'drie-puntjes'-menu in de rechterbovenhoek van de browser om het extensiepaneel te vinden. Kies daar 'Ongepakte extensie laden'. Open de 'dist'-map in de prompt en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijgbaar via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) van [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston gebruik ik 'US-NEISO'). -![installeren](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png) +![installeren](../../../../../translated_images/install-on-edge.78634f02842c4828.nl.png) Zodra de API-sleutel en regio in de extensie-interface zijn ingevoerd, zou de gekleurde stip in de browser-extensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten geschikt zijn op dat moment. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.it.md b/translations/nl/5-browser-extension/solution/translation/README.it.md index 81fa7197e..5d1464ae0 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.it.md +++ b/translations/nl/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: We zullen de Signal CO2 API van tmrow gebruiken om het elektriciteitsverbruik te monitoren en een browserextensie te maken. Zo kun je direct in je browser een herinnering krijgen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze op maat gemaakte extensie helpt je om je activiteiten te evalueren op basis van deze informatie. -![screenshot van de extensie](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png) +![screenshot van de extensie](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.nl.png) ## Aan de Slag @@ -31,7 +31,7 @@ npm run build Om de extensie in Edge te installeren, gebruik je het menu met de "drie puntjes" in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Als het nog niet is ingeschakeld, zet dan de Ontwikkelaarsmodus aan (linksonder). Selecteer "Uitgepakte extensie laden" om een nieuwe extensie te laden. Open de map "dist" in het prompt, en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API (je kunt er [hier via e-mail een krijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [elektriciteitskaart](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston is dat "US-NEISO"). -![installatie](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png) +![installatie](../../../../../translated_images/install-on-edge.78634f02842c4828.nl.png) Zodra de API-sleutel en de regio zijn ingevoerd in de interface van de extensie, zou het gekleurde puntje in de browserextensiebalk moeten veranderen om het energieverbruik van de regio weer te geven. Het biedt ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit "puntensysteem" is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.ja.md b/translations/nl/5-browser-extension/solution/translation/README.ja.md index 84c2bf8bd..8f0bf2a52 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.ja.md +++ b/translations/nl/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Bouw een browserextensie die, met behulp van de CO2 Signal API van tmrow, het energieverbruik in jouw regio bijhoudt en dit als een herinnering op je browser weergeeft. Door deze extensie ad-hoc te gebruiken, kun je je activiteiten baseren op deze informatie. -![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png) +![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.nl.png) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om de extensie in Edge te installeren, ga je naar het "drie stippen"-menu rechtsboven in de browser en zoek je het paneel "Extensies". Kies daar "Load Unpacked" en laad de nieuwe extensie. Wanneer je wordt gevraagd, open je de "dist"-map om de extensie te laden. Om de extensie te gebruiken, heb je een API-sleutel van de CO2 Signal API nodig ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en een [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, voor Boston gebruik je 'US-NEISO'). -![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png) +![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.nl.png) Wanneer je de API-sleutel en regio invoert in de extensie-interface, verandert de gekleurde stip die in de extensiebalk van je browser wordt weergegeven. Deze stip weerspiegelt het energieverbruik in jouw regio en geeft aan welke activiteiten geschikt zijn op basis van het energieverbruik. Het concept van dit "stip"-systeem is geïnspireerd door de [Energy Lollipop extension](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.ms.md b/translations/nl/5-browser-extension/solution/translation/README.ms.md index 2d54e7b66..badb1ae0a 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.ms.md +++ b/translations/nl/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik te monitoren en bouw een browserextensie waarmee je waarschuwingen kunt ontvangen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze extensie helpt je om je activiteiten beter af te stemmen op deze informatie. -![screenshot van browserextensie](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png) +![screenshot van browserextensie](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.nl.png) ## Aan de Slag @@ -31,7 +31,7 @@ npm run build Om de extensie in Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Kies daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er een via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO'). -![bezig met downloaden](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png) +![bezig met downloaden](../../../../../translated_images/install-on-edge.78634f02842c4828.nl.png) Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zal de gekleurde stip in de browserextensiebalk veranderen om het energieverbruik in jouw regio weer te geven en je een indicatie geven van welke zware activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door [de Energy Lollipop browserextensie](https://energylollipop.com/) voor de uitstoot in Californië. diff --git a/translations/nl/5-browser-extension/start/README.md b/translations/nl/5-browser-extension/start/README.md index d9bfd47ae..cfe136736 100644 --- a/translations/nl/5-browser-extension/start/README.md +++ b/translations/nl/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Met behulp van de CO2 Signal API van tmrow om elektriciteitsgebruik bij te houden, bouw je een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsgebruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie. -![extensie screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.nl.png) +![extensie screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.nl.png) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' rechtsboven in de browser om het Extensiepaneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier aanvragen via e-mail](https://www.co2signal.com/) - voer je e-mailadres in op deze pagina) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO'). -![installeren](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.nl.png) +![installeren](../../../../translated_images/install-on-edge.78634f02842c4828.nl.png) Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energiegebruik in jouw regio weer te geven. Het geeft je ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/6-space-game/2-drawing-to-canvas/README.md b/translations/nl/6-space-game/2-drawing-to-canvas/README.md index 5cafcaa04..a30c83fed 100644 --- a/translations/nl/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/nl/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![het raster van de canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.nl.png) +![het raster van de canvas](../../../../translated_images/canvas_grid.5f209da785ded492.nl.png) > Afbeelding van [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Om op het canvas-element te tekenen, volg je hetzelfde drie-stappenproces dat de basis vormt van alle canvasgraphics. Zodra je dit een paar keer hebt gedaan, wordt het een tweede natuur: @@ -329,11 +329,11 @@ Je gaat een webpagina maken met een Canvas-element. Het moet een zwart scherm va - Heldenschip - ![Heldenschip](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.nl.png) + ![Heldenschip](../../../../translated_images/player.dd24c1afa8c71e9b.nl.png) - 5*5 monster - ![Monsterschip](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.nl.png) + ![Monsterschip](../../../../translated_images/enemyShip.5df2a822c16650c2.nl.png) ### Aanbevolen stappen om te beginnen met ontwikkelen @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Het eindresultaat zou er zo uit moeten zien: -![Zwart scherm met een held en 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.nl.png) +![Zwart scherm met een held en 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a.nl.png) ## Oplossing diff --git a/translations/nl/6-space-game/5-keeping-score/README.md b/translations/nl/6-space-game/5-keeping-score/README.md index 394c1311f..a0645da0e 100644 --- a/translations/nl/6-space-game/5-keeping-score/README.md +++ b/translations/nl/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Puntensysteem**: Elk vernietigd vijandelijk schip levert 100 punten op (ronde getallen zijn gemakkelijker voor spelers om mentaal te berekenen). De score wordt weergegeven in de linkerbenedenhoek. -- **Leventeller**: Je held begint met drie levens - een standaard die door vroege arcadespellen werd vastgesteld om uitdaging en speelbaarheid in balans te brengen. Elke botsing met een vijand kost één leven. We tonen de resterende levens in de rechterbenedenhoek met scheepsiconen ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.nl.png). +- **Leventeller**: Je held begint met drie levens - een standaard die door vroege arcadespellen werd vastgesteld om uitdaging en speelbaarheid in balans te brengen. Elke botsing met een vijand kost één leven. We tonen de resterende levens in de rechterbenedenhoek met scheepsiconen ![life image](../../../../translated_images/life.6fb9f50d53ee0413.nl.png). ## Laten we beginnen met bouwen! diff --git a/translations/nl/7-bank-project/1-template-route/README.md b/translations/nl/7-bank-project/1-template-route/README.md index a4d633763..fdf4f7a7d 100644 --- a/translations/nl/7-bank-project/1-template-route/README.md +++ b/translations/nl/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram Het gebruik van `history.pushState` creëert nieuwe invoeren in de navigatiegeschiedenis van de browser. Je kunt dat controleren door de *terugknop* van je browser ingedrukt te houden, het zou er ongeveer zo uit moeten zien: -![Screenshot van navigatiegeschiedenis](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.nl.png) +![Screenshot van navigatiegeschiedenis](../../../../translated_images/history.7fdabbafa521e064.nl.png) Als je een paar keer op de terugknop klikt, zie je dat de huidige URL verandert en de geschiedenis wordt bijgewerkt, maar dezelfde template blijft worden weergegeven. diff --git a/translations/nl/7-bank-project/2-forms/README.md b/translations/nl/7-bank-project/2-forms/README.md index 90f15776b..b146386bb 100644 --- a/translations/nl/7-bank-project/2-forms/README.md +++ b/translations/nl/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Laten we eerst observeren wat er gebeurt bij een basisformulierverzending: 2. Observeer de veranderingen in de adresbalk van je browser 3. Merk op hoe de pagina opnieuw laadt en gegevens in de URL verschijnen -![Screenshot van de URL-verandering in de browser na het klikken op de Registreren-knop](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.nl.png) +![Screenshot van de URL-verandering in de browser na het klikken op de Registreren-knop](../../../../translated_images/click-register.e89a30bf0d4bc9ca.nl.png) ### Vergelijking van HTTP-methoden @@ -350,7 +350,7 @@ Laten we je registratieformulier configureren om correct te communiceren met de 2. **Klik** op de knop "Account aanmaken" 3. **Observeer** de serverrespons in je browser -![Een browservenster op het adres localhost:5000/api/accounts, met een JSON-string met gebruikersgegevens](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.nl.png) +![Een browservenster op het adres localhost:5000/api/accounts, met een JSON-string met gebruikersgegevens](../../../../translated_images/form-post.61de4ca1b964d91a.nl.png) **Wat je zou moeten zien:** - **Browser verwijst** naar de API-eindpunt-URL @@ -615,7 +615,7 @@ async function register() { 3. **Klik** op "Account aanmaken" 4. **Observeer** de consoleberichten en gebruikersfeedback -![Screenshot met logbericht in de browserconsole](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.nl.png) +![Screenshot met logbericht in de browserconsole](../../../../translated_images/browser-console.efaf0b51aaaf6778.nl.png) **Wat je zou moeten zien:** - **Laadstatus** verschijnt op de verzendknop @@ -790,7 +790,7 @@ Laten we je registratieformulier verbeteren met robuuste validatie die een uitst 3. **Probeer** speciale tekens in het gebruikersnaamveld 4. **Voer** een negatief saldo in -![Screenshot met validatiefout bij het proberen het formulier in te dienen](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.nl.png) +![Screenshot met validatiefout bij het proberen het formulier in te dienen](../../../../translated_images/validation-error.8bd23e98d416c22f.nl.png) **Wat je zult zien:** - **Browser toont** native validatiemeldingen @@ -952,7 +952,7 @@ Toon een foutmelding in de HTML als de gebruiker al bestaat. Hier is een voorbeeld van hoe de uiteindelijke inlogpagina eruit kan zien na wat styling: -![Screenshot van de inlogpagina na het toevoegen van CSS-stijlen](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.nl.png) +![Screenshot van de inlogpagina na het toevoegen van CSS-stijlen](../../../../translated_images/result.96ef01f607bf856a.nl.png) ## Quiz na de les diff --git a/translations/nl/7-bank-project/3-data/README.md b/translations/nl/7-bank-project/3-data/README.md index 90f22799f..5d91afa73 100644 --- a/translations/nl/7-bank-project/3-data/README.md +++ b/translations/nl/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Update workflow in een multi-page applicatie](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.nl.png) +![Update workflow in een multi-page applicatie](../../../../translated_images/mpa.7f7375a1a2d4aa77.nl.png) **Waarom deze aanpak onhandig aanvoelde:** - Elke klik betekende dat de hele pagina opnieuw moest worden opgebouwd @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Update workflow in een single-page applicatie](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.nl.png) +![Update workflow in een single-page applicatie](../../../../translated_images/spa.268ec73b41f992c2.nl.png) **Waarom SPA's zoveel beter aanvoelen:** - Alleen de delen die daadwerkelijk zijn veranderd worden bijgewerkt (slim, toch?) @@ -523,7 +523,7 @@ if (data.error) { Nu, wanneer je test met een ongeldig account, zie je een nuttige foutmelding direct op de pagina! -![Screenshot van de foutmelding die wordt weergegeven tijdens het inloggen](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.nl.png) +![Screenshot van de foutmelding die wordt weergegeven tijdens het inloggen](../../../../translated_images/login-error.416fe019b36a6327.nl.png) #### Stap 4: Inclusief zijn met toegankelijkheid @@ -961,7 +961,7 @@ Klaar om je bankingapp naar een hoger niveau te tillen? Laten we ervoor zorgen d Hier is hoe een gepolijst dashboard eruit zou kunnen zien: -![Screenshot van een voorbeeldresultaat van het dashboard na styling](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.nl.png) +![Screenshot van een voorbeeldresultaat van het dashboard na styling](../../../../translated_images/screen2.123c82a831a1d14a.nl.png) Voel je niet verplicht om dit precies na te maken - gebruik het als inspiratie en maak er je eigen versie van! diff --git a/translations/nl/7-bank-project/4-state-management/README.md b/translations/nl/7-bank-project/4-state-management/README.md index 65f1abbc4..61191c70b 100644 --- a/translations/nl/7-bank-project/4-state-management/README.md +++ b/translations/nl/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Net als het compartimentontwerp van de Titanic dat robuust leek totdat meerdere In plaats van achter de feiten aan te lopen, gaan we een **gecentraliseerd state management** systeem creëren. Denk eraan als één echt georganiseerd persoon die verantwoordelijk is voor alle belangrijke zaken: -![Schema dat de datastromen toont tussen de HTML, gebruikersacties en state](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.nl.png) +![Schema dat de datastromen toont tussen de HTML, gebruikersacties en state](../../../../translated_images/data-flow.fa2354e0908fecc8.nl.png) ```mermaid flowchart TD @@ -803,7 +803,7 @@ Deze uitdaging helpt u te denken als een professionele ontwikkelaar die zowel ge Hier is een voorbeeldresultaat na het voltooien van de opdracht: -![Screenshot van een voorbeeld "Transactie toevoegen"-dialoogvenster](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.nl.png) +![Screenshot van een voorbeeld "Transactie toevoegen"-dialoogvenster](../../../../translated_images/dialog.93bba104afeb79f1.nl.png) --- diff --git a/translations/nl/7-bank-project/4-state-management/assignment.md b/translations/nl/7-bank-project/4-state-management/assignment.md index 3ebda896b..d789596cf 100644 --- a/translations/nl/7-bank-project/4-state-management/assignment.md +++ b/translations/nl/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Raadpleeg de [server API-documentatie](../api/README.md) voor: **Verwacht Resultaat:** Na het voltooien van deze opdracht moet je bankapp een volledig functionele "Transactie Toevoegen"-functie hebben die er professioneel uitziet en zich professioneel gedraagt: -![Screenshot van een voorbeeld "Transactie Toevoegen" dialoog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.nl.png) +![Screenshot van een voorbeeld "Transactie Toevoegen" dialoog](../../../../translated_images/dialog.93bba104afeb79f1.nl.png) ## Testen van je Implementatie diff --git a/translations/nl/7-bank-project/README.md b/translations/nl/7-bank-project/README.md index 04018cd81..c990523cf 100644 --- a/translations/nl/7-bank-project/README.md +++ b/translations/nl/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: In dit project leer je hoe je een fictieve bank kunt bouwen. Deze lessen bevatten instructies over hoe je een webapp kunt opzetten en routes kunt toevoegen, formulieren kunt bouwen, de status kunt beheren en gegevens kunt ophalen van een API waarmee je de gegevens van de bank kunt ophalen. -| ![Scherm1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.nl.png) | ![Scherm2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.nl.png) | +| ![Scherm1](../../../translated_images/screen1.baccbba0f1f93364.nl.png) | ![Scherm2](../../../translated_images/screen2.123c82a831a1d14a.nl.png) | |--------------------------------|--------------------------------| ## Lessen diff --git a/translations/nl/8-code-editor/1-using-a-code-editor/README.md b/translations/nl/8-code-editor/1-using-a-code-editor/README.md index 2245eb4bf..47637e60d 100644 --- a/translations/nl/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/nl/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Net zoals de telefoon van Alexander Graham Bell verre locaties verbond, verbindt Zodra alles is geladen, zie je een prachtig schone werkruimte die is ontworpen om je gefocust te houden op wat belangrijk is – je code! -![Standaard VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.nl.png) +![Standaard VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.nl.png) **Hier is je rondleiding door de buurt:** - **Activiteitenbalk** (die strook links): Je hoofdnavigatie met Explorer 📁, Zoeken 🔍, Source Control 🌿, Extensies 🧩, en Instellingen ⚙️ @@ -233,7 +233,7 @@ Dit is perfect wanneer je nieuw begint in VSCode.dev en een specifieke repositor 1. Ga naar [vscode.dev](https://vscode.dev) als je daar nog niet bent 2. Zoek de knop "Open Remote Repository" op het welkomstscherm en klik erop - ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.nl.png) + ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.nl.png) 3. Plak een GitHub-repository-URL (probeer deze: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Druk op Enter en zie de magie gebeuren! @@ -242,7 +242,7 @@ Dit is perfect wanneer je nieuw begint in VSCode.dev en een specifieke repositor Wil je je als een codeerwizard voelen? Probeer deze sneltoets: Ctrl+Shift+P (of Cmd+Shift+P op Mac) om de Command Palette te openen: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.nl.png) +![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.nl.png) **De Command Palette is als een zoekmachine voor alles wat je kunt doen:** - Typ "open remote" en het vindt de repository-opener voor je @@ -304,7 +304,7 @@ Net zoals het organiseren van blauwdrukken in het kantoor van een architect, vol 3. Voer de bestandsnaam in, inclusief de juiste extensie (`style.css`, `script.js`, `index.html`) 4. Druk op Enter om het bestand te maken -![Een nieuw bestand maken](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.nl.png) +![Een nieuw bestand maken](../../../../translated_images/create-new-file.2814e609c2af9aeb.nl.png) **Naamgevingsconventies:** - Gebruik beschrijvende namen die het doel van het bestand aangeven @@ -322,7 +322,7 @@ Hier begint het echte plezier! De editor van VSCode.dev zit boordevol handige fu 2. Begin met typen en zie hoe VSCode.dev je helpt met kleuren, suggesties en foutdetectie 3. Sla je werk op met Ctrl+S (Windows/Linux) of Cmd+S (Mac) – hoewel het ook automatisch opslaat! -![Bestanden bewerken in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.nl.png) +![Bestanden bewerken in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.nl.png) **De coole dingen die gebeuren terwijl je codeert:** - Je code wordt prachtig ingekleurd, zodat het gemakkelijk te lezen is @@ -343,7 +343,7 @@ Net zoals archeologen gedetailleerde verslagen maken van opgravingslagen, houdt 2. Gewijzigde bestanden verschijnen in de sectie "Changes" 3. Kleuraanduidingen geven wijzigingstypen aan: groen voor toevoegingen, rood voor verwijderingen -![Wijzigingen bekijken in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.nl.png) +![Wijzigingen bekijken in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.nl.png) **Je werk opslaan (de commit-workflow):** @@ -438,7 +438,7 @@ De extensiemarkt is heel overzichtelijk, dus je raakt niet verdwaald terwijl je 2. Blader rond of zoek naar iets specifieks 3. Klik op iets interessants om er meer over te leren -![Interface van de extensiemarkt](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.nl.png) +![Interface van de extensiemarkt](../../../../translated_images/extensions.eca0e0c7f59a10b5.nl.png) **Wat je daar zult zien:** @@ -491,7 +491,7 @@ De meeste extensies hebben instellingen die je kunt aanpassen zodat ze precies w 3. Kies "Extensie-instellingen" in het dropdownmenu 4. Pas dingen aan totdat ze perfect aansluiten bij jouw workflow -![Instellingen van extensies aanpassen](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.nl.png) +![Instellingen van extensies aanpassen](../../../../translated_images/extension-settings.21c752ae4f4cdb78.nl.png) **Veelvoorkomende dingen die je wilt aanpassen:** - Hoe je code wordt geformatteerd (tabs vs spaties, regellengte, etc.) diff --git a/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md b/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md index 6bc2c97ba..e576e55cf 100644 --- a/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Omdat VSCode.dev ten minste één bestand nodig heeft om een repository te opene 4. **Schrijf** een commitbericht: "Voeg initiële HTML-structuur toe" 5. **Klik op** "Commit new file" om je wijzigingen op te slaan -![Een initiëel bestand maken op GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.nl.png) +![Een initiëel bestand maken op GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.nl.png) **Wat deze initiële setup bereikt:** - **Stelt** een correcte HTML5-documentstructuur in met semantische elementen @@ -104,7 +104,7 @@ Nu de basis van je repository is opgezet, schakelen we over naar VSCode.dev voor ✅ **Succesindicator**: Je zou je projectbestanden moeten zien in de Explorer-zijbalk en `index.html` beschikbaar voor bewerking in het hoofdeditorgebied. -![Project geladen in VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.nl.png) +![Project geladen in VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.nl.png) **Wat je ziet in de interface:** - **Explorer-zijbalk**: **Toont** je repository-bestanden en mapstructuur @@ -448,7 +448,7 @@ Extensies verbeteren je ontwikkelervaring door live preview-mogelijkheden en ver **Directe resultaten na installatie:** Zodra CodeSwing is geïnstalleerd, zie je een live preview van je CV-website verschijnen in de editor. Hierdoor kun je precies zien hoe je site eruitziet terwijl je wijzigingen aanbrengt. -![CodeSwing-extensie met live preview](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.nl.png) +![CodeSwing-extensie met live preview](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.nl.png) **Begrip van de verbeterde interface:** - **Gesplitst scherm**: **Toont** je code aan de ene kant en een live preview aan de andere kant diff --git a/translations/nl/9-chat-project/README.md b/translations/nl/9-chat-project/README.md index 2469200a1..04c2434e1 100644 --- a/translations/nl/9-chat-project/README.md +++ b/translations/nl/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Zo ziet je voltooide project eruit: -![Chat-app interface die een gesprek toont tussen gebruiker en AI-assistent](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.nl.png) +![Chat-app interface die een gesprek toont tussen gebruiker en AI-assistent](../../../translated_images/screenshot.0a1ee0d123df681b.nl.png) ## 🗺️ Jouw leertraject door AI-toepassingsontwikkeling @@ -194,7 +194,7 @@ mindmap **Kernprincipe**: AI-toepassingsontwikkeling combineert traditionele webontwikkelingsvaardigheden met AI-dienstintegratie, waardoor intelligente toepassingen ontstaan die natuurlijk en responsief aanvoelen voor gebruikers. -![GitHub Models AI Playground interface met modelselectie en testgebied](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.nl.png) +![GitHub Models AI Playground interface met modelselectie en testgebied](../../../translated_images/playground.d2b927122224ff8f.nl.png) **Waarom de playground zo handig is:** - **Probeer** verschillende AI-modellen zoals GPT-4o-mini, Claude en anderen (allemaal gratis!) @@ -204,7 +204,7 @@ mindmap Zodra je wat hebt geëxperimenteerd, klik je gewoon op het tabblad "Code" en kies je je programmeertaal om de implementatiecode te krijgen die je nodig hebt. -![Playground keuze toont codegeneratie-opties voor verschillende programmeertalen](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.nl.png) +![Playground keuze toont codegeneratie-opties voor verschillende programmeertalen](../../../translated_images/playground-choice.1d23ba7d407f4758.nl.png) ## Het instellen van de Python backend-integratie @@ -2365,14 +2365,14 @@ Wil je dit project uitproberen in een cloudontwikkelingsomgeving? GitHub Codespa - **Ga naar** de [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Klik** op "Use this template" in de rechterbovenhoek (zorg ervoor dat je bent ingelogd op GitHub) -![Interface voor het maken van een template met de groene knop "Use this template"](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.nl.png) +![Interface voor het maken van een template met de groene knop "Use this template"](../../../translated_images/template.67ad477109d29a2b.nl.png) **Stap 2: Codespaces Starten** - **Open** je nieuw aangemaakte repository - **Klik** op de groene knop "Code" en selecteer "Codespaces" - **Kies** "Create codespace on main" om je ontwikkelomgeving te starten -![Interface voor het maken van een codespace met opties voor het starten van een cloudontwikkelingsomgeving](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.nl.png) +![Interface voor het maken van een codespace met opties voor het starten van een cloudontwikkelingsomgeving](../../../translated_images/codespace.bcecbdf5d2747d3d.nl.png) **Stap 3: Omgevingsconfiguratie** Zodra je Codespace is geladen, heb je toegang tot: diff --git a/translations/nl/README.md b/translations/nl/README.md index 01b56d617..d64b40dc3 100644 --- a/translations/nl/README.md +++ b/translations/nl/README.md @@ -1,260 +1,252 @@ -[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +# Webontwikkeling voor beginners - Een curriculum -[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +Leer de basisprincipes van webontwikkeling met onze 12 weken durende uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen duikt in JavaScript, CSS en HTML door middel van praktische projecten zoals terrariums, browserextensies en ruimtespellen. Doe mee met quizzen, discussies en praktische opdrachten. Verbeter je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgerichte didactiek. Begin vandaag nog met coderen! -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +Doe mee met de Azure AI Foundry Discord-community -# Webontwikkeling voor Beginners - Een Curriculum +Volg deze stappen om aan de slag te gaan met deze bronnen: +1. **Fork de repository**: 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. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en medeontwikkelaars**](https://discord.com/invite/ByRwuEEgH4) -Leer de basisprincipes van webontwikkeling met onze 12-weekse uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen behandelt JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verhoog je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte aanpak. Begin vandaag nog met je codeerreis! +### 🌐 Ondersteuning in meerdere talen -Word lid van de Azure AI Foundry Discord Community +#### Ondersteund via GitHub Action (Geautomatiseerd & altijd up-to-date) -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) - -Volg deze stappen om aan de slag te gaan met deze bronnen: -1. **Fork de Repository**: 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. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4) - -### 🌐 Meertalige Ondersteuning - -#### Ondersteund via GitHub Action (Automatisch & Altijd Up-to-Date) - - -[Arabisch](../ar/README.md) | [Bengaals](../bn/README.md) | [Bulgaars](../bg/README.md) | [Birmaans (Myanmar)](../my/README.md) | [Chinees (Vereenvoudigd)](../zh/README.md) | [Chinees (Traditioneel, Hong Kong)](../hk/README.md) | [Chinees (Traditioneel, Macau)](../mo/README.md) | [Chinees (Traditioneel, Taiwan)](../tw/README.md) | [Kroatisch](../hr/README.md) | [Tsjechisch](../cs/README.md) | [Deens](../da/README.md) | [Nederlands](./README.md) | [Ests](../et/README.md) | [Fins](../fi/README.md) | [Frans](../fr/README.md) | [Duits](../de/README.md) | [Grieks](../el/README.md) | [Hebreeuws](../he/README.md) | [Hindi](../hi/README.md) | [Hongaars](../hu/README.md) | [Indonesisch](../id/README.md) | [Italiaans](../it/README.md) | [Japans](../ja/README.md) | [Koreaans](../ko/README.md) | [Litouws](../lt/README.md) | [Maleis](../ms/README.md) | [Marathi](../mr/README.md) | [Nepalees](../ne/README.md) | [Noors](../no/README.md) | [Perzisch (Farsi)](../fa/README.md) | [Pools](../pl/README.md) | [Portugees (Brazilië)](../br/README.md) | [Portugees (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Roemeens](../ro/README.md) | [Russisch](../ru/README.md) | [Servisch (Cyrillisch)](../sr/README.md) | [Slowaaks](../sk/README.md) | [Sloveens](../sl/README.md) | [Spaans](../es/README.md) | [Swahili](../sw/README.md) | [Zweeds](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thais](../th/README.md) | [Turks](../tr/README.md) | [Oekraïens](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamees](../vi/README.md) - +> **Voorkeur om lokaal te klonen?** -**Als je extra vertalingen wilt, staan de ondersteunde talen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +> Deze repository bevat vertalingen in 50+ talen, wat de downloadgrootte aanzienlijk vergroot. Om te klonen zonder vertalingen, gebruik sparse checkout: +> ```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' +> ``` +> Dit geeft je alles wat je nodig hebt om de cursus te voltooien met een veel snellere download. -[![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) +**Als je extra vertalingsondersteuning wenst, zijn ondersteunde talen hier vermeld [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** #### 🧑‍🎓 _Ben je een student?_ -Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en regelmatig wilt bekijken, aangezien we maandelijks de inhoud wisselen. +Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersmaterialen, studentenpakketten en zelfs mogelijkheden voor een gratis certificaatvoucher vindt. Dit is de pagina die je wilt bookmarken en van tijd tot tijd wilt bekijken, omdat we maandelijks de inhoud vernieuwen. -### 📣 Aankondiging - Nieuwe GitHub Copilot Agent-modus uitdagingen om te voltooien! +### 📣 Aankondiging - Nieuwe GitHub Copilot Agent modus uitdagingen om te voltooien! -Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dit is een nieuwe uitdaging die je kunt voltooien met GitHub Copilot en Agent-modus. Als je Agent-modus nog niet hebt gebruikt, het kan niet alleen tekst genereren, maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer. +Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dat is een nieuwe uitdaging die je kunt voltooien met GitHub Copilot en de Agent-modus. Als je deze modus nog niet hebt gebruikt, kan het niet alleen tekst genereren, maar ook bestanden maken en bewerken, commando's uitvoeren en meer. -### 📣 Aankondiging - _Nieuw Project om te bouwen met Generatieve AI_ +### 📣 Aankondiging - _Nieuw project te bouwen met Generative AI_ -Nieuw AI-assistentproject zojuist toegevoegd, bekijk het [project](./09-chat-project/README.md) +Nieuw AI Assistant-project toegevoegd, bekijk het [project](./9-chat-project/README.md) -### 📣 Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht +### 📣 Aankondiging - _Nieuw Curriculum_ over Generative AI voor JavaScript is net uitgebracht -Mis ons nieuwe Generatieve AI-curriculum niet! +Mis ons nieuwe Generative AI curriculum niet! Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen! -![Achtergrond](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.nl.png) +- Lessen die alles behandelen van basis tot RAG. +- Interactie met historische figuren via GenAI en onze begeleidende app. +- Leuk en boeiend verhaal, je reist door de tijd! -- Lessen die alles behandelen, van basisprincipes tot RAG. -- Interactie met historische personages met GenAI en onze begeleidende app. -- Leuk en boeiend verhaal, je gaat tijdreizen! - -![personage](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.nl.png) - -Elke les bevat een opdracht om te voltooien, een kenniscontrole en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals: +Elke les bevat een opdracht om te voltooien, een kennistoets en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals: - Prompting en prompt engineering -- Tekst- en afbeeldingsapp-generatie +- Tekst- en beeldapp-generatie - Zoekapps -Bezoek [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) om te beginnen! +Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen! ## 🌱 Aan de slag -> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Docenten**, we hebben [een aantal suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin voor elke les met een quiz voorafgaand aan de les en ga verder met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de quiz na de les. +**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin bij elke les met een pre-lecture quiz en volg deze op met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de post-lecture quiz. -Om je leerervaring te verbeteren, werk samen met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden. +Verbeter je leerervaring door samen met je medestudenten aan de projecten te werken! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden. -Om je opleiding verder te ontwikkelen, raden we aan om [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen. +Om je opleiding verder te verrijken raden we aan de extra studiematerialen op [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen. ### 📋 Je omgeving instellen -Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Zodra je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installaties nodig_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Dit curriculum heeft een kant-en-klare ontwikkelomgeving! Je kunt ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installatie_) of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Maak je repository aan -Om je werk gemakkelijk op te slaan, raden we aan om je eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum. +#### Creëer je repository +Om je werk makkelijk op te slaan, wordt aanbevolen om een eigen kopie van deze repository te maken. Dit kan door bovenaan de pagina op de knop **Use this template** te klikken. Hierdoor wordt een nieuwe repository gemaakt in jouw GitHub-account met een kopie van het curriculum. -Volg deze stappen: -1. **Fork de Repository**: Klik op de knop "Fork" rechtsboven op deze pagina. -2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Volg de volgende stappen: +1. **Fork de repository**: Klik op de knop "Fork" rechtsboven op deze pagina. +2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Het curriculum draaien in een Codespace -In je kopie van deze repository die je hebt gemaakt, klik op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace voor je om in te werken. +Klik in jouw eigen repository op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.nl.png) +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.nl.png) #### Het curriculum lokaal draaien op je computer -Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot Programmeertalen en Tools van het Vak](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden, zodat je kunt kiezen wat het beste voor je werkt. +Om dit curriculum lokaal te draaien op je computer, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools van het vak](../../1-getting-started-lessons/1-intro-to-programming-languages), laat je verschillende opties zien van elk van deze tools zodat je degene kunt kiezen die het beste bij je past. -Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als je editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Wij raden aan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bevat. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -1. Clone je repository naar je computer. Dit kun je doen door op de knop **Code** te klikken en de URL te kopiëren: +1. Clone je repository naar je computer. Dit doe je door op de knop **Code** te klikken en de URL te kopiëren: [CodeSpace](./images/createcodespace.png) - - Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `` vervangt door de URL die je net hebt gekopieerd: + Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `` vervangt door de URL die je zojuist hebt gekopieerd: ```bash git clone ``` - -2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je net hebt gekloond. -> Aanbevolen Visual Studio Code-extensies: -> -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's te bekijken binnen Visual Studio Code +2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **Bestand** > **Map openen** en de map te selecteren die je zojuist hebt gekloond. + + +> Aanbevolen Visual Studio Code-extensies: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's binnen Visual Studio Code te bekijken > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven ## 📂 Elke les bevat: - optionele sketchnote - optionele aanvullende video -- opwarmquiz voorafgaand aan de les +- warming-up quiz voor de les - geschreven les -- voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen -- kennischecks +- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe je het project bouwt +- kennistests - een uitdaging -- aanvullende literatuur +- aanvullende leesstof - opdracht - [quiz na de les](https://ff-quizzes.netlify.app/web/) -> **Een opmerking over quizzen**: Alle quizzen zijn opgenomen in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/) en de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app` map. +> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/). De quiz-app kan lokaal worden uitgevoerd of worden ingezet op Azure; volg de instructies in de `quiz-app` map. ## 🗃️ Lessen -| | Projectnaam | Geleerde concepten | Leerdoelen | Gelinkte les | Auteur | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Aan de slag | Introductie tot programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt hun werk te doen | [Introductie tot programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Aan de slag | Basisprincipes van GitHub, inclusief werken in een team | Hoe GitHub te gebruiken in je project, hoe samen te werken met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Basisprincipes van toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basisprincipes | JavaScript Datatypes | De basisprincipes van JavaScript datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basisprincipes | Functies en Methoden | Leer over functies en methoden om de logische stroom van een applicatie te beheren | [Functies en Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher | -| 06 | JS Basisprincipes | Beslissingen nemen met JS | Leer hoe je voorwaarden in je code kunt maken met behulp van besluitvormingsmethoden | [Beslissingen nemen](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basisprincipes | Arrays en Lussen | Werk met data met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een layout | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met de focus op de basisprincipes van CSS inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een drag/drop interface, met de focus op closures en DOM manipulatie | [JavaScript Closures, DOM manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typingspel](./4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbordgebeurtenissen kunt gebruiken om de logica van je JavaScript-app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie kunt opzetten | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Een formulier bouwen, een API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, Formulieren, en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en enkele optimalisaties om te maken | [Achtergrondtaken en Prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Ruimtespel](./6-space-game/solution/README.md) | Meer Geavanceerde Spelontwikkeling met JavaScript | Leer over Inheritance met zowel Classes als Composition en het Pub/Sub patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot Geavanceerde Spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Ruimtespel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Ruimtespel](./6-space-game/solution/README.md) | Elementen bewegen over het scherm | Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coördinaten en de Canvas API | [Elementen Bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Ruimtespel](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met behulp van toetsen en zorg voor een cooldown functie om de prestaties van het spel te garanderen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Ruimtespel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score Bijhouden](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Ruimtespel](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer over het beëindigen en opnieuw starten van het spel, inclusief het opruimen van assets en het resetten van variabele waarden | [De Eindconditie](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML Templates en Routes in een Webapp | Leer hoe je de structuur van een meerpagina website kunt opzetten met routing en HTML templates | [HTML Templates en Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een Inlog- en Registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden om Data op te halen en te gebruiken | Hoe data in en uit je app stroomt, hoe je het kunt ophalen, opslaan en verwijderen | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app de staat behoudt en hoe je deze programmatisch kunt beheren | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt | [Gebruik VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistenten](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris | +| | Projectnaam | Behandelde Concepten | Leerdoelen | Gekoppelde Les | Auteur | +| :-: | :------------------------------------------------------: | :------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Aan de slag | Introductie in programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt bij hun werk | [Introductie tot programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Aan de slag | Basisprincipes van GitHub, inclusief samenwerken in team | Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Fundamentals toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basis | JavaScript-datatypen | De basis van JavaScript-datatypen | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basis | Functies en methoden | Leer over functies en methoden om de logica van een applicatie te beheren | [Functies en methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher | +| 06 | JS Basis | Beslissingen maken met JS | Leer hoe je condities maakt in je code met beslissingsmethoden | [Beslissingen maken](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basis | Arrays en lussen | Werken met data met behulp van arrays en lussen in JavaScript | [Arrays en lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML voor een online terrarium, met focus op het bouwen van een layout | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium op te maken met focus op basisbeginselen van CSS, inclusief responsive maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een sleep/plaats-interface, met focus op closures en DOM-manipulatie | [JavaScript-closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typeren Spel](./4-typing-game/solution/README.md) | Bouw een Typeren Spel | Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie bouwt | [Over browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Formulieren maken, API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, formulieren en lokale opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Gevorderde Spelontwikkeling met JavaScript | Leer over overerving met zowel Classes als Composition en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot gevorderde spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Elementen op het scherm verplaatsen | Ontdek hoe elementen beweging krijgen met behulp van cartesische coördinaten en de Canvas API | [Elementen verplaatsen](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Botsingsdetectie | Zorg dat elementen botsen en op elkaar reageren met behulp van toetsaanslagen en een cooldown-functie om de prestaties te garanderen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score bijhouden](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Het spel beëindigen en herstarten | Leer over het beëindigen en herstarten van het spel, inclusief het opruimen van resources en het resetten van variabelen | [De eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je het framework van een multipage website opbouwt met routing en HTML-sjablonen | [HTML-sjablonen en routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een inlog- en registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden voor ophalen en gebruiken van data | Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en verwijdert | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van state management | Leer hoe je app staat bijhoudt en hoe je deze programmatisch beheert | [State management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt| [Gebruik VScode Code-editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogiek Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten: -* projectgebaseerd leren +* projectgericht leren * frequente quizzen -Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, ruimte-invader-stijl spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan. +Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans praktische ervaring op te doen door het bouwen van een typeringsspel, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel, en een bankapp voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan. -> 🎓 Je kunt de eerste paar lessen in dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn! +> 🎓 Je kunt de eerste paar lessen van dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn! -Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten versterkt. We hebben ook enkele startlessen in JavaScript-basisprincipes geschreven om concepten te introduceren, gekoppeld aan een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum. +Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het vasthouden van concepten vergroot. We hebben ook meerdere starterlessen in JavaScript basics geschreven om concepten te introduceren, gekoppeld aan een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie videotutorials, waarvan enkele auteurs een bijdrage hebben geleverd aan dit curriculum. -Daarnaast zorgt een laagdrempelige quiz voorafgaand aan een les ervoor dat de student zich richt op het leren van een onderwerp, terwijl een tweede quiz na de les verdere retentie garandeert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden tegen het einde van de 12-weekse cyclus steeds complexer. +Daarnaast stelt een quiz met lage inzet voor de les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les verdere retentie verzekert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer tegen het einde van de 12-weekse cyclus. -Hoewel we bewust hebben vermeden JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere collectie video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Hoewel we er bewust voor hebben gekozen geen JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, is een goede volgende stap na dit curriculum het leren over Node.js via een andere verzameling video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". > Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback! ## 🧭 Offline toegang -Je kunt deze documentatie offline uitvoeren met behulp van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de rootmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`. +Je kunt deze documentatie offline gebruiken met [Docsify](https://docsify.js.org/#/). Fork deze repo, installeer [Docsify](https://docsify.js.org/#/quickstart) op je lokale machine en typ dan in de hoofdmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`. ## 📘 PDF -Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +Een PDF met alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Andere Cursussen - -Ons team produceert andere cursussen! Bekijk: +Ons team maakt ook andere cursussen! Bekijk: -### Azure / Edge / MCP / Agents -[![AZD voor Beginners](https://img.shields.io/badge/AZD%20voor%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 voor Beginners](https://img.shields.io/badge/Edge%20AI%20voor%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP voor Beginners](https://img.shields.io/badge/MCP%20voor%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Agents voor Beginners](https://img.shields.io/badge/AI%20Agents%20voor%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +### LangChain +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Generatieve AI Serie -[![Generatieve AI voor Beginners](https://img.shields.io/badge/Generative%20AI%20voor%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Generatieve 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) -[![Generatieve 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) -[![Generatieve AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +### 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) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - -### Kern Leren -[![ML voor Beginners](https://img.shields.io/badge/ML%20voor%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Data Science voor Beginners](https://img.shields.io/badge/Data%20Science%20voor%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI voor Beginners](https://img.shields.io/badge/AI%20voor%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Cybersecurity voor Beginners](https://img.shields.io/badge/Cybersecurity%20voor%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Webontwikkeling voor Beginners](https://img.shields.io/badge/Web%20Dev%20voor%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT voor Beginners](https://img.shields.io/badge/IoT%20voor%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![XR Ontwikkeling voor Beginners](https://img.shields.io/badge/XR%20Development%20voor%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) + +### Generatieve AI-serie +[![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) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- + +### Kernleren +[![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) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) -### Copilot Serie -[![Copilot voor AI Samen Programmeren](https://img.shields.io/badge/Copilot%20voor%20AI%20Samen%20Programmeren-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot voor C#/.NET](https://img.shields.io/badge/Copilot%20voor%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 Avontuur](https://img.shields.io/badge/Copilot%20Avontuur-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +--- + +### Copilot-serie +[![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) + -## Hulp krijgen +## Hulp krijgen -Als je vastloopt of vragen hebt over het bouwen van AI-apps, sluit je dan aan bij medeleerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende community waar vragen welkom zijn en kennis vrij wordt gedeeld. +Als je vastloopt of vragen hebt over het bouwen van AI-apps. Doe mee met mede-leerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende community waar vragen welkom zijn en kennis vrij wordt gedeeld. -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen, bezoek dan: +Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen bezoek: -[![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) +[![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) -## Licentie +## Licentie -Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../LICENSE) bestand voor meer informatie. +Deze repository is gelicenseerd onder de MIT-licentie. Zie het [LICENSE](../../LICENSE) bestand voor meer informatie. --- -**Disclaimer**: -Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. +**Disclaimer**: +Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet als de gezaghebbende bron worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. \ No newline at end of file diff --git a/translations/nl/for-teachers.md b/translations/nl/for-teachers.md index d3b10f8f7..b65179dad 100644 --- a/translations/nl/for-teachers.md +++ b/translations/nl/for-teachers.md @@ -42,10 +42,10 @@ Dit lesprogramma bevat importeerbare pakketten voor gangbare LMS-workflows. - Moodle Cloud heeft beperkte ondersteuning voor Common Cartridge. Geef de voorkeur aan het bovenstaande Moodle-bestand, dat ook in Canvas kan worden geüpload. - Controleer na import de modules, deadlines en quizinstellingen om aan te sluiten bij uw semesterschema. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.nl.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.nl.png) > Het lesprogramma in een Moodle-klas -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.nl.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.nl.png) > Het lesprogramma in Canvas ### Gebruik de repository direct (zonder Classroom) 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 38159e896..0b3a7272b 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,106 +1,190 @@ # Introduksjon til programmeringsspråk og moderne utviklerverktøy -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 faktiske superkrefter til å 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 den følelsen når du bruker favorittappen din og alt bare fungerer perfekt? Når du trykker på en knapp og noe helt magisk skjer som får deg til å tenke "wow, hvordan GJORDE 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! -Hør her, jeg skjønner helt om programmering føles skremmende akkurat nå. Da jeg først begynte, trodde jeg ærlig talt at du måtte være en slags mattegeni eller ha kodet siden du var fem år gammel. Men her er det som fullstendig endret perspektivet mitt: programmering er akkurat som å lære å ha samtaler på et nytt språk. Du begynner med "hei" og "takk," deretter jobber du deg opp til å bestille kaffe, og før du vet ordet av det, har du dype filosofiske diskusjoner! Bortsett fra at du i dette tilfellet har samtaler med datamaskiner, og helt ærlig? De er de mest tålmodige samtalepartnerne du noen gang vil ha – de dømmer aldri feilene dine og er alltid klare til å 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 seriøst vanedannende. Jeg snakker om de samme editorene, nettleserne og arbeidsflytene som utviklere hos Netflix, Spotify og din favoritt indie-appstudio bruker hver eneste dag. Og her er delen som kommer til å få 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 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! -![Intro Programmering](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.no.png) +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.no.png) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) -## La oss se hva du allerede vet! +```mermaid +journey + title Din programmeringsreise i dag + section Oppdag + Hva er programmering: 5: You + Programmeringsspråk: 4: You + Verktøyoversikt: 5: You + section Utforsk + Kodeeditorer: 4: You + Nettlesere og utviklerverktøy: 5: You + Kommandolinje: 3: You + section Øv + Språkdettektiv: 4: You + Verktøyutforskning: 5: You + Fellesskapskontakt: 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 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," er det ikke bare greit, det er perfekt! Det betyr at du er akkurat på rett sted. Tenk på denne quizen som å strekke deg før en treningsøkt – vi varmer bare opp hjernemusklene! +[Ta forprøve quizen](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -[Ta quiz før leksjonen](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) ## Eventyret vi skal begi oss ut på sammen -Ok, jeg er virkelig spent på hva vi skal utforske i dag! Seriøst, 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 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: -- **Hva programmering egentlig er (og hvorfor det er det kuleste noensinne!)** – 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 på en fest der hver person har helt forskjellige superkrefter og måter å løse problemer på. Det er slik programmeringsspråkverdenen er, og du kommer til å elske å bli kjent med dem! -- **De grunnleggende byggeklossene som skaper digital magi** – Tenk på disse som det ultimate kreative LEGO-settet. Når du forstår hvordan disse brikkene passer sammen, vil du innse at du bokstavelig talt kan bygge hva som helst fantasien din drømmer opp. -- **Profesjonelle verktøy som får deg til å føle at du nettopp har fått en trollmanns stav** – Jeg overdriver ikke her – disse verktøyene vil virkelig få deg til å føle at du har superkrefter, og det beste? De er de samme som 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å 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! -> 💡 **Her er greia**: Ikke engang tenk på å prøve å huske alt i dag! Akkurat nå vil jeg bare at du skal føle den gnisten av spenning over hva som er mulig. Detaljene vil feste seg naturlig mens vi øver sammen – det er slik ekte læring skjer! +> 💡 **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! > 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)! ## Så hva *er* egentlig programmering? -Ok, la oss ta tak i det store spørsmålet: hva er programmering, egentlig? +Alright, la oss ta for oss milliondollerspø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 gi deg en historie som fullstendig endret hvordan jeg tenker på dette. Forrige uke prøvde jeg å forklare mamma hvordan hun skulle bruke vår nye smart-TV-fjernkontroll. Jeg tok 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, nå hold den i to sekunder, ikke én, ikke tre..." Høres kjent ut? 😅 +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, steg-for-steg-instruksjoner til noe som er veldig kraftig, men som trenger alt forklart perfekt. 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 dette: datamaskiner er faktisk ganske enkle i kjernen. De forstår bokstavelig talt bare to ting – 1 og 0, som i bunn og grunn bare er "ja" og "nei" eller "på" og "av." Det er det! Men her er hvor det blir magisk – vi trenger ikke snakke i 1 og 0 som om vi er i The Matrix. Det er der **programmeringsspråk** kommer til unnsetning. De er som å ha verdens beste oversetter som tar dine helt normale menneskelige tanker og konverterer dem til datamaskinsprå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 gåsehud hver morgen når 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å laptopen sin. Det Instagram-filteret som får deg til å se feilfri ut? Noen kodet det. Anbefalingen som ledet deg til din nye favorittsang? En utvikler bygde den algoritmen. Appen som hjelper deg med å dele middagsregningen med venner? Jepp, noen tenkte "dette er irriterende, jeg vedder på at 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 bruker dagene sine på å tenke: "Hva om jeg kunne bygge noe som gjør noens dag bare litt bedre?" Ærlig talt, er 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. -✅ **Jakten på morsomme fakta**: Her er noe superkult å undersøke 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 absolutt fascinerende og viser at programmering alltid har handlet om kreativ problemløsning og å tenke utenfor boksen. +### 🧠 **Sjekk-inn tid: Hvordan har du det?** + +**Ta et øyeblikk til å reflektere:** +- 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? + +> **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! ## Programmeringsspråk er som forskjellige smaker av magi -Ok, dette kommer til å høres rart ut, men heng med meg – programmeringsspråk er mye som forskjellige typer musikk. Tenk på det: du har jazz, som er glatt og improviserende, rock som er kraftfull og rett på sak, 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. +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. -Programmeringsspråk fungerer på akkurat samme måte! 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 i hvert fall! 😄). +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! 😄). -Men her er det som absolutt blåser meg av banen hver gang jeg tenker på det: disse språkene er som å ha den mest tålmodige, briljante tolken i verden sittende rett ved siden av deg. Du kan uttrykke ideene dine på en måte som føles naturlig for din menneskelige hjerne, og de håndterer alt det utrolig komplekse arbeidet med å oversette det til 1 og 0 som datamaskiner faktisk snakker. 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 det samme spørsmålet to ganger! +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! ### Populære programmeringsspråk og deres bruksområder -| Språk | Best for | Hvorfor det er populært | -|-------|----------|--------------------------| -| **JavaScript** | Webutvikling, brukergrensesnitt | Kjører i nettlesere og driver interaktive nettsteder | +```mermaid +mindmap + root((Programmeringsspråk)) + Webutvikling + JavaScript + Frontend Magi + Interaktive Nettsteder + TypeScript + JavaScript + Typer + Bedriftsapper + Data & AI + Python + Datavitenskap + Maskinlæring + Automatisering + R + Statistikk + Forskning + Mobilapper + Java + Android + Bedrift + Swift + iOS + Apple-økosystem + Kotlin + Moderne Android + Plattformuavhengig + Systemer & Ytelse + C++ + Spill + Ytelseskritisk + Rust + Minnesikkerhet + Systemprogrammering + Go + Skybaserte Tjenester + Skalerbar Backend +``` +| Språk | Best til | 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** | Bedriftsapplikasjoner, Android-apper | Plattformuavhengig, robust for store systemer | -| **C#** | Windows-applikasjoner, spillutvikling | Sterk støtte fra Microsoft-økosystemet | -| **Go** | Skytjenester, backend-systemer | Raskt, enkelt, designet for moderne databehandling | +| **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 | ### Høynivå- vs. lavnivåspråk -Ok, dette var ærlig talt konseptet som knakk 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å! - -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 den lokale dialekten så godt at du kan prate med bestemoren som selger frukt på hjørnet ved å bruke kulturelle referanser, lokal slang og interne vitser som bare noen som vokste opp der ville forstå. Superimponerende og utrolig effektivt... hvis du tilfeldigvis er flytende! Men ganske overveldende når du bare prøver å finne et toalett. - -- **Høynivå programmering** er som å ha den fantastiske lokale vennen som bare forstår deg. Du kan si "Jeg må virkelig finne et toalett" på vanlig norsk, og de håndterer all den kulturelle oversettelsen og gir deg veibeskrivelsen på en måte som gir perfekt mening for din ikke-lokale hjerne. - -I programmeringstermer: -- **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 at det er en ganske stor mental omstilling! -- **Høynivåspråk** (som JavaScript, Python eller C#) lar deg tenke som et menneske mens de håndterer all maskinspråket i bakgrunnen. I tillegg har de utrolig velkomne fellesskap fulle av folk som husker hvordan det var å være ny og virkelig ønsker å hjelpe! - -Gjett hvilke jeg kommer til å foreslå at du starter med? 😉 Høynivåspråk er som å ha støttehjul som du aldri egentlig vil ta av fordi de gjør hele opplevelsen så mye mer hyggelig! - -### La meg vise deg hvorfor høynivåspråk er så mye vennligere +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å! + +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? 😅): + +- **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. + +- **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. + +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! + +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! + +```mermaid +flowchart TB + 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"] + + C --> E["📝 Skriv: fibonacci(10)"] + D --> F["📝 Skriv: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Datamaskinforståelse:
Oversetter håndterer kompleksitet"] + F --> G + + 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 -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 akkurat poenget jeg prøver å få frem! +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! -Vi skal se på nøyaktig samme oppgave skrevet i to helt forskjellige stiler. Begge lager det som kalles Fibonacci-sekvensen – det er dette vakre matematiske mønsteret der hvert tall er summen av de to foregående: 0, 1, 1, 2, 3, 5, 8, 13... (Morsom fakta: du finner dette mønsteret bokstavelig talt overalt i naturen – solsikkefrøspiraler, konglemønstre, til og med måten galakser dannes på!) +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!) Klar til å se forskjellen? La oss gå! **Høynivåspråk (JavaScript) – Menneskevennlig:** ```javascript -// Step 1: Basic Fibonacci setup +// Trinn 1: Grunnleggende Fibonacci-oppsett const fibonacciCount = 10; let current = 0; let next = 1; @@ -108,32 +192,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Her er hva denne koden gjør:** -- **Deklarerer** en konstant for å spesifisere hvor mange Fibonacci-tall vi vil generere -- **Initialiserer** to variabler for å spore nåværende og neste tall i sekvensen +**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 - **Setter opp** startverdiene (0 og 1) som definerer Fibonacci-mønsteret -- **Viser** en overskriftsmelding for å identifisere vårt output +- **Viser** en overskrift for å identifisere vår utdata ```javascript -// Step 2: Generate the sequence with a loop +// Trinn 2: Generer sekvensen med en løkke for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Beregn neste tall i sekvensen const sum = current + next; current = next; next = sum; } ``` -**Bryter ned hva som skjer her:** +**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 malformattering -- **Beregner** neste Fibonacci-tall ved å legge til nåværende og neste verdier +- **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 ```javascript -// Step 3: Modern functional approach +// Trinn 3: Moderne funksjonell tilnærming const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -144,16 +228,16 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Brukseksempel const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**I det ovenstående har vi:** -- **Opprettet** en gjenbrukbar funksjon ved hjelp av moderne pilfunksjonssyntaks -- **Bygget** en array for å lagre hele sekvensen i stedet for å vise ett og ett +**I koden ovenfor 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 - **Brukt** array-indeksering for å beregne hvert nytt tall fra tidligere verdier -- **Returnert** hele sekvensen for fleksibel bruk i andre deler av programmet +- **Returnert** hele sekvensen for fleksibel bruk i andre deler av programmet vårt **Lavnivåspråk (ARM Assembly) – Datamaskinvennlig:** @@ -182,76 +266,77 @@ back add r0,r1 end ``` -Legg merke til hvordan JavaScript-versjonen leses nesten som engelske instruksjoner, mens Assembly-versjonen bruker kryptiske kommandoer som direkte kontrollerer datamaskinens prosessor. Begge utfører nøyaktig samme oppgave, men høynivåspråket er mye enklere for mennesker å forstå, skrive og vedlikeholde. +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. **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**: Å oppdatere JavaScript-versjonen for forskjellige krav er enkelt og klart -✅ **Om Fibonacci-sekvensen**: Dette utrolig vakre tallmønsteret (hvor hvert tall er summen av de to foregående: 0, 1, 1, 2, 3, 5, 8...) dukker opp bokstavelig talt *overalt* i naturen! Du finner det i spiraler på solsikker, mønstre på kongler, måten nautilusskjell krummer seg på, og til og med i hvordan tregrener vokser. Det er ganske utrolig hvordan matematikk og koding kan hjelpe oss med å forstå og gjenskape mønstrene naturen bruker for å skape skjønnhet! +- **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 + +✅ **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! -## Byggesteinene som skaper magien +## Byggeklossene 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 hvert eneste 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 nesten hvilket som helst 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 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! -Dette er litt som å lære grammatikken i programmering. Husker du på skolen da du lærte om substantiver, verb og hvordan man setter sammen setninger? Programmering har sin egen versjon av grammatikk, og helt ærlig, den er mye mer logisk og tilgivende enn engelsk grammatikk noen gang har vært! 😄 +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! 😄 -### Setninger: Steg-for-steg-instruksjoner +### Setninger: Instruksjonene steg for steg -La oss starte med **setninger** – disse er som individuelle setninger i en samtale med datamaskinen din. Hver setning forteller datamaskinen å gjøre én spesifikk ting, litt som å gi instruksjoner: "Sving til venstre her," "Stopp ved det røde lyset," "Parkér på den plassen." +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." -Det jeg elsker med setninger er hvor lesbare de vanligvis er. Se på dette: +Det jeg elsker med setninger, er hvor lesbare de vanligvis er. Se her: ```javascript -// Basic statements that perform single actions +// Grunnleggende utsagn som utfører enkelt handlinger const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Dette gjør denne koden:** -- **Deklarerer** en konstant variabel for å lagre en brukers navn -- **Viser** en velkomstmelding i konsollutgangen +**Slik fungerer denne koden:** +- **Deklarer** en konstant variabel for å lagre en brukers navn +- **Viser** en hilsen i konsollutskriften - **Beregner** og lagrer resultatet av en matematisk operasjon ```javascript -// Statements that interact with web pages +// Setninger som samhandler med nettsider document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Steg for steg, dette skjer:** +**Steg for steg, slik skjer det:** - **Endrer** nettsidens tittel som vises i nettleserfanen -- **Skifter** bakgrunnsfargen på hele sidekroppen +- **Endrer** bakgrunnsfargen for hele sideskroppen -### Variabler: Programmets hukommelsessystem +### Variabler: Programmets minnesystem -Ok, **variabler** er ærlig talt en av mine absolutte favorittkonsepter å lære bort fordi de er så mye som ting du allerede bruker hver eneste dag! +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 alle telefonnumrene – i stedet lagrer du "Mamma," "Bestevenn," eller "Pizza-stedet som leverer til kl. 02" og lar telefonen huske de faktiske numrene. Variabler fungerer akkurat på samme måte! De er som merkede beholdere der programmet ditt kan lagre informasjon og hente den senere ved hjelp av et navn som faktisk gir mening. +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. -Her er det som er virkelig kult: variabler kan endres mens programmet kjører (derav navnet "variabel" – ser du hva de gjorde der?). Akkurat som du kanskje oppdaterer kontakten til pizza-stedet når du oppdager et enda bedre sted, kan variabler oppdateres etter hvert som programmet lærer ny informasjon eller når situasjoner endrer seg! +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! La meg vise deg hvor vakkert enkelt dette kan være: ```javascript -// Step 1: Creating basic variables +// Trinn 1: Opprette grunnleggende variabler const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` -**Forstå disse konseptene:** -- **Lagre** uforanderlige verdier i `const`-variabler (som nettstednavn) -- **Bruk** `let` for verdier som kan endres gjennom programmet -- **Tildel** forskjellige datatyper: strenger (tekst), tall og boolske verdier (sant/usant) -- **Velg** beskrivende navn som forklarer hva hver variabel inneholder +**Å 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 ```javascript -// Step 2: Working with objects to group related data +// Trinn 2: Arbeide med objekter for å gruppere relatert data const weatherData = { location: "San Francisco", humidity: 65, @@ -259,50 +344,50 @@ const weatherData = { }; ``` -**I eksempelet ovenfor har vi:** -- **Opprettet** et objekt for å gruppere relatert værinformasjon sammen -- **Organisert** flere datastykker under ett variabelnavn -- **Brukt** nøkkel-verdi-par for å tydelig merke hver informasjonsbit +**I eksempelet 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 ```javascript -// Step 3: Using and updating variables +// Trinn 3: Bruke og oppdatere variabler console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Oppdatere endringsbare variabler currentWeather = "cloudy"; temperature = 68; ``` **La oss forstå hver del:** -- **Vis** informasjon ved hjelp av malstrenger med `${}`-syntaks -- **Få tilgang til** objektets egenskaper ved hjelp av punktnotasjon (`weatherData.windSpeed`) -- **Oppdater** variabler deklarert med `let` for å gjenspeile endrede forhold -- **Kombiner** flere variabler for å lage meningsfulle meldinger +- **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 ```javascript -// Step 4: Modern destructuring for cleaner code +// Trinn 4: Moderne destrukturering for renere kode const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Dette må du vite:** -- **Trekk ut** spesifikke egenskaper fra objekter ved hjelp av destruktureringsoppgave -- **Opprett** nye variabler automatisk med samme navn som objektets nøkler -- **Forenkle** koden ved å unngå repeterende punktnotasjon +**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 -### Kontrollflyt: Lær programmet ditt å tenke +### Kontrollflyt: Lærer programmet ditt å tenke -Ok, her blir programmering helt utrolig! **Kontrollflyt** handler om å lære programmet ditt å ta smarte avgjørelser, akkurat som du gjør hver eneste dag uten engang å tenke over det. +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. -Se for deg dette: i morges gikk du sannsynligvis gjennom noe som "Hvis det regner, tar jeg med en paraply. Hvis det er kaldt, tar jeg på meg en jakke. Hvis jeg er sent ute, hopper jeg over frokosten og tar med kaffe på veien." Hjernen din følger naturlig denne hvis-da-logikken dusinvis av ganger hver dag! +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! -Dette er det som får programmer til å føles intelligente og levende i stedet for bare å følge et kjedelig, forutsigbart manus. De kan faktisk se på en situasjon, evaluere hva som skjer, og reagere deretter. Det er som å gi programmet ditt en hjerne som kan tilpasse seg og ta valg! +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! Vil du se hvor vakkert dette fungerer? La meg vise deg: ```javascript -// Step 1: Basic conditional logic +// Trinn 1: Grunnleggende betingelseslogikk const userAge = 17; if (userAge >= 18) { @@ -313,14 +398,14 @@ if (userAge >= 18) { } ``` -**Dette gjør denne koden:** -- **Sjekker** om brukerens alder oppfyller stemmerettskravet -- **Utfører** forskjellige kodeblokker basert på resultatet av betingelsen -- **Beregner** og viser hvor lenge det er til stemmerett hvis under 18 -- **Gir** spesifikke, nyttige tilbakemeldinger for hvert scenario +**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 ```javascript -// Step 2: Multiple conditions with logical operators +// Trinn 2: Flere betingelser med logiske operatorer const userAge = 17; const hasPermission = true; @@ -334,24 +419,24 @@ if (userAge >= 18 && hasPermission) { ``` **Bryter ned hva som skjer her:** -- **Kombinerer** flere betingelser ved hjelp av `&&` (og)-operatoren -- **Oppretter** et hierarki av betingelser ved hjelp av `else if` for flere scenarier -- **Håndterer** alle mulige tilfeller med en siste `else`-setning -- **Gir** klare, handlingsrettede tilbakemeldinger for hver forskjellige situasjon +- **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 ```javascript -// Step 3: Concise conditional with ternary operator +// Steg 3: Kortfattet betingelse med ternær operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Dette må du huske:** -- **Bruk** den ternære operatoren (`? :`) for enkle to-valgsbetingelser -- **Skriv** betingelsen først, etterfulgt av `?`, deretter sant resultat, deretter `:`, deretter falskt resultat -- **Bruk** dette mønsteret når du trenger å tildele verdier basert på betingelser +**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 ```javascript -// Step 4: Handling multiple specific cases +// Trinn 4: Håndtering av flere spesifikke tilfeller const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -371,176 +456,210 @@ switch (dayOfWeek) { } ``` -**Denne koden oppnår følgende:** -- **Matcher** variabelverdien mot flere spesifikke tilfeller -- **Grupperer** lignende tilfeller sammen (ukedager vs. helger) -- **Utfører** den passende kodeblokken når en match er funnet -- **Inkluderer** et `default`-tilfelle for å håndtere uventede verdier -- **Bruker** `break`-setninger for å forhindre at koden fortsetter til neste tilfelle - -> 💡 **Analogien til virkeligheten**: Tenk på kontrollflyt som å ha verdens mest tålmodige GPS som gir deg veibeskrivelser. Den kan si "Hvis det er trafikk på Main Street, ta motorveien i stedet. Hvis det er veiarbeid på motorveien, prøv den naturskjønne ruten." Programmer bruker akkurat den samme typen betinget logikk for å reagere intelligent på forskjellige situasjoner og alltid gi brukerne den beste mulige opplevelsen. - -✅ **Hva som kommer neste**: Vi skal ha det utrolig gøy med å dykke dypere inn i disse konseptene mens vi fortsetter denne fantastiske reisen sammen! Akkurat nå, fokuser bare på å føle spenningen over alle de fantastiske mulighetene som ligger foran deg. De spesifikke ferdighetene og teknikkene vil feste seg naturlig mens vi øver sammen – jeg lover at dette kommer til å bli så mye morsommere enn du kanskje forventer! - - -## Verktøyene du trenger - -Ok, dette er ærlig talt der jeg blir så begeistret 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 forlengelser av hendene deres? Eller hvordan en musiker har den ene gitaren som ser ut til å synge i det øyeblikket de berører den? Vel, utviklere har vår egen versjon av disse magiske verktøyene, og her er det som kommer til å blåse deg fullstendig – de fleste av dem er helt gratis! - -Jeg hopper nesten i stolen av tanken på å dele disse med deg fordi de har fullstendig revolusjonert hvordan vi bygger programvare. Vi snakker om AI-drevne kodeassistenter som kan hjelpe deg med å skrive koden din (jeg tuller ikke engang!), skyløsninger der du kan bygge hele applikasjoner fra bokstavelig talt hvor som helst med Wi-Fi, og feilsøkingsverktøy så sofistikerte at de er som å ha røntgensyn for programmene dine. - -Og her er delen som fortsatt gir meg gåsehud: dette er ikke "nybegynnerverktøy" som du vil vokse fra. Dette er de nøyaktig samme profesjonelle verktøyene som utviklere hos Google, Netflix og det indie-appstudioet du elsker, bruker akkurat nå. Du kommer til å føle deg som en ekte proff når du bruker dem! - - -### Kodeeditorer og IDE-er: Dine nye digitale bestevenner +**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 + +> 💡 **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. + +### 🎯 **Konsept-sjekk: Behersk byggeklossene** + +**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? + +**Rask selvtillits-boost:** +```mermaid +flowchart LR + A["📝 Utsagn
(Instruksjoner)"] --> B["📦 Variabler
(Lagring)"] --> C["🔀 Kontrollflyt
(Beslutninger)"] --> D["🎉 Fungerende 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! + +## Verktøyene for jobben + +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. + +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! + +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. + +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! + +```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!"] + + B -.-> G["🤖 AI Assistent
(GitHub Copilot)"] + C -.-> H["📱 Enhetstesting
(Responsivt Design)"] + D -.-> I["📦 Pakkebehandlere
(npm, yarn)"] + E -.-> J["👥 Fellesskap
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### Kodeeditorer og IDEer: Dine nye digitale bestevenner -La oss snakke om kodeeditorer – disse kommer seriøst til å bli dine nye favorittsteder å henge ut! Tenk på dem som ditt personlige kodingsfristed der du vil tilbringe mesteparten av tiden din med å lage og perfeksjonere dine digitale kreasjoner. +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. -Men her er det som er helt magisk med moderne editorer: de er ikke bare fancy teksteditorer. De er som å ha den mest briljante, støttende kodingsmentoren 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 med å forstå hva hver eneste del av koden gjør, og noen av dem kan til og med forutsi hva du er i ferd med å skrive og tilby å fullføre tankene dine! +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! -Jeg husker da jeg først oppdaget autofullføring – jeg følte bokstavelig talt at jeg levde i fremtiden. Du begynner å skrive noe, og editoren din sier: "Hei, tenkte du på denne funksjonen som gjør akkurat det du trenger?" Det er som å ha en tankeleser som kodingskompis! +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! **Hva gjør disse editorene så utrolige?** -Moderne kodeeditorer tilbyr et imponerende utvalg av funksjoner designet for å øke produktiviteten din: +Moderne kodeeditorer tilbyr et imponerende sett med funksjoner designet for å øke produktiviteten din: | Funksjon | Hva den gjør | Hvorfor det hjelper | |----------|--------------|---------------------| -| **Syntaksutheving** | Farger forskjellige deler av koden din | Gjør koden enklere å lese og oppdage feil | -| **Autofullføring** | Foreslår kode mens du skriver | Får deg til å kode raskere og reduserer skrivefeil | -| **Feilsøkingsverktøy** | Hjelper deg med å finne og fikse feil | Spar tid på feilsøking | -| **Utvidelser** | Legger til spesialiserte funksjoner | Tilpass editoren din for enhver teknologi | -| **AI-assistenter** | Foreslår kode og forklaringer | Øker læring og produktivitet | +| **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 | -> 🎥 **Videoressurs**: Vil du se disse verktøyene i aksjon? Sjekk ut denne [Tools of the Trade-videoen](https://youtube.com/watch?v=69WJeXGBdxg) for en omfattende oversikt. +> 🎥 **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. #### Anbefalte editorer for webutvikling **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) - Mest populær blant webutviklere -- Utmerket utvidelsesøkosystem +- Fantastisk økosystem av utvidelser - Innebygd terminal og Git-integrasjon - **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) - Sanntidssamarbeid + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Samarbeid i sanntid - [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 opp skrivefeil i koden din + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fanger skrivefeil i koden **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betalt, gratis for studenter) - Avanserte feilsøkings- og testverktøy - Intelligent kodefullføring - Innebygd versjonskontroll -**Skybaserte IDE-er** (Ulike priser) -- [GitHub Codespaces](https://github.com/features/codespaces) - Full VS Code i nettleseren din +**Skybaserte IDEer** (Ulike priser) +- [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 +- [StackBlitz](https://stackblitz.com/) - Umiddelbar full-stack webutvikling -> 💡 **Tips for å komme i gang**: Start med Visual Studio Code – det er gratis, mye brukt i bransjen, og har et enormt fellesskap som lager nyttige veiledninger og utvidelser. +> 💡 **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. ### Nettlesere: Ditt hemmelige utviklingslaboratorium -Ok, gjør deg klar til å bli helt overrasket! 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 utviklerlaboratoriet hele tiden, bare ventende på at du skal oppdage det! - -Hver gang du høyreklikker på en nettside og velger "Inspiser element," åpner du opp en skjult verden av utviklerverktøy som ærlig talt er mer kraftfulle enn noe dyrt programvare jeg pleide å betale hundrevis av dollar for. Det er som å oppdage at ditt vanlige gamle kjøkken har skjult et profesjonelt kokkelaboratorium bak en hemmelig panel! +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! -Første gang noen viste meg nettleserens DevTools, brukte jeg omtrent tre timer bare på å klikke rundt og si "VENT, DEN KAN GJØRE DET OGSÅ?!" Du kan bokstavelig talt redigere hvilken som helst nettside i sanntid, se nøyaktig hvor raskt alt lastes, teste hvordan nettstedet ditt ser ut på forskjellige enheter, og til og med feilsøke JavaScript som en total proff. Det er helt utrolig! +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! **Her er hvorfor nettlesere er ditt hemmelige våpen:** -Når du lager et nettsted eller en webapplikasjon, må du se hvordan det 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, 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. -#### Nettleserutviklerverktøy (DevTools) +#### Nettleserens utviklerverktøy (DevTools) -Moderne nettlesere inkluderer omfattende utviklingssuiter: +Moderne nettlesere inkluderer omfattende utviklingspakker: -| Verktøykategori | Hva det gjør | Eksempel på bruk | -|-----------------|-------------|------------------| -| **Elementinspektør** | Vis og rediger HTML/CSS i sanntid | Juster styling for å se umiddelbare resultater | +| 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 | -| **Nettverksmonitor** | Spor hvordan ressurser lastes inn | Optimaliser ytelse og lastetider | -| **Tilgjengelighetssjekker** | Test for inkluderende design | Sørg for at nettstedet ditt fungerer for alle brukere | -| **Enhetssimulator** | Forhåndsvis på ulike skjermstørrelser | Test responsivt design uten flere enheter | +| **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 | #### Anbefalte nettlesere for utvikling -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Bransjestandard DevTools med omfattende dokumentasjon -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Utmerkede verktøy for CSS Grid og tilgjengelighet +- **[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 -> ⚠️ **Viktig testtips**: Test alltid nettstedene dine i flere nettlesere! Det som fungerer perfekt i Chrome kan se annerledes ut i Safari eller Firefox. Profesjonelle utviklere tester på alle store nettlesere for å sikre en konsistent brukeropplevelse. +> ⚠️ **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. -### Kommandolinjeverktøy: Din inngang til utvikler-superkrefter +### Kommandolinjeverktøy: Din inngangsport til utviklersuperkrefter -Ok, la oss være helt ærlige 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 fra 1980-tallet, og jeg er definitivt ikke smart nok for dette!" 😅 +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!" 😅 -Men her er det jeg skulle ønske noen hadde fortalt meg den gangen, og det jeg forteller 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 fint og enkelt) versus å gå inn på din favorittlokale restaurant der kokken vet nøyaktig hva du liker og kan lage noe perfekt bare ved at du sier "overrask meg med noe fantastisk." +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." -Kommandolinjen er der utviklere går for å føle seg som ekte trollmenn. Du skriver noen tilsynelatende magiske ord (ok, de 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 distribuert appen din til internett for millioner av mennesker å se. Når du får en smak av den kraften, blir det ærlig talt ganske avhengighetsskapende! +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! -**Hvorfor kommandolinjen vil bli ditt favorittverktøy:** +**Hvorfor kommandolinjen blir ditt favorittverktøy:** -Selv om grafiske grensesnitt er flotte for mange oppgaver, utmerker kommandolinjen seg når det gjelder automatisering, presisjon og hastighet. Mange utviklingsverktøy fungerer primært gjennom kommandolinjegrensesnitt, og det å lære å bruke dem effektivt kan dramatisk forbedre produktiviteten din. +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. ```bash -# Step 1: Create and navigate to project directory +# Trinn 1: Opprett og naviger til prosjektmappen mkdir my-awesome-website cd my-awesome-website ``` **Dette gjør koden:** -- **Oppretter** en ny mappe kalt "my-awesome-website" for prosjektet ditt -- **Navigerer** inn i den nyopprettede mappen for å begynne arbeidet +- **Oppretter** en ny katalog kalt "my-awesome-website" for prosjektet ditt +- **Går inn** i den nylig opprettede katalogen for å begynne å jobbe ```bash -# Step 2: Initialize project with package.json +# Trinn 2: Initialiser prosjektet med package.json npm init -y -# Install modern development tools +# Installer moderne utviklingsverktøy npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **Steg for steg, dette skjer:** -- **Initialiserer** et nytt Node.js-prosjekt med standardinnstillinger ved hjelp av `npm init -y` -- **Installerer** Vite som et moderne byggverktøy for rask utvikling og produksjonsbygg -- **Legger til** Prettier for automatisk kodeformatering og ESLint for kodekvalitetssjekker -- **Bruker** flagget `--save-dev` for å merke disse som kun utviklingsavhengigheter +- **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 ```bash -# Step 3: Create project structure and files +# Trinn 3: Opprett prosjektstruktur og filer mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Start utviklingsserver npx vite ``` -**I det ovennevnte har vi:** -- **Organisert** prosjektet vårt ved å opprette separate mapper for kildekode og ressurser -- **Generert** en grunnleggende HTML-fil med riktig dokumentstruktur -- **Startet** Vite utviklingsserveren for live oppdatering og hot module replacement +**I det ovenfor har vi:** +- **Organisert** prosjektet ved å lage separate mapper for kildekode og ressurser +- **Generert** en enkel HTML-fil med korrekt dokumentstruktur +- **Startet** Vite utviklingsserver for live reload og hot module replacement -#### Essensielle kommandolinjeverktøy for webutvikling +#### Viktige kommandolinjeverktøy for webutvikling | Verktøy | Formål | Hvorfor du trenger det | -|--------|--------|-------------------------| -| **[Git](https://git-scm.com/)** | Versjonskontroll | Spor endringer, samarbeid med andre, sikkerhetskopier arbeidet ditt | +|---------|--------|-----------------------| +| **[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/)** | Byggverktøy & utviklingsserver | Lynrask utvikling med hot module replacement | +| **[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 konsekvent formatert og lesbar | +| **[Prettier](https://prettier.io/)** | Kodeformatering | Hold koden din konsekvent formatert og lesbar | #### 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 skriptemiljø -- **[Kommandoprompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradisjonell Windows-kommandolinje +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftig skriptmiljø +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradisjonell Windows kommandolinje **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Innebygd terminalapplikasjon @@ -550,59 +669,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)** - Avansert terminalemulator -> 💻 = Forhåndsinstallert på operativsystemet +> 💻 = Forhåndsinstallert i operativsystemet -> 🎯 **Læringsvei**: Start med grunnleggende kommandoer som `cd` (bytt mappe), `ls` eller `dir` (list filer), og `mkdir` (opprett mappe). Øv med moderne arbeidsflytkommandoer som `npm install`, `git status`, og `code .` (åpner gjeldende mappe i VS Code). Etter hvert som du blir mer komfortabel, vil du naturlig plukke opp mer avanserte kommandoer og automatiseringsteknikker. +> 🎯 **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. -### Dokumentasjon: Din alltid-tilgjengelige læringsmentor +### Dokumentasjon: Din alltid tilgjengelige læringsmentor -Ok, la meg dele en liten hemmelighet som kommer til å få deg til å føle deg mye bedre som 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 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! -Tenk på dokumentasjon som å ha tilgang til verdens mest tålmodige, kunnskapsrike lærere som er tilgjengelige 24/7. Sitter du fast med et problem klokken 02:00? Dokumentasjonen er der med en varm virtuell klem og akkurat det svaret du trenger. Vil du lære om en kul ny funksjon som 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 å klikke! +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! -Her er noe som fullstendig endret mitt perspektiv: webutviklingsverdenen beveger seg utrolig raskt, og ingen (jeg mener absolutt ingen!) husker alt. Jeg har sett seniorutviklere med 15+ års erfaring slå opp grunnleggende syntaks, og vet du hva? Det er ikke flaut – det er smart! Det handler ikke om å ha en perfekt hukommelse; det handler om å vite hvor man finner pålitelige svar raskt og forstå hvordan man bruker dem. +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 hvor den virkelige magien skjer:** +**Her skjer den virkelige magien:** -Profesjonelle utviklere bruker en betydelig del av tiden sin på å lese dokumentasjon – ikke fordi de ikke vet hva de gjør, men fordi webutviklingslandskapet utvikler seg så raskt at det å holde seg oppdatert krever kontinuerlig læring. God dokumentasjon hjelper deg å forstå ikke bare *hvordan* du bruker noe, men *hvorfor* og *når* du skal bruke det. +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. -#### Essensielle dokumentasjonsressurser +#### Viktige dokumentasjonsressurser **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Gullstandarden for dokumentasjon om webteknologi +- Gullstandarden for webteknologidokumentasjon - Omfattende guider for HTML, CSS og JavaScript -- Inkluderer informasjon om nettleserkompatibilitet +- Inkluderer nettleserkompatibilitetsinformasjon - Har praktiske eksempler og interaktive demoer **[Web.dev](https://web.dev)** (av Google) -- Beste praksis for moderne webutvikling +- Moderne beste praksis for webutvikling - Veiledninger for ytelsesoptimalisering -- Prinsipper for tilgjengelighet og inkluderende design +- Tilgjengelighets- og inkluderende designprinsipper - Casestudier fra virkelige prosjekter **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ressurser for Edge-nettleserutvikling +- Utviklerressurser for Edge-nettleser - Veiledninger for Progressive Web Apps -- Innsikt i tverrplattformutvikling +- Innsikt om kryssplattformutvikling **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - Strukturerte læringsplaner - Videokurs fra bransjeeksperter -- Praktiske kodeøvelser +- Praktiske kodingøvelser -> 📚 **Studiestrategi**: Ikke prøv å memorere dokumentasjon – lær heller hvordan du navigerer den effektivt. Bokmerk ofte brukte referanser og øv på å bruke søkefunksjonene for å finne spesifikk informasjon raskt. +> 📚 **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. -✅ **Noe å tenke på**: Her er noe interessant å fundere på – hvordan tror du verktøyene for å bygge nettsteder (utvikling) kan være forskjellige fra verktøyene for å designe hvordan de ser ut (design)? Det er som forskjellen mellom å være en arkitekt som designer et vakkert hus og entreprenøren som faktisk bygger det. Begge er avgjørende, men de trenger forskjellige verktøykasser! Denne typen tenkning vil virkelig hjelpe deg å se det store bildet av hvordan nettsteder blir til. +### 🔧 **Verktøymestertest: Hva treffer deg mest?** +**Ta et øyeblikk til å tenke på:** +- Hvilket verktøy gleder du deg mest til å prøve først? (Det finnes ikke incorrect 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? + +```mermaid +pie title "Utviklertid Brukt med Verktøy" + "Kodeeditor" : 40 + "Nettlesertesting" : 25 + "Kommandolinje" : 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! + +✅ **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. ## GitHub Copilot Agent-utfordring 🚀 -Bruk Agent-modus for å fullføre følgende utfordring: +Bruk Agent-modusen til å fullføre følgende utfordring: -**Beskrivelse:** Utforsk funksjonene til en moderne kodeeditor eller IDE og demonstrer hvordan den kan forbedre arbeidsflyten din som webutvikler. +**Beskrivelse:** Utforsk funksjonene til en moderne kodeeditor eller IDE og vis hvordan den kan forbedre arbeidsflyten din som webutvikler. -**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 den forbedrer arbeidsflyten din. +**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. --- @@ -610,59 +745,121 @@ Bruk Agent-modus for å fullføre følgende utfordring: **Ok, detektiv, klar for din første sak?** -Nå som du har fått denne fantastiske grunnlaget, har jeg et eventyr som kommer til å 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 der! 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 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! **Din oppgave, hvis du velger å akseptere den:** -1. **Bli en språkutforsker**: Velg tre programmeringsspråk fra helt forskjellige universer – kanskje ett som bygger nettsteder, ett som lager mobilapper, og ett som analyserer data for forskere. Finn eksempler på den samme enkle oppgaven skrevet i hvert språk. Jeg lover at du kommer til å bli helt fascinert av hvor forskjellige de kan se ut mens de gjør nøyaktig det samme! +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! -2. **Avdekk deres opprinnelseshistorier**: Hva gjør hvert språk spesielt? Her er en kul fakta – hvert eneste programmeringsspråk ble skapt fordi noen tenkte: "Du vet hva? Det må finnes en bedre måte å løse dette spesifikke problemet på." Kan du finne ut hva disse problemene var? Noen av disse historiene er virkelig fascinerende! +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! -3. **Møt fellesskapene**: Sjekk ut hvor velkomne 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 disse fellesskapene har! +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! -4. **Følg magefølelsen din**: Hvilket språk føles mest tilgjengelig for deg akkurat nå? Ikke stress med å ta det "perfekte" valget – bare lytt til instinktene dine! Det er ærlig talt ingen 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 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. -**Bonusdetektivarbeid**: Se om du kan finne ut hvilke store nettsteder eller apper som er bygget med hvert språk. Jeg garanterer at du vil bli overrasket over å lære hva som driver Instagram, Netflix eller det mobilspillet du ikke kan slutte å spille! +**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! -> 💡 **Husk**: Du prøver 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 god tid, ha det gøy med det, og la nysgjerrigheten din lede 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! ## La oss feire det du har oppdaget! -Wow, du har absorbert så mye utrolig informasjon i dag! Jeg er genuint spent på å se hvor mye av denne fantastiske reisen som har festet seg hos deg. Og husk – dette er ikke en test der du må få alt riktig. Dette er mer som en feiring av alle de kule tingene du har lært om denne fascinerende verdenen du er i ferd med å dykke inn i! +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! -[Ta etter-leksjon quiz](https://ff-quizzes.netlify.app/web/) - -## Gjennomgang & Selvstudium +[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!** -Du har dekket mye i dag, og det er noe å være stolt av! Nå kommer den morsomme delen – å utforske temaene som vekket din nysgjerrighet. Husk, dette er ikke lekser – det er et eventyr! +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! -**Utforsk det som interesserer deg:** +**Dyk dypere inn i det som begeistrer deg:** -**Bli praktisk med programmeringsspråk:** -- Besøk de offisielle nettstedene til 2-3 språk som fanget oppmerksomheten din. Hvert språk har sin egen personlighet og historie! -- Prøv noen online 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åkene fungerer som de gjør. +**Prøv deg på 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. **Bli komfortabel med dine nye verktøy:** -- Last ned Visual Studio Code hvis du ikke allerede har gjort det – det er gratis og du kommer til å elske det! -- Bruk noen minutter på å bla gjennom Extensions-markedet. Det er som en appbutikk for kodeeditoren din! -- Åpne nettleserens utviklerverktøy og klikk rundt. Ikke bekymre deg for å forstå alt – bare bli kjent med hva som finnes der. +- Last ned Visual Studio Code hvis du ikke har gjort det allerede – 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. **Bli med i fellesskapet:** -- Følg noen utviklerfellesskap på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Utviklerfellesskapet er utrolig velkomment for nybegynnere! -- Se noen nybegynnervennlige kodevideoer på YouTube. Det finnes så mange fantastiske skapere der ute som husker hvordan det er å være helt i starten. -- Vurder å bli med på lokale meetups eller online fellesskap. Stol på meg, utviklere elsker å hjelpe nybegynnere! +- 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. +- 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 er ikke forventet å bli en kodeekspert over natten! Akkurat nå handler det om å bli 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 har en gang sittet akkurat der du er nå, følt seg spent og kanskje litt overveldet. Det er helt normalt, og det betyr at du gjør det riktig! -## Oppgave -[Les dokumentasjonen](assignment.md) +## Oppgave -> 💡 **Et lite hint 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ø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 verktøy som aktivt vedlikeholdes og har levende, hjelpsomme fellesskap (disse har ofte de beste veiledningene og de mest støttende folkene når du uunngåelig står fast og trenger en vennlig hjelpende hånd). +[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). + +--- + +## 🚀 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) + +### ⏰ **Hva du kan oppnå denne timen** +- [ ] Fullfør quizen 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) + +### 📅 **Ditt ukeslange eventyr** +- [ ] 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 + +### 🗓️ **Din månedslange transformasjon** +- [ ] 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 +- [ ] Knytt kontakt med lokale utviklerfellesskap eller studiegrupper +- [ ] Begynn å planlegge ditt neste læringsmål + +### 🎯 **Endelig refleksjon** + +**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? +- Hva er ett spørsmål du gjerne vil stille en utvikler akkurat nå? + +```mermaid +journey + title Din Reise for Å Bygge Selvtillit + section I dag + Nysgjerrig: 3: You + Overveldet: 4: You + Spent: 5: You + section Denne Uken + Utforsker: 4: You + Lærer: 5: You + Knytter Kontakter: 4: You + section Neste Måned + Bygger: 5: You + Selvsikker: 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! 🎉 --- -**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 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 misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. \ No newline at end of file + +**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. + \ No newline at end of file diff --git a/translations/no/1-getting-started-lessons/2-github-basics/README.md b/translations/no/1-getting-started-lessons/2-github-basics/README.md index 26ecfc2cd..2f3189057 100644 --- a/translations/no/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/no/1-getting-started-lessons/2-github-basics/README.md @@ -1,123 +1,162 @@ # Introduksjon til GitHub -Hei der, fremtidige utvikler! 👋 Klar for å bli med millioner av kodere over hele verden? Jeg er virkelig spent på å introdusere deg for GitHub – tenk på det som en sosial medieplattform for programmerere, bortsett fra at vi deler kode og bygger fantastiske ting sammen i stedet for å dele bilder av lunsjen vår! +Hei der, fremtidige utvikler! 👋 Klar til å bli med millioner av kodere rundt om i verden? Jeg er virkelig spent på å introdusere deg for GitHub – tenk på det som sosiale medier for programmerere, bortsett fra at i stedet for å dele bilder av lunsjen din, deler vi kode og bygger utrolige ting sammen! -Her er noe som virkelig blåser meg av banen: hver app på telefonen din, hver nettside du besøker, og de fleste verktøyene du kommer til å lære å bruke, ble bygget av team av utviklere som samarbeidet på plattformer akkurat som GitHub. Den musikkappen du elsker? Noen som deg bidro til den. Det spillet du ikke kan legge fra deg? Jepp, sannsynligvis bygget med GitHub-samarbeid. Og nå skal DU lære hvordan du kan bli en del av det fantastiske fellesskapet! +Dette er noe som virkelig blåser meg av banen: hver app på telefonen din, hver nettside du besøker, og de fleste verktøyene du lærer å bruke ble laget av team av utviklere som samarbeidet på plattformer akkurat som GitHub. Den musikkappen du elsker? Noen som deg har bidratt til den. Det spillet du ikke klarer å legge fra deg? Yep, sannsynligvis bygget med samarbeid på GitHub. Og nå SKAL DU lære hvordan du blir en del av det fantastiske fellesskapet! -Jeg vet at dette kan føles overveldende i starten – jeg husker selv da jeg stirret på min første GitHub-side og tenkte "Hva i all verden betyr dette?" Men her er greia: hver eneste utvikler startet akkurat der du er nå. Innen slutten av denne leksjonen vil du ha din egen GitHub-repository (tenk på det som din personlige prosjektutstilling i skyen), og du vil vite hvordan du lagrer arbeidet ditt, deler det med andre, og til og med bidrar til prosjekter som millioner av mennesker bruker. +Jeg vet dette kan føles som mye i starten – jeg husker selv da jeg stirret på min første GitHub-side og tenkte "Hva i alle dager betyr egentlig dette?" Men her er greia: hver eneste utvikler startet akkurat der du er nå. Når du er ferdig med denne leksjonen, vil du ha ditt helt eget GitHub-repositorium (tenk på det som din personlige prosjektutstilling i skyen), og du vil vite hvordan du lagrer arbeidet ditt, deler det med andre, og til og med bidrar til prosjekter som millioner av mennesker bruker. -Vi skal ta denne reisen sammen, ett steg av gangen. Ingen hastverk, ingen press – bare deg, meg, og noen virkelig kule verktøy som snart kommer til å bli dine nye bestevenner! +Vi skal ta denne reisen sammen, ett steg av gangen. Ikke hast, ingen press – bare du, meg, og noen skikkelig kule verktøy som snart blir dine nye bestevenner! -![Intro til GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.no.png) +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.no.png) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) -## Quiz før leksjonen -[Quiz før leksjonen](https://ff-quizzes.netlify.app) +```mermaid +journey + title Ditt GitHub-eventyr i dag + section Oppsett + Installer Git: 4: Du + Opprett konto: 5: Du + Første repository: 5: Du + section Mestre Git + Lokale endringer: 4: Du + Commits & pushes: 5: Du + Branching: 4: Du + section Samarbeid + Fork prosjekter: 4: Du + Pull requests: 5: Du + Open source: 5: Du +``` +## Forhåndsquiz +[Forhåndsquiz](https://ff-quizzes.netlify.app) ## Introduksjon -Før vi dykker inn i de virkelig spennende tingene, la oss gjøre datamaskinen din klar for litt GitHub-magi! Tenk på dette som å organisere kunstforsyningene dine før du lager et mesterverk – å ha de riktige verktøyene klare gjør alt så mye enklere og mye morsommere. +Før vi dykker ned i det virkelig spennende, la oss gjøre datamaskinen din klar for litt GitHub-magi! Tenk på dette som å organisere kunsttilbehøret ditt før du lager et mesterverk – å ha de riktige verktøyene klart gjør alt mye smidigere og mye morsommere. -Jeg skal gå gjennom hvert oppsettsteg med deg personlig, og jeg lover at det ikke er i nærheten av så skremmende som det kanskje ser ut ved første øyekast. Hvis noe ikke gir mening med en gang, er det helt normalt! Jeg husker da jeg satte opp mitt første utviklingsmiljø og følte meg som om jeg prøvde å lese gamle hieroglyfer. Hver eneste utvikler har vært akkurat der du er nå, og lurt på om de gjør det riktig. Spoiler: hvis du er her og lærer, gjør du det allerede riktig! 🌟 +Jeg skal gå gjennom hver oppsettsteg personlig, og jeg lover at det ikke er så skremmende som det kan se ut ved første øyekast. Hvis noe ikke klikker med en gang, er det helt normalt! Jeg husker jeg satte opp mitt første utviklingsmiljø og følte at jeg prøvde å lese eldgamle hieroglyfer. Hver eneste utvikler har vært akkurat der du er nå, og lurt på om de gjør det riktig. Spoiler alert: hvis du er her og lærer, gjør du det allerede riktig! 🌟 I denne leksjonen skal vi dekke: -- hvordan du sporer arbeidet du gjør på maskinen din -- hvordan du jobber med prosjekter sammen med andre -- hvordan du kan bidra til åpen kildekode-programvare +- sporing av arbeidet du gjør på maskinen din +- hvordan jobbe på prosjekter sammen med andre +- hvordan bidra til åpen kildekode-programvare ### Forutsetninger -La oss gjøre datamaskinen din klar for litt GitHub-magi! Ikke bekymre deg – dette oppsettet er noe du bare trenger å gjøre én gang, og deretter er du klar for hele kodereisen din. +La oss gjøre datamaskinen din klar for litt GitHub-magi! Ikke bekymre deg – dette oppsettet trenger du bare gjøre én gang, så er du klar for hele kodereisen din. -Ok, la oss starte med grunnlaget! Først må vi sjekke om Git allerede er installert på datamaskinen din. Git er i utgangspunktet som å ha en super-smart assistent som husker hver eneste endring du gjør i koden din – mye bedre enn å frenetisk trykke Ctrl+S hvert andre sekund (vi har alle vært der!). +Ok, la oss begynne med grunnlaget! Først må vi sjekke om Git allerede finnes på datamaskinen din. Git er i bunn og grunn som en supersmart assistent som husker hver eneste endring du gjør i koden din – mye bedre enn å panikktrykke Ctrl+S hvert annet sekund (vi har alle vært der!). La oss se om Git allerede er installert ved å skrive denne magiske kommandoen i terminalen din: `git --version` -Hvis Git ikke er der ennå, ingen grunn til bekymring! Bare gå til [last ned Git](https://git-scm.com/downloads) og last det ned. Når du har installert det, må vi introdusere Git ordentlig for deg: +Hvis Git ikke er der ennå, ingen problem! Gå bare til [last ned Git](https://git-scm.com/downloads) og hent det. Når du har installert det, må vi introdusere Git for deg på riktig måte: -> 💡 **Første gangs oppsett**: Disse kommandoene forteller Git hvem du er. Denne informasjonen vil bli knyttet til hver commit du gjør, så velg et navn og en e-postadresse du er komfortabel med å dele offentlig. +> 💡 **Første gang-oppsett**: Disse kommandoene forteller Git hvem du er. Denne informasjonen vil bli knyttet til hver commit du lager, så velg et navn og en e-post du er komfortabel med å dele offentlig. ```bash git config --global user.name "your-name" git config --global user.email "your-email" ``` -For å sjekke om Git allerede er konfigurert, kan du skrive: +For å sjekke om Git allerede er konfigurert kan du skrive: ```bash git config --list ``` -Du trenger også en GitHub-konto, en kodeeditor (som Visual Studio Code), og du må åpne terminalen din (eller: kommandolinjen). +Du vil også trenge en GitHub-konto, en kodeeditor (som Visual Studio Code), og du må åpne terminalen din (eller: kommandoprompt). -Gå til [github.com](https://github.com/) og opprett en konto hvis du ikke allerede har en, eller logg inn og fyll ut profilen din. +Gå til [github.com](https://github.com/) og opprett en konto hvis du ikke har en fra før, eller logg inn og fyll ut profilen din. 💡 **Moderne tips**: Vurder å sette opp [SSH-nøkler](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) eller bruke [GitHub CLI](https://cli.github.com/) for enklere autentisering uten passord. -✅ GitHub er ikke det eneste kode-repositoriet i verden; det finnes andre, men GitHub er det mest kjente. +✅ GitHub er ikke det eneste kode-repositoriet der ute; det finnes andre, men GitHub er det mest kjente ### Forberedelse -Du trenger både en mappe med et kodeprosjekt på din lokale maskin (laptop eller PC), og et offentlig repository på GitHub, som vil fungere som et eksempel på hvordan du kan bidra til andres prosjekter. +Du trenger både en mappe med et kodeprosjekt på din lokale maskin (laptop eller PC), og et offentlig repositorium på GitHub, som vil tjene som et eksempel på hvordan du kan bidra til andres prosjekter. -### Hold koden din trygg +### Holde koden din sikker -La oss snakke om sikkerhet et øyeblikk – men ikke bekymre deg, vi skal ikke overvelde deg med skumle ting! Tenk på disse sikkerhetspraksisene som å låse bilen eller huset ditt. De er enkle vaner som blir en selvfølge og holder det harde arbeidet ditt beskyttet. +La oss snakke litt om sikkerhet – men ikke bekymre deg, vi skal ikke overvelde deg med skremmende ting! Tenk på disse sikkerhetsrutinene som å låse bilen eller huset ditt. De er enkle vaner som blir andre natur og beskytter det harde arbeidet ditt. -Vi skal vise deg moderne, sikre måter å jobbe med GitHub fra starten av. På denne måten vil du utvikle gode vaner som vil tjene deg godt gjennom hele kodingskarrieren din. +Vi skal vise deg moderne og sikre måter å jobbe med GitHub på helt fra starten. På den måten utvikler du gode vaner som vil tjene deg godt gjennom hele kodekarrieren din. -Når du jobber med GitHub, er det viktig å følge sikkerhetspraksis: +Når du jobber med GitHub er det viktig å følge sikkerhetsbest practices: | Sikkerhetsområde | Beste praksis | Hvorfor det er viktig | -|------------------|---------------|------------------------| -| **Autentisering** | Bruk SSH-nøkler eller Personlige Tilgangstokens | Passord er mindre sikre og blir faset ut | -| **Tofaktorautentisering** | Aktiver 2FA på GitHub-kontoen din | Gir et ekstra lag med kontobeskyttelse | -| **Repository-sikkerhet** | Aldri commit sensitiv informasjon | API-nøkler og passord skal aldri være i offentlige repositorier | -| **Avhengighetsstyring** | Aktiver Dependabot for oppdateringer | Holder avhengighetene dine sikre og oppdaterte | +|------------------|--------------|----------------------| +| **Autentisering** | Bruk SSH-nøkler eller personlige tilgangstokener | Passord er mindre sikre og fases ut | +| **To-faktor autentisering** | Aktiver 2FA på GitHub-kontoen din | Legger til et ekstra lag med kontobeskyttelse | +| **Repositoriumssikkerhet** | Ikke commit sensitiv informasjon | API-nøkler og passord skal aldri være i offentlige repoer | +| **Avhengighetsstyring** | Aktiver Dependabot for oppdateringer | Holder dine avhengigheter sikre og oppdaterte | -> ⚠️ **Kritisk sikkerhetspåminnelse**: Aldri commit API-nøkler, passord eller annen sensitiv informasjon til noe repository. Bruk miljøvariabler og `.gitignore`-filer for å beskytte sensitiv data. +> ⚠️ **Kritisk sikkerhetsvarsel**: Aldri commit API-nøkler, passord eller annen sensitiv informasjon i noen repositorium. Bruk miljøvariabler og `.gitignore`-filer for å beskytte sensitiv data. **Moderne autentiseringsoppsett:** ```bash -# Generate SSH key (modern ed25519 algorithm) +# Generer SSH-nøkkel (moderne ed25519-algoritme) ssh-keygen -t ed25519 -C "your_email@example.com" -# Set up Git to use SSH +# Sett opp Git til å bruke SSH git remote set-url origin git@github.com:username/repository.git ``` -> 💡 **Proff-tips**: SSH-nøkler eliminerer behovet for å skrive inn passord gjentatte ganger og er mer sikre enn tradisjonelle autentiseringsmetoder. +> 💡 **Profftips**: SSH-nøkler eliminerer behovet for å skrive inn passord gjentatte ganger og er sikrere enn tradisjonelle autentiseringsmetoder. --- ## Administrer koden din som en proff -Ok, NÅ blir det virkelig spennende! 🎉 Vi skal lære hvordan du sporer og administrerer koden din som proffene gjør, og helt ærlig, dette er en av mine favoritting å lære bort fordi det er en skikkelig game-changer. - -Se for deg dette: du skriver en fantastisk historie, og du vil holde styr på hver utkast, hver briljant redigering, og hver "vent, det der er genialt!"-øyeblikk underveis. Det er akkurat det Git gjør for koden din! Det er som å ha den mest utrolige tidsreisende notatboken som husker ALT – hver tastetrykk, hver endring, hver "oi, det ødela alt"-øyeblikk som du umiddelbart kan angre. - -Jeg skal være ærlig – dette kan føles overveldende i starten. Da jeg begynte, tenkte jeg "Hvorfor kan jeg ikke bare lagre filene mine som vanlig?" Men stol på meg: når Git klikker for deg (og det vil!), vil du ha et av de lyspære-øyeblikkene hvor du tenker "Hvordan har jeg NOEN GANG kodet uten dette?" Det er som å oppdage at du kan fly når du har gått overalt hele livet! - -La oss si at du har en mappe lokalt med et kodeprosjekt, og du vil begynne å spore fremgangen din ved hjelp av git – versjonskontrollsystemet. Noen sammenligner det å bruke git med å skrive et kjærlighetsbrev til ditt fremtidige jeg. Når du leser commit-meldingene dine dager, uker eller måneder senere, vil du kunne huske hvorfor du tok en beslutning, eller "rulle tilbake" en endring – det vil si, når du skriver gode "commit-meldinger". - -### Oppgave: Opprett ditt første repository! +Ok, HER begynner det virkelig å bli spennende! 🎉 Vi skal lære hvordan du sporer og håndterer koden din slik proffene gjør det, og ærlig talt er dette en av mine favoritting å lære bort fordi det er en så stor forandring. + +Se for deg at du skriver en fantastisk historie, og du vil holde styr på hvert utkast, hver strålende endring, og hvert "vent, det var genialt!"-øyeblikk underveis. Det er nøyaktig det Git gjør for koden din! Det er som å ha den mest utrolige tidsreisende notatboken som husker ALT – hver tast, hver endring, hvert "oops, nå brøt jeg alt"-øyeblikk som du kan angre på med en gang. + +Jeg skal være ærlig – dette kan føles overveldende i starten. Da jeg begynte, tenkte jeg "Hvorfor kan jeg ikke bare lagre filene mine som vanlig?" Men stol på meg: når Git klikker for deg (og det vil det!), får du et øyeblikk der du tenker "Hvordan kunne jeg NOENSINNE kode uten dette?" Det er som å oppdage at du kan fly når du har gått overalt hele livet! + +Si at du har en mappe lokalt med et kodeprosjekt og vil begynne å spore fremgangen din med git - versjonskontrollsystemet. Noen sammenligner bruk av git med å skrive et kjærlighetsbrev til ditt fremtidige jeg. Når du leser commit-meldingene dine dager, uker eller måneder senere kan du huske hvorfor du tok en beslutning, eller "tilbakestille" en endring – det vil si, når du skriver gode "commit-meldinger". + +```mermaid +flowchart TD + A[📁 Dine Prosjektfiler] --> B{Er det et Git Repository?} + B -->|Nei| C[git init] + B -->|Ja| D[Gjøre endringer] + C --> D + D --> E[git add .] + E --> F["git commit -m 'melding'"] + F --> G[git push] + G --> H[🌟 Kode på GitHub!] + + H --> I{Vil du samarbeide?} + I -->|Ja| J[Fork & Klon] + I -->|Nei| D + J --> K[Opprett Gren] + K --> L[Gjøre endringer] + L --> M[Pull-forespørsel] + M --> N[🎉 Bidrar!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### Oppgave: Lag ditt første repositorium! -> 🎯 **Din oppgave (og jeg er så spent på deg!)**: Vi skal opprette ditt aller første GitHub-repository sammen! Når vi er ferdige her, vil du ha din egen lille hjørne av internett hvor koden din bor, og du vil ha gjort din første "commit" (det er utviklerspråk for å lagre arbeidet ditt på en veldig smart måte). +> 🎯 **Din oppgave (og jeg er så spent på deg!)**: Vi skal lage ditt aller første GitHub-repositorium sammen! Når vi er ferdige her, vil du ha ditt eget lille hjørne av internett hvor koden din lever, og du vil ha gjort din første "commit" (det er utviklerspråk for å lagre arbeidet ditt på en smart måte). > -> Dette er ærlig talt et så spesielt øyeblikk – du er i ferd med å offisielt bli med i det globale fellesskapet av utviklere! Jeg husker fortsatt spenningen ved å opprette mitt første repo og tenke "Wow, jeg gjør virkelig dette!" +> Dette er virkelig et spesielt øyeblikk – du er i ferd med å bli en offisiell del av det globale utviklersamfunnet! Jeg husker fortsatt hvor spennende det var å lage mitt første repo og tenke "Wow, jeg gjør virkelig dette!" -La oss gå gjennom dette eventyret sammen, steg for steg. Ta deg god tid med hver del – det er ingen premie for å skynde seg, og jeg lover at hvert eneste steg vil gi mening. Husk, hver kodestjerne du beundrer, satt en gang akkurat der du er nå, klar til å opprette sitt første repository. Hvor kult er det? +La oss gå gjennom dette eventyret sammen, steg for steg. Ta den tiden du trenger med hver del – det er ingen premie for å skynde seg, og jeg lover at hvert eneste steg vil gi mening. Husk, hver kode-superstjerne du beundrer satt en gang her akkurat der du er, og var i ferd med å lage sitt første repositorium. Hvor kult er ikke det? > Sjekk ut videoen > @@ -125,46 +164,46 @@ La oss gå gjennom dette eventyret sammen, steg for steg. Ta deg god tid med hve **La oss gjøre dette sammen:** -1. **Opprett ditt repository på GitHub**. Gå til GitHub.com og se etter den lysegrønne **Ny**-knappen (eller **+**-tegnet øverst til høyre). Klikk på den og velg **Nytt repository**. +1. **Lag ditt repositorium på GitHub**. Gå til GitHub.com og se etter den lysegrønne **New**-knappen (eller **+**-tegnet øverst til høyre). Klikk på den og velg **New repository**. - Slik gjør du det: - 1. Gi repositoryet ditt et navn – velg noe som betyr noe for deg! - 1. Legg til en beskrivelse hvis du vil (dette hjelper andre med å forstå hva prosjektet ditt handler om) - 1. Bestem om du vil ha det offentlig (alle kan se det) eller privat (bare for deg) - 1. Jeg anbefaler å krysse av for å legge til en README-fil – det er som forsiden av prosjektet ditt - 1. Klikk **Opprett repository** og feir – du har nettopp opprettet ditt første repo! 🎉 + Her er hva du skal gjøre: + 1. Gi repositoriet ditt et navn – gjør det meningsfullt for deg! + 1. Legg til en beskrivelse hvis du vil (det hjelper andre å forstå hva prosjektet ditt handler om) + 1. Bestem om det skal være offentlig (alle kan se det) eller privat (bare for deg) + 1. Jeg anbefaler å hake av for å legge til en README-fil – det er som forsiden av prosjektet ditt + 1. Klikk **Create repository** og feir – du har akkurat laget ditt første repo! 🎉 -2. **Naviger til prosjektmappen din**. Nå skal vi åpne terminalen din (ikke bekymre deg, det er ikke så skummelt som det ser ut!). Vi må fortelle datamaskinen hvor prosjektfilene dine er. Skriv denne kommandoen: +2. **Naviger til prosjektmappen din**. Nå åpner vi terminalen din (ikke vær redd, det er ikke så skummelt som det ser ut!). Vi må fortelle datamaskinen hvor prosjektfilene dine er. Skriv denne kommandoen: ```bash cd [name of your folder] ``` **Hva vi gjør her:** - - Vi sier i utgangspunktet "Hei datamaskin, ta meg til prosjektmappen min" - - Dette er som å åpne en spesifikk mappe på skrivebordet ditt, men vi gjør det med tekstkommandoer - - Erstatt `[navnet på mappen din]` med det faktiske navnet på prosjektmappen din + - Vi sier egentlig "Hei datamaskin, ta meg til prosjektmappen min" + - Det er som å åpne en bestemt mappe på skrivebordet, men vi gjør det med tekstkommandoer + - Bytt ut `[name of your folder]` med det egentlige navnet på prosjektmappen din -3. **Gjør mappen din om til et Git repository**. Her skjer magien! Skriv: +3. **Gjør mappen din om til et Git-repositorium**. Nå skjer magien! Skriv: ```bash git init ``` - **Her er hva som nettopp skjedde (ganske kult!):** - - Git opprettet en skjult `.git`-mappe i prosjektet ditt – du ser den ikke, men den er der! - - Den vanlige mappen din er nå et "repository" som kan spore hver endring du gjør - - Tenk på det som å gi mappen din superkrefter til å huske alt + **Dette skjedde nettopp (kult, ikke sant!):** + - Git laget akkurat en skjult `.git`-mappe i prosjektet ditt – du ser den ikke, men den er der! + - Den vanlige mappen din er nå et "repositorium" som kan spore hver endring du gjør + - Tenk på det som å gi mappen superkrefter til å huske alt -4. **Sjekk hva som skjer**. La oss se hva Git tenker om prosjektet ditt akkurat nå: +4. **Sjekk hva som skjer**. La oss se hva Git mener om prosjektet ditt akkurat nå: ```bash git status ``` - **Forstå hva Git forteller deg:** + **Slik forstår du hva Git forteller deg:** - Du kan se noe som ser slik ut: + Du kan se noe som dette: ```output Changes not staged for commit: @@ -175,46 +214,46 @@ La oss gå gjennom dette eventyret sammen, steg for steg. Ta deg god tid med hve modified: file2.txt ``` - **Ikke få panikk! Her er hva dette betyr:** - - Filer i **rødt** er filer som har endringer, men som ikke er klare til å lagres ennå + **Ikke få panikk! Dette betyr:** + - Filer i **rødt** er filer som har endringer, men ikke er klare til å lagres enda - Filer i **grønt** (når du ser dem) er klare til å lagres - - Git er hjelpsom ved å fortelle deg nøyaktig hva du kan gjøre videre + - Git hjelper deg ved å fortelle nøyaktig hva du kan gjøre videre - > 💡 **Proff-tips**: Kommandoen `git status` er din beste venn! Bruk den når som helst du er forvirret over hva som skjer. Det er som å spørre Git "Hei, hva er situasjonen akkurat nå?" + > 💡 **Profftips**: Kommandoen `git status` er din beste venn! Bruk den når du er usikker på hva som foregår. Det er som å spørre Git "Hei, hva skjer akkurat nå?" -5. **Gjør filene dine klare til å lagres** (dette kalles "staging"): +5. **Gjør filene klare til lagring** (dette kalles "staging"): ```bash git add . ``` **Hva vi nettopp gjorde:** - - Vi fortalte Git "Hei, jeg vil inkludere ALLE filene mine i neste lagring" - - `.` er som å si "alt i denne mappen" + - Vi sa til Git "Hei, jeg vil inkludere ALLE filene i neste lagring" + - `.` betyr "alt i denne mappen" - Nå er filene dine "staged" og klare for neste steg - **Vil du være mer selektiv?** Du kan legge til bare spesifikke filer: + **Vil du være mer selektiv?** Du kan legge til bare bestemte filer: ```bash git add [file or folder name] ``` - **Hvorfor vil du kanskje gjøre dette?** - - Noen ganger vil du lagre relaterte endringer sammen - - Det hjelper deg med å organisere arbeidet ditt i logiske deler + **Hvorfor vil du kanskje gjøre det?** + - Noen ganger vil du lagre beslektede endringer sammen + - Det hjelper deg å organisere arbeidet ditt i logiske biter - Gjør det lettere å forstå hva som endret seg og når - **Endret mening?** Ingen problem! Du kan fjerne filer fra staging slik: + **Byttet mening?** Ikke stress! Du kan fjerne filer fra staging slik: ```bash - # Unstage everything + # Fjern alt fra staging git reset - # Unstage just one file + # Fjern bare én fil fra staging git reset [file name] ``` - Ikke bekymre deg – dette sletter ikke arbeidet ditt, det tar bare filene ut av "klar til å lagres"-bunken. + Ikke bekymre deg – dette sletter ikke arbeidet ditt, det fjerner bare filene fra "klare til lagring"-bunken. 6. **Lagre arbeidet ditt permanent** (gjør din første commit!): @@ -222,367 +261,515 @@ La oss gå gjennom dette eventyret sammen, steg for steg. Ta deg god tid med hve git commit -m "first commit" ``` - **🎉 Gratulerer! Du har nettopp gjort din første commit!** - - **Her er hva som nettopp skjedde:** - - Git tok et "snapshot" av alle de staged filene dine akkurat nå - - Commit-meldingen "første commit" forklarer hva dette lagringspunktet handler om - - Git ga dette snapshotet en unik ID slik at du alltid kan finne det senere - - Du har offisielt begynt å spore prosjektets historie! + **🎉 Gratulerer! Du har akkurat gjort din første commit!** + + **Dette skjedde nettopp:** + - Git tok et "øyeblikksbilde" av alle filene du hadde staged akkurat nå + - Din commit-melding "first commit" forklarer hva dette lagringspunktet handler om + - Git ga dette øyeblikksbildet en unik ID slik at du alltid kan finne det senere + - Du har offisielt begynt å spore historikken til prosjektet ditt! - > 💡 **Fremtidige commit-meldinger**: For dine neste commits, vær mer beskrivende! I stedet for "oppdatert ting", prøv "La til kontaktskjema på hjemmesiden" eller "Fikset feil i navigasjonsmenyen". Ditt fremtidige jeg vil takke deg! + > 💡 **Fremtidige commit-meldinger**: For neste commits, vær mer beskrivende! I stedet for "oppdatert ting", prøv "Legg til kontaktskjema på forsiden" eller "Fiks feil i navigasjonsmenyen". Ditt fremtidige jeg vil takke deg! -7. **Koble ditt lokale prosjekt til GitHub**. Akkurat nå eksisterer prosjektet ditt bare på datamaskinen din. La oss koble det til GitHub-repositoryet ditt slik at du kan dele det med verden! +7. **Koble det lokale prosjektet til GitHub**. Akkurat nå eksisterer prosjektet ditt kun på datamaskinen din. La oss koble det til GitHub-repositoriet ditt slik at du kan dele det med verden! - Først, gå til GitHub-repository-siden din og kopier URL-en. Deretter kommer du tilbake hit og skriver: + Først, gå til GitHub-repositoriets side og kopier URL-en. Kom så tilbake hit og skriv: ```bash git remote add origin https://github.com/username/repository_name.git ``` - (Erstatt den URL-en med din faktiske repository-URL!) + (Bytt ut URL-en med din egen repositorie-URL!) - **Hva vi nettopp gjorde:** -- Vi har opprettet en forbindelse mellom ditt lokale prosjekt og GitHub-repositoriet ditt -- "Origin" er bare et kallenavn for GitHub-repositoriet ditt – det er som å legge til en kontakt på telefonen din -- Nå vet ditt lokale Git hvor det skal sende koden din når du er klar til å dele den + **Dette gjorde vi akkurat:** + - Vi opprettet en tilkobling mellom ditt lokale prosjekt og ditt GitHub-repositorium + - "Origin" er bare et kallenavn for ditt GitHub-repositorium – det er som å legge til en kontakt i telefonen din + - Nå vet din lokale Git hvor den skal sende koden din når du er klar til å dele den -💡 **Enklere måte**: Hvis du har GitHub CLI installert, kan du gjøre dette med én kommando: + 💡 **Enklere måte**: Hvis du har GitHub CLI installert, kan du gjøre dette med én kommando: ```bash gh repo create my-repo --public --push --source=. ``` - -8. **Send koden din til GitHub** (det store øyeblikket!): + +8. **Send koden din til GitHub** (det store øyeblikket!): ```bash git push -u origin main ``` - -**🚀 Dette er det! Du laster opp koden din til GitHub!** -**Hva som skjer:** -- Dine commits reiser fra datamaskinen din til GitHub -- `-u`-flagget setter opp en permanent forbindelse slik at fremtidige pushes blir enklere -- "main" er navnet på din primære branch (som hovedmappen) -- Etter dette kan du bare skrive `git push` for fremtidige opplastinger! + **🚀 Dette er det! Du laster opp koden din til GitHub!** + + **Hva skjer:** + - Dine commits reiser fra datamaskinen din til GitHub + - `-u` flagget setter opp en permanent tilkobling slik at fremtidige pushes blir enklere + - "main" er navnet på din primære branch (som hovedmappen) + - Etter dette kan du bare skrive `git push` for fremtidige opplastinger! -💡 **Raskt notat**: Hvis branchen din heter noe annet (som "master"), bruk det navnet i stedet. Du kan sjekke med `git branch --show-current`. + 💡 **Hurtigtips**: Hvis branchen din heter noe annet (som "master"), bruk det navnet i stedet. Du kan sjekke med `git branch --show-current`. -9. **Din nye daglige koderytme** (her blir det vanedannende!): +9. **Din nye daglige kodeflyt** (her blir det vanedannende!): -Fra nå av, hver gang du gjør endringer i prosjektet ditt, har du denne enkle tretrinnsprosessen: + Fra nå av, når du gjør endringer i prosjektet ditt, har du denne enkle tre-trinns dansen: ```bash git add . git commit -m "describe what you changed" git push ``` - -**Dette blir din kodingspuls:** -- Gjør noen fantastiske endringer i koden din ✨ -- Stage dem med `git add` ("Hei Git, følg med på disse endringene!") -- Lagre dem med `git commit` og en beskrivende melding (fremtidige deg vil takke deg!) -- Del dem med verden ved å bruke `git push` 🚀 -- Gjenta – seriøst, dette blir like naturlig som å puste! - -Jeg elsker denne arbeidsflyten fordi det er som å ha flere lagringspunkter i et videospill. Gjorde du en endring du elsker? Commit den! Vil du prøve noe risikabelt? Ikke noe problem – du kan alltid gå tilbake til din siste commit hvis ting går galt! - -> 💡 **Tips**: Du vil kanskje også ta i bruk en `.gitignore`-fil for å forhindre at filer du ikke vil spore dukker opp på GitHub – som den notatfilen du lagrer i samme mappe, men som ikke har noe å gjøre i et offentlig repository. Du kan finne maler for `.gitignore`-filer på [.gitignore templates](https://github.com/github/gitignore) eller lage en ved hjelp av [gitignore.io](https://www.toptal.com/developers/gitignore). -#### Moderne Git-arbeidsflyter - -Vurder å ta i bruk disse moderne praksisene: + **Dette blir din kodepuls:** + - Gjør noen fantastiske endringer i koden din ✨ + - Stage dem med `git add` ("Hei Git, se på disse endringene!") + - Lagre dem med `git commit` og en beskrivende melding (fremtidige du kommer til å takke deg!) + - Del dem med verden ved å bruke `git push` 🚀 + - Vask og gjenta – seriøst, dette blir like naturlig som å puste! + + Jeg elsker denne arbeidsflyten fordi det er som å ha flere lagringspunkter i et videospill. Har du gjort en endring du liker? Commit den! Vil du prøve noe risikabelt? Ikke noe problem – du kan alltid gå tilbake til din siste commit hvis ting går galt! + + > 💡 **Tips**: Du vil kanskje også lage en `.gitignore` fil for å hindre at filer du ikke ønsker å spore dukker opp på GitHub – som den notatfilen du har i samme mappe men som ikke har noe å gjøre i et offentlig repo. Du kan finne maler for `.gitignore` filer på [.gitignore templates](https://github.com/github/gitignore) eller lage en ved hjelp av [gitignore.io](https://www.toptal.com/developers/gitignore). + +### 🧠 **Første innsjekk i repositoriet: Hvordan føltes det?** + +**Ta et øyeblikk til å feire og reflektere:** +- Hvordan føltes det å se koden din dukke opp på GitHub for første gang? +- Hvilket steg føltes mest forvirrende, og hvilket føltes overraskende enkelt? +- Kan du forklare forskjellen mellom `git add`, `git commit`, og `git push` med egne ord? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Opprett prosjekt + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Vellykket! 🎉 + + note right of Staged + Filer klare for lagring + end note + + note right of Committed + Øyeblikksbilde opprettet + end note +``` +> **Husk**: Selv erfarne utviklere glemmer noen ganger de eksakte kommandoene. Å få denne arbeidsflyten til å bli muskelminne krever øvelse – du gjør det kjempebra! -- **Conventional Commits**: Bruk et standardisert format for commit-meldinger som `feat:`, `fix:`, `docs:` osv. Lær mer på [conventionalcommits.org](https://www.conventionalcommits.org/) -- **Atomiske commits**: Sørg for at hver commit representerer én logisk endring -- **Hyppige commits**: Commit ofte med beskrivende meldinger i stedet for store, sjeldne commits +#### Moderne Git-arbeidsflyter -#### Commit-meldinger +Vurder å ta i bruk disse moderne praksisene: -En god Git-commit-emnelinje fullfører følgende setning: -Hvis den brukes, vil denne commiten +- **Conventional Commits**: Bruk et standardisert commit-meldingsformat som `feat:`, `fix:`, `docs:`, osv. Lær mer på [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Atomiske commits**: Sørg for at hver commit representerer en enkelt logisk endring +- **Hyppige commits**: Commit ofte med beskrivende meldinger fremfor store, sjeldne commits -For emnet, bruk imperativ, nåtid: "endre" ikke "endret" eller "endrer". -Som i emnet, bruk også imperativ, nåtid i kroppen (valgfritt). Kroppen bør inkludere motivasjonen for endringen og kontrastere dette med tidligere oppførsel. Du forklarer `hvorfor`, ikke `hvordan`. +#### Commit-meldinger -✅ Ta noen minutter til å surfe rundt på GitHub. Kan du finne en virkelig god commit-melding? Kan du finne en veldig minimal en? Hvilken informasjon synes du er den viktigste og mest nyttige å formidle i en commit-melding? +En god Git commit-overskrift fullfører følgende setning: +Hvis den blir brukt, vil denne committen -## Samarbeid med andre (Den morsomme delen!) +Bruk imperativ form i nåtid i overskriften: "endre" ikke "endret" eller "endringer". +Som i overskriften, bruk også imperativ nåtid i teksten i kroppen (valgfritt). Kroppen bør inkludere motivasjonen for endringen og sammenligne med tidligere oppførsel. Du forklarer `hvorfor`, ikke `hvordan`. -Hold på hatten, for NÅ blir GitHub helt magisk! 🪄 Du har mestret å administrere din egen kode, men nå dykker vi inn i min absolutte favorittdel – å samarbeide med fantastiske mennesker fra hele verden. +✅ Ta noen minutter til å utforske GitHub. Kan du finne en virkelig god commit-melding? Kan du finne en veldig minimal? Hvilken informasjon synes du er viktigst og mest nyttig å formidle i en commit-melding? -Se for deg dette: Du våkner i morgen og ser at noen i Tokyo har forbedret koden din mens du sov. Så fikser noen i Berlin en feil du har slitt med. Innen ettermiddagen har en utvikler i São Paulo lagt til en funksjon du aldri engang hadde tenkt på. Det er ikke science fiction – det er bare en vanlig tirsdag i GitHub-universet! +## Jobbe sammen med andre (Den morsomme delen!) -Det som virkelig begeistrer meg er at samarbeidsferdighetene du er i ferd med å lære? Dette er de EKSAKTE samme arbeidsflytene som teamene hos Google, Microsoft og dine favorittstartups bruker hver eneste dag. Du lærer ikke bare et kult verktøy – du lærer det hemmelige språket som får hele programvareverdenen til å samarbeide. +Hold på hatten, for HER blir GitHub magisk! 🪄 Du har mestret å administrere din egen kode, men nå dykker vi ned i min absolutte favorittdel – samarbeid med fantastiske mennesker fra hele verden. -Seriøst, når du opplever gleden av at noen godkjenner din første pull request, vil du forstå hvorfor utviklere blir så lidenskapelige om åpen kildekode. Det er som å være en del av verdens største, mest kreative teamprosjekt! +Se for deg dette: Du våkner i morgen og ser at noen i Tokyo forbedret koden din mens du sov. Så fikser noen i Berlin en feil du har sittet fast på. På ettermiddagen har en utvikler i São Paulo lagt til en funksjon du aldri hadde tenkt på. Det er ingen science fiction – det er bare en vanlig tirsdag i GitHub-universet! -> Se video -> -> [![Git og GitHub grunnleggende video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) +Det som virkelig begeistrer meg er at samarbeidsferdighetene du er i ferd med å lære? Det er de nøyaktig samme arbeidsflytene som team hos Google, Microsoft og dine favoritt-startups bruker hver eneste dag. Du lærer ikke bare et kult verktøy – du lærer det hemmelige språket som får hele programvareverden til å samarbeide. -Hovedgrunnen til å legge ting på GitHub var å gjøre det mulig å samarbeide med andre utviklere. +Seriøst, når du opplever suset ved at noen merger din første pull request, vil du forstå hvorfor utviklere blir så lidenskapelige om åpen kildekode. Det er som å være en del av verdens største, mest kreative teamprosjekt! -I ditt repository, naviger til `Insights > Community` for å se hvordan prosjektet ditt sammenlignes med anbefalte fellesskapsstandarder. +> Sjekk ut video +> +> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +Hovedgrunnen til å legge ting på GitHub var å gjøre det mulig å samarbeide med andre utviklere. + +```mermaid +flowchart LR + A[🔍 Finn Prosjekt] --> B[🍴 Fork Repository] + B --> C[📥 Klon til Lokalt] + C --> D[🌿 Opprett Branche] + D --> E[✏️ Gjør Endringer] + E --> F[💾 Committ Endringer] + F --> G[📤 Push Branche] + G --> H[🔄 Opprett Pull Request] + H --> I{Vedlikeholder Gjennomgang} + I -->|✅ Godkjent| J[🎉 Slå Sammen!] + I -->|❓ Endringer Etterspurt| K[📝 Gjør Oppdateringer] + K --> F + J --> L[🧹 Rydd Opp i Brancher] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +I ditt repositorium, gå til `Insights > Community` for å se hvordan prosjektet ditt sammenlignes med anbefalte fellesskapsstandarder. -Vil du få repositoryet ditt til å se profesjonelt og innbydende ut? Gå til repositoryet ditt og klikk på `Insights > Community`. Denne kule funksjonen viser deg hvordan prosjektet ditt sammenlignes med det GitHub-fellesskapet anser som "gode repository-praksiser." +Vil du gjøre repoet ditt profesjonelt og innbydende? Gå til repoet ditt og klikk på `Insights > Community`. Denne kule funksjonen viser hvordan prosjektet ditt sammenlignes med hva GitHub-fellesskapet mener er "gode repositorie-praksiser." -> 🎯 **Få prosjektet ditt til å skinne**: Et godt organisert repository med god dokumentasjon er som å ha en ren, innbydende butikkfront. Det viser folk at du bryr deg om arbeidet ditt og får andre til å ville bidra! +> 🎯 **Få prosjektet ditt til å skinne**: Et godt organisert repo med god dokumentasjon er som en ren, innbydende butikkfasade. Det forteller folk at du bryr deg om arbeidet ditt og gjør andre motivert til å bidra! -**Dette gjør et repository fantastisk:** +**Dette gjør et repo fantastisk:** -| Hva du bør legge til | Hvorfor det er viktig | Hva det gjør for deg | -|-----------------------|-----------------------|-----------------------| -| **Beskrivelse** | Førsteinntrykk teller! | Folk vet umiddelbart hva prosjektet ditt gjør | -| **README** | Forsiden til prosjektet ditt | Som en vennlig guide for nye besøkende | -| **Retningslinjer for bidrag** | Viser at du ønsker hjelp | Folk vet nøyaktig hvordan de kan hjelpe deg | -| **Adferdskodeks** | Skaper et vennlig miljø | Alle føler seg velkomne til å delta | -| **Lisens** | Juridisk klarhet | Andre vet hvordan de kan bruke koden din | -| **Sikkerhetspolicy** | Viser at du er ansvarlig | Demonstrerer profesjonelle praksiser | +| Hva du bør legge til | Hvorfor det er viktig | Hva det gjør for deg | +|---------------------|----------------------|---------------------| +| **Beskrivelse** | Førsteinntrykk teller! | Folk vet med en gang hva prosjektet ditt gjør | +| **README** | Frontsiden til prosjektet ditt | Som en vennlig guide for nye besøkende | +| **Retningslinjer for bidrag** | Viser at du ønsker hjelp | Folk vet akkurat hvordan de kan hjelpe deg | +| **Adferdskodeks** | Skaper et vennlig rom | Alle føler seg velkommen til å Delta | +| **Lisens** | Juridisk klarhet | Andre vet hvordan de kan bruke koden din | +| **Sikkerhetspolicy** | Viser at du er ansvarlig | Demonstrerer profesjonell praksis | -> 💡 **Profftips**: GitHub tilbyr maler for alle disse filene. Når du oppretter et nytt repository, huk av boksene for å automatisk generere disse filene. +> 💡 **Proff tips**: GitHub tilbyr maler for alle disse filene. Når du oppretter et nytt repositorium, huk av for å generere disse filene automatisk. -**Moderne GitHub-funksjoner å utforske:** +**Moderne GitHub-funksjoner å utforske:** 🤖 **Automatisering & CI/CD:** -- **GitHub Actions** for automatisert testing og distribusjon -- **Dependabot** for automatiske oppdateringer av avhengigheter +- **GitHub Actions** for automatisert testing og utrulling +- **Dependabot** for automatisk oppdatering av avhengigheter -💬 **Fellesskap & Prosjektledelse:** -- **GitHub Discussions** for fellesskapsdiskusjoner utover issues -- **GitHub Projects** for kanban-stil prosjektledelse -- **Branch-beskyttelsesregler** for å opprettholde kodekvalitetsstandarder +💬 **Fellesskap & prosjektstyring:** +- **GitHub Discussions** for fellesskapssamtaler utenfor issues +- **GitHub Projects** for kanban-stil prosjektstyring +- **Branchbeskyttelsesregler** for å sikre god kodekvalitet -Alle disse ressursene vil være nyttige for å onboarde nye teammedlemmer. Og dette er typisk ting nye bidragsytere ser på før de i det hele tatt ser på koden din, for å finne ut om prosjektet ditt er det rette stedet for dem å bruke tiden sin. +Alle disse ressursene vil hjelpe til ved innføring av nye teammedlemmer. Og det er vanligvis det nye bidragsytere ser på før de til og med ser på koden din, for å finne ut om prosjektet ditt er riktig plass for dem å bruke tiden sin. -✅ README-filer, selv om de tar tid å forberede, blir ofte oversett av travle vedlikeholdere. Kan du finne et eksempel på en spesielt beskrivende README? Merk: det finnes noen [verktøy for å lage gode README-filer](https://www.makeareadme.com/) som du kanskje vil prøve. +✅ README-filer, selv om de tar tid å lage, blir ofte neglisjert av travle vedlikeholdere. Kan du finne et eksempel på en spesielt beskrivende? Merk: det finnes noen [verktøy for å lage gode README-filer](https://www.makeareadme.com/) som du kanskje vil prøve. -### Oppgave: Merge litt kode +### Oppgave: Merge litt kode -Bidragsdokumenter hjelper folk med å bidra til prosjektet. Det forklarer hvilke typer bidrag du ser etter og hvordan prosessen fungerer. Bidragsytere må gå gjennom en serie med steg for å kunne bidra til ditt repo på GitHub: +Bidragsdokumentasjon hjelper folk å bidra til prosjektet. Den forklarer hvilke typer bidrag du ser etter og hvordan prosessen fungerer. Bidragsytere må gjennom en serie steg for å kunne bidra til repoet ditt på GitHub: -1. **Forke repoet ditt** Du vil sannsynligvis at folk skal _forke_ prosjektet ditt. Forking betyr å lage en kopi av repositoryet ditt på deres GitHub-profil. -1. **Clone**. Derfra vil de klone prosjektet til sin lokale maskin. -1. **Opprette en branch**. Du vil be dem om å opprette en _branch_ for arbeidet sitt. -1. **Fokusere endringen på ett område**. Be bidragsytere om å konsentrere bidragene sine på én ting av gangen – på den måten øker sjansen for at du kan _merge_ arbeidet deres. Tenk deg at de skriver en feilretting, legger til en ny funksjon og oppdaterer flere tester – hva om du vil, eller bare kan implementere 2 av 3, eller 1 av 3 endringer? +1. **Forke repoet ditt** Du vil sannsynligvis at folk skal _forke_ prosjektet ditt. Å forke betyr å lage en kopi av repoet ditt på deres GitHub-profil. +1. **Clone**. Derfra kloner de prosjektet til sin lokale maskin. +1. **Lag en branch**. Du vil be dem opprette en _branch_ for arbeidet sitt. +1. **Fokuser endringen på ett område**. Be bidragsytere om å konsentrere bidragene sine på én ting om gangen - da er sjansen større for at du kan _merge_ inn arbeidet deres. Tenk deg at de skriver en feilretting, legger til en ny funksjon og oppdaterer flere tester – hva om du vil, eller bare kan, implementere 2 av 3, eller 1 av 3 endringer? -✅ Tenk deg en situasjon der branches er spesielt kritiske for å skrive og levere god kode. Hvilke bruksområder kan du komme på? +✅ Tenk deg en situasjon der brancher er spesielt kritisk for å skrive og levere god kode. Hvilke brukstilfeller kan du tenke deg? -> Merk, vær den endringen du ønsker å se i verden, og opprett branches for ditt eget arbeid også. Alle commits du gjør vil bli gjort på branchen du for øyeblikket er "checked out" til. Bruk `git status` for å se hvilken branch det er. +> Husk, vær den endringen du ønsker å se i verden, og lag også brancher for ditt eget arbeid. Alle commits du gjør vil gjøres på branchen du for øyeblikket er "checked out" til. Bruk `git status` for å se hvilken branch det er. -La oss gå gjennom en bidragsarbeidsflyt. Anta at bidragsyteren allerede har _forket_ og _klonet_ repoet, så de har et Git-repo klart til å jobbe med på sin lokale maskin: +La oss gå gjennom en bidragsyter-arbeidsflyt. Anta at bidragsyteren allerede har _forket_ og _klonet_ repoet, så de har et Git-repo klart for arbeid på sin lokale maskin: -1. **Opprett en branch**. Bruk kommandoen `git branch` for å opprette en branch som vil inneholde endringene de har tenkt å bidra med: +1. **Lag en branch**. Bruk kommandoen `git branch` for å lage en branch som skal inneholde endringene de vil bidra med: ```bash git branch [branch-name] ``` - - > 💡 **Moderne tilnærming**: Du kan også opprette og bytte til den nye branchen med én kommando: + + > 💡 **Moderne tilnærming**: Du kan også lage og bytte til ny branch i én kommando: ```bash git switch -c [branch-name] ``` - -1. **Bytt til arbeidsbranch**. Bytt til den spesifiserte branchen og oppdater arbeidskatalogen med `git switch`: + +1. **Bytt til arbeidsbranch**. Bytt til den angitte branchen og oppdater arbeidskatalogen med `git switch`: ```bash git switch [branch-name] ``` - - > 💡 **Moderne notat**: `git switch` er den moderne erstatningen for `git checkout` når du bytter branch. Det er tydeligere og tryggere for nybegynnere. -1. **Utfør arbeid**. På dette tidspunktet kan du legge til endringene dine. Ikke glem å informere Git om det med følgende kommandoer: + > 💡 **Moderne notis**: `git switch` er den moderne erstatningen for `git checkout` ved branch-bytting. Det er klarere og tryggere for nybegynnere. + +1. **Gjør arbeid**. Nå vil du legge til endringene dine. Ikke glem å fortelle Git om det med følgende kommandoer: ```bash git add . git commit -m "my changes" ``` - - > ⚠️ **Kvalitet på commit-meldinger**: Sørg for å gi commiten din et godt navn, både for din egen del og for vedlikeholderen av repoet du hjelper til med. Vær spesifikk om hva du har endret! -1. **Kombiner arbeidet ditt med `main`-branchen**. På et tidspunkt er du ferdig med arbeidet og ønsker å kombinere det med `main`-branchen. `main`-branchen kan ha endret seg i mellomtiden, så sørg for å oppdatere den til det nyeste med følgende kommandoer: + > ⚠️ **Commit-melding kvalitet**: Sørg for at du gir din commit et godt navn, både for din egen skyld og vedlikeholderen av repoet du hjelper på. Vær spesifikk om hva du endret! + +1. **Kombiner arbeidet ditt med `main` branch**. På et tidspunkt er du ferdig med arbeidet og vil kombinere det med `main` branchen. `main` branchen kan ha endret seg i mellomtiden, så sørg først for å oppdatere den til siste versjon med følgende kommandoer: ```bash git switch main git pull ``` - - På dette tidspunktet vil du sørge for at eventuelle _konflikter_, situasjoner der Git ikke enkelt kan _kombinere_ endringene, skjer i din arbeidsbranch. Derfor kjør følgende kommandoer: + + Nå vil du forsikre deg om at eventuelle _konflikter_, situasjoner hvor Git ikke lett kan _kombinere_ endringene, oppstår i din arbeidsbranch. Derfor kjør følgende kommandoer: ```bash git switch [branch_name] git merge main ``` - - Kommandoen `git merge main` vil hente inn alle endringer fra `main` til din branch. Forhåpentligvis kan du bare fortsette. Hvis ikke, vil VS Code fortelle deg hvor Git er _forvirret_, og du kan endre de berørte filene for å angi hvilket innhold som er mest nøyaktig. - 💡 **Moderne alternativ**: Vurder å bruke `git rebase` for en renere historikk: + Kommandoen `git merge main` vil hente alle endringer fra `main` inn i branchen din. Forhåpentligvis kan du bare fortsette. Hvis ikke, vil VS Code fortelle deg hvor Git er _forvirret_, og du kan endre de berørte filene for å angi hvilket innhold som er mest korrekt. + + 💡 **Moderne alternativ**: Vurder å bruke `git rebase` for en renere historikk: ```bash git rebase main ``` - - Dette spiller av dine commits på toppen av den nyeste main-branchen, og skaper en lineær historikk. + Dette "replayer" dine commits på toppen av siste main-branch og skaper en lineær historikk. -1. **Send arbeidet ditt til GitHub**. Å sende arbeidet ditt til GitHub betyr to ting. Å pushe branchen din til repoet ditt og deretter åpne en PR, Pull Request. +1. **Send arbeidet ditt til GitHub**. Å sende arbeidet ditt til GitHub innebærer to ting: å pushe branchen til ditt repo og så åpne en PR, Pull Request. ```bash git push --set-upstream origin [branch-name] ``` - - Kommandoen ovenfor oppretter branchen på ditt forkede repo. -1. **Åpne en PR**. Deretter vil du åpne en PR. Du gjør det ved å navigere til det forkede repoet på GitHub. Du vil se en indikasjon på GitHub hvor det spør om du vil opprette en ny PR, du klikker på det og blir tatt til et grensesnitt hvor du kan endre commit-meldingens tittel, gi den en mer passende beskrivelse. Nå vil vedlikeholderen av repoet du forked se denne PR-en og _krysser fingrene_ for at de setter pris på og _merger_ PR-en din. Du er nå en bidragsyter, yay :) + Kommandoen over oppretter branchen på ditt forkede repo. + +### 🤝 **Samarbeidsevner: Klar til å jobbe med andre?** + +**La oss se hvordan du føler om samarbeid:** +- Gir ideen om forking og pull requests mening for deg nå? +- Hva er en ting med å jobbe med brancher du vil øve mer på? +- Hvor komfortabel føler du deg med å bidra til andres prosjekter? + +```mermaid +mindmap + root((Git Samarbeid)) + Branching + Funksjonsgrener + Feilrettingsgrener + Eksperimentelt arbeid + Pull Requests + Kodegjennomgang + Diskusjon + Testing + Best Practices + Klare commit-meldinger + Små fokuserte endringer + God dokumentasjon +``` +> **Selvtillitsboost**: Hver eneste utvikler du beundrer var en gang nervøs for sin første pull request. GitHub-fellesskapet er utrolig imøtekommende for nykommere! - 💡 **Moderne tips**: Du kan også opprette PR-er ved hjelp av GitHub CLI: +1. **Åpne en PR**. Neste steg er å åpne en PR. Du gjør det ved å navigere til det forkede repoet på GitHub. Du vil se en indikasjon på GitHub som spør om du vil lage en ny PR, du klikker på den og blir tatt til et grensesnitt hvor du kan endre commit-meldingens tittel, gi en mer passende beskrivelse. Nå vil vedlikeholderen av repoet du forked se denne PR og _krysser fingrene_ de setter pris på og _merger_ din PR. Nå er du en bidragsyter, hurra :) + + 💡 **Moderne tips**: Du kan også lage PRs med GitHub CLI: ```bash gh pr create --title "Your PR title" --body "Description of changes" ``` - - 🔧 **Beste praksis for PR-er**: - - Link til relaterte issues ved å bruke nøkkelord som "Fixes #123" - - Legg til skjermbilder for UI-endringer - - Be om spesifikke anmeldere - - Bruk utkast-PR-er for arbeid som pågår - - Sørg for at alle CI-sjekker er bestått før du ber om gjennomgang -1. **Rydd opp**. Det anses som god praksis å _rydde opp_ etter at du har lykkes med å merge en PR. Du vil rydde opp både din lokale branch og branchen du pushet til GitHub. Først, la oss slette den lokalt med følgende kommando: + 🔧 **Beste praksis for PRs**: + - Link til relaterte issues med nøkkelord som "Fixes #123" + - Legg til skjermbilder for UI-endringer + - Be om spesifikke anmeldere + - Bruk utkast-PR for arbeid under utvikling + - Sørg for at alle CI-sjekker passerer før du ber om gjennomgang +1. **Rydd opp**. Det regnes som god praksis å _rydde opp_ etter at du har slått sammen en pull request (PR). Du vil rydde opp både i din lokale gren og grenen du pushet til GitHub. Først la oss slette den lokalt med følgende kommando: ```bash git branch -d [branch-name] ``` - - Sørg for å gå til GitHub-siden for det forkede repoet og fjern den eksterne branchen du nettopp pushet til. - -`Pull request` virker som et rart begrep fordi du egentlig ønsker å pushe endringene dine til prosjektet. Men vedlikeholderen (prosjekteieren) eller kjerneteamet må vurdere endringene dine før de merger dem med prosjektets "main"-branch, så du ber egentlig om en beslutning om endringen fra en vedlikeholder. - -En pull request er stedet for å sammenligne og diskutere forskjellene som er introdusert på en branch med anmeldelser, kommentarer, integrerte tester og mer. En god pull request følger omtrent de samme reglene som en commit-melding. Du kan legge til en referanse til en issue i issue-tracker, når arbeidet ditt for eksempel fikser en issue. Dette gjøres ved å bruke en `#` etterfulgt av nummeret på din issue. For eksempel `#97`. -🤞Krysser fingrene for at alle sjekker går gjennom og at prosjektets eier(e) godkjenner endringene dine og slår dem sammen med prosjektet🤞 - -Oppdater din nåværende lokale arbeidsgren med alle nye commits fra den tilsvarende eksterne grenen på GitHub: -`git pull` + Sørg for at du går til GitHub-siden for den forkede repoen neste og fjerner den eksterne grenen du nettopp pushet til. -## Bidra til Open Source (Din sjanse til å gjøre en forskjell!) +`Pull request` virker som et dumt begrep fordi egentlig vil du pushe endringene dine til prosjektet. Men vedlikeholderen (prosjekteieren) eller kjernegruppen må vurdere endringene dine før de slår dem sammen med prosjektets "main"-gren, så du ber egentlig om en beslutning om endring fra en vedlikeholder. -Er du klar for noe som kommer til å blåse deg helt av banen? 🤯 La oss snakke om å bidra til open source-prosjekter – jeg får gåsehud bare av å dele dette med deg! +En pull request er stedet å sammenligne og diskutere forskjellene introdusert på en gren med gjennomganger, kommentarer, integrerte tester og mer. En god pull request følger omtrent de samme reglene som en commit-melding. Du kan legge til en referanse til et problem i issue-tracker, når arbeidet ditt for eksempel løser et problem. Dette gjøres ved å bruke en `#` etterfulgt av nummeret på problemet ditt. For eksempel `#97`. -Dette er din sjanse til å bli en del av noe virkelig ekstraordinært. Tenk deg å forbedre verktøyene som millioner av utviklere bruker hver dag, eller fikse en feil i en app som vennene dine elsker. Det er ikke bare en drøm – det er det open source-bidrag handler om! +🤞Kryss fingrene for at alle sjekker går igjennom og at prosjekteier(ne) slår endringene dine sammen i prosjektet🤞 -Her er det som gir meg frysninger hver gang jeg tenker på det: hvert eneste verktøy du har lært med – kodeeditoren din, rammeverkene vi skal utforske, til og med nettleseren du leser dette i – startet med noen akkurat som deg som gjorde sitt aller første bidrag. Den geniale utvikleren som bygde din favoritt-VS Code-utvidelse? De var en gang en nybegynner som klikket "create pull request" med skjelvende hender, akkurat som du er i ferd med å gjøre. +Oppdater din nåværende lokale arbeidsgren med alle nye commits fra den tilsvarende eksterne grenen på GitHub: -Og her er det vakreste: open source-samfunnet er som internettets største gruppesamling. De fleste prosjekter ser aktivt etter nykommere og har problemer merket "good first issue" spesielt for folk som deg! Vedlikeholdere blir genuint begeistret når de ser nye bidragsytere fordi de husker sine egne første steg. +`git pull` -Du lærer ikke bare å kode her – du forbereder deg på å bli med i en global familie av skapere som våkner hver dag og tenker "Hvordan kan vi gjøre den digitale verden litt bedre?" Velkommen til klubben! 🌟 +## Bidra til åpen kildekode (Din sjanse til å gjøre en forskjell!) + +Er du klar for noe som virkelig kommer til å blåse bort av meg? 🤯 La oss snakke om å bidra til open source-prosjekter – og jeg får frysninger bare av å tenke på å dele dette med deg! + +Dette er din sjanse til å bli en del av noe helt ekstraordinært. Tenk deg å forbedre verktøyene som millioner av utviklere bruker hver dag, eller fikse en feil i en app som vennene dine elsker. Det er ikke bare en drøm – det er hva åpen kildekode-bidragsyting handler om! + +Her er hva som gir meg gåsehud hver gang jeg tenker på det: hvert eneste verktøy du har lært med – kodeeditoren din, rammene vi skal utforske, til og med nettleseren du leser dette i – startet med noen akkurat som deg som gjorde sitt aller første bidrag. Den geniale utvikleren som laget din favoritt VS Code-utvidelse? De var engang en nybegynner som klikket på "create pull request" med skjelvende hender, akkurat som du er i ferd med å gjøre. + +Og her er det vakreste: open source-fellesskapet er som internettets største gruppemamma-klem. De fleste prosjekter ser aktivt etter nykommere og har problemer merket "good first issue" spesielt for folk som deg! Vedlikeholdere blir oppriktig glade når de ser nye bidragsytere fordi de husker sine egne første steg. + +```mermaid +flowchart TD + A[🔍 Utforsk GitHub] --> B[🏷️ Finn "god første sak"] + B --> C[📖 Les Retningslinjer for Bidrag] + C --> D[🍴 Gaffel Repository] + D --> E[💻 Sett Opp Lokalt Miljø] + E --> F[🌿 Opprett Funksjonsgren] + F --> G[✨ Gjør Ditt Bidrag] + G --> H[🧪 Test Dine Endringer] + H --> I[📝 Skriv Klar Commit] + I --> J[📤 Push & Opprett PR] + J --> K[💬 Engasjer Deg med Tilbakemeldinger] + K --> L[🎉 Sammenflettet! Du er en Bidragsyter!] + L --> M[🌟 Finn Neste Sak] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +Du lærer ikke bare å kode her – du forbereder deg på å bli med i en global familie av byggere som våkner hver dag og tenker "Hvordan kan vi gjøre den digitale verden litt bedre?" Velkommen til klubben! 🌟 Først, la oss finne et repository (eller **repo**) på GitHub som interesserer deg og som du ønsker å bidra med en endring til. Du vil kopiere innholdet til din maskin. ✅ En god måte å finne 'nybegynnervennlige' repoer på er å [søke etter taggen 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopier et repo lokalt](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.no.png) +![Kopier en repo lokalt](../../../../translated_images/clone_repo.5085c48d666ead57.no.png) -Det finnes flere måter å kopiere kode på. En måte er å "klone" innholdet i repositoryet, ved å bruke HTTPS, SSH eller GitHub CLI (Command Line Interface). +Det finnes flere måter å kopiere kode på. En måte er å "klone" innholdet i repoet, ved å bruke HTTPS, SSH, eller GitHub CLI (Command Line Interface). -Åpne terminalen din og klon repositoryet slik: +Åpne terminalen din og klon repoet slik: ```bash -# Using HTTPS +# Bruker HTTPS git clone https://github.com/ProjectURL -# Using SSH (requires SSH key setup) +# Bruker SSH (krever SSH-nøkkeloppsett) git clone git@github.com:username/repository.git -# Using GitHub CLI +# Bruker GitHub CLI gh repo clone username/repository ``` -For å jobbe med prosjektet, bytt til riktig mappe: +For å jobbe på prosjektet, bytt til riktig mappe: `cd ProjectURL` Du kan også åpne hele prosjektet ved å bruke: - **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHubs skyutviklingsmiljø med VS Code i nettleseren - **[GitHub Desktop](https://desktop.github.com/)** - En GUI-applikasjon for Git-operasjoner -- **[GitHub.dev](https://github.dev)** - Trykk på `.`-tasten på et hvilket som helst GitHub-repo for å åpne VS Code i nettleseren +- **[GitHub.dev](https://github.dev)** - Trykk `.`-tasten på et GitHub-repo for å åpne VS Code i nettleseren - **VS Code** med GitHub Pull Requests-utvidelsen -Til slutt kan du laste ned koden i en zip-mappe. +Til slutt, du kan laste ned koden i en zippet mappe. ### Noen flere interessante ting om GitHub -Du kan stjerne, følge og/eller "forke" ethvert offentlig repository på GitHub. Du finner dine stjernemerkede repositories i rullegardinmenyen øverst til høyre. Det er som bokmerker, men for kode. +Du kan stjerne, følge og/eller "forke" et offentlig repository på GitHub. Du finner dine stjernemerkede repos i nedtrekksmenyen øverst til høyre. Det er som bokmerking, men for kode. -Prosjekter har en problemsporer, som oftest på GitHub under "Issues"-fanen med mindre annet er angitt, hvor folk diskuterer problemer relatert til prosjektet. Og Pull Requests-fanen er der folk diskuterer og vurderer endringer som er under behandling. +Prosjekter har en issue-tracker, for det meste på GitHub i "Issues"-fanen med mindre annet er oppgitt, der folk diskuterer problemer som gjelder prosjektet. Og Pull Requests-fanen er der folk diskuterer og vurderer endringer som er under arbeid. -Prosjekter kan også ha diskusjoner i forum, e-postlister eller chattekanaler som Slack, Discord eller IRC. +Prosjekter kan også ha diskusjoner i forum, mailinglister eller chattekanaler som Slack, Discord eller IRC. 🔧 **Moderne GitHub-funksjoner**: -- **GitHub Discussions** - Innebygd forum for samtaler i fellesskapet +- **GitHub Discussions** - Innebygd forum for samfunnsamtaler - **GitHub Sponsors** - Støtt vedlikeholdere økonomisk - **Security-fanen** - Rapporter om sårbarheter og sikkerhetsråd - **Actions-fanen** - Se automatiserte arbeidsflyter og CI/CD-pipelines -- **Insights-fanen** - Analyse om bidragsytere, commits og prosjektets helse +- **Insights-fanen** - Analyser om bidragsytere, commits og prosjektets helse - **Projects-fanen** - GitHubs innebygde prosjektstyringsverktøy -✅ Ta en titt rundt i ditt nye GitHub-repo og prøv noen ting, som å redigere innstillinger, legge til informasjon i repoet ditt, opprette et prosjekt (som et Kanban-brett), og sette opp GitHub Actions for automatisering. Det er mye du kan gjøre! +✅ Ta en titt rundt i din nye GitHub-repo og prøv noen ting, som å redigere innstillinger, legge til informasjon i repoen, lage et prosjekt (som et Kanban-board), og sette opp GitHub Actions for automatisering. Det er mye du kan gjøre! --- ## 🚀 Utfordring -Ok, det er på tide å teste dine nye GitHub-superkrefter! 🚀 Her er en utfordring som kommer til å få alt til å falle på plass på den mest tilfredsstillende måten: +Greit, det er på tide å teste dine blanke nye GitHub-superkrefter! 🚀 Her er en utfordring som kommer til å få alt til å falle på plass på den mest tilfredsstillende måten: -Ta med deg en venn (eller et familiemedlem som alltid spør hva du driver med når du sitter foran datamaskinen) og begi dere ut på et samarbeidsprosjekt sammen! Her skjer den virkelige magien – opprett et prosjekt, la dem forke det, lag noen grener og slå sammen endringer som de proffene dere er i ferd med å bli. +Ta med deg en venn (eller det familiemedlemmet som alltid spør hva du driver på med av alt dette "data-greiene") og legg ut på et samarbeidende kodeeventyr sammen! Her skjer den ekte magien – lag et prosjekt, la dem fork'e det, lag noen grener, og slå sammen endringer som de proffene du holder på å bli. -Jeg skal ikke lyve – dere kommer sannsynligvis til å le på et tidspunkt (spesielt når dere begge prøver å endre den samme linjen), kanskje klø dere i hodet av forvirring, men dere vil definitivt ha de fantastiske "aha!"-øyeblikkene som gjør all læringen verdt det. I tillegg er det noe spesielt med å dele den første vellykkede sammenslåingen med noen andre – det er som en liten feiring av hvor langt dere har kommet! +Jeg skal ikke lyve – du kommer sannsynligvis til å le på et tidspunkt (spesielt når dere begge prøver å endre samme linje), kanskje klø dere i hodet i forvirring, men dere vil definitivt ha de fantastiske "aha!"-øyeblikkene som gjør at all læring er verdt det. I tillegg er det noe spesielt med å dele den første vellykkede sammenslåingen med noen andre – det er som en liten feiring av hvor langt du har kommet! -Har du ikke en kodevenn ennå? Ingen problem! GitHub-samfunnet er fullt av utrolig velkomne mennesker som husker hvordan det var å være ny. Se etter repositories med "good first issue"-etiketter – de sier i bunn og grunn "Hei nybegynnere, kom og lær med oss!" Hvor kult er ikke det? +Har du ikke en koding-venn enda? Ikke noe problem! GitHub-fellesskapet er fullt av utrolig imøtekommende folk som husker hvordan det var å være ny. Se etter repos med merkelapper "good first issue" – de sier i praksis "Hei nybegynnere, kom og lær med oss!" Hvor kult er ikke det? ## Quiz etter forelesning [Quiz etter forelesning](https://ff-quizzes.netlify.app/web/en/) -## Oppsummering & Fortsett å lære +## Gjennomgang & Fortsett å lære -Puh! 🎉 Se på deg – du har nettopp mestret GitHub-grunnleggende som en ekte mester! Hvis hjernen din føles litt full akkurat nå, er det helt normalt og faktisk et godt tegn. Du har nettopp lært verktøy som tok meg uker å bli komfortabel med da jeg startet. +Puh! 🎉 Se på deg – du har nettopp mestret GitHub-grunnleggende som en absolutt mester! Hvis hjernen din føles litt full akkurat nå, er det helt normalt og egentlig et godt tegn. Du har akkurat lært verktøy som tok meg uker å bli komfortabel med da jeg startet. -Git og GitHub er utrolig kraftige (som, seriøst kraftige), og hver utvikler jeg kjenner – inkludert de som nå virker som trollmenn – måtte øve og snuble litt før alt falt på plass. Det faktum at du har kommet deg gjennom denne leksjonen betyr at du allerede er på vei til å mestre noen av de viktigste verktøyene i en utviklers verktøykasse. +Git og GitHub er utrolig kraftige (alvorlig talt, veldig kraftige), og hver utvikler jeg kjenner – inkludert de som nå virker som trollmenn – måtte øve og snuble litt før alt falt på plass. Det faktum at du har kommet deg gjennom denne leksjonen betyr at du allerede er på vei mot å mestre noen av de viktigste verktøyene i en utviklers verktøykasse. Her er noen helt fantastiske ressurser for å hjelpe deg med å øve og bli enda mer fantastisk: -- [Veiledning for å bidra til open source-programvare](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Din veikart til å gjøre en forskjell -- [Git jukselapp](https://training.github.com/downloads/github-git-cheat-sheet/) – Ha denne tilgjengelig for rask referanse! +- [Guide til å bidra til åpen kildekode](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Din veikart til å gjøre en forskjell +- [Git jukselapp](https://training.github.com/downloads/github-git-cheat-sheet/) – Ha denne lett tilgjengelig for rask referanse! -Og husk: øvelse gir fremgang, ikke perfeksjon! Jo mer du bruker Git og GitHub, jo mer naturlig blir det. GitHub har laget noen fantastiske interaktive kurs som lar deg øve i et trygt miljø: +Og husk: øvelse gjør fremgang, ikke perfeksjon! Jo mer du bruker Git og GitHub, jo mer naturlig blir det. GitHub har laget noen fantastiske interaktive kurs som lar deg øve i et trygt miljø: - [Introduksjon til GitHub](https://github.com/skills/introduction-to-github) -- [Kommuniser med Markdown](https://github.com/skills/communicate-using-markdown) +- [Kommunisere ved hjelp av Markdown](https://github.com/skills/communicate-using-markdown) - [GitHub Pages](https://github.com/skills/github-pages) -- [Håndtering av sammenslåingskonflikter](https://github.com/skills/resolve-merge-conflicts) +- [Håndtere merge-konflikter](https://github.com/skills/resolve-merge-conflicts) **Føler du deg eventyrlysten? Sjekk ut disse moderne verktøyene:** -- [GitHub CLI-dokumentasjon](https://cli.github.com/manual/) – For når du vil føle deg som en kommandolinje-trollmann -- [GitHub Codespaces-dokumentasjon](https://docs.github.com/en/codespaces) – Kode i skyen! -- [GitHub Actions-dokumentasjon](https://docs.github.com/en/actions) – Automatiser alt -- [Beste praksis for Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Ta arbeidsflyten din til neste nivå +- [GitHub CLI dokumentasjon](https://cli.github.com/manual/) – For når du vil føle deg som en kommandolinje-mester +- [GitHub Codespaces dokumentasjon](https://docs.github.com/en/codespaces) – Kode i skyen! +- [GitHub Actions dokumentasjon](https://docs.github.com/en/actions) – Automatiser alt +- [Beste praksis for Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Løft arbeidsflyten din til neste nivå ## GitHub Copilot Agent Challenge 🚀 Bruk Agent-modus for å fullføre følgende utfordring: -**Beskrivelse:** Opprett et samarbeidsprosjekt for webutvikling som demonstrerer hele GitHub-arbeidsflyten du har lært i denne leksjonen. Denne utfordringen vil hjelpe deg med å øve på opprettelse av repository, samarbeidsfunksjoner og moderne Git-arbeidsflyter i et realistisk scenario. +**Beskrivelse:** Lag et samarbeidsprosjekt for webutvikling som demonstrerer hele GitHub-arbeidsflyten du har lært i denne leksjonen. Denne utfordringen vil hjelpe deg med å øve på opprettelse av repositories, samarbeidsfunksjoner og moderne Git-arbeidsflyter i et ekte scenario. -**Oppgave:** Opprett et nytt offentlig GitHub-repository for et enkelt "Web Development Resources"-prosjekt. Repositoryet bør inkludere en godt strukturert README.md-fil som lister opp nyttige verktøy og ressurser for webutvikling, organisert etter kategorier (HTML, CSS, JavaScript, osv.). Sett opp repositoryet med riktige fellesskapsstandarder, inkludert lisens, retningslinjer for bidrag og en adferdskodeks. Opprett minst to funksjonsgrener: en for å legge til CSS-ressurser og en annen for JavaScript-ressurser. Gjør commits til hver gren med beskrivende commit-meldinger, og opprett deretter pull requests for å slå sammen endringene tilbake til main. Aktiver GitHub-funksjoner som Issues, Discussions, og sett opp en grunnleggende GitHub Actions-arbeidsflyt for automatiserte sjekker. +**Oppgave:** Opprett et nytt offentlig GitHub-repository for et enkelt "Web Development Resources"-prosjekt. Repositoryet skal inkludere en godt strukturert README.md-fil med en liste over nyttige verktøy og ressurser for webutvikling, organisert etter kategorier (HTML, CSS, JavaScript, osv.). Sett opp repoet med riktige fellesskapsstandarder inkludert lisens, retningslinjer for bidrag og en adferdskodeks. Opprett minst to feature-grener: en for å legge til CSS-ressurser og en annen for JavaScript-ressurser. Lag commits til hver gren med beskrivende commit-meldinger, og opprett pull requests for å slå endringene tilbake til main. Aktiver GitHub-funksjoner som Issues, Discussions, og sett opp en enkel GitHub Actions-arbeidsflyt for automatiske sjekker. ## Oppgave -Din oppgave, hvis du velger å akseptere den: Fullfør [Introduksjon til GitHub](https://github.com/skills/introduction-to-github)-kurset på GitHub Skills. Dette interaktive kurset lar deg øve på alt du har lært i et trygt, veiledet miljø. I tillegg får du et kult merke når du er ferdig! 🏅 +Din oppgave, hvis du velger å ta den: Fullfør [Introduksjon til GitHub](https://github.com/skills/introduction-to-github) kurset på GitHub Skills. Dette interaktive kurset lar deg øve på alt du har lært i et trygt, guidet miljø. I tillegg får du en kul merkelapp når du er ferdig! 🏅 -**Føler du deg klar for flere utfordringer?** -- Sett opp SSH-autentisering for GitHub-kontoen din (slutt på passord!) -- Prøv å bruke GitHub CLI for dine daglige Git-operasjoner +**Klar for flere utfordringer?** +- Konfigurer SSH-autentisering på GitHub-kontoen din (ingen flere passord!) +- Prøv å bruke GitHub CLI til dine daglige Git-operasjoner - Opprett et repository med en GitHub Actions-arbeidsflyt -- Utforsk GitHub Codespaces ved å åpne akkurat dette repositoryet i en skybasert editor +- Utforsk GitHub Codespaces ved å åpne akkurat dette repoet i en skybasert editor + +--- + +## 🚀 Din GitHub-mester-tidslinje + +### ⚡ **Hva du kan gjøre de neste 5 minuttene** +- [ ] Stjern merk dette repoet og 3 andre prosjekter som interesserer deg +- [ ] Sett opp tofaktorautentisering på din GitHub-konto +- [ ] Lag en enkel README for ditt første repository +- [ ] Følg 5 utviklere som inspirerer deg + +### 🎯 **Hva du kan få til denne timen** +- [ ] Fullfør quizen etter leksjonen og reflekter over din GitHub-reise +- [ ] Sett opp SSH-nøkler for passordfri GitHub-autentisering +- [ ] Lag ditt første meningsfulle commit med en flott commit-melding +- [ ] Utforsk GitHubs "Explore"-fane for å oppdage populære prosjekter +- [ ] Øv på å fork'e et repository og gjøre en liten endring + +### 📅 **Din ukeslange GitHub-reise** +- [ ] Fullfør GitHub Skills-kursene (Introduksjon til GitHub, Markdown) +- [ ] Lag din første pull request til et åpen kildekode-prosjekt +- [ ] Sett opp et GitHub Pages-nettsted for å vise frem arbeidet ditt +- [ ] Bli med i GitHub Discussions på prosjekter du er interessert i +- [ ] Opprett et repository med riktige fellesskapsstandarder (README, lisens mm.) +- [ ] Prøv GitHub Codespaces for skybasert utvikling + +### 🌟 **Din månedslange transformasjon** +- [ ] Bidra til 3 forskjellige open source-prosjekter +- [ ] Mentor noen som er ny på GitHub (gi videre!) +- [ ] Sett opp automatiske arbeidsflyter med GitHub Actions +- [ ] Bygg en portefølje som viser dine GitHub-bidrag +- [ ] Delta i Hacktoberfest eller lignende community-arrangementer +- [ ] Bli vedlikeholder av ditt eget prosjekt som andre kan bidra til + +### 🎓 **Avsluttende GitHub-mester sjekk** + +**Feir hvor langt du har kommet:** +- Hva er din favoritt ting med å bruke GitHub? +- Hvilken samarbeidsfunksjon gleder du deg mest til? +- Hvor trygg føler du deg på å bidra til åpen kildekode nå? +- Hvilket prosjekt vil du bidra til først? + +```mermaid +journey + title Din GitHub Tillitsreise + section I dag + Nervøs: 3: Du + Nysgjerrig: 4: Du + Spent: 5: Du + section Denne uken + Øver: 4: Du + Bidrar: 5: Du + Knytter kontakter: 5: Du + section Neste måned + Samarbeider: 5: Du + Leder: 5: Du + Inspirerer andre: 5: Du +``` +> 🌍 **Velkommen til det globale utviklerfellesskapet!** Du har nå verktøyene til å samarbeide med millioner av utviklere verden over. Ditt første bidrag kan virke lite, men husk – hvert stort open source-prosjekt startet med noen som gjorde sin aller første commit. Spørsmålet er ikke om du vil gjøre en forskjell, men hvilket fantastisk prosjekt som først får nytte av ditt unike perspektiv! 🚀 -Husk: hver ekspert var en gang nybegynner. Du klarer dette! 💪 +Husk: alle eksperter var en gang nybegynnere. Du fikser dette! 💪 --- -**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 automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt 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 + +**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 opprinnelige dokumentet på morsmålet 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/1-getting-started-lessons/3-accessibility/README.md b/translations/no/1-getting-started-lessons/3-accessibility/README.md index 10c015dae..a02a36f6e 100644 --- a/translations/no/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/no/1-getting-started-lessons/3-accessibility/README.md @@ -1,219 +1,324 @@ # Lage tilgjengelige nettsider -![Alt om tilgjengelighet](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.no.png) +![Alt om tilgjengelighet](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.no.png) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) +```mermaid +journey + title Din Læringsreise i Tilgjengelighet + section Grunnlag + Forstå Brukere: 5: You + Testverktøy: 4: You + POUR Prinsipper: 5: You + section Bygg Ferdigheter + Semantisk HTML: 4: You + Visuell Design: 5: You + ARIA Teknikker: 4: You + section Mestre Praksis + Tastaturnavigasjon: 5: You + Skjema Tilgjengelighet: 4: You + Virkelighetstesting: 5: You +``` ## Quiz før forelesning [Quiz før forelesning](https://ff-quizzes.netlify.app/web/) -> Kraften i nettet ligger i dets universalitet. Tilgang for alle, uavhengig av funksjonshemming, er en essensiell del. +> Kraften til nettet ligger i dets universalitet. Tilgang for alle, uavhengig av funksjonshemning, er en viktig del. > > \- Sir Timothy Berners-Lee, W3C-direktør og oppfinner av World Wide Web -Her er noe som kanskje vil overraske deg: når du bygger tilgjengelige nettsider, hjelper du ikke bare personer med funksjonshemminger—du gjør faktisk nettet bedre for alle! +Her er noe som kanskje overrasker deg: når du bygger tilgjengelige nettsider, hjelper du ikke bare personer med funksjonsnedsettelser—du gjør faktisk nettet bedre for alle! -Har du noen gang lagt merke til de små rampene ved gatehjørner? De ble opprinnelig designet for rullestoler, men nå hjelper de også folk med barnevogner, bud med traller, reisende med trillekofferter og syklister. Det er akkurat slik tilgjengelig webdesign fungerer—løsninger som hjelper én gruppe, ender ofte opp med å være til nytte for alle. Ganske kult, ikke sant? +Har du noen gang lagt merke til de lave kantsteinene i gatehjørner? De ble opprinnelig designet for rullestoler, men hjelper nå folk med barnevogner, leveringsarbeidere med traller, reisende med koffert på hjul og syklister også. Det er akkurat slik tilgjengelig nettdesign fungerer—løsninger som hjelper én gruppe, ender ofte opp med å gagne alle. Ganske kult, ikke sant? -I denne leksjonen skal vi utforske hvordan vi kan lage nettsider som virkelig fungerer for alle, uansett hvordan de bruker nettet. Du vil oppdage praktiske teknikker som allerede er innebygd i webstandarder, få praktisk erfaring med testverktøy, og se hvordan tilgjengelighet gjør nettstedene dine mer brukervennlige for alle. +I denne leksjonen skal vi utforske hvordan lage nettsider som virkelig fungerer for alle, uansett hvordan de surfer på nettet. Du vil oppdage praktiske teknikker som allerede er innebygd i webstandarder, prøve testverktøy på egenhånd og se hvordan tilgjengelighet gjør sidene dine mer brukervennlige for alle brukere. -Ved slutten av denne leksjonen vil du ha selvtilliten til å gjøre tilgjengelighet til en naturlig del av din utviklingsprosess. Klar til å utforske hvordan gjennomtenkte designvalg kan åpne nettet for milliarder av brukere? La oss sette i gang! +Ved slutten av denne leksjonen vil du ha selvtilliten til å gjøre tilgjengelighet til en naturlig del av utviklingsarbeidet ditt. Klar til å utforske hvordan gjennomtenkte designvalg kan åpne nettet for milliarder av brukere? La oss sette i gang! +```mermaid +mindmap + root((Nettsted Tilgjengelighet)) + Users + Skjermlesere + Tastaturnavigasjon + Stemmestyring + Forstørrelse + Technologies + HTML semantikk + ARIA attributter + CSS fokusindikatorer + Tastaturhendelser + Benefits + Større publikum + Bedre SEO + Juridisk samsvar + Universell utforming + Testing + Automatiserte verktøy + Manuell testing + Brukertilbakemelding + Ekte hjelpemiddelteknologi +``` > Du kan ta denne leksjonen på [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! -## Forstå hjelpemiddelteknologier +## Forstå hjelpeteknologier -Før vi hopper inn i koding, la oss ta et øyeblikk til å forstå hvordan mennesker med ulike evner faktisk opplever nettet. Dette er ikke bare teori—å forstå disse navigasjonsmønstrene i den virkelige verden vil gjøre deg til en mye bedre utvikler! +Før vi hopper inn i koding, la oss ta et øyeblikk for å forstå hvordan personer med ulike evner faktisk opplever nettet. Dette er ikke bare teori—forståelse av disse virkelige navigasjonsmønstrene vil gjøre deg til en mye bedre utvikler! -Hjelpemiddelteknologier er ganske fantastiske verktøy som hjelper personer med funksjonshemminger å interagere med nettsider på måter som kan overraske deg. Når du får taket på hvordan disse teknologiene fungerer, blir det mye mer intuitivt å skape tilgjengelige webopplevelser. Det er som å lære å se koden din gjennom andres øyne. +Hjelpeteknologier er ganske fantastiske verktøy som hjelper personer med funksjonsnedsettelser å interagere med nettsider på måter som kan overraske deg. Når du blir kjent med hvordan disse teknologiene fungerer, blir det mye mer intuitivt å lage tilgjengelige nettopplevelser. Det er som å lære å se koden din gjennom andres øyne. ### Skjermlesere -[Skjermlesere](https://en.wikipedia.org/wiki/Screen_reader) er ganske sofistikerte teknologier som konverterer digital tekst til tale eller punktskrift. Selv om de primært brukes av personer med synshemminger, er de også svært nyttige for brukere med læringsvansker som dysleksi. +[Skjermlesere](https://en.wikipedia.org/wiki/Screen_reader) er ganske avanserte teknologier som omdanner digital tekst til tale eller punktskriftutgang. Selv om de først og fremst brukes av personer med synshemninger, er de også svært nyttige for brukere med lærevansker som dysleksi. -Jeg liker å tenke på en skjermleser som en veldig smart forteller som leser en bok for deg. Den leser innhold høyt i en logisk rekkefølge, annonserer interaktive elementer som "knapp" eller "lenke," og gir tastatursnarveier for å hoppe rundt på en side. Men her er saken—skjermlesere kan bare gjøre magien sin hvis vi bygger nettsider med riktig struktur og meningsfullt innhold. Det er her du som utvikler kommer inn! +Jeg liker å tenke på en skjermleser som å ha en veldig smart forteller som leser en bok for deg. Den leser innhold høyt i en logisk rekkefølge, kunngjør interaktive elementer som "knapp" eller "lenke", og gir hurtigtaster for å hoppe rundt på en side. Men her er greia—skjermlesere kan bare jobbe sin magi hvis vi bygger nettsider med riktig struktur og meningsfullt innhold. Det er her du som utvikler kommer inn! -**Populære skjermlesere på tvers av plattformer:** +**Populære skjermlesere på ulike plattformer:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratis og mest populær), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (innebygd) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (innebygd og svært kapabel) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (innebygd) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (gratis og åpen kildekode) -**Hvordan skjermlesere navigerer webinnhold:** +**Hvordan skjermlesere navigerer nettpresentasjoner:** -Skjermlesere gir flere navigasjonsmetoder som gjør surfing effektivt for erfarne brukere: +Skjermlesere tilbyr flere navigasjonsmetoder som gjør surfing effektivt for erfarne brukere: - **Sekvensiell lesing**: Leser innhold fra topp til bunn, som å følge en bok -- **Landmarks-navigasjon**: Hopper mellom seksjoner på siden (header, navigasjon, hovedinnhold, footer) -- **Overskriftsnavigasjon**: Hopper mellom overskrifter for å forstå sidens struktur +- **Landmark-navigasjon**: Hopper mellom seksjoner på siden (header, nav, main, footer) +- **Overskriftsnavigasjon**: Hopper mellom overskrifter for å forstå sidestruktur - **Lenkelister**: Genererer en liste over alle lenker for rask tilgang -- **Skjemakontroller**: Navigerer direkte mellom input-felt og knapper +- **Skjemakontroller**: Navigerer direkte mellom inputfelter og knapper -> 💡 **Her er noe som blåste meg av banen**: 68% av skjermleserbrukere navigerer primært ved hjelp av overskrifter ([WebAIM-undersøkelse](https://webaim.org/projects/screenreadersurvey9/#finding)). Dette betyr at overskriftsstrukturen din er som et veikart for brukere—når du får det riktig, hjelper du folk med å finne veien rundt innholdet ditt raskere! +> 💡 **Her er noe som blåste meg av banen**: 68 % av skjermleserbrukere navigerer hovedsakelig med overskrifter ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Det betyr at overskriftsstrukturen din er som et veikart for brukerne—når den er riktig, hjelper du folk å finne veien i innholdet ditt raskere! ### Bygge din testarbeidsflyt -Her er gode nyheter—effektiv testing for tilgjengelighet trenger ikke være overveldende! Du vil kombinere automatiserte verktøy (de er fantastiske til å fange åpenbare problemer) med litt praktisk testing. Her er en systematisk tilnærming som jeg har funnet ut fanger de fleste problemer uten å ta hele dagen: +Her er noen gode nyheter—effektiv tilgjengelighetstesting trenger ikke være overveldende! Du vil kombinere automatiserte verktøy (de er fantastiske til å oppdage åpenbare feil) med noe praktisk testing. Her er en systematisk tilnærming jeg har funnet fanger de fleste problemer uten å spise opp hele dagen din: -**Essensiell manuell testarbeidsflyt:** +**Viktig manuell test-arbeidsflyt:** ```mermaid -graph TD - A[Start Testing] --> B{Keyboard Navigation} - B --> C[Tab through all interactive elements] - C --> D{Screen Reader Testing} - D --> E[Test with NVDA/VoiceOver] - E --> F{Zoom Testing} - F --> G[Zoom to 200% and test functionality] - G --> H{Color/Contrast Check} - H --> I[Verify all text meets contrast ratios] - I --> J{Focus Management} - J --> K[Ensure focus indicators are visible] - K --> L[Testing Complete] +flowchart TD + A[🚀 Start testing] --> B{⌨️ Tastaturnavigasjon} + B --> C[Tabb gjennom alle interaktive elementer] + C --> D{🎧 Skjermlesertesting} + D --> E[Test med NVDA/VoiceOver] + E --> F{🔍 Zoomtesting} + F --> G[Zoom til 200 % og test funksjonalitet] + G --> H{🎨 Farge-/kontrastsjekk} + H --> I[Verifiser at all tekst oppfyller kontrastratioer] + I --> J{👁️ Fokushåndtering} + J --> K[Sørg for at fokusindikatorer er synlige] + K --> L[✅ Testing fullført] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 ``` +**Trinn-for-trinn test-sjekkliste:** +1. **Tastaturnavigasjon**: Bruk bare Tab, Shift+Tab, Enter, Space og piltaster +2. **Skjermlesertesting**: Slå på NVDA, VoiceOver eller Narrator og naviger med øynene lukket +3. **Zoom-testing**: Test med 200 % og 400 % zoomnivåer +4. **Fargkontrastverifisering**: Sjekk all tekst og brukergrensesnittelementer +5. **Test fokusindikatorer**: Sørg for at alle interaktive elementer har synlige fokus-tilstander -**Trinn-for-trinn test sjekkliste:** -1. **Tastaturnavigasjon**: Bruk kun Tab, Shift+Tab, Enter, Space og piltaster -2. **Skjermlesertesting**: Aktiver NVDA, VoiceOver eller Narrator og naviger med øynene lukket -3. **Zoomtesting**: Test på 200% og 400% zoomnivåer -4. **Fargekontrastverifisering**: Sjekk all tekst og UI-komponenter -5. **Fokusindikator-testing**: Sørg for at alle interaktive elementer har synlige fokusstatuser - -✅ **Start med Lighthouse**: Åpne nettleserens DevTools, kjør en Lighthouse-tilgjengelighetsanalyse, og bruk resultatene til å fokusere på manuell testing. +✅ **Start med Lighthouse**: Åpne nettleserens Utviklerverktøy, kjør en Lighthouse-tilgjengelighetsrevisjon, og bruk resultatene til å guide fokuset i den manuelle testingen din. ### Zoom- og forstørrelsesverktøy -Du vet hvordan du noen ganger zoomer inn på telefonen når teksten er for liten, eller myser mot laptopskjermen i sterkt sollys? Mange brukere er avhengige av forstørrelsesverktøy for å gjøre innhold lesbart hver eneste dag. Dette inkluderer personer med nedsatt syn, eldre og alle som noen gang har prøvd å lese en nettside utendørs. +Vet du hvordan du noen ganger kniper for å zoome på telefonen når teksten er for liten, eller myser på laptopskjermen i sterkt sollys? Mange brukere er avhengige av forstørrelsesverktøy for å gjøre innhold lesbart hver eneste dag. Dette inkluderer personer med nedsatt syn, eldre, og alle som noen gang har prøvd å lese en nettside ute i friluft. -Moderne zoomteknologier har utviklet seg utover bare å gjøre ting større. Å forstå hvordan disse verktøyene fungerer vil hjelpe deg med å lage responsive design som forblir funksjonelle og attraktive på alle forstørrelsesnivåer. +Moderne zoomteknologier har utviklet seg utover å bare gjøre ting større. Å forstå hvordan disse verktøyene fungerer vil hjelpe deg å lage responsive design som forblir funksjonelle og attraktive på alle forstørrelsesnivåer. **Moderne nettleserzoom-funksjoner:** -- **Sidezoom**: Skalerer alt innhold proporsjonalt (tekst, bilder, layout) - dette er den foretrukne metoden -- **Kun tekstzoom**: Øker skriftstørrelsen mens den opprinnelige layouten beholdes -- **Pinch-to-zoom**: Mobilgest støtte for midlertidig forstørrelse -- **Nettleserstøtte**: Alle moderne nettlesere støtter zoom opp til 500% uten å bryte funksjonaliteten +- **Sidezoom**: Skalerer alt innhold proporsjonalt (tekst, bilder, layout) – dette er den foretrukne metoden +- **Zoom kun på tekst**: Øker fontstørrelse mens original layout bevares +- **Knip-til-zoom**: Mobilgest for midlertidig forstørrelse +- **Nettleserstøtte**: Alle moderne nettlesere støtter zoom opptil 500 % uten å bryte funksjonalitet **Spesialisert forstørrelsesprogramvare:** -- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (innebygd), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) +- **Windows**: [Forstørrelsesglass](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (innebygd), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (innebygd med avanserte funksjoner) -> ⚠️ **Designhensyn**: WCAG krever at innhold forblir funksjonelt når det zoomes til 200%. På dette nivået bør horisontal scrolling være minimal, og alle interaktive elementer bør forbli tilgjengelige. +> ⚠️ **Designhensyn**: WCAG krever at innhold forblir funksjonelt ved 200 % zoom. På dette nivået skal horisontal rulling være minimal, og alle interaktive elementer må fortsatt være tilgjengelige. -✅ **Test ditt responsive design**: Zoom nettleseren din til 200% og 400%. Tilpasser layouten seg elegant? Kan du fortsatt få tilgang til all funksjonalitet uten overdreven scrolling? +✅ **Test ditt responsive design**: Zoom nettleseren til 200 % og 400 %. Tilpasser layouten seg elegant? Kan du fortsatt få tilgang til all funksjonalitet uten overdreven rulling? -## Moderne verktøy for testing av tilgjengelighet +## Moderne tilgjengelighetstestverktøy -Nå som du forstår hvordan folk navigerer på nettet med hjelpemiddelteknologier, la oss utforske verktøyene som hjelper deg med å bygge og teste tilgjengelige nettsider. +Nå som du forstår hvordan folk navigerer nettet med hjelpeteknologier, la oss utforske verktøy som hjelper deg å bygge og teste tilgjengelige nettsider. -Tenk på det slik: automatiserte verktøy er gode til å fange åpenbare problemer (som manglende alt-tekst), mens praktisk testing hjelper deg med å sikre at nettstedet ditt føles bra å bruke i den virkelige verden. Sammen gir de deg trygghet om at nettstedene dine fungerer for alle. +Tenk på det slik: automatiserte verktøy er gode til å fange åpenbare problemer (som manglende alt-tekst), mens praktisk testing hjelper deg å sikre at siden føles god å bruke i virkeligheten. Sammen gir de deg selvtillit på at nettsidene dine fungerer for alle. -### Testing av fargekontrast +### Fargkontrasttesting -Her er gode nyheter: fargekontrast er en av de vanligste tilgjengelighetsproblemene, men det er også en av de enkleste å fikse. God kontrast er til nytte for alle—fra brukere med synshemminger til folk som prøver å lese telefonene sine på stranden. +Her er noen gode nyheter: fargkontrast er en av de vanligste tilgjengelighetsutfordringene, men også en av de enkleste å fikse. God kontrast gagner alle—fra brukere med synsnedsettelser til folk som prøver å lese telefonen sin på stranden. **WCAG-kontrastkrav:** -| Teksttype | WCAG AA (Minimum) | WCAG AAA (Forbedret) | +| Teksttype | WCAG AA (minimum) | WCAG AAA (forbedret) | |-----------|-------------------|---------------------| -| **Vanlig tekst** (under 18pt) | 4.5:1 kontrastforhold | 7:1 kontrastforhold | -| **Stor tekst** (18pt+ eller 14pt+ fet) | 3:1 kontrastforhold | 4.5:1 kontrastforhold | -| **UI-komponenter** (knapper, skjemarammer) | 3:1 kontrastforhold | 3:1 kontrastforhold | +| **Normal tekst** (under 18 pt) | 4,5:1 kontrastforhold | 7:1 kontrastforhold | +| **Stor tekst** (18 pt+ eller 14 pt+ fet) | 3:1 kontrastforhold | 4,5:1 kontrastforhold | +| **UI-komponenter** (knapper, formularrammer) | 3:1 kontrastforhold | 3:1 kontrastforhold | **Essensielle testverktøy:** -- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop-app med fargevelger -- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Nettbasert med umiddelbar tilbakemelding -- [Stark](https://www.getstark.co/) - Designverktøy-plugin for Figma, Sketch, Adobe XD -- [Accessible Colors](https://accessible-colors.com/) - Finn tilgjengelige fargepaletter +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) – Skrivebordsapp med fargeplukker +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) – Nettbasert med umiddelbar feedback +- [Stark](https://www.getstark.co/) – Designverktøy-plugin for Figma, Sketch, Adobe XD +- [Accessible Colors](https://accessible-colors.com/) – Finn tilgjengelige fargepaletter -✅ **Bygg bedre fargepaletter**: Start med merkevarefargene dine og bruk kontrasttestere for å lage tilgjengelige varianter. Dokumenter disse som tilgjengelige fargetokens i designsystemet ditt. +✅ **Lag bedre fargepaletter**: Start med merkevarens farger og bruk kontrastkontrollere for å lage tilgjengelige varianter. Dokumenter disse som tilgjengelige fargetoner i designsystemet ditt. ### Omfattende tilgjengelighetsrevisjon -Den mest effektive tilgjengelighetstesten kombinerer flere tilnærminger. Ingen enkelt verktøy fanger alt, så det å bygge en testrutine med ulike metoder sikrer grundig dekning. +Den mest effektive tilgjengelighetstesting kombinerer flere metoder. Ingen enkelt verktøy fanger opp alt, så ved å bygge en testrutine med forskjellige tilnærminger sikrer du grundig dekning. **Nettleserbasert testing (innebygd i DevTools):** -- **Chrome/Edge**: Lighthouse tilgjengelighetsanalyse + Tilgjengelighetspanel +- **Chrome/Edge**: Lighthouse-tilgjengelighetsrevisjon + tilgjengelighetspanel - **Firefox**: Tilgjengelighetsinspektør med detaljert trevisning -- **Safari**: Revisjonsfanen i Web Inspector med VoiceOver-simulering +- **Safari**: Revisjonsfane i Web Inspector med VoiceOver-simulering **Profesjonelle testutvidelser:** -- [axe DevTools](https://www.deque.com/axe/devtools/) - Bransjestandard for automatisert testing -- [WAVE](https://wave.webaim.org/extension/) - Visuell tilbakemelding med feilmarkering -- [Accessibility Insights](https://accessibilityinsights.io/) - Microsofts omfattende testverktøy +- [axe DevTools](https://www.deque.com/axe/devtools/) – Bransjestandard for automatisert testing +- [WAVE](https://wave.webaim.org/extension/) – Visuell tilbakemelding med feilmelding +- [Accessibility Insights](https://accessibilityinsights.io/) – Microsofts omfattende testsett -**Kommandolinje og CI/CD-integrasjon:** -- [axe-core](https://github.com/dequelabs/axe-core) - JavaScript-bibliotek for automatisert testing -- [Pa11y](https://pa11y.org/) - Kommandolinjeverktøy for tilgjengelighetstesting -- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Automatisert tilgjengelighetsscore +**Kommando-linje og CI/CD-integrasjon:** +- [axe-core](https://github.com/dequelabs/axe-core) – JavaScript-bibliotek for automatisert testing +- [Pa11y](https://pa11y.org/) – Kommando-linje tilgjengelighetstestverktøy +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) – Automatisert tilgjengelighetsscore -> 🎯 **Testmål**: Sikt på en Lighthouse-tilgjengelighetsscore på 95+ som din grunnlinje. Husk, automatiserte verktøy fanger bare omtrent 30-40% av tilgjengelighetsproblemer—manuell testing er fortsatt essensielt! +> 🎯 **Testmål**: sikte på Lighthouse-tilgjengelighetsscore på 95+ som baseline. Husk at automatiserte verktøy kun fanger ca. 30-40 % av tilgjengelighetsproblemer—manuell testing er fortsatt essensielt! -## Bygge tilgjengelighet fra grunnen av +### 🧠 **Testferdighets-sjekk: Klar for å finne problemer?** -Nøkkelen til suksess med tilgjengelighet er å bygge det inn i fundamentet fra dag én. Jeg vet det kan være fristende å tenke "jeg legger til tilgjengelighet senere," men det er som å prøve å legge til en rampe til et hus etter at det allerede er bygget. Mulig? Ja. Enkelt? Ikke akkurat. +**La oss se hvordan du føler deg om tilgjengelighetstesting:** +- Hvilken testmetode virker mest tilgjengelig for deg akkurat nå? +- Kan du tenke deg å bruke bare tastaturnavigasjon en hel dag? +- Hva er en tilgjengelighetsbarriere du personlig har opplevd på nettet? -Tenk på tilgjengelighet som å planlegge et hus—det er mye enklere å inkludere rullestoltilgang i de opprinnelige arkitektplanene enn å ettermontere alt senere. +```mermaid +pie title "Tilgjengelighetsproblemer fanget opp av ulike metoder" + "Automatiserte verktøy" : 35 + "Manuell testing" : 40 + "Bruker tilbakemelding" : 25 +``` +> **Selvtillitsboost**: Profesjonelle tilgjengelighetstestere bruker akkurat denne kombinasjonen av metoder. Du lærer bransjestandard praksis! + +## Bygge tilgjengelighet fra bunnen av -### POUR-prinsippene: Grunnlaget for tilgjengelighet +Nøkkelen til suksess med tilgjengelighet er å bygge det inn i grunnlaget ditt fra dag én. Jeg vet det er fristende å tenke "jeg legger til tilgjengelighet senere", men det er som å prøve å legge til en rampe til et hus etter at det allerede er bygget. Mulig? Ja. Lett? Ikke akkurat. -Retningslinjene for tilgjengelig webinnhold (WCAG) er bygget rundt fire grunnleggende prinsipper som staver POUR. Ikke bekymre deg—dette er ikke tørre akademiske konsepter! De er faktisk praktiske retningslinjer for å lage innhold som fungerer for alle. +Tenk på tilgjengelighet som å planlegge et hus—det er mye enklere å inkludere rullestoltilgang i de opprinnelige arkitektplanene enn å lage tilpasninger i etterkant. -Når du får taket på POUR, blir det mye mer intuitivt å ta tilgjengelighetsbeslutninger. Det er som å ha en mental sjekkliste som veileder designvalgene dine. La oss bryte det ned: +### POUR-prinsippene: Din tilgjengelighetsgrunnmur -**🔍 Oppfattbart**: Informasjon må presenteres på måter brukere kan oppfatte gjennom sine tilgjengelige sanser +Retningslinjene for tilgjengelig webinnhold (WCAG) er bygget rundt fire grunnleggende prinsipper som staver ut POUR. Ikke bekymre deg—disse er ikke tørr, akademisk teori! De er praktiske retningslinjer for å lage innhold som fungerer for alle. + +Når du får taket på POUR, blir tilgjengelighetsvalg mye mer intuitive. Det er som å ha en mental sjekkliste som guider designvalgene dine. La oss bryte det ned: + +```mermaid +flowchart LR + A[🔍 OPPLEVBART
Kan brukere sanse det?] --> B[🎮 BRUKBART
Kan brukere bruke det?] + B --> C[📖 FORSTÅELIG
Kan brukere forstå det?] + C --> D[💪 ROBUST
Fungerer det overalt?] + + A1[Alternativ tekst
Bildetekster
Kontrast] --> A + B1[Tastaturtilgang
Ingen anfall
Tidsbegrensninger] --> B + C1[Klart språk
Forutsigbart
Feilhjelp] --> C + D1[Gyldig kode
Kompatibel
Fremtidssikret] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Oppfattbart (Perceivable)**: Informasjon må kunne presenteres på måter brukerne kan oppfatte med sine tilgjengelige sanser - Gi tekstalternativer for ikke-tekstlig innhold (bilder, videoer, lyd) - Sørg for tilstrekkelig fargekontrast for all tekst og UI-komponenter -- Tilby undertekster og transkripsjoner for multimedieinnhold -- Design innhold som forblir funksjonelt når det forstørres opp til 200% -- Bruk flere sensoriske egenskaper (ikke bare farge) for å formidle informasjon +- Tilby teksting og transkripsjoner for multimedia +- Design innhold som forblir funksjonelt når det økes til 200 % +- Bruk flere sansemessige kjennetegn (ikke bare farge) for å formidle informasjon -**🎮 Operativt**: Alle grensesnittkomponenter må være operable gjennom tilgjengelige inputmetoder +**🎮 Opererbart (Operable)**: Alle grensesnittkomponenter må kunne betjenes med tilgjengelige inndata-metoder - Gjør all funksjonalitet tilgjengelig via tastaturnavigasjon -- Gi brukere tilstrekkelig tid til å lese og interagere med innhold -- Unngå innhold som forårsaker anfall eller vestibulære lidelser -- Hjelp brukere med å navigere effektivt med klar struktur og landemerker -- Sørg for at interaktive elementer har tilstrekkelige målstørrelser (minimum 44px) +- Gi brukerne nok tid til å lese og interagere med innhold +- Unngå innhold som kan forårsake anfall eller balanseforstyrrelser +- Hjelp brukerne å navigere effektivt med klar struktur og landemerker +- Sørg for at interaktive elementer har tilstrekkelig målstørrelse (minst 44 px) + +**📖 Forståelig (Understandable)**: Informasjon og UI-operasjon må være klar og forståelig + +- Bruk klart, enkelt språk tilpasset målgruppen din +- Sørg for at innhold opptrer og fungerer på forutsigbare, konsistente måter +- Gi klare instruksjoner og feilmeldinger ved brukerinput +- Hjelp brukerne å forstå og rette feil i skjemaer +- Organiser innhold med logisk leserekkefølge og informasjonsstruktur + +**💪 Robust (Robust)**: Innhold må fungere pålitelig på tvers av ulike teknologier og hjelpeteknologier -**📖 Forståelig**: Informasjon og UI-operasjon må være klar og forståelig +- **Bruk gyldig, semantisk HTML som grunnlag** +- **Sørg for kompatibilitet med nåværende og fremtidige hjelpeteknologier** +- **Følg webstandarder og beste praksis for markup** +- **Test på tvers av forskjellige nettlesere, enheter og hjelpemidler** +- **Strukturer innhold slik at det degraderer pent når avanserte funksjoner ikke støttes** -- Bruk klar, enkel språk som passer for målgruppen din -- Sørg for at innhold vises og opererer på forutsigbare, konsistente måter -- Gi klare instruksjoner og feilmeldinger for brukerinput -- Hjelp brukere med å forstå og rette feil i skjemaer -- Organiser innhold med logisk leserekkefølge og informasjonshierarki +### 🎯 **POUR-prinsippene: Slik gjør du dem holdbare** -**💪 Robust**: Innhold må fungere pålitelig på tvers av ulike teknologier og hjelpemiddelverktøy +**Rask refleksjon over grunnlaget:** +- Kan du tenke deg en nettsidefunksjon som bryter hvert POUR-prinsipp? +- Hvilket prinsipp føles mest naturlig for deg som utvikler? +- Hvordan kan disse prinsippene forbedre design for alle, ikke bare brukere med funksjonsnedsettelser? -- Bruk gyldig, semantisk HTML som fundament -- Sørg for kompatibilitet med nåværende og fremtidige hjelpemiddelverktøy -- Følg webstandarder og beste praksis for markup -- Test på tvers av ulike nettlesere, enheter og hjelpemiddelverktøy -- Struktur innhold slik at det degraderer elegant når avanserte funksjoner ikke støttes +```mermaid +quadrantChart + title POUR prinsipper påvirkningsmatrise + x-axis Lav innsats --> Høy innsats + y-axis Lav påvirkning --> Høy påvirkning + quadrant-1 Rask gevinst + quadrant-2 Store prosjekter + quadrant-3 Vurder senere + quadrant-4 Strategisk fokus + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **Husk**: Start med forbedringer som gir stor effekt med liten innsats. Semantisk HTML og alternativ tekst gir deg den største tilgjengelighetsforbedringen med minst innsats! ## Lage tilgjengelig visuell design God visuell design og tilgjengelighet går hånd i hånd. Når du designer med tilgjengelighet i tankene, oppdager du ofte at disse begrensningene fører til renere, mer elegante løsninger som gagner alle brukere. -La oss utforske hvordan vi kan lage visuelt tiltalende design som fungerer for alle, uavhengig av deres visuelle evner eller forholdene de ser innholdet under. +La oss utforske hvordan vi kan skape visuelt tiltalende design som fungerer for alle, uavhengig av deres synsevne eller betingelsene de ser innholdet under. ### Farge- og visuelle tilgjengelighetsstrategier -Farge er kraftfullt for kommunikasjon, men det bør aldri være den eneste måten du formidler viktig informasjon. Å designe utover farge skaper mer robuste og inkluderende opplevelser som fungerer i flere situasjoner. -**Design for fargesynsforskjeller:** +Farge er et kraftfullt kommunikasjonsmiddel, men den bør aldri være den eneste måten du formidler viktig informasjon på. Å designe utover farge skaper mer robuste, inkluderende opplevelser som fungerer i flere situasjoner. -Omtrent 8 % av menn og 0,5 % av kvinner har en form for fargesynsforskjell (ofte kalt "fargeblindhet"). De vanligste typene er: -- **Deuteranopia**: Vanskeligheter med å skille mellom rødt og grønt -- **Protanopia**: Rødt ser svakere ut -- **Tritanopia**: Vanskeligheter med blått og gult (sjelden) +**Design for fargesynsvariasjoner:** + +Omtrent 8 % av menn og 0,5 % av kvinner har en form for fargesynsvariasjon (ofte kalt «fargeblindhet»). De vanligste typene er: +- **Deuteranopi**: Vansker med å skille rødt og grønt +- **Protanopi**: Rødt ser mer dempet ut +- **Tritanopi**: Vansker med blått og gult (sjeldent) **Inkluderende fargestrategier:** @@ -243,18 +348,18 @@ Omtrent 8 % av menn og 0,5 % av kvinner har en form for fargesynsforskjell (ofte ``` **Utover grunnleggende kontrastkrav:** -- Test fargevalgene dine med simulatorer for fargeblindhet -- Bruk mønstre, teksturer eller former sammen med fargekoding +- Test fargevalgene dine med fargeblindhetssimulatorer +- Bruk mønstre, teksturer eller former i tillegg til fargekoding - Sørg for at interaktive tilstander forblir gjenkjennelige uten farge -- Vurder hvordan designet ditt ser ut i høy kontrast-modus +- Tenk på hvordan designet ser ut i høykontrastmodus -✅ **Test tilgjengeligheten til fargene dine**: Bruk verktøy som [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) for å se hvordan nettstedet ditt ser ut for brukere med ulike typer fargesyn. +✅ **Test fargetilgjengeligheten din**: Bruk verktøy som [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) for å se hvordan siden din ser ut for brukere med ulike typer fargesyn. ### Fokusindikatorer og interaksjonsdesign -Fokusindikatorer er den digitale ekvivalenten til en markør – de viser tastaturbrukere hvor de befinner seg på siden. Godt designede fokusindikatorer forbedrer opplevelsen for alle ved å gjøre interaksjoner klare og forutsigbare. +Fokusindikatorer er det digitale ekvivalenten til en markør—de viser tastaturbrukere hvor de er på siden. Godt designede fokusindikatorer forbedrer opplevelsen for alle ved å gjøre interaksjoner tydelige og forutsigbare. -**Moderne beste praksis for fokusindikatorer:** +**Beste praksis for moderne fokusindikatorer:** ```css /* Enhanced focus styles that work across browsers */ @@ -284,22 +389,43 @@ button:focus:not(:focus-visible) { ``` **Krav til fokusindikatorer:** -- **Synlighet**: Må ha minst 3:1 kontrastforhold med omkringliggende elementer +- **Synlighet**: Må ha minst 3:1 kontrastforhold mot omkringliggende elementer - **Bredde**: Minimum 2px tykkelse rundt hele elementet -- **Vedvarende**: Skal forbli synlig til fokus flyttes til et annet sted -- **Distinksjon**: Må være visuelt forskjellig fra andre UI-tilstander +- **Varighet**: Skal være synlig til fokus flyttes til et annet element +- **Forskjell**: Må visuelt skille seg fra andre UI-tilstander -> 💡 **Designtips**: Gode fokusindikatorer bruker ofte en kombinasjon av kontur, boks-skygge og fargeendringer for å sikre synlighet på ulike bakgrunner og kontekster. +> 💡 **Designtips**: Gode fokusindikatorer bruker ofte en kombinasjon av outline, boks-skygge og fargeendringer for å sikre synlighet mot ulike bakgrunner og kontekster. -✅ **Revider fokusindikatorer**: Naviger gjennom nettstedet ditt med Tab-tasten og legg merke til hvilke elementer som har klare fokusindikatorer. Er noen vanskelige å se eller helt fraværende? +✅ **Revider fokusindikatorer**: Naviger med Tab gjennom nettstedet ditt og noter hvilke elementer som har klare fokusindikatorer. Er noen vanskelige å se eller mangler helt? ### Semantisk HTML: Grunnlaget for tilgjengelighet -Semantisk HTML er som å gi hjelpemiddelsteknologier et GPS-system for nettstedet ditt. Når du bruker de riktige HTML-elementene til deres tiltenkte formål, gir du skjermlesere, tastaturer og andre verktøy et detaljert veikart som hjelper brukere med å navigere effektivt. +Semantisk HTML er som å gi hjelpemidler et GPS-system for nettsiden din. Når du bruker riktige HTML-elementer for deres tiltenkte formål, gir du i praksis skjermlesere, tastatur og andre verktøy en detaljert veibeskrivelse som hjelper brukerne å navigere effektivt. -Her er en analogi som virkelig klikket for meg: semantisk HTML er forskjellen mellom et godt organisert bibliotek med klare kategorier og hjelpsomme skilt versus et lager hvor bøker er spredt tilfeldig. Begge steder har de samme bøkene, men hvor ville du helst prøve å finne noe? Nettopp! +Her er en analogi som virkelig traff meg: semantisk HTML er forskjellen på et godt organisert bibliotek med klare kategorier og hjelpsomme skilt versus et lager der bøkene ligger spredt tilfeldig. Begge steder har de samme bøkene, men hvor ville du helst prøve å finne noe? Akkurat! -**Byggeklosser for en tilgjengelig sidestruktur:** +```mermaid +flowchart TD + A[🏠 HTML-dokument] --> B[📰 topptekst] + A --> C[🧭 navigasjon] + A --> D[📄 hoveddel] + A --> E[📋 bunntekst] + + B --> B1[h1: Nettstednavn
Logo & merkevare] + C --> C1[ul: Navigasjon
Primære lenker] + D --> D1[artikkel: Innhold
seksjon: Underseksjoner] + D --> D2[sidefelt: Sidepanel
Relatert innhold] + E --> E1[navigasjon: Bunntekstlenker
Opphavsrettsinformasjon] + + D1 --> D1a[h1: Sidetittel
h2: Hovedseksjoner
h3: Underseksjoner] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Byggeklosser for tilgjengelig sidestruktur:** ```html @@ -357,31 +483,57 @@ Her er en analogi som virkelig klikket for meg: semantisk HTML er forskjellen me **Hvorfor semantisk HTML transformerer tilgjengelighet:** | Semantisk element | Formål | Fordel for skjermleser | -|------------------|---------|----------------------| -| `
` | Side- eller seksjonshode | "Banner-landemerke" - rask navigering til toppen | -| `