From 860701646134c19a41262ceb4598e275082b2dac Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Fri, 6 Mar 2026 18:53:51 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes) --- translations/it/.co-op-translator.json | 10 +- .../README.md | 712 ++++++++------- translations/it/AGENTS.md | 284 +++--- translations/it/README.md | 195 +++-- translations/pl/.co-op-translator.json | 10 +- .../README.md | 674 +++++++-------- translations/pl/AGENTS.md | 316 +++---- translations/pl/README.md | 191 ++-- translations/tr/.co-op-translator.json | 10 +- .../README.md | 812 +++++++++--------- translations/tr/AGENTS.md | 306 +++---- translations/tr/README.md | 253 +++--- 12 files changed, 1903 insertions(+), 1870 deletions(-) diff --git a/translations/it/.co-op-translator.json b/translations/it/.co-op-translator.json index 0af82185b..a1861a38e 100644 --- a/translations/it/.co-op-translator.json +++ b/translations/it/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-04T00:21:41+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T18:38:37+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "it" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:00:24+00:00", + "translation_date": "2026-03-06T18:51:24+00:00", "source_file": "AGENTS.md", "language_code": "it" }, @@ -516,8 +516,8 @@ "language_code": "it" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:56:38+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T18:35:20+00:00", "source_file": "README.md", "language_code": "it" }, diff --git a/translations/it/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/it/1-getting-started-lessons/1-intro-to-programming-languages/README.md index e05ee0ba2..36c422071 100644 --- a/translations/it/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/it/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ # Introduzione ai Linguaggi di Programmazione e agli Strumenti Moderni per Sviluppatori + +Ciao, futuro sviluppatore! 👋 Posso dirti qualcosa che ancora mi fa venire i brividi ogni singolo giorno? Stai per scoprire che programmare non riguarda solo i computer – è avere veri superpoteri per dare vita alle tue idee più folli! -Ciao futuro sviluppatore! 👋 Posso dirti qualcosa che mi emoziona ogni giorno? Stai per scoprire che programmare non riguarda solo i computer – è come avere superpoteri per dare vita alle tue idee più folli! +Sai quel momento in cui usi la tua app preferita e tutto funziona perfettamente? Quando premi un pulsante e succede qualcosa di assolutamente magico che ti fa dire "wow, come hanno FATTO?" Beh, qualcuno proprio come te – probabilmente seduto nel suo bar preferito alle 2 di notte con il suo terzo espresso – ha scritto il codice che ha creato quella magia. Ecco cosa ti stupirà: alla fine di questa lezione, non solo capirai come hanno fatto, ma sarai ansioso di provarci tu stesso! -Sai quel momento in cui usi la tua app preferita e tutto funziona perfettamente? Quando premi un pulsante e succede qualcosa di assolutamente magico che ti fa pensare "wow, come hanno fatto a farlo?" Beh, qualcuno proprio come te – probabilmente seduto nel suo caffè preferito alle 2 di notte con il terzo espresso – ha scritto il codice che ha creato quella magia. E sai cosa ti lascerà a bocca aperta? Alla fine di questa lezione, non solo capirai come l'hanno fatto, ma avrai una voglia matta di provarci anche tu! +Guarda, capisco benissimo se ora la programmazione ti sembra intimidatoria. Quando ho iniziato, pensavo davvero che servisse essere un genio della matematica o aver programmato da quando avevi cinque anni. Ma ecco cosa ha cambiato completamente la mia prospettiva: programmare è esattamente come imparare a conversare in una nuova lingua. Inizi con "ciao" e "grazie", poi arrivano gli ordini per il caffè, e prima che te ne accorga, stai discutendo di filosofia profonda! Solo che in questo caso, stai conversando con i computer, e sinceramente? Sono i compagni di conversazione più pazienti che tu possa mai avere – non giudicano mai i tuoi errori e sono sempre entusiasti di riprovare! -Ascolta, capisco perfettamente se la programmazione ti sembra intimidatoria in questo momento. Quando ho iniziato, pensavo sinceramente che fosse necessario essere un genio della matematica o aver iniziato a programmare a cinque anni. Ma ecco cosa ha completamente cambiato la mia prospettiva: programmare è esattamente come imparare a conversare in una nuova lingua. Si inizia con "ciao" e "grazie", poi si arriva a ordinare un caffè, e prima che te ne accorga, stai facendo discussioni filosofiche profonde! Solo che in questo caso, stai conversando con i computer, e onestamente? Sono i partner di conversazione più pazienti che tu possa mai avere – non giudicano mai i tuoi errori e sono sempre pronti a riprovare! - -Oggi esploreremo gli incredibili strumenti che rendono possibile, e seriamente coinvolgente, lo sviluppo web moderno. Sto parlando degli stessi editor, browser e flussi di lavoro che gli sviluppatori di Netflix, Spotify e del tuo studio di app indie preferito usano ogni giorno. Ecco la parte che ti farà ballare dalla gioia: la maggior parte di questi strumenti professionali e standard del settore sono completamente gratuiti! +Oggi esploreremo gli incredibili strumenti che rendono lo sviluppo web moderno non solo possibile, ma davvero coinvolgente. Sto parlando degli stessi editor, browser e flussi di lavoro che gli sviluppatori di Netflix, Spotify e del tuo studio indie preferito usano ogni giorno. Ecco la parte che ti farà fare un salto di gioia: la maggior parte di questi strumenti professionali e di livello industriale sono completamente gratuiti! ![Intro Programming](../../../../translated_images/it/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title Il Tuo Viaggio di Programmazione Oggi + section Scoprire + Cos'è la Programmazione: 5: You + Linguaggi di Programmazione: 4: You + Panoramica Strumenti: 5: You + section Esplorare + Editor di Codice: 4: You + Browser & DevTools: 5: You + Linea di Comando: 3: You + section Praticare + Detective del Linguaggio: 4: You + Esplorazione Strumenti: 5: You + Connessione con la Comunità: 5: You ``` - ## Vediamo Cosa Sai Già! -Prima di tuffarci nel divertimento, sono curioso – cosa sai già di questo mondo della programmazione? E ascolta, se stai guardando queste domande pensando "Non ho letteralmente idea di nulla", non solo va bene, è perfetto! Significa che sei esattamente nel posto giusto. Pensa a questo quiz come a uno stretching prima di un allenamento – stiamo solo riscaldando i muscoli del cervello! +Prima di tuffarci nelle cose divertenti, sono curioso – cosa sai già di questo mondo della programmazione? E ascolta, se stai guardando queste domande pensando "non ho proprio idea di niente," non è solo ok, è perfetto! Questo significa che sei nel posto giusto. Pensa a questo quiz come a uno stretching prima di un allenamento – stiamo solo riscaldando quei muscoli cerebrali! -[Fai il quiz preliminare alla lezione](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Partecipa al quiz pre-lezione](https://ff-quizzes.netlify.app/web/) -## L'Avventura Che Stiamo Per Intraprendere Insieme -Ok, sono davvero entusiasta di ciò che esploreremo oggi! Seriamente, vorrei poter vedere la tua faccia quando alcuni di questi concetti ti saranno chiari. Ecco l'incredibile viaggio che faremo insieme: +## L'Avventura che Stiamo per Intraprendere Insieme -- **Cos'è davvero la programmazione (e perché è la cosa più cool di sempre!)** – Scopriremo come il codice sia letteralmente la magia invisibile che alimenta tutto ciò che ti circonda, dalla sveglia che sa che è lunedì mattina all'algoritmo che seleziona perfettamente le tue raccomandazioni su Netflix. -- **I linguaggi di programmazione e le loro personalità straordinarie** – Immagina di entrare in una festa dove ogni persona ha superpoteri completamente diversi e modi unici di risolvere i problemi. Questo è il mondo dei linguaggi di programmazione, e ti piacerà conoscerli! -- **I mattoni fondamentali che fanno accadere la magia digitale** – Pensali come il set LEGO creativo definitivo. Una volta che capisci come questi pezzi si incastrano, ti renderai conto che puoi costruire letteralmente qualsiasi cosa la tua immaginazione sogni. -- **Strumenti professionali che ti faranno sentire come se ti avessero consegnato una bacchetta magica** – Non sto esagerando – questi strumenti ti faranno davvero sentire come se avessi superpoteri, e la parte migliore? Sono gli stessi che usano i professionisti! +Ok, sono davvero emozionato per quello che esploreremo oggi! Davvero, vorrei vedere la tua faccia quando alcuni concetti ti scattano. Ecco il fantastico viaggio che faremo insieme: -> 💡 **Ecco il punto**: Non pensare nemmeno di cercare di memorizzare tutto oggi! In questo momento, voglio solo che tu senta quella scintilla di entusiasmo per ciò che è possibile. I dettagli si fisseranno naturalmente mentre pratichiamo insieme – è così che avviene l'apprendimento reale! +- **Cos'è davvero la programmazione (e perché è la cosa più figa in assoluto!)** – Scopriremo come il codice sia letteralmente la magia invisibile che alimenta tutto ciò che ti circonda, dalla sveglia che in qualche modo sa che è lunedì mattina all’algoritmo che cura perfettamente le tue raccomandazioni su Netflix +- **I linguaggi di programmazione e le loro personalità straordinarie** – Immagina di entrare in una festa dove ogni persona ha superpoteri e modi di risolvere problemi completamente diversi. Ecco com’è il mondo dei linguaggi di programmazione, e li adorerai! +- **I mattoncini fondamentali che fanno succedere la magia digitale** – Pensali come il set LEGO creativo definitivo. Una volta capito come si incastrano, ti renderai conto di poter costruire letteralmente qualsiasi cosa la tua immaginazione sogni +- **Strumenti professionali che ti faranno sentire come se ti avessero appena dato la bacchetta di un mago** – Non sto esagerando – questi strumenti ti faranno davvero sentire come se avessi superpoteri, e la parte migliore? Sono gli stessi che usano i professionisti! -> Puoi seguire questa lezione su [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> 💡 **Ecco la cosa**: Non pensare nemmeno di dover memorizzare tutto oggi! Ora voglio solo che tu senta quella scintilla di entusiasmo per quello che è possibile fare. I dettagli verranno da soli mentre esercitiamo insieme – è così che si impara davvero! -## Quindi, Cos'è Esattamente *La Programmazione*? +> Puoi seguire questa lezione su [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -Ok, affrontiamo la domanda da un milione di dollari: cos'è davvero la programmazione? +## Quindi, Cos'è Esattamente la Programmazione? -Ti racconto una storia che ha completamente cambiato il mio modo di pensarci. La settimana scorsa stavo cercando di spiegare a mia madre come usare il nuovo telecomando della nostra smart TV. Mi sono ritrovato a dire cose tipo "Premi il pulsante rosso, ma non il grande pulsante rosso, il piccolo pulsante rosso a sinistra... no, la tua altra sinistra... ok, ora tienilo premuto per due secondi, non uno, non tre..." Ti suona familiare? 😅 +Ok, affrontiamo la domanda da un milione di dollari: cos’è davvero la programmazione? -Questa è programmazione! È l'arte di dare istruzioni incredibilmente dettagliate, passo dopo passo, a qualcosa di molto potente ma che ha bisogno che tutto sia spiegato perfettamente. Solo che invece di spiegare a tua madre (che può chiedere "quale pulsante rosso?!"), stai spiegando a un computer (che fa esattamente ciò che dici, anche se ciò che hai detto non è esattamente ciò che intendevi). +Ti racconterò una storia che ha cambiato completamente il mio modo di vedere le cose. La settimana scorsa stavo cercando di spiegare a mia mamma come usare il nostro nuovo telecomando smart per la TV. Mi sono ritrovato a dire cose come "Premi il bottone rosso, ma non il grande rosso, il piccolo rosso a sinistra... no, l’altro sinistro... ok, ora tienilo premuto per due secondi, non uno, non tre..." Ti suona familiare? 😅 -Ecco cosa mi ha lasciato a bocca aperta quando l'ho scoperto: i computer sono in realtà piuttosto semplici alla base. Capiscono letteralmente solo due cose – 1 e 0, che sono fondamentalmente "sì" e "no" o "acceso" e "spento". Tutto qui! Ma ecco dove diventa magico – non dobbiamo parlare in 1 e 0 come se fossimo in Matrix. È qui che entrano in gioco i **linguaggi di programmazione**. Sono come avere il miglior traduttore del mondo che prende i tuoi pensieri umani perfettamente normali e li converte in linguaggio informatico. +Questa è la programmazione! È l’arte di dare istruzioni dettagliatissime, passo dopo passo, a qualcosa di potentissimo ma che ha bisogno che tutto sia spiegato perfettamente. Solo che invece di spiegare a tua mamma (che può chiedere "quale bottone rosso?!"), stai spiegando a un computer (che fa esattamente quello che dici, anche se quello che hai detto non è proprio quello che intendevi). -Ecco cosa mi emoziona ancora ogni mattina quando mi sveglio: letteralmente *tutto* ciò che è digitale nella tua vita è iniziato con qualcuno proprio come te, probabilmente seduto in pigiama con una tazza di caffè, a scrivere codice sul suo laptop. Quel filtro Instagram che ti fa sembrare impeccabile? Qualcuno l'ha programmato. La raccomandazione che ti ha portato alla tua nuova canzone preferita? Un sviluppatore ha costruito quell'algoritmo. L'app che ti aiuta a dividere il conto della cena con gli amici? Sì, qualcuno ha pensato "questo è fastidioso, scommetto che potrei risolverlo" e poi... l'ha fatto! +Ecco cosa mi ha lasciato a bocca aperta quando ho imparato questa cosa: i computer sono in realtà molto semplici nella loro essenza. Capiscono letteralmente solo due cose – 1 e 0, che è praticamente solo "sì" e "no" o "acceso" e "spento." Tutto qui! Ma ecco dove succede la magia – non dobbiamo parlare in 1 e 0 come se fossimo in Matrix. Qui entrano in gioco i **linguaggi di programmazione**. Sono come avere il traduttore migliore del mondo che prende i tuoi pensieri umani e li trasforma in linguaggio del computer. -Quando impari a programmare, non stai solo acquisendo una nuova abilità – stai entrando a far parte di questa incredibile comunità di risolutori di problemi che passano le loro giornate a pensare: "E se potessi costruire qualcosa che renda la giornata di qualcuno un po' migliore?" Onestamente, c'è qualcosa di più bello di questo? +Ecco cosa ancora mi fa venire i brividi tutti i giorni appena mi sveglio: letteralmente *tutto* ciò che è digitale nella tua vita è iniziato con qualcuno proprio come te, probabilmente in pigiama con una tazza di caffè, che digitava codice sul suo portatile. Quel filtro Instagram che ti fa sembrare perfetto? Qualcuno l’ha programmato. La raccomandazione che ti ha portato alla tua nuova canzone preferita? Un sviluppatore ha costruito quell’algoritmo. L’app che ti aiuta a dividere i conti della cena con gli amici? Sì, qualcuno ha pensato "questa cosa è fastidiosa, posso sistemarla" e poi... l’ha fatto! -✅ **Caccia al Fatto Divertente**: Ecco qualcosa di super interessante da cercare quando hai un momento libero – chi pensi sia stato il primo programmatore al mondo? Ti do un indizio: potrebbe non essere chi ti aspetti! La storia dietro questa persona è assolutamente affascinante e dimostra che la programmazione è sempre stata una questione di risoluzione creativa dei problemi e pensiero fuori dagli schemi. +Quando impari a programmare, non stai solo acquisendo una nuova abilità – stai diventando parte di una comunità incredibile di risolutori di problemi che ogni giorno pensano: "E se potessi costruire qualcosa che renda il giorno di qualcuno un po’ migliore?" Davvero, c’è qualcosa di più figo di questo? -### 🧠 **Momento di Riflessione: Come Ti Senti?** +✅ **Caccia al fatto curioso**: Ecco una cosa super interessante da cercare quando hai un momento libero – chi pensi sia stato il primo programmatore del mondo? Ti do un indizio: potrebbe non essere chi aspetti! La storia di questa persona è assolutamente affascinante e dimostra che la programmazione è sempre stata questione di pensiero creativo e problem solving fuori dagli schemi. + +### 🧠 **Momento di Verifica: Come Ti Senti?** **Prenditi un momento per riflettere:** -- L'idea di "dare istruzioni ai computer" ti sembra più chiara ora? +- Ora ha senso l’idea di "dare istruzioni ai computer"? - Riesci a pensare a un compito quotidiano che vorresti automatizzare con la programmazione? -- Quali domande ti stanno venendo in mente su tutto questo mondo della programmazione? +- Quali domande ti stanno venendo in mente su questo mondo della programmazione? -> **Ricorda**: È assolutamente normale se alcuni concetti ti sembrano ancora confusi. Imparare a programmare è come imparare una nuova lingua – ci vuole tempo affinché il cervello costruisca quei percorsi neurali. Stai andando alla grande! +> **Ricorda**: È completamente normale se alcuni concetti ora ti sembrano confusi. Imparare a programmare è come imparare una nuova lingua – ci vuole tempo perché il cervello costruisca quei collegamenti neurali. Stai andando alla grande! ## I Linguaggi di Programmazione Sono Come Diversi Gusti di Magia -Ok, questo potrebbe sembrare strano, ma seguimi – i linguaggi di programmazione sono un po' come i diversi tipi di musica. Pensaci: hai il jazz, che è fluido e improvvisato, il rock che è potente e diretto, la musica classica che è elegante e strutturata, e l'hip-hop che è creativo ed espressivo. Ogni stile ha la sua atmosfera, la sua comunità di fan appassionati, e ognuno è perfetto per diversi stati d'animo e occasioni. +Ok, può sembrare strano, ma seguimi – i linguaggi di programmazione sono molto simili a diversi tipi di musica. Pensaci: hai il jazz, che è fluido e improvvisato, il rock potente e diretto, la classica elegante e strutturata, e l’hip-hop creativo ed espressivo. Ogni stile ha il suo mood, la sua comunità di fan appassionati, e ognuno è perfetto per occasioni e stati d’animo diversi. -I linguaggi di programmazione funzionano esattamente allo stesso modo! Non useresti lo stesso linguaggio per creare un divertente gioco mobile che useresti per analizzare enormi quantità di dati climatici, proprio come non suoneresti death metal in una lezione di yoga (beh, nella maggior parte delle lezioni di yoga! 😄). +I linguaggi di programmazione funzionano esattamente allo stesso modo! Non useresti lo stesso linguaggio per costruire un gioco mobile divertente che per elaborare enormi quantità di dati climatici, proprio come non suoneresti death metal a una lezione di yoga (beh, quasi sempre! 😄). -Ma ecco cosa mi lascia sempre a bocca aperta ogni volta che ci penso: questi linguaggi sono come avere l'interprete più paziente e brillante del mondo seduto accanto a te. Puoi esprimere le tue idee in un modo che sembra naturale per il tuo cervello umano, e loro si occupano di tutto il lavoro incredibilmente complesso di tradurle nel linguaggio dei computer. È come avere un amico perfettamente fluente sia in "creatività umana" che in "logica informatica" – e non si stanca mai, non ha bisogno di pause caffè e non ti giudica mai per aver fatto la stessa domanda due volte! +Ma ecco cosa mi stupisce ogni volta che ci penso: questi linguaggi sono come avere il traduttore più paziente e brillante del mondo seduto proprio accanto a te. Puoi esprimere le tue idee in un modo che è naturale per il tuo cervello umano, e loro si occupano di tutto quel lavoro incredibilmente complesso di traduzione in 1 e 0 che i computer parlano davvero. È come avere un amico che parla perfettamente sia la "creatività umana" che la "logica del computer" – e non si stanca mai, non ha bisogno di pause caffè, e non ti giudica se fai la stessa domanda due volte! ### Linguaggi di Programmazione Popolari e i Loro Usi ```mermaid mindmap - root((Programming Languages)) - Web Development + root((Linguaggi di Programmazione)) + Sviluppo Web JavaScript - Frontend Magic - Interactive Websites + Magia Frontend + Siti Web Interattivi TypeScript - JavaScript + Types - Enterprise Apps - Data & AI + JavaScript + Tipi + App Aziendali + Dati & IA Python - Data Science - Machine Learning - Automation + Scienza dei Dati + Apprendimento Automatico + Automazione R - Statistics - Research - Mobile Apps + Statistica + Ricerca + App Mobili Java Android - Enterprise + Aziendale Swift iOS - Apple Ecosystem + Ecosistema Apple Kotlin - Modern Android - Cross-platform - Systems & Performance + Android Moderno + Multi-piattaforma + Sistemi & Prestazioni C++ - Games - Performance Critical + Giochi + Critico per le Prestazioni Rust - Memory Safety - System Programming + Sicurezza della Memoria + Programmazione di Sistema Go - Cloud Services - Scalable Backend + Servizi Cloud + Backend Scalabile ``` - -| Linguaggio | Migliore per | Perché è popolare | -|------------|--------------|-------------------| -| **JavaScript** | Sviluppo web, interfacce utente | Funziona nei browser e alimenta siti web interattivi | +| Language | Ideale Per | Perché è Popolare | +|----------|----------|------------------| +| **JavaScript** | Sviluppo web, interfacce utente | Funziona nei browser e alimenta siti interattivi | | **Python** | Data science, automazione, AI | Facile da leggere e imparare, librerie potenti | -| **Java** | Applicazioni aziendali, app Android | Indipendente dalla piattaforma, robusto per sistemi grandi | -| **C#** | Applicazioni Windows, sviluppo di giochi | Forte supporto nell'ecosistema Microsoft | +| **Java** | Applicazioni enterprise, app Android | Indipendente dalla piattaforma, robusto per grandi sistemi | +| **C#** | Applicazioni Windows, sviluppo giochi | Forte supporto dall’ecosistema Microsoft | | **Go** | Servizi cloud, sistemi backend | Veloce, semplice, progettato per il computing moderno | ### Linguaggi di Alto Livello vs. Basso Livello -Ok, questo è stato onestamente il concetto che mi ha mandato in tilt quando ho iniziato a imparare, quindi condividerò l'analogia che finalmente me l'ha fatto capire – e spero davvero che aiuti anche te! +Ok, questo è stato davvero il concetto che mi ha mandato in tilt quando ho iniziato, quindi ti condivido l’analogia che alla fine mi ha fatto capire tutto – e spero davvero aiuti anche te! -Immagina di visitare un paese dove non parli la lingua e hai disperatamente bisogno di trovare il bagno (ci siamo passati tutti, vero? 😅): +Immagina di visitare un paese dove non parli la lingua e hai disperatamente bisogno di trovare il bagno più vicino (ci siamo passati tutti, giusto? 😅): -- **Programmazione di basso livello** è come imparare il dialetto locale così bene da poter parlare con la nonna che vende frutta all'angolo usando riferimenti culturali, slang locale e battute interne che solo qualcuno cresciuto lì capirebbe. Super impressionante e incredibilmente efficiente... se per caso sei fluente! Ma piuttosto opprimente quando stai solo cercando di trovare un bagno. +- **La programmazione a basso livello** è come imparare il dialetto locale così bene da poter parlare con la nonna che vende la frutta all’angolo usando riferimenti culturali, slang locale e battute interne che solo chi è cresciuto lì capirebbe. Super impressionante e incredibilmente efficiente... se sei fluente! Ma un po’ opprimente se stai solo cercando un bagno. -- **Programmazione di alto livello** è come avere quell'amico locale fantastico che ti capisce. Puoi dire "Ho davvero bisogno di trovare un bagno" in italiano semplice, e lui si occupa di tutta la traduzione culturale e ti dà indicazioni in un modo che ha perfettamente senso per il tuo cervello non locale. +- **La programmazione ad alto livello** è come avere quell’amico del posto incredibile che ti capisce subito. Puoi dire "Ho proprio bisogno di trovare un bagno" in inglese semplice, e lui si occupa di tutta la traduzione culturale e ti dà indicazioni che hanno senso per il tuo cervello da turista. In termini di programmazione: -- **Linguaggi di basso livello** (come Assembly o C) ti permettono di avere conversazioni incredibilmente dettagliate con l'hardware effettivo del computer, ma devi pensare come una macchina, il che è... beh, diciamo che è un bel cambiamento mentale! -- **Linguaggi di alto livello** (come JavaScript, Python o C#) ti permettono di pensare come un essere umano mentre loro si occupano di tutto il linguaggio delle macchine dietro le quinte. Inoltre, hanno comunità incredibilmente accoglienti piene di persone che ricordano com'era essere nuovi e vogliono davvero aiutarti! +- **I linguaggi a basso livello** (come Assembly o C) ti permettono di avere conversazioni incredibilmente dettagliate con l’hardware reale del computer, ma devi pensare come una macchina, il che è… beh, diciamo che è un gran salto mentale! +- **I linguaggi ad alto livello** (come JavaScript, Python o C#) ti permettono di pensare come un umano mentre loro gestiscono tutto il linguaggio macchina dietro le quinte. In più hanno comunità incredibilmente accoglienti piene di persone che ricordano cosa vuol dire essere nuovi e che vogliono davvero aiutarti! -Indovina quali ti suggerirò di iniziare a usare? 😉 I linguaggi di alto livello sono come avere le rotelle che non vorrai mai togliere perché rendono l'intera esperienza molto più piacevole! +Indovina con quali ti suggerirò di iniziare? 😉 I linguaggi ad alto livello sono come le rotelle di supporto che probabilmente non vorrai mai togliere perché rendono l’esperienza molto più piacevole! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 Pensiero Umano:
'Voglio calcolare i numeri di Fibonacci'"] --> B{Scegli il livello del linguaggio} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|High-Level| C["🌟 JavaScript/Python
Facile da leggere e scrivere"] + B -->|Low-Level| D["⚙️ Assembly/C
Controllo diretto dell'hardware"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Scrivi: fibonacci(10)"] + D --> F["📝 Scrivi: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 Comprensione del computer:
Il traduttore gestisce la complessità"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Stesso risultato:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Ti Mostro Perché i Linguaggi ad Alto Livello Sono Molto Più Amichevoli -### Ti Mostro Perché i Linguaggi di Alto Livello Sono Molto Più Amichevoli +Ok, sto per mostrarti qualcosa che dimostra perfettamente perché mi sono innamorato dei linguaggi ad alto livello, ma prima – devi promettermi una cosa. Quando vedrai il primo esempio di codice, non andare nel panico! È fatto apposta per sembrare intimidatorio. Esattamente il punto che voglio sottolineare! -Ok, sto per mostrarti qualcosa che dimostra perfettamente perché mi sono innamorato dei linguaggi di alto livello, ma prima – ho bisogno che tu mi prometta una cosa. Quando vedrai il primo esempio di codice, non andare nel panico! Deve sembrare intimidatorio. È proprio questo il punto che voglio dimostrare! - -Guarderemo lo stesso compito scritto in due stili completamente diversi. Entrambi creano quella che si chiama sequenza di Fibonacci – è questo bellissimo schema matematico in cui ogni numero è la somma dei due precedenti: 0, 1, 1, 2, 3, 5, 8, 13... (Curiosità: troverai questo schema letteralmente ovunque in natura – spirali di semi di girasole, schemi di pigne, persino il modo in cui si formano le galassie!) +Esamineremo lo stesso compito scritto in due stili completamente diversi. Entrambi creano quella che si chiama sequenza di Fibonacci – è un bellissimo pattern matematico dove ogni numero è la somma dei due precedenti: 0, 1, 1, 2, 3, 5, 8, 13... (Curiosità: trovi questo pattern ovunque in natura – le spirali dei semi di girasole, i modelli delle pigne, persino la formazione delle galassie!) Pronto a vedere la differenza? Andiamo! -**Linguaggio di alto livello (JavaScript) – Amichevole per gli umani:** +**Linguaggio ad alto livello (JavaScript) – Amichevole per gli umani:** ```javascript -// Step 1: Basic Fibonacci setup +// Passo 1: Configurazione base di Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -187,30 +185,30 @@ console.log('Fibonacci sequence:'); **Ecco cosa fa questo codice:** - **Dichiara** una costante per specificare quanti numeri di Fibonacci vogliamo generare -- **Inizializza** due variabili per tenere traccia dei numeri attuali e successivi nella sequenza -- **Imposta** i valori iniziali (0 e 1) che definiscono il modello Fibonacci +- **Inizializza** due variabili per tracciare il numero attuale e il successivo nella sequenza +- **Imposta** i valori iniziali (0 e 1) che definiscono il pattern di Fibonacci - **Mostra** un messaggio di intestazione per identificare il nostro output ```javascript -// Step 2: Generate the sequence with a loop +// Passo 2: Genera la sequenza con un ciclo for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Calcola il numero successivo nella sequenza const sum = current + next; current = next; next = sum; } ``` -**Analisi di ciò che accade qui:** -- **Itera** attraverso ogni posizione nella nostra sequenza usando un ciclo `for` -- **Mostra** ogni numero con la sua posizione usando la formattazione dei template literal -- **Calcola** il prossimo numero di Fibonacci sommando i valori attuali e successivi -- **Aggiorna** le nostre variabili di tracciamento per passare alla prossima iterazione +**Analisi di quello che succede qui:** +- **Ciclo** attraverso ogni posizione nella nostra sequenza usando un ciclo `for` +- **Mostra** ogni numero con la sua posizione usando la formattazione template literal +- **Calcola** il prossimo numero di Fibonacci sommando i valori attuale e successivo +- **Aggiorna** le variabili di tracciamento per passare all’iterazione successiva ```javascript -// Step 3: Modern functional approach +// Passo 3: Approccio funzionale moderno const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Esempio d'uso const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` **Nel codice sopra, abbiamo:** -- **Creato** una funzione riutilizzabile usando la moderna sintassi delle funzioni freccia -- **Costruito** un array per memorizzare l'intera sequenza invece di mostrarla uno per uno -- **Usato** l'indicizzazione degli array per calcolare ogni nuovo numero dai valori precedenti -- **Restituito** la sequenza completa per un uso flessibile in altre parti del nostro programma +- **Creato** una funzione riutilizzabile usando la sintassi moderna delle arrow function +- **Costruito** un array per memorizzare la sequenza completa invece di mostrarla uno per uno +- **Usato** l’indicizzazione degli array per calcolare ogni nuovo numero dai valori precedenti +- **Restituito** la sequenza completa per un uso flessibile in altre parti del programma -**Linguaggio di basso livello (ARM Assembly) – Amichevole per i computer:** +**Linguaggio a basso livello (ARM Assembly) – Amichevole per il computer:** ```assembly area ascen,code,readonly @@ -259,63 +257,63 @@ back add r0,r1 end ``` -Nota come la versione JavaScript si legge quasi come istruzioni in inglese, mentre la versione Assembly utilizza comandi criptici che controllano direttamente il processore del computer. Entrambi svolgono esattamente lo stesso compito, ma il linguaggio di alto livello è molto più facile da comprendere, scrivere e mantenere. +Nota come la versione JavaScript legge quasi come istruzioni in inglese, mentre quella Assembly usa comandi criptici che controllano direttamente il processore del computer. Entrambe realizzano lo stesso compito, ma il linguaggio ad alto livello è molto più facile da capire, scrivere e mantenere per gli umani. -**Differenze principali che noterai:** -- **Leggibilità**: JavaScript utilizza nomi descrittivi come `fibonacciCount`, mentre Assembly usa etichette criptiche come `r0`, `r1`. -- **Commenti**: I linguaggi di alto livello incoraggiano commenti esplicativi che rendono il codice autoesplicativo -- **Struttura**: Il flusso logico di JavaScript corrisponde al modo in cui gli esseri umani pensano ai problemi passo dopo passo -- **Manutenzione**: Aggiornare la versione di JavaScript per soddisfare requisiti diversi è semplice e chiaro +**Differenze chiave che noterai:** +- **Leggibilità**: JavaScript usa nomi descrittivi come `fibonacciCount` mentre Assembly usa etichette criptiche come `r0`, `r1` +- **Commenti**: I linguaggi di alto livello incoraggiano commenti esplicativi che rendono il codice auto-documentante +- **Struttura**: Il flusso logico di JavaScript corrisponde a come gli umani pensano ai problemi passo dopo passo +- **Manutenzione**: Aggiornare la versione JavaScript per requisiti diversi è semplice e chiaro -✅ **A proposito della sequenza di Fibonacci**: Questo schema numerico assolutamente affascinante (dove ogni numero è la somma dei due precedenti: 0, 1, 1, 2, 3, 5, 8...) si trova letteralmente *ovunque* in natura! Lo puoi vedere nelle spirali dei girasoli, nei motivi delle pigne, nella curva delle conchiglie di nautilus e persino nel modo in cui crescono i rami degli alberi. È davvero incredibile come la matematica e il codice possano aiutarci a comprendere e ricreare i modelli che la natura utilizza per creare bellezza! +✅ **Sulla sequenza di Fibonacci**: Questo schema numerico assolutamente stupendo (dove ogni numero è la somma dei due precedenti: 0, 1, 1, 2, 3, 5, 8...) compare letteralmente *ovunque* in natura! Lo troverai nelle spirali dei girasoli, nei modelli delle pigne, nel modo in cui si curvano le conchiglie di nautilus, e persino nella crescita dei rami degli alberi. È davvero incredibile come matematica e codice possano aiutarci a comprendere e ricreare i modelli che la natura usa per creare bellezza! -## I Mattoni Che Fanno Accadere la Magia +## I Mattoni Che Creano la Magia -Bene, ora che hai visto come appaiono i linguaggi di programmazione in azione, analizziamo i pezzi fondamentali che compongono praticamente ogni programma mai scritto. Pensali come gli ingredienti essenziali della tua ricetta preferita – una volta che capisci cosa fa ciascuno, sarai in grado di leggere e scrivere codice praticamente in qualsiasi linguaggio! +Bene, ora che hai visto come appaiono in azione i linguaggi di programmazione, scomponiamo i pezzi fondamentali che costituiscono letteralmente ogni programma mai scritto. Pensali come gli ingredienti essenziali nella tua ricetta preferita – una volta che capisci cosa fa ciascuno, potrai leggere e scrivere codice praticamente in qualsiasi linguaggio! -È un po' come imparare la grammatica della programmazione. Ricordi a scuola quando hai imparato i nomi, i verbi e come costruire le frasi? La programmazione ha la sua versione della grammatica, e onestamente, è molto più logica e indulgente della grammatica inglese! 😄 +È un po' come imparare la grammatica della programmazione. Ricordi a scuola quando hai imparato i sostantivi, i verbi e come mettere insieme le frasi? La programmazione ha la sua versione di grammatica, e onestamente, è molto più logica e indulgente di quella inglese di una volta! 😄 -### Istruzioni: Le Indicazioni Passo Dopo Passo +### Istruzioni: Le Direzioni Passo-Passo -Iniziamo con le **istruzioni** – sono come frasi individuali in una conversazione con il tuo computer. Ogni istruzione dice al computer di fare una cosa specifica, un po' come dare indicazioni: "Gira a sinistra qui", "Fermati al semaforo rosso", "Parcheggia in quel posto." +Iniziamo con le **istruzioni** – sono come singole frasi in una conversazione con il tuo computer. Ogni istruzione dice al computer di fare una cosa specifica, un po’ come dare indicazioni: "Gira a sinistra qui," "Fermati al semaforo rosso," "Parcheggia in quel posto." -Quello che adoro delle istruzioni è quanto siano leggibili di solito. Guarda qui: +Quello che adoro delle istruzioni è quanto di solito siano leggibili. Guarda questo: ```javascript -// Basic statements that perform single actions +// Istruzioni di base che eseguono azioni singole const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **Ecco cosa fa questo codice:** -- **Dichiara** una variabile costante per memorizzare il nome di un utente -- **Mostra** un messaggio di saluto nell'output della console -- **Calcola** e memorizza il risultato di un'operazione matematica +- **Dichiarare** una variabile costante per memorizzare il nome di un utente +- **Visualizzare** un messaggio di saluto nell'output della console +- **Calcolare** e memorizzare il risultato di un’operazione matematica ```javascript -// Statements that interact with web pages +// Istruzioni che interagiscono con le pagine web document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` **Passo dopo passo, ecco cosa succede:** -- **Modifica** il titolo della pagina web che appare nella scheda del browser -- **Cambia** il colore di sfondo dell'intera pagina +- **Modificare** il titolo della pagina che appare nella scheda del browser +- **Cambiare** il colore di sfondo dell’intero corpo della pagina -### Variabili: Il Sistema di Memoria del Tuo Programma +### Variabili: La Memoria del Tuo Programma -Ok, le **variabili** sono onestamente uno dei miei concetti preferiti da insegnare perché sono così simili a cose che usi già ogni giorno! +Ok, le **variabili** sono onestamente uno dei miei concetti preferiti da insegnare perché sono molto simili a cose che usi già ogni singolo giorno! -Pensa alla rubrica del tuo telefono per un momento. Non memorizzi il numero di telefono di tutti – invece, salvi "Mamma", "Migliore Amico" o "Pizzeria che consegna fino alle 2 di notte" e lasci che il tuo telefono ricordi i numeri effettivi. Le variabili funzionano esattamente allo stesso modo! Sono come contenitori etichettati dove il tuo programma può memorizzare informazioni e recuperarle più tardi usando un nome che ha senso. +Pensa per un attimo alla lista contatti del tuo telefono. Non memorizzi il numero di telefono di tutti – invece salvi "Mamma," "Migliore Amico," o "Pizzeria che consegna fino alle 2 di notte," e lasci che il telefono ricordi i numeri reali. Le variabili funzionano esattamente allo stesso modo! Sono come contenitori etichettati dove il tuo programma può memorizzare informazioni e recuperarle dopo usando un nome che ha senso. -Ecco cosa è davvero interessante: le variabili possono cambiare mentre il tuo programma è in esecuzione (da qui il nome "variabile" – capito il gioco di parole?). Proprio come potresti aggiornare il contatto della pizzeria quando ne trovi una ancora migliore, le variabili possono essere aggiornate mentre il tuo programma apprende nuove informazioni o mentre le situazioni cambiano! +E sai cosa è davvero bello: le variabili possono cambiare mentre il programma gira (da qui il nome “variabile” – hai visto cosa hanno fatto?). Proprio come potresti aggiornare quel contatto della pizzeria quando ne trovi una ancora migliore, le variabili possono essere aggiornate mentre il programma apprende nuove informazioni o le situazioni cambiano! -Lascia che ti mostri quanto può essere semplice e bello: +Lascia che ti mostri quanto può essere semplicissimo: ```javascript -// Step 1: Creating basic variables +// Passo 1: Creazione di variabili di base const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -323,13 +321,13 @@ let isRaining = false; ``` **Capire questi concetti:** -- **Memorizza** valori immutabili in variabili `const` (come il nome del sito) -- **Usa** `let` per valori che possono cambiare durante il programma -- **Assegna** diversi tipi di dati: stringhe (testo), numeri e booleani (vero/falso) -- **Scegli** nomi descrittivi che spiegano cosa contiene ogni variabile +- **Memorizzare** valori invariati in variabili `const` (come il nome del sito) +- **Usare** `let` per valori che possono cambiare durante il programma +- **Assegnare** tipi di dati diversi: stringhe (testo), numeri, e booleani (vero/falso) +- **Scegliere** nomi descrittivi che spiegano cosa contiene ogni variabile ```javascript -// Step 2: Working with objects to group related data +// Fase 2: Lavorare con oggetti per raggruppare dati correlati const weatherData = { location: "San Francisco", humidity: 65, @@ -337,50 +335,50 @@ const weatherData = { }; ``` -**In questo esempio, abbiamo:** -- **Creato** un oggetto per raggruppare insieme informazioni meteo correlate -- **Organizzato** più pezzi di dati sotto un unico nome di variabile +**Nel codice sopra, abbiamo:** +- **Creato** un oggetto per raggruppare insieme informazioni meteorologiche correlate +- **Organizzato** più dati sotto un unico nome di variabile - **Usato** coppie chiave-valore per etichettare chiaramente ogni pezzo di informazione ```javascript -// Step 3: Using and updating variables +// Passo 3: Utilizzo e aggiornamento delle variabili console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Aggiornamento delle variabili modificabili currentWeather = "cloudy"; temperature = 68; ``` **Capire ogni parte:** -- **Mostra** informazioni usando i template literals con la sintassi `${}` -- **Accedi** alle proprietà degli oggetti usando la notazione a punto (`weatherData.windSpeed`) -- **Aggiorna** variabili dichiarate con `let` per riflettere condizioni in cambiamento -- **Combina** più variabili per creare messaggi significativi +- **Visualizzare** informazioni usando template literal con la sintassi `${}` +- **Accedere** alle proprietà dell’oggetto usando la notazione a punto (`weatherData.windSpeed`) +- **Aggiornare** variabili dichiarate con `let` per riflettere condizioni in cambiamento +- **Combinare** più variabili per creare messaggi significativi ```javascript -// Step 4: Modern destructuring for cleaner code +// Passaggio 4: Distrutturazione moderna per un codice più pulito const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Cosa devi sapere:** -- **Estrai** proprietà specifiche dagli oggetti usando l'assegnazione destrutturante -- **Crea** nuove variabili automaticamente con gli stessi nomi delle chiavi degli oggetti -- **Semplifica** il codice evitando la notazione a punto ripetitiva +- **Estrarre** proprietà specifiche dagli oggetti usando assegnazione tramite destrutturazione +- **Creare** nuove variabili automaticamente con gli stessi nomi delle chiavi dell’oggetto +- **Semplificare** il codice evitando ripetute notazioni a punto -### Flusso di Controllo: Insegnare al Tuo Programma a Pensare +### Controllo di Flusso: Insegnare al Programma a Pensare -Ok, qui è dove la programmazione diventa assolutamente incredibile! **Flusso di controllo** significa insegnare al tuo programma come prendere decisioni intelligenti, esattamente come fai tu ogni giorno senza nemmeno pensarci. +Ok, qui la programmazione diventa assolutamente stupefacente! Il **controllo di flusso** è sostanzialmente insegnare al tuo programma come prendere decisioni intelligenti, proprio come fai tu ogni singolo giorno senza nemmeno pensarci. -Immagina questo: stamattina probabilmente hai pensato qualcosa come "Se piove, prendo un ombrello. Se fa freddo, indosso una giacca. Se sono in ritardo, salto la colazione e prendo un caffè lungo la strada." Il tuo cervello segue naturalmente questa logica if-then decine di volte ogni giorno! +Immagina: stamattina probabilmente hai fatto qualcosa tipo "Se piove, prendo l’ombrello. Se fa freddo, metto la giacca. Se sono in ritardo, salto la colazione e prendo il caffè al volo." Il tuo cervello segue naturalmente questa logica if-then dozzine di volte ogni giorno! -Questo è ciò che rende i programmi intelligenti e vivi invece di seguire semplicemente uno script noioso e prevedibile. Possono effettivamente osservare una situazione, valutare cosa sta accadendo e rispondere di conseguenza. È come dare al tuo programma un cervello che può adattarsi e fare scelte! +Questo è ciò che fa sentire i programmi intelligenti e vivi invece di semplicemente seguire uno script noioso e prevedibile. Possono guardare una situazione, valutarla e rispondere di conseguenza. È come dare al tuo programma un cervello che può adattarsi e fare scelte! -Vuoi vedere quanto funziona bene tutto questo? Lascia che ti mostri: +Vuoi vedere quanto funziona bene? Lascia che ti mostri: ```javascript -// Step 1: Basic conditional logic +// Passo 1: Logica condizionale di base const userAge = 17; if (userAge >= 18) { @@ -392,13 +390,13 @@ if (userAge >= 18) { ``` **Ecco cosa fa questo codice:** -- **Controlla** se l'età dell'utente soddisfa il requisito per votare -- **Esegue** diversi blocchi di codice in base al risultato della condizione -- **Calcola** e mostra quanto manca per l'idoneità al voto se sotto i 18 anni +- **Controlla** se l’età dell’utente soddisfa il requisito per votare +- **Esegue** diversi blocchi di codice basandosi sul risultato della condizione +- **Calcola** e mostra quanto manca all’idoneità al voto se sotto i 18 anni - **Fornisce** feedback specifici e utili per ogni scenario ```javascript -// Step 2: Multiple conditions with logical operators +// Passo 2: Molteplici condizioni con operatori logici const userAge = 17; const hasPermission = true; @@ -411,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Analizziamo cosa succede qui:** -- **Combina** più condizioni usando l'operatore `&&` (e) -- **Crea** una gerarchia di condizioni usando `else if` per scenari multipli +**Spieghiamo cosa succede qui:** +- **Combina** più condizioni usando l’operatore `&&` (e) +- **Crea** una gerarchia di condizioni usando `else if` per più scenari - **Gestisce** tutti i casi possibili con una dichiarazione finale `else` -- **Fornisce** feedback chiari e pratici per ogni situazione diversa +- **Fornisce** feedback chiari e azionabili per ogni situazione differente ```javascript -// Step 3: Concise conditional with ternary operator +// Passo 3: Condizionale conciso con operatore ternario const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **Cosa devi ricordare:** -- **Usa** l'operatore ternario (`? :`) per condizioni semplici a due opzioni +- **Usa** l’operatore ternario (`? :`) per condizioni semplici a due opzioni - **Scrivi** prima la condizione, seguita da `?`, poi il risultato vero, poi `:`, poi il risultato falso -- **Applica** questo schema quando devi assegnare valori basati su condizioni +- **Applica** questo modello quando devi assegnare valori basati su condizioni ```javascript -// Step 4: Handling multiple specific cases +// Passo 4: Gestione di più casi specifici const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -449,57 +447,56 @@ switch (dayOfWeek) { } ``` -**Questo codice realizza quanto segue:** -- **Confronta** il valore della variabile con più casi specifici +**Questo codice fa le seguenti cose:** +- **Confronta** il valore di una variabile con casi specifici multipli - **Raggruppa** casi simili insieme (giorni feriali vs. fine settimana) -- **Esegue** il blocco di codice appropriato quando viene trovato un corrispondenza -- **Include** un caso `default` per gestire valori inaspettati -- **Usa** dichiarazioni `break` per impedire al codice di continuare al caso successivo +- **Esegue** il blocco di codice appropriato quando trova una corrispondenza +- **Include** un caso `default` per gestire valori inattesi +- **Usa** istruzioni `break` per evitare che il codice prosegua al caso successivo -> 💡 **Analogia nel mondo reale**: Pensa al flusso di controllo come avere il GPS più paziente del mondo che ti dà indicazioni. Potrebbe dire "Se c'è traffico su Main Street, prendi l'autostrada. Se i lavori bloccano l'autostrada, prova il percorso panoramico." I programmi usano esattamente lo stesso tipo di logica condizionale per rispondere in modo intelligente a situazioni diverse e offrire sempre agli utenti la migliore esperienza possibile. +> 💡 **Analogia reale**: Pensa al controllo di flusso come ad avere il GPS più paziente del mondo che ti dà le indicazioni. Potrebbe dire "Se c’è traffico in Via Principale, prendi invece l’autostrada. Se i lavori bloccano l’autostrada, prova la strada panoramica." I programmi usano esattamente lo stesso tipo di logica condizionale per rispondere in modo intelligente a situazioni diverse e dare sempre agli utenti la migliore esperienza possibile. -### 🎯 **Verifica dei Concetti: Padronanza dei Mattoni Fondamentali** +### 🎯 **Controllo Concettuale: Padronanza dei Mattoni** **Vediamo come te la cavi con i fondamentali:** -- Riesci a spiegare la differenza tra una variabile e un'istruzione con parole tue? -- Pensa a uno scenario reale in cui useresti una decisione if-then (come il nostro esempio sul voto) -- Qual è una cosa sulla logica di programmazione che ti ha sorpreso? +- Riesci a spiegare la differenza tra una variabile e un’istruzione con parole tue? +- Pensa a uno scenario reale dove useresti una decisione if-then (come nel nostro esempio del voto) +- Qual è una cosa della logica di programmazione che ti ha sorpreso? -**Piccolo incoraggiamento:** +**Piccolo aumento di fiducia:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 Istruzioni
(Istruzioni)"] --> B["📦 Variabili
(Archiviazione)"] --> C["🔀 Flusso di Controllo
(Decisioni)"] --> D["🎉 Programma Funzionante!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` - -✅ **Cosa ci aspetta**: Ci divertiremo tantissimo approfondendo questi concetti mentre continuiamo questo incredibile viaggio insieme! Per ora, concentrati solo sull'entusiasmo per tutte le incredibili possibilità che ti aspettano. Le competenze e le tecniche specifiche si fisseranno naturalmente mentre pratichiamo insieme – ti prometto che sarà molto più divertente di quanto ti aspetti! +✅ **Cosa verrà dopo**: Ci divertiremo un sacco ad approfondire questi concetti mentre continuiamo questo incredibile viaggio insieme! Per ora, concentrati solo sul sentire l’eccitazione per tutte le straordinarie possibilità che ti aspettano. Le competenze e le tecniche specifiche ti resteranno naturali man mano che praticheremo insieme – prometto che sarà molto più divertente di quanto ti aspetti! ## Strumenti del Mestiere -Bene, questo è davvero il momento in cui mi emoziono così tanto che a malapena riesco a contenermi! 🚀 Stiamo per parlare degli strumenti incredibili che ti faranno sentire come se ti avessero appena consegnato le chiavi di un'astronave digitale. +Ok, questa è davvero la parte in cui mi emoziono così tanto che a malapena riesco a contenermi! 🚀 Stiamo per parlare degli incredibili strumenti che ti faranno sentire come se ti avessero appena consegnato le chiavi di un’astronave digitale. -Sai come uno chef ha quei coltelli perfettamente bilanciati che sembrano un'estensione delle sue mani? O come un musicista ha quella chitarra che sembra cantare nel momento in cui la tocca? Bene, gli sviluppatori hanno la nostra versione di questi strumenti magici, e ecco cosa ti lascerà a bocca aperta – la maggior parte di essi è completamente gratuita! +Sai come uno chef ha quei coltelli perfettamente bilanciati che sembrano un’estensione delle sue mani? O come un musicista ha quella chitarra che sembra cantare nel momento in cui la tocca? Bene, gli sviluppatori hanno la nostra versione di questi strumenti magici, e ecco cosa ti lascerà a bocca aperta – la maggior parte di essi è completamente gratuita! -Sto praticamente saltando sulla sedia pensando di condividerli con te perché hanno completamente rivoluzionato il modo in cui creiamo software. Stiamo parlando di assistenti di codifica alimentati dall'intelligenza artificiale che possono aiutarti a scrivere il tuo codice (non sto scherzando!), ambienti cloud in cui puoi costruire intere applicazioni da letteralmente ovunque ci sia il Wi-Fi, e strumenti di debug così sofisticati che sembrano avere una visione a raggi X per i tuoi programmi. +Sto praticamente saltellando sulla sedia al solo pensiero di condividerli con te perché hanno completamente rivoluzionato il modo in cui costruiamo software. Stiamo parlando di assistenti di codifica alimentati dall’IA che possono aiutarti a scrivere il codice (non sto scherzando!), ambienti cloud dove puoi costruire applicazioni intere da letteralmente ovunque con una connessione Wi-Fi, e strumenti di debug così sofisticati che sono come avere la vista a raggi X per i tuoi programmi. -Ecco la parte che mi dà ancora i brividi: questi non sono "strumenti per principianti" che supererai. Questi sono gli stessi strumenti di livello professionale che gli sviluppatori di Google, Netflix e quel studio di app indie che ami stanno usando proprio in questo momento. Ti sentirai un vero professionista usandoli! +E questa è la parte che ancora mi fa venire i brividi: non sono “strumenti per principianti” da cui poi crescerai. Sono gli stessi strumenti professionali di alto livello che gli sviluppatori di Google, Netflix, e quello studio indie di app che adori stanno usando proprio in questo momento. Ti sentirai un vero professionista usandoli! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 La tua idea"] --> B["⌨️ Editor di codice
(VS Code)"] + B --> C["🌐 DevTools del browser
(Test e debug)"] + C --> D["⚡ Linea di comando
(Automazione e strumenti)"] + D --> E["📚 Documentazione
(Apprendimento e riferimento)"] + E --> F["🚀 Applicazione web fantastica!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 Assistente AI
(GitHub Copilot)"] + C -.-> H["📱 Test sui dispositivi
(Design reattivo)"] + D -.-> I["📦 Gestori di pacchetti
(npm, yarn)"] + E -.-> J["👥 Comunità
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -508,193 +505,194 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` - ### Editor di Codice e IDE: I Tuoi Nuovi Migliori Amici Digitali -Parliamo degli editor di codice – questi diventeranno seriamente i tuoi nuovi posti preferiti dove passare il tempo! Pensali come il tuo santuario personale di codifica dove trascorrerai la maggior parte del tuo tempo a creare e perfezionare le tue creazioni digitali. +Parliamo degli editor di codice – stanno per diventare seriamente i tuoi posti preferiti dove passare il tempo! Pensali come il tuo santuario personale di codifica dove passerai la maggior parte del tempo a creare e perfezionare le tue creazioni digitali. -Ma ecco cosa è assolutamente magico degli editor moderni: non sono solo editor di testo eleganti. Sono come avere il mentore di codifica più brillante e di supporto seduto accanto a te 24/7. Correggono i tuoi errori di battitura prima che tu li noti, suggeriscono miglioramenti che ti fanno sembrare un genio, ti aiutano a capire cosa fa ogni pezzo di codice, e alcuni di loro possono persino prevedere cosa stai per digitare e offrirsi di completare i tuoi pensieri! +Ma ecco cosa è assolutamente magico negli editor moderni: non sono solo editor di testo sofisticati. Sono come avere il mentore di programmazione più brillante e di supporto seduto accanto a te 24/7. Ti correggono gli errori di battitura prima ancora che tu li noti, suggeriscono miglioramenti che ti fanno sembrare un genio, ti aiutano a capire cosa fa ogni pezzo di codice, e alcuni di loro possono persino prevedere cosa stai per digitare e offrirti di completare i tuoi pensieri! -Ricordo quando ho scoperto per la prima volta l'auto-completamento – mi sono letteralmente sentito come se stessi vivendo nel futuro. Inizi a digitare qualcosa, e il tuo editor dice: "Ehi, stavi pensando a questa funzione che fa esattamente ciò di cui hai bisogno?" È come avere un lettore di mente come compagno di codifica! +Ricordo quando ho scoperto per la prima volta l’auto-completamento – mi sembrava di vivere nel futuro. Inizi a digitare qualcosa, e il tuo editor ti dice: "Ehi, pensavi a questa funzione che fa esattamente quello di cui hai bisogno?" È come avere un lettore del pensiero come compagno di codifica! **Cosa rende questi editor così incredibili?** -Gli editor di codice moderni offrono una gamma impressionante di funzionalità progettate per aumentare la tua produttività: +Gli editor di codice moderni offrono una vasta gamma di funzionalità progettate per aumentare la tua produttività: | Funzionalità | Cosa Fa | Perché Aiuta | |--------------|---------|--------------| -| **Evidenziazione della Sintassi** | Colora diverse parti del codice | Rende il codice più facile da leggere e individuare errori | -| **Auto-completamento** | Suggerisce codice mentre digiti | Velocizza la codifica e riduce gli errori | -| **Strumenti di Debug** | Aiuta a trovare e correggere errori | Risparmia ore di tempo per la risoluzione dei problemi | -| **Estensioni** | Aggiunge funzionalità specializzate | Personalizza il tuo editor per qualsiasi tecnologia | -| **Assistenti AI** | Suggerisce codice e spiegazioni | Accelera l'apprendimento e la produttività | +| **Evidenziazione della sintassi** | Colora le parti diverse del codice | Rende il codice più facile da leggere e individuare errori | +| **Auto-completamento** | Suggerisce il codice mentre digiti | Accelera la scrittura e riduce gli errori di battitura | +| **Strumenti di Debug** | Aiuta a trovare e correggere errori | Fa risparmiare ore di tempo in troubleshooting | +| **Estensioni** | Aggiungono funzionalità specializzate | Personalizza il tuo editor per qualsiasi tecnologia | +| **Assistenti AI** | Suggeriscono codice e spiegazioni | Accelerano l’apprendimento e la produttività | -> 🎥 **Risorsa Video**: Vuoi vedere questi strumenti in azione? Dai un'occhiata a questo [video sugli Strumenti del Mestiere](https://youtube.com/watch?v=69WJeXGBdxg) per una panoramica completa. +> 🎥 **Risorsa Video**: Vuoi vedere questi strumenti in azione? Dai un’occhiata a questo [video Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) per una panoramica completa. -#### Editor Consigliati per lo Sviluppo Web +#### Editor Raccomandati per lo Sviluppo Web **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) - Il più popolare tra gli sviluppatori web -- Ecosistema di estensioni eccellente -- Terminale integrato e integrazione con Git +- Ecosistema eccellente di estensioni +- Terminale integrato e integrazione Git - **Estensioni indispensabili**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Suggerimenti di codice alimentati dall'AI + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Suggerimenti di codice alimentati dall’IA - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Collaborazione in tempo reale - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Formattazione automatica del codice - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Individua errori di battitura nel codice + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Corregge errori di battitura nel codice **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (A pagamento, gratuito per studenti) -- Strumenti avanzati di debug e test +- Strumenti avanzati di debug e testing - Completamento intelligente del codice -- Controllo di versione integrato +- Controllo versione integrato **IDE Basati su Cloud** (Prezzi vari) - [GitHub Codespaces](https://github.com/features/codespaces) - VS Code completo nel browser - [Replit](https://replit.com/) - Ottimo per imparare e condividere codice - [StackBlitz](https://stackblitz.com/) - Sviluppo web full-stack istantaneo -> 💡 **Consiglio per Iniziare**: Inizia con Visual Studio Code – è gratuito, ampiamente utilizzato nel settore e ha una comunità enorme che crea tutorial e estensioni utili. +> 💡 **Consiglio per iniziare**: Parti con Visual Studio Code – è gratuito, molto usato nell’industria, e ha una comunità enorme che crea tutorial e estensioni utili. -### Browser Web: Il Tuo Laboratorio Segreto di Sviluppo +### Browser Web: Il Tuo Laboratorio di Sviluppo Segreto -Ok, preparati a rimanere completamente sbalordito! Sai come hai usato i browser per scorrere i social media e guardare video? Bene, si scopre che hanno nascosto questo incredibile laboratorio segreto per sviluppatori per tutto questo tempo, aspettando solo che tu lo scopra! +Ok, preparati a rimanere totalmente sbalordito! Sai come hai usato i browser per scorrere i social media e guardare video? Beh, si scopre che per tutto questo tempo hanno nascosto un incredibile laboratorio di sviluppo segreto, solo in attesa che tu lo scopra! -Ogni volta che fai clic con il tasto destro su una pagina web e selezioni "Ispeziona elemento", stai aprendo un mondo nascosto di strumenti per sviluppatori che sono onestamente più potenti di alcuni software costosi per cui una volta pagavo centinaia di euro. È come scoprire che la tua vecchia cucina nasconde un laboratorio di chef professionisti dietro un pannello segreto! -La prima volta che qualcuno mi ha mostrato gli strumenti di sviluppo del browser, ho passato tipo tre ore a cliccare ovunque dicendo: "ASPETTA, PUÒ FARE ANCHE QUESTO?!" Puoi letteralmente modificare qualsiasi sito web in tempo reale, vedere esattamente quanto velocemente si carica tutto, testare come appare il tuo sito su dispositivi diversi e persino fare il debug di JavaScript come un vero professionista. È assolutamente incredibile! +Ogni volta che fai clic destro su una pagina web e selezioni "Ispeziona elemento," stai aprendo un mondo nascosto di strumenti per sviluppatori che sono onestamente più potenti di alcuni software costosi per cui ho pagato centinaia di dollari. È come scoprire che la tua cucina di tutti i giorni nascondeva un laboratorio da chef professionista dietro un pannello segreto! +La prima volta che qualcuno mi ha mostrato i DevTools del browser, ho passato tipo tre ore a cliccare qua e là dicendo "ASPETTA, FA ANCHE QUESTO?!" Puoi letteralmente modificare qualsiasi sito web in tempo reale, vedere esattamente quanto velocemente tutto si carica, testare come appare il tuo sito su dispositivi diversi, e persino fare il debug di JavaScript come un vero professionista. È assolutamente stupefacente! **Ecco perché i browser sono la tua arma segreta:** -Quando crei un sito web o un'applicazione web, devi vedere come appare e si comporta nel mondo reale. I browser non solo mostrano il tuo lavoro, ma forniscono anche feedback dettagliati su prestazioni, accessibilità e potenziali problemi. +Quando crei un sito web o un'applicazione web, devi vedere come appare e si comporta nel mondo reale. I browser non solo mostrano il tuo lavoro, ma offrono anche feedback dettagliati su prestazioni, accessibilità e possibili problemi. -#### Strumenti per sviluppatori del browser (DevTools) +#### Browser Developer Tools (DevTools) I browser moderni includono suite di sviluppo complete: -| Categoria di strumenti | Cosa fa | Esempio di utilizzo | -|-------------------------|---------|---------------------| -| **Inspector degli elementi** | Visualizza e modifica HTML/CSS in tempo reale | Modifica lo stile per vedere risultati immediati | -| **Console** | Visualizza messaggi di errore e testa JavaScript | Risolvi problemi e sperimenta con il codice | -| **Monitor di rete** | Traccia il caricamento delle risorse | Ottimizza le prestazioni e i tempi di caricamento | -| **Controllo accessibilità** | Testa il design inclusivo | Assicurati che il tuo sito funzioni per tutti gli utenti | -| **Simulatore di dispositivi** | Anteprima su diverse dimensioni dello schermo | Testa il design responsivo senza dispositivi multipli | +| Categoria Strumento | Cosa Fa | Esempio di Uso | +|---------------------|---------|----------------| +| **Element Inspector** | Visualizza e modifica HTML/CSS in tempo reale | Regola lo stile per vedere risultati immediati | +| **Console** | Visualizza messaggi di errore e testa JavaScript | Debugga problemi e sperimenta con il codice | +| **Network Monitor** | Monitora come si caricano le risorse | Ottimizza prestazioni e tempi di caricamento | +| **Accessibility Checker** | Testa il design inclusivo | Assicura che il sito funzioni per tutti gli utenti | +| **Device Simulator** | Visualizza anteprime su diverse dimensioni schermo | Testa il design responsive senza più dispositivi | -#### Browser consigliati per lo sviluppo +#### Browser Raccomandati per lo Sviluppo - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools standard del settore con documentazione estesa -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Ottimi strumenti per CSS Grid e accessibilità +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Eccellenti strumenti per CSS Grid e accessibilità - **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Basato su Chromium con risorse per sviluppatori di Microsoft -> ⚠️ **Suggerimento importante per i test**: Testa sempre i tuoi siti web su più browser! Ciò che funziona perfettamente su Chrome potrebbe apparire diverso su Safari o Firefox. Gli sviluppatori professionisti testano su tutti i principali browser per garantire esperienze utente coerenti. +> ⚠️ **Importante consiglio di test:** Testa sempre i tuoi siti su più browser! Ciò che funziona perfettamente su Chrome potrebbe apparire diverso su Safari o Firefox. Gli sviluppatori professionisti testano su tutti i principali browser per garantire un’esperienza utente coerente. + -### Strumenti da riga di comando: il tuo accesso ai superpoteri da sviluppatore +### Strumenti da Linea di Comando: La Tua Porta a Superpoteri da Sviluppatore -Ok, parliamo onestamente della riga di comando, perché voglio che tu lo senta da qualcuno che ci è passato. Quando l'ho vista per la prima volta – solo questo schermo nero spaventoso con testo lampeggiante – ho letteralmente pensato: "No, assolutamente no! Sembra qualcosa da un film di hacker degli anni '80, e sicuramente non sono abbastanza intelligente per questo!" 😅 +Ok, facciamo un momento di onestà totale sulla linea di comando, perché voglio che tu senta questo da qualcuno che la conosce davvero. Quando l’ho vista per la prima volta – solo quella schermata nera spaventosa con il testo lampeggiante – ho letteralmente pensato, "No, assolutamente no! Sembra qualcosa di un film di hacker degli anni ’80, e non sono sicuramente abbastanza smart per questa cosa!" 😅 -Ma ecco cosa avrei voluto che qualcuno mi dicesse allora, e che ti sto dicendo ora: la riga di comando non è spaventosa – è in realtà come avere una conversazione diretta con il tuo computer. Pensala come la differenza tra ordinare cibo tramite un'app elegante con immagini e menu (che è carino e facile) rispetto a entrare nel tuo ristorante locale preferito dove lo chef sa esattamente cosa ti piace e può preparare qualcosa di perfetto solo dicendo "sorprendimi con qualcosa di fantastico." +Ma ecco cosa avrei voluto che qualcuno mi dicesse allora, e cosa ti dico adesso: la linea di comando non fa paura – è come avere una conversazione diretta con il tuo computer. Pensala come la differenza tra ordinare cibo tramite un’app figa con immagini e menu (che è comodo e facile) e entrare nel tuo ristorante locale preferito dove lo chef sa esattamente cosa ti piace e può creare qualcosa di perfetto semplicemente dicendo "sorpresa con qualcosa di fantastico." -La riga di comando è il luogo dove gli sviluppatori si sentono dei veri maghi. Scrivi alcune parole apparentemente magiche (ok, sono solo comandi, ma sembrano magiche!), premi invio, e BOOM – hai creato intere strutture di progetto, installato strumenti potenti da tutto il mondo, o distribuito la tua app su internet per milioni di persone. Una volta che assapori quel potere, è davvero piuttosto coinvolgente! +La linea di comando è il posto dove gli sviluppatori si sentono maghi assoluti. Digiti qualche parola apparentemente magica (ok, sono solo comandi, ma sembrano magici!), premi invio, e BOOM – hai creato intere strutture di progetto, installato strumenti potenti da tutto il mondo, o distribuito la tua app su internet per milioni di persone da vedere. Una volta che assaggi quel potere, diventa davvero una dipendenza! -**Perché la riga di comando diventerà il tuo strumento preferito:** +**Perché la linea di comando diventerà il tuo strumento preferito:** -Mentre le interfacce grafiche sono ottime per molti compiti, la riga di comando eccelle in automazione, precisione e velocità. Molti strumenti di sviluppo funzionano principalmente tramite interfacce da riga di comando, e imparare a usarle in modo efficiente può migliorare notevolmente la tua produttività. +Mentre le interfacce grafiche sono ottime per molti compiti, la linea di comando eccelle in automazione, precisione e velocità. Molti strumenti di sviluppo funzionano principalmente tramite CLI, e imparare a usarli efficacemente può migliorare moltissimo la tua produttività. ```bash -# Step 1: Create and navigate to project directory +# Passo 1: Crea e naviga nella directory del progetto mkdir my-awesome-website cd my-awesome-website ``` -**Cosa fa questo codice:** +**Ecco cosa fa questo codice:** - **Crea** una nuova directory chiamata "my-awesome-website" per il tuo progetto -- **Naviga** nella directory appena creata per iniziare a lavorare +- **Naviga** nella nuova directory creata per iniziare a lavorare ```bash -# Step 2: Initialize project with package.json +# Passo 2: Inizializza il progetto con package.json npm init -y -# Install modern development tools +# Installa strumenti di sviluppo moderni npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Passo dopo passo, ecco cosa sta succedendo:** +**Passo dopo passo, questo è ciò che succede:** - **Inizializza** un nuovo progetto Node.js con impostazioni predefinite usando `npm init -y` -- **Installa** Vite come strumento di build moderno per sviluppo rapido e build di produzione -- **Aggiungi** Prettier per la formattazione automatica del codice e ESLint per controlli di qualità del codice -- **Usa** il flag `--save-dev` per segnare queste dipendenze come solo per lo sviluppo +- **Installa** Vite come moderno strumento di build per sviluppo rapido e build di produzione +- **Aggiunge** Prettier per il formato automatico del codice e ESLint per i controlli di qualità +- **Usa** il flag `--save-dev` per marcare queste dipendenze come solo per lo sviluppo ```bash -# Step 3: Create project structure and files +# Passo 3: Crea la struttura del progetto e i file mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Avvia il server di sviluppo npx vite ``` -**Nel codice sopra, abbiamo:** -- **Organizzato** il nostro progetto creando cartelle separate per il codice sorgente e le risorse -- **Generato** un file HTML di base con una struttura del documento corretta -- **Avviato** il server di sviluppo Vite per il ricaricamento live e la sostituzione dei moduli a caldo +**Nel sopra, abbiamo:** +- **Organizzato** il progetto creando cartelle separate per codice sorgente e risorse +- **Generato** un file HTML base con struttura corretta del documento +- **Avviato** il server di sviluppo Vite per reload live e hot module replacement -#### Strumenti essenziali da riga di comando per lo sviluppo web +#### Strumenti Essenziali da Linea di Comando per lo Sviluppo Web -| Strumento | Scopo | Perché è utile | -|-----------|-------|----------------| -| **[Git](https://git-scm.com/)** | Controllo di versione | Tieni traccia delle modifiche, collabora con altri, fai il backup del tuo lavoro | -| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & gestione pacchetti | Esegui JavaScript fuori dai browser, installa strumenti di sviluppo moderni | -| **[Vite](https://vitejs.dev/)** | Strumento di build & server di sviluppo | Sviluppo ultra rapido con sostituzione dei moduli a caldo | -| **[ESLint](https://eslint.org/)** | Qualità del codice | Trova e correggi automaticamente i problemi nel tuo JavaScript | -| **[Prettier](https://prettier.io/)** | Formattazione del codice | Mantieni il tuo codice formattato e leggibile in modo coerente | +| Strumento | Scopo | Perché Ti Serve | +|-----------|--------|-----------------| +| **[Git](https://git-scm.com/)** | Controllo versione | Traccia le modifiche, collabora con altri, fai backup del lavoro | +| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript e gestionale pacchetti | Esegui JavaScript fuori dal browser, installa strumenti moderni | +| **[Vite](https://vitejs.dev/)** | Strumento di build e server di sviluppo | Sviluppo ultra veloce con hot module replacement | +| **[ESLint](https://eslint.org/)** | Qualità del codice | Trova e correggi automaticamente problemi nel tuo JavaScript | +| **[Prettier](https://prettier.io/)** | Formattazione del codice | Mantieni il codice coerente e leggibile | -#### Opzioni specifiche per piattaforma +#### Opzioni Specifiche per Piattaforma **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminale moderno e ricco di funzionalità +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminale moderno, ricco di funzionalità - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Ambiente di scripting potente -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradizionale riga di comando di Windows +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradizionale linea di comando di Windows **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Applicazione terminale integrata -- **[iTerm2](https://iterm2.com/)** - Terminale avanzato con funzionalità aggiuntive +- **[iTerm2](https://iterm2.com/)** - Terminale potenziato con funzioni avanzate **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Shell standard di Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emulatore di terminale avanzato +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emulatore terminale avanzato -> 💻 = Preinstallato sul sistema operativo +> 💻 = Preinstallato nel sistema operativo -> 🎯 **Percorso di apprendimento**: Inizia con comandi base come `cd` (cambia directory), `ls` o `dir` (elenca file), e `mkdir` (crea cartella). Esercitati con comandi di flusso di lavoro moderni come `npm install`, `git status` e `code .` (apre la directory corrente in VS Code). Man mano che ti sentirai più a tuo agio, acquisirai naturalmente comandi più avanzati e tecniche di automazione. +> 🎯 **Percorso di apprendimento**: Inizia con comandi base come `cd` (cambia directory), `ls` o `dir` (lista file), e `mkdir` (crea cartella). Pratica con comandi moderni di workflow come `npm install`, `git status`, e `code .` (apre la directory corrente in VS Code). Man mano che ti senti più a tuo agio, acquisirai naturalmente comandi più avanzati e tecniche di automazione. -### Documentazione: il tuo mentore di apprendimento sempre disponibile -Ok, lascia che ti condivida un piccolo segreto che ti farà sentire molto meglio riguardo all'essere un principiante: anche gli sviluppatori più esperti trascorrono una grande parte del loro tempo leggendo la documentazione. E non è perché non sanno cosa stanno facendo – è in realtà un segno di saggezza! +### Documentazione: Il Tuo Mentore di Apprendimento Sempre Disponibile -Pensa alla documentazione come avere accesso agli insegnanti più pazienti e competenti del mondo, disponibili 24/7. Bloccato su un problema alle 2 di notte? La documentazione è lì con un caldo abbraccio virtuale e la risposta esatta di cui hai bisogno. Vuoi imparare una nuova funzionalità interessante di cui tutti parlano? La documentazione ti supporta con esempi passo-passo. Stai cercando di capire perché qualcosa funziona in un certo modo? Esatto – la documentazione è pronta a spiegartelo in modo che finalmente ti sia chiaro! +Ok, ti racconto un piccolo segreto che ti farà sentire molto meglio sul fatto di essere un principiante: anche gli sviluppatori più esperti passano tantissimo tempo a leggere la documentazione. E non perché non sappiano cosa stanno facendo – in realtà è un segno di saggezza! -Ecco qualcosa che ha completamente cambiato la mia prospettiva: il mondo dello sviluppo web si muove incredibilmente veloce, e nessuno (intendo assolutamente nessuno!) tiene tutto a mente. Ho visto sviluppatori senior con oltre 15 anni di esperienza cercare sintassi di base, e sai una cosa? Non è imbarazzante – è intelligente! Non si tratta di avere una memoria perfetta; si tratta di sapere dove trovare risposte affidabili rapidamente e capire come applicarle. +Pensala come avere accesso ai docenti più pazienti e competenti del mondo, disponibili 24/7. Bloccato su un problema alle 2 di notte? La documentazione è lì con un caldo abbraccio virtuale e esattamente la risposta di cui hai bisogno. Vuoi imparare una nuova funzione di cui si parla tanto? La documentazione ti copre con esempi passo a passo. Cerchi di capire perché qualcosa funziona come funziona? Hai indovinato – la documentazione è pronta a spiegartelo in modo che finalmente ti si accenda la lampadina! -**Ecco dove avviene la vera magia:** +Ecco qualcosa che ha completamente cambiato la mia prospettiva: il mondo dello sviluppo web si muove incredibilmente veloce, e nessuno (intendo assolutamente nessuno!) tiene tutto a memoria. Ho visto sviluppatori senior con 15+ anni di esperienza cercare sintassi base, e sai una cosa? Non è imbarazzante – è intelligente! Non si tratta di avere una memoria perfetta; si tratta di sapere dove trovare risposte affidabili in fretta e di capire come applicarle. -Gli sviluppatori professionisti trascorrono una parte significativa del loro tempo leggendo la documentazione – non perché non sanno cosa stanno facendo, ma perché il panorama dello sviluppo web evolve così rapidamente che rimanere aggiornati richiede un apprendimento continuo. Una buona documentazione ti aiuta a capire non solo *come* usare qualcosa, ma anche *perché* e *quando* usarlo. +**Qui avviene la vera magia:** -#### Risorse essenziali di documentazione +Gli sviluppatori professionisti passano una parte significativa del loro tempo a leggere la documentazione – non perché non sappiano fare il loro lavoro, ma perché il panorama dello sviluppo web cambia così rapidamente che per restare aggiornati serve apprendimento continuo. Una buona documentazione ti aiuta a capire non solo *come* usare qualcosa, ma *perché* e *quando* usarlo. + +#### Risorse di Documentazione Essenziali **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Lo standard d'oro per la documentazione delle tecnologie web +- Lo standard d’oro per la documentazione delle tecnologie web - Guide complete per HTML, CSS e JavaScript -- Include informazioni sulla compatibilità dei browser +- Include informazioni di compatibilità browser - Presenta esempi pratici e demo interattive **[Web.dev](https://web.dev)** (di Google) -- Best practice per lo sviluppo web moderno -- Guide per l'ottimizzazione delle prestazioni +- Best practice moderne per lo sviluppo web +- Guide all’ottimizzazione delle prestazioni - Principi di accessibilità e design inclusivo -- Studi di caso da progetti reali +- Case study da progetti reali **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Risorse per lo sviluppo con il browser Edge +- Risorse per sviluppo su browser Edge - Guide per Progressive Web App - Approfondimenti sullo sviluppo cross-platform @@ -703,156 +701,156 @@ Gli sviluppatori professionisti trascorrono una parte significativa del loro tem - Corsi video da esperti del settore - Esercizi pratici di programmazione -> 📚 **Strategia di studio**: Non cercare di memorizzare la documentazione – invece, impara a navigarla in modo efficiente. Salva nei segnalibri i riferimenti usati frequentemente e pratica l'uso delle funzioni di ricerca per trovare rapidamente informazioni specifiche. +> 📚 **Strategia di studio**: Non cercare di memorizzare la documentazione – invece, impara a navigarla efficacemente. Salva come preferiti riferimenti usati frequentemente e pratica l’uso delle funzioni di ricerca per trovare info specifiche rapidamente. -### 🔧 **Controllo della padronanza degli strumenti: cosa ti entusiasma?** +### 🔧 **Verifica della Padronanza Strumenti: Cosa Ti Rispecchia?** **Prenditi un momento per riflettere:** -- Quale strumento sei più entusiasta di provare per primo? (Non c'è una risposta sbagliata!) -- La riga di comando ti sembra ancora intimidatoria, o ti incuriosisce? -- Riesci a immaginare di usare i DevTools del browser per sbirciare dietro le quinte dei tuoi siti preferiti? +- Quale strumento ti emoziona di più provare per primo? (Non c’è una risposta sbagliata!) +- La linea di comando ti sembra ancora intimidatoria o ti incuriosisce? +- Riesci a immaginare di usare i DevTools del browser per dare un’occhiata dietro le quinte dei tuoi siti preferiti? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "Tempo Sviluppatore Trascorso con Gli Strumenti" + "Editor di Codice" : 40 + "Test Browser" : 25 + "Linea di Comando" : 15 + "Lettura Documenti" : 15 + "Debug" : 5 ``` +> **Curiosità divertente**: La maggior parte degli sviluppatori passa circa il 40% del proprio tempo nell’editor di codice, ma nota quanto tempo va in test, apprendimento e risoluzione problemi. Programmare non significa solo scrivere codice – è creare esperienze! -> **Curiosità divertente**: La maggior parte degli sviluppatori trascorre circa il 40% del proprio tempo nel proprio editor di codice, ma nota quanto tempo viene dedicato ai test, all'apprendimento e alla risoluzione dei problemi. La programmazione non riguarda solo scrivere codice – si tratta di creare esperienze! - -✅ **Spunto di riflessione**: Ecco qualcosa di interessante da considerare – secondo te, in che modo gli strumenti per costruire siti web (sviluppo) potrebbero essere diversi dagli strumenti per progettare il loro aspetto (design)? È come la differenza tra essere un architetto che progetta una casa bellissima e il costruttore che la realizza effettivamente. Entrambi sono cruciali, ma hanno bisogno di cassette degli attrezzi diverse! Questo tipo di pensiero ti aiuterà davvero a vedere il quadro generale di come i siti web prendono vita. +✅ **Spunto di riflessione**: Ecco qualcosa interessante su cui riflettere – come pensi che gli strumenti per costruire siti (sviluppo) possano essere diversi da quelli per progettare come appaiono (design)? È come la differenza tra un architetto che progetta una casa bellissima e l’impresario che la costruisce realmente. Entrambi sono cruciali, ma hanno toolbox diversi! Questo tipo di pensiero ti aiuterà davvero a vedere il quadro più ampio di come i siti web prendono vita. ## Sfida GitHub Copilot Agent 🚀 Usa la modalità Agent per completare la seguente sfida: -**Descrizione:** Esplora le funzionalità di un editor di codice moderno o IDE e dimostra come può migliorare il tuo flusso di lavoro come sviluppatore web. +**Descrizione:** Esplora le funzionalità di un editor di codice moderno o IDE e dimostra come può migliorare il tuo workflow come sviluppatore web. -**Prompt:** Scegli un editor di codice o IDE (come Visual Studio Code, WebStorm o un IDE basato su cloud). Elenca tre funzionalità o estensioni che ti aiutano a scrivere, fare debug o mantenere il codice in modo più efficiente. Per ciascuna, fornisci una breve spiegazione di come migliora il tuo flusso di lavoro. +**Prompt:** Scegli un editor di codice o IDE (come Visual Studio Code, WebStorm, o un IDE cloud-based). Elenca tre funzionalità o estensioni che ti aiutano a scrivere, fare debug, o mantenere il codice in modo più efficiente. Per ciascuna, fornisci una breve spiegazione di come beneficia il tuo workflow. --- ## 🚀 Sfida -**Ok, detective, pronto per il tuo primo caso?** +**Bene, detective, pronto per il tuo primo caso?** -Ora che hai questa fantastica base, ho un'avventura che ti aiuterà a vedere quanto sia incredibilmente diversificato e affascinante il mondo della programmazione. E ascolta – non si tratta ancora di scrivere codice, quindi niente pressione! Pensati come un detective dei linguaggi di programmazione al tuo primo caso emozionante! +Ora che hai questa fantastica base, ho un’avventura che ti aiuterà a vedere quanto è incredibilmente vario e affascinante il mondo della programmazione. E ascolta – non si tratta ancora di scrivere codice, quindi niente pressione! Pensati come un detective di linguaggi di programmazione al tuo primo emozionante caso! **La tua missione, se decidi di accettarla:** -1. **Diventa un esploratore di linguaggi**: Scegli tre linguaggi di programmazione provenienti da universi completamente diversi – magari uno che costruisce siti web, uno che crea app mobili e uno che analizza dati per gli scienziati. Trova esempi dello stesso compito semplice scritto in ciascun linguaggio. Ti prometto che rimarrai assolutamente stupito da quanto possano essere diversi mentre fanno esattamente la stessa cosa! +1. **Diventa un esploratore di linguaggi**: Scegli tre linguaggi di programmazione provenienti da universi completamente diversi – magari uno per costruire siti web, uno per creare app mobili, e uno che elabora dati per scienziati. Trova esempi dello stesso semplice compito scritto in ciascun linguaggio. Ti prometto che sarai assolutamente stupito di quanto possano sembrare diversi pur facendo esattamente la stessa cosa! -2. **Scopri le loro storie di origine**: Cosa rende speciale ogni linguaggio? Ecco un fatto interessante – ogni singolo linguaggio di programmazione è stato creato perché qualcuno ha pensato: "Sai una cosa? Deve esserci un modo migliore per risolvere questo problema specifico." Riesci a capire quali erano quei problemi? Alcune di queste storie sono davvero affascinanti! +2. **Scopri le loro storie di origine**: Cosa rende speciale ciascun linguaggio? Ecco un fatto interessante – ogni singolo linguaggio di programmazione è stato creato perché qualcuno ha pensato, "Sai che c’è? Deve esserci un modo migliore per risolvere questo problema specifico." Riesci a scoprire quali erano quei problemi? Alcune di queste storie sono davvero affascinanti! -3. **Incontra le comunità**: Scopri quanto sono accoglienti e appassionate le comunità di ciascun linguaggio. Alcune hanno milioni di sviluppatori che condividono conoscenze e si aiutano a vicenda, altre sono più piccole ma incredibilmente unite e solidali. Ti piacerà vedere le diverse personalità che queste comunità hanno! +3. **Incontra le comunità**: Dai un’occhiata a quanto sono accoglienti e appassionate le comunità di ciascun linguaggio. Alcune hanno milioni di sviluppatori che condividono conoscenza e si aiutano a vicenda, altre sono più piccole ma incredibilmente unite e supportive. Ti piacerà vedere le diverse personalità di queste comunità! -4. **Segui il tuo istinto**: Quale linguaggio ti sembra più accessibile in questo momento? Non stressarti per fare la scelta "perfetta" – ascolta semplicemente il tuo istinto! Non c'è davvero una risposta sbagliata qui, e puoi sempre esplorarne altri in seguito. +4. **Segui il tuo istinto**: Quale linguaggio ti sembra più accessibile al momento? Non stressarti per fare la scelta "perfetta" – ascolta semplicemente il tuo istinto! Non c’è davvero una risposta sbagliata qui, e puoi sempre esplorarne altri più avanti. -**Lavoro investigativo bonus**: Scopri quali grandi siti web o app sono costruiti con ciascun linguaggio. Ti garantisco che rimarrai sorpreso nel sapere cosa alimenta Instagram, Netflix o quel gioco mobile a cui non riesci a smettere di giocare! +**Bonus da detective**: Vedi se riesci a scoprire quali importanti siti web o app sono costruiti con ciascun linguaggio. Ti garantisco che rimarrai scioccato scoprendo cosa alimenta Instagram, Netflix, o quel gioco mobile che non riesci a smettere di giocare! -> 💡 **Ricorda**: Non stai cercando di diventare un esperto in nessuno di questi linguaggi oggi. Stai solo conoscendo il quartiere prima di decidere dove vuoi stabilirti. Prenditi il tuo tempo, divertiti e lascia che la tua curiosità ti guidi! +> 💡 **Ricorda**: Non stai cercando di diventare un esperto di uno di questi linguaggi oggi. Stai solo conoscendo il quartiere prima di decidere dove vuoi stabilirti. Prenditi il tuo tempo, divertiti, e lascia che sia la tua curiosità a guidarti! -## Celebriamo ciò che hai scoperto! +## Festeggiamo Ciò che Hai Scoperto! -Accidenti, hai assorbito così tante informazioni incredibili oggi! Sono davvero entusiasta di vedere quanto di questo fantastico viaggio ti sia rimasto impresso. E ricorda – questo non è un test in cui devi ottenere tutto perfetto. È più una celebrazione di tutte le cose interessanti che hai imparato su questo mondo affascinante in cui stai per immergerti! +Accidenti, hai assorbito un sacco di informazioni incredibili oggi! Sono davvero entusiasta di vedere quanto di questo fantastico viaggio ti sia rimasto impresso. E ricorda – non è un test in cui devi fare tutto perfetto. È più una celebrazione di tutte le cose interessanti che hai imparato su questo mondo affascinante in cui stai per immergerti! -[Partecipa al quiz post-lezione](https://ff-quizzes.netlify.app/web/) -## Revisione e Studio Autonomo +[Fai il quiz post-lezione](https://ff-quizzes.netlify.app/web/) -**Prenditi il tuo tempo per esplorare e divertirti!** +## Revisione & Studio Autonomo -Hai fatto molta strada oggi, e questo è qualcosa di cui essere orgogliosi! Ora arriva la parte divertente: esplorare gli argomenti che hanno acceso la tua curiosità. Ricorda, non è un compito – è un'avventura! +**Prenditi il tempo per esplorare e divertirti!** +Hai coperto molta strada oggi, ed è qualcosa di cui essere orgogliosi! Ora arriva la parte divertente – esplorare gli argomenti che hanno acceso la tua curiosità. Ricorda, questo non è un compito – è un’avventura! **Approfondisci ciò che ti entusiasma:** -**Sperimenta con i linguaggi di programmazione:** -- Visita i siti ufficiali di 2-3 linguaggi che hanno catturato la tua attenzione. Ognuno ha la sua personalità e storia! -- Prova alcuni ambienti di programmazione online come [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) o [Replit](https://replit.com/). Non aver paura di sperimentare – non puoi rompere nulla! -- Leggi come è nato il tuo linguaggio preferito. Seriamente, alcune di queste storie sono affascinanti e ti aiuteranno a capire perché i linguaggi funzionano nel modo in cui lo fanno. +**Metti le mani sui linguaggi di programmazione:** +- Visita i siti ufficiali di 2-3 linguaggi che hanno catturato la tua attenzione. Ognuno ha la propria personalità e storia! +- Prova qualche playground di programmazione online come [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), o [Replit](https://replit.com/). Non aver paura di sperimentare – non puoi rompere nulla! +- Leggi di come è nato il tuo linguaggio preferito. Sul serio, alcune di queste storie di origine sono affascinanti e ti aiuteranno a capire perché i linguaggi funzionano nel modo in cui lo fanno. **Familiarizza con i tuoi nuovi strumenti:** -- Scarica Visual Studio Code se non l'hai già fatto – è gratuito e te ne innamorerai! -- Dedica qualche minuto a esplorare il marketplace delle estensioni. È come un app store per il tuo editor di codice! -- Apri gli strumenti per sviluppatori del tuo browser e clicca un po' ovunque. Non preoccuparti di capire tutto – basta familiarizzare con ciò che c'è. +- Scarica Visual Studio Code se non l’hai già fatto – è gratuito e ti piacerà un sacco! +- Trascorri qualche minuto a curiosare nel marketplace delle Estensioni. È come un app store per il tuo editor di codice! +- Apri gli Strumenti per sviluppatori del tuo browser e clicca un po’ in giro. Non preoccuparti di capire tutto – familiarizza semplicemente con ciò che c’è. -**Unisciti alla comunità:** -- Segui alcune comunità di sviluppatori su [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) o [GitHub](https://github.com/). La comunità di programmazione è incredibilmente accogliente per i nuovi arrivati! -- Guarda alcuni video di programmazione per principianti su YouTube. Ci sono tantissimi creatori fantastici che ricordano com'è iniziare. -- Considera di partecipare a meetup locali o comunità online. Fidati, gli sviluppatori adorano aiutare i nuovi arrivati! +**Unisciti alla community:** +- Segui alcune comunità di sviluppatori su [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), o [GitHub](https://github.com/). La community della programmazione è incredibilmente accogliente con i principianti! +- Guarda qualche video di programmazione per principianti su YouTube. Ci sono tantissimi creatori fantastici che ricordano com’è stato iniziare. +- Considera di unirti a meetup locali o a comunità online. Fidati, agli sviluppatori piace aiutare i nuovi arrivati! -> 🎯 **Ascolta, ecco cosa voglio che tu ricordi**: Non ci si aspetta che tu diventi un mago della programmazione da un giorno all'altro! In questo momento, stai solo iniziando a conoscere questo fantastico nuovo mondo di cui stai per far parte. Prenditi il tuo tempo, goditi il viaggio e ricorda – ogni singolo sviluppatore che ammiri è stato una volta seduto esattamente dove sei tu ora, sentendosi entusiasta e forse un po' sopraffatto. È assolutamente normale, e significa che stai facendo le cose nel modo giusto! +> 🎯 **Ascolta, ecco cosa voglio che tu ricordi**: Non ti si chiede di diventare un mago del codice da un giorno all’altro! Ora stai solo iniziando a conoscere questo incredibile nuovo mondo di cui farai parte. Prenditi il tuo tempo, goditi il viaggio e ricorda – ogni singolo sviluppatore che ammiri è stato una volta esattamente dove sei tu ora, emozionato e magari un po’ sopraffatto. È del tutto normale, e significa che stai facendo la cosa giusta! ## Compito -[Leggere la documentazione](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **Un piccolo incoraggiamento per il tuo compito**: Mi piacerebbe davvero vederti esplorare alcuni strumenti che non abbiamo ancora trattato! Salta gli editor, i browser e gli strumenti da riga di comando di cui abbiamo già parlato – c'è un intero incredibile universo di strumenti di sviluppo straordinari là fuori che aspettano solo di essere scoperti. Cerca quelli che sono attivamente mantenuti e hanno comunità vivaci e disponibili (questi tendono ad avere i migliori tutorial e le persone più disponibili quando inevitabilmente ti blocchi e hai bisogno di una mano amica). +> 💡 **Un piccolo incoraggiamento per il tuo compito**: Mi piacerebbe davvero vederti esplorare qualche strumento che non abbiamo ancora trattato! Salta gli editor, i browser e gli strumenti da riga di comando di cui abbiamo già parlato – c’è un intero universo incredibile di fantastici strumenti di sviluppo che aspettano solo di essere scoperti. Cerca quelli attivamente mantenuti e con comunità vivaci e disponibili (questi tendono ad avere i migliori tutorial e le persone più gentili quando inevitabilmente ti bloccherai e avrai bisogno di una mano amichevole). --- -## 🚀 La tua Timeline del Viaggio nella Programmazione +## 🚀 La tua Timeline di Viaggio nella Programmazione ### ⚡ **Cosa puoi fare nei prossimi 5 minuti** -- [ ] Aggiungi ai segnalibri 2-3 siti web di linguaggi di programmazione che hanno catturato la tua attenzione -- [ ] Scarica Visual Studio Code se non l'hai già fatto -- [ ] Apri gli strumenti per sviluppatori del tuo browser (F12) e clicca un po' ovunque su un sito web -- [ ] Unisciti a una comunità di programmazione (Dev.to, Reddit r/webdev o Stack Overflow) +- [ ] Aggiungi ai preferiti 2-3 siti web di linguaggi di programmazione che ti hanno colpito +- [ ] Scarica Visual Studio Code se non l’hai già fatto +- [ ] Apri gli Strumenti per sviluppatori del browser (F12) e clicca in giro su qualsiasi sito +- [ ] Unisciti a una community di programmatori (Dev.to, Reddit r/webdev o Stack Overflow) -### ⏰ **Cosa puoi realizzare in quest'ora** +### ⏰ **Cosa puoi realizzare in quest’ora** - [ ] Completa il quiz post-lezione e rifletti sulle tue risposte -- [ ] Configura VS Code con l'estensione GitHub Copilot +- [ ] Configura VS Code con l’estensione GitHub Copilot - [ ] Prova un esempio "Hello World" in 2 diversi linguaggi di programmazione online -- [ ] Guarda un video "Una giornata nella vita di uno sviluppatore" su YouTube +- [ ] Guarda un video “Un giorno nella vita di uno sviluppatore” su YouTube - [ ] Inizia il tuo lavoro da detective sui linguaggi di programmazione (dalla sfida) -### 📅 **La tua avventura di una settimana** -- [ ] Completa il compito e esplora 3 nuovi strumenti di sviluppo +### 📅 **La tua avventura settimanale** +- [ ] Completa il compito ed esplora 3 nuovi strumenti di sviluppo - [ ] Segui 5 sviluppatori o account di programmazione sui social media -- [ ] Prova a costruire qualcosa di piccolo su CodePen o Replit (anche solo "Ciao, [Il tuo nome]!") -- [ ] Leggi un post sul blog di uno sviluppatore riguardo al suo percorso nella programmazione -- [ ] Partecipa a un meetup virtuale o guarda una conferenza sulla programmazione -- [ ] Inizia a imparare il linguaggio che hai scelto con tutorial online +- [ ] Prova a costruire qualcosa di piccolo su CodePen o Replit (anche solo “Hello, [Il tuo nome]!”) +- [ ] Leggi un post di un blog sviluppatore su un viaggio nella programmazione +- [ ] Partecipa a un meetup virtuale o guarda un talk sulla programmazione +- [ ] Inizia a imparare il linguaggio scelto con tutorial online -### 🗓️ **La tua trasformazione di un mese** -- [ ] Crea il tuo primo piccolo progetto (anche una semplice pagina web va bene!) +### 🗓️ **La tua trasformazione mensile** +- [ ] Costruisci il tuo primo piccolo progetto (anche una semplice pagina web conta!) - [ ] Contribuisci a un progetto open-source (inizia con correzioni alla documentazione) -- [ ] Fai da mentore a qualcuno che sta appena iniziando il suo percorso nella programmazione -- [ ] Crea il tuo sito web portfolio da sviluppatore -- [ ] Connettiti con comunità locali di sviluppatori o gruppi di studio +- [ ] Fai da mentore a qualcuno che sta appena iniziando il suo percorso di programmazione +- [ ] Crea il tuo sito portfolio da sviluppatore +- [ ] Connettiti con comunità di sviluppatori locali o gruppi di studio - [ ] Inizia a pianificare il tuo prossimo traguardo di apprendimento ### 🎯 **Riflessione finale** -**Prima di andare avanti, prenditi un momento per festeggiare:** -- Qual è una cosa della programmazione che ti ha entusiasmato oggi? +**Prima di andare avanti, prenditi un momento per celebrare:** +- Qual è la cosa che oggi ti ha entusiasmato della programmazione? - Quale strumento o concetto vuoi esplorare per primo? -- Come ti senti riguardo all'inizio di questo viaggio nella programmazione? -- Qual è una domanda che vorresti fare a uno sviluppatore in questo momento? +- Come ti senti riguardo all’inizio di questo viaggio nella programmazione? +- Qual è una domanda che vorresti fare a uno sviluppatore proprio ora? ```mermaid journey - title Your Confidence Building Journey - section Today + title Il tuo percorso di costruzione della fiducia + section Oggi Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section Questa settimana Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section Il prossimo mese Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **Ricorda**: Ogni esperto è stato un principiante. Ogni sviluppatore senior si è sentito esattamente come ti senti tu ora – entusiasta, forse un po' sopraffatto, e sicuramente curioso di sapere cosa è possibile. Sei in ottima compagnia, e questo viaggio sarà incredibile. Benvenuto nel meraviglioso mondo della programmazione! 🎉 +> 🌟 **Ricorda**: Ogni esperto è stato una volta un principiante. Ogni sviluppatore senior ha provato esattamente quello che provi tu ora – entusiasmo, forse un po’ di confusione, e sicuramente curiosità su ciò che è possibile. Sei in ottima compagnia, e questo viaggio sarà incredibile. Benvenuto nel meraviglioso mondo della programmazione! 🎉 --- + **Disclaimer**: -Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione. \ No newline at end of file +Questo documento è stato tradotto utilizzando il servizio di traduzione automatica AI [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci a garantire l’accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non ci assumiamo alcuna responsabilità per eventuali incomprensioni o interpretazioni errate derivanti dall’uso di questa traduzione. + \ No newline at end of file diff --git a/translations/it/AGENTS.md b/translations/it/AGENTS.md index 20dd96678..6186cdf07 100644 --- a/translations/it/AGENTS.md +++ b/translations/it/AGENTS.md @@ -2,36 +2,36 @@ ## Panoramica del Progetto -Questo è un repository di curriculum educativo per insegnare i fondamenti dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, che propone 24 lezioni pratiche su JavaScript, CSS e HTML. +Questo è un repository curriculum educativo per insegnare le basi dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, con 24 lezioni pratiche che coprono JavaScript, CSS e HTML. ### Componenti Chiave - **Contenuti Educativi**: 24 lezioni strutturate organizzate in moduli basati su progetti -- **Progetti Pratici**: Terrario, Gioco di Digitazione, Estensione Browser, Gioco Spaziale, App Bancaria, Editor di Codice e Assistente Chat AI -- **Quiz Interattivi**: 48 quiz con 3 domande ciascuno (valutazioni pre/post lezione) -- **Supporto Multilingue**: Traduzioni automatizzate per più di 50 lingue tramite GitHub Actions +- **Progetti Pratici**: Terrarium, Gioco di Digitazione, Estensione del Browser, Gioco Spaziale, App Bancaria, Editor di Codice e Assistente Chat AI +- **Quiz Interattivi**: 48 quiz con 3 domande ciascuno (valutazioni pre/post-lezione) +- **Supporto Multilingue**: Traduzioni automatiche per oltre 50 lingue tramite GitHub Actions - **Tecnologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (per progetti AI) ### Architettura - Repository educativo con struttura basata sulle lezioni -- Ogni cartella lezione contiene README, esempi di codice e soluzioni -- Progetti autonomi in directory separate (quiz-app, vari progetti delle lezioni) -- Sistema di traduzione che usa GitHub Actions (co-op-translator) +- Ogni cartella delle lezioni contiene README, esempi di codice e soluzioni +- Progetti autonomi in directory separate (quiz-app, vari progetti di lezione) +- Sistema di traduzione tramite GitHub Actions (co-op-translator) - Documentazione servita tramite Docsify e disponibile in PDF -## Comandi di Setup +## Comandi di Configurazione -Questo repository è principalmente per fruizione di contenuti educativi. Per lavorare con progetti specifici: +Questo repository è principalmente destinato al consumo di contenuti educativi. Per lavorare con progetti specifici: -### Setup Principale del Repository +### Configurazione Principale del Repository ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Setup Quiz App (Vue 3 + Vite) +### Configurazione Quiz App (Vue 3 + Vite) ```bash cd quiz-app @@ -41,7 +41,7 @@ npm run build # Compila per la produzione npm run lint # Esegui ESLint ``` -### API Progetto Bancario (Node.js + Express) +### API del Progetto Bancario (Node.js + Express) ```bash cd 7-bank-project/api @@ -78,31 +78,31 @@ python api.py ## Flusso di Lavoro per lo Sviluppo -### Per i Contributori di Contenuti +### Per i Collaboratori di Contenuti -1. **Forka il repository** sul tuo account GitHub -2. **Clona il tuo fork** localmente -3. **Crea un nuovo branch** per le tue modifiche -4. Apporta modifiche ai contenuti delle lezioni o agli esempi di codice -5. Testa eventuali modifiche al codice nelle directory di progetto rilevanti -6. Invia pull request seguendo le linee guida per i contributi +1. **Effettuare il fork del repository** sul proprio account GitHub +2. **Clonare il fork** localmente +3. **Creare un nuovo branch** per le modifiche +4. Apportare modifiche ai contenuti delle lezioni o agli esempi di codice +5. Testare eventuali modifiche al codice nelle directory di progetto rilevanti +6. Inviare pull request seguendo le linee guida di contributo ### Per gli Studenti -1. Fork o clona il repository -2. Naviga le directory delle lezioni in sequenza -3. Leggi i file README di ogni lezione -4. Completa i quiz pre-lezione su https://ff-quizzes.netlify.app/web/ -5. Lavora sugli esempi di codice nelle cartelle delle lezioni -6. Completa compiti e sfide -7. Fai i quiz post-lezione +1. Fare il fork o clonare il repository +2. Navigare sequenzialmente nelle directory delle lezioni +3. Leggere i file README di ogni lezione +4. Completare i quiz pre-lezione su https://ff-quizzes.netlify.app/web/ +5. Lavorare sugli esempi di codice nelle cartelle delle lezioni +6. Completare compiti e sfide +7. Sostenere i quiz post-lezione ### Sviluppo Live -- **Documentazione**: Esegui `docsify serve` nella root (porta 3000) -- **Quiz App**: Esegui `npm run dev` nella directory quiz-app -- **Progetti**: Usa l’estensione Live Server di VS Code per i progetti HTML -- **Progetti API**: Esegui `npm start` nelle directory API corrispondenti +- **Documentazione**: Eseguire `docsify serve` nella root (porta 3000) +- **Quiz App**: Eseguire `npm run dev` nella directory quiz-app +- **Progetti**: Usare l’estensione Live Server di VS Code per progetti HTML +- **Progetti API**: Eseguire `npm start` nelle rispettive directory API ## Istruzioni per il Testing @@ -118,65 +118,65 @@ npm run build # Verifica che la compilazione abbia successo ```bash cd 7-bank-project/api -npm run lint # Controlla problemi di stile del codice +npm run lint # Controlla la presenza di problemi nello stile del codice node server.js # Verifica che il server si avvii senza errori ``` ### Approccio Generale al Testing -- Questo è un repository educativo senza test automatici completi -- Il testing manuale è focalizzato su: - - Esecuzione senza errori degli esempi di codice - - Funzionalità corretta dei link nella documentazione - - Completamento di build dei progetti senza errori - - Applicazione delle best practice negli esempi +- Questo è un repository educativo senza test automatizzati completi +- Il testing manuale si concentra su: + - Esecuzione degli esempi di codice senza errori + - Funzionamento corretto dei link nella documentazione + - Completamento con successo delle build dei progetti + - Aderenza degli esempi alle migliori pratiche -### Controlli Prima dell’Invio +### Controlli Pre-Invio -- Esegui `npm run lint` nelle directory con package.json -- Verifica che i link markdown siano validi -- Testa gli esempi di codice nel browser o in Node.js -- Controlla che le traduzioni mantengano una struttura corretta +- Eseguire `npm run lint` nelle directory con package.json +- Verificare che i link markdown siano validi +- Testare gli esempi di codice nel browser o in Node.js +- Controllare che le traduzioni mantengano la struttura corretta ## Linee Guida per lo Stile del Codice ### JavaScript -- Usa sintassi moderna ES6+ -- Segui le configurazioni standard ESLint fornite nei progetti -- Usa nomi significativi di variabili e funzioni per chiarezza educativa -- Aggiungi commenti che spiegano i concetti agli studenti -- Formatta con Prettier dove è configurato +- Usare sintassi moderna ES6+ +- Seguire le configurazioni standard ESLint fornite nei progetti +- Usare nomi di variabili e funzioni significativi per chiarezza educativa +- Aggiungere commenti che spiegano i concetti per gli studenti +- Formattare usando Prettier dove configurato ### HTML/CSS - Elementi semantici HTML5 - Principi di design responsivo -- Convenzioni chiare per nomi delle classi +- Convenzioni chiare per la denominazione delle classi - Commenti che spiegano tecniche CSS per studenti ### Python - Linee guida di stile PEP 8 -- Codice chiaro ed educativo -- Suggerimenti di tipo dove utili per l’apprendimento +- Esempi di codice chiari ed educativi +- Annotazioni di tipo dove utili per l’apprendimento ### Documentazione Markdown -- Gerarchia chiara dei titoli -- Blocchi di codice con specifica del linguaggio +- Chiara gerarchia delle intestazioni +- Blocchi di codice con specificazione del linguaggio - Link a risorse aggiuntive -- Screenshot e immagini nelle cartelle `images/` +- Screenshot e immagini nelle directory `images/` - Testo alternativo per le immagini per accessibilità ### Organizzazione dei File -- Lezioni numerate sequenzialmente (1-getting-started-lessons, 2-js-basics, ecc.) -- Ogni progetto ha directory `solution/` e spesso `start/` o `your-work/` -- Immagini archiviate nelle cartelle `images/` specifiche per le lezioni +- Lezioni numerate progressivamente (1-getting-started-lessons, 2-js-basics, ecc.) +- Ogni progetto ha cartelle `solution/` e spesso `start/` o `your-work/` +- Immagini conservate nelle cartelle `images/` specifiche delle lezioni - Traduzioni nella struttura `translations/{language-code}/` -## Costruzione e Distribuzione +## Build e Distribuzione ### Distribuzione Quiz App (Azure Static Web Apps) @@ -185,7 +185,7 @@ La quiz-app è configurata per la distribuzione su Azure Static Web Apps: ```bash cd quiz-app npm run build # Crea la cartella dist/ -# Esegue il deploy tramite workflow GitHub Actions al push su main +# Effettua il deploy tramite il workflow di GitHub Actions al push su main ``` Configurazione Azure Static Web Apps: @@ -207,76 +207,76 @@ npm install -g docsify-cli # Installa Docsify globalmente docsify serve # Servi su localhost:3000 ``` -### Build specifici per progetto +### Build Specifiche dei Progetti Ogni directory di progetto può avere il proprio processo di build: - Progetti Vue: `npm run build` crea bundle di produzione -- Progetti statici: nessun passaggio di build, i file sono serviti direttamente +- Progetti statici: Nessun passaggio di build, servire file direttamente ## Linee Guida per le Pull Request ### Formato del Titolo -Usa titoli chiari e descrittivi che indicano l’area di modifica: +Usare titoli chiari e descrittivi indicando l’area di modifica: - `[Quiz-app] Aggiungi nuovo quiz per la lezione X` - `[Lesson-3] Correggi errore di battitura nel progetto terrarium` - `[Translation] Aggiungi traduzione spagnola per la lezione 5` -- `[Docs] Aggiorna istruzioni di setup` +- `[Docs] Aggiorna istruzioni di configurazione` ### Controlli Richiesti Prima di inviare una PR: 1. **Qualità del Codice**: - - Esegui `npm run lint` nelle directory di progetto coinvolte - - Risolvi tutti gli errori e avvisi di linting + - Eseguire `npm run lint` nelle directory di progetto interessate + - Correggere tutti gli errori e avvertimenti lint -2. **Verifica Build**: - - Esegui `npm run build` se applicabile - - Assicurati che non ci siano errori di build +2. **Verifica della Build**: + - Eseguire `npm run build` se applicabile + - Assicurarsi che non vi siano errori di build 3. **Validazione Link**: - - Testa tutti i link markdown - - Verifica riferimenti alle immagini + - Testare tutti i link markdown + - Verificare che i riferimenti alle immagini funzionino 4. **Revisione Contenuto**: - - Controlla ortografia e grammatica - - Verifica che esempi di codice siano corretti ed educativi - - Controlla che le traduzioni mantengano il significato originale + - Correggere ortografia e grammatica + - Assicurarsi che gli esempi di codice siano corretti ed educativi + - Verificare che le traduzioni mantengano il significato originale -### Requisiti per il Contributo +### Requisiti di Contributo -- Accetta il Microsoft CLA (controllo automatico alla prima PR) -- Segui il [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Consulta [CONTRIBUTING.md](./CONTRIBUTING.md) per linee guida dettagliate -- Inserisci numeri issue nella descrizione della PR se applicabile +- Accettare il CLA Microsoft (controllo automatico alla prima PR) +- Seguire il [Codice di Condotta Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/) +- Consultare [CONTRIBUTING.md](./CONTRIBUTING.md) per linee guida dettagliate +- Fare riferimento ai numeri delle issue nella descrizione PR se applicabile ### Processo di Revisione -- Le PR sono revisionate da manutentori e dalla community -- Priorità alla chiarezza educativa -- Gli esempi di codice devono seguire le best practice correnti +- Le PR sono revisionate dai responsabili e dalla community +- Si dà priorità alla chiarezza educativa +- Gli esempi di codice devono seguire le migliori pratiche correnti - Le traduzioni sono revisionate per accuratezza e adeguatezza culturale ## Sistema di Traduzione -### Traduzione Automatizzata +### Traduzione Automatica - Usa GitHub Actions con workflow co-op-translator - Traduce automaticamente in oltre 50 lingue - File sorgente nelle directory principali -- File tradotti nelle directory `translations/{language-code}/` +- File tradotti in directory `translations/{language-code}/` -### Aggiunta di Miglioramenti Manuali +### Aggiunta di Miglioramenti Manuali alle Traduzioni -1. Trova il file in `translations/{language-code}/` -2. Apporta miglioramenti preservando la struttura -3. Assicurati che gli esempi di codice restino funzionanti -4. Testa eventuali contenuti di quiz localizzati +1. Trovare il file in `translations/{language-code}/` +2. Apportare miglioramenti mantenendo la struttura +3. Assicurarsi che gli esempi di codice restino funzionanti +4. Testare eventuali contenuti del quiz localizzati ### Metadati della Traduzione -I file tradotti includono header di metadati: +I file tradotti includono intestazione metadata: ```markdown -**Disclaimer**: -Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire accuratezza, si prega di notare che le traduzioni automatizzate possono contenere errori o imprecisioni. Il documento originale nella sua lingua originale deve essere considerato la fonte autorevole. Per informazioni critiche si raccomanda una traduzione professionale effettuata da un essere umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall’uso di questa traduzione. +**Dichiarazione di non responsabilità**: +Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire l’accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda la traduzione professionale effettuata da un umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall’uso di questa traduzione. \ No newline at end of file diff --git a/translations/it/README.md b/translations/it/README.md index d15ea9962..84a36ad7a 100644 --- a/translations/it/README.md +++ b/translations/it/README.md @@ -12,60 +12,70 @@ # Sviluppo Web per Principianti - Un Curriculum -Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane tenuto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni esplora JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la ritenzione delle conoscenze con la nostra efficace metodologia basata su progetti. Inizia oggi il tuo percorso di coding! +Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane offerto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni esplora JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la tua memorizzazione con la nostra efficace pedagogia basata su progetti. Inizia oggi il tuo viaggio nel coding! -Unisciti alla Community Discord di Azure AI Foundry +Unisciti alla Comunità Discord di Azure AI Foundry [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Segui questi passaggi per iniziare a usare queste risorse: -1. **Effettua il Fork del Repository**: Clicca [![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) +Segui questi passaggi per iniziare a utilizzare queste risorse: +1. **Forka il Repository**: Clicca su [![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. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Unisciti alla Azure AI Foundry Discord e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4) +3. [**Unisciti al Discord di The Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 Supporto Multilingua +### 🌐 Supporto Multilingue -#### Supportato tramite GitHub Action (Automatizzato e Sempre Aggiornato) +#### Supportato tramite GitHub Action (Automatizzato e sempre aggiornato) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](./README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Preferisci Clonare Localmente?** - -> Questo repository include oltre 50 traduzioni linguistiche che aumentano significativamente la dimensione del download. Per clonare senza traduzioni, usa il sparse checkout: +> **Preferisci clonare localmente?** +> +> Questo repository include oltre 50 traduzioni linguistiche che aumentano significativamente la dimensione del download. Per clonare senza le traduzioni, usa il sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Questo ti darà tutto ciò che ti serve per completare il corso con un download molto più veloce. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Ti fornisce tutto il necessario per completare il corso con un download molto più veloce. -**Se desideri che vengano supportate ulteriori lingue di traduzione, troverai l’elenco [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Se desideri altre lingue di traduzione, quelle supportate sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Apri%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Sei uno studente?_ -Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e anche modi per ottenere un voucher gratuito per il certificato. Questa è la pagina che vuoi aggiungere ai preferiti e consultare di tanto in tanto, poiché i contenuti vengono aggiornati mensilmente. +Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e anche i modi per ottenere un voucher gratuito per il certificato. Questa è la pagina da aggiungere tra i preferiti e controllare periodicamente poiché i contenuti vengono aggiornati mensilmente. -### 📣 Annuncio - Nuove sfide per la modalità GitHub Copilot Agent da completare! +### 📣 Annuncio - Nuove sfide Modalità GitHub Copilot Agent da completare! -Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare usando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, essa è in grado non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro. +Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare usando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, questa non genera solo testo ma può anche creare e modificare file, eseguire comandi e altro. -### 📣 Annuncio - _Nuovo progetto da costruire utilizzando l’IA Generativa_ +### 📣 Annuncio - _Nuovo Progetto da costruire usando Generative AI_ -Nuovo progetto AI Assistant appena aggiunto, dai un’occhiata al [progetto](./9-chat-project/README.md) +Nuovo progetto Assistente AI appena aggiunto, dai un’occhiata al [progetto](./9-chat-project/README.md) -### 📣 Annuncio - _Nuovo Curriculum_ sull’IA Generativa per JavaScript appena rilasciato +### 📣 Annuncio - _Nuovo Curriculum_ sulla Generative AI per JavaScript appena pubblicato -Non perdere il nostro nuovo curriculum sull’IA Generativa! +Non perdere il nostro nuovo curriculum sulla Generative AI! Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare! ![Background](../../translated_images/it/background.148a8d43afde5730.webp) -- Lezioni che coprono tutto, dalle basi fino a RAG. +- Lezioni che coprono tutto, dalle basi al RAG. - Interagisci con personaggi storici usando GenAI e la nostra app companion. - Narrazione divertente e coinvolgente, viaggerai nel tempo! @@ -73,141 +83,140 @@ Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniz Ogni lezione include un compito da completare, un controllo delle conoscenze e una sfida per guidarti nell’apprendimento di argomenti come: -- Prompting e ingegneria dei prompt -- Generazione di app testuali e di immagini +- Prompt e prompt engineering +- Generazione di app di testo e immagini - App di ricerca Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare! -## 🌱 Iniziare +## 🌱 Per Iniziare -> **Insegnanti**, abbiamo [incluso alcuni suggerimenti](for-teachers.md) su come usare questo curriculum. Ci piacerebbe ricevere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Insegnanti**, abbiamo [incluso qualche suggerimento](for-teachers.md) su come usare questo curriculum. Ci piacerebbe avere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz pre-lezione, seguite leggendo il materiale della lezione, completate le varie attività e verificate la vostra comprensione con il quiz post-lezione. +**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz pre-lezione e continuate leggendo il materiale della lezione, completando le varie attività e verificando la comprensione con il quiz post-lezione. -Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni di corso per lavorare insieme sui progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dove il nostro team di moderatori sarà disponibile per rispondere alle tue domande. +Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme sui progetti! Sono incoraggiate le discussioni nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dove il nostro team di moderatori sarà disponibile a rispondere alle tue domande. -Per approfondire la tua formazione, ti consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per materiali di studio aggiuntivi. +Per approfondire la tua formazione, ti consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per ulteriori materiali di studio. -### 📋 Configura il tuo ambiente +### 📋 Configurare il tuo ambiente -Questo curriculum ha un ambiente di sviluppo pronto all’uso! Quando inizi puoi scegliere di eseguire il curriculum in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza necessità di installazioni_), oppure localmente sul tuo computer usando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Questo curriculum ha un ambiente di sviluppo pronto all’uso! Quando inizi puoi scegliere di eseguire il curriculum in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza bisogno di installazioni_), oppure localmente sul tuo computer usando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Crea il tuo repository -Per salvare facilmente il tuo lavoro, è consigliato creare una tua copia di questo repository. Puoi farlo cliccando sul pulsante **Usa questo modello** in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum. +Per salvare facilmente il tuo lavoro, si consiglia di creare una copia di questo repository. Puoi farlo cliccando sul pulsante **Usa questo modello** in alto nella pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum. Segui questi passaggi: -1. **Effettua il Fork del Repository**: Clicca sul pulsante "Fork" in alto a destra di questa pagina. +1. **Forka il Repository**: Clicca sul bottone "Fork" in alto a destra di questa pagina. 2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Esecuzione del curriculum in un Codespace +#### Eseguire il curriculum in un Codespace -Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace in cui lavorare. +Nella tua copia del repository che hai creato, clicca il bottone **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace dove potrai lavorare. ![Codespace](../../translated_images/it/createcodespace.0238bbf4d7a8d955.webp) -#### Esecuzione del curriculum localmente sul tuo computer - -Per eseguire questo curriculum localmente sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da linea di comando. La nostra prima lezione, [Introduzione ai Linguaggi di Programmazione e agli Strumenti del mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti in modo che tu possa scegliere ciò che funziona meglio per te. - -La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale integrato](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +#### Eseguire il curriculum localmente sul tuo computer +Per eseguire questo curriculum localmente serve un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai linguaggi di programmazione e agli strumenti del mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti in modo che tu possa scegliere quella che preferisci. -1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL: +La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che ha anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrato. Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l’URL: [CodeSpace](./images/createcodespace.png) - Quindi, apri [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `` con l'URL appena copiato: + + Poi, apri [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all’interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il comando seguente, sostituendo `` con l’URL che hai appena copiato: ```bash git clone ``` -2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Apri cartella** e selezionando la cartella appena clonata. +2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Open Folder** e selezionando la cartella appena clonata. -> Estensioni consigliate per Visual Studio Code: +> Estensioni consigliate di Visual Studio Code: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima pagine HTML all'interno di Visual Studio Code +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima pagine HTML all’interno di Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - per aiutarti a scrivere codice più velocemente ## 📂 Ogni lezione include: - sketchnote opzionale - video supplementare opzionale -- quiz preparatorio alla lezione +- quiz di riscaldamento prima della lezione - lezione scritta -- per le lezioni basate su progetti, guide passo passo su come realizzare il progetto -- verifiche della conoscenza +- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto +- controlli delle conoscenze - una sfida - letture supplementari - compito - [quiz post-lezione](https://ff-quizzes.netlify.app/web/) -> **Una nota sui quiz**: tutti i quiz si trovano nella cartella Quiz-app, 48 quiz totali di tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/). L'app dei quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`. +> **Una nota sui quiz**: Tutti i quiz si trovano nella cartella Quiz-app, 48 quiz totali di tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/); l’app del quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`. ## 🗃️ Lezioni -| | Nome Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore | -| :-: | :--------------------------------------------------------: | :----------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Getting Started | Introduzione alla Programmazione e Strumenti del Mestiere | Imparare i fondamenti di base della maggior parte dei linguaggi di programmazione e del software che aiuta gli sviluppatori | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Getting Started | Nozioni base di GitHub, compreso lavorare in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Getting Started | Accessibilità | Imparare le basi dell'accessibilità web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basics | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basics | Funzioni e Metodi | Impara a conoscere funzioni e metodi per gestire il flusso logico di un'applicazione | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS Basics | Prendere decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi decisionali | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basics | Array e Cicli | Lavora con i dati usando array e cicli in JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione del layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sulle basi del CSS inclusa la realizzazione di una pagina responsiva | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closure in JavaScript, manipolazione del DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, concentrandoti su closure e manipolazione del DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruire un gioco di digitazione | Impara a usare eventi da tastiera per guidare la logica dell'app JavaScript | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lavorare con i Browser | Impara come funzionano i browser, la loro storia, e come strutturare i primi elementi di un'estensione browser | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Costruire un form, chiamare un'API e memorizzare variabili in local storage | Costruisci gli elementi JavaScript dell'estensione browser per chiamare un'API usando variabili memorizzate in local storage | [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) | Processi in background nel browser, prestazioni web | Usa i processi in background del browser per gestire l'icona dell'estensione; imparare sulle prestazioni web e alcune ottimizzazioni per migliorare | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Sviluppo di giochi avanzato con JavaScript | Impara l'Ereditarietà usando sia Classi che Composizione e il modello Pub/Sub, in preparazione alla costruzione di un gioco | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Disegnare su canvas | Impara l'API Canvas, usata per disegnare elementi su uno schermo | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Spostare elementi sullo schermo | Scopri come gli elementi possono ottenere movimento usando coordinate cartesiane e l'API Canvas | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Rilevamento collisioni | Fai collidere gli elementi e reagire tra di loro usando i tasti premuti e fornisci una funzione di cooldown per assicurare le prestazioni del gioco | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara come terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei valori delle variabili | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML e Routing in un'app web | Impara a creare la struttura architettonica di un sito multipagina usando routing e template HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Costruire un form di Login e Registrazione | Impara a costruire form e gestire routine di validazione | [Forms](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Metodi per recuperare e usare dati | Come i dati entrano ed escono dalla tua app, come recuperarli, conservarli e smaltirli | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Concetti di gestione dello stato | Impara come la tua app conserva lo stato e come gestirlo programmativamente | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice| [Usa l’editor di codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Lavorare con l’AI | Impara a costruire il tuo assistente AI | [Progetto Assistente AI](./9-chat-project/README.md) | Chris | +| | Nome Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Getting Started | Introduzione alla Programmazione e Strumenti del Mestiere | Impara le basi comuni alla maggior parte dei linguaggi di programmazione e sul software che aiuta gli sviluppatori professionisti a svolgere il loro lavoro | [Introduzione ai Linguaggi di Programmazione e Strumenti del Mestiere](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Getting Started | Nozioni base su GitHub, incluso il lavoro in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | [Introduzione a GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Getting Started | Accessibilità | Impara le basi dell’accessibilità web | [Fondamenti di Accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | Tipi di Dati JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di Dati](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | Funzioni e Metodi | Impara su funzioni e metodi per gestire il flusso logico di un’applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher | +| 06 | JS Basics | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi decisionali | [Prendere Decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | Array e Cicli | Lavora con dati usando array e cicli in JavaScript | [Array e Cicli](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l’HTML per creare un terrario online, focalizzandoti sulla costruzione del layout | [Introduzione a HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sulle basi del CSS inclusa la responsività della pagina | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure JavaScript, manipolazione del DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, concentrandoti su chiusure e manipolazione del DOM | [Chiusure JavaScript, manipolazione del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruire un Gioco di Digitazione | Impara a usare eventi da tastiera per guidare la logica della tua app JavaScript | [Programmazione Event-Driven](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lavorare con i Browser | Impara come funzionano i browser, la loro storia e come strutturare i primi elementi di un’estensione del browser | [Informazioni sui Browser](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Costruzione di un form, chiamata API e memorizzazione variabili in local storage | Costruisci gli elementi JavaScript della tua estensione per chiamare un’API usando variabili memorizzate nel local storage | [API, Form e Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Usa i processi in background del browser per gestire l’icona dell’estensione; impara sulle prestazioni web e alcune ottimizzazioni per migliorare | [Attività Background e Prestazioni](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Sviluppo di giochi più avanzato con JavaScript | Impara sull’Ereditarietà usando sia Classi che Composizione e sul pattern Pub/Sub, in preparazione per costruire un gioco | [Introduzione allo Sviluppo Avanzato di Giochi](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Disegnare su canvas | Impara la Canvas API, usata per disegnare elementi su uno schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Muovere gli elementi sullo schermo | Scopri come gli elementi possono muoversi usando coordinate cartesiane e la Canvas API | [Muovere gli Elementi](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Rilevamento collisioni | Fai collidere elementi e reagire tra loro usando pressioni di tasti e fornisci una funzione di cooldown per assicurare le prestazioni del gioco | [Rilevamento Collisioni](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Mantenere il punteggio | Esegui calcoli matematici basati sullo stato e prestazioni del gioco | [Mantenere il Punteggio](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei valori delle variabili | [La Condizione di Fine](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML e Routing in un'app web | Impara a creare la struttura architettonica di un sito multipagina usando routing e template HTML | [Template HTML e Routing](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Costruire un form di login e registrazione | Impara a costruire form e gestire routine di validazione | [Form](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Metodi di Fetching e Uso dei Dati | Come i dati entrano e escono dalla tua app, come recuperarli, salvarli e scartarli | [Dati](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Concetti di Gestione dello Stato | Impara come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello Stato](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice| [Usare VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Lavorare con AI | Impara a costruire il tuo assistente AI | [Progetto Assistente AI](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogia -Il nostro curriculum è progettato con due principi pedagogici chiave in mente: +Il nostro curriculum è progettato secondo due principi pedagogici chiave: * apprendimento basato su progetti * quiz frequenti -Il programma insegna le basi di JavaScript, HTML e CSS, così come gli strumenti più recenti e le tecniche usate dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di sviluppare esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione browser eco-friendly, un gioco in stile space invaders e un'app bancaria per aziende. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web. +Il programma insegna le basi di JavaScript, HTML e CSS, così come gli strumenti e le tecniche più recenti usati dagli sviluppatori web di oggi. Gli studenti avranno l’opportunità di acquisire esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un’estensione browser ecologica, un gioco in stile space-invader e un’app bancaria per aziende. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web. -> 🎓 Puoi seguire le prime lezioni di questo curriculum come un [Percorso di Apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn! +> 🎓 Puoi seguire le prime lezioni di questo curriculum come [Percorso di Apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn! -Garantendo che i contenuti siano allineati ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti aumenterà. Abbiamo anche scritto alcune lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della collezione di tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum. +Assicurando che il contenuto sia allineato ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo inoltre scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della raccolta "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum. -Inoltre, un quiz a bassa pressione prima di una lezione stabilisce l'intenzione dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura una maggiore ritenzione. Questo curriculum è progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti partono piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane. +Inoltre, un quiz a bassa pressione prima di una lezione pone l’intenzione dello studente verso l’apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito integralmente o parzialmente. I progetti iniziano piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane. -Pur avendo volutamente evitato di introdurre framework JavaScript per concentrare l'attenzione sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, una buona fase successiva per completare questo curriculum sarebbe imparare Node.js tramite un'altra raccolta di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Sebbene abbiamo volutamente evitato l’introduzione di framework JavaScript per concentrarci sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un’altra raccolta di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Consulta il nostro [Codice di Condotta](CODE_OF_CONDUCT.md) e le linee guida su [Come Contribuire](CONTRIBUTING.md). Accogliamo con piacere il tuo feedback costruttivo! +> Visita le nostre linee guida [Codice di Condotta](CODE_OF_CONDUCT.md) e [Contributi](CONTRIBUTING.md). Accogliamo con piacere il tuo feedback costruttivo! ## 🧭 Accesso offline -Puoi eseguire questa documentazione offline usando [Docsify](https://docsify.js.org/#/). Fai il fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella radice di questo repository, digita `docsify serve`. Il sito sarà servito sulla porta 3000 sul tuo localhost: `localhost:3000`. +Puoi eseguire questa documentazione offline usando [Docsify](https://docsify.js.org/#/). Fai un fork di questo repo, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella principale di questo repo, digita `docsify serve`. Il sito sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`. ## 📘 PDF - -Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +Un PDF di tutte le lezioni è disponibile [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Altri Corsi -Il nostro team produce altri corsi! Dai un'occhiata a: + +Il nostro team produce altri corsi! Dai un'occhiata: ### LangChain @@ -224,7 +233,7 @@ Il nostro team produce altri corsi! Dai un'occhiata a: --- -### Serie Intelligenza Artificiale Generativa +### Serie AI Generativa [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -232,7 +241,7 @@ Il nostro team produce altri corsi! Dai un'occhiata a: --- -### Apprendimento di Base +### Apprendimento Core [![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) @@ -251,11 +260,11 @@ Il nostro team produce altri corsi! Dai un'occhiata a: ## Ottenere Aiuto -Se rimani bloccato o hai domande sulla creazione di app AI. Unisciti ad altri studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza viene condivisa liberamente. +Se rimani bloccato o hai domande sulla creazione di app AI, unisciti ad altri studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza viene condivisa liberamente. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Se hai feedback sul prodotto o errori mentre costruisci, visita: +Se hai feedback sul prodotto o incontri errori durante la creazione visita: [![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) @@ -266,6 +275,6 @@ Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file --- -**Disclaimer**: -Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire l’accuratezza, si prega di considerare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un umano. Non ci assumiamo alcuna responsabilità per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione. +**Avvertenza**: +Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur facendo del nostro meglio per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o inesattezze. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia la traduzione professionale effettuata da un umano. Non ci assumiamo responsabilità per eventuali malintesi o interpretazioni errate derivanti dall'uso di questa traduzione. \ No newline at end of file diff --git a/translations/pl/.co-op-translator.json b/translations/pl/.co-op-translator.json index da21d6a9b..2c7c296df 100644 --- a/translations/pl/.co-op-translator.json +++ b/translations/pl/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T19:58:04+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T18:44:39+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "pl" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:09:47+00:00", + "translation_date": "2026-03-06T18:52:39+00:00", "source_file": "AGENTS.md", "language_code": "pl" }, @@ -516,8 +516,8 @@ "language_code": "pl" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:03:37+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T18:40:41+00:00", "source_file": "README.md", "language_code": "pl" }, diff --git a/translations/pl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 33c12e69a..a5d3570ca 100644 --- a/translations/pl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/pl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,98 +1,98 @@ # Wprowadzenie do języków programowania i nowoczesnych narzędzi dla programistów - -Cześć, przyszły programisto! 👋 Czy mogę Ci powiedzieć coś, co wciąż przyprawia mnie o dreszcze za każdym razem? Zaraz odkryjesz, że programowanie to nie tylko komputery – to prawdziwe supermoce pozwalające wcielić w życie najbardziej dzikie pomysły! -Znacie ten moment, gdy korzystacie ze swojej ulubionej aplikacji i wszystko działa idealnie? Gdy stukacie w przycisk i dzieje się coś absolutnie magicznego, co sprawia, że mówicie „wow, jak oni to zrobili?” Cóż, ktoś taki jak Ty – pewnie siedząc w swojej ulubionej kawiarni o 2 w nocy przy trzecim espresso – napisał kod, który stworzył tę magię. A teraz coś, co Cię zaskoczy: na końcu tej lekcji nie tylko zrozumiesz, jak to działa, ale będziesz wręcz chcę to sam wypróbować! +Cześć, przyszły programisto! 👋 Mogę Ci powiedzieć coś, co codziennie przyprawia mnie o dreszcze? Za chwilę odkryjesz, że programowanie to nie tylko komputery – to posiadanie prawdziwych supermocy, które pozwalają ożywić Twoje najdziksze pomysły! -Słuchaj, całkowicie rozumiem, jeśli programowanie wydaje się teraz przerażające. Kiedy zaczynałem, szczerze myślałem, że trzeba być geniuszem matematycznym albo kodować od piątego roku życia. Ale oto, co całkowicie zmieniło moje podejście: programowanie to dokładnie jak nauka prowadzenia rozmów w nowym języku. Zaczynasz od „cześć” i „dziękuję”, potem potrafisz zamówić kawę, a zanim się obejrzysz, prowadzisz głębokie filozoficzne dyskusje! Tyle że w tym przypadku rozmawiasz z komputerami, a one? One są najbardziej cierpliwymi rozmówcami, jakich poznasz – nigdy nie oceniają Twoich błędów i zawsze chętnie próbują ponownie! +Znasz ten moment, gdy korzystasz ze swojej ulubionej aplikacji i wszystko po prostu działa idealnie? Kiedy naciskasz przycisk i dzieje się coś magicznego, co sprawia, że mówisz „wow, jak oni to ZROBILI?” Cóż, ktoś dokładnie taki jak Ty – prawdopodobnie siedzący w swoim ulubionym kawiarni o 2 w nocy, pijąc trzeci espresso – napisał kod, który stworzył tę magię. A teraz coś, co zwali Cię z nóg: pod koniec tej lekcji nie tylko będziesz wiedzieć, jak to zrobili, ale zaczniesz sam z niecierpliwością próbować! -Dziś poznamy niesamowite narzędzia, które sprawiają, że nowoczesne tworzenie stron internetowych jest nie tylko możliwe, ale też niesamowicie wciągające. Mówię o tych samych edytorach, przeglądarkach i przepływach pracy, z których korzystają programiści Netflixa, Spotify oraz Twojego ulubionego studia indie tworzącego aplikacje każdego dnia. I oto część, która sprawi, że zatańczysz z radości: większość tych profesjonalnych, standardowych narzędzi jest całkowicie darmowa! +Słuchaj, doskonale rozumiem, jeśli programowanie wyda Ci się teraz onieśmielające. Kiedy zaczynałem, naprawdę myślałem, że trzeba być jakimś matematycznym geniuszem albo programować od piątego roku życia. Ale oto co całkowicie zmieniło mój punkt widzenia: programowanie jest dokładnie jak nauka rozmów w nowym języku. Zaczynasz od „cześć” i „dziękuję”, potem uczysz się zamawiać kawę, a zanim się obejrzysz, prowadzisz głębokie, filozoficzne dyskusje! Z tą różnicą, że tutaj rozmawiasz z komputerami, a szczerze? To najbardziej cierpliwi rozmówcy, jakich spotkasz – nigdy nie oceniają Twoich błędów i zawsze chętnie próbują ponownie! + +Dzisiaj poznamy niesamowite narzędzia, które sprawiają, że nowoczesny rozwój sieciowy jest nie tylko możliwy, ale naprawdę uzależniający. Mówię o dokładnie tych samych edytorach, przeglądarkach i przepływach pracy, których używają programiści w Netflix, Spotify i Twoim ulubionym niezależnym studiu aplikacji każdego dnia. A teraz najlepsze: większość tych profesjonalnych, standardowych w branży narzędzi jest całkowicie darmowa! ![Intro Programming](../../../../translated_images/pl/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Twoja dzisiejsza podróż programistyczna + title Twoja Podróż Programistyczna Dziś section Odkryj - Czym jest programowanie: 5: You - Języki programowania: 4: You - Przegląd narzędzi: 5: You + Czym jest Programowanie: 5: You + Języki Programowania: 4: You + Przegląd Narzędzi: 5: You section Eksploruj - Edytory kodu: 4: You - Przeglądarki i narzędzia deweloperskie: 5: You - Wiersz poleceń: 3: You + Edytory Kodów: 4: You + Przeglądarki i Narzędzia Deweloperskie: 5: You + Wiersz Poleceń: 3: You section Ćwicz - Detektyw języków: 4: You - Eksploracja narzędzi: 5: You - Połączenia społecznościowe: 5: You + Detektyw Językowy: 4: You + Eksploracja Narzędzi: 5: You + Połączenie ze Społecznością: 5: You ``` -## Sprawdź, co już wiesz! +## Sprawdźmy, co już wiesz! -Zanim przejdziemy do zabawy, jestem ciekaw – co już wiesz o tym świecie programowania? I słuchaj, jeśli patrzysz na te pytania myśląc „dosłownie nic o tym nie wiem”, to nie tylko w porządku, to idealnie! To znaczy, że jesteś dokładnie tam, gdzie powinieneś być. Traktuj ten quiz jak rozgrzewkę przed treningiem – po prostu rozgrzewamy mięśnie mózgu! +Zanim przejdziemy do zabawy, jestem ciekawy – co już wiesz o tym świecie programowania? I słuchaj, jeśli patrzysz na te pytania myśląc „nie mam o tym kompletnie pojęcia”, to nie tylko w porządku, to jest idealne! To oznacza, że jesteś dokładnie w odpowiednim miejscu. Pomyśl o tym quizie jak o rozgrzewce przed treningiem – po prostu rozciągamy mięśnie mózgu! -[Weź udział w quizie wstępnym](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Przejdź do quizu przed lekcją](https://ff-quizzes.netlify.app/web/) -## Przygoda, w którą zaraz wyruszymy razem +## Przygoda, na którą zaraz ruszamy razem -Dobra, naprawdę nie mogę się doczekać, co dziś odkryjemy! Naprawdę, chciałbym widzieć Twoją minę, gdy niektóre z tych koncepcji wreszcie zaczną do Ciebie trafiać. Oto niesamowita podróż, na którą ruszamy razem: +Ok, naprawdę się ekscytuję tym, co dziś odkryjemy! Naprawdę chciałbym widzieć Twoją minę, gdy niektóre z tych koncepcji zaczną do Ciebie trafiać. Oto niesamowita podróż, którą odbywamy razem: -- **Czym tak naprawdę jest programowanie (i dlaczego to najfajniejsza rzecz na świecie!)** – Poznamy, jak kod jest dosłownie niewidzialną magią napędzającą wszystko wokół ciebie, od tego alarmu, który jakoś wie, że jest poniedziałek rano, po algorytm, który idealnie dopasowuje rekomendacje na Netflixie -- **Języki programowania i ich niesamowite osobowości** – Wyobraź sobie imprezę, na którą każdy człowiek przynosi zupełnie inne supermoce i sposoby rozwiązywania problemów. Tak wygląda świat języków programowania, a ty pokochasz je poznawać! -- **Fundamentalne elementy, które tworzą cyfrową magię** – Pomyśl o nich jak o ostatecznym kreatywnym zestawie LEGO. Kiedy zrozumiesz, jak pasują do siebie te elementy, uświadomisz sobie, że możesz dosłownie zbudować wszystko, co tylko wymyśli twoja wyobraźnia -- **Profesjonalne narzędzia, które sprawią, że poczujesz się jakbyś dostał różdżkę czarodzieja** – Nie przesadzam – te narzędzia naprawdę sprawią, że poczujesz się jak posiadający supermoce, a najlepsze jest to, że to dokładnie te same, z których korzystają profesjonaliści! +- **Czym tak naprawdę jest programowanie (i dlaczego to najfajniejsza rzecz na świecie!)** – Odkryjemy, jak kod jest dosłownie niewidzialną magią napędzającą wszystko wokół Ciebie, od budzika, który jakoś wie, że to poranek poniedziałku, po algorytm, który idealnie dobiera Twoje rekomendacje na Netflixie +- **Języki programowania i ich niesamowite osobowości** – Wyobraź sobie imprezę, gdzie każdy z gości ma zupełnie inne supermoce i sposoby rozwiązywania problemów. Tak właśnie wygląda świat języków programowania i zakochasz się w poznawaniu ich! +- **Podstawowe elementy, które sprawiają, że cyfrowa magia działa** – Pomyśl o nich jak o najlepszym kreatywnym zestawie LEGO. Kiedy zrozumiesz, jak te elementy ze sobą współgrają, zrozumiesz, że możesz zbudować dosłownie wszystko, o czym marzy Twoja wyobraźnia +- **Profesjonalne narzędzia, które sprawią, że poczujesz się jak z czarodziejską różdżką** – Nie przesadzam – te narzędzia naprawdę pozwolą Ci poczuć, że masz supermoce, a najlepsze jest to, że używają ich profesjonaliści! -> 💡 **Tylko jedna sprawa**: Nie próbuj dzisiaj wszystkiego zapamiętać! Teraz chcę tylko, żebyś poczuł ten błysk ekscytacji tym, co jest możliwe. Szczegóły wbiją się naturalnie, gdy będziemy ćwiczyć – tak naprawdę uczy się najlepiej! +> 💡 **Ważne**: Nie próbuj zapamiętać wszystkiego od razu! Teraz chcę tylko, żebyś poczuł iskrę ekscytacji związaną z tym, co jest możliwe. Szczegóły pojawią się naturalnie, gdy będziemy ćwiczyć razem – tak właśnie wygląda prawdziwa nauka! -> Możesz wykonać tę lekcję na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Możesz przerabiać tę lekcję na [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Czym dokładnie *jest* programowanie? +## To czym dokładnie *jest* programowanie? -Dobra, zajmijmy się milionowym pytaniem: czym właściwie jest programowanie? +Dobra, zmierzmy się z milionowym pytaniem: czym tak naprawdę jest programowanie? -Opowiem Ci historię, która całkowicie zmieniła moje podejście. W zeszłym tygodniu próbowałem wytłumaczyć mamie, jak korzystać z naszego nowego pilota do smart TV. Złapałem się na tym, że mówię rzeczy typu „Naciśnij czerwony przycisk, ale nie ten duży czerwony, ten mały czerwony po lewej... nie, tamta twoja lewa... ok, teraz przytrzymaj przez dwie sekundy, nie jedną, nie trzy...” Brzmi znajomo? 😅 +Opowiem Ci historię, która całkowicie zmieniła moje podejście. W zeszłym tygodniu próbowałem wytłumaczyć mamie, jak korzystać z naszego nowego pilota do smart TV. Złapałem się na tym, że mówię rzeczy typu „Naciśnij czerwony przycisk, ale nie ten duży czerwony, tylko ten mały po lewej... nie, Twojej drugiej lewej... dobra, teraz trzymaj przez dwie sekundy, nie jedną, nie trzy...” Brzmi znajomo? 😅 -To jest właśnie programowanie! To sztuka dawania niezwykle szczegółowych, krok po kroku instrukcji czemuś, co jest bardzo potężne, ale wymaga, by wszystko było dosłownie napisane dokładnie. Tyle że zamiast tłumaczyć to mamie (która może zapytać „który czerwony przycisk?!”), tłumaczysz to komputerowi (który robi dokładnie to, co mu powiesz, nawet jeśli to nie do końca to, co miałeś na myśli). +To jest programowanie! To sztuka dawania niezwykle szczegółowych, krok po kroku instrukcji czemuś, co jest bardzo potężne, ale potrzebuje, żeby wszystko było dokładnie wyjaśnione. Tyle że zamiast tłumaczyć mamie (która może zapytać „który czerwony przycisk?!”), tłumaczysz komputerowi (który po prostu robi dokładnie to, co mu polecisz, nawet jeśli nie do końca o to Ci chodziło). -Oto co mnie oszołomiło, gdy się tego nauczyłem: komputery są w gruncie rzeczy dość proste. Dosłownie rozumieją tylko dwie rzeczy – 1 i 0, co jest w zasadzie "tak" i "nie" albo "włączone" i "wyłączone". To wszystko! Ale tutaj zaczyna się magia – nie musimy mówić w 1 i 0 jak w Matrixie. Wtedy pojawiają się na ratunek **języki programowania**. To jak posiadanie najlepszego tłumacza na świecie, który bierze twoje zwykłe ludzkie myśli i przekłada je na język komputera. +Co mnie zaskoczyło, gdy to odkryłem: komputery są w gruncie rzeczy całkiem proste. One dosłownie rozumieją tylko dwie rzeczy – 1 i 0, co w zasadzie oznacza „tak” i „nie” lub „włączone” i „wyłączone.” To wszystko! Ale teraz zaczyna się magia – nie musimy mówić w 1 i 0 jak w Matrixie. Tutaj na ratunek przychodzą **języki programowania**. Są jak najlepszy na świecie tłumacz, który bierze Twoje zupełnie normalne, ludzkie myśli i przekształca je na język komputera. -I oto co nadal przyprawia mnie o dreszcze każdego ranka, gdy się budzę: dosłownie *wszystko* cyfrowe w twoim życiu zaczęło się od kogoś takiego jak ty, pewnie siedzącego w piżamie z kubkiem kawy, piszącego kod na laptopie. Ten filtr na Instagramie, który sprawia, że wyglądasz perfekcyjnie? Ktoś go zaprogramował. Rekomendacja, która doprowadziła cię do twojej nowej ulubionej piosenki? Algorytm stworzył developer. Aplikacja, która pomaga dzielić rachunki za obiad z przyjaciółmi? Tak, ktoś pomyślał „to jest irytujące, pewnie mógłbym to naprawić” i... zrobił! +I oto, co nadal daje mi dreszcze każdego ranka, gdy się budzę: dosłownie *wszystko* cyfrowe w Twoim życiu zaczęło się od kogoś takiego jak Ty, siedzącego w pidżamie z filiżanką kawy, piszącego kod na laptopie. Ten filtr na Instagramie, który sprawia, że wyglądasz bezbłędnie? Ktoś go zakodował. Rekomendacja, która zaprowadziła Cię do nowej ulubionej piosenki? Programista stworzył ten algorytm. Aplikacja, która pomaga dzielić rachunki za kolację z przyjaciółmi? Tak, ktoś pomyślał „to denerwujące, chyba to naprawię” i... zrobił to! -Kiedy uczysz się programować, nie tylko zdobywasz nową umiejętność – stajesz się częścią niesamowitej społeczności rozwiązywaczy problemów, którzy spędzają dni myśląc „A co jeśli mógłbym zbudować coś, co sprawi, że czyjś dzień będzie choć odrobinę lepszy?” Szczerze, czy jest coś fajniejszego? +Kiedy uczysz się programować, nie zdobywasz tylko nowej umiejętności – stajesz się częścią niesamowitej społeczności rozwiązywaczy problemów, którzy spędzają dni myśląc „A co jeśli mógłbym zbudować coś, co sprawi, że czyjś dzień będzie choć trochę lepszy?” Szczerze, czy jest coś fajniejszego? -✅ **Zabawa Faktami**: Oto coś super ciekawego do sprawdzenia, gdy będziesz miał chwilę – kto był pierwszym na świecie programistą? Dam Ci wskazówkę: może to nie być ta osoba, której się spodziewasz! Historia tej osoby jest absolutnie fascynująca i pokazuje, że programowanie od zawsze było o kreatywnym rozwiązywaniu problemów i myśleniu poza schematem. +✅ **Ciekawostka do sprawdzenia**: Poszukaj sobie w wolnej chwili – kto był pierwszym na świecie programistą? Podpowiem: może nie jest to osoba, którą byś się spodziewał! Historia tej osoby jest absolutnie fascynująca i pokazuje, że programowanie od zawsze było o kreatywnym rozwiązywaniu problemów i myśleniu nieszablonowym. -### 🧠 **Czas na refleksję: Jak się czujesz?** +### 🧠 **Sprawdzenie samopoczucia: Jak się czujesz?** -**Zatrzymaj się na chwilę i pomyśl:** -- Czy teraz idea „dawania instrukcji komputerom” ma dla Ciebie sens? -- Czy potrafisz wymyślić jakąś codzienną czynność, którą chciałbyś zautomatyzować programowaniem? -- Jakie pytania pojawiają się w Twojej głowie o całym tym programowaniu? +**Zatrzymaj się na chwilę i zastanów:** +- Czy teraz rozumiesz, co oznacza „dawanie instrukcji komputerom”? +- Czy potrafisz pomyśleć o jakimś codziennym zadaniu, które chciałbyś zautomatyzować programowaniem? +- Jakie pytania rodzą się w Twojej głowie na temat tego całego programowania? -> **Pamiętaj**: to całkowicie normalne, jeśli niektóre koncepcje wydają się teraz niejasne. Nauka programowania to jak nauka nowego języka – mózg potrzebuje czasu, by zbudować odpowiednie połączenia nerwowe. Radzisz sobie świetnie! +> **Pamiętaj**: To całkiem normalne, jeśli niektóre koncepcje są teraz niejasne. Nauka programowania jest jak nauka nowego języka – potrzeba czasu, by mózg zbudował odpowiednie ścieżki nerwowe. Świetnie Ci idzie! ## Języki programowania są jak różne smaki magii -Dobra, to zabrzmi dziwnie, ale zostań ze mną – języki programowania są jak różne gatunki muzyki. Pomyśl: masz jazz, który jest gładki i improwizowany, rock, który jest mocny i prosty, klasykę, która jest elegancka i uporządkowana, oraz hip-hop, który jest kreatywny i ekspresyjny. Każdy styl ma swój klimat, swoją społeczność fanów i każdy jest idealny na inne nastroje i okazje. +Dobra, to zabrzmi dziwnie, ale zostań ze mną – języki programowania są trochę jak różne rodzaje muzyki. Pomyśl: jest jazz, który jest gładki i improwizowany, rock potężny i bezpośredni, muzyka klasyczna elegancka i uporządkowana oraz hip-hop kreatywny i ekspresyjny. Każdy styl ma swój klimat, swoją społeczność fanów i jest idealny na różne okazje i nastroje. -Języki programowania działają dokładnie tak samo! Nie użyłbyś tego samego języka do zbudowania zabawnej gry mobilnej, którego użyłbyś do przetwarzania ogromnej ilości danych klimatycznych, tak jak nie zagrałbyś death metalu na zajęciach z jogi (no, chyba że w większości zajęć z jogi! 😄). +Języki programowania działają dokładnie tak samo! Nie użyłbyś tego samego języka do budowy zabawnej gry mobilnej, którego użyłbyś do przetwarzania ogromnych ilości danych klimatycznych, tak samo jak nie zagrałbyś death metalu na zajęciach jogi (no, przynajmniej na większości zajęć! 😄). -Ale to, co mnie za każdym razem zachwyca: te języki to jak mieć najcierpliwszego, genialnego tłumacza świata siedzącego tuż obok ciebie. Możesz wyrażać swoje pomysły w sposób naturalny dla twojego ludzkiego mózgu, a on zajmuje się całym tym niesamowicie skomplikowanym procesem tłumaczenia ich na 1 i 0, którymi naprawdę mówią komputery. To jak mieć przyjaciela, który perfekcyjnie zna zarówno „ludzką kreatywność”, jak i „komputerową logikę” – nigdy się nie męczy, nigdy nie potrzebuje przerw na kawę i nigdy nie ocenia, gdy pytasz o to samo dwa razy! +Ale co mnie za każdym razem powala na kolana, to to: te języki są jak najbardziej cierpliwy, genialny tłumacz świata siedzący tuż obok Ciebie. Możesz wyrazić swoje pomysły w sposób naturalny dla ludzkiego mózgu, a one zajmują się skomplikowanym tłumaczeniem na 1 i 0, które komputery naprawdę rozumieją. To jak mieć przyjaciela, który perfekcyjnie zna zarówno „ludzką kreatywność”, jak i „logikę komputera” – nigdy się nie męczy, nie robi przerw na kawę i nigdy nie ocenia, gdy pytasz to samo dwa razy! ### Popularne języki programowania i ich zastosowania ```mermaid mindmap root((Języki Programowania)) - Web Development + Tworzenie Stron WWW JavaScript Magia Frontendu - Interaktywne Strony WWW + Interaktywne Strony TypeScript JavaScript + Typy Aplikacje Korporacyjne - Data & AI + Dane i AI Python Nauka o Danych Uczenie Maszynowe @@ -100,7 +100,7 @@ mindmap R Statystyka Badania - Mobile Apps + Aplikacje Mobilne Java Android Korporacyjne @@ -110,10 +110,10 @@ mindmap Kotlin Nowoczesny Android Wieloplatformowy - Systems & Performance + Systemy i Wydajność C++ Gry - Krytyczne Dla Wydajności + Krytyczne dla Wydajności Rust Bezpieczeństwo Pamięci Programowanie Systemowe @@ -121,41 +121,41 @@ mindmap Usługi w Chmurze Skalowalny Backend ``` -| Język | Do czego najlepszy | Dlaczego jest popularny | -|----------|----------|------------------| -| **JavaScript** | Tworzenie stron, interfejsy użytkownika | Działa w przeglądarkach i napędza interaktywne strony | -| **Python** | Nauka o danych, automatyzacja, AI | Łatwy do nauki i czytania, potężne biblioteki | -| **Java** | Aplikacje korporacyjne, aplikacje Android | Niezależny od platformy, solidny dla dużych systemów | -| **C#** | Aplikacje Windows, tworzenie gier | Silne wsparcie w ekosystemie Microsoft | +| Język | Najlepszy do | Dlaczego jest popularny | +|-------|--------------|------------------------| +| **JavaScript** | Tworzenie stron internetowych, interfejsy użytkownika | Działa w przeglądarkach i napędza interaktywne strony | +| **Python** | Nauka o danych, automatyzacja, sztuczna inteligencja | Łatwy do czytania i nauki, potężne biblioteki | +| **Java** | Aplikacje korporacyjne, aplikacje na Androida | Niezależny od platformy, solidny dla dużych systemów | +| **C#** | Aplikacje na Windows, tworzenie gier | Silne wsparcie ekosystemu Microsoft | | **Go** | Usługi w chmurze, systemy backendowe | Szybki, prosty, zaprojektowany dla nowoczesnych komputerów | -### Języki wysokiego vs niskiego poziomu +### Języki wysokiego poziomu vs niskiego poziomu -Dobra, to był szczerze koncept, który mnie złamał, gdy zaczynałem się uczyć, więc podzielę się analogią, która w końcu mi to wyjaśniła – mam nadzieję, że Tobie też pomoże! +Ok, to chyba była koncepcja, która złamała mój mózg kiedy zaczynałem, więc podzielę się analogią, która w końcu pozwoliła mi to zrozumieć – i mam nadzieję, że Tobie też pomoże! -Wyobraź sobie, że odwiedzasz kraj, w którym nie mówisz w lokalnym języku i bardzo musisz znaleźć najbliższą toaletę (każdy to zna, prawda? 😅): +Wyobraź sobie, że odwiedzasz kraj, gdzie nie znasz języka i desperacko musisz znaleźć najbliższą toaletę (wszyscy to znamy, prawda? 😅): -- **Programowanie niskiego poziomu** to jak nauka lokalnego dialektu tak dobrze, że możesz rozmawiać z babcią sprzedającą owoce na rogu, używając odniesień kulturowych, lokalnego slangu i żartów zrozumiałych tylko dla osób wychowanych tam. Super imponujące i niezwykle efektywne... jeśli akurat jesteś biegły! Ale raczej przytłaczające, gdy próbujesz tylko znaleźć toaletę. +- **Programowanie niskiego poziomu** to jak nauka lokalnego dialektu tak dobrze, że możesz rozmawiać z babcią sprzedającą owoce na rogu, używając odniesień kulturowych, lokalnego slangu i powiedzonek, które zna tylko ktoś, kto tam dorastał. Super imponujące i bardzo efektywne... jeśli akurat mówisz płynnie! Ale dość przytłaczające, gdy po prostu chcesz znaleźć toaletę. -- **Programowanie wysokiego poziomu** to jak mieć niesamowitego lokalnego przyjaciela, który cię rozumie. Możesz powiedzieć „Naprawdę muszę znaleźć toaletę” po angielsku, a on załatwi całą tłumaczą i poda wskazówki, które mają sens dla Twojego mózgu. +- **Programowanie wysokiego poziomu** to jak mieć tego niesamowitego lokalnego przyjaciela, który Cię rozumie. Możesz powiedzieć „Naprawdę potrzebuję znaleźć łazienkę” prosto po angielsku, a on zajmie się tłumaczeniem kulturowym i poda Ci wskazówki, które Twój nie-miejscowy mózg doskonale zrozumie. W programowaniu: -- **Języki niskiego poziomu** (np. asembler czy C) pozwalają na bardzo szczegółowe rozmowy ze sprzętem komputera, ale musisz myśleć jak maszyna, co... powiedzmy, wymaga dużej zmiany mentalnej! -- **Języki wysokiego poziomu** (np. JavaScript, Python czy C#) pozwalają myśleć jak człowiek, podczas gdy one zajmują się całą maszynową mową w tle. A do tego mają te niesamowicie gościnne społeczności pełne ludzi, którzy pamiętają, jak to jest być początkującym i naprawdę chcą pomóc! +- **Języki niskiego poziomu** (jak Assembly czy C) pozwalają na bardzo szczegółowe rozmowy z faktycznym sprzętem komputera, ale trzeba myśleć jak maszyna, co... powiedzmy, wymaga sporej zmiany sposobu myślenia! +- **Języki wysokiego poziomu** (jak JavaScript, Python czy C#) pozwalają myśleć jak człowiek, podczas gdy one zajmują się maszynowym językiem w tle. Dodatkowo mają niesamowicie przyjazne społeczności ludzi, którzy pamiętają, jak to jest być nowym i naprawdę chcą pomóc! -Zgadnij, które polecam na start? 😉 Języki wysokiego poziomu to jak kółka treningowe, których nigdy nie chcesz ściągać, bo cały proces jest o wiele przyjemniejszy! +Zgadnij, jakie polecę na start? 😉 Języki wysokiego poziomu są jak kółka treningowe, których tak naprawdę nigdy nie chcesz zdjąć, bo sprawiają, że nauka jest dużo przyjemniejsza! ```mermaid flowchart TB A["👤 Myśl ludzka:
'Chcę obliczyć liczby Fibonacciego'"] --> B{Wybierz poziom języka} - B -->|High-Level| C["🌟 JavaScript/Python
Łatwe do czytania i pisania"] - B -->|Low-Level| D["⚙️ Assembly/C
Bezpośrednia kontrola sprzętu"] + B -->|Wysoki poziom| C["🌟 JavaScript/Python
Łatwe do czytania i pisania"] + B -->|Niski poziom| D["⚙️ Assembler/C
Bezpośrednia kontrola sprzętu"] C --> E["📝 Napisz: fibonacci(10)"] D --> F["📝 Napisz: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Zrozumienie komputera:
Tłumacz radzi sobie z złożonością"] + E --> G["🤖 Zrozumienie komputera:
Tłumacz radzi sobie ze złożonością"] F --> G G --> H["💻 Ten sam wynik:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Pokażę Ci, dlaczego języki wysokiego poziomu są o wiele przyjaźniejsze +### Pokażę Ci, dlaczego języki wysokiego poziomu są dużo przyjaźniejsze -Dobra, zaraz pokażę Ci coś, co idealnie pokazuje, dlaczego zakochałem się w językach wysokiego poziomu, ale najpierw musisz mi obiecać jedną rzecz. Gdy zobaczysz pierwszy przykład kodu, nie panikuj! Ma wyglądać na przerażający. Dokładnie o to mi chodzi! +Dobra, pokażę Ci coś, co doskonale pokazuje, dlaczego zakochałem się w językach wysokiego poziomu, ale najpierw musisz mi coś obiecać. Gdy zobaczysz pierwszy przykład kodu, nie panikuj! Ma wyglądać na onieśmielający. Dokładnie o to chodzi! -Zobaczymy dokładnie to samo zadanie napisane w dwóch zupełnie innych stylach. Oba tworzą tzw. ciąg Fibonacciego – to piękny wzór matematyczny, w którym każda liczba jest sumą dwóch poprzednich: 0, 1, 1, 2, 3, 5, 8, 13... (Ciekawostka: ten wzór występuje dosłownie wszędzie w przyrodzie – spiralach nasion słonecznika, wzorach szyszek, nawet tworzeniu się galaktyk!) +Zobaczymy to samo zadanie napisane w dwóch zupełnie różnych stylach. Oba tworzą tzw. ciąg Fibonacciego – to piękny matematyczny wzór, gdzie każda liczba jest sumą dwóch poprzednich: 0, 1, 1, 2, 3, 5, 8, 13... (Ciekawostka: można tę sekwencję znaleźć dosłownie wszędzie w naturze – spirale nasion słonecznika, układy szyszek, nawet sposób tworzenia się galaktyk!) -Gotowy zobaczyć różnicę? Zaczynamy! +Gotowy zobaczyć różnicę? Zaczynajmy! -**Język wysokiego poziomu (JavaScript) – przyjazny dla ludzi:** +**Język wysokiego poziomu (JavaScript) – Przyjazny człowiekowi:** ```javascript -// Krok 1: Podstawowa konfiguracja Fibonnaciego +// Krok 1: Podstawowa konfiguracja Fibonacciego const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Co robi ten kod:** -- **Deklaruje** stałą, która określa, ile liczb Fibonacciego chcemy wygenerować -- **Inicjalizuje** dwie zmienne, które śledzą aktualną i następną liczbę w sekwencji -- **Ustawia** wartości startowe (0 i 1), które definiują wzór Fibonacciego -- **Wyświetla** nagłówek identyfikujący nasz wynik +**Co ten kod robi:** +- **Deklaruje** stałą określającą, ile liczb Fibonacciego chcemy wygenerować +- **Inicjalizuje** dwie zmienne do śledzenia bieżącej i następnej liczby w ciągu +- **Ustawia** wartości początkowe (0 i 1) definiujące wzór Fibonacciego +- **Wyświetla** nagłówek identyfikujący nasze wyjście ```javascript // Krok 2: Wygeneruj sekwencję za pomocą pętli for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Oblicz następny numer w sekwencji + // Oblicz kolejny numer w sekwencji const sum = current + next; current = next; next = sum; } ``` -**Rozbicie na części:** -- **Pętla** przechodzi przez każdą pozycję w naszej sekwencji za pomocą pętli `for` +**Rozbijając, co się tutaj dzieje:** +- **Pętla** przechodzi przez każdą pozycję w ciągu za pomocą pętli `for` - **Wyświetla** każdą liczbę z jej pozycją, używając formatowania szablonowego -- **Oblicza** następną liczbę Fibonacciego, dodając aktualną i następną wartość -- **Aktualizuje** zmienne śledzące, by przejść do następnej iteracji +- **Oblicza** następną liczbę Fibonacciego przez dodanie bieżącej i następnej wartości +- **Aktualizuje** zmienne śledzące do przejścia do następnej iteracji ```javascript -// Krok 3: Nowoczesne podejście funkcyjne +// Krok 3: Nowoczesne funkcjonalne podejście const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**W powyższym:** -- **Utworzyliśmy** wielokrotnego użytku funkcję, korzystając z nowoczesnej składni funkcji strzałkowej -- **Zbudowaliśmy** tablicę do przechowywania całej sekwencji zamiast wyświetlania po kolei -- **Użyliśmy** indeksowania tablicy, aby obliczyć każdą nową liczbę na podstawie poprzednich -- **Zwróciliśmy** pełną sekwencję, by móc ją elastycznie wykorzystywać gdzie indziej w programie +**W powyższym stworzyliśmy:** +- **Funkcję** wielokrotnego użytku z użyciem nowoczesnej składni funkcji strzałkowej +- **Tablicę**, by przechować cały ciąg zamiast wyświetlać liczby pojedynczo +- **Indeksowanie tablicy**, by obliczyć każdą nową liczbę na podstawie poprzednich wartości +- **Zwrócenie** pełnego ciągu dla elastycznego użycia w innych częściach programu -**Język niskiego poziomu (ARM Assembly) – przyjazny dla komputera:** +**Język niskiego poziomu (ARM Assembly) – Przyjazny komputerowi:** ```assembly area ascen,code,readonly @@ -257,28 +257,28 @@ back add r0,r1 end ``` -Zauważ, jak wersja JavaScript czyta się prawie jak instrukcje po angielsku, podczas gdy wersja Assembly używa zakodowanych poleceń, które bezpośrednio sterują procesorem komputera. Obie wykonują dokładnie to samo zadanie, ale język wysokiego poziomu jest znacznie łatwiejszy do zrozumienia, pisania i utrzymania przez ludzi. +Zauważ, że wersja JavaScript czyta się prawie jak instrukcje w języku angielskim, podczas gdy wersja Assembly używa kryptograficznych poleceń, które bezpośrednio sterują procesorem komputera. Oba wykonują dokładnie to samo zadanie, ale język wysokiego poziomu jest dużo łatwiejszy dla ludzi do zrozumienia, pisania i utrzymania. **Kluczowe różnice, które zauważysz:** -- **Czytelność**: JavaScript używa opisowych nazw jak `fibonacciCount`, natomiast Assembly używa tajemniczych etykiet jak `r0`, `r1` -- **Komentarze**: Języki wysokiego poziomu zachęcają do dodawania wyjaśniających komentarzy, które sprawiają, że kod jest samodokumentujący się -- **Struktura**: Logiczny przepływ JavaScript odpowiada sposobowi myślenia ludzi o problemach krok po kroku -- **Konserwacja**: Aktualizacja wersji JavaScript dla różnych wymagań jest prosta i jasna +- **Czytelność**: JavaScript używa opisowych nazw, takich jak `fibonacciCount`, podczas gdy Assembly korzysta z krypticznych etykiet typu `r0`, `r1` +- **Komentarze**: Języki wysokiego poziomu zachęcają do pisania wyjaśniających komentarzy, które sprawiają, że kod jest samodokumentujący się +- **Struktura**: Logiczny przepływ w JavaScript odpowiada temu, jak ludzie myślą o problemach krok po kroku +- **Konserwacja**: Aktualizacja wersji JavaScript dla różnych wymagań jest prosta i klarowna -✅ **O ciągu Fibonacciego**: Ten absolutnie przepiękny wzór liczbowy (gdzie każda liczba jest sumą dwóch poprzednich: 0, 1, 1, 2, 3, 5, 8...) pojawia się dosłownie *wszędzie* w przyrodzie! Znajdziesz go w spiralach słoneczników, wzorach na szyszkach, w sposobie, w jaki krzywią się muszle nautilusa, a nawet w tym, jak rosną gałęzie drzew. To naprawdę niesamowite, jak matematyka i kod pomagają nam rozumieć i odtwarzać wzory, które natura wykorzystuje do tworzenia piękna! +✅ **O ciągu Fibonacciego**: Ten absolutnie przepiękny wzór liczbowy (gdzie każda liczba równa się sumie dwóch poprzednich: 0, 1, 1, 2, 3, 5, 8...) pojawia się dosłownie *wszędzie* w przyrodzie! Znajdziesz go w spiralach słoneczników, wzorach szyszek, sposobie krzywizny muszli nautilusa, a nawet w tym, jak rosną gałęzie drzew. To naprawdę oszałamiające, jak matematyka i kod mogą pomóc nam zrozumieć i odtworzyć wzory, których natura używa do tworzenia piękna! -## Elementy Budulcowe, Które Tworzą Magię +## Klocki, które tworzą magię -Dobra, skoro już widziałeś, jak wyglądają języki programowania w akcji, rozłóżmy na części pierwsze podstawowe elementy, które tworzą dosłownie każdy kiedykolwiek napisany program. Pomyśl o nich jak o niezbędnych składnikach w twoim ulubionym przepisie – gdy zrozumiesz, do czego służy każdy z nich, będziesz mógł czytać i pisać kod w praktycznie każdym języku! +Dobra, skoro już widziałeś, jak wyglądają języki programowania w praktyce, rozłóżmy na czynniki pierwsze podstawowe elementy, które tworzą dosłownie każdy napisany program. Pomyśl o nich jak o niezbędnych składnikach twojego ulubionego przepisu – kiedy zrozumiesz, do czego służy każdy z nich, będziesz w stanie czytać i pisać kod w praktycznie każdym języku! -To trochę jak nauka gramatyki programowania. Pamiętasz, jak w szkole uczyłeś się o rzeczownikach, czasownikach i jak budować zdania? Programowanie ma własną wersję gramatyki i szczerze mówiąc, jest ona dużo bardziej logiczna i wyrozumiała niż kiedykolwiek była angielska gramatyka! 😄 +To trochę jak nauka gramatyki programowania. Pamiętasz, jak w szkole uczyłeś się o rzeczownikach, czasownikach i jak układać zdania? Programowanie ma swoją własną wersję gramatyki i szczerze mówiąc, jest ona o wiele bardziej logiczna i wyrozumiała niż gramatyka angielskiego! 😄 -### Instrukcje: Krok po Kroku +### Instrukcje: Krok po kroku -Zacznijmy od **instrukcji** – to jak pojedyncze zdania w rozmowie z twoim komputerem. Każda instrukcja mówi komputerowi, by wykonał jedną konkretną rzecz, trochę jak dawanie wskazówek: „Skręć tutaj w lewo”, „Zatrzymaj się na czerwonym świetle”, „Zaparkuj na tym miejscu”. +Zacznijmy od **instrukcji** – to jak pojedyncze zdania w rozmowie z twoim komputerem. Każda instrukcja mówi komputerowi, żeby wykonał jedną konkretną czynność, trochę jak podawanie wskazówek: „Skręć w lewo tutaj”, „Zatrzymaj się na czerwonym świetle”, „Zaparkuj w tym miejscu”. -To, co kocham w instrukcjach, to to, jak zazwyczaj są czytelne. Spójrz na to: +To, co kocham w instrukcjach, to jak są zazwyczaj czytelne. Spójrz na to: ```javascript // Podstawowe instrukcje wykonujące pojedyncze akcje @@ -287,30 +287,30 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**Oto, co robi ten kod:** -- **Deklaruje** stałą zmienną do przechowywania nazwy użytkownika -- **Wyświetla** wiadomość powitalną w konsoli -- **Oblicza** i przechowuje wynik operacji matematycznej +**Oto co robi ten kod:** +- **Deklaruje** stałą zmienną do przechowywania imienia użytkownika +- **Wyświetla** powitanie w konsoli +- **Oblicza** i przechowuje wynik działania matematycznego ```javascript -// Instrukcje, które wchodzą w interakcję ze stronami internetowymi +// Instrukcje współdziałające ze stronami internetowymi document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` **Krok po kroku, oto co się dzieje:** -- **Modyfikuje** tytuł strony, który pojawia się na karcie przeglądarki -- **Zmienia** kolor tła całego ciała strony +- **Modyfikuje** tytuł strony wyświetlany na karcie przeglądarki +- **Zmienia** kolor tła całej strony -### Zmienne: System Pamięci Twojego Programu +### Zmienne: System pamięci twojego programu -Dobra, **zmienne** to naprawdę jeden z moich ulubionych konceptów, bo są tak bardzo podobne do rzeczy, których używasz codziennie! +Dobra, **zmienne** to naprawdę jeden z moich ulubionych konceptów do nauczania, ponieważ są bardzo podobne do rzeczy, których używasz codziennie! -Pomyśl przez chwilę o liście kontaktów w telefonie. Nie zapamiętujesz wszystkich numerów – zamiast tego zapisujesz „Mama”, „Najlepszy przyjaciel” czy „Pizzeria, która dowozi do 2 w nocy” i pozwalasz telefonowi pamiętać same numery. Zmienne działają dokładnie tak samo! To jak oznakowane pojemniki, w których twój program może przechowywać informacje i potem je odczytywać za pomocą nazwy, która ma sens. +Pomyśl przez chwilę o liście kontaktów w telefonie. Nie zapamiętujesz numeru każdej osoby – zamiast tego zapisujesz „Mama”, „Najlepszy przyjaciel” czy „Pizzeria, która działa do 2 w nocy” i pozwalasz telefonowi pamiętać faktyczne numery. Zmienne działają dokładnie tak samo! Są jak oznaczone pojemniki, gdzie twój program może przechowywać informacje i później je odzyskiwać za pomocą nazwy, która faktycznie ma sens. -Co jest naprawdę fajne: zmienne mogą się zmieniać podczas działania programu (stąd nazwa „zmienna” – widzisz, co tu zrobili?). Tak jak możesz zaktualizować kontakt do pizzerii, gdy znajdziesz lepszą, zmienne mogą być aktualizowane w miarę zdobywania nowych informacji lub zmian sytuacji! +Oto co jest naprawdę fajne: zmienne mogą się zmieniać podczas działania programu (stąd nazwa „zmienna” – widzisz, co tu zrobili?). Tak jak możesz aktualizować kontakt do pizzerii, gdy znajdziesz lepsze miejsce, zmienne mogą być aktualizowane, gdy program poznaje nowe informacje lub gdy sytuacja się zmienia! -Pokażę ci, jak to może być przepięknie proste: +Pokażę ci, jak to może być pięknie proste: ```javascript // Krok 1: Tworzenie podstawowych zmiennych @@ -321,10 +321,10 @@ let isRaining = false; ``` **Zrozumienie tych koncepcji:** -- **Przechowuj** wartości niezmienne w zmiennych `const` (np. nazwa strony) -- **Używaj** `let` dla wartości, które mogą się zmieniać w trakcie działania programu -- **Przypisuj** różne typy danych: łańcuchy znaków (tekst), liczby i boolowskie (true/false) -- **Wybieraj** opisowe nazwy tłumaczące, co przechowuje każda zmienna +- **Przechowywanie** niezmiennych wartości w zmiennych `const` (np. nazwa strony) +- **Używanie** `let` dla wartości, które mogą się zmieniać podczas działania programu +- **Przypisywanie** różnych typów danych: stringów (tekstów), liczb oraz booleanów (true/false) +- **Wybieranie** opisowych nazw, które wyjaśniają, co zawiera każda zmienna ```javascript // Krok 2: Praca z obiektami w celu grupowania powiązanych danych @@ -335,26 +335,26 @@ const weatherData = { }; ``` -**W powyższym:** -- **Utworzyliśmy** obiekt do grupowania powiązanych informacji o pogodzie -- **Zorganizowaliśmy** wiele danych pod jedną nazwą zmiennej -- **Użyliśmy** par klucz-wartość do jasnego oznaczenia każdej informacji +**W powyższym przykładzie:** +- **Utworzyliśmy** obiekt do grupowania powiązanych informacji pogodowych +- **Zorganizowaliśmy** wiele kawałków danych pod jedną nazwą zmiennej +- **Użyliśmy** par klucz-wartość, aby wyraźnie oznaczyć każdą informację ```javascript // Krok 3: Używanie i aktualizowanie zmiennych console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Aktualizowanie zmiennych, które mogą się zmieniać +// Aktualizowanie zmiennych podlegających zmianom currentWeather = "cloudy"; temperature = 68; ``` **Zrozummy każdą część:** -- **Wyświetlaj** informacje używając literałów szablonowych z składnią `${}` +- **Wyświetlamy** informacje używając literałów szablonowych z składnią `${}` - **Dostęp** do właściwości obiektu za pomocą notacji kropkowej (`weatherData.windSpeed`) -- **Aktualizuj** zmienne deklarowane przez `let`, by odzwierciedlić zmieniające się warunki -- **Łącz** wiele zmiennych, by tworzyć znaczące komunikaty +- **Aktualizacja** zmiennych zadeklarowanych przy użyciu `let` w celu odzwierciedlenia zmieniających się warunków +- **Łączenie** wielu zmiennych, aby tworzyć znaczące komunikaty ```javascript // Krok 4: Nowoczesne destrukturyzowanie dla czyściejszego kodu @@ -362,20 +362,20 @@ const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Co musisz wiedzieć:** -- **Wyodrębniaj** konkretne właściwości z obiektów za pomocą destrukturyzacji -- **Twórz** nowe zmienne automatycznie o tych samo nazwach, co klucze obiektu -- **Uprość** kod, unikając powtarzalnej notacji kropkowej +**Co trzeba wiedzieć:** +- **Wyodrębniać** konkretne właściwości obiektów za pomocą destrukturyzacji +- **Tworzyć** nowe zmienne automatycznie o tych samych nazwach co klucze obiektu +- **Uprościć** kod, unikając powtarzającej się notacji kropkowej -### Sterowanie Przepływem: Nauka Programu Myślenia +### Kierowanie przepływem: Uczymy program myśleć -Dobra, tutaj programowanie staje się absolutnie zdumiewające! **Sterowanie przepływem** to zasadniczo uczenie programu podejmowania mądrych decyzji, dokładnie tak jak robisz to codziennie, nawet o tym nie myśląc. +Okej, tutaj programowanie staje się naprawdę niesamowite! **Kierowanie przepływem** to zasadniczo nauczenie twojego programu, jak podejmować mądre decyzje, dokładnie tak jak robisz to na co dzień, często nawet o tym nie myśląc. -Wyobraź sobie: dziś rano prawdopodobnie przeszedłeś przez coś w stylu „Jeśli pada deszcz, wezmę parasol. Jeśli jest zimno, założę kurtkę. Jeśli się spóźniam, pominę śniadanie i kupię kawę po drodze.” Twój mózg naturalnie stosuje tę logikę jeśli-wtedy dziesiątki razy każdego dnia! +Wyobraź sobie, że dziś rano prawdopodobnie przeżyłeś coś w stylu „Jeśli pada, wezmę parasol. Jeśli jest zimno, założę kurtkę. Jeśli się spóźniam, pomijam śniadanie i biorę kawę w drodze.” Twój mózg naturalnie stosuje tę logikę if-then dziesiątki razy dziennie! -To właśnie sprawia, że programy wydają się inteligentne i żywe, zamiast po prostu podążać za nudnym, przewidywalnym scenariuszem. Mogą spojrzeć na sytuację, ocenić, co się dzieje i odpowiednio zareagować. To jak nadanie programowi mózgu, który potrafi się dostosować i dokonywać wyborów! +To właśnie sprawia, że programy wydają się inteligentne i żywe, a nie tylko wykonujące nudny, przewidywalny skrypt. One faktycznie patrzą na sytuację, oceniają, co się dzieje i odpowiednio reagują. To tak, jakby dać programowi mózg, który potrafi się dopasować i podejmować decyzje! -Chcesz zobaczyć, jak to pięknie działa? Pokażę ci: +Chcesz zobaczyć, jak pięknie to działa? Pokażę ci: ```javascript // Krok 1: Podstawowa logika warunkowa @@ -389,14 +389,14 @@ if (userAge >= 18) { } ``` -**Oto, co robi ten kod:** +**Co robi ten kod:** - **Sprawdza**, czy wiek użytkownika spełnia wymóg głosowania - **Wykonuje** różne bloki kodu w zależności od wyniku warunku -- **Oblicza** i wyświetla, ile zostało do uzyskania prawa do głosowania, jeśli mniej niż 18 lat -- **Zapewnia** konkretne, pomocne komunikaty dla każdej sytuacji +- **Oblicza** i wyświetla, jak długo brakuje do możliwości głosowania, jeśli użytkownik ma mniej niż 18 lat +- **Daje** konkretne, pomocne informacje w każdej sytuacji ```javascript -// Krok 2: Wiele warunków z operatorami logicznymi +// Krok 2: Wielokrotne warunki z operatorami logicznymi const userAge = 17; const hasPermission = true; @@ -409,22 +409,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**Rozkład tego, co się tutaj dzieje:** -- **Łączy** kilka warunków za pomocą operatora `&&` (i) -- **Tworzy** hierarchię warunków stosując `else if` dla wielu scenariuszy -- **Obsługuje** wszystkie możliwe przypadki kończąc na `else` -- **Daje** jasne, praktyczne wskazówki dla każdej różnej sytuacji +**Analiza tego, co się dzieje:** +- **Łączy** wiele warunków za pomocą operatora `&&` (i) +- **Tworzy** hierarchię warunków za pomocą `else if`, by obsłużyć wiele scenariuszy +- **Obsługuje** wszystkie możliwe przypadki za pomocą końcowego `else` +- **Daje** jasne i konkretne informacje dla każdej sytuacji ```javascript -// Krok 3: Zwięzły warunek za pomocą operatora trójargumentowego +// Krok 3: Zwięzły warunek z użyciem operatora trójargumentowego const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Co trzeba zapamiętać:** -- **Używaj** operatora warunkowego (`? :`) dla prostych warunków z dwoma opcjami -- **Najpierw** napisz warunek, potem `?`, następnie wynik, gdy prawda, potem `:`, a potem wynik, gdy fałsz -- **Stosuj** ten wzorzec, gdy musisz przypisać wartości warunkowo +**Co musisz zapamiętać:** +- **Używaj** operatora trójargumentowego (`? :`) do prostych warunków dwuwartościowych +- **Napisz** najpierw warunek, potem `?`, następnie wynik prawdy, dalej `:`, a na końcu wynik fałszu +- **Stosuj** ten wzorzec, gdy chcesz przypisać wartości na podstawie warunków ```javascript // Krok 4: Obsługa wielu specyficznych przypadków @@ -447,54 +447,54 @@ switch (dayOfWeek) { } ``` -**Ten kod realizuje:** -- **Porównuje** wartość zmiennej z wieloma konkretnymi przypadkami -- **Grupuje** podobne przypadki (dni powszednie vs. weekendy) -- **Wykonuje** odpowiedni blok kodu po znalezieniu dopasowania -- **Zawiera** przypadek `default` na nieoczekiwane wartości -- **Używa** `break` by zapobiec kontynuacji do następnego przypadku +**Ten kod robi następujące rzeczy:** +- **Dopasowuje** wartość zmiennej do wielu konkretnych przypadków +- **Grupuje** podobne przypadki razem (dni robocze kontra weekendy) +- **Wykonuje** właściwy blok kodu, gdy znajdzie dopasowanie +- **Zawiera** przypadek `default` do obsługi nieoczekiwanych wartości +- **Używa** instrukcji `break` by zapobiec kontynuacji do następnego przypadku -> 💡 **Analogicznie w świecie rzeczywistym**: Pomyśl o sterowaniu przepływem jak o najbardziej cierpliwym GPS na świecie, który daje ci wskazówki. Może powiedzieć „Jeśli jest korek na Main Street, to jedź autostradą. Jeśli budowa blokuje autostradę, spróbuj trasy widokowej.” Programy używają dokładnie tego samego rodzaju logiki warunkowej, by inteligentnie reagować na różne sytuacje i zawsze dawać użytkownikom najlepsze możliwe doświadczenie. +> 💡 **Analogia z życia codziennego**: Pomyśl o kierowaniu przepływem jak o najcierpliwszym GPS na świecie, który podaje ci wskazówki. Może powiedzieć „Jeśli na Main Street jest korek, jedź autostradą. Jeśli budowa blokuje autostradę, spróbuj trasy widokowej.” Programy stosują dokładnie taką samą logiczną konstrukcję warunkową, by inteligentnie reagować na różne sytuacje i zawsze zapewniać użytkownikom najlepsze doświadczenie. -### 🎯 **Sprawdzenie wiedzy: Opanowanie podstaw** +### 🎯 **Sprawdzenie pojęć: Mistrzostwo w klockach budulcowych** -**Zobaczmy, jak radzisz sobie z podstawami:** +**Zobaczmy, jak sobie radzisz z podstawami:** - Czy potrafisz własnymi słowami wyjaśnić różnicę między zmienną a instrukcją? -- Pomyśl o sytuacji z życia, w której użyłbyś decyzji jeśli-wtedy (jak w naszym przykładzie z głosowaniem) -- Co w logice programowania najbardziej cię zaskoczyło? +- Pomyśl o realnym scenariuszu, gdzie użyłbyś decyzji typu if-then (jak w naszym przykładzie o głosowaniu) +- Co z logiki programowania najbardziej cię zaskoczyło? **Szybki zastrzyk pewności siebie:** ```mermaid flowchart LR - A["📝 Instrukcje
(Polecenia)"] --> B["📦 Zmienne
(Pamięć)"] --> C["🔀 Sterowanie
(Decyzje)"] --> D["🎉 Działający Program!"] + A["📝 Instrukcje
(Polecenia)"] --> B["📦 Zmienne
(Pamięć)"] --> C["🔀 Sterowanie przepływem
(Decyzje)"] --> D["🎉 Działający program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Co dalej**: Będziemy mieli absolutną frajdę, zagłębiając się głębiej w te koncepcje podczas naszej wspólnej niesamowitej podróży! Teraz skup się na ekscytacji wszystkimi niesamowitymi możliwościami, które masz przed sobą. Konkretne umiejętności i techniki przyjdą naturalnie podczas wspólnej praktyki – obiecuję, że to będzie o wiele fajniejsze niż się spodziewasz! +✅ **Co będzie dalej**: Będziemy się świetnie bawić, zagłębiając się w te pojęcia, gdy będziemy kontynuować tę niesamowitą podróż razem! Teraz po prostu skup się na podekscytowaniu wszystkimi niesamowitymi możliwościami, które masz przed sobą. Konkretne umiejętności i techniki w naturalny sposób utrwalą się podczas wspólnych ćwiczeń – obiecuję, że to będzie dużo bardziej zabawne, niż się spodziewasz! -## Narzędzia Zawodu +## Narzędzia pracy -Dobra, to jest właśnie moment, gdy tak się ekscytuję, że ledwo mogę się powstrzymać! 🚀 Zaraz porozmawiamy o niesamowitych narzędziach, które sprawią, że poczujesz się, jakby ktoś właśnie podał ci klucze do cyfrowego statku kosmicznego. +Dobra, to jest moment, w którym naprawdę się ekscytuję i ledwie mogę się powstrzymać! 🚀 Zaraz opowiem o niesamowitych narzędziach, które sprawią, że poczujesz się, jakbyś właśnie dostał klucze do cyfrowego statku kosmicznego. -Wiesz, jak szef kuchni ma te idealnie wyważone noże, które są jak przedłużenie jego rąk? Albo jak muzyk ma tę jedną gitarę, która zdaje się śpiewać, gdy tylko jej dotknie? No więc my, programiści, mamy własną wersję tych magicznych narzędzi, i oto coś, co totalnie powali cię na kolana – większość z nich jest całkowicie darmowa! +Wiesz, jak szef kuchni ma idealnie wyważone noże, które czują się jak przedłużenia jego rąk? Albo jak muzyk ma tę jedną gitarę, która wydaje się śpiewać w chwili, gdy ją dotyka? Cóż, programiści mają swoją wersję takich magicznych narzędzi i to, co totalnie cię zaskoczy – większość z nich jest całkowicie darmowa! -Praktycznie podskakuję na krześle z radości, myśląc o tym, że mogę się nimi z tobą podzielić, bo zupełnie zrewolucjonizowały sposób, w jaki tworzymy oprogramowanie. Mówimy o asystentach kodowania napędzanych przez AI, którzy mogą pomagać pisać kod (nie żartuję!), o środowiskach w chmurze, gdzie możesz budować całe aplikacje dosłownie z każdego miejsca, gdzie jest Wi-Fi, i o narzędziach do debugowania tak zaawansowanych, że to jak mieć rentgen dla swoich programów. +Dosłownie podskakuję na krześle, myśląc o tym, że mogę się tym z tobą podzielić, ponieważ zupełnie zrewolucjonizowały sposób, w jaki tworzymy oprogramowanie. Mówimy o asystentach kodowania wspieranych przez AI, które mogą pomóc pisać twój kod (nie żartuję!), środowiskach chmurowych, gdzie możesz budować całe aplikacje dosłownie z dowolnego miejsca z dostępem do Wi-Fi, oraz narzędziach do debugowania tak zaawansowanych, że są jak posiadanie rentgenowskiego wzroku do twoich programów. -I teraz część, która nadal daje mi dreszcze: to nie są „narzędzia dla początkujących”, z których się wyrastasz. To te same profesjonalne narzędzia, których używają deweloperzy w Google, Netflix i tym indie studiu aplikacji, które kochasz, właśnie w tej chwili. Będziesz się czuł jak prawdziwy profesjonalista, używając ich! +I jeszcze jedna rzecz, która ciągle mnie imponuje: to nie są „narzędzia dla początkujących”, które szybko wyrastasz. To dokładnie te same profesjonalne narzędzia, których używają programiści w Google, Netflixie i tym indie studio aplikacji, które kochasz, właśnie w tym momencie. Pocujesz się jak prawdziwy profesjonalista, korzystając z nich! ```mermaid graph TD A["💡 Twój Pomysł"] --> B["⌨️ Edytor Kodów
(VS Code)"] - B --> C["🌐 Narzędzia Deweloperskie w Przeglądarce
(Testowanie i Debugowanie)"] + B --> C["🌐 Narzędzia DevTools w Przeglądarce
(Testowanie i Debugowanie)"] C --> D["⚡ Wiersz Poleceń
(Automatyzacja i Narzędzia)"] - D --> E["📚 Dokumentacja
(Nauka i Referencje)"] - E --> F["🚀 Niesamowita Aplikacja Webowa!"] + D --> E["📚 Dokumentacja
(Nauka i Odwołania)"] + E --> F["🚀 Niesamowita Aplikacja WWW!"] B -.-> G["🤖 Asystent AI
(GitHub Copilot)"] - C -.-> H["📱 Testowanie na Urządzeniach
(Responsywny Design)"] + C -.-> H["📱 Testowanie Urządzeń
(Responsywny Design)"] D -.-> I["📦 Menedżery Pakietów
(npm, yarn)"] E -.-> J["👥 Społeczność
(Stack Overflow)"] @@ -505,96 +505,96 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Edytory kodu i IDE: Twoi Nowi Cyfrowi Przyjaciele +### Edytory kodu i IDE: Twoi nowi cyfrowi najlepsi przyjaciele -Porozmawiajmy o edytorach kodu – to naprawdę stanie się twoim nowym ulubionym miejscem, gdzie będziesz spędzać większość czasu, tworząc i dopieszczając swoje cyfrowe dzieła. +Porozmawiajmy o edytorach kodu – to na poważnie miejsca, które wkrótce staną się twoimi ulubionymi! Pomyśl o nich jak o twoim osobistym sanktuarium kodowania, gdzie spędzisz większość czasu tworząc i udoskonalając swoje cyfrowe dzieła. -Ale to, co jest absolutnie magiczne w nowoczesnych edytorach, to nie są tylko wymyślne edytory tekstu. To jak mieć najbardziej błyskotliwego, wspierającego mentora kodowania dosłownie obok siebie 24/7. Łapią twoje literówki zanim je zauważysz, sugerują ulepszenia, które sprawiają, że wyglądasz na geniusza, pomagają zrozumieć, co robi każdy fragment kodu, a niektóre potrafią nawet przewidzieć, co zaraz napiszesz i zaoferować dokończenie twoich myśli! +Ale tu jest coś absolutnie magicznego w nowoczesnych edytorach: to nie są zwykłe edytory tekstu. To tak, jakby mieć obok siebie 24/7 najbystrzejszego i najbardziej wspierającego mentora kodowania. Wyłapują literówki zanim je zauważysz, sugerują ulepszenia sprawiające, że wyglądasz na geniusza, pomagają zrozumieć, co robi każdy fragment kodu, a niektóre z nich nawet przewidują, co chcesz napisać i proponują dokończenie twoich myśli! -Pamiętam, jak odkryłem funkcję automatycznego uzupełniania – czułem się jakbym żył w przyszłości. Zaczniesz pisać coś, a edytor mówi: „Hej, czy myślałeś o tej funkcji, która robi dokładnie to, czego potrzebujesz?” To jak mieć czytającego w myślach kumpla od kodowania! +Pamiętam, gdy pierwszy raz odkryłem autouzupełnianie – poczułem się jakbym żył w przyszłości. Zaczynasz coś pisać, a edytor mówi: „Hej, może myślałeś o tej funkcji, która dokładnie robi to, czego potrzebujesz?” To tak, jakby mieć czytającego w myślach kumpla do kodowania! **Co sprawia, że te edytory są takie niesamowite?** -Nowoczesne edytory kodu oferują imponujący zestaw funkcji zaprojektowanych, by zwiększać twoją produktywność: +Nowoczesne edytory kodu oferują imponujący zestaw funkcji zaprojektowanych, by zwiększyć twoją produktywność: | Funkcja | Co robi | Dlaczego pomaga | |---------|---------|-----------------| -| **Podświetlanie składni** | Koloruje różne części kodu | Ułatwia czytanie i wychwycenie błędów | -| **Auto-uzupełnianie** | Sugeruje kod podczas pisania | Przyspiesza kodowanie i zmniejsza literówki | -| **Narzędzia do debugowania** | Pomagają odnaleźć i naprawić błędy | Oszczędza godziny śledzenia problemów | -| **Rozszerzenia** | Dodają specjalistyczne funkcje | Personalizuj edytor dla dowolnej technologii | -| **Asystenci AI** | Sugerują kod i wyjaśnienia | Przyspieszają naukę i efektywność | +| **Kolorowanie składni** | Koloruje różne części kodu | Ułatwia czytanie kodu i znalezienie błędów | +| **Autouzupełnianie** | Sugeruje kod podczas pisania | Przyspiesza kodowanie i redukuje literówki | +| **Narzędzia debugowania** | Pomagają znaleźć i naprawić błędy | Oszczędza godziny na rozwiązywaniu problemów | +| **Rozszerzenia** | Dodają specjalistyczne funkcje | Pozwalają dostosować edytor do każdej technologii | +| **Asystenci AI** | Sugerują kod i wyjaśnienia | Przyspieszają naukę i wydajność pracy | -> 🎥 **Materiał wideo**: Chcesz zobaczyć te narzędzia w akcji? Sprawdź ten [Film o Narzędziach Zawodu](https://youtube.com/watch?v=69WJeXGBdxg) dla kompleksowego przeglądu. +> 🎥 **Zasób wideo**: Chcesz zobaczyć te narzędzia w akcji? Sprawdź ten [film „Narzędzia pracy”](https://youtube.com/watch?v=69WJeXGBdxg) dla kompleksowego przeglądu. -#### Polecane edytory dla web developmentu +#### Polecane edytory do tworzenia stron internetowych -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Darmowy) -- Najpopularniejszy wśród web developerów +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (darmowy) +- Najpopularniejszy wśród twórców stron internetowych - Doskonały ekosystem rozszerzeń -- Wbudowany terminal i integracja z Git +- Wbudowany terminal i integracja z Gitem - **Niezbędne rozszerzenia**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Opierające się na AI sugestie kodu - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Współpraca w czasie rzeczywistym - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatyczne formatowanie kodu - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Wykrywanie literówek w kodzie + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – sugeruje kod wspierany AI + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – współpraca w czasie rzeczywistym + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – automatyczne formatowanie kodu + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – wykrywa literówki w kodzie -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Płatny, darmowy dla studentów) -- Zaawansowane narzędzia debugowania i testowania +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (płatny, darmowy dla studentów) +- Zaawansowane narzędzia do debugowania i testowania - Inteligentne uzupełnianie kodu - Wbudowana kontrola wersji -**IDE oparte na chmurze** (różne ceny) -- [GitHub Codespaces](https://github.com/features/codespaces) - Pełen VS Code w twojej przeglądarce -- [Replit](https://replit.com/) - Świetny do nauki i dzielenia się kodem -- [StackBlitz](https://stackblitz.com/) - Natychmiastowy, pełen stos do tworzenia stron www +**IDE oparte na chmurze** (różne cenniki) +- [GitHub Codespaces](https://github.com/features/codespaces) – pełny VS Code w przeglądarce +- [Replit](https://replit.com/) – świetny do nauki i dzielenia się kodem +- [StackBlitz](https://stackblitz.com/) – natychmiastowe, pełnostackowe tworzenie webowe -> 💡 **Wskazówka na start**: Zacznij od Visual Studio Code – jest darmowy, szeroko używany w branży i ma ogromną społeczność tworzącą pomocne tutoriale i rozszerzenia. +> 💡 **Wskazówka na start**: Zacznij od Visual Studio Code – jest darmowy, powszechnie używany w branży i ma ogromną społeczność tworzącą pomocne samouczki i rozszerzenia. -### Przeglądarki internetowe: Twoje Tajne Laboratorium Programistyczne +### Przeglądarki internetowe: Twoje tajne laboratorium programisty -Dobra, przygotuj się na totalne zaskoczenie! Wiesz, jak używałeś przeglądarek do przeglądania mediów społecznościowych i oglądania filmów? Okazuje się, że cały czas ukrywały przed tobą to niesamowite sekretne laboratorium dla programistów, czekające, aż je odkryjesz! +Dobra, przygotuj się na totalne zdumienie! Wiesz, jak używałeś przeglądarki do przeglądania mediów społecznościowych i oglądania filmów? Okazuje się, że przez cały czas ukrywało się tam niesamowite tajne laboratorium programisty, czekające, aż je odkryjesz! -Za każdym razem, gdy klikasz prawym przyciskiem myszy na stronie internetowej i wybierasz „Zbadaj element”, otwierasz ukryty świat narzędzi deweloperskich, które są szczerze potężniejsze niż niektóre drogie programy, za które kiedyś płaciłem setki dolarów. To jak odkrycie, że twoja zwykła kuchnia kryje za tajnym panelem profesjonalne laboratorium szefa kuchni! -Za pierwszym razem, gdy ktoś pokazał mi narzędzia deweloperskie w przeglądarce, spędziłem około trzech godzin, klikając wszędzie i mówiąc „CZEKAJ, TO TEŻ TAK POTRAFI?!” Możesz dosłownie edytować dowolną stronę internetową w czasie rzeczywistym, zobaczyć dokładnie, jak szybko wszystko się ładuje, przetestować, jak twoja witryna wygląda na różnych urządzeniach, a nawet debugować JavaScript jak totalny profesjonalista. To absolutnie zdumiewające! +Za każdym razem, gdy klikniesz prawym przyciskiem na stronie i wybierzesz „Zbadaj element”, otwierasz ukryty świat narzędzi deweloperskich, które są szczerze mówiąc potężniejsze niż niektóre drogie programy, za które kiedyś płaciłem setki dolarów. To jak odkrycie, że twoja zwykła kuchnia skrywa labolatorium profesjonalnego szefa kuchni za tajnym panelem! +Pierwszy raz, gdy ktoś pokazał mi narzędzia deweloperskie przeglądarki, spędziłem około trzech godzin tylko klikając i mówiąc „CZEKAJ, TO TEŻ POTRAFI?!” Możesz dosłownie edytować każdą stronę internetową w czasie rzeczywistym, zobaczyć dokładnie, jak szybko wszystko się ładuje, przetestować, jak twoja witryna wygląda na różnych urządzeniach, a nawet debugować JavaScript jak prawdziwy profesjonalista. To absolutnie oszałamiające! **Oto dlaczego przeglądarki są twoją tajną bronią:** -Kiedy tworzysz stronę internetową lub aplikację webową, musisz zobaczyć, jak wygląda i zachowuje się w rzeczywistym świecie. Przeglądarki nie tylko wyświetlają twoją pracę, ale też dostarczają szczegółową informację zwrotną o wydajności, dostępności i potencjalnych problemach. +Kiedy tworzysz stronę internetową lub aplikację webową, musisz zobaczyć, jak wygląda i zachowuje się w rzeczywistym świecie. Przeglądarki nie tylko wyświetlają twoją pracę, ale także dostarczają szczegółowe informacje zwrotne na temat wydajności, dostępności i potencjalnych problemów. #### Narzędzia deweloperskie przeglądarki (DevTools) -Nowoczesne przeglądarki zawierają wszechstronne zestawy narzędzi programistycznych: +Nowoczesne przeglądarki zawierają kompleksowe zestawy narzędzi developerskich: -| Kategoria narzędzia | Co robi | Przykładowe zastosowanie | -|---------------------|---------|--------------------------| -| **Inspektor elementów** | Podgląd i edycja HTML/CSS w czasie rzeczywistym | Dopasuj styl, aby zobaczyć natychmiastowe rezultaty | -| **Konsola** | Wyświetlanie komunikatów o błędach i testowanie JavaScript | Debugowanie problemów i eksperymentowanie z kodem | -| **Monitor sieci** | Śledzenie ładowania zasobów | Optymalizacja wydajności i czasu ładowania | -| **Sprawdzarka dostępności** | Testowanie projektu pod kątem inkluzywności | Upewnij się, że twoja strona działa dla wszystkich użytkowników | -| **Symulator urządzeń** | Podgląd na różnych rozmiarach ekranów | Testowanie responsywnego designu bez wielu urządzeń | +| Kategoria narzędzi | Co robi | Przykładowe zastosowanie | +|--------------------|---------|--------------------------| +| **Inspektor elementów** | Podgląd i edycja HTML/CSS w czasie rzeczywistym | Dostosuj styl, aby zobaczyć natychmiastowe efekty | +| **Konsola** | Podgląd komunikatów o błędach i testowanie JavaScript | Debuguj problemy i eksperymentuj z kodem | +| **Monitor sieci** | Śledź, jak ładują się zasoby | Optymalizuj wydajność i czas ładowania | +| **Sprawdzanie dostępności** | Testuj pod kątem inkluzywnego projektowania | Upewnij się, że twoja witryna działa dla wszystkich użytkowników | +| **Symulator urządzeń** | Podgląd na różnych rozmiarach ekranów | Testuj responsywny design bez posiadania wielu urządzeń | -#### Polecane przeglądarki do rozwoju +#### Polecane przeglądarki do pracy developerskiej -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – narzędzia deweloperskie standardu branżowego z obszerną dokumentacją -- **[Firefox](https://developer.mozilla.org/docs/Tools)** – doskonałe narzędzia do CSS Grid i dostępności -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – oparty na Chromium z zasobami deweloperskimi Microsoftu +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Standardowe narzędzia deweloperskie z obszerna dokumentacją +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Doskonałe narzędzia do CSS Grid i dostępności +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Zbudowany na Chromium z zasobami deweloperskimi Microsoftu -> ⚠️ **Ważna wskazówka dotycząca testowania**: Zawsze testuj swoje strony w wielu przeglądarkach! To, co działa idealnie w Chrome, może wyglądać inaczej w Safari czy Firefox. Profesjonalni deweloperzy testują na wszystkich głównych przeglądarkach, aby zapewnić spójne doświadczenia użytkowników. +> ⚠️ **Ważna wskazówka testowania**: Zawsze testuj swoje strony w wielu przeglądarkach! To, co działa idealnie w Chrome, może wyglądać inaczej w Safari lub Firefox. Profesjonalni deweloperzy sprawdzają kompatybilność we wszystkich głównych przeglądarkach, aby zapewnić spójne doświadczenia użytkowników. -### Narzędzia wiersza poleceń: twoja brama do supermocy dewelopera +### Narzędzia wiersza poleceń: twoje wrota do supermocy dewelopera -Dobra, teraz będzie całkowicie szczery moment o wierszu poleceń, bo chcę, żebyś to usłyszał od kogoś, kto naprawdę rozumie. Kiedy pierwszy raz go zobaczyłem – ten straszny czarny ekran z migającym tekstem – dosłownie pomyślałem: „Nie, absolutnie nie! To wygląda jak coś z filmu o hakerach z lat 80., a ja zdecydowanie nie jestem do tego na tyle mądry!” 😅 +Dobra, teraz chwila szczerości o wierszu poleceń, bo chcę, abyś usłyszał to od kogoś, kto naprawdę to rozumie. Kiedy pierwszy raz go zobaczyłem – ten straszny czarny ekran z migającym tekstem – dosłownie pomyślałem: „Nie, absolutnie nie! To wygląda jak coś z filmu o hakerach z lat 80., a ja zdecydowanie nie jestem na to wystarczająco mądry!” 😅 -Ale oto co chciałbym, żeby ktoś mi wtedy powiedział, a co mówię teraz tobie: wiersz poleceń nie jest straszny – to tak, jakbyś rozmawiał bezpośrednio ze swoim komputerem. Pomyśl o tym jak o różnicy między zamawianiem jedzenia przez fajną aplikację z obrazkami i menu (co jest miłe i łatwe) a wejściem do swojej ulubionej lokalnej restauracji, gdzie kucharz dokładnie wie, co lubisz i może wyczarować coś idealnego tylko dlatego, że powiesz „zaskocz mnie czymś niesamowitym”. +Ale oto czego chciałbym, aby ktoś mi wtedy powiedział i co mówię tobie teraz: wiersz poleceń nie jest straszny – to tak, jakby rozmawiać bezpośrednio z twoim komputerem. Pomyśl o tym jak o różnicy między zamawianiem jedzenia przez aplikację z ładnymi zdjęciami i menu (co jest wygodne i łatwe) a wejściem do twojej ulubionej lokalnej restauracji, gdzie kucharz zna dokładnie twoje gusta i może przygotować coś idealnego, gdy tylko powiesz „zaskocz mnie czymś wspaniałym”. -Wiersz poleceń to miejsce, gdzie deweloperzy czują się jak prawdziwi czarodzieje. Wpisujesz kilka z pozoru magicznych słów (ok, to tylko komendy, ale wydają się magiczne!), naciskasz enter i BUM – stworzyłeś całe struktury projektu, zainstalowałeś potężne narzędzia z całego świata albo wdrożyłeś swoją aplikację w internecie, aby miliony ludzi mogły ją zobaczyć. Gdy raz zasmakujesz tej mocy, to naprawdę wciąga! +To właśnie wiersz poleceń jest miejscem, gdzie deweloperzy czują się jak prawdziwi magicy. Wpisujesz kilka pozornie magicznych słów (no dobrze, to po prostu polecenia, ale brzmią magicznie!), naciskasz enter i BUM – utworzyłeś całą strukturę projektu, zainstalowałeś potężne narzędzia z całego świata albo wdrożyłeś swoją aplikację w internecie, aby miliony ludzi mogło ją zobaczyć. Gdy raz poczujesz tę moc, to naprawdę uzależnia! **Dlaczego wiersz poleceń stanie się twoim ulubionym narzędziem:** -Chociaż interfejsy graficzne są świetne do wielu zadań, wiersz poleceń wyróżnia się automatyzacją, precyzją i szybkością. Wiele narzędzi deweloperskich działa głównie przez interfejsy wiersza poleceń, a nauka ich sprawnego używania może dramatycznie poprawić twoją produktywność. +Chociaż interfejsy graficzne sprawdzają się w wielu zadaniach, to wiersz poleceń doskonale nadaje się do automatyzacji, precyzji i szybkości. Wiele narzędzi deweloperskich działa głównie przez CLI, a nauka ich efektywnego użycia może znacznie poprawić twoją produktywność. ```bash # Krok 1: Utwórz i przejdź do katalogu projektu @@ -602,24 +602,24 @@ mkdir my-awesome-website cd my-awesome-website ``` -**Oto co robi ten kod:** -- **Tworzy** nowy katalog o nazwie „my-awesome-website” dla twojego projektu +**Oto, co robi ten kod:** +- **Tworzy** nowy katalog o nazwie "my-awesome-website" dla twojego projektu - **Przechodzi** do nowo utworzonego katalogu, aby rozpocząć pracę ```bash # Krok 2: Zainicjuj projekt za pomocą package.json npm init -y -# Zainstaluj nowoczesne narzędzia do tworzenia oprogramowania +# Zainstaluj nowoczesne narzędzia deweloperskie npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Krok po kroku, to się dzieje:** +**Krok po kroku, co się dzieje:** - **Inicjalizuje** nowy projekt Node.js z domyślnymi ustawieniami za pomocą `npm init -y` -- **Instaluje** Vite jako nowoczesne narzędzie budowania do szybkiego rozwoju i produkcji +- **Instaluje** Vite jako nowoczesne narzędzie do budowy dla szybkiego rozwoju i produkcji - **Dodaje** Prettier do automatycznego formatowania kodu oraz ESLint do kontroli jakości kodu -- **Używa** flagi `--save-dev`, aby oznaczyć je jako zależności tylko do rozwoju +- **Używa** flagi `--save-dev`, aby oznaczyć te narzędzia jako zależności wyłącznie deweloperskie ```bash # Krok 3: Utwórz strukturę projektu i pliki @@ -633,22 +633,22 @@ npx vite **W powyższym:** - **Zorganizowaliśmy** projekt, tworząc osobne foldery na kod źródłowy i zasoby - **Wygenerowaliśmy** podstawowy plik HTML z odpowiednią strukturą dokumentu -- **Uruchomiliśmy** serwer developerski Vite z funkcją live reload i hot module replacement +- **Uruchomiliśmy** serwer developerski Vite do live reload i hot module replacement -#### Podstawowe narzędzia wiersza poleceń do tworzenia stron internetowych +#### Podstawowe narzędzia wiersza poleceń do web developmentu -| Narzędzie | Przeznaczenie | Dlaczego potrzebujesz | -|-----------|---------------|----------------------| -| **[Git](https://git-scm.com/)** | Kontrola wersji | Śledź zmiany, współpracuj z innymi, twórz kopie zapasowe | -| **[Node.js & npm](https://nodejs.org/)** | Środowisko JavaScript & zarządzanie pakietami | Uruchamiaj JavaScript poza przeglądarką, instaluj nowoczesne narzędzia | -| **[Vite](https://vitejs.dev/)** | Narzędzie budujące & serwer developerski | Błyskawiczny rozwój z hot module replacement | -| **[ESLint](https://eslint.org/)** | Jakość kodu | Automatycznie wykrywaj i naprawiaj problemy w JavaScript | -| **[Prettier](https://prettier.io/)** | Formatowanie kodu | Utrzymuj kod w spójnym, czytelnym formacie | +| Narzędzie | Cel | Dlaczego jest Ci potrzebne | +|-----------|-----|----------------------------| +| **[Git](https://git-scm.com/)** | Kontrola wersji | Śledzenie zmian, współpraca z innymi, tworzenie kopii zapasowych | +| **[Node.js & npm](https://nodejs.org/)** | Środowisko uruchomieniowe JavaScript i zarządzanie pakietami | Uruchamianie JavaScript poza przeglądarką, instalacja nowoczesnych narzędzi developerskich | +| **[Vite](https://vitejs.dev/)** | Narzędzie budujące i serwer developerski | Superszybki rozwój z hot module replacement | +| **[ESLint](https://eslint.org/)** | Jakość kodu | Automatyczne znajdowanie i naprawianie problemów w JavaScript | +| **[Prettier](https://prettier.io/)** | Formatowanie kodu | Utrzymywanie spójnego i czytelnego formatowania kodu | #### Opcje specyficzne dla platform **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – nowoczesny, bogaty w funkcje terminal +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – nowoczesny terminal z wieloma funkcjami - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – potężne środowisko skryptowe - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – tradycyjny wiersz poleceń Windows @@ -657,58 +657,58 @@ npx vite - **[iTerm2](https://iterm2.com/)** – ulepszony terminal z zaawansowanymi funkcjami **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 – standardowy shell Linuxa +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – standardowa powłoka Linuxa - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – zaawansowany emulator terminala > 💻 = Wstępnie zainstalowane w systemie operacyjnym -> 🎯 **Ścieżka nauki**: Zacznij od podstawowych poleceń, takich jak `cd` (zmiana katalogu), `ls` lub `dir` (lista plików) i `mkdir` (tworzenie folderu). Ćwicz polecenia z nowoczesnych workflow, takie jak `npm install`, `git status` i `code .` (otwiera bieżący katalog w VS Code). Im wygodniej się z nimi czujesz, tym naturalniej poznasz bardziej zaawansowane polecenia i techniki automatyzacji. +> 🎯 **Ścieżka nauki**: Zacznij od podstawowych poleceń takich jak `cd` (zmień katalog), `ls` lub `dir` (lista plików) oraz `mkdir` (stwórz katalog). Ćwicz używanie nowoczesnych poleceń workflow, jak `npm install`, `git status` oraz `code .` (otwiera aktualny katalog w VS Code). W miarę nabierania wprawy naturalnie przyswoisz sobie bardziej zaawansowane polecenia i techniki automatyzacji. -### Dokumentacja: twój mentor dostępny zawsze i wszędzie +### Dokumentacja: twój zawsze dostępny mentor do nauki -Dobra, pozwól, że podzielę się małą tajemnicą, która sprawi, że poczujesz się znacznie lepiej jako początkujący: nawet najbardziej doświadczeni deweloperzy spędzają olbrzymią część swojego czasu na czytaniu dokumentacji. I to nie dlatego, że nie wiedzą, co robią – to naprawdę oznaka mądrości! +Dobra, podzielę się z tobą małą tajemnicą, która sprawi, że poczujesz się o wiele lepiej jako początkujący: nawet najbardziej doświadczeni deweloperzy spędzają ogromną część czasu na czytaniu dokumentacji. I to nie dlatego, że nie wiedzą, co robią – to wręcz oznaka mądrości! -Pomyśl o dokumentacji jak o dostępie do najbardziej cierpliwych, kompetentnych nauczycieli na świecie, którzy są dostępni 24/7. Utknąłeś nad problemem o 2 w nocy? Dokumentacja jest tam z ciepłym wirtualnym uściskiem i dokładnie tą odpowiedzią, której potrzebujesz. Chcesz poznać nową, fajną funkcję, o której wszyscy mówią? Dokumentacja ma dla ciebie krok po kroku przykłady. Próbujesz zrozumieć, dlaczego coś działa tak, a nie inaczej? Zgadłeś – dokumentacja jest gotowa to wyjaśnić w sposób, który w końcu cię oświeci! +Pomyśl o dokumentacji jak o dostępie do najbardziej cierpliwych i kompetentnych nauczycieli na świecie, dostępnych 24/7. Utknąłeś w problemie o 2 w nocy? Dokumentacja jest tam z ciepłym wirtualnym uściskiem i dokładną odpowiedzią, której potrzebujesz. Chcesz dowiedzieć się o jakiejś ciekawej nowej funkcji, o której wszyscy mówią? Dokumentacja cię wesprze przykładami krok po kroku. Próbujesz zrozumieć, dlaczego coś działa tak, a nie inaczej? Zgadza się – dokumentacja jest gotowa wytłumaczyć to tak, abyś w końcu zrozumiał! -Coś, co całkowicie zmieniło mój sposób myślenia: świat tworzenia stron internetowych rozwija się niesamowicie szybko i nikt (naprawdę nikt!) nie pamięta wszystkiego na pamięć. Widziałem starszych programistów z ponad 15-letnim doświadczeniem, którzy sprawdzali podstawową składnię i wiesz co? To nie jest żenujące – to mądre! Nie chodzi o perfekcyjną pamięć, ale o to, żeby szybko znaleźć wiarygodne odpowiedzi i rozumieć, jak je zastosować. +Co całkowicie zmieniło moje postrzeganie: świat web developmentu rozwija się niesamowicie szybko i nikt (mając na myśli absolutnie nikt!) nie trzyma wszystkiego w pamięci. Widziałem starszych developerów z ponad 15-letnim doświadczeniem, którzy szukają podstawowej składni i wiesz co? To nie jest wstyd – to mądre! Nie chodzi o idealną pamięć, ale o to, gdzie szybko znaleźć wiarygodne odpowiedzi i jak je zastosować. **Tu dzieje się prawdziwa magia:** -Profesjonalni deweloperzy poświęcają znaczną część swojego czasu na czytanie dokumentacji – nie dlatego, że nie wiedzą, co robią, ale dlatego, że krajobraz web developmentu zmienia się tak szybko, że pozostanie na bieżąco wymaga ciągłej nauki. Świetna dokumentacja pomaga ci zrozumieć nie tylko *jak* czegoś używać, ale *dlaczego* i *kiedy* to robić. +Profesjonalni deweloperzy spędzają znaczną część czasu na czytaniu dokumentacji – nie dlatego, że nie wiedzą, co robią, ale dlatego, że krajobraz web developmentu zmienia się tak szybko, że bycie na bieżąco wymaga nieustannej nauki. Dobra dokumentacja pomaga zrozumieć nie tylko *jak* czegoś używać, ale również *dlaczego* i *kiedy* to robić. #### Podstawowe źródła dokumentacji -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Złoty standard dokumentacji technologii webowych -- Obszerne przewodniki po HTML, CSS i JavaScript -- Zawiera informacje o kompatybilności przeglądarek -- Zawiera praktyczne przykłady i interaktywne demonstracje +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- Złoty standard dokumentacji technologii webowych +- Kompleksowe przewodniki po HTML, CSS i JavaScript +- Zawiera informacje o kompatybilności przeglądarek +- Oferuje praktyczne przykłady i interaktywne demo -**[Web.dev](https://web.dev)** (od Google) -- Nowoczesne najlepsze praktyki tworzenia stron -- Poradniki optymalizacji wydajności -- Zasady dostępności i designu inkluzywnego -- Case study z realnych projektów +**[Web.dev](https://web.dev)** (Google) +- Nowoczesne najlepsze praktyki web developmentu +- Przewodniki optymalizacji wydajności +- Zasady dostępności i inkluzywnego projektowania +- Studia przypadków z prawdziwych projektów -**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Zasoby dla deweloperów Edge -- Przewodniki Progressive Web Apps -- Wiedza o tworzeniu wieloplatformowym +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Zasoby dla programistów przeglądarki Edge +- Przewodniki dotyczące Progressive Web Apps +- Wgląd w rozwój multiplatformowy -**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturalne ścieżki nauki -- Kursy wideo od ekspertów branżowych -- Ćwiczenia praktyczne w kodowaniu +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- Ustrukturyzowane programy nauczania +- Kursy wideo prowadzone przez ekspertów branżowych +- Ćwiczenia praktyczne z kodowaniem -> 📚 **Strategia nauki**: Nie próbuj zapamiętywać dokumentacji – zamiast tego naucz się po niej sprawnie poruszać. Dodaj do zakładek często używane źródła i ćwicz korzystanie z wyszukiwarek, aby szybko znaleźć konkretną informację. +> 📚 **Strategia nauki**: Nie próbuj na pamięć zapamiętywać dokumentacji – zamiast tego naucz się sprawnie po niej poruszać. Dodawaj do zakładek często używane referencje i ćwicz korzystanie z funkcji wyszukiwania, aby szybko znaleźć potrzebne informacje. -### 🔧 **Sprawdzenie opanowania narzędzi: Co z Tobą rezonuje?** +### 🔧 **Sprawdzenie mistrzostwa narzędzi: co do ciebie przemawia?** -**Zastanów się chwilę:** -- Którego narzędzia jesteś najbardziej podekscytowany, by wypróbować najpierw? (Nie ma złych odpowiedzi!) -- Czy wiersz poleceń nadal wydaje się przerażający, czy może już budzi ciekawość? -- Czy potrafisz sobie wyobrazić używanie DevTools w przeglądarce, by zajrzeć za kulisy swoich ulubionych stron? +**Poświęć chwilę na zastanowienie się:** +- Które narzędzie najbardziej chcesz najpierw wypróbować? (Nie ma złych odpowiedzi!) +- Czy wiersz poleceń nadal wydaje się onieśmielający, czy raczej budzi twoją ciekawość? +- Czy potrafisz sobie wyobrazić, że używasz DevTools przeglądarki, by zajrzeć za kulisy swoich ulubionych stron? ```mermaid pie title "Czas dewelopera spędzony z narzędziami" @@ -718,68 +718,68 @@ pie title "Czas dewelopera spędzony z narzędziami" "Czytanie dokumentacji" : 15 "Debugowanie" : 5 ``` -> **Fajna ciekawostka:** Większość programistów spędza około 40% czasu w swoim edytorze kodu, ale zauważ, ile czasu poświęcają na testowanie, naukę i rozwiązywanie problemów. Programowanie to nie tylko pisanie kodu – to tworzenie doświadczeń! +> **Zabawna ciekawostka**: Większość deweloperów spędza około 40% czasu w edytorze kodu, ale zwróć uwagę, ile czasu poświęca na testowanie, naukę i rozwiązywanie problemów. Programowanie to nie tylko pisanie kodu – to tworzenie doświadczeń! -✅ **Do przemyślenia:** Zastanów się nad tym, jak narzędzia do budowania stron (rozwój) mogą różnić się od narzędzi do projektowania ich wyglądu (design)? To jak różnica między architektem tworzącym piękny dom a wykonawcą, który go faktycznie buduje. Obie role są kluczowe, ale potrzebują różnych zestawów narzędzi! Tego typu myślenie naprawdę pomoże ci zobaczyć szerszy obraz, jak powstają strony internetowe. +✅ **Temat do przemyśleń**: Zastanów się, jak twoim zdaniem narzędzia do budowania stron (development) różnią się od narzędzi do projektowania ich wyglądu (design)? To jak różnica między architektem projektującym piękny dom a wykonawcą, który go faktycznie buduje. Oboje są kluczowi, ale potrzebują różnych narzędzi! Takie myślenie naprawdę pozwoli ci zobaczyć szerszy obraz tego, jak powstają strony internetowe. -## Wyzwanie GitHub Copilot Agent 🚀 +## Wyzwanie agenta GitHub Copilot 🚀 -Użyj trybu Agenta, aby zrealizować następujące zadanie: +Użyj trybu Agenta, aby rozwiązać następujące zadanie: -**Opis:** Zbadaj funkcje nowoczesnego edytora kodu lub IDE i pokaż, jak mogą usprawnić twój workflow jako dewelopera webowego. +**Opis:** Zbadaj funkcje nowoczesnego edytora kodu lub IDE i pokaż, jak mogą one usprawnić twoją pracę jako dewelopera webowego. -**Zadanie:** Wybierz edytor kodu lub IDE (np. Visual Studio Code, WebStorm lub chmurowe IDE). Wymień trzy funkcje lub rozszerzenia, które pomagają pisać, debugować lub utrzymywać kod efektywniej. Dla każdej podaj krótkie wyjaśnienie, jak poprawia ona twój workflow. +**Zadanie:** Wybierz edytor kodu lub IDE (np. Visual Studio Code, WebStorm lub IDE w chmurze). Wypisz trzy funkcje lub rozszerzenia, które pomagają ci efektywniej pisać, debugować lub utrzymywać kod. Do każdego podaj krótkie wyjaśnienie, jak wpływa na twój workflow. --- ## 🚀 Wyzwanie -**No dobrze, detektywie, gotowy na swoją pierwszą sprawę?** +**Dobra, detektywie, gotowy na swoją pierwszą sprawę?** -Mając już solidne podstawy, mam dla ciebie przygodę, która pokaże ci, jak niesamowicie różnorodny i fascynujący jest świat programowania. I słuchaj – to jeszcze nie jest o pisaniu kodu, więc bez presji! Pomyśl o sobie jak o detektywie języków programowania na swojej pierwszej ekscytującej sprawie! +Teraz, kiedy masz solidne podstawy, mam dla ciebie przygodę, która pokaże, jak niesamowicie różnorodny i fascynujący jest świat programowania. I słuchaj – to jeszcze nie o pisaniu kodu, więc bez stresu! Pomyśl o sobie jak o detektywie języków programowania w twojej pierwszej ekscytującej sprawie! **Twoja misja, jeśli zdecydujesz się ją podjąć:** -1. **Stań się badaczem języków:** Wybierz trzy języki programowania z zupełnie różnych światów – może jeden do tworzenia stron, jeden do aplikacji mobilnych i jeden do analizy danych dla naukowców. Znajdź przykłady tego samego prostego zadania w każdym z nich. Obiecuję, że będziesz absolutnie zdumiony, jak bardzo mogą się różnić, robiąc dokładnie to samo! +1. **Stań się odkrywcą języków**: Wybierz trzy języki programowania z zupełnie różnych światów – może jeden do tworzenia stron internetowych, drugi do aplikacji mobilnych, a trzeci do analiz danych naukowych. Znajdź przykłady tego samego prostego zadania zapisanego w każdym z nich. Obiecuję, że będziesz zachwycony, jak bardzo mogą się różnić, robiąc dokładnie to samo! -2. **Poznaj ich historie powstania:** Co sprawia, że każdy język jest wyjątkowy? Ciekawostka – każdy język programowania powstał, bo ktoś pomyślał: „Wiesz co? Musi być lepszy sposób, by rozwiązać ten konkretny problem.” Czy potrafisz odkryć, jakie to problemy? Niektóre z tych historii są naprawdę fascynujące! +2. **Poznaj historie ich powstania**: Co sprawia, że każdy język jest wyjątkowy? Oto fajny fakt – każdy język programowania powstał, bo ktoś pomyślał: „Wiecie co? Musi być lepszy sposób na rozwiązanie tego konkretnego problemu.” Czy potrafisz odkryć, jakie to były problemy? Niektóre z tych historii są naprawdę fascynujące! -3. **Poznaj społeczności:** Sprawdź, jak gościnna i pełna pasji jest każda społeczność danego języka. Niektóre mają miliony programistów dzielących się wiedzą i pomagających sobie nawzajem, inne są mniejsze, ale bardzo zżyte i wspierające. Pokochasz różnorodność charakterów tych społeczności! +3. **Poznaj społeczności**: Zobacz, jak przyjazne i zaangażowane są społeczności każdego z tych języków. Niektóre liczą miliony programistów dzielących się wiedzą i pomagających sobie nawzajem, inne są mniejsze, ale bardzo zżyte i wspierające. Pokochasz różne osobowości, jakie te społeczności reprezentują! -4. **Zaufaj intuicji:** Który język wydaje się dla ciebie najbardziej przystępny właśnie teraz? Nie przejmuj się „idealnym” wyborem – po prostu słuchaj swojego instynktu! Naprawdę nie ma złych odpowiedzi i zawsze możesz później eksplorować inne. +4. **Zaufaj swojemu przeczuciu**: Który język wydaje ci się teraz najbardziej dostępny? Nie stresuj się wyborem „idealnym” – po prostu słuchaj swojego instynktu! Naprawdę nie ma złych odpowiedzi, zawsze możesz później poznawać inne. -**Bonusowa praca detektywa:** Spróbuj dowiedzieć się, jakie główne strony lub aplikacje są zbudowane z użyciem każdego z tych języków. Gwarantuję, że będziesz w szoku, dowiadując się, co napędza Instagram, Netflix czy tę mobilną grę, od której nie możesz się oderwać! +**Bonus detektywistyczny**: Sprawdź, czy możesz odkryć, jakie duże strony internetowe lub aplikacje zostały stworzone w każdym z tych języków. Gwarantuję, że będziesz w szoku, gdy dowiesz się, co zasila Instagram, Netflixa czy tę mobilną grę, której nie możesz przestać grać! -> 💡 **Pamiętaj:** Dziś nie próbujesz zostać ekspertem żadnego z tych języków. Poznajesz tylko okolicę, zanim zdecydujesz, gdzie chcesz się osiedlić. Nie spiesz się, baw się dobrze i kieruj swoją ciekawością! +> 💡 **Pamiętaj**: Nie próbujesz dziś stać się ekspertem w żadnym z tych języków. Po prostu poznajesz „dzielnicę”, zanim zdecydujesz, gdzie chcesz się osiedlić. Poświęć czas, baw się dobrze i pozwól, by kierowała tobą ciekawość! ## Świętujmy to, co odkryłeś! -O rety, przyswoiłeś dziś tyle niesamowitych informacji! Jestem naprawdę podekscytowany, widząc, ile z tej cudownej podróży zostało z tobą. I pamiętaj – to nie jest test, gdzie musisz wszystko zrobić perfekcyjnie. To raczej świętowanie wszystkich fajnych rzeczy, które odkryłeś o tym fascynującym świecie, w który zaraz się zanurzysz! +Wow, przyswoiłeś dziś tyle niesamowitych informacji! Naprawdę cieszę się, że mogę zobaczyć, ile z tej niesamowitej podróży z tobą zostało. I pamiętaj – to nie test, w którym musisz mieć wszystko idealnie. To raczej święto wszystkich super rzeczy, które już wiesz o tym fascynującym świecie, w który się zanurzasz! -[Wejdź do quizu po lekcji](https://ff-quizzes.netlify.app/web/) -## Przegląd i Samodzielna Nauka +[Przejdź do quizu po lekcji](https://ff-quizzes.netlify.app/web/) -**Nie spiesz się, eksploruj i baw się dobrze!** +## Podsumowanie i samodzielna nauka -Dzisiaj osiągnąłeś wiele i możesz być z tego dumny! Teraz nadchodzi najlepsza część – zgłębianie tematów, które wzbudziły Twoją ciekawość. Pamiętaj, to nie jest praca domowa – to przygoda! +**Poświęć czas na eksplorację i baw się dobrze!** +Dzisiaj przeszliście przez wiele materiału, i to jest powód do dumy! Teraz nadchodzi zabawna część – eksplorowanie tematów, które rozbudziły waszą ciekawość. Pamiętajcie, to nie jest praca domowa – to przygoda! -**Zanurz się głębiej w to, co Cię ekscytuje:** +**Zanurz się głębiej w to, co cię ekscytuje:** -**Praktykuj programowanie:** -- Odwiedź oficjalne strony 2-3 języków programowania, które przykuły Twoją uwagę. Każdy z nich ma swoją osobowość i historię! -- Wypróbuj internetowe place zabaw do kodowania, takie jak [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) lub [Replit](https://replit.com/). Nie bój się eksperymentować – niczego nie zepsujesz! -- Przeczytaj o tym, jak powstał Twój ulubiony język. Serio, niektóre z tych historii powstania są fascynujące i pomogą Ci zrozumieć, dlaczego języki działają tak, a nie inaczej. +**Wypróbuj na żywo języki programowania:** +- Odwiedź oficjalne strony 2-3 języków, które przykuły twoją uwagę. Każdy ma swoją osobowość i historię! +- Spróbuj online playgroundów do kodowania, takich jak [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), lub [Replit](https://replit.com/). Nie bój się eksperymentować – nic nie zepsujesz! +- Przeczytaj o tym, jak powstał twój ulubiony język. Serio, niektóre historie powstania są fascynujące i pomogą ci zrozumieć, dlaczego języki działają tak, jak działają. -**Zapoznaj się ze swoimi nowymi narzędziami:** -- Pobierz Visual Studio Code, jeśli jeszcze tego nie zrobiłeś – jest darmowe i na pewno Ci się spodoba! -- Spędź kilka minut, przeglądając rynek rozszerzeń. To coś jak sklep z aplikacjami dla Twojego edytora kodu! -- Otwórz Narzędzia Deweloperskie przeglądarki i po prostu klikaj. Nie przejmuj się, jeśli czegoś nie rozumiesz – po prostu zapoznaj się z tym, co tam jest. +**Zapoznaj się z nowymi narzędziami:** +- Pobierz Visual Studio Code, jeśli jeszcze tego nie zrobiłeś – jest darmowy i na pewno go pokochasz! +- Spędź kilka minut przeglądając marketplace z rozszerzeniami. To jak sklep z aplikacjami dla twojego edytora kodu! +- Otwórz narzędzia deweloperskie swojej przeglądarki i po prostu klikaj wszędzie. Nie musisz wszystkiego rozumieć – po prostu poznaj, co tam jest. **Dołącz do społeczności:** -- Obserwuj społeczności programistów na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) lub [GitHub](https://github.com/). Społeczność programistów jest niesamowicie przyjazna dla nowicjuszy! -- Oglądaj filmy na YouTube dla początkujących programistów. Jest tam mnóstwo świetnych twórców, którzy pamiętają, jak to jest zaczynać. -- Rozważ dołączenie do lokalnych spotkań lub społeczności online. Uwierz mi, programiści uwielbiają pomagać nowym! +- Obserwuj społeczności programistów na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), lub [GitHub](https://github.com/). Społeczność programistów jest niezwykle gościnna dla nowicjuszy! +- Obejrzyj kilka filmów dla początkujących na YouTube. Jest wielu świetnych twórców, którzy pamiętają, jak to jest zaczynać. +- Rozważ dołączenie do lokalnych spotkań lub społeczności online. Zaufaj mi, programiści uwielbiają pomagać nowicjuszom! -> 🎯 **Posłuchaj, co chcę, żebyś zapamiętał**: Nie oczekuje się, że staniesz się czarodziejem kodowania z dnia na dzień! Na razie po prostu poznajesz ten niesamowity nowy świat, którego stajesz się częścią. Nie spiesz się, ciesz się podróżą i pamiętaj – każdy programista, którego podziwiasz, kiedyś siedział dokładnie tam, gdzie Ty teraz, podekscytowany i może trochę przytłoczony. To całkowicie normalne i znaczy, że robisz to dobrze! +> 🎯 **Posłuchaj, co chcę, żebyś zapamiętał**: Nie oczekuje się, że zostaniesz czarodziejem kodu z dnia na dzień! Na razie po prostu poznajesz ten niesamowity nowy świat, do którego właśnie dołączasz. Daj sobie czas, ciesz się podróżą i pamiętaj – każdy programista, którego podziwiasz, kiedyś siedział dokładnie tam, gdzie ty teraz, czując ekscytację i może trochę przytłoczenie. To całkowicie normalne i oznacza, że robisz to dobrze! @@ -787,70 +787,70 @@ Dzisiaj osiągnąłeś wiele i możesz być z tego dumny! Teraz nadchodzi najlep [Reading the Docs](assignment.md) -> 💡 **Mała podpowiedź do Twojego zadania**: Bardzo chciałbym, abyś odkrył jakieś narzędzia, o których jeszcze nie rozmawialiśmy! Pomijaj edytory, przeglądarki i narzędzia wiersza poleceń, o których już mówiliśmy – istnieje całe niesamowite uniwersum świetnych narzędzi deweloperskich czekających na odkrycie. Szukaj tych, które są aktywnie rozwijane i mają żywe, pomocne społeczności (one mają zwykle najlepsze tutoriale i najbardziej wspierających ludzi, gdy utkniesz i potrzebujesz przyjaznej pomocy). +> 💡 **Mała podpowiedź do twojego zadania**: Bardzo chciałbym zobaczyć, jak eksplorujesz narzędzia, o których jeszcze nie rozmawialiśmy! Pomiń edytory, przeglądarki i narzędzia wiersza poleceń, o których już mówiliśmy – istnieje cały niesamowity świat narzędzi programistycznych czekających na odkrycie. Szukaj takich, które są aktywnie utrzymywane i mają żywe, pomocne społeczności (to one zazwyczaj mają najlepsze tutoriale i najbardziej wspierających ludzi, gdy utkniesz i będziesz potrzebować pomocy). --- -## 🚀 Twój Harmonogram Nauki Programowania +## 🚀 Twoja oś czasu podróży programistycznej ### ⚡ **Co możesz zrobić w ciągu następnych 5 minut** -- [ ] Dodaj do zakładek 2-3 strony języków programowania, które zwróciły Twoją uwagę +- [ ] Dodaj do zakładek 2-3 witryny języków programowania, które przykuły twoją uwagę - [ ] Pobierz Visual Studio Code, jeśli jeszcze tego nie zrobiłeś -- [ ] Otwórz Narzędzia Deweloperskie przeglądarki (F12) i klikaj na dowolnej stronie +- [ ] Otwórz DevTools swojej przeglądarki (F12) i klikaj po dowolnej stronie internetowej - [ ] Dołącz do jednej społeczności programistycznej (Dev.to, Reddit r/webdev lub Stack Overflow) ### ⏰ **Co możesz osiągnąć w ciągu tej godziny** -- [ ] Wykonaj quiz po lekcji i zastanów się nad swoimi odpowiedziami +- [ ] Ukończ quiz po lekcji i przemyśl swoje odpowiedzi - [ ] Skonfiguruj VS Code z rozszerzeniem GitHub Copilot - [ ] Wypróbuj przykład "Hello World" w 2 różnych językach programowania online - [ ] Obejrzyj film "Dzień z życia programisty" na YouTube -- [ ] Rozpocznij detektywistyczną pracę nad językiem programowania (zgodnie z wyzwaniem) +- [ ] Zacznij detektywistyczną pracę nad językiem programowania (zgodnie z wyzwaniem) ### 📅 **Twoja tygodniowa przygoda** -- [ ] Wykonaj zadanie i poznaj 3 nowe narzędzia deweloperskie -- [ ] Obserwuj 5 programistów lub kont programistycznych w mediach społecznościowych -- [ ] Spróbuj stworzyć coś małego w CodePen lub Replit (nawet tylko "Hello, [Twoje Imię]!") -- [ ] Przeczytaj jeden wpis na blogu programisty o jego drodze do programowania -- [ ] Dołącz do wirtualnego spotkania lub obejrzyj prezentację o programowaniu -- [ ] Zacznij uczyć się wybranego języka za pomocą samouczków online - -### 🗓️ **Twoja miesięczna przemiana** -- [ ] Zbuduj swój pierwszy mały projekt (nawet prosta strona internetowa się liczy!) -- [ ] Wnieś wkład w projekt open-source (zacznij od poprawek dokumentacji) -- [ ] Zostań mentorem kogoś, kto właśnie zaczyna swoją przygodę z programowaniem -- [ ] Stwórz swoją stronę portfolio dla programistów -- [ ] Nawiąż kontakty z lokalnymi społecznościami programistów lub grupami naukowymi -- [ ] Zacznij planować kolejny ważny etap nauki - -### 🎯 **Ostateczne refleksje** - -**Zanim pójdziesz dalej, poświęć chwilę na świętowanie:** -- Co dzisiaj najbardziej Cię zaciekawiło w programowaniu? -- Które narzędzie lub koncepcję chcesz zbadać jako pierwszą? -- Jak się czujesz na początku tej przygody z programowaniem? -- Jakie pytanie chciałbyś teraz zadać programiście? +- [ ] Wykonaj zadanie i poznaj 3 nowe narzędzia programistyczne +- [ ] Obserwuj 5 deweloperów lub kont programistycznych w mediach społecznościowych +- [ ] Spróbuj zbudować coś małego w CodePen lub Replit (nawet "Hello, [Twoje Imię]!") +- [ ] Przeczytaj jeden blog dewelopera o czyjejś podróży w kodowaniu +- [ ] Dołącz do wirtualnego meetup'u lub obejrzyj wykład o programowaniu +- [ ] Zacznij uczyć się wybranego języka programowania za pomocą tutoriali online + +### 🗓️ **Twoja miesięczna transformacja** +- [ ] Zbuduj swój pierwszy mały projekt (nawet prostą stronę internetową!) +- [ ] Wnieś wkład do projektu open-source (zacznij od poprawek dokumentacji) +- [ ] Zostań mentorem dla kogoś, kto dopiero zaczyna swoją podróż programistyczną +- [ ] Stwórz swoją stronę portfolio dla dewelopera +- [ ] Nawiąż kontakt z lokalnymi społecznościami programistycznymi lub grupami studenckimi +- [ ] Zacznij planować kolejny kamień milowy nauki + +### 🎯 **Ostateczne podsumowanie** + +**Zanim przejdziesz dalej, poświęć chwilę na świętowanie:** +- Co jedno w programowaniu dzisiaj cię zaciekawiło? +- Które narzędzie lub koncepcję chcesz zbadać jako pierwsze? +- Jak się czujesz, zaczynając tę podróż programistyczną? +- Jakie jedno pytanie chciałbyś teraz zadać programiście? ```mermaid journey title Twoja Podróż Budowania Pewności Siebie section Dzisiaj - Ciekawy: 3: You - Przytłoczony: 4: You - Podekscytowany: 5: You + Curious: 3: You + Overwhelmed: 4: You + Excited: 5: You section Ten Tydzień - Eksplorowanie: 4: You - Nauka: 5: You - Łączenie: 4: You + Exploring: 4: You + Learning: 5: You + Connecting: 4: You section Następny Miesiąc - Budowanie: 5: You - Pewny Siebie: 5: You - Pomaganie Innym: 5: You + Building: 5: You + Confident: 5: You + Helping Others: 5: You ``` -> 🌟 **Pamiętaj**: Każdy ekspert kiedyś zaczynał. Każdy doświadczony programista kiedyś czuł się dokładnie tak jak Ty teraz – podekscytowany, może trochę przytłoczony i zdecydowanie ciekawy, co jest możliwe. Jesteś w świetnym towarzystwie, a ta podróż będzie niesamowita. Witamy w cudownym świecie programowania! 🎉 +> 🌟 **Pamiętaj**: Każdy ekspert kiedyś był początkującym. Każdy starszy deweloper czuł się dokładnie tak jak ty teraz – podekscytowany, może trochę przytłoczony i na pewno ciekawy, co jest możliwe. Jesteś w niesamowitym towarzystwie, a ta podróż będzie niesamowita. Witamy w cudownym świecie programowania! 🎉 --- **Zastrzeżenie**: -Dokument ten został przetłumaczony za pomocą usługi tłumaczeń AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że dążymy do dokładności, prosimy pamiętać, że tłumaczenia automatyczne mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być traktowany jako źródło autorytatywne. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia. +Niniejszy dokument został przetłumaczony za pomocą automatycznej usługi tłumaczeniowej AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że dokładamy wszelkich starań, aby tłumaczenie było poprawne, prosimy mieć na uwadze, że tłumaczenia automatyczne mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być traktowany jako źródło ostateczne. W przypadku informacji krytycznych zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia. \ No newline at end of file diff --git a/translations/pl/AGENTS.md b/translations/pl/AGENTS.md index e72e37e7e..1f7e2183e 100644 --- a/translations/pl/AGENTS.md +++ b/translations/pl/AGENTS.md @@ -2,72 +2,72 @@ ## Przegląd projektu -Jest to repozytorium programu nauczania służące do nauczania podstaw web developmentu dla początkujących. Program to kompleksowy, 12-tygodniowy kurs opracowany przez Microsoft Cloud Advocates, zawierający 24 praktyczne lekcje obejmujące JavaScript, CSS i HTML. +Jest to edukacyjne repozytorium z programem nauczania do nauki podstaw tworzenia stron internetowych dla początkujących. Program nauczania to kompleksowy 12-tygodniowy kurs opracowany przez Microsoft Cloud Advocates, zawierający 24 praktyczne lekcje obejmujące JavaScript, CSS i HTML. ### Kluczowe elementy -- **Treści edukacyjne**: 24 ustrukturyzowane lekcje zorganizowane w moduły projektowe -- **Projekty praktyczne**: Terrarium, Gra w pisanie, Rozszerzenie przeglądarki, Gra kosmiczna, Aplikacja bankowa, Edytor kodu oraz Asystent czatu AI -- **Interaktywne quizy**: 48 quizów z 3 pytaniami każdy (wstępne i końcowe testy) -- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na ponad 50 języków dzięki GitHub Actions -- **Technologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (do projektów AI) +- **Treści edukacyjne**: 24 ustrukturyzowane lekcje zorganizowane w moduły oparte na projektach +- **Projekty praktyczne**: Terrarium, Gra pisania na klawiaturze, Rozszerzenie przeglądarki, Gra kosmiczna, Aplikacja bankowa, Edytor kodu i Asystent czatu AI +- **Interaktywne quizy**: 48 quizów po 3 pytania każdy (oceny przed i po lekcji) +- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na ponad 50 języków przez GitHub Actions +- **Technologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (dla projektów AI) ### Architektura -- Repozytorium edukacyjne o strukturze lekcji +- Edukacyjne repozytorium z strukturą opartą na lekcjach - Każdy folder lekcji zawiera README, przykłady kodu i rozwiązania -- Samodzielne projekty w oddzielnych katalogach (quiz-app, różne projekty lekcyjne) +- Samodzielne projekty w osobnych katalogach (quiz-app, różne projekty lekcyjne) - System tłumaczeń wykorzystujący GitHub Actions (co-op-translator) - Dokumentacja serwowana przez Docsify i dostępna jako PDF -## Komendy instalacyjne +## Komendy konfiguracji -To repozytorium służy głównie do korzystania z treści edukacyjnych. Aby pracować z konkretnymi projektami: +To repozytorium jest głównie do konsumpcji treści edukacyjnych. Do pracy z konkretnymi projektami: -### Instalacja głównego repozytorium +### Konfiguracja repozytorium głównego ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - -### Instalacja Quiz App (Vue 3 + Vite) + +### Konfiguracja aplikacji Quiz (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Uruchom serwer deweloperski -npm run build # Buduj do produkcji +npm run build # Kompiluj do produkcji npm run lint # Uruchom ESLint ``` - -### API Bankowego Projektu (Node.js + Express) + +### API projektu bankowego (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # Uruchom serwer API npm run lint # Uruchom ESLint -npm run format # Sformatuj za pomocą Prettier +npm run format # Formatuj za pomocą Prettier ``` - -### Projekty Rozszerzeń Przeglądarki + +### Projekty rozszerzenia przeglądarki ```bash cd 5-browser-extension/solution npm install # Postępuj zgodnie z instrukcjami ładowania rozszerzeń specyficznymi dla przeglądarki ``` - -### Projekty Gry Kosmicznej + +### Projekty gry kosmicznej ```bash cd 6-space-game/solution npm install # Otwórz index.html w przeglądarce lub użyj Live Server ``` - -### Projekt Czatowy (Backend Python) + +### Projekt czatu (backend Python) ```bash cd 9-chat-project/solution/backend/python @@ -75,16 +75,16 @@ pip install openai # Ustaw zmienną środowiskową GITHUB_TOKEN python api.py ``` + +## Przebieg rozwoju -## Przepływ pracy developmentu - -### Dla współtwórców treści +### Dla osób dodających treści 1. **Sforkuj repozytorium** na swoje konto GitHub -2. **Sklonuj swój fork** lokalnie -3. **Utwórz nową gałąź** na zmiany -4. Wprowadzaj zmiany w treściach lekcji lub przykładach kodu -5. Testuj zmiany kodu w odpowiednich katalogach projektów +2. **Sklonuj swoją kopię** lokalnie +3. **Utwórz nową gałąź** dla swoich zmian +4. Wprowadź zmiany w treści lekcji lub przykładach kodu +5. Przetestuj zmieniany kod w odpowiednich katalogach projektów 6. Prześlij pull requesty zgodnie z wytycznymi współpracy ### Dla uczących się @@ -92,93 +92,93 @@ python api.py 1. Sforkuj lub sklonuj repozytorium 2. Przechodź kolejno do katalogów lekcji 3. Czytaj pliki README dla każdej lekcji -4. Wykonuj quizy przed lekcją na https://ff-quizzes.netlify.app/web/ -5. Pracuj na przykładach kodu w folderach lekcji -6. Realizuj zadania i wyzwania -7. Wykonuj quizy po zakończeniu lekcji +4. Wypełnij quizy przed lekcją na https://ff-quizzes.netlify.app/web/ +5. Pracuj nad przykładami kodu w folderach lekcji +6. Wykonaj zadania i wyzwania +7. Przystąp do quizów po lekcji -### Środowisko deweloperskie live +### Praca na żywo - **Dokumentacja**: Uruchom `docsify serve` w katalogu głównym (port 3000) -- **Quiz App**: Uruchom `npm run dev` w katalogu quiz-app -- **Projekty**: Użyj rozszerzenia VS Code Live Server do projektów HTML +- **Aplikacja Quiz**: Uruchom `npm run dev` w katalogu quiz-app +- **Projekty**: Użyj rozszerzenia VS Code Live Server dla projektów HTML - **Projekty API**: Uruchom `npm start` w odpowiednich katalogach API ## Instrukcje testowania -### Testowanie Quiz App +### Testowanie aplikacji Quiz ```bash cd quiz-app npm run lint # Sprawdź problemy ze stylem kodu -npm run build # Zweryfikuj, czy budowanie zakończy się sukcesem +npm run build # Zweryfikuj pomyślność kompilacji ``` - -### Testowanie API Bankowego + +### Testowanie API bankowego ```bash cd 7-bank-project/api npm run lint # Sprawdź problemy ze stylem kodu -node server.js # Sprawdź, czy serwer uruchamia się bez błędów +node server.js # Zweryfikuj, czy serwer uruchamia się bez błędów ``` - + ### Ogólne podejście do testowania -- To jest repozytorium edukacyjne bez zaawansowanych automatycznych testów -- Testowanie manualne skupia się na: - - Poprawnym działaniu przykładów kodu - - Prawidłowo działających linkach w dokumentacji - - Udanym budowaniu projektów - - Przykładach zgodnych z dobrymi praktykami +- To jest repozytorium edukacyjne bez kompleksowych testów automatycznych +- Testowanie manualne koncentruje się na: + - Przykłady kodu działają bez błędów + - Linki w dokumentacji działają prawidłowo + - Budowy projektów wykonują się poprawnie + - Przykłady przestrzegają najlepszych praktyk -### Sprawdzenia przed wysłaniem +### Sprawdzenia przed zatwierdzeniem -- Uruchom `npm run lint` w katalogach zawierających package.json +- Uruchom w katalogach z package.json `npm run lint` - Zweryfikuj poprawność linków markdown -- Przetestuj przykłady kodu w przeglądarce lub Node.js -- Sprawdź, czy tłumaczenia zachowują odpowiednią strukturę +- Testuj przykłady kodu w przeglądarce lub Node.js +- Sprawdź czy tłumaczenia zachowują odpowiednią strukturę -## Wytyczne dotyczące stylu kodu +## Wytyczne stylu kodu ### JavaScript -- Stosuj nowoczesną składnię ES6+ -- Przestrzegaj standardowych konfiguracji ESLint dostarczonych w projektach -- Używaj znaczących nazw zmiennych i funkcji dla jasności edukacyjnej -- Dodawaj komentarze tłumaczące koncepcje dla uczących się -- Formatowanie przy użyciu Prettier tam, gdzie to skonfigurowane +- Używaj nowoczesnej składni ES6+ +- Przestrzegaj standardowej konfiguracji ESLint oferowanej w projektach +- Nadawaj znaczące nazwy zmiennym i funkcjom dla czytelności edukacyjnej +- Dodawaj komentarze tłumaczące koncepcje dla uczniów +- Formatowanie używaj Prettier tam, gdzie jest skonfigurowany ### HTML/CSS - Semantyczne elementy HTML5 - Zasady responsywnego designu -- Jasne konwencje nazewnictwa klas -- Komentarze wyjaśniające techniki CSS dla uczących się +- Jasne nazewnictwo klas +- Komentarze tłumaczące techniki CSS dla uczniów ### Python -- Wytyczne stylu PEP 8 +- Zasady stylu PEP 8 - Jasne, edukacyjne przykłady kodu -- Adnotacje typów tam, gdzie pomagają w nauce +- W razie potrzeby wskazówki typów dla nauki ### Dokumentacja Markdown -- Przejrzysta hierarchia nagłówków -- Bloki kodu z określeniem języka +- Jasna hierarchia nagłówków +- Bloki kodu z podaniem języka - Linki do dodatkowych zasobów - Zrzuty ekranu i obrazy w katalogach `images/` -- Tekst alternatywny dla obrazów, dla dostępności +- Teksty alternatywne dla obrazów zapewniające dostępność ### Organizacja plików -- Lekcje ponumerowane po kolei (1-getting-started-lessons, 2-js-basics, itd.) -- Każdy projekt ma katalog `solution/` i często `start/` lub `your-work/` -- Obrazy w folderach `images/` specyficznych dla lekcji -- Tłumaczenia w strukturze `translations/{kod-języka}/` +- Lekcje ponumerowane kolejno (1-getting-started-lessons, 2-js-basics itd.) +- Każdy projekt ma katalogi `solution/` i często `start/` lub `your-work/` +- Obrazy przechowywane w folderach `images/` specyficznych dla lekcji +- Tłumaczenia w strukturze `translations/{language-code}/` -## Budowa i wdrożenie +## Budowanie i wdrażanie -### Wdrożenie Quiz App (Azure Static Web Apps) +### Wdrażanie aplikacji Quiz (Azure Static Web Apps) quiz-app jest skonfigurowany do wdrożenia na Azure Static Web Apps: @@ -187,92 +187,92 @@ cd quiz-app npm run build # Tworzy folder dist/ # Wdraża za pomocą workflow GitHub Actions przy pushu do main ``` - + Konfiguracja Azure Static Web Apps: - **Lokalizacja aplikacji**: `/quiz-app` - **Lokalizacja wynikowa**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Generowanie PDF dokumentacji +### Generowanie dokumentacji PDF ```bash npm install # Zainstaluj docsify-to-pdf -npm run convert # Wygeneruj PDF z docs +npm run convert # Wygeneruj plik PDF z dokumentów ``` - + ### Dokumentacja Docsify ```bash npm install -g docsify-cli # Zainstaluj Docsify globalnie docsify serve # Serwuj na localhost:3000 ``` + +### Budowy specyficzne dla projektów -### Budowa poszczególnych projektów - -Każdy katalog projektu może mieć własny proces budowy: -- Projekty Vue: `npm run build` tworzy produkcyjne bundlery -- Projekty statyczne: brak kroku budowy, pliki podawane bezpośrednio +Każdy katalog projektowy może mieć własny proces budowy: +- Projekty Vue: `npm run build` tworzy paczki produkcyjne +- Projekty statyczne: brak kroku budowy, służenie plików bezpośrednio -## Wytyczne dotyczące pull requestów +## Wytyczne do pull requestów ### Format tytułu Używaj jasnych, opisowych tytułów wskazujących obszar zmian: -- `[Quiz-app] Dodaj nowy quiz do lekcji X` +- `[Quiz-app] Dodaj nowy quiz dla lekcji X` - `[Lesson-3] Popraw literówkę w projekcie terrarium` - `[Translation] Dodaj tłumaczenie na hiszpański dla lekcji 5` -- `[Docs] Aktualizuj instrukcje instalacji` +- `[Docs] Aktualizuj instrukcje konfiguracji` ### Wymagane sprawdzenia -Przed wysłaniem PR: +Przed przesłaniem PR: 1. **Jakość kodu**: - Uruchom `npm run lint` w dotkniętych katalogach projektów - - Napraw wszystkie błędy i ostrzeżenia lint + - Napraw wszystkie błędy i ostrzeżenia 2. **Weryfikacja budowy**: - - Uruchom `npm run build` jeśli dotyczy - - Upewnij się, że nie ma błędów podczas kompilacji + - Uruchom `npm run build`, jeśli dotyczy + - Upewnij się, że nie występują błędy budowy -3. **Weryfikacja linków**: +3. **Walidacja linków**: - Przetestuj wszystkie linki markdown - - Sprawdź odwołania do obrazów + - Zweryfikuj, czy odwołania do obrazów działają 4. **Przegląd treści**: - Sprawdź pisownię i gramatykę - Upewnij się, że przykłady kodu są poprawne i edukacyjne - - Zweryfikuj, czy tłumaczenia zachowują oryginalne znaczenie + - Zweryfikuj, że tłumaczenia zachowują oryginalne znaczenie ### Wymagania dotyczące współpracy -- Zaakceptuj Microsoft CLA (automatyczna weryfikacja podczas pierwszego PR) -- Przestrzegaj [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Zobacz [CONTRIBUTING.md](./CONTRIBUTING.md) po szczegółowe wytyczne -- Odwołuj się do numerów issue w opisie PR, jeśli dotyczy +- Zgoda na Microsoft CLA (automatyczna kontrola przy pierwszym PR) +- Przestrzeganie [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Szczegóły w [CONTRIBUTING.md](./CONTRIBUTING.md) +- Jeśli stosowne, uwzględniaj numery issue w opisie PR ### Proces przeglądu -- PR-y są przeglądane przez opiekunów i społeczność -- Priorytetem jest przejrzystość edukacyjna -- Przykłady kodu powinny stosować aktualne najlepsze praktyki -- Tłumaczenia są weryfikowane pod kątem dokładności i kulturowej adekwatności +- PRy przeglądane przez opiekunów i społeczność +- Priorytetem jest jasność edukacyjna +- Przykłady kodu powinny przestrzegać aktualnych najlepszych praktyk +- Tłumaczenia poddawane przeglądowi pod kątem dokładności i adekwatności kulturowej ## System tłumaczeń -### Automatyczne tłumaczenia +### Tłumaczenia automatyczne -- Używa GitHub Actions z workflow co-op-translator -- Automatycznie tłumaczy na ponad 50 języków +- Wykorzystuje GitHub Actions z workflow co-op-translator +- Automatyczne tłumaczenia na ponad 50 języków - Pliki źródłowe w głównych katalogach -- Pliki tłumaczone w katalogach `translations/{kod-języka}/` +- Przetłumaczone pliki w folderach `translations/{language-code}/` -### Dodawanie ręcznych poprawek tłumaczeń +### Dodawanie ręcznych ulepszeń tłumaczeń -1. Znajdź plik w `translations/{kod-języka}/` -2. Wprowadź poprawki zachowując strukturę +1. Znajdź plik w `translations/{language-code}/` +2. Wprowadź poprawki, zachowując strukturę 3. Upewnij się, że przykłady kodu działają poprawnie -4. Przetestuj lokalizowane treści quizów +4. Przetestuj przetłumaczone treści quizów ### Metadane tłumaczeń @@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA: } --> ``` - + ## Debugowanie i rozwiązywanie problemów ### Typowe problemy -**Quiz app nie startuje**: -- Sprawdź wersję Node.js (zalecane v14+) +**Aplikacja quiz nie uruchamia się:** +- Sprawdź wersję Node.js (zalecana v14+) - Usuń `node_modules` i `package-lock.json`, uruchom ponownie `npm install` - Sprawdź konflikty portów (domyślnie Vite używa portu 5173) -**Serwer API nie startuje**: -- Zweryfikuj wersję Node.js (node >=10) +**Serwer API nie startuje:** +- Upewnij się, że wersja Node.js jest co najmniej 10 - Sprawdź, czy port nie jest zajęty -- Upewnij się, że wszystkie zależności zainstalowane (`npm install`) +- Zweryfikuj instalację wszystkich zależności (`npm install`) -**Rozszerzenie przeglądarki się nie ładuje**: -- Sprawdź poprawność pliku manifest.json +**Rozszerzenie przeglądarki się nie ładuje:** +- Sprawdź poprawność manifest.json - Sprawdź konsolę przeglądarki pod kątem błędów -- Postępuj zgodnie z instrukcjami instalacji specyficznymi dla przeglądarki +- Postępuj zgodnie z instrukcjami instalacji dla konkretnej przeglądarki -**Problemy z projektem czatu w Pythonie**: -- Upewnij się, że pakiet OpenAI jest zainstalowany: `pip install openai` -- Sprawdź, czy zmienna środowiskowa GITHUB_TOKEN jest ustawiona -- Zweryfikuj uprawnienia dostępu do GitHub Models +**Problemy z projektem czatu Python:** +- Sprawdź, czy pakiet OpenAI jest zainstalowany: `pip install openai` +- Upewnij się, że zmienna środowiskowa GITHUB_TOKEN jest ustawiona +- Zweryfikuj uprawnienia dostępu do modeli GitHub -**Docsify nie serwuje dokumentacji**: +**Docsify nie serwuje dokumentacji:** - Zainstaluj docsify-cli globalnie: `npm install -g docsify-cli` - Uruchom z katalogu głównego repozytorium -- Sprawdź, czy istnieje `docs/_sidebar.md` +- Sprawdź, czy istnieje plik `docs/_sidebar.md` -### Wskazówki dotyczące środowiska developerskiego +### Wskazówki dotyczące środowiska deweloperskiego -- Używaj VS Code z rozszerzeniem Live Server do projektów HTML +- Używaj VS Code z rozszerzeniem Live Server dla projektów HTML - Zainstaluj rozszerzenia ESLint i Prettier dla spójnego formatowania -- Używaj DevTools przeglądarki do debugowania JavaScript -- W projektach Vue zainstaluj rozszerzenie Vue DevTools do przeglądarki +- Korzystaj z narzędzi DevTools w przeglądarce do debugowania JavaScript +- Dla projektów Vue zainstaluj Vue DevTools jako rozszerzenie przeglądarki -### Aspekty wydajności +### Wydajność -- Duża liczba przetłumaczonych plików (50+ języków) oznacza duże klony pełne -- Używaj płytkiego klonu, jeśli pracujesz tylko na treści: `git clone --depth 1` -- Wyklucz tłumaczenia z wyszukiwań podczas pracy nad angielską zawartością -- Procesy budowy mogą być wolne przy pierwszym uruchomieniu (npm install, budowa Vite) +- Duża liczba tłumaczonych plików (50+ języków) powoduje duże pełne klony +- Używaj klonowania płytkiego, jeśli pracujesz tylko nad treścią: `git clone --depth 1` +- Wyłącz tłumaczenia w wyszukiwaniu podczas pracy nad treściami angielskimi +- Procesy budowy mogą być powolne przy pierwszym uruchomieniu (npm install, build Vite) ## Aspekty bezpieczeństwa ### Zmienne środowiskowe -- Klucze API nigdy nie powinny być commitowane do repozytorium +- Klucze API nigdy nie powinny być zatwierdzane do repozytorium - Używaj plików `.env` (już w `.gitignore`) -- Udokumentuj wymagane zmienne środowiskowe w README projektów +- Wymagane zmienne środowiskowe dokumentuj w README projektów ### Projekty Python - Używaj środowisk wirtualnych: `python -m venv venv` - Aktualizuj zależności -- Tokeny GitHub powinny mieć minimalne potrzebne uprawnienia +- Tokeny GitHub powinny mieć minimalne wymagane uprawnienia -### Dostęp do GitHub Models +### Dostęp do modeli GitHub -- Wymagane Personal Access Tokens (PAT) do GitHub Models +- Wymagane osobiste tokeny dostępu (PAT) dla modeli GitHub - Tokeny przechowuj jako zmienne środowiskowe -- Nigdy nie commituj tokenów ani danych uwierzytelniających +- Nigdy nie zatwierdzaj tokenów ani haseł ## Dodatkowe uwagi ### Grupa docelowa -- Całkowicie początkujący w web development -- Studenci i samoucy -- Nauczyciele korzystający z programu w klasach -- Treści zaprojektowane z myślą o dostępności i stopniowym rozwijaniu umiejętności +- Kompletnych początkujących w tworzeniu stron internetowych +- Studentów i samouków +- Nauczycieli wykorzystujących program w klasach +- Treści zaprojektowane z myślą o dostępności i stopniowym budowaniu umiejętności ### Filozofia edukacyjna -- Podejście oparte na projektach -- Częste sprawdzanie wiedzy (quizy) -- Ćwiczenia praktyczne z kodowaniem -- Przykłady zastosowań z rzeczywistego świata +- Podejście oparte na nauce przez projekty +- Częste sprawdziany wiedzy (quizy) +- Praktyczne ćwiczenia kodowania +- Przykłady zastosowań w rzeczywistych sytuacjach - Skupienie na podstawach przed frameworkami ### Utrzymanie repozytorium - Aktywna społeczność uczących się i współtwórców - Regularne aktualizacje zależności i treści -- Monitorowanie zgłoszeń i dyskusji przez opiekunów +- Monitorowanie issue i dyskusji przez opiekunów - Automatyczne aktualizacje tłumaczeń przez GitHub Actions ### Powiązane zasoby -- [Microsoft Learn modules](https://docs.microsoft.com/learn/) -- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) +- [Moduły Microsoft Learn](https://docs.microsoft.com/learn/) +- [Zasoby Student Hub](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) polecany dla uczących się -- Dodatkowe kursy: Generative AI, Data Science, ML, IoT dostępne +- Dodatkowe kursy: Generatywna AI, Data Science, ML, IoT ### Praca z konkretnymi projektami -Szczegółowe instrukcje dotyczące pojedynczych projektów dostępne w plikach README w: +Szczegółowe instrukcje dotyczące konkretnych projektów znajdują się w README: - `quiz-app/README.md` - aplikacja quizowa Vue 3 - `7-bank-project/README.md` - aplikacja bankowa z uwierzytelnianiem -- `5-browser-extension/README.md` - rozwój rozszerzeń przeglądarki -- `6-space-game/README.md` - tworzenie gry na Canvas +- `5-browser-extension/README.md` - rozwój rozszerzenia przeglądarki +- `6-space-game/README.md` - gra oparta na canvas - `9-chat-project/README.md` - projekt asystenta czatu AI ### Struktura monorepo -Chociaż nie jest to tradycyjne monorepo, to repozytorium zawiera wiele niezależnych projektów: +Choć to nie tradycyjne monorepo, repozytorium zawiera wiele niezależnych projektów: - Każda lekcja jest samodzielna -- Projekty nie współdzielą zależności -- Pracuj nad pojedynczymi projektami bez wpływu na inne -- Sklonuj całe repo dla pełnego doświadczenia programu nauczania +- Projekty nie dzielą zależności +- Pracuj nad indywidualnymi projektami bez wpływu na inne +- Sklonuj całe repo dla pełnego doświadczenia programu nauczania --- -**Zastrzeżenie**: -Niniejszy dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że dążymy do dokładności, prosimy mieć na uwadze, że tłumaczenia automatyczne mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za źródło wiarygodne. W przypadku informacji krytycznych zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia. +**Zastrzeżenie**: +Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczeń AI [Co-op Translator](https://github.com/Azure/co-op-translator). Choć dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym należy traktować jako źródło autorytatywne. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia. \ No newline at end of file diff --git a/translations/pl/README.md b/translations/pl/README.md index e8350b25e..3284d6e09 100644 --- a/translations/pl/README.md +++ b/translations/pl/README.md @@ -10,35 +10,45 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Tworzenie stron internetowych dla początkujących - program nauczania +# Tworzenie stron internetowych dla początkujących - Program nauczania -Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu kompleksowemu kursowi prowadzonemu przez Microsoft Cloud Advocates. Każda z 24 lekcji zanurza się w JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Angażuj się w quizy, dyskusje i zadania praktyczne. Rozwijaj swoje umiejętności i optymalizuj utrwalanie wiedzy dzięki naszej efektywnej pedagogice opartej na projektach. Rozpocznij swoją przygodę z kodowaniem już dziś! +Naucz się podstaw tworzenia stron internetowych z naszym 12-tygodniowym, kompleksowym kursem prowadzonym przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia się w JavaScript, CSS i HTML przez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Weź udział w quizach, dyskusjach i praktycznych zadaniach. Zwiększ swoje umiejętności i zoptymalizuj przyswajanie wiedzy dzięki naszej skutecznej metodzie nauczania opartej na projektach. Rozpocznij swoją przygodę z kodowaniem już dziś! Dołącz do społeczności Azure AI Foundry na Discordzie [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Wykonaj te kroki, aby zacząć korzystać z tych zasobów: -1. **Utwórz forka repozytorium**: Kliknij [![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) +Wykonaj poniższe kroki, aby rozpocząć korzystanie z tych zasobów: +1. **Zrób fork repozytorium**: Kliknij [![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. **Sklonuj repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Dołącz do Azure AI Foundry na Discordzie i spotkaj ekspertów oraz innych programistów**](https://discord.com/invite/ByRwuEEgH4) +3. [**Dołącz do Discorda Azure AI Foundry i spotkaj ekspertów oraz innych programistów**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Obsługa wielu języków #### Wsparcie poprzez GitHub Action (automatyczne i zawsze aktualne) -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](./README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) +[Arabski](../ar/README.md) | [Bengalski](../bn/README.md) | [Bułgarski](../bg/README.md) | [Birmański (Myanmar)](../my/README.md) | [Chiński (uproszczony)](../zh-CN/README.md) | [Chiński (tradycyjny, Hong Kong)](../zh-HK/README.md) | [Chiński (tradycyjny, Makau)](../zh-MO/README.md) | [Chiński (tradycyjny, Tajwan)](../zh-TW/README.md) | [Chorwacki](../hr/README.md) | [Czeski](../cs/README.md) | [Duński](../da/README.md) | [Niderlandzki](../nl/README.md) | [Estoński](../et/README.md) | [Fiński](../fi/README.md) | [Francuski](../fr/README.md) | [Niemiecki](../de/README.md) | [Grecki](../el/README.md) | [Hebrajski](../he/README.md) | [Hindi](../hi/README.md) | [Węgierski](../hu/README.md) | [Indonezyjski](../id/README.md) | [Włoski](../it/README.md) | [Japoński](../ja/README.md) | [Kannada](../kn/README.md) | [Koreański](../ko/README.md) | [Litewski](../lt/README.md) | [Malajski](../ms/README.md) | [Malajalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalski](../ne/README.md) | [Nigeryjski pidgin](../pcm/README.md) | [Norweski](../no/README.md) | [Perski (Farsi)](../fa/README.md) | [Polski](./README.md) | [Portugalski (Brazylia)](../pt-BR/README.md) | [Portugalski (Portugalia)](../pt-PT/README.md) | [Pendżabski (Gurmukhi)](../pa/README.md) | [Rumuński](../ro/README.md) | [Rosyjski](../ru/README.md) | [Serbski (cyrylica)](../sr/README.md) | [Słowacki](../sk/README.md) | [Słoweński](../sl/README.md) | [Hiszpański](../es/README.md) | [Suahili](../sw/README.md) | [Szwedzki](../sv/README.md) | [Tagalog (filipiński)](../tl/README.md) | [Tamilski](../ta/README.md) | [Telugu](../te/README.md) | [Tajski](../th/README.md) | [Turecki](../tr/README.md) | [Ukraiński](../uk/README.md) | [Urdu](../ur/README.md) | [Wietnamski](../vi/README.md) > **Wolisz klonować lokalnie?** - -> To repozytorium zawiera ponad 50 tłumaczeń językowych, co znacznie zwiększa rozmiar pobierania. Aby klonować bez tłumaczeń, użyj sparse checkout: +> +> To repozytorium zawiera ponad 50 tłumaczeń, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> To da Ci wszystko, czego potrzebujesz do ukończenia kursu z dużo szybszym pobieraniem. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Dzięki temu otrzymasz wszystko, czego potrzebujesz, aby ukończyć kurs, z dużo szybszym pobieraniem. **Jeśli chcesz, aby obsługiwane były dodatkowe języki tłumaczeń, są one wymienione [tutaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** @@ -47,32 +57,32 @@ Wykonaj te kroki, aby zacząć korzystać z tych zasobów: #### 🧑‍🎓 _Jesteś studentem?_ -Odwiedź [**Stronę Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz zasoby dla początkujących, pakiety dla studentów, a nawet sposoby na uzyskanie darmowego vouchera na certyfikat. To jest strona, którą warto dodać do zakładek i od czasu do czasu sprawdzać, ponieważ co miesiąc zmieniamy zawartość. +Odwiedź [**Stronę Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz materiały dla początkujących, pakiety dla studentów, a nawet sposoby na zdobycie darmowego vouchera na certyfikat. To strona, którą warto mieć w zakładkach i odwiedzać od czasu do czasu, ponieważ co miesiąc wymieniamy jej zawartość. -### 📣 Ogłoszenie - Nowe wyzwania trybu GitHub Copilot Agent do wykonania! +### 📣 Ogłoszenie - nowe wyzwania trybu agenta GitHub Copilot do wykonania! -Dodano nowe wyzwanie, szukaj "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie do wykonania przy użyciu GitHub Copilot i trybu Agenta. Jeśli nie korzystałeś wcześniej z trybu Agenta, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, uruchamiać polecenia i więcej. +Dodano nowe wyzwanie, szukaj "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie do wykonania za pomocą GitHub Copilot i trybu agenta. Jeśli jeszcze nie korzystałeś z trybu agenta, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, uruchamiać polecenia i wiele więcej. -### 📣 Ogłoszenie - _Nowy projekt do realizacji z wykorzystaniem Generatywnej AI_ +### 📣 Ogłoszenie - _Nowy projekt do zbudowania za pomocą Generative AI_ Dodano nowy projekt AI Assistant, sprawdź [projekt](./9-chat-project/README.md) -### 📣 Ogłoszenie - _Nowy program nauczania_ o Generatywnej AI dla JavaScript właśnie został wydany +### 📣 Ogłoszenie - _Nowy program nauczania_ dotyczący Generative AI dla JavaScript właśnie został wydany -Nie przegap naszego nowego programu nauczania Generatywnej AI! +Nie przegap naszego nowego kursu Generative AI! Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć! ![Background](../../translated_images/pl/background.148a8d43afde5730.webp) -- Lekcje obejmujące wszystko od podstaw po RAG. +- Lekcje obejmujące wszystko, od podstaw po RAG. - Interakcja z postaciami historycznymi za pomocą GenAI i naszej aplikacji towarzyszącej. -- Zabawa i angażująca narracja, będziesz podróżować w czasie! +- Zabawa i wciągająca narracja, będziesz podróżować w czasie! ![character](../../translated_images/pl/character.5c0dd8e067ffd693.webp) -Każda lekcja zawiera zadanie do wykonania, test wiedzy i wyzwanie, które pokierują Cię w nauce tematów takich jak: +Każda lekcja zawiera zadanie do wykonania, sprawdzenie wiedzy i wyzwanie, które pomoże Ci w nauce tematów takich jak: - Promptowanie i inżynieria promptów - Generowanie aplikacji tekstowych i obrazkowych - Aplikacje wyszukujące @@ -81,133 +91,132 @@ Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby z -## 🌱 Rozpoczęcie +## 🌱 Rozpoczęcie pracy -> **Nauczyciele**, przygotowaliśmy [kilka sugestii](for-teachers.md) dotyczących korzystania z tego programu nauczania. Liczymy na Wasze opinie [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Nauczyciele**, zamieściliśmy [kilka sugestii](for-teachers.md) na temat wykorzystania tego programu nauczania. Chętnie poznamy Wasze opinie [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, do każdej lekcji zacznij od quizu wstępnego, a następnie przeczytaj materiał wykładu, wykonaj różne aktywności i sprawdź swoje rozumienie w quizie podsumowującym. +**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, do każdej lekcji zacznijcie od quizu przed wykładem, następnie przeczytajcie materiał wykładowy, wykonajcie różne zadania i sprawdźcie swoją wiedzę za pomocą quizu po wykładzie. -Aby wzmocnić swoją naukę, łącz się z kolegami i koleżankami, aby pracować nad projektami razem! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie nasz zespół moderatorów jest dostępny, aby odpowiadać na Wasze pytania. +Aby wzbogacić swoje doświadczenie edukacyjne, łączcie się z rówieśnikami, aby wspólnie pracować nad projektami! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie nasz zespół moderatorów chętnie odpowie na Wasze pytania. -Aby pogłębić edukację, zdecydowanie polecamy zapoznanie się z [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) po dodatkowe materiały do nauki. +Dla pogłębienia wiedzy zdecydowanie polecamy zapoznanie się z [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) i dodatkowymi materiałami edukacyjnymi. ### 📋 Konfiguracja środowiska -Ten program nauczania ma gotowe środowisko do programowania! Na start możesz wybrać uruchomienie go w [Codespace](https://github.com/features/codespaces/) (_środowisku przeglądarkowym, bez konieczności instalacji_), lub lokalnie na swoim komputerze z użyciem edytora tekstu, takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Ten program nauczania ma gotowe do użycia środowisko programistyczne! Podczas rozpoczęcia możesz wybrać uruchomienie kursu w [Codespace](https://github.com/features/codespaces/) (_środowisko działające w przeglądarce, bez potrzeby instalacji_), lub lokalnie na komputerze, używając edytora tekstu takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Utwórz własne repozytorium -Aby łatwo zapisywać swoją pracę, zalecamy utworzenie własnej kopii tego repozytorium. Możesz to zrobić klikając przycisk **Use this template** na górze strony. Spowoduje to utworzenie nowego repozytorium na Twoim koncie GitHub z kopią programu nauczania. +Aby łatwo zapisywać swoją pracę, zalecamy utworzenie własnej kopii tego repozytorium. Możesz to zrobić, klikając przycisk **Use this template** na górze strony. Stworzy to nowe repozytorium na Twoim koncie GitHub z kopią programu nauczania. Wykonaj następujące kroki: -1. **Utwórz forka repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony. +1. **Zrób fork repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony. 2. **Sklonuj repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Uruchamianie programu nauczania w Codespace +#### Uruchamianie kursu w Codespace -W swojej kopii tego repozytorium, które utworzyłeś, kliknij przycisk **Code** i wybierz **Open with Codespaces**. Spowoduje to utworzenie nowego Codespace do pracy. +W swojej kopii repozytorium, którą utworzyłeś, kliknij przycisk **Code** i wybierz **Open with Codespaces**. Utworzy to dla Ciebie nowe środowisko Codespace do pracy. ![Codespace](../../translated_images/pl/createcodespace.0238bbf4d7a8d955.webp) -#### Uruchamianie programu nauczania lokalnie na komputerze - -Aby uruchomić ten program nauczania lokalnie na swoim komputerze, potrzebujesz edytora tekstu, przeglądarki oraz narzędzia wiersza polecenia. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi](../../1-getting-started-lessons/1-intro-to-programming-languages), poprowadzi Cię przez różne opcje tych narzędzi, abyś mógł wybrać najlepsze dla siebie. - -Polecamy używać [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który ma również wbudowany [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Możesz pobrać Visual Studio Code [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +#### Uruchamianie kursu lokalnie na swoim komputerze +Aby uruchomić ten kurs lokalnie na komputerze, będziesz potrzebować edytora tekstu, przeglądarki oraz narzędzia wiersza poleceń. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi](../../1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi cię przez różne opcje każdego z tych narzędzi, abyś mógł wybrać to, co najlepiej ci odpowiada. +Naszą rekomendacją jest używanie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który zawiera również wbudowany [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code możesz pobrać [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Sklonuj swoje repozytorium na komputer. Możesz to zrobić, klikając przycisk **Code** i kopiując URL: [CodeSpace](./images/createcodespace.png) - Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zastępując `` adresem URL, który właśnie skopiowałeś: + + Następnie, otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zastępując `` URL-em, który właśnie skopiowałeś: ```bash git clone ``` -2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **Plik** > **Otwórz folder** i wybierając właśnie sklonowany folder. +2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **File** > **Open Folder** i wybierając właśnie sklonowany folder. > Zalecane rozszerzenia Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - do podglądu stron HTML w Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pomaga pisać kod szybciej +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aby pomóc pisać kod szybciej ## 📂 Każda lekcja zawiera: -- opcjonalną sketchnotkę -- opcjonalne uzupełniające wideo +- opcjonalną szkicówkę +- opcjonalne dodatkowe wideo - quiz rozgrzewkowy przed lekcją -- lekcję tekstową -- w lekcjach opartych na projekcie, szczegółowe przewodniki krok po kroku jak zbudować projekt -- testy wiedzy +- lekcję pisaną +- w lekcjach projektowych, przewodniki krok po kroku jak zbudować projekt +- sprawdziany wiedzy - wyzwanie -- uzupełniającą lekturę +- dodatkowe materiały do czytania - zadanie domowe - [quiz po lekcji](https://ff-quizzes.netlify.app/web/) -> **Uwagi o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne [tutaj](https://ff-quizzes.netlify.app/web/), aplikację quizową można uruchomić lokalnie lub wdrożyć do Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`. +> **Informacja o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne [tutaj](https://ff-quizzes.netlify.app/web/), aplikację quizową można uruchomić lokalnie lub wdrożyć na Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`. ## 🗃️ Lekcje -| | Nazwa projektu | Nauczane koncepcje | Cele nauki | Powiązana lekcja | Autor | -| :-: | :-------------------------------------------------------: | :----------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Zacznijmy | Wprowadzenie do programowania i narzędzi używanych w branży | Poznaj podstawy programowania oraz oprogramowanie pomagające profesjonalnym programistom w pracy | [Wprowadzenie do języków programowania i narzędzi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Zacznijmy | Podstawy GitHuba, praca zespołowa | Jak używać GitHuba w projekcie, jak współpracować z innymi nad kodem | [Wprowadzenie do GitHuba](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Zacznijmy | Dostępność | Naucz się podstaw dostępności stron internetowych | [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Podstawy JS | Typy danych w JavaScript | Podstawy typów danych w JavaScript | [Typy danych](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Podstawy JS | Funkcje i metody | Poznaj funkcje i metody służące do zarządzania logiką aplikacji | [Funkcje i metody](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher | -| 06 | Podstawy JS | Podejmowanie decyzji z JS | Naucz się tworzyć warunki w swoim kodzie przy użyciu metod podejmowania decyzji | [Podejmowanie decyzji](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Podstawy JS | Tablice i pętle | Pracuj z danymi za pomocą tablic i pętli w JavaScript | [Tablice i pętle](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Zbuduj HTML potrzebny do stworzenia online terrarium, skupiając się na układzie strony | [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Zbuduj CSS, by wystylizować online terrarium, skupiając się na podstawach CSS i responsywności | [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, manipulacja DOM | Zbuduj JavaScript, który pozwoli terrarium działać z funkcją przeciągnij upuść, skupiając się na closures i manipulacji DOM | [JavaScript closures, manipulacja DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Zbuduj grę w pisanie na klawiaturze | Naucz się używać zdarzeń klawiatury do sterowania logiką aplikacji JavaScript | [Programowanie zdarzeniowe](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Praca z przeglądarkami | Naucz się, jak działają przeglądarki, ich historię oraz jak stworzyć pierwsze elementy rozszerzenia przeglądarki | [O przeglądarkach](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tworzenie formularzy, wywoływanie API i przechowywanie zmiennych w local storage | Stwórz elementy JavaScript rozszerzenia przeglądarki do wywoływania API, korzystając ze zmiennych przechowywanych lokalnie | [API, formularze i local storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesy tła w przeglądarce, wydajność www | Użyj procesów tła przeglądarki do zarządzania ikoną rozszerzenia; poznaj optymalizacje poprawiające wydajność | [Procesy tła i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Zaawansowane tworzenie gier w JavaScript | Poznaj dziedziczenie wykorzystujące klasy i kompozycję oraz wzorzec Pub/Sub, w przygotowaniu do budowy gry | [Wprowadzenie do zaawansowanego tworzenia gier](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na kanwie | Poznaj API Canvas do rysowania elementów na ekranie | [Rysowanie na kanwie](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Poruszanie elementów na ekranie | Dowiedz się, jak elementy mogą się poruszać, używając współrzędnych kartezjańskich i API Canvas | [Poruszanie elementami](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, aby elementy zderzały się i reagowały na siebie, używając naciśnięć klawiszy oraz funkcji cooldown dla wydajności gry | [Wykrywanie kolizji](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Liczenie punktów | Wykonuj obliczenia matematyczne na podstawie stanu i wyniku gry | [Liczenie punktów](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Kończenie i restartowanie gry | Naucz się kończyć i restartować grę, w tym sprzątać zasoby i resetować wartości zmiennych | [Warunek zakończenia](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | Szablony HTML i trasy w aplikacji webowej | Naucz się tworzyć szkielet architektury multipage site za pomocą routingu i szablonów HTML | [Szablony HTML i trasy](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Tworzenie formularzy logowania i rejestracji | Dowiedz się, jak budować formularze i obsługiwać walidację | [Formularze](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody pobierania i używania danych | Jak wyglądają przepływy danych w Twojej aplikacji, jak je pobierać, przechowywać i usuwać | [Dane](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepcje zarządzania stanem | Naucz się, jak Twoja aplikacja przechowuje stan i jak nim programowo zarządzać | [Zarządzanie stanem](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Praca z VScode | Naucz się korzystać z edytora kodu | [Używaj edytora kodu VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Praca z AI | Naucz się tworzyć własnego asystenta AI | [Projekt AI Assistant](./9-chat-project/README.md) | Chris | +| | Nazwa Projektu | Nauczane Koncepcje | Cele Edukacyjne | Powiązana Lekcja | Autor | +| :-: | :--------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Getting Started | Wprowadzenie do programowania i narzędzi | Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom w pracy | [Wprowadzenie do języków programowania i narzędzi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Getting Started | Podstawy GitHub, praca zespołowa | Jak używać GitHub w projekcie, jak współpracować z innymi nad kodem | [Wprowadzenie do GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Getting Started | Dostępność | Poznaj podstawy dostępności stron internetowych | [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | Typy danych w JavaScript | Podstawy typów danych w JavaScript | [Typy danych](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | Funkcje i metody | Poznaj funkcje i metody do zarządzania logiką aplikacji | [Funkcje i metody](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher | +| 06 | JS Basics | Podejmowanie decyzji w JS | Naucz się tworzyć warunki w kodzie używając metod podejmowania decyzji | [Podejmowanie decyzji](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | Tablice i pętle | Pracuj z danymi używając tablic i pętli w JavaScript | [Tablice i pętle](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Zbuduj HTML, aby stworzyć internetowe terrarium, koncentrując się na układzie | [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Zbuduj CSS dla stylizacji internetowego terrarium, koncentrując się na podstawach CSS, w tym responsywności | [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript - closury, manipulacja DOM | Zbuduj JavaScript, aby terrarium działało jako interfejs drag/drop, koncentrując się na closurach i manipulacji DOM | [Closury JS i manipulacja DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tworzenie gry pisania na klawiaturze | Naucz się używać zdarzeń klawiatury do sterowania logiką aplikacji JavaScript | [Programowanie sterowane zdarzeniami](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Praca z przeglądarkami | Poznaj działanie przeglądarek, ich historię oraz jak stworzyć pierwsze elementy rozszerzenia przeglądarki | [O przeglądarkach](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tworzenie formularza, wywoływanie API oraz przechowywanie zmiennych | Zbuduj elementy JS swojego rozszerzenia przeglądarki, wywołujące API i korzystające ze zmiennych przechowywanych lokalnie | [API, formularze i lokalna pamięć](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesy w tle w przeglądarce, wydajność sieciowa | Wykorzystaj procesy w tle do zarządzania ikoną rozszerzenia; poznaj optymalizacje i wydajność sieciową | [Zadania w tle i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Zaawansowany rozwój gier JavaScript | Poznaj dziedziczenie używając klas i kompozycji oraz wzorzec Pub/Sub na potrzeby tworzenia gry | [Wprowadzenie do zaawansowanego rozwoju gier](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na canvas | Poznaj API canvas używane do rysowania elementów na ekranie | [Rysowanie na canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Przemieszczanie elementów ekranowych | Odkryj jak elementy mogą nabierać ruchu korzystając ze współrzędnych kartezjańskich i API Canvas | [Przemieszczanie elementów](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, aby elementy ze sobą kolidowały i reagowały na siebie przy pomocy klawiszy, dodaj funkcję cooldown w celu optymalizacji gry | [Wykrywanie kolizji](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Prowadzenie punktacji | Wykonuj obliczenia matematyczne na podstawie stanu i wyników gry | [Prowadzenie wyników](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Zakończenie i restart gry | Poznaj zakończenie i restart gry, w tym czyszczenie zasobów i resetowanie wartości zmiennych | [Warunek zakończenia](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | Szablony HTML i trasy w aplikacji webowej | Naucz się jak tworzyć szkielet architektury wielostronicowej strony internetowej używając tras i szablonów HTML | [Szablony HTML i trasy](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Budowa formularza logowania i rejestracji | Dowiedz się jak budować formularze i obsługiwać walidację | [Formularze](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody pobierania i używania danych | Jak dane przepływają do i z aplikacji, jak je pobierać, przechowywać i usuwać | [Dane](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepcje zarządzania stanem | Naucz się jak aplikacja przechowuje stan i jak nim zarządzać programowo | [Zarządzanie stanem](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Kod przeglądarki / VScode](../../8-code-editor) | Praca z VScode | Naucz się jak używać edytora kodu | [Korzystanie z edytora VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Asystenci AI](./9-chat-project/README.md) | Praca z AI | Naucz się jak zbudować własnego asystenta AI | [Projekt Asystent AI](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogika -Nasz program nauczania opiera się na dwóch kluczowych zasadach pedagogicznych: -* nauka oparta na projektach +Nasz program nauczania opiera się na dwóch kluczowych zasadach: +* nauka przez projekty * częste quizy -Program uczy podstaw JavaScript, HTML i CSS oraz najnowszych narzędzi i technik stosowanych przez dzisiejszych programistów webowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie, tworząc grę do nauki pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu Space Invaders oraz aplikację bankową dla firm. Do końca serii uczniowie zdobędą solidną wiedzę z zakresu tworzenia stron internetowych. +Program uczy podstaw JavaScript, HTML i CSS oraz najnowszych narzędzi i technik używanych przez współczesnych programistów webowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie budując grę pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu Space Invaders oraz aplikację bankową dla firm. Pod koniec cyklu studenci zdobędą solidną wiedzę o tworzeniu stron internetowych. -> 🎓 Możesz zacząć od pierwszych kilku lekcji tego programu jako [Ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn! +> 🎓 Pierwsze lekcje tego programu możesz wziąć jako [Ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na platformie Microsoft Learn! -Zapewnienie zgodności treści z projektami sprawia, że proces nauki jest dla uczniów bardziej angażujący, a utrwalenie koncepcji zostanie wzmocnione. Napisaliśmy też kilka lekcji wprowadzających do podstaw JavaScript, które prezentują koncepcje, a także dołączyliśmy wideo z kolekcji "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", których autorzy przyczynili się do tego programu nauczania. +Dzięki dopasowaniu treści do projektów proces nauki staje się bardziej angażujący dla uczniów, a przyswajanie koncepcji jest skuteczniejsze. Przygotowaliśmy również kilka lekcji wprowadzających do podstaw JavaScript wraz z wideo z kolekcji "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", których autorzy przyczynili się do powstania tego programu nauczania. -Ponadto quiz niskiego ryzyka przed lekcją ustawia intencję ucznia w kierunku nauki tematu, a drugi quiz po zajęciach zapewnia dalsze utrwalenie. Program ma charakter elastyczny i zabawowy i można z niego korzystać w całości lub częściowo. Projekty zaczynają się od prostych i stają się coraz bardziej złożone pod koniec 12-tygodniowego cyklu. +Dodatkowo quiz o niskiej stawce przed zajęciami nastawia ucznia na naukę tematu, a drugi quiz po zajęciach wspiera dalsze utrwalenie materiału. Program został zaprojektowany tak, by był elastyczny i przyjemny, można go realizować w całości lub częściowo. Projekty zaczynają się od małych, prostych i stopniowo stają się coraz bardziej złożone pod koniec 12-tygodniowego cyklu. -Ponieważ świadomie unikamy wprowadzania frameworków JavaScript, koncentrując się na podstawowych umiejętnościach potrzebnych jako programista webowy przed przyjęciem frameworka, dobrym następnym krokiem po ukończeniu tego programu będzie nauka Node.js za pomocą innej kolekcji wideo: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Świadomie unikaliśmy wprowadzania frameworków JavaScript, koncentrując się na podstawowych umiejętnościach potrzebnych programiście webowemu przed przyswojeniem frameworka. Dobrą kolejną lekcją po ukończeniu tego programu będzie nauka Node.js za pomocą innej kolekcji wideo: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Odwiedź nasze wytyczne [Kodeks Postępowania](CODE_OF_CONDUCT.md) oraz [Wkład](CONTRIBUTING.md). Zachęcamy do konstruktywnej opinii! +> Zapoznaj się z naszym [Kodeksem postępowania](CODE_OF_CONDUCT.md) oraz wytycznymi [Contributing](CONTRIBUTING.md). Czekamy na Twoje konstruktywne uwagi! ## 🧭 Dostęp offline -Możesz uruchomić tę dokumentację offline, używając [Docsify](https://docsify.js.org/#/). Rozgałęź ten repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim lokalnym komputerze, a następnie w katalogu głównym repozytorium wpisz `docsify serve`. Strona będzie dostępna na porcie 3000 na localhost: `localhost:3000`. +Możesz uruchomić tę dokumentację offline, korzystając z [Docsify](https://docsify.js.org/#/). Utwórz fork tego repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim komputerze, a następnie w katalogu głównym repozytorium wpisz `docsify serve`. Strona zostanie udostępniona na porcie 3000 na twoim localhost: `localhost:3000`. ## 📘 PDF - -Plik PDF ze wszystkimi lekcjami jest dostępny [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +PDF wszystkich lekcji znajduje się [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Inne kursy -Nasz zespół tworzy inne kursy! Sprawdź: + +Nasz zespół tworzy również inne kursy! Sprawdź: ### LangChain @@ -216,7 +225,7 @@ Nasz zespół tworzy inne kursy! Sprawdź: [![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agents +### Azure / Edge / MCP / Agenci [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) @@ -224,7 +233,7 @@ Nasz zespół tworzy inne kursy! Sprawdź: --- -### Generative AI Series +### Seria Generative AI [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -232,7 +241,7 @@ Nasz zespół tworzy inne kursy! Sprawdź: --- -### Core Learning +### Podstawowe nauczanie [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -243,15 +252,15 @@ Nasz zespół tworzy inne kursy! Sprawdź: --- -### Copilot Series +### Seria Copilot [![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) -## Uzyskanie pomocy +## Uzyskiwanie pomocy -Jeśli utkniesz lub masz pytania dotyczące tworzenia aplikacji AI. Dołącz do innych uczących się i doświadczonych programistów w dyskusjach o MCP. To wspierająca społeczność, gdzie pytania są mile widziane, a wiedza jest swobodnie dzielona. +Jeśli utkniesz lub masz pytania dotyczące tworzenia aplikacji AI, dołącz do innych uczących się i doświadczonych programistów w dyskusjach o MCP. To wspierająca społeczność, w której pytania są mile widziane, a wiedza dzielona jest swobodnie. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) @@ -261,11 +270,11 @@ Jeśli masz uwagi dotyczące produktu lub napotkasz błędy podczas tworzenia, o ## Licencja -To repozytorium jest licencjonowane na warunkach licencji MIT. Szczegóły znajdziesz w pliku [LICENSE](../../LICENSE). +To repozytorium jest objęte licencją MIT. Zobacz plik [LICENSE](../../LICENSE) po więcej informacji. --- **Zastrzeżenie**: -Dokument ten został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy pamiętać, że tłumaczenia automatyczne mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być uznawany za źródło wiarygodne. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia. +Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczeń AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dążymy do dokładności, prosimy pamiętać, że tłumaczenia automatyczne mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym należy traktować jako źródło autorytatywne. W przypadku informacji istotnych zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia. \ No newline at end of file diff --git a/translations/tr/.co-op-translator.json b/translations/tr/.co-op-translator.json index 31472606f..0e57d3927 100644 --- a/translations/tr/.co-op-translator.json +++ b/translations/tr/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-04T00:46:36+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T18:50:19+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "tr" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:10:57+00:00", + "translation_date": "2026-03-06T18:53:47+00:00", "source_file": "AGENTS.md", "language_code": "tr" }, @@ -516,8 +516,8 @@ "language_code": "tr" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:05:45+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T18:46:44+00:00", "source_file": "README.md", "language_code": "tr" }, diff --git a/translations/tr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/tr/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 694090539..60e07a7cb 100644 --- a/translations/tr/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/tr/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ # Programlama Dillerine ve Modern Geliştirici Araçlarına Giriş -Merhaba, geleceğin geliştiricisi! 👋 Sana her gün beni heyecanlandıran bir şey söyleyebilir miyim? Programlamanın sadece bilgisayarlarla ilgili olmadığını, aynı zamanda en çılgın fikirlerini hayata geçirebilmek için gerçek süper güçlere sahip olmakla ilgili olduğunu keşfetmek üzeresin! +Merhaba, geleceğin geliştiricisi! 👋 Sana her gün hala tüylerimi ürperten bir şeyi söyleyebilir miyim? Programlamanın sadece bilgisayarlarla ilgili olmadığını keşfetmek üzeresin – gerçekten en çılgın fikirlerini gerçeğe dönüştürmek için süper güçlere sahip olmakla ilgili! -Hani en sevdiğin uygulamayı kullanırken her şeyin mükemmel bir şekilde çalıştığı o an var ya? Bir düğmeye dokunduğunda ve seni "vay, bunu nasıl yaptılar?" dedirten büyülü bir şey olduğunda? İşte, muhtemelen senin gibi biri – büyük ihtimalle gece 2'de favori kahve dükkanında üçüncü espressoyu içerken – o büyüyü yaratan kodu yazdı. Ve işte seni şaşırtacak şey: Bu dersin sonunda, sadece onların bunu nasıl yaptığını anlamakla kalmayacak, aynı zamanda bunu kendin denemek için sabırsızlanacaksın! +Favori uygulamanı kullanırken her şeyin mükemmel şekilde oturduğu o anı biliyor musun? Bir düğmeye dokunduğunda, "vay canına, bunu nasıl yaptılar?" dedirten sihirli bir şey oluyor ya işte, o sihri yaratan kodu yazan biri senin gibi biri – muhtemelen gece 2’de en sevdiği kahve dükkanında üçüncü espressosunu içerken. Ve işte seni şaşırtacak şey: bu dersin sonunda sadece nasıl yaptıklarını anlamakla kalmayacak, kendin denemek için sabırsızlanacaksın! -Bak, şu anda programlama gözünü korkutuyorsa seni tamamen anlıyorum. Ben ilk başladığımda, dürüst olmak gerekirse, matematik dahisi olman gerektiğini ya da beş yaşından beri kod yazıyor olman gerektiğini düşünmüştüm. Ama işte benim bakış açımı tamamen değiştiren şey: Programlama, yeni bir dilde konuşmayı öğrenmekle tamamen aynı. Önce "merhaba" ve "teşekkür ederim" ile başlıyorsun, sonra kahve sipariş etmeye kadar ilerliyorsun ve bir bakmışsın derin felsefi tartışmalar yapıyorsun! Ama bu durumda, bilgisayarlarla konuşuyorsun ve dürüst olmak gerekirse, onlar en sabırlı konuşma partnerleri – hatalarını asla yargılamazlar ve her zaman tekrar denemeye hazırdırlar! +Bak, programlama şu an gözünde korkutucu geliyorsa bunu tamamen anlıyorum. Ben başladığımda, dürüst olmak gerekirse, ya beş yaşından beri kodlama yapan biri olmam gerektiğini ya da bir matematik dâhisi olmam gerektiğini düşünüyordum. Ama perspektifimi kökten değiştiren şey şuydu: programlama, yeni bir dilde konuşmayı öğrenmek gibidir. Önce "merhaba" ve "teşekkür ederim" ile başlarsın, sonra kahve siparişi vermeye geçersin ve bir süre sonra derin felsefi tartışmalar yaparsın! Buradaki fark, bilgisayarlarla konuşuyor olman ve dürüst olmak gerekirse onlar en sabırlı sohbet arkadaşlarıdır – hatalarını asla yargılamazlar ve tekrar denemek için her zaman heyecan duyarlar! -Bugün, modern web geliştirmeyi sadece mümkün kılmakla kalmayıp, aynı zamanda ciddi anlamda bağımlılık yapan inanılmaz araçları keşfedeceğiz. Netflix, Spotify ve en sevdiğin bağımsız uygulama stüdyosundaki geliştiricilerin her gün kullandığı tam olarak aynı editörler, tarayıcılar ve iş akışlarından bahsediyorum. Ve işte seni mutlu dans ettirecek kısım: Bu profesyonel düzeydeki, endüstri standardı araçların çoğu tamamen ücretsiz! +Bugün, modern web geliştirmeyi sadece mümkün kılmakla kalmayan, aynı zamanda ciddi şekilde bağımlılık yapan inanılmaz araçları keşfedeceğiz. Netflix, Spotify ve sevdiğin bağımsız uygulama stüdyosundaki geliştiricilerin her gün kullandığı tam da aynı editörlerden, tarayıcılardan ve iş akışlarından bahsediyorum. Ve işte seni mutlu dansa kaldıracak kısmı: bu profesyonel seviyedeki, endüstri standardı araçların çoğu tamamen ücretsiz! -![Programlama Giriş](../../../../translated_images/tr/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) +![Intro Programming](../../../../translated_images/tr/webdev101-programming.d6e3f98e61ac4bff.webp) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title Bugünkü Programlama Yolculuğunuz + section Keşfet + Programlama Nedir: 5: You + Programlama Dilleri: 4: You + Araçlar Genel Bakış: 5: You + section Keşfet + Kod Editörleri: 4: You + Tarayıcılar ve Geliştirici Araçları: 5: You + Komut Satırı: 3: You + section Uygula + Dil Dedektifi: 4: You + Araç Keşfi: 5: You + Topluluk Bağlantısı: 5: You ``` +## Zaten Neler Bildiğine Bir Bakalım! -## Neler Bildiğini Görelim! +Eğlenceli kısmına atlamadan önce merak ediyorum – bu programlama dünyası hakkında neler biliyorsun? Ve bak, bu sorulara "bunun hakkında hiç fikrim yok" diye düşünüyorsan, bu sadece sorun değil, tam tersine mükemmel! Bu demektir ki tam doğru yerdesin. Bu sınavı bir antrenmandan önce esneme gibi düşün – sadece beynini ısıtıyoruz! -Eğlenceli kısımlara geçmeden önce, merak ediyorum – bu programlama dünyası hakkında zaten neler biliyorsun? Ve eğer bu sorulara bakıp "Bunların hiçbirini bilmiyorum" diye düşünüyorsan, bu sadece normal değil, aynı zamanda harika! Bu, tam olarak doğru yerde olduğun anlamına geliyor. Bu testi bir egzersiz öncesi ısınma gibi düşün – sadece beyin kaslarını ısıtıyoruz! +[Ön ders sınavını çöz](https://ff-quizzes.netlify.app/web/) -[Ön ders sınavını yap](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) ## Birlikte Çıkacağımız Macera -Tamam, bugün keşfedeceğimiz şeyler hakkında gerçekten çok heyecanlıyım! Cidden, bazı kavramlar kafanda oturduğunda yüzündeki ifadeyi görmeyi çok isterdim. İşte birlikte çıkacağımız inanılmaz yolculuk: +Tamam, bugün keşfedeceklerimiz konusunda gerçekten heyecanlıyım! Cidden, bu kavramlardan bazıları sana oturduğunda yüzünü görebilmeyi isterdim. İşte birlikte yapacağımız inanılmaz yolculuk: -- **Programlama aslında nedir (ve neden en havalı şeydir!)** – Kodun, etrafındaki her şeyi, pazartesi sabahı olduğunu bir şekilde bilen alarmdan, Netflix önerilerini mükemmel bir şekilde düzenleyen algoritmaya kadar nasıl görünmez bir sihirle güçlendirdiğini keşfedeceğiz. -- **Programlama dilleri ve onların harika kişilikleri** – Farklı süper güçlere ve sorunları çözme yollarına sahip insanların olduğu bir partiye girdiğini hayal et. Programlama dili dünyası tam olarak böyle ve onları tanımayı çok seveceksin! -- **Dijital sihri mümkün kılan temel yapı taşları** – Bunları nihai yaratıcı LEGO seti olarak düşün. Bu parçaların nasıl bir araya geldiğini anladığında, hayal gücünün tasarladığı her şeyi gerçekten inşa edebileceğini fark edeceksin. -- **Profesyonel araçlar seni bir büyücünün asasını almış gibi hissettirecek** – Abartmıyorum – bu araçlar gerçekten sana süper güçlere sahipmişsin gibi hissettirecek ve en iyi kısmı? Profesyonellerin kullandığı araçların aynısı! +- **Programlama nedir gerçekten (ve neden en havalı şeydir!)** – Algoritmanın, o Pazartesi sabahı alarmından tut Netflix önerilerini kusursuzca hazırlayan algoritmaya kadar her şeyi nasıl görünmez bir sihir gibi güçlendirdiğini keşfedeceğiz +- **Programlama dilleri ve onların muhteşem kişilikleri** – Her birinin tamamen farklı süper güçleri ve problem çözme yolları olan bir partiye girdiğini hayal et. İşte programlama dili dünyası böyle ve onları tanımaya bayılacaksın! +- **Dijital sihri oluşturan temel yapı taşları** – Bunları en yaratıcı LEGO setin gibi düşün. Bu parçaların nasıl uyduğunu anladığında, hayal gücünün hayal ettiği her şeyi gerçek anlamda inşa edebileceğini fark edeceksin +- **Sana bir büyücünün asasını vermiş gibi hissettirecek profesyonel araçlar** – Abartmıyorum – bu araçlar gerçekten sana süper güçler vermiş gibi hissettirecek ve en güzel tarafı? Profesyonellerin kullandığı aynı araçlar! -> 💡 **Şunu unutma**: Bugün her şeyi ezberlemeye çalışmayı aklından bile geçirme! Şu anda sadece mümkün olan şeyler hakkında heyecan duymanı istiyorum. Detaylar, birlikte pratik yaptıkça doğal olarak aklında kalacak – gerçek öğrenme böyle gerçekleşir! +> 💡 **Şöyle diyeyim**: Bugün her şeyi ezberlemeye çalışma! Şu an sadece olasılıklara dair o heyecan kıvılcımını hissetmeni istiyorum. Detaylar birlikte pratik yaparken doğal şekilde yerleşecek – gerçek öğrenme böyle olur! -> Bu dersi [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) üzerinden alabilirsin! +> Bu dersi [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) sitesinde de alabilirsin! -## Peki Programlama Tam Olarak Nedir? +## Peki Programlama Tam Olarak *Nedir*? -Tamam, şimdi milyon dolarlık soruyu ele alalım: Programlama gerçekten nedir? +Tamam, o milyon dolarlık soruyu ele alalım: programlama gerçekten nedir? -Sana düşüncemi tamamen değiştiren bir hikaye anlatacağım. Geçen hafta, anneme yeni akıllı TV kumandamızı nasıl kullanacağını anlatmaya çalışıyordum. Kendimi "Kırmızı düğmeye bas, ama büyük kırmızı düğmeye değil, sol taraftaki küçük kırmızı düğmeye... hayır, diğer sol... tamam, şimdi iki saniye basılı tut, bir değil, üç değil..." derken buldum. Tanıdık geldi mi? 😅 +Bakış açımı tamamen değiştiren bir hikaye vereceğim sana. Geçen hafta anneme yeni akıllı TV kumandamızı nasıl kullanacağını açıklamaya çalışıyordum. "Kırmızı düğmeye bas, ama büyük kırmızı değil, sol taraftaki küçük kırmızı düğmeye... hayır, diğer solun... tamam, şimdi iki saniye basılı tut, bir değil, üç değil..." diye söylerken yakaladım kendimi. Tanıdık geldi mi? 😅 -İşte bu programlama! Güçlü bir şeye inanılmaz derecede ayrıntılı, adım adım talimatlar vermenin sanatıdır, ancak her şeyin mükemmel bir şekilde açıklanması gerekir. Ama bu sefer annene açıklamak yerine (ki "hangi kırmızı düğme?!" diye sorabilir), bir bilgisayara açıklıyorsun (ki o sadece tam olarak söylediğini yapar, söylediklerin tam olarak kastettiğin şey olmasa bile). +İşte programlama budur! Bir şeye, çok güçlü ama her şeyin mükemmel şekilde açıklanması gereken bir şeye, inanılmaz ayrıntılı, adım adım talimatlar verme sanatıdır. Ama anneni açıklamak yerine (ki "hangi kırmızı düğme?!" sorusunu sorabilir), bilgisayara anlatıyorsun (bilgisayar tam olarak sen ne söylersen onu yapar, hatta sen demek istediğin şeyi tam söylememiş olsan bile). -İlk öğrendiğimde beni şaşırtan şey şu oldu: Bilgisayarlar aslında temelde oldukça basit. Sadece iki şeyi anlıyorlar – 1 ve 0, bu da temelde "evet" ve "hayır" ya da "açık" ve "kapalı" demek. Hepsi bu! Ama işte burası büyülü hale geliyor – 1'ler ve 0'lar ile konuşmak zorunda değiliz, sanki Matrix'teymişiz gibi. İşte burada **programlama dilleri** imdada yetişiyor. Bunlar, normal insan düşüncelerini bilgisayar diline çeviren dünyanın en iyi çevirmeni gibi. +Ben ilk öğrendiğimde aklımı başımdan alan şey şuydu: bilgisayarlar aslında çekirdeğinde oldukça basittir. Aslında sadece iki şeyi anlarlar – 1 ve 0, ki bu temelde "evet" ve "hayır" veya "açık" ve "kapalı" demektir. Hepsi bu! Ama işte işin sihirli kısmı – matris filmindeymişiz gibi 1’ler ve 0’lar ile konuşmak zorunda değiliz. Bunu sağlayan şey **programlama dilleri**. Onlar, mükemmel normal insan düşüncelerini bilgisayar diline çeviren dünyanın en iyi tercümanı gibidir. -Ve işte her sabah uyandığımda beni hala heyecanlandıran şey: hayatındaki dijital her şey, muhtemelen pijamalarıyla bir fincan kahve içen ve dizüstü bilgisayarında kod yazan biriyle başladı. Seni kusursuz gösteren o Instagram filtresi? Biri onu kodladı. Seni yeni favori şarkına yönlendiren öneri? Bir geliştirici o algoritmayı oluşturdu. Arkadaşlarınla akşam yemeği hesabını bölüşmene yardımcı olan uygulama? Evet, biri "bu çok sinir bozucu, bunu düzeltebilirim" diye düşündü ve sonra... düzeltti! +Ve hala her sabah uyandığımda tüylerimi ürperten şey şu: hayatındaki dijital *her şey* senin gibi biri tarafından, muhtemelen pijamalarla, elinde bir fincan kahve laptop’unun başında kod yazarken başlamış. Mükemmel görünmeni sağlayan o Instagram filtresi? Birileri onu kodladı. Yeni favori şarkını bulmana sebep olan öneri? O algoritmayı bir geliştirici yarattı. Akşam yemek faturalarını arkadaşlarla bölmene yardımcı olan uygulama? Evet, biri "bu sinir bozucu, bunu ben çözerim" diye düşündü ve sonra... çözdü! -Programlama öğrenirken sadece yeni bir beceri edinmiyorsun – aynı zamanda "Birinin gününü biraz daha iyi hale getirecek bir şey inşa edebilir miyim?" diye düşünen bu inanılmaz problem çözücüler topluluğunun bir parçası oluyorsun. Dürüst olmak gerekirse, bundan daha havalı bir şey olabilir mi? +Programlamayı öğrendiğinde, sadece yeni bir beceri edinmekle kalmazsın – günlerini "Ya birinin gününü biraz daha iyi yapacak bir şey inşa etsem?" diye düşünen inanılmaz problem çözücü topluluğunun bir parçası olursun. Açıkçası, bundan daha havalı bir şey var mı? -✅ **Eğlenceli Bilgi Avı**: Boş bir anında araştırabileceğin süper havalı bir şey var – sence dünyanın ilk bilgisayar programcısı kimdi? Sana bir ipucu vereyim: beklediğin kişi olmayabilir! Bu kişinin hikayesi gerçekten büyüleyici ve programlamanın her zaman yaratıcı problem çözme ve kutunun dışında düşünme ile ilgili olduğunu gösteriyor. +✅ **Eğlenceli Gerçek Avı**: Boş bir zamanın olduğunda çok havalı bir şeyi araştır – dünyadaki ilk bilgisayar programcısı kimdi sence? Sana bir ipucu vereyim: beklentilerin dışında olabilir! Bu kişinin hikayesi kesinlikle büyüleyici ve programlamanın her zaman yaratıcı problem çözme ve sınırların dışını düşünmekle ilgili olduğunu gösteriyor. -### 🧠 **Durum Kontrolü: Kendini Nasıl Hissediyorsun?** +### 🧠 **Kontrol Zamanı: Kendini Nasıl Hissediyorsun?** -**Bir an dur ve düşün:** -- "Bilgisayarlara talimat vermek" fikri artık senin için anlamlı mı? -- Programlama ile otomatikleştirmek istediğin günlük bir görev düşünebiliyor musun? -- Bu programlama işi hakkında aklında hangi sorular belirmeye başladı? +**Bir an durup düşün:** +- "Bilgisayarlara talimat vermek" fikri şimdi mantıklı geliyor mu? +- Günlük bir görevi programlama ile otomatikleştirmek istediğin bir şey var mı? +- Programlama hakkında kafanı kurcalayan hangi sorular çıkıyor? -> **Unutma**: Şu anda bazı kavramlar sana biraz karışık gelebilir, bu tamamen normal. Programlama öğrenmek, yeni bir dil öğrenmek gibidir – beyninin bu sinir yollarını oluşturması zaman alır. Harika gidiyorsun! +> **Unutma**: Bazı kavramlar şu an bulanık geliyorsa bu tamamen normal. Programlama öğrenmek yeni bir dil öğrenmek gibidir – beyninin sinir yollarını kurması zaman alır. İyi gidiyorsun! -## Programlama Dilleri Farklı Büyü Türleri Gibidir +## Programlama Dilleri Birer Farklı Sihir Türü Gibidir -Tamam, bu biraz garip gelebilir ama benimle kal – programlama dilleri farklı müzik türleri gibidir. Şöyle düşün: caz var, yumuşak ve doğaçlamalı; rock güçlü ve doğrudan; klasik müzik zarif ve yapılandırılmış; hip-hop yaratıcı ve ifade dolu. Her stilin kendi havası, tutkulu hayran topluluğu var ve her biri farklı ruh halleri ve durumlar için mükemmel. +Tamam, kulağa garip gelecek ama sakın bırakma beni – programlama dilleri farklı müzik türleri gibidir. Düşünsene: ışıl ışıl doğaçlama caz, güçlü ve doğrudan rock, zarif ve yapılandırılmış klasik müzik, yaratıcı ve ifadesi güçlü hiphop. Her türün kendine has bir havası, tutkulu bir hayran kitlesi vardır ve her biri farklı ruh hallerine ve durumlara çok uygundur. -Programlama dilleri tam olarak aynı şekilde çalışır! Eğlenceli bir mobil oyun yapmak için kullandığın dili, büyük miktarda iklim verisini işlemek için kullanmazsın, tıpkı yoga dersinde death metal çalmayacağın gibi (şey, çoğu yoga dersinde en azından! 😄). +Programlama dilleri de aynen böyle çalışır! Devasa iklim verilerini analiz etmek için aynı dili kullanmazsın, eğlenceli bir mobil oyun yapmak için kullanacağın dil aynı olmaz, tıpkı yoga derslerinde death metal dinlememen gerektiği gibi (en azından çoğu yoga dersinde! 😄). -Ama her düşündüğümde beni gerçekten şaşırtan şey şu: Bu diller, yanınızda oturan dünyanın en sabırlı, en zeki tercümanı gibi. Fikirlerinizi insan beyninize doğal gelen bir şekilde ifade edebilirsiniz ve onlar, bunu bilgisayarların gerçekten konuştuğu 1'ler ve 0'lara çevirmek için tüm karmaşık işleri halleder. Bu, "insan yaratıcılığı" ve "bilgisayar mantığı" konusunda mükemmel derecede akıcı bir arkadaşınızın olması gibi – ve asla yorulmaz, asla kahve molasına ihtiyaç duymaz ve aynı soruyu iki kez sorduğunuz için sizi asla yargılamaz! +Ama her düşündüğümde aklımı başımdan alan şey şu: bu diller, dünyanın en sabırlı, akıllı tercümanını yanınızda oturtmak gibi. İnsan beynine doğal gelen biçimde fikirlerini ifade edebilirsin ve onlar o fikirleri bilgisayarların gerçekten konuştuğu 1 ve 0’lara çevirir. Hem "insan yaratıcılığına" hem de "bilgisayar mantığına" kusursuz hakim dostun var ve bu dost asla yorulmaz, kahve molası vermez, aynı soruyu iki kez sorduğun için seni yargılamaz! ### Popüler Programlama Dilleri ve Kullanım Alanları ```mermaid mindmap - root((Programming Languages)) - Web Development + root((Programlama Dilleri)) + Web Geliştirme JavaScript - Frontend Magic - Interactive Websites + Ön Yüz Büyüsü + Etkileşimli Web Siteleri TypeScript - JavaScript + Types - Enterprise Apps - Data & AI + JavaScript + Türler + Kurumsal Uygulamalar + Veri & AI Python - Data Science - Machine Learning - Automation + Veri Bilimi + Makine Öğrenimi + Otomasyon R - Statistics - Research - Mobile Apps + İstatistik + Araştırma + Mobil Uygulamalar Java Android - Enterprise + Kurumsal Swift iOS - Apple Ecosystem + Apple Ekosistemi Kotlin Modern Android - Cross-platform - Systems & Performance + Çok Platformlu + Sistemler & Performans C++ - Games - Performance Critical + Oyunlar + Performans Kritik Rust - Memory Safety - System Programming + Bellek Güvenliği + Sistem Programlama Go - Cloud Services - Scalable Backend + Bulut Servisleri + Ölçeklenebilir Arka Uç ``` - -| Dil | En İyi Kullanım Alanı | Neden Popüler? | -|-----|-----------------------|----------------| -| **JavaScript** | Web geliştirme, kullanıcı arayüzleri | Tarayıcılarda çalışır ve etkileşimli web sitelerini güçlendirir | -| **Python** | Veri bilimi, otomasyon, yapay zeka | Okuması ve öğrenmesi kolay, güçlü kütüphaneler sunar | -| **Java** | Kurumsal uygulamalar, Android uygulamaları | Platformdan bağımsız, büyük sistemler için sağlam | +| Dil | En İyi Olduğu Alanlar | Neden Popüler | +|----------|----------|------------------| +| **JavaScript** | Web geliştirme, kullanıcı arayüzleri | Tarayıcılarda çalışır ve etkileşimli web sitelerine güç verir | +| **Python** | Veri bilimi, otomasyon, yapay zeka | Okuması ve öğrenmesi kolay, güçlü kütüphaneler | +| **Java** | Kurumsal uygulamalar, Android uygulamaları | Platform bağımsız, büyük sistemler için sağlam | | **C#** | Windows uygulamaları, oyun geliştirme | Güçlü Microsoft ekosistemi desteği | -| **Go** | Bulut hizmetleri, arka uç sistemleri | Hızlı, basit, modern bilgi işlem için tasarlanmış | +| **Go** | Bulut servisleri, arka uç sistemler | Hızlı, basit, modern hesaplamaya yönelik tasarlanmış | ### Yüksek Seviye vs. Düşük Seviye Diller -Tamam, bu kavramı ilk öğrendiğimde kafam karışmıştı, bu yüzden sonunda anlamamı sağlayan benzetmeyi paylaşacağım – umarım sana da yardımcı olur! +Tamam, bu açıkçası ben öğrenmeye başladığımda beynimi yakan kavramdı, o yüzden sonunda benim için netleşen benzetmeyi paylaşacağım – umarım sana da yardımcı olur! -Bir dilini bilmediğin bir ülkeyi ziyaret ettiğini ve acilen en yakın tuvaleti bulman gerektiğini hayal et (hepimiz orada bulunduk, değil mi? 😅): +Dilini bilmediğin bir ülkeyi ziyaret ettiğini ve acilen en yakın banyoyu bulman gerektiğini hayal et (hepimiz yaşadık, değil mi? 😅): -- **Düşük seviyeli programlama**, yerel lehçeyi o kadar iyi öğrenmek gibi ki, köşedeki meyve satan büyükanneyle kültürel referanslar, yerel argo ve sadece orada büyüyen birinin anlayabileceği esprilerle sohbet edebiliyorsun. Süper etkileyici ve inanılmaz derecede verimli... eğer akıcıysan! Ama sadece bir tuvalet bulmaya çalışıyorsan oldukça bunaltıcı olabilir. +- **Düşük seviyeli programlama**, meyve satan büyükannenle yerel lehçede kültürel göndermeler, yerel argolar ve sadece orada yaşayanların anlayabileceği esprilerle sohbet edebilecek kadar iyi konuşmak gibidir. Süper etkileyici ve inanılmaz verimlidir... eğer akıcıysan! Ama sadece bir banyo bulmaya çalışırken biraz bunaltıcıdır. -- **Yüksek seviyeli programlama**, seni gerçekten anlayan harika bir yerel arkadaşın olması gibi. "Gerçekten bir tuvalet bulmam gerekiyor" diyebilirsin ve o tüm kültürel çeviriyi halleder ve sana mantıklı bir şekilde yol tarif eder. +- **Yüksek seviyeli programlama**, seni hemen anlayan harika yerel arkadaş gibidir. İngilizce olarak "Gerçekten bir tuvalet bulmam lazım" dersen, onlar tüm kültürel çeviriyi yapar ve beyninin kolayca anladığı şekilde yol tarif eder. Programlama terimleriyle: -- **Düşük seviyeli diller** (Assembly veya C gibi), bilgisayarın gerçek donanımıyla inanılmaz derecede ayrıntılı konuşmalar yapmanı sağlar, ancak bir makine gibi düşünmen gerekir, ki bu... şey, oldukça büyük bir zihinsel değişim! -- **Yüksek seviyeli diller** (JavaScript, Python veya C# gibi), insan gibi düşünmeni sağlar ve tüm makine konuşmasını sahne arkasında halleder. Ayrıca, yeni olmanın nasıl bir şey olduğunu hatırlayan ve gerçekten yardım etmek isteyen insanlarla dolu inanılmaz derecede sıcak topluluklara sahiptir! +- **Düşük seviyeli diller** (Assembly veya C gibi) bilgisayarın gerçek donanımıyla çok ayrıntılı konuşmana izin verir, ama bir makine gibi düşünmen gerekir ki… söyleyelim, büyük bir zihinsel geçiş! +- **Yüksek seviyeli diller** (JavaScript, Python veya C# gibi) insan gibi düşünmene izin verirken, makine diliyle arka planda onlar ilgilenir. Ayrıca, içinde yeni olanların ne hissettiğini unutmayan ve gerçekten yardım etmek isteyen inanılmaz misafirperver toplulukları vardır! -Tahmin et bakalım, hangileriyle başlamanı önereceğim? 😉 Yüksek seviyeli diller, deneyimi çok daha keyifli hale getirdiği için asla çıkarmak istemeyeceğin destek tekerlekleri gibidir! +Tahmin et hangileriyle başlamanı öneriyorum? 😉 Yüksek seviyeli diller, deneyimi çok daha keyifli hale getirdikleri için aslında asla bırakmak istemediğin böyle eğitim tekerlekleri gibidir! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 İnsan Düşüncesi:
'Fibonacci sayıları hesaplamak istiyorum'"] --> B{Dil Seviyesi Seç} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|Yüksek Seviye| C["🌟 JavaScript/Python
Okuması ve yazması kolay"] + B -->|Düşük Seviye| D["⚙️ Assembly/C
Doğrudan donanım kontrolü"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Yaz: fibonacci(10)"] + D --> F["📝 Yaz: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 Bilgisayar Anlayışı:
Çevirmen karmaşıklığı yönetir"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Aynı Sonuç:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Yüksek Seviyeli Dillerin Neden Bu Kadar Dostça Olduğunu Sana Gösteriyim -### Neden Yüksek Seviye Dillerin Daha Dostça Olduğunu Gösterelim - -Tamam, şimdi yüksek seviyeli dilleri neden sevdiğimi mükemmel bir şekilde gösteren bir şey göstereceğim, ama önce – bana bir şey için söz vermelisin. İlk kod örneğini gördüğünde panik yapma! Korkutucu görünmesi gerekiyor. Tam olarak anlatmak istediğim şey bu! +Tamam, yüksek seviyeli dillere neden aşık olduğumu mükemmel gösteren bir şeyi göstermek üzereyim, ama önce benden bir şey istemen lazım. İlk kod örneğini görünce panik yapma! Korkutucu görünmesi gerekiyor. Tam da vurgulamak istediğim şey bu! -Aynı görevi iki tamamen farklı tarzda yazılmış şekilde göreceğiz. İkisi de Fibonacci dizisini oluşturuyor – bu, her sayının kendisinden önceki iki sayının toplamı olduğu güzel bir matematiksel desen: 0, 1, 1, 2, 3, 5, 8, 13... (Eğlenceli bilgi: Bu deseni doğada her yerde bulabilirsiniz – ayçiçeği tohumlarının spiralleri, çam kozalağı desenleri, hatta galaksilerin oluşum şekilleri!) +Aynı görevin tamamen iki farklı tarzda yazılmış haline bakacağız. İkisi de Fibonacci dizisi denen bir matematiksel deseni yaratır – her sayı kendinden önce gelen iki sayının toplamıdır: 0, 1, 1, 2, 3, 5, 8, 13... (Eğlenceli gerçek: bu desen doğada her yerde bulunur – ayçiçeği tohum spiralleri, çam kozalağı desenleri, hatta galaksilerin oluşumu!) -Hazır mısın? Hadi başlayalım! +Farkı görmeye hazır mısın? Hadi başlayalım! **Yüksek seviyeli dil (JavaScript) – İnsan dostu:** ```javascript -// Step 1: Basic Fibonacci setup +// Adım 1: Temel Fibonacci kurulumu const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Bu kod ne yapıyor:** -- Fibonacci sayılarını oluşturmak için bir sabit **tanımlıyor** -- Dizideki mevcut ve sonraki sayıları takip etmek için iki değişken **başlatıyor** -- Fibonacci desenini tanımlayan başlangıç değerlerini (0 ve 1) **ayarlıyor** -- Çıktımızı tanımlayan bir başlık mesajı **gösteriyor** +**Bu kod şunları yapar:** +- Fibonacci sayılarının kaç tane üretileceğini belirtmek için bir sabit **tanımlar** +- Dizideki geçerli ve sonraki sayıları takip etmek için iki değişkeni **başlatır** +- Fibonacci desenini tanımlayan başlangıç değerlerini (0 ve 1) **ayarlar** +- Çıktımızı tanımlayan bir başlık mesajı **gösterir** ```javascript -// Step 2: Generate the sequence with a loop +// Adım 2: Döngü ile diziyi oluştur for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Dizideki sonraki sayıyı hesapla const sum = current + next; current = next; next = sum; } ``` -**Burada olanlar:** -- Bir `for` döngüsü kullanarak dizideki her pozisyonda **döngü yapıyor** -- Şablon dizesi biçimlendirmesi kullanarak her sayıyı pozisyonuyla birlikte **gösteriyor** -- Mevcut ve sonraki değerleri toplayarak bir sonraki Fibonacci sayısını **hesaplıyor** -- Bir sonraki yinelemeye geçmek için izleme değişkenlerini **güncelliyor** +**Burada neler oluyor, detaylandırmak gerekirse:** +- `for` döngüsü kullanarak dizideki her pozisyonda **dolaşır** +- Her sayıyı ve pozisyonunu şablon metin biçimlendirmesiyle **gösterir** +- Mevcut ve sonraki değerleri toplayarak bir sonraki Fibonacci sayısını **hesaplar** +- Takip değişkenlerini bir sonraki iterasyona geçecek şekilde **günceller** ```javascript -// Step 3: Modern functional approach +// Adım 3: Modern fonksiyonel yaklaşım const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,16 +219,16 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Kullanım örneği const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Yukarıda şunları yaptık:** -- Modern ok fonksiyonu sözdizimini kullanarak yeniden kullanılabilir bir fonksiyon **oluşturduk** -- Tek tek göstermek yerine tüm diziyi saklamak için bir dizi **oluşturduk** -- Önceki değerlerden her yeni sayıyı hesaplamak için dizi indekslemesini **kullandık** -- Programımızın diğer bölümlerinde esnek kullanım için tam diziyi **döndürdük** +**Yukarıdaki kodda biz:** +- Modern ok fonksiyonu sözdizimi kullanarak yeniden kullanılabilir bir fonksiyon **yarattık** +- Tüm diziyi depolamak için bir dizi oluşturduk, tek tek göstermek yerine +- Önceki değerlerden her yeni sayıyı **hesaplamak için dizi indekslemesi kullandık** +- Diziyi esnek kullanım için programımızın diğer bölümlerine **döndürdük** **Düşük seviyeli dil (ARM Assembly) – Bilgisayar dostu:** @@ -259,76 +257,77 @@ back add r0,r1 end ``` -JavaScript versiyonunun neredeyse İngilizce talimatlar gibi okunduğunu, Assembly versiyonunun ise bilgisayarın işlemcisini doğrudan kontrol eden şifreli komutlar kullandığını fark edeceksiniz. İkisi de aynı görevi yerine getiriyor, ancak yüksek seviyeli dil, insanların anlaması, yazması ve sürdürmesi açısından çok daha kolay. +JavaScript versiyonu neredeyse İngilizce talimatlar gibi okunurken, Assembly versiyonu bilgisayarın işlemcisini doğrudan kontrol eden gizemli komutlar kullanır. İkisi de aynı görevi yapar, ama yüksek seviyeli dil insanların anlaması, yazması ve sürdürmesi çok daha kolaydır. -**Dikkat çeken temel farklar:** -- **Okunabilirlik**: JavaScript, `fibonacciCount` gibi açıklayıcı isimler kullanırken Assembly, `r0`, `r1` gibi şifreli etiketler kullanır. -- **Yorumlar**: Yüksek seviyeli diller, kodu kendi kendini belgeleyen hale getiren açıklayıcı yorumları teşvik eder. -- **Yapı**: JavaScript'in mantıksal akışı, insanların problemleri adım adım düşünme şekline uygundur. -- **Bakım**: JavaScript sürümünü farklı gereksinimlere göre güncellemek oldukça kolay ve anlaşılırdır. +**Fark edeceğin ana farklar:** +- **Okunabilirlik**: JavaScript `fibonacciCount` gibi açıklayıcı isimler kullanırken, Assembly `r0`, `r1` gibi gizemli etiketler kullanır +- **Yorumlar**: Yüksek seviyeli diller, kodun kendi kendini belgeleyen açıklayıcı yorumları teşvik eder +- **Yapı**: JavaScript'in mantıksal akışı, insanların problemleri adım adım düşünme şekline uyum sağlar +- **Bakım**: Farklı gereksinimler için JavaScript sürümünü güncellemek basit ve nettir -✅ **Fibonacci dizisi hakkında**: Bu muhteşem sayı dizisi (her bir sayı kendisinden önceki iki sayının toplamına eşittir: 0, 1, 1, 2, 3, 5, 8...) doğada *her yerde* karşımıza çıkar! Ayçiçeği spirallerinde, çam kozalağı desenlerinde, nautilus kabuklarının kıvrımlarında ve hatta ağaç dallarının büyüme şeklinde bile görebilirsiniz. Matematik ve kodun, doğanın güzellik yaratmak için kullandığı desenleri anlamamıza ve yeniden yaratmamıza nasıl yardımcı olabileceği gerçekten akıl almaz! +✅ **Fibonacci dizisi hakkında**: Bu kesinlikle harika sayı deseni (her sayının kendinden önceki iki sayının toplamı olduğu: 0, 1, 1, 2, 3, 5, 8...) doğada hemen hemen *her yerde* ortaya çıkar! Günebakan spirallerinde, çam kozalağı desenlerinde, nautilus kabuklarının kıvrımında ve hatta ağaç dallarının büyüme şeklinde bulabilirsiniz. Matematik ve kodun doğanın güzelliği yaratmak için kullandığı desenleri anlamamıza ve yeniden yaratmamıza nasıl yardımcı olabileceği gerçekten şaşırtıcı! -## Sihri Gerçekleştiren Yapı Taşları -Tamam, programlama dillerinin nasıl göründüğünü gördüğünüze göre, şimdiye kadar yazılmış her programı oluşturan temel parçaları inceleyelim. Bunları favori tarifinizdeki temel malzemeler olarak düşünün – her birinin ne yaptığını anladığınızda, hemen hemen her dilde kod okuyup yazabileceksiniz! +## Büyünün Gerçekleşmesini Sağlayan Temel Parçalar -Bu, programlamanın dilbilgisini öğrenmek gibi bir şey. Okulda isimler, fiiller ve cümleleri nasıl bir araya getireceğinizi öğrendiğiniz zamanı hatırlıyor musunuz? Programlamanın kendi dilbilgisi versiyonu var ve dürüst olmak gerekirse, İngilizce dilbilgisinden çok daha mantıklı ve affedici! 😄 +Tamam, programlama dillerinin gerçek hayatta nasıl göründüğünü gördüğünüze göre, şimdi yazılmış her programın temel parçalarını parçalayalım. Bunları en sevdiğiniz tarifin temel bileşenleri olarak düşünün – her birinin ne işe yaradığını anladığınızda, hemen hemen her dilde kod okuyup yazabileceksiniz! + +Bu, programlamanın dilbilgisini öğrenmek gibidir. Okulda isimler, fiiller ve cümle kurmayı öğrendiğiniz zamanı hatırlayın. Programlamanın kendi dilbilgisi versiyonu var ve dürüst olmak gerekirse, İngilizce dilbilgisinden çok daha mantıklı ve bağışlayıcı! 😄 ### İfadeler: Adım Adım Talimatlar -**İfadeler** ile başlayalım – bunlar bilgisayarınızla yaptığınız bir konuşmadaki bireysel cümleler gibidir. Her ifade, bilgisayara belirli bir şey yapmasını söyler, tıpkı yönlendirme vermek gibi: "Buradan sola dön," "Kırmızı ışıkta dur," "Şu yere park et." +Hadi **ifadeler** ile başlayalım – bunlar bilgisayarınızla kurduğunuz bir konuşmadaki bireysel cümleler gibidir. Her ifade bilgisayara spesifik bir işi yapmasını söyler, tıpkı yön tarifleri vermek gibi: "Buradan sola dön," "Kırmızı ışıkta dur," "Şu park yerine park et." -İfadelerle ilgili sevdiğim şey, genellikle ne kadar okunabilir olduklarıdır. Şuna bir göz atın: +İfadelerde sevdiğim şey onların genellikle ne kadar okunabilir olması. Şuna bak: ```javascript -// Basic statements that perform single actions +// Tek eylem gerçekleştiren temel ifadeler const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Bu kodun yaptığı şey:** -- Kullanıcının adını saklamak için bir sabit değişken **tanımlayın** -- Konsol çıktısına bir karşılama mesajı **gösterin** -- Matematiksel bir işlemin sonucunu **hesaplayın** ve saklayın +**Bu kodun yaptığı şeyler:** +- Bir kullanıcının adını saklamak için sabit değişken **bildir** +- Konsol çıktısına bir selamlama mesajı **göster** +- Matematiksel bir işlemin sonucunu **hesapla** ve sakla ```javascript -// Statements that interact with web pages +// Web sayfalarıyla etkileşime geçen ifadeler document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Adım adım neler oluyor:** -- Tarayıcı sekmesinde görünen web sayfasının başlığını **değiştirin** -- Tüm sayfa gövdesinin arka plan rengini **değiştirin** +**Adım adım olanlar:** +- Tarayıcı sekmesinde görünen sayfa başlığını **değiştir** +- Sayfa gövdesinin arka plan rengini **ayarla** -### Değişkenler: Programınızın Hafıza Sistemi +### Değişkenler: Programınızın Bellek Sistemi -Tamam, **değişkenler** öğretmeyi en sevdiğim kavramlardan biri çünkü zaten her gün kullandığınız şeylere çok benziyorlar! +Tamam, **değişkenler** gerçekten öğretmekten en çok zevk aldığım kavramlardan biri çünkü zaten her gün kullandığınız şeylere çok benziyorlar! -Bir an için telefonunuzun kişi listesini düşünün. Herkesin telefon numarasını ezberlemezsiniz – bunun yerine "Anne," "En İyi Arkadaş" veya "Gece 2'ye kadar pizza getiren yer" gibi isimler kaydedersiniz ve telefonunuz gerçek numaraları hatırlar. Değişkenler tam olarak aynı şekilde çalışır! Programınızın bilgi saklayabileceği ve daha sonra mantıklı bir isim kullanarak bu bilgiyi alabileceği etiketli kaplar gibidir. +Telefonunuzdaki kişi listesini düşünün bir saniye. Herkesin telefon numarasını ezberlemezsiniz – onun yerine "Anne", "En İyi Arkadaş" veya "Gece 2'ye Kadar Servis Yapan Pizza Yeri" gibi isimleri kaydedersiniz ve telefon gerçek numaraları hatırlar. Değişkenler tam olarak aynı şekilde işlev görür! Programınızın bilgi saklayabileceği ve onu akıllı bir isimle daha sonra çağırabileceği etiketli kaplar gibidir. -İşte gerçekten harika olan şey: değişkenler programınız çalışırken değişebilir (bu yüzden "değişken" adı verilmiş – ne kadar zekice değil mi?). Tıpkı daha iyi bir pizza yeri bulduğunuzda o kişi kaydını güncelleyebileceğiniz gibi, programınız yeni bilgiler öğrendikçe veya durumlar değiştikçe değişkenler güncellenebilir! +Asıl harika olan şu: değişkenler program çalışırken değişebilir (bu yüzden isimleri "değişken" – fark ettiniz mi?). Nasıl ki daha iyi bir pizzacı keşfedip kaydınızı güncelliyorsanız, değişkenler de programınız yeni bilgiler öğrenip koşullar değiştikçe güncellenebilir! -Bunun ne kadar basit olabileceğini göstereyim: +Size bunun ne kadar güzel ve basit olduğunu göstereyim: ```javascript -// Step 1: Creating basic variables +// Adım 1: Temel değişkenlerin oluşturulması const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` -**Bu kavramları anlamak:** -- Değişmeyen değerleri `const` değişkenlerinde **saklayın** (örneğin site adı) -- Programınız boyunca değişebilecek değerler için `let` kullanın -- Farklı veri türleri atayın: metin (string), sayılar ve mantıksal değerler (true/false) -- Her değişkenin ne içerdiğini açıklayan açıklayıcı isimler **seçin** +**Bu kavramları anlamak için:** +- Değişmeyen değerleri `const` ile sakla (örneğin site adı) +- Programa göre değişebilecek değerler için `let` kullan +- Farklı veri türleri ata: string (metin), sayılar, boolean (true/false) +- Her değişkenin içeriğini açıklayan açıklayıcı isimler seç ```javascript -// Step 2: Working with objects to group related data +// Adım 2: İlgili verileri gruplamak için nesnelerle çalışma const weatherData = { location: "San Francisco", humidity: 65, @@ -336,50 +335,50 @@ const weatherData = { }; ``` -**Yukarıda şunları yaptık:** -- İlgili hava durumu bilgilerini bir arada gruplamak için bir nesne **oluşturduk** -- Birden fazla veri parçasını tek bir değişken adı altında **düzenledik** -- Her bir bilgi parçasını açıkça etiketlemek için anahtar-değer çiftlerini **kullandık** +**Yukarıda:** +- İlgili hava durumu bilgilerini bir nesnede **grupladık** +- Birden fazla bilgiyi tek bir değişken adı altında **organize ettik** +- Anahtar-değer çiftleri kullanarak her bilginin başlığını netleştirdik ```javascript -// Step 3: Using and updating variables +// Adım 3: Değişkenleri kullanma ve güncelleme console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Değiştirilebilir değişkenleri güncelleme currentWeather = "cloudy"; temperature = 68; ``` -**Her bir kısmı anlamak:** -- `${}` sözdizimi ile şablon dizeleri kullanarak bilgi **gösterin** -- Nesne özelliklerine nokta notasyonu (`weatherData.windSpeed`) ile **erişin** -- Değişen koşulları yansıtmak için `let` ile tanımlanan değişkenleri **güncelleyin** -- Anlamlı mesajlar oluşturmak için birden fazla değişkeni **birleştirin** +**Her parçayı anlayalım:** +- `${}` sözdizimi ile şablon metin kullanarak bilgi **göster** +- Nesne özelliklerine dot notasyonu ile eriş (`weatherData.windSpeed`) +- `let` ile tanımlanan değişkenleri güncelleyerek koşullara göre **değiştir** +- Anlamlı mesajlar oluşturmak için birden fazla değişkeni **birleştir** ```javascript -// Step 4: Modern destructuring for cleaner code +// Adım 4: Daha temiz kod için modern yapı bozma const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Bilmeniz gerekenler:** -- Nesnelerden belirli özellikleri yapılandırma ataması kullanarak **çıkarın** -- Nesne anahtarlarıyla aynı isimlere sahip yeni değişkenler otomatik olarak **oluşturun** -- Tekrarlayan nokta notasyonundan kaçınarak kodu **basitleştirin** +**Bilmen gerekenler:** +- Nesnelerden spesifik özellikleri yıkıcı atama ile **çıkar** +- Nesne anahtarları ile aynı isimlerde yeni değişkenler **oluştur** +- Tekrarlayan dot notasyonunu kullanmaktan kaçınarak kodu **sadeleştir** -### Kontrol Akışı: Programınıza Düşünmeyi Öğretmek +### Kontrol Akışı: Programınıza Nasıl Düşüneceğini Öğretmek -Tamam, işte programlamanın gerçekten akıl alıcı olduğu yer! **Kontrol akışı**, programınıza akıllı kararlar almayı öğretmek gibidir, tıpkı sizin her gün farkında bile olmadan yaptığınız gibi. +Tamam, şimdi programlamanın gerçekten akıl almaz kısmına geldik! **Kontrol akışı**, programınıza akıllı kararlar nasıl alacağını öğretmektir, tıpkı sizin her gün farkında olmadan yaptığınız gibi. -Şunu hayal edin: bu sabah muhtemelen "Eğer yağmur yağıyorsa, şemsiye alırım. Eğer hava soğuksa, ceket giyerim. Eğer geç kalıyorsam, kahvaltıyı atlar ve yolda kahve alırım." gibi bir şey yaşadınız. Beyniniz bu if-then mantığını her gün onlarca kez doğal olarak takip eder! +Diyelim ki bugün sabah şöyle düşündünüz: "Eğer yağmur varsa şemsiye alırım. Eğer soğuksa ceket giyerim. Eğer geç kalıyorsam kahvaltıyı atlar yolda kahve alırım." Beyniniz bu if-then mantığını gün içinde onlarca kez otomatik olarak gerçekleştirir! -Bu, programların sıkıcı, tahmin edilebilir bir senaryoyu takip etmek yerine zeki ve canlı hissettirmesini sağlar. Gerçekten bir durumu inceleyebilir, neler olduğunu değerlendirebilir ve uygun şekilde tepki verebilirler. Bu, programınıza adapte olabilen ve seçim yapabilen bir beyin vermek gibidir! +İşte programları sıkıcı, öngörülebilir komutlardan alıp canlı ve zeki yapan şey budur. Durumu görebilir, ne olduğunu değerlendirebilir ve uygun şekilde tepki verebilirler. Programınıza düşünebilen ve seçim yapabilen bir zihin vermek gibidir! -Bunun ne kadar güzel çalıştığını görmek ister misiniz? Size göstereyim: +Bunun nasıl harika çalıştığını göstereyim: ```javascript -// Step 1: Basic conditional logic +// Adım 1: Temel koşullu mantık const userAge = 17; if (userAge >= 18) { @@ -390,14 +389,14 @@ if (userAge >= 18) { } ``` -**Bu kodun yaptığı şey:** -- Kullanıcının yaşının oy verme gereksinimini karşılayıp karşılamadığını **kontrol edin** -- Koşul sonucuna göre farklı kod bloklarını **çalıştırın** -- Oy verme uygunluğu için kaç yıl kaldığını **hesaplayın** ve gösterin (18 yaş altındaysa) -- Her senaryo için özel, yardımcı geri bildirim **sağlayın** +**Bu kodun yaptığı şeyler:** +- Kullanıcının yaşının oy kullanma şartını karşılayıp karşılamadığını **kontrol et** +- Koşul sonucuna göre farklı kod blokları **çalıştır** +- 18 yaşından küçükse oy kullanmaya ne kadar süre kaldığını **hesapla** ve göster +- Her durum için spesifik, faydalı geri bildirim **ver** ```javascript -// Step 2: Multiple conditions with logical operators +// Adım 2: Mantıksal operatörlerle çoklu koşullar const userAge = 17; const hasPermission = true; @@ -410,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Burada neler oluyor:** -- `&&` (ve) operatörünü kullanarak birden fazla koşulu **birleştirin** -- Birden fazla senaryo için `else if` kullanarak bir koşul hiyerarşisi **oluşturun** -- Tüm olası durumları son bir `else` ifadesiyle **ele alın** -- Her farklı durum için açık, uygulanabilir geri bildirim **sağlayın** +**Burada olanları parçalara ayıralım:** +- `&&` (ve) operatörü ile birden fazla koşulu **birleştir** +- Birden fazla senaryo için `else if` ile koşul hiyerarşisi **oluştur** +- Tüm olası durumları son `else` ifadesi ile **ele al** +- Her farklı durum için net, uygulanabilir geri bildirim **ver** ```javascript -// Step 3: Concise conditional with ternary operator +// Adım 3: Üçlü operatör ile kısa koşul ifadeleri const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Hatırlamanız gerekenler:** -- Basit iki seçenekli koşullar için üçlü operatörü (`? :`) **kullanın** -- Koşulu önce yazın, ardından `?`, sonra doğru sonuç, ardından `:`, sonra yanlış sonuç -- Koşullara dayalı değerler atamanız gerektiğinde bu deseni **uygulayın** +**Unutma:** +- Basit iki seçenekli koşullar için ternary operatörünü (`? :`) **kullan** +- Koşulu önce yaz, ardından `?`, sonra doğru sonuç, sonra `:`, sonra yanlış sonucu yaz +- Koşullara bağlı değer atama gerektiğinde bu kalıbı **uygula** ```javascript -// Step 4: Handling multiple specific cases +// Adım 4: Birden çok belirli durumların işlenmesi const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -448,57 +447,56 @@ switch (dayOfWeek) { } ``` -**Bu kod şunları gerçekleştirir:** -- Değişken değerini birden fazla belirli durumla **eşleştirin** -- Benzer durumları bir arada **gruplandırın** (hafta içi vs. hafta sonu) -- Eşleşme bulunduğunda uygun kod bloğunu **çalıştırın** -- Beklenmeyen değerleri ele almak için bir `default` durumu **ekleyin** -- Kodun bir sonraki duruma geçmesini önlemek için `break` ifadelerini **kullanın** +**Bu kod şunları yapar:** +- Değişkenin değerini birden fazla özel durumla **eşleştir** +- Benzer durumları (haftaiçi ve hafta sonu gibi) **gruplandır** +- Eşleşme bulununca uygun kod bloğunu **çalıştır** +- Beklenmeyen değerler için `default` durumunu **inclue et** +- Diğer duruma geçişi engellemek için `break` ifadelerini **kullan** -> 💡 **Gerçek dünya benzetmesi**: Kontrol akışını dünyanın en sabırlı GPS'ine sahip olmak gibi düşünün. "Eğer Main Street'te trafik varsa, otoyolu kullan. Eğer otoyol inşaat nedeniyle kapalıysa, manzaralı yolu dene." Programlar, farklı durumlara akıllıca tepki vermek ve her zaman kullanıcılara en iyi deneyimi sunmak için tam olarak bu tür koşullu mantığı kullanır. +> 💡 **Gerçek dünya benzetmesi**: Kontrol akışını, size sabırla yön veren dünyanın en sabırlı GPS'i gibi düşünün. "Eğer ana yolda trafik varsa otobana git. Eğer otoban kapalıysa manzaralı yoldan git" diyebilir. Programlar tam olarak bu tür koşullu mantığı kullanarak farklı durumlara akıllıca yanıt verir ve kullanıcıya her zaman en iyi deneyimi sunar. -### 🎯 **Kavram Kontrolü: Yapı Taşları Ustalığı** +### 🎯 **Kavram Kontrolü: Temel Parçalar Ustası** -**Temellerle nasıl ilerlediğinizi görelim:** -- Bir değişken ile bir ifade arasındaki farkı kendi kelimelerinizle açıklayabilir misiniz? -- Oy verme örneğimiz gibi bir if-then kararını kullanacağınız gerçek bir senaryo düşünün. -- Programlama mantığı hakkında sizi şaşırtan bir şey nedir? +**Temellerde ne durumda olduğuna bakalım:** +- Kendi kelimelerinle bir değişken ile ifade arasındaki farkı açıklayabilir misin? +- Gerçek hayattan bir if-then kararı örneği düşün (örneğin oy kullanma örneğimiz gibi) +- Programlama mantığı hakkında seni şaşırtan bir şey nedir? -**Hızlı güven artırıcı:** +**Hızlı özgüven artırıcı:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 İfadeler
(Talimatlar)"] --> B["📦 Değişkenler
(Depolama)"] --> C["🔀 Kontrol Akışı
(Kararlar)"] --> D["🎉 Çalışan Program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` +✅ **Sırada ne var**: Bu inanılmaz yolculuğa birlikte dalmaya devam ederken bu kavramları çok daha derinlemesine keşfedeceğiz! Şu anda sadece önünüzdeki harika olanaklar için heyecanlanmaya odaklan. Spesifik beceri ve teknikler pratik yaptıkça doğal olarak oturacak – sana söz veriyorum bu düşündüğünden çok daha eğlenceli olacak! -✅ **Sırada ne var**: Bu inanılmaz yolculuğa devam ederken bu kavramları daha derinlemesine incelemek için harika bir zaman geçireceğiz! Şu anda, önünüzdeki tüm harika olasılıklar hakkında heyecan duymaya odaklanın. Belirli beceriler ve teknikler, birlikte pratik yaptıkça doğal olarak yerleşecek – bunun beklediğinizden çok daha eğlenceli olacağına söz veriyorum! - -## İşin Araçları +## İşi Kolaylaştıran Araçlar -Tamam, bu gerçekten beni o kadar heyecanlandırıyor ki kendimi zor tutuyorum! 🚀 Şimdi size dijital bir uzay gemisinin anahtarlarını teslim almış gibi hissettirecek inanılmaz araçlardan bahsedeceğiz. +Tamam, burası gerçekten heyecandan yerimde duramadığım yer! 🚀 Dijital bir uzay gemisinin anahtarları elinize verilmiş gibi hissettirecek inanılmaz araçlardan bahsedeceğiz. -Bir şefin ellerinin bir uzantısı gibi hissettiren mükemmel dengeli bıçakları olduğunu biliyor musunuz? Ya da bir müzisyenin dokunduğu anda şarkı söyleyen o bir gitarı? Geliştiricilerin kendi büyülü araçları var ve işte sizi tamamen şaşırtacak olan şey – bunların çoğu tamamen ücretsiz! +Bir şefin elinin uzantısı gibi mükemmel dengelenmiş bıçakları olduğunu ya da bir müzisyenin dokunduğu anda şarkı söyleyen o gitarı olduğunu biliyorsunuzdur. İşte geliştiricilerin de buna benzer sihirli araçları var ve burada sizi gerçekten çok şaşırtacak olan – çoğu tamamen ücretsiz! -Bu araçları sizinle paylaşmayı düşündüğümde neredeyse sandalyemde zıplıyorum çünkü bunlar yazılım geliştirme şeklimizi tamamen değiştirdi. Kodunuzu yazmanıza yardımcı olabilecek yapay zeka destekli kodlama asistanlarından (şaka yapmıyorum!), Wi-Fi olan her yerden uygulamalar oluşturabileceğiniz bulut ortamlarına ve programlarınız için X-ray görüşü gibi olan son derece sofistike hata ayıklama araçlarına kadar konuşuyoruz. +Bu araçları sizinle paylaşmayı düşünürken sandalyemde zıplıyorum çünkü yazılım geliştirme şeklimizi kökten değiştirdiler. Kod yazmanıza yardımcı olan yapay zeka destekli asistanlar (şaka yapmıyorum!), Wi-Fi olan her yerden tam uygulamalar oluşturabileceğiniz bulut ortamları ve programlarınız için röntgen görüşü gibi gelişmiş hata ayıklama araçlarından bahsediyoruz. -Ve hala beni ürperten kısım: bunlar "başlangıç araçları" değil, zamanla vazgeçeceğiniz şeyler değil. Bunlar, şu anda Google, Netflix ve sevdiğiniz o bağımsız uygulama stüdyosundaki geliştiricilerin kullandığı tam profesyonel araçlar. Bunları kullanırken kendinizi tam bir profesyonel gibi hissedeceksiniz! +Ve hala beni ürperten kısmı: Bunlar sizin büyüyüp bırakacağınız "başlangıç araçları" değil. Google, Netflix gibi firmalarda ve sevdiğiniz o bağımsız uygulama stüdyosunda şu anda kullanılan profesyonel seviyedeki aynı araçlar. Onları kullanırken kendinizi tam bir profesyonel gibi hissedeceksiniz! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 Fikriniz"] --> B["⌨️ Kod Editörü
(VS Code)"] + B --> C["🌐 Tarayıcı Geliştirici Araçları
(Test & Hata Ayıklama)"] + C --> D["⚡ Komut Satırı
(Otomasyon & Araçlar)"] + D --> E["📚 Dokümantasyon
(Öğrenme & Referans)"] + E --> F["🚀 Harika Web Uygulaması!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 Yapay Zeka Asistanı
(GitHub Copilot)"] + C -.-> H["📱 Cihaz Testi
(Duyarlı Tasarım)"] + D -.-> I["📦 Paket Yöneticileri
(npm, yarn)"] + E -.-> J["👥 Topluluk
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -507,350 +505,348 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` +### Kod Editörleri ve IDE’ler: Yeni Dijital En İyi Dostlarınız -### Kod Editörleri ve IDE'ler: Yeni Dijital En İyi Arkadaşlarınız - -Kod editörlerinden bahsedelim – bunlar gerçekten en sevdiğiniz yerler haline gelecek! Bunları dijital kreasyonlarınızı oluşturup mükemmelleştireceğiniz kişisel kodlama sığınağınız olarak düşünün. +Kod editörlerinden bahsedelim – bunlar yakında en sevdiğiniz yeni mekanlar olacak! Onları kişisel kodlama sığınağınız olarak düşünün, zamanınızın çoğunu dijital eserlerinizi oluşturup mükemmelleştirerek burada geçireceksiniz. -Ama işte modern editörleri gerçekten büyülü yapan şey: sadece süslü metin editörleri değiller. Sanki en parlak, destekleyici kodlama mentoru 7/24 yanınızda oturuyormuş gibi. Hatalarınızı fark etmeden önce yakalar, sizi bir dahi gibi gösteren iyileştirmeler önerir, her bir kod parçasının ne yaptığını anlamanıza yardımcı olur ve bazıları ne yazmak üzere olduğunuzu tahmin edip düşüncelerinizi tamamlamayı bile teklif eder! +Ama modern editörleri özel yapan şey şu: sadece şık metin editörleri değiller. 7/24 yanınızda oturan en zeki, destekleyici kodlama akıl hocanız gibiler. Hatalarınızı fark etmeden önce yakalar, sizi dahi gösteren önerilerde bulunur, her satır kodun ne yaptığını anlamanıza yardım eder ve bazen yazacaklarınızı tahmin edip cümlenizi tamamlarlar! -Otomatik tamamlama özelliğini ilk keşfettiğimde, kelimenin tam anlamıyla gelecekte yaşıyormuşum gibi hissettim. Bir şeyler yazmaya başlıyorsunuz ve editörünüz "Hey, tam olarak ihtiyacınız olan bu işlevi mi düşünüyordunuz?" diyor. Sanki bir zihin okuyucu kodlama arkadaşınız varmış gibi! +Otomatik tamamlama ilk keşfettiğimde kendimi gelecekteymişim gibi hissetmiştim. Bir şeyler yazmaya başlarsınız ve editör der ki: "Hey, tam ihtiyacın olan şeyi düşünüyordun değil mi?" Kod yazarken zihin okuyucu bir arkadaşınız gibi! -**Bu editörleri bu kadar inanılmaz yapan nedir?** +**Bu editörleri bu kadar inanılmaz yapan ne?** -Modern kod editörleri, üretkenliğinizi artırmak için tasarlanmış etkileyici bir dizi özellik sunar: +Modern kod editörleri üretkenliğinizi artırmaya yönelik etkileyici özellikler sunar: -| Özellik | Ne Yapar | Neden Yardımcı Olur | -|---------|----------|---------------------| -| **Sözdizimi Vurgulama** | Kodunuzun farklı bölümlerini renklendirir | Kodu okumayı ve hataları fark etmeyi kolaylaştırır | +| Özellik | Ne Yapar | Neden İşe Yarar | +|---------|----------|-----------------| +| **Sözdizimi Vurgulama** | Kodun farklı parçalarını renklendirir | Kodun okunmasını ve hata tespiti kolay olur | | **Otomatik Tamamlama** | Yazarken kod önerir | Kodlamayı hızlandırır ve yazım hatalarını azaltır | -| **Hata Ayıklama Araçları** | Hataları bulmanıza ve düzeltmenize yardımcı olur | Sorun giderme süresinden tasarruf sağlar | -| **Eklentiler** | Özel özellikler ekler | Editörünüzü herhangi bir teknolojiye göre özelleştirir | -| **AI Asistanları** | Kod ve açıklamalar önerir | Öğrenmeyi ve üretkenliği hızlandırır | - -> 🎥 **Video Kaynağı**: Bu araçları iş başında görmek ister misiniz? [İşin Araçları videosunu](https://youtube.com/watch?v=69WJeXGBdxg) inceleyerek kapsamlı bir genel bakış edinin. - -#### Web Geliştirme için Önerilen Editörler - -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Ücretsiz) -- Web geliştiriciler arasında en popüler olanı -- Mükemmel eklenti ekosistemi -- Dahili terminal ve Git entegrasyonu -- **Mutlaka sahip olunması gereken eklentiler**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Yapay zeka destekli kod önerileri - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Gerçek zamanlı iş birliği - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Otomatik kod formatlama +| **Hata Ayıklama Araçları** | Hataları bulup düzeltmeye yardım eder | Sorun giderme süresini saatlerce kısaltır | +| **Eklentiler** | Uzmanlaşmış özellikler ekler | Her teknolojiye göre editörü özelleştirir | +| **Yapay Zeka Asistanları** | Kod ve açıklamalar önerir | Öğrenme ve üretkenliği hızlandırır | + +> 🎥 **Video Kaynağı**: Bu araçları eylemde görmek ister misiniz? Bu kapsamlı bakış için [Tools of the Trade videosuna](https://youtube.com/watch?v=69WJeXGBdxg) göz atın. + +#### Web Geliştirme İçin Önerilen Editörler + +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Ücretsiz) +- Web geliştiriciler arasında en popüler +- Mükemmel eklenti ekosistemi +- Yerleşik terminal ve Git entegrasyonu +- **Olmazsa olmaz eklentiler**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Yapay zeka destekli kod önerileri + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Gerçek zamanlı iş birliği + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Otomatik kod biçimlendirme - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Kodunuzdaki yazım hatalarını yakalar -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Ücretli, öğrenciler için ücretsiz) -- Gelişmiş hata ayıklama ve test araçları -- Akıllı kod tamamlama -- Dahili sürüm kontrolü +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Ücretli, öğrenciler için ücretsiz) +- Gelişmiş hata ayıklama ve test araçları +- Akıllı kod tamamlama +- Yerleşik versiyon kontrol -**Bulut Tabanlı IDE'ler** (Farklı fiyatlandırma) -- [GitHub Codespaces](https://github.com/features/codespaces) - Tarayıcınızda tam VS Code -- [Replit](https://replit.com/) - Kod öğrenmek ve paylaşmak için harika -- [StackBlitz](https://stackblitz.com/) - Anında, tam yığın web geliştirme +**Bulut Tabanlı IDE’ler** (Farklı fiyatlandırmalar) +- [GitHub Codespaces](https://github.com/features/codespaces) - Tarayıcınızda tam VS Code +- [Replit](https://replit.com/) - Kod öğrenmek ve paylaşmak için harika +- [StackBlitz](https://stackblitz.com/) - Anında tam yığın web geliştirme -> 💡 **Başlangıç İpucu**: Visual Studio Code ile başlayın – ücretsizdir, endüstride yaygın olarak kullanılır ve yardımcı eğitimler ve eklentiler oluşturan büyük bir topluluğa sahiptir. +> 💡 **Başlangıç İpucu**: Visual Studio Code ile başlayın – ücretsiz, sektörde yaygın kullanılır ve büyük bir topluluk tarafından desteklenen sayısız faydalı rehber ve eklenti bulunuyor. -### Web Tarayıcıları: Gizli Geliştirici Laboratuvarınız -Tamam, zihniniz tamamen uçmaya hazır olsun! Sosyal medyada gezinmek ve video izlemek için tarayıcıları nasıl kullandığınızı biliyorsunuz, değil mi? Peki, aslında bu inanılmaz gizli geliştirici laboratuvarını her zaman sakladıklarını ve keşfetmenizi beklediklerini biliyor muydunuz? +### Web Tarayıcıları: Gizli Geliştirme Laboratuvarınız -Bir web sayfasına sağ tıklayıp "Öğeyi İncele" seçeneğini her seçtiğinizde, yüzlerce dolar ödediğim pahalı yazılımlardan daha güçlü olan bu gizli geliştirici araçları dünyasını açıyorsunuz. Sanki sıradan mutfağınızın gizli bir panelin arkasında profesyonel bir şefin laboratuvarını sakladığını keşfetmek gibi! -Biri bana ilk kez tarayıcı geliştirici araçlarını gösterdiğinde, üç saat boyunca sadece tıklayıp "BEKLE, BUNU DA MI YAPABİLİYOR?!" diye şaşırarak vakit geçirdim. Gerçek zamanlı olarak herhangi bir web sitesini düzenleyebilir, her şeyin ne kadar hızlı yüklendiğini görebilir, sitenizin farklı cihazlarda nasıl göründüğünü test edebilir ve hatta JavaScript'i tam bir profesyonel gibi hata ayıklayabilirsiniz. Bu gerçekten akıl almaz bir şey! +Tamam, aklınız başınızdan gidecek! Sosyal medyada gezinmek ve video izlemek için kullandığınız tarayıcılar aslında sizi bekleyen muazzam gizli bir geliştirici laboratuvarı saklıyormuş! -**İşte tarayıcıların neden gizli silahınız olduğu:** +Herhangi bir sayfada sağ tıklayıp "Öğeyi incele"yi seçtiğinizde aslında yüzlerce dolar harcadığım bazı pahalı yazılımlardan daha güçlü geliştirici araçlarının olduğu gizli bir dünyayı açıyorsunuz. Bu, sıradan eski mutfağınızın arkasındaki gizli panelin profesyonel bir şefin laboratuvarına açılması gibi! +İlk kez biri bana tarayıcı DevTools’u gösterdiğinde, yaklaşık üç saat sadece tıklayıp durdum ve "BEKLE, BU DA MI YAPIYOR?!" diye bağırıyordum. Gerçek zamanlı olarak herhangi bir web sitesini düzenleyebilir, her şeyin ne kadar hızlı yüklendiğini tam olarak görebilir, sitenizin farklı cihazlarda nasıl göründüğünü test edebilir ve hatta JavaScript’i tam bir profesyonel gibi hata ayıklayabilirsiniz. Bu tamamen akıl almaz bir şey! -Bir web sitesi veya web uygulaması oluşturduğunuzda, gerçek dünyada nasıl göründüğünü ve davrandığını görmeniz gerekir. Tarayıcılar sadece çalışmalarınızı görüntülemekle kalmaz, aynı zamanda performans, erişilebilirlik ve olası sorunlar hakkında ayrıntılı geri bildirim sağlar. +**İşte tarayıcıların sizin gizli silahınız olmasının nedeni:** + +Bir web sitesi ya da web uygulaması oluşturduğunuzda, onun gerçek hayatta nasıl göründüğünü ve davrandığını görmeniz gerekir. Tarayıcılar sadece işinizi göstermekle kalmaz, aynı zamanda performans, erişilebilirlik ve olası sorunlar hakkında detaylı geri bildirim sağlar. #### Tarayıcı Geliştirici Araçları (DevTools) -Modern tarayıcılar kapsamlı geliştirme araçları içerir: +Modern tarayıcılar kapsamlı geliştirme paketleri içerir: | Araç Kategorisi | Ne Yapar | Örnek Kullanım Durumu | -|-----------------|----------|-----------------------| -| **Element Inspector** | HTML/CSS'i gerçek zamanlı görüntüleyin ve düzenleyin | Stil ayarlarını hemen görmek için düzenleme yapın | -| **Console** | Hata mesajlarını görüntüleyin ve JavaScript'i test edin | Sorunları giderin ve kodla deney yapın | -| **Network Monitor** | Kaynakların nasıl yüklendiğini takip edin | Performansı ve yükleme sürelerini optimize edin | -| **Accessibility Checker** | Kapsayıcı tasarımı test edin | Sitenizin tüm kullanıcılar için çalıştığından emin olun | -| **Device Simulator** | Farklı ekran boyutlarında önizleme yapın | Birden fazla cihaz olmadan duyarlı tasarımı test edin | +|-----------------|----------|----------------------| +| **Element Denetleyicisi** | HTML/CSS’i gerçek zamanlı görüntüleyip düzenleme | Stil düzenleyerek anında sonuçları görme | +| **Konsol** | Hata mesajlarını görüntüleme ve JavaScript testi | Sorunları hata ayıklama ve kod ile deneme yapma | +| **Ağ İzleyici** | Kaynakların nasıl yüklendiğini takip etme | Performans ve yükleme sürelerini optimize etme | +| **Erişilebilirlik Denetleyicisi** | Kapsayıcı tasarımı test etme | Sitenizin herkes için çalıştığından emin olma | +| **Cihaz Simülatörü** | Farklı ekran boyutlarında önizleme | Çoklu cihaz olmadan duyarlı tasarımı test etme | #### Geliştirme İçin Önerilen Tarayıcılar -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Geniş dokümantasyona sahip endüstri standardı DevTools +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Kapsamlı dökümantasyonlu endüstri standardı DevTools - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Mükemmel CSS Grid ve erişilebilirlik araçları -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium tabanlı ve Microsoft'un geliştirici kaynaklarıyla birlikte +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Microsoft’un geliştirme kaynaklarıyla Chromium tabanlı -> ⚠️ **Önemli Test İpucu**: Web sitelerinizi her zaman birden fazla tarayıcıda test edin! Chrome'da mükemmel çalışan bir şey Safari veya Firefox'ta farklı görünebilir. Profesyonel geliştiriciler, tutarlı kullanıcı deneyimleri sağlamak için tüm büyük tarayıcılarda test yapar. +> ⚠️ **Önemli Test İpucu**: Web sitelerinizi her zaman birden fazla tarayıcıda test edin! Chrome’da mükemmel çalışan bir şey Safari veya Firefox’ta farklı görünebilir. Profesyonel geliştiriciler tutarlı kullanıcı deneyimleri için tüm büyük tarayıcılarda test yapar. -### Komut Satırı Araçları: Geliştirici Süper Güçlerine Açılan Kapı +### Komut Satırı Araçları: Geliştirici Süper Güçlerine Açılan Kapınız -Tamamen dürüst bir an paylaşalım, çünkü bunu gerçekten anlayan birinden duymanızı istiyorum. İlk gördüğümde – sadece korkutucu bir siyah ekran ve yanıp sönen metin – kelimenin tam anlamıyla "Hayır, kesinlikle hayır! Bu 1980'lerin hacker filmlerinden bir şey gibi görünüyor ve kesinlikle bunun için yeterince zeki değilim!" diye düşündüm. 😅 +Tamam, burada komut satırıyla ilgili tamamen dürüst bir an geçirelim çünkü bunu gerçekten anlayan birinden duymanızı istiyorum. İlk kez gördüğümde – sadece bu korkutucu, siyah ekran ve yanıp sönen metin – kelimenin tam anlamıyla düşündüm ki: "Hayır, kesinlikle hayır! Bu sanki 1980’ler hacker filmi gibi ve ben kesinlikle bunun için yeterince zeki değilim!" 😅 -Ama keşke o zaman biri bana şunu söyleseydi ve şimdi size söylüyorum: komut satırı korkutucu değil – aslında bilgisayarınızla doğrudan bir konuşma yapmak gibi. Bunu, yemek siparişi verdiğiniz bir uygulama ile (güzel ve kolay) favori yerel restoranınıza gidip şefinize "bana harika bir şeyle sürpriz yap" dediğiniz arasındaki fark gibi düşünün. +Ama keşke biri bana o zamanlar şunu söyleseydi ve şimdi size söylüyorum: komut satırı korkutucu değildir – aslında bilgisayarınızla doğrudan konuşmak gibidir. Bunu, resimlerin ve menülerin olduğu şık bir uygulama aracılığıyla yemek sipariş etmekle (ki bu kolaydır) vs. favori yerel restoranınıza gidip, aşçının tam olarak ne sevdiğinizi bilip sadece "beni harika bir şeyle şaşırt" demenizle kıyaslayın. -Komut satırı, geliştiricilerin kendilerini tam bir büyücü gibi hissetmek için gittikleri yerdir. Birkaç sihirli kelime (tamam, sadece komutlar ama sihirli gibi hissediliyor!) yazarsınız, enter tuşuna basarsınız ve BAM – tüm proje yapıları oluşturmuş, dünyanın dört bir yanından güçlü araçlar yüklemiş veya uygulamanızı milyonlarca kişinin görebileceği şekilde internete yüklemiş olursunuz. Bu gücü bir kez tattığınızda, gerçekten bağımlılık yapıcı! +Komut satırı, geliştiricilerin kendilerini tam anlamıyla büyücü gibi hissettikleri yerdir. Birkaç sihirli kelime (tamam, bunlar sadece komut ama sihirliymiş gibi hissediliyor!), enter tuşuna basarsınız ve BOOM – tam projeler oluşturur, dünyadan güçlü araçlar indirir veya uygulamanızı milyonlarca kişinin görebilmesi için internete yüklersiniz. Bu gücün tadına varınca, gerçekten bağımlılık yapıyor! -**Komut satırını neden seveceksiniz:** +**Komut satırının favori aracınız olmasının nedenleri:** -Grafik arayüzler birçok görev için harika olsa da, komut satırı otomasyon, hassasiyet ve hızda üstünlük sağlar. Birçok geliştirme aracı esas olarak komut satırı arayüzleri aracılığıyla çalışır ve bunları verimli bir şekilde kullanmayı öğrenmek üretkenliğinizi önemli ölçüde artırabilir. +Grafiksel arayüzler birçok görev için iyidir, ancak komut satırı otomasyon, hassasiyet ve hızda ustadır. Birçok geliştirme aracı öncelikle komut satırı arayüzüyle çalışır ve onları verimli öğrenmek üretkenliğinizi dramatik şekilde artırabilir. ```bash -# Step 1: Create and navigate to project directory +# Adım 1: Proje dizinini oluşturun ve içine gidin mkdir my-awesome-website cd my-awesome-website ``` -**Bu kod ne yapar:** +**Bu kod ne yapıyor:** - Projeniz için "my-awesome-website" adlı yeni bir dizin oluşturur -- Çalışmaya başlamak için yeni oluşturulan dizine geçiş yapar +- Yeni oluşturulan dizine geçip çalışmaya başlar ```bash -# Step 2: Initialize project with package.json +# Adım 2: package.json ile projeyi başlat npm init -y -# Install modern development tools +# Modern geliştirme araçlarını yükle npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Adım adım, burada olanlar:** -- `npm init -y` kullanarak varsayılan ayarlarla yeni bir Node.js projesi başlatır -- Hızlı geliştirme ve üretim yapıları için modern bir yapı aracı olan Vite'ı yükler -- Otomatik kod biçimlendirme için Prettier ve kod kalitesi kontrolleri için ESLint ekler -- `--save-dev` bayrağını kullanarak bunları yalnızca geliştirme bağımlılıkları olarak işaretler +**Adım adım olanlar:** +- `npm init -y` ile varsayılan ayarlarla yeni bir Node.js projesi başlatılır +- Hızlı geliştirme ve üretim yapıları için modern yapım aracı Vite kurulur +- Otomatik kod biçimlendirme için Prettier ve kod kalitesi için ESLint eklenir +- Bu araçlar sadece geliştirme bağımlılıkları olarak `--save-dev` bayrağı ile işaretlenir ```bash -# Step 3: Create project structure and files +# Adım 3: Proje yapısını ve dosyaları oluşturun mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Geliştirme sunucusunu başlatın npx vite ``` -**Yukarıda, şunları yaptık:** -- Kaynak kodu ve varlıklar için ayrı klasörler oluşturarak projemizi düzenledik +**Yukarıdaki işlemlerde:** +- Projemizi kaynak kod ve varlıklar için ayrı klasörlerle organize ettik - Uygun belge yapısına sahip temel bir HTML dosyası oluşturduk -- Canlı yeniden yükleme ve sıcak modül değiştirme için Vite geliştirme sunucusunu başlattık +- Canlı yenileme ve sıcak modül değişimi için Vite geliştirme sunucusunu başlattık #### Web Geliştirme İçin Temel Komut Satırı Araçları -| Araç | Amaç | Neden İhtiyacınız Var? | -|------|------|------------------------| -| **[Git](https://git-scm.com/)** | Sürüm kontrolü | Değişiklikleri takip edin, başkalarıyla iş birliği yapın, çalışmalarınızı yedekleyin | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript çalışma zamanı ve paket yönetimi | Tarayıcılar dışında JavaScript çalıştırın, modern geliştirme araçlarını yükleyin | -| **[Vite](https://vitejs.dev/)** | Yapı aracı ve geliştirme sunucusu | Sıcak modül değiştirme ile hızlı geliştirme | -| **[ESLint](https://eslint.org/)** | Kod kalitesi | JavaScript'teki sorunları otomatik olarak bulun ve düzeltin | -| **[Prettier](https://prettier.io/)** | Kod biçimlendirme | Kodunuzu tutarlı bir şekilde biçimlendirin ve okunabilirliğini artırın | +| Araç | Amaç | Neden Gerekiyor | +|------|-------|-----------------| +| **[Git](https://git-scm.com/)** | Sürüm kontrolü | Değişiklikleri takip etme, işbirliği yapma, yedeğini alma | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript çalışma zamanı ve paket yönetimi | JavaScript’i tarayıcı dışında çalıştırma, modern araçlar yükleme | +| **[Vite](https://vitejs.dev/)** | Yapım aracı ve geliştirme sunucusu | Çok hızlı geliştirme ve sıcak modül değişimi | +| **[ESLint](https://eslint.org/)** | Kod kalitesi | JavaScript’teki sorunları otomatik bulup düzeltme | +| **[Prettier](https://prettier.io/)** | Kod biçimlendirme | Kodunuzu tutarlı ve okunabilir hale getirme | -#### Platforma Özgü Seçenekler +#### Platforma Özel Seçenekler **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Modern, özellik açısından zengin terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Güçlü bir betik ortamı -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Geleneksel Windows komut satırı +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Modern ve zengin özellikli terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Güçlü betik yazma ortamı +- **[Komut İstemi](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Geleneksel Windows komut satırı **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Dahili terminal uygulaması -- **[iTerm2](https://iterm2.com/)** - Gelişmiş özelliklere sahip terminal +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Yerleşik terminal uygulaması +- **[iTerm2](https://iterm2.com/)** - Gelişmiş özelliklerle zenginleştirilmiş terminal **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standart Linux kabuğu -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Gelişmiş terminal emülatörü +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - İleri seviye terminal emülatörü -> 💻 = İşletim sistemine önceden yüklenmiş +> 💻 = İşletim sistemine ön yüklü -> 🎯 **Öğrenme Yolu**: `cd` (dizin değiştirme), `ls` veya `dir` (dosyaları listeleme) ve `mkdir` (klasör oluşturma) gibi temel komutlarla başlayın. `npm install`, `git status` ve `code .` (VS Code'da geçerli dizini açar) gibi modern iş akışı komutlarıyla pratik yapın. Daha rahat hale geldikçe, doğal olarak daha gelişmiş komutlar ve otomasyon tekniklerini öğrenirsiniz. +> 🎯 **Öğrenme Yolu**: Öncelikle `cd` (dizin değiştir), `ls` veya `dir` (dosyaları listele), `mkdir` (klasör oluştur) gibi temel komutlarla başlayın. `npm install`, `git status` ve `code .` (şu anki dizini VS Code’da açar) gibi modern iş akışı komutları üzerinde pratik yapın. Rahat geldikçe daha gelişmiş komutları ve otomasyon tekniklerini doğal olarak öğreneceksiniz. -### Dokümantasyon: Her Zaman Ulaşılabilir Öğrenme Rehberiniz +### Dokümantasyon: Her Zaman Yanınızda Olan Öğrenme Mentorunuz -Tamam, size bir sır vereyim, bu başlangıçta olmanızı çok daha iyi hissettirecek: en deneyimli geliştiriciler bile zamanlarının büyük bir kısmını dokümantasyon okuyarak geçirir. Ve bu, ne yaptıklarını bilmedikleri için değil – aslında bu bir bilgelik işaretidir! +Tamam, size başlangıçta olduğunuzu hissetmenizi çok daha iyi hale getirecek küçük bir sır vereyim: En deneyimli geliştiriciler bile zamanlarının büyük bir kısmını dokümantasyon okuyarak geçirir. Ve bu, ne yaptıklarını bilmedikleri için değil – aslında bu bir bilgelik işaretidir! -Dokümantasyonu, dünyanın en sabırlı, bilgili öğretmenlerine 7/24 erişim sağlamak gibi düşünün. Gece 2'de bir sorunla mı karşılaştınız? Dokümantasyon, sıcak bir sanal kucaklama ve tam olarak ihtiyacınız olan cevapla orada. Herkesin konuştuğu yeni bir özellik hakkında bilgi mi edinmek istiyorsunuz? Dokümantasyon size adım adım örneklerle yardımcı olur. Bir şeyin neden bu şekilde çalıştığını anlamaya mı çalışıyorsunuz? Tahmin edin – dokümantasyon bunu nihayet anlamanızı sağlayacak şekilde açıklamaya hazır! +Dokümantasyonu, dünyanın en sabırlı, bilgili öğretmenlerine 7/24 erişiminiz olarak düşünebilirsiniz. Saat 2’de bir problemle mi takıldınız? Dokümantasyon size sıcak bir sanal kucaklama ile tam gereken cevabı verir. Herkesin konuştuğu yeni bir özellik hakkında mı öğrenmek istiyorsunuz? Dokümantasyon adım adım örneklerle yanınızdadır. Bir şeyin neden böyle çalıştığını anlamaya mı çalışıyorsunuz? Tahmin edin – dokümantasyon bunu size nihayet anlar hale getirir! -Bakış açımı tamamen değiştiren bir şey: web geliştirme dünyası inanılmaz hızlı hareket ediyor ve kimse (kesinlikle kimse!) her şeyi ezbere tutmuyor. 15+ yıllık deneyime sahip kıdemli geliştiricilerin temel sözdizimini aradığını gördüm ve biliyor musunuz? Bu utanç verici değil – bu akıllıca! Mesele mükemmel bir hafızaya sahip olmak değil; güvenilir cevapları hızlı bir şekilde bulmayı ve bunları nasıl uygulayacağınızı anlamayı bilmek. +Perspektifimi tamamen değiştiren bir şey: Web geliştirme dünyası inanılmaz hızlı hareket ediyor ve hiç kimse (kesinlikle kimse!) her şeyi ezberliyor değil. 15+ yıllık kıdemli geliştiricilerin bile temel sözdizimini aradığını gördüm ve biliyor musunuz? Bu utanılacak bir şey değil – bu zekice! Mükemmel hafıza olmak değil, güvenilir cevapları hızlıca nereden bulacağını bilmek ve onları nasıl uygulayacağını anlamak önemli. -**Gerçek sihir burada gerçekleşiyor:** +**Asıl sihir burada oluyor:** -Profesyonel geliştiriciler zamanlarının önemli bir kısmını dokümantasyon okuyarak geçirir – bu, ne yaptıklarını bilmedikleri için değil, web geliştirme ortamı o kadar hızlı evrim geçiriyor ki güncel kalmak sürekli öğrenmeyi gerektiriyor. Harika dokümantasyon, bir şeyi nasıl kullanacağınızı değil, aynı zamanda neden ve ne zaman kullanacağınızı anlamanıza yardımcı olur. +Profesyonel geliştiriciler zamanlarının büyük bölümünü dokümantasyon okuyarak geçirirler – çünkü web geliştirme ortamı o kadar hızlı değişir ki güncel kalmak sürekli öğrenmeyi gerektirir. Harika dokümantasyon, sadece *nasıl* kullanılır değil, *neden* ve *ne zaman* kullanılacağını da anlamanıza yardımcı olur. #### Temel Dokümantasyon Kaynakları **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Web teknolojisi dokümantasyonu için altın standart -- HTML, CSS ve JavaScript için kapsamlı rehberler +- Web teknolojileri dokümantasyonunun altın standardı +- HTML, CSS ve JavaScript için kapsamlı kılavuzlar - Tarayıcı uyumluluk bilgileri içerir - Pratik örnekler ve etkileşimli demolar sunar **[Web.dev](https://web.dev)** (Google tarafından) - Modern web geliştirme en iyi uygulamaları - Performans optimizasyon rehberleri -- Erişilebilirlik ve kapsayıcı tasarım ilkeleri +- Erişilebilirlik ve kapsayıcı tasarım prensipleri - Gerçek dünya projelerinden vaka çalışmaları **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edge tarayıcı geliştirme kaynakları -- İleri Web Uygulaması rehberleri -- Çapraz platform geliştirme içgörüleri +- Progresif Web Uygulama rehberleri +- Platformlar arası geliştirme içgörüleri -**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +**[Frontend Masters Öğrenme Yolları](https://frontendmasters.com/learn/)** - Yapılandırılmış öğrenme müfredatları -- Endüstri uzmanlarından video kursları +- Sektör uzmanlarından video kurslar - Uygulamalı kodlama egzersizleri -> 📚 **Çalışma Stratejisi**: Dokümantasyonu ezberlemeye çalışmayın – bunun yerine, içinde nasıl gezinileceğini öğrenin. Sık kullanılan referansları yer imlerine ekleyin ve belirli bilgileri hızlı bir şekilde bulmak için arama işlevlerini kullanma pratiği yapın. +> 📚 **Çalışma Stratejisi**: Dokümantasyonu ezberlemeye çalışmayın – bunun yerine verimli gezmeyi öğrenin. Sık kullandığınız referansları yer imlerine ekleyin ve belirli bilgileri hızlı bulmak için arama fonksiyonlarını kullanarak pratik yapın. -### 🔧 **Araç Ustalığı Kontrolü: Sizi En Çok Heyecanlandıran Nedir?** +### 🔧 **Araç Ustalığı Kontrolü: Size Ne Çarpıyor?** -**Bir an durup düşünün:** -- İlk olarak denemek için en çok hangi aracı merak ediyorsunuz? (Yanlış cevap yok!) -- Komut satırı hala korkutucu mu geliyor, yoksa merak mı uyandırıyor? -- Tarayıcı DevTools'u kullanarak favori web sitelerinizin perde arkasına bakmayı hayal edebiliyor musunuz? +**Bir an düşünün:** +- İlk olarak hangi aracı denemek için en çok heyecanlanıyorsunuz? (Yanlış cevap yok!) +- Komut satırı hâlâ korkutucu mu geliyor yoksa merak mı ettiriyor? +- Tarayıcı DevTools’u kullanarak favori web sitelerinizin perde arkasına bakmayı hayal edebiliyor musunuz? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "Geliştiricinin Araçlarla Geçirdiği Zaman" + "Kod Editörü" : 40 + "Tarayıcı Testi" : 25 + "Komut Satırı" : 15 + "Doküman Okuma" : 15 + "Hata Ayıklama" : 5 ``` +> **Eğlenceli bir bilgi**: Çoğu geliştirici zamanlarının yaklaşık %40’ını kod editöründe geçirir, ama test etme, öğrenme ve problem çözmeye ne kadar zaman harcandığını fark edin. Programlama sadece kod yazmak değil – deneyimler yaratmaktır! -> **Eğlenceli bilgi**: Çoğu geliştirici zamanlarının yaklaşık %40'ını kod editörlerinde geçirir, ancak test, öğrenme ve sorun çözme için ne kadar zaman harcadıklarına dikkat edin. Programlama sadece kod yazmakla ilgili değil – deneyimler yaratmakla ilgilidir! - -✅ **Düşünce için yiyecek**: İşte ilginç bir şey – web siteleri oluşturmak için kullanılan araçlar (geliştirme) ile nasıl göründüklerini tasarlamak için kullanılan araçlar (tasarım) arasındaki farklar hakkında ne düşünüyorsunuz? Bu, güzel bir ev tasarlayan bir mimar ile onu gerçekten inşa eden müteahhit arasındaki fark gibidir. Her ikisi de çok önemlidir, ancak farklı alet çantalarına ihtiyaç duyarlar! Bu tür bir düşünce, web sitelerinin nasıl hayata geçtiğini daha büyük bir perspektifle görmenize gerçekten yardımcı olacaktır. +✅ **Düşünmek için yiyecek**: Düşünmeniz için ilginç bir şey – web siteleri oluşturmanın araçları (geliştirme) ile onların nasıl göründüğünü tasarlamanın araçları (tasarım) nasıl farklı olabilir? Bu, güzel bir ev tasarlayan bir mimar ile onu gerçekten inşa eden müteahhit arasındaki fark gibidir. İkisi de kritik, ama farklı alet kutularına ihtiyaç duyar! Bu tarz düşünme, web sitelerinin nasıl hayat bulduğunu anlamanızda büyük resmi görmenizi sağlayacak. -## GitHub Copilot Agent Challenge 🚀 +## GitHub Copilot Agent Meydan Okuması 🚀 Agent modunu kullanarak aşağıdaki meydan okumayı tamamlayın: -**Açıklama:** Modern bir kod editörü veya IDE'nin özelliklerini keşfedin ve bir web geliştirici olarak iş akışınızı nasıl geliştirebileceğini gösterin. +**Açıklama:** Modern bir kod editörü veya IDE’nin özelliklerini keşfedin ve bir web geliştiricisi olarak iş akışınızı nasıl geliştirebileceğini gösterin. -**Talimat:** Visual Studio Code, WebStorm veya bulut tabanlı bir IDE gibi bir kod editörü veya IDE seçin. Kod yazmayı, hata ayıklamayı veya kodu daha verimli bir şekilde sürdürmeyi kolaylaştıran üç özellik veya uzantıyı listeleyin. Her biri için, iş akışınıza nasıl fayda sağladığını kısaca açıklayın. +**İstek:** Bir kod editörü veya IDE seçin (örneğin Visual Studio Code, WebStorm veya bulut tabanlı IDE). Kod yazmayı, hata ayıklamayı veya kod bakımı yapmayı daha verimli hale getiren üç özellik veya eklenti listeleyin. Her biri için iş akışınıza sağladığı faydayı kısa açıklayın. --- ## 🚀 Meydan Okuma -**Tamam, dedektif, ilk davanı çözmeye hazır mısın?** +**Tamam, dedektif, ilk davan için hazır mısın?** -Şimdi bu harika temeli aldığınıza göre, programlama dünyasının ne kadar çeşitli ve büyüleyici olduğunu görmenize yardımcı olacak bir maceram var. Ve dinleyin – bu henüz kod yazmakla ilgili değil, bu yüzden endişelenmeyin! Kendinizi ilk heyecan verici davasında bir programlama dili dedektifi olarak düşünün! +Artık bu harika temele sahipsin, sana programlama dünyasının ne kadar çeşitli ve heyecan verici olduğunu gösterecek bir macera hazırladım. Ve dinle – bu henüz kod yazmakla ilgili değil, yani baskı yok! Kendini çok heyecanlı ilk davanda programlama dili dedektifi gibi düşün! -**Göreviniz, kabul ederseniz:** -1. **Bir dil kaşifi olun**: Tamamen farklı evrenlerden üç programlama dili seçin – belki biri web siteleri oluşturuyor, biri mobil uygulamalar yapıyor ve biri bilim insanları için veri işliyor. Her dilde aynı basit görevin nasıl yazıldığını gösteren örnekler bulun. Aynı şeyi yaparken ne kadar farklı görünebileceklerine kesinlikle hayran kalacaksınız! +**İşi, kabul edersen:** +1. **Bir dil gezgini ol:** Tamamen farklı üç programlama dili seç – belki biri web sitesi yapar, biri mobil uygulama oluşturur, biri bilim insanları için veri işler. Aynı basit görevin her dille yazılmış örneklerini bulun. Sizi kesinlikle şaşırtacak, çünkü aynı şeyi yaparken ne kadar farklı görünebileceklerini göreceksiniz! -2. **Köken hikayelerini ortaya çıkarın**: Her dilin özel kılan nedir? İşte havalı bir gerçek – her bir programlama dili, birisi "Biliyor musunuz? Bu belirli sorunu çözmek için daha iyi bir yol olmalı." diye düşündüğü için yaratıldı. Bu sorunların ne olduğunu bulabilir misiniz? Bu hikayeler gerçekten büyüleyici! +2. **Köken hikayelerini ortaya çıkar:** Her dili özel yapan ne? Şöyle güzel bir gerçek – her programlama dili birileri, “Biliyor musunuz? Bu belirli sorunu çözmenin daha iyi bir yolu olmalı” diye düşündüğü için yaratıldı. Bu sorunların neler olduğunu çözebilir misiniz? Bazıları gerçekten büyüleyici hikayeler! -3. **Topluluklarla tanışın**: Her dilin topluluğunun ne kadar misafirperver ve tutkulu olduğunu kontrol edin. Bazılarında milyonlarca geliştirici bilgi paylaşır ve birbirine yardım eder, diğerleri daha küçük ama inanılmaz derecede sıkı ve destekleyicidir. Bu toplulukların farklı kişiliklerini görmekten keyif alacaksınız! +3. **Topluluklarla tanış:** Her dilin topluluğu ne kadar samimi ve tutkulu? Bazılarının milyonlarca geliştirici bilgi paylaşıyor ve yardım ediyor, bazıları küçük ama çok sıkı ve destekleyici. Bu farklı kişilikleri görmek çok keyifli olacak! -4. **İçgüdülerinizi takip edin**: Şu anda size en yakın gelen dil hangisi? "Mükemmel" seçimi yapma konusunda endişelenmeyin – sadece içgüdülerinizi dinleyin! Burada kesinlikle yanlış bir cevap yok ve daha sonra diğerlerini keşfedebilirsiniz. +4. **İçgüdülerinize güven:** Şu anda hangi dil size en erişilebilir görünüyor? “Mükemmel” seçimi yapmaya çalışmayın – sadece sezgilerinizi dinleyin! Burada yanlış cevap yok, istediğiniz zaman başka dilleri de keşfedebilirsiniz. -**Bonus dedektiflik çalışması**: Her dilde hangi büyük web sitelerinin veya uygulamaların oluşturulduğunu keşfedebilir misiniz? Instagram, Netflix veya durmadan oynadığınız o mobil oyunun neyle çalıştığını öğrenince kesinlikle şaşıracaksınız! +**Bonus dedektif çalışması:** Her dil ile hangi büyük web sitelerinin veya uygulamaların yapıldığını keşfedebilir misiniz? Instagram, Netflix veya hiç durmadan oynadığınız o mobil oyunun hangi dil(ler)le yapıldığını öğrenince kesinlikle şaşıracaksınız! -> 💡 **Unutmayın**: Bugün bu dillerden herhangi birinde uzman olmaya çalışmıyorsunuz. Sadece mahalleyi tanımaya çalışıyorsunuz, sonra nerede dükkan açmak istediğinize karar vereceksiniz. Zaman ayırın, bununla eğlenin ve merakınızın sizi yönlendirmesine izin verin! +> 💡 **Unutmayın**: Bugün bu dillerin uzmanı olmaya çalışmıyorsunuz. Sadece mahalleyi tanıyorsunuz, nerede yerleşeceğinize karar vermeden önce. Acele etmeyin, eğlenin ve merakınıza izin verin! ## Keşfettiklerinizi Kutlayalım! -Aman Tanrım, bugün ne kadar inanılmaz bilgi öğrendiniz! Bu harika yolculuğun ne kadarının sizinle kaldığını görmek için gerçekten heyecanlıyım. Ve unutmayın – bu, her şeyi mükemmel yapmanız gereken bir test değil. Bu, öğrendiğiniz tüm harika şeyleri kutlamak gibi bir şey! +Vay be, bugün inanılmaz çok bilgi absorbe ettiniz! Gerçekten bu muhteşem yolculuktan ne kadar şey öğrenmiş olduğunuzu görmek için heyecanlıyım. Ve unutmayın – bu her şeyi tamamen doğru yapmak zorunda olduğunuz bir test değil. Bu, dalmaya hazır olduğunuz bu büyüleyici dünya hakkında öğrendiğiniz tüm harika şeyleri kutlamak gibi! -[Post-lesson quiz'i çözmek için tıklayın](https://ff-quizzes.netlify.app/web/) -## İnceleme ve Kendi Kendine Çalışma +[Ders sonrası sınava katılın](https://ff-quizzes.netlify.app/web/) -**Zaman ayırın, keşfedin ve eğlenin!** +## Gözden Geçirme ve Kendi Kendine Çalışma -Bugün çok şey öğrendiniz ve bununla gurur duymalısınız! Şimdi eğlenceli kısım başlıyor – ilginizi çeken konuları keşfetmek. Unutmayın, bu bir ödev değil – bu bir macera! +**Keşfetmek için zaman ayırın ve eğlenin!** +Bugün çok şey öğrendiniz ve bu gurur duyulacak bir şey! Şimdi eğlenceli kısım geliyor – merakınızı tetikleyen konuları keşfetmek. Unutmayın, bu ödev değil – bu bir macera! -**Sizi heyecanlandıran konulara daha derinlemesine dalın:** +**İlginizi çeken konulara derinlemesine dalın:** -**Programlama dilleriyle pratik yapın:** -- İlginizi çeken 2-3 dilin resmi web sitelerini ziyaret edin. Her birinin kendine özgü bir kişiliği ve hikayesi var! -- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) veya [Replit](https://replit.com/) gibi çevrimiçi kodlama platformlarını deneyin. Denemekten çekinmeyin – hiçbir şeyi bozmazsınız! -- Sevdiğiniz programlama dilinin nasıl ortaya çıktığını okuyun. Gerçekten, bu köken hikayeleri büyüleyici ve dillerin neden bu şekilde çalıştığını anlamanıza yardımcı olacak. +**Programlama dilleriyle pratiğe başlayın:** +- Dikkatinizi çeken 2-3 dilin resmi web sitelerini ziyaret edin. Her birinin kendine özgü bir kişiliği ve hikayesi var! +- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) veya [Replit](https://replit.com/) gibi çevrimiçi kod yazma ortamlarını deneyin. Denemekten çekinmeyin – hiçbir şeyi bozamazsınız! +- Sevdiğiniz dilin nasıl ortaya çıktığını okuyun. Cidden, bazı başlangıç hikayeleri çok ilginç ve dillerin neden böyle çalıştığını anlamanıza yardımcı olacak. -**Yeni araçlarınızla rahat olun:** -- Henüz indirmediyseniz Visual Studio Code'u indirin – ücretsiz ve kesinlikle seveceksiniz! -- Uzantılar pazarında birkaç dakika geçirin. Kod editörünüz için bir uygulama mağazası gibi! -- Tarayıcınızın Geliştirici Araçlarını açın ve etrafta tıklayın. Her şeyi anlamaya çalışmayın – sadece orada neler olduğunu öğrenin. +**Yeni araçlarınıza alışın:** +- Eğer indirip kurmadıysanız Visual Studio Code'u indirin – ücretsizdir ve çok seveceksiniz! +- Uzantılar pazaryerinde birkaç dakika gezin. Burası kod editörünüz için bir uygulama mağazası gibi! +- Tarayıcınızın Geliştirici Araçlarını açın ve etrafa tıklayın. Her şeyi anlamaya çalışmayın – orada neler olduğunu keşfedin. **Topluluğa katılın:** -- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) veya [GitHub](https://github.com/) gibi geliştirici topluluklarını takip edin. Programlama topluluğu yeni başlayanlara inanılmaz derecede sıcak davranır! -- YouTube'da yeni başlayanlar için dostça kodlama videoları izleyin. Başlangıçta olmanın nasıl bir şey olduğunu hatırlayan harika içerik üreticiler var. -- Yerel buluşmalara veya çevrimiçi topluluklara katılmayı düşünün. Emin olun, geliştiriciler yeni başlayanlara yardım etmeyi çok sever! - -> 🎯 **Dinleyin, hatırlamanızı istediğim şey şu**: Bir gecede kodlama uzmanı olmanız beklenmiyor! Şu anda, parçası olacağınız bu harika yeni dünyayı tanıyorsunuz. Zaman ayırın, yolculuğun tadını çıkarın ve unutmayın – hayranlık duyduğunuz her bir geliştirici bir zamanlar tam olarak sizin şu an oturduğunuz yerde oturuyordu, heyecanlı ve belki biraz bunalmış hissediyordu. Bu tamamen normal ve doğru yolda olduğunuz anlamına geliyor. - +- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) veya [GitHub](https://github.com/) gibi geliştirici topluluklarını takip edin. Programlama topluluğu yeni başlayanlara inanılmaz derecede dostça yaklaşır! +- YouTube’da yeni başlayanlara yönelik kodlama videoları izleyin. Başlayanların nasıl hissettiğini bilen çok harika yaratıcılar var. +- Yerel buluşmalara veya çevrimiçi topluluklara katılmayı düşünün. İnanın bana, geliştiriciler yeni başlayanlara yardım etmeyi çok sever! +> 🎯 **Dinle, aklında tutman gereken şudur**: Bir anda kodlama büyücüsü olman beklenmiyor! Şu anda sadece bu harika yeni dünyayı tanımaya başlıyorsun. Acele etme, yolculuğun tadını çıkar, ve unutma – hayran olduğun her geliştirici bir zamanlar tam senin şu an bulunduğun yerde oturuyor, heyecanlı ve belki biraz da şaşkın hissediyordu. Bu tamamen normal ve doğru bir yoldasın! ## Ödev -[Belgeleri Okuma](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **Ödeviniz için küçük bir teşvik**: Henüz ele almadığımız bazı araçları keşfetmenizi çok isterim! Daha önce konuştuğumuz editörleri, tarayıcıları ve komut satırı araçlarını atlayın – keşfedilmeyi bekleyen harika bir geliştirme araçları evreni var. Aktif olarak sürdürülen ve canlı, yardımcı topluluklara sahip olanları arayın (bunlar genellikle en iyi eğitimlere ve takıldığınızda size yardım edecek en destekleyici insanlara sahiptir). +> 💡 **Ödevin için küçük bir teşvik**: Henüz keşfetmediğimiz bazı araçları senin araştırmanı çok isterim! Daha önce konuştuğumuz editörler, tarayıcılar ve komut satırı araçlarını atla – dışarıda keşfedilmeyi bekleyen inanılmaz bir geliştirme aracı evreni var. Aktif geliştirilen ve canlı, yardımsever topluluklara sahip olanları ara (bu tür araçlar genellikle en iyi öğreticilere ve takıldığında destek olabilecek en dost canlısı insanlara sahiptir). --- -## 🚀 Programlama Yolculuğunuzun Zaman Çizelgesi +## 🚀 Programlama Yolculuğun Zaman Çizelgesi -### ⚡ **Önümüzdeki 5 Dakikada Yapabilecekleriniz** -- [ ] İlginizi çeken 2-3 programlama dilinin web sitesini yer imlerine ekleyin -- [ ] Henüz yapmadıysanız Visual Studio Code'u indirin -- [ ] Tarayıcınızın Geliştirici Araçlarını (F12) açın ve herhangi bir web sitesinde etrafta tıklayın +### ⚡ **Önümüzdeki 5 Dakikada Yapabileceklerin** +- [ ] İlginizi çeken 2-3 programlama dili web sitesini yer işareti olarak kaydedin +- [ ] Henüz indirmediysen Visual Studio Code'u indirin +- [ ] Tarayıcınızın Geliştirici Araçlarını (F12) açıp herhangi bir web sitesinde tıklayın - [ ] Bir programlama topluluğuna katılın (Dev.to, Reddit r/webdev veya Stack Overflow) -### ⏰ **Bu Saat İçinde Başarabilecekleriniz** -- [ ] Ders sonrası testi tamamlayın ve cevaplarınızı değerlendirin +### ⏰ **Bu Saatte Başarabileceklerin** +- [ ] Dersten sonra ki quiz’i tamamlayın ve cevaplarınızı değerlendirin - [ ] VS Code'u GitHub Copilot uzantısıyla kurun -- [ ] Çevrimiçi olarak 2 farklı programlama dilinde bir "Hello World" örneği deneyin -- [ ] YouTube'da "Bir Geliştiricinin Günlük Hayatı" videosu izleyin -- [ ] Programlama dili dedektiflik çalışmanıza başlayın (zorluktan) +- [ ] Çevrimiçi olarak 2 farklı programlama dilinde "Hello World" örneği yapın +- [ ] YouTube’da "Bir Geliştiricinin Günü" videosu izleyin +- [ ] Programlama dili dedektifliğine başlayın (zorluktan) -### 📅 **Bir Haftalık Maceranız** +### 📅 **Haftalık Maceranız** - [ ] Ödevi tamamlayın ve 3 yeni geliştirme aracını keşfedin -- [ ] Sosyal medyada 5 geliştiriciyi veya programlama hesabını takip edin -- [ ] CodePen veya Replit'te küçük bir şey oluşturmayı deneyin (hatta sadece "Merhaba, [Adınız]!" yazabilirsiniz!) +- [ ] Sosyal medyada 5 geliştirici veya programlama hesabını takip edin +- [ ] CodePen veya Replit’te küçük bir şey inşa etmeyi deneyin (hatta sadece "Merhaba, [Adınız]!" bile olabilir!) - [ ] Bir geliştiricinin kodlama yolculuğu hakkında bir blog yazısı okuyun - [ ] Sanal bir buluşmaya katılın veya bir programlama konuşması izleyin - [ ] Seçtiğiniz dili çevrimiçi eğitimlerle öğrenmeye başlayın -### 🗓️ **Bir Aylık Dönüşümünüz** -- [ ] İlk küçük projenizi oluşturun (basit bir web sayfası bile sayılır!) -- [ ] Açık kaynaklı bir projeye katkıda bulunun (belge düzeltmeleriyle başlayabilirsiniz) -- [ ] Programlama yolculuğuna yeni başlayan birine mentorluk yapın +### 🗓️ **Aylık Dönüşümünüz** +- [ ] İlk küçük projenizi oluşturun (basit bir web sayfası bile geçerli!) +- [ ] Açık kaynak bir projeye katkıda bulunun (önce dokümantasyon düzeltmeleriyle başlayın) +- [ ] Programlamaya yeni başlayan birine mentorluk yapın - [ ] Geliştirici portföy web sitenizi oluşturun - [ ] Yerel geliştirici toplulukları veya çalışma gruplarıyla bağlantı kurun -- [ ] Bir sonraki öğrenme hedefinizi planlamaya başlayın +- [ ] Sonraki öğrenme aşamanızı planlamaya başlayın -### 🎯 **Son Düşünce Kontrolü** +### 🎯 **Son Yansıma Kontrolü** -**Devam etmeden önce kutlama yapın:** -- Bugün programlama hakkında sizi heyecanlandıran bir şey neydi? -- İlk olarak hangi aracı veya konsepti keşfetmek istiyorsunuz? -- Bu programlama yolculuğuna başlamak hakkında nasıl hissediyorsunuz? -- Şu anda bir geliştiriciye sormak istediğiniz bir soru nedir? +**İlerlemeden önce bir an durup kutlayın:** +- Bugün programlama hakkında sizi heyecanlandıran neydi? +- Hangi araç ya da kavramı önce keşfetmek istiyorsunuz? +- Bu programlama yolculuğuna başlamayı nasıl hissediyorsunuz? +- Şu anda bir geliştiriciye sormak istediğiniz bir soru var mı? ```mermaid journey - title Your Confidence Building Journey - section Today - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section This Week - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Next Month - Building: 5: You - Confident: 5: You - Helping Others: 5: You + title Kendine Güven İnşa Etme Yolculuğunuz + section Bugün + Meraklı: 3: You + Bunalmış: 4: You + Heyecanlı: 5: You + section Bu Hafta + Keşfediyor: 4: You + Öğreniyor: 5: You + Bağlanıyor: 4: You + section Gelecek Ay + İnşa Ediyor: 5: You + Kendinden Emin: 5: You + Başkalarına Yardım Ediyor: 5: You ``` - -> 🌟 **Unutmayın**: Her uzman bir zamanlar bir acemiydi. Her kıdemli geliştirici bir zamanlar tam olarak sizin şu an hissettiğiniz gibi hissediyordu – heyecanlı, belki biraz bunalmış ve kesinlikle nelerin mümkün olduğunu merak ediyordu. Harika bir topluluktasınız ve bu yolculuk inanılmaz olacak. Programlamanın harika dünyasına hoş geldiniz! 🎉 +> 🌟 **Unutmayın**: Her uzman bir zamanlar acemiydi. Her kıdemli geliştirici tam sizin şu an hissettiğiniz gibi – heyecanlı, belki biraz şaşkın ve kesinlikle mümkün olanlara meraklıydı. Harika bir topluluğun içindesiniz ve bu yolculuk inanılmaz olacak. Programlama dünyasına hoş geldiniz! 🎉 --- + **Feragatname**: -Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çeviriler hata veya yanlışlıklar içerebilir. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan herhangi bir yanlış anlama veya yanlış yorumlama durumunda sorumluluk kabul edilmez. \ No newline at end of file +Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluğa özen göstersek de, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayın. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Önemli bilgiler için profesyonel insan çevirisi önerilmektedir. Bu çevirinin kullanımı sonucu ortaya çıkabilecek yanlış anlamalar veya yorum hatalarından sorumlu değiliz. + \ No newline at end of file diff --git a/translations/tr/AGENTS.md b/translations/tr/AGENTS.md index f5eb832a1..7301da9a5 100644 --- a/translations/tr/AGENTS.md +++ b/translations/tr/AGENTS.md @@ -1,28 +1,28 @@ # AGENTS.md -## Proje Genel Bakışı +## Proje Genel Bakış -Bu, yeni başlayanlara web gelişimini temel prensipleri öğretmek için hazırlanmış eğitim müfredatı deposudur. Müfredat, Microsoft Bulut Savunucuları tarafından geliştirilen kapsamlı bir 12 haftalık kurstur ve JavaScript, CSS ve HTML içeren 24 uygulamalı ders içermektedir. +Bu, başlangıç seviyesindeki kişilere web geliştirme temel bilgilerini öğretmek için hazırlanmış eğitici bir müfredat deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilen kapsamlı 12 haftalık bir kurstur ve JavaScript, CSS ve HTML'i kapsayan 24 uygulamalı dersten oluşur. ### Ana Bileşenler -- **Eğitim İçeriği**: Proje tabanlı modüllere organize edilmiş 24 yapılandırılmış ders +- **Eğitici İçerik**: Proje bazlı modüllere organize edilmiş 24 yapılandırılmış ders - **Pratik Projeler**: Terrarium, Yazma Oyunu, Tarayıcı Uzantısı, Uzay Oyunu, Bankacılık Uygulaması, Kod Editörü ve Yapay Zeka Sohbet Asistanı - **Etkileşimli Quizler**: Her biri 3 sorudan oluşan 48 quiz (ders öncesi/sonrası değerlendirmeleri) -- **Çok Dilli Destek**: GitHub Actions ile 50+ dilde otomatik çeviri +- **Çok Dilli Destek**: GitHub Actions ile 50+ dilde otomatik çeviriler - **Teknolojiler**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (Yapay Zeka projeleri için) ### Mimari -- Ders temelli yapıya sahip eğitim deposu +- Ders tabanlı yapıya sahip eğitim deposu - Her ders klasörü README, kod örnekleri ve çözümler içerir -- Ayrı klasörlerde bağımsız projeler (quiz-app, çeşitli ders projeleri) +- Ayrı dizinlerde bağımsız projeler (quiz-app, çeşitli ders projeleri) - GitHub Actions kullanan çeviri sistemi (co-op-translator) -- Docsify ile sağlanan dökümantasyon ve PDF halinde erişilebilirlik +- Docsify ile sunulan dokümantasyon ve PDF olarak erişilebilirlik ## Kurulum Komutları -Bu depo öncelikle eğitim içeriği tüketimi içindir. Belirli projelerle çalışmak için: +Bu depo esas olarak eğitim içeriğinin tüketimi içindir. Belirli projelerle çalışmak için: ### Ana Depo Kurulumu @@ -56,7 +56,7 @@ npm run format # Prettier ile biçimlendir ```bash cd 5-browser-extension/solution npm install -# Tarayıcıya özel uzantı yükleme talimatlarını izleyin +# Tarayıcıya özgü uzantı yükleme talimatlarını izleyin ``` ### Uzay Oyunu Projeleri @@ -64,45 +64,45 @@ npm install ```bash cd 6-space-game/solution npm install -# index.html dosyasını tarayıcıda açın veya Live Server kullanın +# index.html dosyasını tarayıcıda açın veya Canlı Sunucu kullanın ``` -### Sohbet Projesi (Python Backend) +### Sohbet Projesi (Python Arka Uç) ```bash cd 9-chat-project/solution/backend/python pip install openai -# GITHUB_TOKEN ortam değişkenini ayarla +# GITHUB_TOKEN ortam değişkenini ayarlayın python api.py ``` ## Geliştirme İş Akışı -### İçerik Katkıcıları İçin +### İçerik Katkısı Sağlayanlar için -1. **Depoyu kendi GitHub hesabınıza fork edin** -2. **Fork’unuzu yerel olarak klonlayın** -3. **Değişiklikleriniz için yeni bir dal oluşturun** +1. Depoyu GitHub hesabınıza **forklayın** +2. Forkladığınız depoyu yerel olarak **klonlayın** +3. Değişiklikleriniz için yeni bir **dal (branch)** oluşturun 4. Ders içeriği veya kod örneklerinde değişiklik yapın 5. İlgili proje klasörlerinde kod değişikliklerini test edin -6. Katkı yönergelerine uygun şekilde pull request gönderin +6. Katkı yönergelerini takip ederek pull request gönderin -### Öğrenenler İçin +### Öğrenenler için -1. Depoyu fork edin veya klonlayın -2. Ders klasörlerinde sırayla gezin -3. Her dersin README dosyasını okuyun -4. https://ff-quizzes.netlify.app/web/ adresinde ders öncesi quizleri tamamlayın -5. Ders klasörlerindeki kod örnekleri üzerinde çalışın +1. Depoyu forklayın veya klonlayın +2. Ders klasörleri arasında sırayla gezin +3. Her ders için README dosyalarını okuyun +4. Ders öncesi quizlerini https://ff-quizzes.netlify.app/web/ adresinde tamamlayın +5. Ders klasörlerindeki kod örneklerini uygulayın 6. Ödevleri ve zorlukları tamamlayın -7. Ders sonrası quizleri yapın +7. Ders sonrası quizlerine katılın ### Canlı Geliştirme -- **Dökümantasyon**: `docsify serve` komutunu kök dizinde çalıştırın (port 3000) -- **Quiz Uygulaması**: `quiz-app` dizininde `npm run dev` çalıştırın +- **Dokümantasyon**: Kök dizinde `docsify serve` çalıştırın (port 3000) +- **Quiz Uygulaması**: quiz-app dizininde `npm run dev` komutunu çalıştırın - **Projeler**: HTML projeleri için VS Code Live Server uzantısını kullanın -- **API Projeleri**: İlgili API dizinlerinde `npm start` komutunu kullanın +- **API Projeleri**: İlgili API dizinlerinde `npm start` komutunu çalıştırın ## Test Talimatları @@ -118,74 +118,74 @@ npm run build # Derlemenin başarılı olduğunu doğrula ```bash cd 7-bank-project/api -npm run lint # Kod stil sorunlarını kontrol et -node server.js # Sunucunun hatasız başladığını doğrula +npm run lint # Kod stili sorunlarını kontrol et +node server.js # Sunucunun hatasız başlatıldığını doğrula ``` ### Genel Test Yaklaşımı -- Bu eğitim deposunda kapsamlı otomatik test bulunmamaktadır -- Manuel testler: - - Kod örneklerinin hatasız çalışması - - Dökümantasyondaki linklerin doğru çalışması - - Proje derlemelerinin başarılı olması - - Örneklerin en iyi uygulamalara uygun olması +- Bu, kapsamlı otomatik testler içermeyen bir eğitim deposudur +- Manuel testler şunlara odaklanır: + - Kod örnekleri hatasız çalışmalı + - Dokümantasyon linkleri düzgün çalışmalı + - Proje derlemeleri başarılı şekilde tamamlanmalı + - Örnekler en iyi uygulamaları takip etmeli ### Gönderim Öncesi Kontroller -- package.json içeren dizinlerde `npm run lint` komutunu çalıştırın -- Markdown bağlantılarının geçerli olduğundan emin olun -- Kod örneklerini tarayıcı veya Node.js üzerinde test edin -- Çevirilerin yapısını koruduğunu kontrol edin +- package.json olan dizinlerde `npm run lint` çalıştırın +- Markdown bağlantılarının geçerli olduğunu doğrulayın +- Kod örneklerini tarayıcıda veya Node.js'de test edin +- Çevirilerin yapısını koruduğundan emin olun -## Kod Stili Yönergeleri +## Kod Stili Rehberi ### JavaScript - Modern ES6+ sözdizimi kullanın -- Projelerde sağlanan standart ESLint yapılandırmalarını takip edin -- Eğitim için anlamlı değişken ve fonksiyon isimleri kullanın -- Kavramları açıklayan yorumlar ekleyin -- Prettier kullanılan yerlerde biçimlendirme yapın +- Projelerde sağlanan standart ESLint yapılandırmalarını uygulayın +- Eğitim amacıyla anlamlı değişken ve fonksiyon isimleri kullanın +- Öğrenenlere kavramları açıklayan yorumlar ekleyin +- Ayarlanmışsa Prettier ile biçimlendirin ### HTML/CSS -- Semantik HTML5 elemanları kullanın -- Duyarlı tasarım prensiplerine uyun -- Açık sınıf isimlendirme konvansiyonları kullanın -- CSS tekniklerini açıklayan yorumlar ekleyin +- Anlamsal HTML5 öğeleri +- Duyarlı tasarım prensipleri +- Açık sınıf isimlendirme kuralları +- Öğrenenler için CSS tekniklerini açıklayan yorumlar ### Python -- PEP 8 stil kurallarına uyun -- Açık, eğitim amaçlı kod örnekleri sunun -- Öğrenmeye yardımcı olan yerlerde tip ipuçları kullanın +- PEP 8 stil yönergeleri +- Açık, eğitici kod örnekleri +- Öğrenmeye yardımcı olabilecek tip ipuçları -### Markdown Dökümantasyonu +### Markdown Dokümantasyonu -- Net başlık hiyerarşisi -- Dil belirtilmiş kod blokları -- Ek kaynaklara linkler -- `images/` dizininde ekran görüntüleri ve görseller -- Erişilebilirlik için görsellerde alt metin kullanımı +- Açık başlık hiyerarşisi +- Dil belirtimi içeren kod blokları +- Ek kaynak bağlantıları +- `images/` klasörlerinde ekran görüntüleri ve resimler +- Erişilebilirlik için görüntülerde alt metin ### Dosya Organizasyonu -- Dersler sırayla numaralandırılmış (1-getting-started-lessons, 2-js-basics, vb.) -- Her projenin `solution/` ve çoğunlukla `start/` veya `your-work/` klasörleri var -- Görseller derslere özel `images/` klasörlerinde tutulur -- Çeviriler `translations/{language-code}/` yapısında +- Dersler sıralı numaralandırılmış (1-getting-started-lessons, 2-js-basics, vb.) +- Her projenin `solution/` ve genellikle `start/` veya `your-work/` klasörleri var +- Resimler derslere özgü `images/` klasörlerinde saklanır +- Çeviriler `translations/{dil-kodu}/` yapısında -## Derleme ve Dağıtım +## Derleme ve Yayınlama -### Quiz Uygulaması Dağıtımı (Azure Static Web Apps) +### Quiz Uygulaması Yayınlama (Azure Static Web Apps) -quiz-app Azure Static Web Apps dağıtımı için yapılandırılmıştır: +quiz-app Azure Static Web Apps yayınlama için yapılandırılmıştır: ```bash cd quiz-app npm run build # dist/ klasörü oluşturur -# main'e push yapıldığında GitHub Actions iş akışıyla dağıtır +# main dalına push yapıldığında GitHub Actions iş akışıyla dağıtım yapar ``` Azure Static Web Apps yapılandırması: @@ -193,37 +193,37 @@ Azure Static Web Apps yapılandırması: - **Çıktı konumu**: `dist` - **İş akışı**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Dökümantasyon PDF Oluşturma +### Dokümantasyon PDF Oluşturma ```bash -npm install # docsify-to-pdf yükleyin -npm run convert # Docs'dan PDF oluşturun +npm install # docsify-to-pdf kur +npm run convert # Belgelerden PDF oluştur ``` -### Docsify Dökümantasyonu +### Docsify Dokümantasyonu ```bash -npm install -g docsify-cli # Docsify'yi global olarak kur -docsify serve # localhost:3000 üzerinde sun +npm install -g docsify-cli # Docsify'ı küresel olarak yükleyin +docsify serve # localhost:3000 üzerinde sunun ``` -### Proje Bazlı Derlemeler +### Proje Özel Derlemeler -Her proje dizininde kendi derleme süreci olabilir: -- Vue projeleri: `npm run build` ile üretim paketleri oluşturulur -- Statik projeler: Derleme adımı yok, dosyalar doğrudan servis edilir +Her proje dizini kendi derleme sürecine sahip olabilir: +- Vue projeleri: `npm run build` üretim paketlerini oluşturur +- Statik projeler: Derleme işlemi yok, dosyalar doğrudan servis edilir ## Pull Request Yönergeleri ### Başlık Formatı -Değişiklik alanını belirtmek için açık ve açıklayıcı başlıklar kullanın: +Değişiklik alanını açıkça belirten başlıklar kullanın: - `[Quiz-app] Ders X için yeni quiz ekle` -- `[Lesson-3] Terrarium projesinde yazım hatasını düzelt` -- `[Translation] Ders 5 için İspanyolca çeviri ekle` -- `[Docs] Kurulum talimatlarını güncelle` +- `[Lesson-3] Terrarium projesinde yazım hatası düzeltildi` +- `[Translation] Ders 5 için İspanyolca çeviri eklendi` +- `[Docs] Kurulum talimatları güncellendi` -### Gereken Kontroller +### Gerekli Kontroller PR göndermeden önce: @@ -231,50 +231,50 @@ PR göndermeden önce: - Etkilenen proje dizinlerinde `npm run lint` çalıştırın - Tüm lint hatalarını ve uyarılarını düzeltin -2. **Derleme Doğrulaması**: - - Uygunsa, `npm run build` komutunu çalıştırın +2. **Derleme Doğrulama**: + - Uygun ise `npm run build` çalıştırın - Derleme hatası olmadığından emin olun -3. **Link Doğrulama**: - - Tüm markdown linklerini test edin - - Görsel referansların çalıştığını kontrol edin +3. **Bağlantı Doğrulama**: + - Tüm markdown bağlantılarını test edin + - Resim referanslarının çalıştığını kontrol edin 4. **İçerik İncelemesi**: - - İmla ve gramer kontrolü yapın - - Kod örneklerinin doğru ve öğretici olduğundan emin olun - - Çevirilerin orijinal anlamı koruduğunu teyit edin + - Yazım ve dil bilgisi denetimi yapın + - Kod örneklerinin doğru ve eğitici olduğundan emin olun + - Çevirilerin orijinal anlamı koruduğunu doğrulayın -### Katkı Gereksinimleri +### Katkı Koşulları -- Microsoft CLA’ya (otomatik kontrol ilk PR’da) onay verin -- [Microsoft Açık Kaynak Davranış Kuralları](https://opensource.microsoft.com/codeofconduct/)’na uyun -- Detaylı yönergeler için [CONTRIBUTING.md](./CONTRIBUTING.md) dosyasına bakın -- Uygunsa, PR açıklamasında ilgili issue numaralarını belirtin +- Microsoft CLA’ya (ilk PR’de otomatik kontrol) +- [Microsoft Açık Kaynak Davranış Kurallarına](https://opensource.microsoft.com/codeofconduct/) uyun +- Ayrıntılı yönergeler için [CONTRIBUTING.md](./CONTRIBUTING.md) dosyasına bakın +- Gerekliyse PR açıklamasında ilgili issue numaralarını belirtin ### İnceleme Süreci - PR’lar bakımcılar ve topluluk tarafından incelenir -- Eğitimsel açıklık önceliklidir -- Kod örnekleri mevcut en iyi uygulamalara uygun olmalıdır -- Çeviriler doğruluk ve kültürel uygunluk açısından gözden geçirilir +- Eğitici açıklık önceliklidir +- Kod örnekleri güncel en iyi uygulamalara uygun olmalı +- Çeviriler doğruluk ve kültürel uygunluk için denetlenir ## Çeviri Sistemi ### Otomatik Çeviri -- GitHub Actions ile co-op-translator iş akışını kullanır -- 50+ dile otomatik çeviri yapar -- Kaynak dosyalar ana dizinlerde -- Çeviriler `translations/{language-code}/` dizinlerinde +- GitHub Actions ile co-op-translator iş akışı kullanılır +- 50+ dile otomatik çeviri yapılır +- Kaynak dosyalar ana dizinlerde olur +- Çeviriler `translations/{dil-kodu}/` klasörlerinde bulunur ### Manuel Çeviri İyileştirmeleri Ekleme -1. `translations/{language-code}/` dizininde dosyayı bulun +1. Dosyayı `translations/{dil-kodu}/` içinde bulun 2. Yapıyı koruyarak iyileştirmeler yapın -3. Kod örneklerinin çalışır durumda kaldığından emin olun -4. Yerelleştirilmiş quiz içeriklerini test edin +3. Kod örneklerinin işlevselliğini muhafaza edin +4. Yerelleştirilmiş quiz içeriğini test edin -### Çeviri Meta Verisi +### Çeviri Meta Verileri Çevrilmiş dosyalar meta veri başlığı içerir: ```markdown @@ -294,63 +294,63 @@ CO_OP_TRANSLATOR_METADATA: ### Yaygın Sorunlar **Quiz uygulaması başlamıyor**: -- Node.js sürümünü kontrol edin (v14+ önerilir) -- `node_modules` ve `package-lock.json` silip `npm install` komutunu tekrar çalıştırın -- Port çakışması olup olmadığını kontrol edin (varsayılan: Vite portu 5173) +- Node.js versiyonunu kontrol edin (v14+ önerilir) +- `node_modules` ve `package-lock.json` silin, ardından `npm install` çalıştırın +- Port çakışmalarını kontrol edin (varsayılan: Vite 5173 portunu kullanır) **API sunucusu başlamıyor**: -- Node.js sürümünün minimum gereksinimi karşılayıp karşılamadığını kontrol edin (node >=10) -- Portun kullanımda olup olmadığını kontrol edin +- Node.js sürümünün minimum (node >=10) olduğundan emin olun +- Portun kullanımda olmadığını kontrol edin - Tüm bağımlılıkların `npm install` ile yüklendiğinden emin olun **Tarayıcı uzantısı yüklenmiyor**: -- manifest.json dosyasının doğru formatlandığını kontrol edin -- Tarayıcı konsolunda hata var mı bakın -- Tarayıcıya özel uzantı yükleme talimatlarını takip edin +- manifest.json dosyasının düzgün formatlandığını kontrol edin +- Tarayıcı konsolundaki hatalara bakın +- Tarayıcıya özgü uzantı kurulum talimatlarını takip edin -**Python sohbet projesi sorunları**: -- OpenAI paketi yüklü mü: `pip install openai` -- GITHUB_TOKEN çevre değişkeninin ayarlı olduğundan emin olun -- GitHub Modeller erişim izinlerini kontrol edin +**Python sohbet projesinde sorunlar**: +- OpenAI paketi kurulu olmalı: `pip install openai` +- GITHUB_TOKEN çevre değişkeni ayarlı olmalı +- GitHub Models erişim izinleri kontrol edilmeli -**Docsify dökümantasyonu servis etmiyor**: -- docsify-cli global olarak yüklü mü: `npm install -g docsify-cli` +**Docsify dokümanları sunmuyor**: +- docsify-cli global kurulu değilse: `npm install -g docsify-cli` - Depo kök dizininden çalıştırın -- `docs/_sidebar.md` dosyasının varlığını kontrol edin +- `docs/_sidebar.md` var mı kontrol edin ### Geliştirme Ortamı İpuçları - HTML projeleri için VS Code Live Server uzantısını kullanın -- Tutarlı biçimlendirme için ESLint ve Prettier uzantılarını kurun -- JavaScript hata ayıklamak için tarayıcı geliştirici araçlarını kullanın +- Tutarlı formatlama için ESLint ve Prettier uzantıları yükleyin +- JavaScript hata ayıklaması için tarayıcı geliştirici araçlarını kullanın - Vue projeleri için Vue DevTools tarayıcı uzantısını kurun ### Performans Dikkatleri -- Çok sayıda çevrilmiş dosya (50+ dil) tam klonlama boyutunu artırır -- Sadece içerikle çalışıyorsanız sığ klon kullanın: `git clone --depth 1` +- 50+ dilde çok sayıda çeviri dosyası olması, tam klonlamayı büyük yapar +- İçerikle çalışıyorsanız sığ klon kullanın: `git clone --depth 1` - İngilizce içerikle çalışırken çevirileri aramalardan hariç tutun -- Derleme süreçleri ilk seferde yavaş olabilir (npm install, Vite build) +- İlk çalıştırmada kurulum ve derleme süreçleri (npm install, Vite build) yavaş olabilir ## Güvenlik Dikkatleri ### Ortam Değişkenleri -- API anahtarları asla depoya gönderilmemelidir -- `.env` dosyaları kullanılır (zaten `.gitignore` içinde) -- Gerekli ortam değişkenleri proje README’lerinde belgelenmelidir +- API anahtarları asla depoya eklenmemeli +- `.env` dosyaları kullanılmalı (zaten `.gitignore` içinde) +- Gerekli ortam değişkenleri proje README’lerinde belgelenmeli ### Python Projeleri -- Sanal ortamlar kullanın: `python -m venv venv` -- Bağımlılıkları güncel tutun -- GitHub tokenleri minimum yetkiyle ayarlayın +- Sanal ortamlar kullanılmalı: `python -m venv venv` +- Bağımlılıklar güncel tutulmalı +- GitHub tokenları minimum gerekli izinlere sahip olmalı -### GitHub Modeller Erişimi +### GitHub Models Erişimi -- GitHub Modeller için Kişisel Erişim Tokenleri (PAT) gerekir -- Tokenlar çevre değişkeni olarak saklanmalıdır -- Token veya kimlik bilgileri asla versiyon kontrolüne gönderilmemelidir +- GitHub Models için Kişisel Erişim Tokenları (PAT) gerekir +- Tokenlar ortam değişkeni olarak saklanmalı +- Tokenlar veya kimlik bilgileri asla depoya commit edilmemeli ## Ek Notlar @@ -358,51 +358,51 @@ CO_OP_TRANSLATOR_METADATA: - Web geliştirmeye tamamen yeni başlayanlar - Öğrenciler ve kendi kendine öğrenenler -- Müfredatı sınıf ortamında kullanan öğretmenler -- İçerik erişilebilirlik ve aşamalı beceri geliştirmeye uygun şekilde tasarlanmıştır +- Müfredatı sınıflarda kullanan öğretmenler +- İçerik erişilebilirlik ve aşamalı beceri oluşturma için tasarlanmıştır ### Eğitim Felsefesi -- Proje tabanlı öğrenme yöntemi -- Sık aralıklarla bilgi ölçümleri (quizler) -- Uygulamalı kodlama egzersizleri -- Gerçek dünya uygulaması örnekleri -- Çerçeveler öncesi temel bilgiler üzerine odaklanma +- Proje bazlı öğrenme yaklaşımı +- Sık aralıklarla bilgi kontrolü (quizler) +- Uygulamalı kodlama alıştırmaları +- Gerçek dünya uygulama örnekleri +- Frameworklerden önce temellere odaklanma ### Depo Bakımı -- Aktif öğrenenler ve katkıcılar topluluğu +- Aktif öğrenenler ve katkı sağlayanlardan oluşan topluluk - Bağımlılık ve içerik düzenli güncellenir -- Sorunlar ve tartışmalar bakımcılar tarafından izlenir -- Çeviri güncellemeleri GitHub Actions aracılığıyla otomatik +- Bakımcılar tarafından sorunlar ve tartışmalar izlenir +- Çeviri güncellemeleri GitHub Actions ile otomatik yapılır ### İlgili Kaynaklar - [Microsoft Learn modülleri](https://docs.microsoft.com/learn/) -- [Öğrenci Merkezi kaynakları](https://docs.microsoft.com/learn/student-hub/) +- [Student Hub kaynakları](https://docs.microsoft.com/learn/student-hub/) - Öğrenenler için önerilen [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) -- Ek kurslar: Üretken AI, Veri Bilimi, ML, Nesnelerin İnterneti müfredatları +- Ek kurslar: Üretken AI, Veri Bilimi, ML, IoT müfredatları mevcut ### Belirli Projelerle Çalışma -Bireysel projeler hakkında detaylı talimatlar için README dosyalarına bakın: +Bireysel projelerle ilgili ayrıntılı talimatlar için README dosyalarına bakınız: - `quiz-app/README.md` - Vue 3 quiz uygulaması - `7-bank-project/README.md` - Kimlik doğrulamalı bankacılık uygulaması - `5-browser-extension/README.md` - Tarayıcı uzantısı geliştirme - `6-space-game/README.md` - Canvas tabanlı oyun geliştirme -- `9-chat-project/README.md` - AI sohbet asistanı projesi +- `9-chat-project/README.md` - Yapay zeka sohbet asistanı projesi ### Monorepo Yapısı -Geleneksel bir monorepo olmasa da, bu depo birçok bağımsız proje içerir: -- Her ders kendi başına bağımsızdır +Klasik bir monorepo olmasa da bu depo birçok bağımsız projeyi içerir: +- Her ders kendi içinde bağımsızdır - Projeler bağımlılık paylaşmaz -- Bir projede çalışmak diğerlerini etkilemez -- Tüm müfredatı deneyimlemek için tüm depo klonlanabilir +- Bireysel projeler üzerinde diğerlerini etkilemeden çalışabilirsiniz +- Tam müfredatı deneyimlemek için tüm depo klonlanabilir --- **Feragatname**: -Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba gösterilse de, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayınız. Orijinal belge, kendi ana dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi tavsiye edilir. Bu çevirinin kullanımı sonucu oluşabilecek herhangi bir yanlış anlama veya yorumlama nedeniyle sorumluluk kabul edilmemektedir. +Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba sarf etsek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayınız. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanılması sonucu oluşabilecek yanlış anlaşılmalardan veya yorum hatalarından sorumlu tutulamayız. \ No newline at end of file diff --git a/translations/tr/README.md b/translations/tr/README.md index 71de3f6e6..8a887798f 100644 --- a/translations/tr/README.md +++ b/translations/tr/README.md @@ -1,199 +1,220 @@ -# Yeni Başlayanlar İçin Web Geliştirme - Bir Müfredat +[![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) -Microsoft Bulut Savunucuları tarafından hazırlanan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri, teraryumlar, tarayıcı uzantıları ve uzay oyunları gibi uygulamalı projelerle JavaScript, CSS ve HTML'e derinlemesine dalar. Sınavlar, tartışmalar ve pratik ödevlerle etkileşimde bulunun. Yeteneklerinizi geliştirin ve bilgilerinizi optimize edin; etkili proje tabanlı pedagojimizle öğreniminizi güçlendirin. Kodlama yolculuğunuza bugün başlayın! +[![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/) -Azure AI Foundry Discord Topluluğu'na Katılın +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) ---- +# Yeni Başlayanlar için Web Geliştirme - Bir Müfredat -Bu kaynakları kullanmaya başlamak için şu adımları izleyin: -1. **Depoyu Forklayın**: Tıklayın [![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. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Azure AI Foundry Discord’a katılın ve uzmanlar ile diğer geliştiricilerle tanışın**](https://discord.com/invite/ByRwuEEgH4) +Microsoft Bulut Savunucuları tarafından hazırlanan 12 haftalık kapsamlı kursumuzla web geliştirmeye dair temel bilgileri öğrenin. 24 dersin her biri terraryumlar, tarayıcı eklentileri ve uzay oyunları gibi pratik projelerle JavaScript, CSS ve HTML'i derinlemesine ele alır. Quizler, tartışmalar ve pratik ödevlerle etkileşim kurun. Becerilerinizi geliştirin ve etkili proje tabanlı pedagojimizle bilgi tutumunuzu optimize edin. Kodlama yolculuğunuza bugün başlayın! + +Azure AI Foundry Discord Topluluğuna Katılın + +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + +Bu kaynakları kullanmaya başlamak için şu adımları izleyin: +1. **Depoyu Çatallayın**: Tıklayın [![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. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Azure AI Foundry Discord'a Katılın ve uzmanlar ve diğer geliştiricilerle tanışın**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Çok Dilli Destek -#### GitHub Action ile desteklenmektedir (Otomatik & Her zaman güncel) +#### GitHub Action ile Desteklenir (Otomatik & Her Zaman Güncel) -[Arapça](../ar/README.md) | [Bengalce](../bn/README.md) | [Bulgarca](../bg/README.md) | [Burma Dili (Myanmar)](../my/README.md) | [Çince (Basitleştirilmiş)](../zh-CN/README.md) | [Çince (Geleneksel, Hong Kong)](../zh-HK/README.md) | [Çince (Geleneksel, Makao)](../zh-MO/README.md) | [Çince (Geleneksel, Tayvan)](../zh-TW/README.md) | [Hırvatça](../hr/README.md) | [Çekçe](../cs/README.md) | [Danca](../da/README.md) | [Felemenkçe](../nl/README.md) | [Estonca](../et/README.md) | [Fince](../fi/README.md) | [Fransızca](../fr/README.md) | [Almanca](../de/README.md) | [Yunanca](../el/README.md) | [İbranice](../he/README.md) | [Hintçe](../hi/README.md) | [Macarca](../hu/README.md) | [Endonezce](../id/README.md) | [İtalyanca](../it/README.md) | [Japonca](../ja/README.md) | [Kannada Dili](../kn/README.md) | [Korece](../ko/README.md) | [Litvanca](../lt/README.md) | [Malayca](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalce](../ne/README.md) | [Nijerya Pidgin](../pcm/README.md) | [Norveççe](../no/README.md) | [Farsça (Persçe)](../fa/README.md) | [Lehçe](../pl/README.md) | [Portekizce (Brezilya)](../pt-BR/README.md) | [Portekizce (Portekiz)](../pt-PT/README.md) | [Pencapça (Gurmukhi)](../pa/README.md) | [Rumence](../ro/README.md) | [Rusça](../ru/README.md) | [Sırpça (Kiril)](../sr/README.md) | [Slovakça](../sk/README.md) | [Slovence](../sl/README.md) | [İspanyolca](../es/README.md) | [Svahili](../sw/README.md) | [İsveççe](../sv/README.md) | [Tagalog (Filipince)](../tl/README.md) | [Tamilce](../ta/README.md) | [Telugu Dili](../te/README.md) | [Tayca](../th/README.md) | [Türkçe](./README.md) | [Ukraynaca](../uk/README.md) | [Urduca](../ur/README.md) | [Vietnamca](../vi/README.md) - -> **Yerel olarak Klonlamayı mı Tercih Edersiniz?** +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](./README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> Bu depo 50+ dil çevirisi içerir ve bu da indirilen dosyanın boyutunu önemli ölçüde artırır. Çeviriler olmadan klonlamak için seyrek kontrol kullanabilirsiniz: +> **Yerel Olarak Klonlamayı Tercih Ediyor musunuz?** +> +> Bu depo, indirilen dosya boyutunu önemli ölçüde artıran 50+ dil çevirisi içerir. Çeviri olmadan klonlamak için, sparse checkout kullanabilirsiniz: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Bu size kursu tamamlamak için gereken her şeyi çok daha hızlı indirebilme imkânı sağlar. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Bu, kursu tamamlamak için ihtiyacınız olan her şeyi çok daha hızlı indirmenizi sağlar. -**Ek dil desteği istiyorsanız, desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir** +**Desteklenmesini istediğiniz ek çeviri dilleri varsa, [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir** -[![Visual Studio Code’da Aç](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Öğrenci misiniz?_ -Başlangıç kaynakları, öğrenci paketleri ve ücretsiz sertifika kuponu alma yöntemleri bulabileceğiniz [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. İçeriğin aylık olarak değiştiği bu sayfayı sık sık yer imlerinize ekleyip kontrol etmek isteyeceksiniz. +Başlangıç kaynaklarını, Öğrenci paketlerini ve hatta ücretsiz sertifika kuponu almanın yollarını bulabileceğiniz [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. İçerikleri aylık olarak değiştirdiğimiz için bu sayfayı yer imlerinize eklemenizi ve zaman zaman kontrol etmenizi öneririz. -### 📣 Duyuru – Tamamlanacak Yeni GitHub Copilot Agent modu zorlukları! +### 📣 Duyuru - Tamamlanması gereken yeni GitHub Copilot Agent modu zorlukları! -Yeni zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlamanız için yeni bir zorluk. Daha önce Agent modunu kullanmadıysanız, sadece metin üretmekle kalmayıp dosya oluşturabilir, düzenleyebilir, komut çalıştırabilir ve daha fazlasını yapabilir. +Yeni bir zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlayabileceğiniz yeni bir zorluk. Agent modunu daha önce kullanmadıysanız, sadece metin üretmekle kalmaz, aynı zamanda dosyalar oluşturabilir ve düzenleyebilir, komut çalıştırabilir ve daha fazlasını yapabilir. -### 📣 Duyuru – _Generative AI kullanarak oluşturulacak Yeni Proje_ +### 📣 Duyuru - _Generative AI kullanarak yeni Proje_ Yeni AI Asistan projesi eklendi, inceleyin [proje](./9-chat-project/README.md) -### 📣 Duyuru – _Generative AI için Yeni Müfredat_ JavaScript’e geldi +### 📣 Duyuru - _Generative AI için JavaScript Müfredatı yeni yayında_ Yeni Generative AI müfredatımızı kaçırmayın! -Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) +Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! + +![Background](../../translated_images/tr/background.148a8d43afde5730.webp) -![Arka plan](../../translated_images/tr/background.148a8d43afde5730.webp) +- Temelden RAG’e kadar kapsamlı dersler. +- Tarihi karakterlerle GenAI ve eşlik eden uygulamamız aracılığıyla etkileşim. +- Eğlenceli ve sürükleyici anlatım, zamanda yolculuk yapacaksınız! -- Temellerden RAG’a kadar her şeyi kapsayan dersler -- GenAI ve eşlik eden uygulamamızla tarihi karakterlerle etkileşim -- Eğlenceli ve etkileşimli anlatı, zamanda yolculuk yapacaksınız! +![character](../../translated_images/tr/character.5c0dd8e067ffd693.webp) -![karakter](../../translated_images/tr/character.5c0dd8e067ffd693.webp) -Her ders; tamamlanacak bir ödev, bir bilgi kontrolü ve şu gibi konularda öğrenmenize rehberlik eden bir zorluk içerir: -- Yönlendirme ve prompt mühendisliği -- Metin ve resim uygulaması oluşturma +Her ders, tamamlama için bir ödev, bir bilgi kontrolü ve şu gibi konuları öğrenmenizde rehber olacak bir zorluk içerir: +- İstek ve istek mühendisliği +- Metin ve görüntü uygulama üretimi - Arama uygulamaları Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ---- + ## 🌱 Başlarken -> **Öğretmenler**, bu müfredatı nasıl kullanacağınız hakkında [bazı öneriler](for-teachers.md) ekledik. Geri bildiriminizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) bekliyoruz! +> **Öğretmenler**, bu müfredatı nasıl kullanacağınıza dair bazı [önerilerimizi](for-teachers.md) dahil ettik. Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) bekleriz! -**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için ders öncesi quiz ile başlayın, ardından ders materyalini okuyun, çeşitli aktiviteleri tamamlayın ve ders sonrası quiz ile anlama seviyenizi kontrol edin. +**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir ön ders quiz'i ile başlayın, ardından ders materyalini okuyun, çeşitli etkinlikleri tamamlayın ve anlayışınızı ders sonrası quiz ile kontrol edin. -Öğrenme deneyiminizi güçlendirmek için projeler üzerinde arkadaşlarınızla birlikte çalışın! Tartışmalar, [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir; moderatör ekibimiz sorularınıza cevap vermek için hazır olacaktır. +Öğrenme deneyiminizi geliştirmek için, projeler üzerinde beraber çalışmak üzere akranlarınızla bağlantı kurun! Tartışmalarımız [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir; moderatör ekibimiz sorularınızı yanıtlamak için hazırdır. -Eğitiminizi ilerletmek için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)’i ek çalışma materyalleri için keşfetmenizi şiddetle tavsiye ederiz. +Eğitiminizi ilerletmek için ek çalışma materyalleri bulabileceğiniz [Microsoft Learn’i](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) keşfetmenizi şiddetle öneririz. -### 📋 Ortamınızı Kurma +### 📋 Ortamınızı kurma -Bu müfredat hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı bir [Codespace](https://github.com/features/codespaces/) içinde (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) veya bilgisayarınızda bir metin editörü (örneğin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)) kullanarak çalıştırmayı seçebilirsiniz. +Bu müfredat için hazır bir geliştirme ortamı mevcut! Başlarken, müfredatı bir [Codespace](https://github.com/features/codespaces/) (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) içinde veya bilgisayarınızda bir metin düzenleyici kullanarak yerel olarak çalıştırmayı seçebilirsiniz, örneğin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Depo Oluşturma -Çalışmalarınızı kolayca kaydedebilmeniz için, bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu sayfa üstündeki **Use this template** butonuna tıklayarak yapabilirsiniz. Bu, müfredatın bir kopyasıyla GitHub hesabınızda yeni bir depo oluşturacaktır. +#### Depoyu oluşturun +Çalışmanızı kolayca kaydedebilmeniz için, bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu yapmak için sayfanın üstündeki **Use this template** düğmesine tıklayın. Bu, GitHub hesabınızda müfredatın bir kopyası ile yeni bir depo oluşturacaktır. -Adımlar: -1. **Depoyu Forklayın**: Bu sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın. -2. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Şu adımları izleyin: +1. **Depoyu Çatallayın**: Bu sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın. +2. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Müfredatı Codespace içinde çalıştırma -Oluşturduğunuz depo kopyasında, **Code** butonuna tıklayın ve **Open with Codespaces** seçeneğini seçin. Bu size çalışmanız için yeni bir Codespace oluşturacaktır. +Oluşturduğunuz bu deponun kopyasında, **Code** butonuna tıklayıp **Open with Codespaces** seçeneğini seçin. Bu, sizin için yeni bir Codespace oluşturacaktır. ![Codespace](../../translated_images/tr/createcodespace.0238bbf4d7a8d955.webp) -#### Müfredatı bilgisayarınızda yerel çalıştırma - -Bu müfredatı bilgisayarınızda çalıştırmak için bir metin editörü, bir tarayıcı ve bir komut satırı aracı gerekir. İlk dersimiz [Programlama Dillerine ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), bu araçlardan her biri için çeşitli seçenekleri sizin için gösterir, böylece size en uygun olanı seçebilirsiniz. +#### Müfredatı bilgisayarınızda yerel olarak çalıştırma -Önerimiz, editör olarak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır; VS Code’da yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) da vardır. Visual Studio Code’u buradan indirebilirsiniz: [burada](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin düzenleyici, bir tarayıcı ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dilleri ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), her biri için çeşitli seçenekleri size tanıtacak, böylece size en uygun olanı seçebilirsiniz. -1. Depo kopyanızı bilgisayarınıza klonlayın. Bunu yapmak için **Code** butonuna tıklayın ve URL'yi kopyalayın: +Bizim önerimiz [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) editörünü kullanmanızdır; bu editörde yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) da mevcuttur. Visual Studio Code’u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz. +1. Depozitonuzu bilgisayarınıza klonlayın. Bunu **Code** butonuna tıklayıp URL'yi kopyalayarak yapabilirsiniz: [CodeSpace](./images/createcodespace.png) -Sonra, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) açın ve az önce kopyaladığınız URL ile `` yerini değiştirerek aşağıdaki komutu çalıştırın: + + Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) uygulamasını açın ve aşağıdaki komutu, `` yerine az önce kopyaladığınız URL'yi yazarak çalıştırın: ```bash git clone ``` - -2. Visual Studio Code'da klasörü açın. Bunu **File** > **Open Folder** seçeneğine tıklayarak ve az önce klonladığınız klasörü seçerek yapabilirsiniz. - + +2. Klasörü Visual Studio Code'da açın. Bunu **File** > **Open Folder** seçeneğine tıklayarak ve az önce klonladığınız klasörü seçerek yapabilirsiniz. > Önerilen Visual Studio Code uzantıları: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code içinde HTML sayfalarını önizlemek için -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kod yazmanızı hızlandırmaya yardımcı olmak için +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kod yazmayı hızlandırmak için ## 📂 Her ders şunları içerir: -- isteğe bağlı sketchnote +- isteğe bağlı sketchnote (not çizimi) - isteğe bağlı ek video -- ders öncesi ısınma sınavı +- dersten önce ısınma testi - yazılı ders -- proje tabanlı derslerde, projeyi oluşturmak için adım adım rehberler +- proje tabanlı dersler için, projeyi nasıl oluşturacağınıza dair adım adım rehberler - bilgi kontrolü - bir meydan okuma - ek okuma materyali - görev -- [ders sonrası quiz](https://ff-quizzes.netlify.app/web/) +- [dersten sonra quiz](https://ff-quizzes.netlify.app/web/) -> **Quizler hakkında not**: Tüm quizler Quiz-app klasöründe bulunur, toplam 48 quiz ve her biri üç sorudan oluşur. Bunlar [burada](https://ff-quizzes.netlify.app/web/) mevcuttur. Quiz uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir; `quiz-app` klasöründeki talimatları izleyin. +> **Quizler hakkında not**: Tüm quizler Quiz-app klasöründe bulunur, toplamda 48 quiz ve her biri 3 sorudan oluşmaktadır. Bunlara [buradan](https://ff-quizzes.netlify.app/web/) erişilebilir; quiz uygulaması yerel olarak çalıştırılabilir veya Azure’a dağıtılabilir; `quiz-app` klasöründeki talimatları takip edin. ## 🗃️ Dersler -| | Proje Adı | Öğretilen Konseptler | Öğrenme Hedefleri | Bağlantılı Ders | Yazar | -| :-: | :--------------------------------------------------: | :----------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------: | :--------------------: | -| 01 | Başlarken | Programlamaya Giriş ve Mesleki Araçlar | Çoğu programlama dilinin temel prensiplerini öğrenmek ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımlar hakkında bilgi sahibi olmak | [Programlama Dillerine ve Mesleki Araçlara Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Başlarken | GitHub Temelleri, ekip ile çalışma dahil | Projenizde GitHub kullanmayı öğrenmek, bir kod tabanı üzerinde başkalarıyla işbirliği yapmayı öğrenmek | [GitHub'a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenmek | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Temelleri | JavaScript Veri Tipleri | JavaScript veri tiplerinin temelleri | [Veri Tipleri](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Temelleri | Fonksiyonlar ve Metotlar | Uygulamanın mantık akışını yönetmek için fonksiyonlar ve metotlar hakkında bilgi edinmek | [Fonksiyonlar ve Metotlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher | -| 06 | JS Temelleri | JavaScript ile Karar Verme | Kodunuzda koşullar oluşturmayı öğrenmek | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript'te diziler ve döngüler kullanarak veri ile çalışma | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | Pratikte HTML | Çevrimiçi bir terraryum oluşturmak için HTML inşa edin, yerleşim oluşturmaya odaklanın | [HTML'e Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | Pratikte CSS | Çevrimiçi terraryumu stillendirmek için CSS oluşturun, sayfanın duyarlı yapılması dahil CSS temellerine odaklanın | [CSS'e Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışları, DOM manipülasyonu | Terraryumun sürükle/bırak arayüzü olarak çalışmasını sağlamak için JavaScript yazın, kapanışlar ve DOM manipülasyonuna odaklanın | [JavaScript Kapanışları, DOM manipülasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Yazma Oyunu](./4-typing-game/solution/README.md) | Yazma Oyunu İnşası | JavaScript uygulamanızın mantığını yönlendirmek için klavye olaylarını nasıl kullanacağınızı öğrenin | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Yeşil Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışmak | Tarayıcıların nasıl çalıştığını, tarihçesini ve bir tarayıcı uzantısının ilk öğelerini nasıl oluşturacağınızı öğrenin | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Yeşil Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Form oluşturma, API çağırma ve yerel depolamada değişken kullanımı | Yerel depolamada saklanan değişkenleri kullanarak bir API çağırmak için tarayıcı uzantınızın JavaScript öğelerini oluşturun | [API'ler, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Yeşil Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Tarayıcıdaki arka plan süreçleri, web performansı | Uzantının simgesini yönetmek için tarayıcı arka plan işlemlerini kullanın; web performansı ve bazı optimizasyonlar hakkında bilgi edinin | [Arka Plan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha Gelişmiş Oyun Geliştirme | Kalıtım kavramını Sınıflar ve Kompozisyon ile Pub/Sub deseni kullanarak öğrenin, oyun geliştirmeye hazırlık yapın | [Gelişmiş Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvas'a Çizim | Ekrana öğeler çizmek için kullanılan Canvas API hakkında bilgi edin | [Canvas'a Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Elemanları Ekranda Hareket Ettirme | Elemanlara Kartezyen koordinatlar ve Canvas API kullanarak hareket kazandırmayı keşfedin | [Elemanları Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Uzay Oyunu](./6-space-game/solution/README.md) | Çarpışma Algılama | Elemanların birbirine çarpmasını ve tepki vermesini sağlayın, performans için bir soğuma işlevi sağlayın | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Skor Tutma | Oyunun durumu ve performansına göre matematiksel hesaplamalar yapın | [Skor Tutma](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Uzay Oyunu](./6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden Başlatma | Oyunu bitirme ve yeniden başlatma, varlıkları temizleme ve değişken değerlerini sıfırlama hakkında bilgi edinin | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Web Uygulamasında HTML Şablonları ve Yönlendirme | Çok sayfalı web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak nasıl oluşturacağınızı öğrenin | [HTML Şablonları ve Yönlendirme](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Form oluşturma ve doğrulama işlemlerini öğrenin | [Formlar](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Uygulamanıza veri akışı, veriyi alma, depolama ve atma yöntemleri | [Veri](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl koruduğunu ve bunu programatik olarak nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Tarayıcı/VScode Kodu](../../8-code-editor) | VScode ile Çalışma | Bir kod editörü kullanmayı öğrenin | [VScode Kod Editörü Kullanımı](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Asistanlar](./9-chat-project/README.md) | Yapay Zeka ile Çalışma | Kendi AI asistanınızı nasıl oluşturacağınızı öğrenin | [AI Asistan projesi](./9-chat-project/README.md) | Chris | +| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | İlgili Ders | Yazar | +| :-: | :----------------------------------------------------: | :--------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------: | :---------------: | +| 01 | Başlarken | Programlama ve Araçlarına Giriş | Çoğu programlama dilinin temel prensipleri ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılım hakkında bilgi edinin | [Programlama Dilleri ve Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Başlarken | GitHub Temelleri, takım çalışması | Projenizde GitHub’ı nasıl kullanacağınızı, kod tabanında başkalarıyla nasıl iş birliği yapacağınızı öğrenin | [GitHub’a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenin | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Temelleri | JavaScript Veri Türleri | JavaScript veri türlerinin temellerini öğrenin | [Veri Türleri](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Temelleri | Fonksiyonlar ve Metotlar | Uygulamanın mantık akışını yönetmek için fonksiyonlar ve metotlar hakkında bilgi edinin | [Fonksiyonlar ve Metotlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher | +| 06 | JS Temelleri | JS ile Karar Verme | Kodunuzda karar yöntemlerini kullanarak koşullar nasıl oluşturulur öğrenin | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript’te diziler ve döngülerle veri işleme | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulamada | Çevrimiçi bir terrarium oluşturmak için HTML yazın, düzen yaratmaya odaklanın | [HTML’e Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulamada | Çevrimiçi terrariumun stilini oluşturmak için CSS yazın, temel CSS ve sayfanın duyarlı hale getirilmesine odaklanın | [CSS’e Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM Manipülasyonu | Sürükle/bırak arayüzü işlevleri için JavaScript yazın, closures ve DOM manipulasyonuna odaklanın | [JavaScript Closures ve DOM Manipülasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Yazma Oyunu](./4-typing-game/solution/README.md) | Yazma Oyunu Oluşturma | JavaScript uygulamanızı klavye olaylarıyla nasıl yönlendireceğinizi öğrenin | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Yeşil Tarayıcı Eklentisi](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışma | Tarayıcıların nasıl çalıştığını, tarihini ve tarayıcı eklentisinin ilk öğelerini nasıl oluşturacağınızı öğrenin | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Yeşil Tarayıcı Eklentisi](./5-browser-extension/solution/README.md) | Form Oluşturma, API Çağrısı ve Yerel Depolamada Değişken | Tarayıcı eklentinizde yerel depolamada tutulan değişkenleri kullanan bir API çağrısı için JavaScript öğelerini oluşturun | [API’lar, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Yeşil Tarayıcı Eklentisi](./5-browser-extension/solution/README.md) | Tarayıcı arkaplan işlemleri, web performansı | Eklentinin simgesini yönetmek için tarayıcı arkaplan işlemlerini kullanın; web performansı ve bazı optimizasyonlar hakkında bilgi edinin | [Arkaplan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha Gelişmiş Oyun Geliştirme | Sınıflar ve Kompozisyon kullanarak Miras (Inheritance) ve Yayınla/Abone Ol (Pub/Sub) kalıplarını öğrenin, bir oyun geliştirmek için hazırlanın | [Gelişmiş Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvas’a Çizim | Ekrana öğe çizmek için kullanılan Canvas API'si hakkında bilgi edinin | [Canvasa Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekrandaki Öğeleri Hareket Ettirme | Öğelerin hareket kazanmasını kartezyen koordinatlar ve Canvas API kullanarak keşfedin | [Öğeleri Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Uzay Oyunu](./6-space-game/solution/README.md) | Çarpışma Algılama | Öğeleri çarpıştırın ve birbirlerine tuş vuruşlarıyla tepki vermelerini sağlayın; oyunun performansını korumak için cooldown fonksiyonu ekleyin | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Skoru Tutma | Oyun durumu ve performansına bağlı matematiksel hesaplamalar yapın | [Skoru Tutma](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Uzay Oyunu](./6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden Başlatma | Oyunu bitirme ve yeniden başlatma hakkında bilgi edinin, kaynak temizleme ve değişkenleri sıfırlama dahil | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Web Uygulamasında HTML Şablonları ve Yönlendirmeler | Çok sayfalı bir web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak nasıl oluşturacağınızı öğrenin | [HTML Şablonları ve Yönlendirmeler](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Formlar oluşturma ve doğrulama süreçlerini öğrenin | [Formlar](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Uygulamanızda verinin nasıl aktığını, nasıl alındığını, depolandığını ve imha edildiğini öğrenin | [Veri](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl koruduğunu ve programatik olarak bunu nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Tarayıcı/VScode Kodu](../../8-code-editor) | VScode ile Çalışma | Bir kod editörü kullanmayı öğrenin | [VScode Kod Editörü Kullanımı](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Asistanları](./9-chat-project/README.md) | AI ile Çalışma | Kendi AI asistanınızı nasıl oluşturabileceğinizi öğrenin | [AI Asistan Projesi](./9-chat-project/README.md) | Chris | ## 🏫 Pedagoji -Müfredatımız, iki temel eğitim ilkesi göz önünde bulundurularak tasarlanmıştır: -* proje tabanlı öğrenme -* sık quizler +Müfredatımız iki temel pedagojik ilke göz önünde bulundurularak tasarlanmıştır: +* proje tabanlı öğrenme +* sık quiz uygulamaları -Program, JavaScript, HTML ve CSS temellerini ve günümüz web geliştiricilerinin kullandığı en son araçlar ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terraryum, çevre dostu tarayıcı uzantısı, uzay istilacı tarzı oyun ve işletmeler için bir bankacılık uygulaması inşa ederek uygulamalı deneyim kazanma fırsatı bulacaklar. Serinin sonunda öğrenciler, web geliştirme konusunda sağlam bir anlayışa sahip olacaklar. +Program JavaScript, HTML ve CSS temel bilgilerini ve günümüz web geliştiricileri tarafından kullanılan en son araçlar ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terrarium, çevre dostu tarayıcı uzantısı, space-invader tarzı oyun ve işletmeler için bankacılık uygulaması yaparak pratik deneyim kazanma fırsatı bulacaklar. Serinin sonunda öğrenciler web geliştirme konusunda sağlam bir anlayışa sahip olacaklar. -> 🎓 Bu müfredattaki ilk birkaç dersi Microsoft Learn üzerinde bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz! +> 🎓 Bu müfredatın ilk birkaç dersini Microsoft Learn üzerinden bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz! -İçeriğin projelerle uyumlu olduğundan emin olarak, süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca, kavramları tanıtmak için birkaç başlangıç dersi JavaScript temellerinde yazılmıştır ve bu dersler, bazı yazarları bu müfredata katkıda bulunan “[JavaScript Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” video koleksiyonundan bir video ile eşleştirilmiştir. +İçeriğin projelerle uyumlu olmasını sağlayarak süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca, JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık ve “[JavaScript’e Başlayanlar Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” video koleksiyonundan bazı videolarla eşleştirdik, bazı yazarlar bu müfredata katkıda bulundu. -Ek olarak, sınıf öncesinde düşük riskli bir quiz öğrencinin konuya yönelik niyetini belirlerken, sınıf sonrası ikinci bir quiz daha fazla kalıcılık sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmış olup tamamı veya parça parça alınabilir. Projeler küçük başlayıp 12 haftalık döngünün sonunda giderek karmaşıklaşır. +Ayrıca, sınıftan önce yapılan düşük riskli bir quiz öğrencinin konu öğrenme niyetini belirlerken, sınıftan sonra yapılan ikinci quiz kalıcılığı sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamen veya kısmen alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek daha karmaşık hale gelir. -JavaScript çerçevelerini kasıtlı olarak tanıtmaktan kaçındık çünkü bir çerçeve benimsemeden önce bir web geliştiricisi olarak gereken temel becerilere odaklanmak istedik; bu müfredatı tamamlamak için iyi bir sonraki adım başka bir video koleksiyonu olan “[Node.js Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)” üzerinden Node.js öğrenmek olacaktır. - -> [Davranış Kurallarımız](CODE_OF_CONDUCT.md) ve [Katkıda Bulunma](CONTRIBUTING.md) yönergelerimizi ziyaret edin. Yapıcı geri bildirimlerinizi bekliyoruz! +Amacımız, temel becerilere odaklanmak için JavaScript çerçevelerinden kaçınmak olsa da, bu müfredatı tamamlamak için bir sonraki iyi adım, başka bir video koleksiyonu aracılığıyla Node.js öğrenmek olacaktır: “[Node.js’e Başlayanlar Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”. +> [Davranış Kurallarımız](CODE_OF_CONDUCT.md) ve [Katkıda Bulunma](CONTRIBUTING.md) yönergelerimizi inceleyin. Yapıcı geri bildiriminizi bekliyoruz! ## 🧭 Çevrimdışı erişim -Bu dokümantasyonu çevrimdışı olarak [Docsify](https://docsify.js.org/#/) kullanarak çalıştırabilirsiniz. Bu depoyu çatallayın, yerel makinenize [Docsify yükleyin](https://docsify.js.org/#/quickstart) ve sonra bu deponun kök klasöründe `docsify serve` yazın. Site localhost'ta, port 3000 üzerinde sunulacaktır: `localhost:3000`. +Bu dökümantasyonu çevrimdışı çalıştırmak için [Docsify](https://docsify.js.org/#/) kullanabilirsiniz. Bu repoyu fork edin, yerel bilgisayarınıza [Docsify kurulumunu](https://docsify.js.org/#/quickstart) yapın ve ardından bu repoda kök klasörde `docsify serve` komutunu çalıştırın. Web sitesi localhost’ta 3000 portunda çalışacaktır: `localhost:3000`. ## 📘 PDF - -Tüm derslerin PDF'sini [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) bulabilirsiniz. +Tüm derslerin PDF'sine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşabilirsiniz. ## 🎒 Diğer Kurslar -Ekibimiz diğer kurslar da üretiyor! Göz atın: + +Ekibimiz başka kurslar da üretiyor! İnceleyin: ### LangChain @@ -210,7 +231,7 @@ Ekibimiz diğer kurslar da üretiyor! Göz atın: --- -### Generative AI Series +### Üretken AI Serisi [![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) @@ -218,40 +239,40 @@ Ekibimiz diğer kurslar da üretiyor! Göz atın: --- -### Core Learning +### Temel Öğrenme [![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) +[![Siber Güvenlik için Başlangıç](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) +[![Yeni Başlayanlar için Web Geliştirme](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) +[![Başlangıç için IoT](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) +[![Yeni Başlayanlar için XR Geliştirme](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 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) +### Copilot Serisi +[![Copilot AI ile Eşli Programlama İçin](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 C#/.NET İçin](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 Macerası](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) -## Yardım Almak +## Yardım Alma -Yapay zeka uygulamaları geliştirme konusunda takılırsanız ya da herhangi bir sorunuz olursa, MCP hakkında tartışmalara katılmak için diğer öğrenciler ve deneyimli geliştiricilerle buluşun. Soruların hoş karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur. +Tıkanırsanız veya AI uygulamaları geliştirme konusunda herhangi bir sorunuz olursa MCP hakkında diğer öğrenenlerle ve deneyimli geliştiricilerle tartışmalara katılın. Soruların hoş karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Ürün geri bildirimi veya geliştirme sırasında hata bildirimi için ziyaret edin: +Ürün geri bildirimi veya geliştirme sırasında oluşan hatalar için ziyaret edin: [![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) ## Lisans -Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız. +Bu depo MIT lisansı ile lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız. --- -**Feragatname**: -Bu belge, AI çeviri servisi [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayınız. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan herhangi bir yanlış anlama veya yanlış yorumlama nedeniyle sorumluluk kabul edilmemektedir. +**Feragatname**: +Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayın. Orijinal belge, kendi ana dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi tavsiye edilir. Bu çevirinin kullanılması sonucu ortaya çıkabilecek yanlış anlamalar veya yorum hatalarından sorumlu değiliz. \ No newline at end of file