Web-Dev-For-Beginners/translations/pl

Tworzenie stron internetowych dla początkujących – program nauczania

Naucz się podstaw tworzenia stron internetowych dzięki naszemu 12-tygodniowemu, kompleksowemu kursowi prowadzonemu przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia 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 praktyczne zadania. Rozwijaj swoje umiejętności i optymalizuj retencję wiedzy dzięki naszej skutecznej, opartej na projektach metodzie nauczania. Zacznij swoją przygodę z kodowaniem już dziś!

Dołącz do społeczności Azure AI Foundry na Discordzie

Wykonaj następujące kroki, aby zacząć korzystać z tych zasobów:

1. Utwórz fork repozytorium: Kliknij
2. Sklonuj repozytorium: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Dołącz do Discorda Azure AI Foundry i poznaj ekspertów oraz innych programistów

🌐 Wsparcie wielojęzyczne

Wspierane przez GitHub Action (automatycznie i zawsze aktualne)

Arabski | Bengalski | Bułgarski | Birmański (Myanmar) | Chiński (uproszczony) | Chiński (tradycyjny, Hong Kong) | Chiński (tradycyjny, Macao) | Chiński (tradycyjny, Tajwan) | Chorwacki | Czeski | Duński | Holenderski | Estoński | Fiński | Francuski | Niemiecki | Grecki | Hebrajski | Hindi | Węgierski | Indonezyjski | Włoski | Japoński | Kannada | Koreański | Litewski | Malajski | Malajalam | Marathi | Nepalski | Nigeryjski pidżyn | Norweski | Perski (Farsi) | Polski | Portugalski (Brazylia) | Portugalski (Portugalia) | Pendżabski (Gurmukhi) | Rumuński | Rosyjski | Serbski (cyrylica) | Słowacki | Słoweński | Hiszpański | Suahili | Szwedzki | Tagalog (Filipiński) | Tamilski | Telugu | Tajski | Turecki | Ukraiński | Urdu | Wietnamski

Wolisz klonować lokalnie?

To repozytorium zawiera ponad 50 tłumaczeń językowych, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparse checkout:

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 otrzymujesz wszystko, czego potrzebujesz, aby ukończyć kurs, a pobieranie jest znacznie szybsze.

Jeśli chcesz, aby dodatkowe języki tłumaczeń były wspierane, są one wymienione tutaj

🧑‍🎓 Jesteś studentem?

Odwiedź stronę Student Hub, 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 dodać do zakładek i regularnie sprawdzać, ponieważ zawartość jest wymieniana co miesiąc.

📣 Ogłoszenie - Nowe wyzwania trybu GitHub Copilot Agent do ukończenia!

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 Agent. Jeśli wcześniej nie korzystałeś z trybu Agent, jest on w stanie nie tylko generować tekst, ale także tworzyć i edytować pliki, uruchamiać polecenia i więcej.

📣 Ogłoszenie - Nowy projekt do stworzenia z wykorzystaniem Generatywnej AI

Dodano nowy projekt Asystenta AI, sprawdź projekt

📣 Ogłoszenie - Nowy program nauczania dotyczący Generatywnej AI dla JavaScript został właśnie wydany

Nie przegap naszego nowego programu Generatywnej AI!

Odwiedź https://aka.ms/genai-js-course, aby zacząć!

• Lekcje obejmujące wszystko od podstaw po RAG.
• Interakcje z postaciami historycznymi za pomocą GenAI i naszej aplikacji towarzyszącej.
• Zabawna i angażująca narracja, będziesz podróżować w czasie!

Każda lekcja zawiera zadanie do wykonania, sprawdzanie wiedzy oraz wyzwanie, które poprowadzą Cię po tematach takich jak:

• Tworzenie i inżynieria promptów
• Generowanie aplikacji tekstowych i obrazkowych
• Aplikacje do wyszukiwania

Odwiedź https://aka.ms/genai-js-course, aby zacząć!

🌱 Pierwsze kroki

Nauczyciele, przygotowaliśmy kilka sugestii, jak korzystać z tego programu nauczania. Będziemy wdzięczni za Wasze opinie na naszym forum dyskusyjnym!

Uczniowie, dla każdej lekcji zacznij od quizu przedwykładowego, następnie przeczytaj materiał wykładowy, wykonaj różne zadania i sprawdź zrozumienie postacią po wykładzie.

Aby zwiększyć efektywność nauki, łącz się ze swoimi rówieśnikami, aby pracować wspólnie nad projektami! Zachęcamy do dyskusji na naszym forum dyskusyjnym, gdzie zespół moderatorów jest dostępny, by odpowiedzieć na Twoje pytania.

Aby poszerzyć swoją edukację, zdecydowanie polecamy odkrywanie Microsoft Learn w poszukiwaniu dodatkowych materiałów do nauki.

📋 Konfiguracja środowiska

Ten program nauczania ma gotowe środowisko deweloperskie! Na początku możesz wybrać uruchomienie programu w Codespace (środowisko przeglądarkowe, bez konieczności instalacji), lub lokalnie na komputerze, korzystając z edytora tekstu takiego jak Visual Studio Code.

Utwórz swoje 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. To utworzy nowe repozytorium na Twoim koncie GitHub z kopią programu nauczania.

Wykonaj następujące kroki:

1. Utwórz 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 w Codespace

W swojej kopii tego repozytorium, którą utworzyłeś, kliknij przycisk Code i wybierz Open with Codespaces. To utworzy nowy Codespace do pracy.

Uruchamianie programu lokalnie na komputerze

Aby uruchomić ten program lokalnie na komputerze, potrzebujesz edytora tekstu, przeglądarki i narzędzia wiersza poleceń. Nasza pierwsza lekcja, Wprowadzenie do języków programowania i narzędzi, przeprowadzi Cię przez różne opcje dla tych narzędzi, abyś mógł wybrać to, co działa najlepiej dla Ciebie.

Naszą rekomendacją jest korzystanie z Visual Studio Code jako edytora, który ma również wbudowany Terminal. Visual Studio Code możesz pobrać tutaj.

1. Sklonuj swoje repozytorium na komputer. Możesz to zrobić, klikając przycisk Code i kopiując URL:

   CodeSpace Następnie otwórz Terminal w Visual Studio Code i uruchom następujące polecenie, zastępując <your-repository-url> adresem URL, który właśnie skopiowałeś:

   git clone <your-repository-url>
   

2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając Plik > Otwórz folder i wybierając folder, który właśnie sklonowałeś.

Zalecane rozszerzenia Visual Studio Code:

• Live Server — do podglądu stron HTML w Visual Studio Code
• Copilot — pomaga szybciej pisać kod

📂 Każda lekcja zawiera:

• opcjonalną notatkę wizualną (sketchnote)
• opcjonalne dodatkowe wideo
• quiz rozgrzewkowy przed lekcją
• lekcję pisaną
• dla lekcji projektowych: przewodniki krok po kroku, jak zbudować projekt
• sprawdziany wiedzy
• wyzwanie
• dodatkową lekturę
• zadanie domowe
• quiz po lekcji

Uwaga o quizach: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne tutaj. Aplikację do quizów 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ędzia pracy	Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom	Wprowadzenie do języków programowania i narzędzi pracy	Jasmine
02	Zacznijmy	Podstawy GitHuba, w tym praca zespołowa	Jak używać GitHuba w projekcie, jak współpracować z innymi przy kodzie	Wprowadzenie do GitHuba	Floor
03	Zacznijmy	Dostępność	Poznaj podstawy dostępności stron internetowych	Podstawy dostępności	Christopher
04	Podstawy JS	Typy danych w JavaScript	Podstawy typów danych w JavaScript	Typy danych	Jasmine
05	Podstawy JS	Funkcje i metody	Poznaj funkcje i metody do zarządzania przepływem logiki aplikacji	Funkcje i metody	Jasmine i Christopher
06	Podstawy JS	Tworzenie warunków w JS	Naucz się tworzyć warunki w kodzie za pomocą metod podejmowania decyzji	Tworzenie warunków	Jasmine
07	Podstawy JS	Tablice i pętle	Praca na danych za pomocą tablic i pętli w JavaScript	Tablice i pętle	Jasmine
08	Terrarium	HTML w praktyce	Zbuduj HTML do stworzenia internetowego terrarium z naciskiem na konstrukcję układu	Wprowadzenie do HTML	Jen
09	Terrarium	CSS w praktyce	Utwórz CSS do stylizacji internetowego terrarium, naucz się podstaw CSS w tym jak tworzyć responsywne strony	Wprowadzenie do CSS	Jen
10	Terrarium	Zamknięcia JavaScript i manipulacja DOM	Zbuduj JavaScript, aby terrarium działało jako interfejs przeciągnij i upuść, skupiając się na zamknięciach i manipulacji DOM	Zamknięcia JavaScript, manipulacja DOM	Jen
11	Typing Game	Tworzenie gry do pisania	Naucz się używać zdarzeń klawiatury do sterowania logiką Twojej aplikacji w JavaScript	Programowanie zdarzeniowe	Christopher
12	Green Browser Extension	Praca z przeglądarkami	Poznaj działanie przeglądarek, ich historię i jak przygotować pierwsze elementy rozszerzenia przeglądarki	O przeglądarkach	Jen
13	Green Browser Extension	Tworzenie formularza, wywoływanie API i przechowywanie zmiennych w local storage	Zbuduj elementy JavaScript rozszerzenia przeglądarki, aby wywołać API używając zmiennych przechowywanych lokalnie	API, formularze i local storage	Jen
14	Green Browser Extension	Procesy w tle w przeglądarce, wydajność sieci	Wykorzystaj procesy w tle przeglądarki do zarządzania ikoną rozszerzenia; poznaj wydajność sieci i optymalizacje	Zadania w tle i wydajność	Jen
15	Space Game	Zaawansowany rozwój gier w JavaScript	Poznaj dziedziczenie za pomocą klas i kompozycji oraz wzorzec publikacja/subskrypcja, jako przygotowanie do budowania gry	Wprowadzenie do zaawansowanego rozwoju gier	Chris
16	Space Game	Rysowanie na canvas	Poznaj API Canvas, używane do rysowania elementów na ekranie	Rysowanie na canvas	Chris
17	Space Game	Przemieszczanie elementów po ekranie	Dowiedz się jak można nadać ruch elementom używając współrzędnych kartezjańskich i API Canvas	Przemieszczanie elementów	Chris
18	Space Game	Wykrywanie kolizji	Spraw, by elementy zderzały się i reagowały na siebie za pomocą naciśnięć klawiszy oraz zastosuj funkcję cooldown	Wykrywanie kolizji	Chris
19	Space Game	Liczenie punktów	Wykonuj obliczenia matematyczne na podstawie statusu i wyników gry	Liczenie punktów	Chris
20	Space Game	Kończenie i restartowanie gry	Naucz się zakończać i restartować grę, w tym czyszczenia zasobów i resetowania wartości zmiennych	Warunki zakończenia	Chris
21	Banking App	Szablony HTML i routing w aplikacji webowej	Naucz się tworzyć strukturę wielostronicowej witryny z routingiem i szablonami HTML	Szablony HTML i routing	Yohan
22	Banking App	Tworzenie formularza logowania i rejestracji	Naucz się tworzyć formularze i obsługiwać walidację	Formularze	Yohan
23	Banking App	Metody pobierania i używania danych	Jak dane płyną do aplikacji i z niej, jak je pobierać, przechowywać i usuwać	Dane	Yohan
24	Banking App	Koncepcje zarządzania stanem	Poznaj sposób, w jaki aplikacja przechowuje stan i jak nim zarządzać programowo	Zarządzanie stanem	Yohan
25	Browser/VScode Code	Praca z VScode	Dowiedz się, jak używać edytora kodu	Używanie edytora kodu VScode	Chris
26	AI Assistants	Praca z AI	Naucz się budować własnego asystenta AI	Projekt asystenta AI	Chris

🏫 Pedagogika

Nasz program nauczania jest zaprojektowany z myślą o dwóch kluczowych zasadach pedagogicznych:

• nauka poprzez projekt
• częste quizy

Program uczy podstaw JavaScript, HTML i CSS oraz najnowszych narzędzi i technik stosowanych przez współczesnych web developerów. Uczniowie mają możliwość zdobycia praktycznego doświadczenia, budując grę do pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie do przeglądarki, grę w stylu Space Invaders oraz aplikację bankową dla firm. Po ukończeniu serii uczniowie zdobędą solidną wiedzę z zakresu tworzenia stron internetowych.

🎓 Pierwsze lekcje tego programu można odbyć jako Ścieżkę nauki na Microsoft Learn!

Zapewnienie spójności treści z projektami sprawia, że proces nauki jest bardziej angażujący dla uczniów, a dobranie koncepcji staje się łatwiejsze do zapamiętania. Opracowaliśmy też kilka początkowych lekcji z podstaw JavaScript, aby wprowadzić te koncepcje, w połączeniu z wideo z kolekcji "Beginners Series to: JavaScript", niektórzy autorzy tych materiałów przyczynili się do powstania tego programu nauczania.

Ponadto, quiz niskiego ryzyka przed zajęciami ustawia intencję ucznia na naukę danego tematu, a drugi quiz po zajęciach wzmacnia utrwalenie wiedzy. Ten program jest elastyczny i zabawny, można go realizować w całości lub częściowo. Projekty zaczynają się od prostych i stają się coraz bardziej skomplikowane do końca 12-tygodniowego cyklu.

Chociaż celowo unikamy wprowadzania frameworków JavaScript, aby skoncentrować się na podstawowych umiejętnościach potrzebnych web developerowi przed przejściem do frameworków, dobrym kolejnym krokiem po ukończeniu tego programu byłaby nauka Node.js za pomocą innej serii wideo: "Beginner Series to: Node.js".

Odwiedź nasz Kodeks postępowania i wytyczne dotyczące współtworzenia. Chętnie przyjmiemy Twoje konstruktywne uwagi!

🧭 Dostęp offline

Możesz korzystać z tej dokumentacji offline za pomocą Docsify. Rozgałęź to repozytorium, zainstaluj Docsify na swoim komputerze, a następnie w katalogu głównym repozytorium wpisz docsify serve. Strona będzie serwowana na porcie 3000 na Twoim localhost: localhost:3000.

📘 PDF

Plik PDF ze wszystkimi lekcjami znajdziesz tutaj.

🎒 Inne kursy

Nasz zespół tworzy także inne kursy! Sprawdź:

LangChain

---

Azure / Edge / MCP / Agenci

---

Seria Generatywnej SI

---

Podstawowe nauczanie

---

Seria Copilot

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 masz uwagi dotyczące produktu lub napotkasz błędy podczas tworzenia, odwiedź:

Licencja

To repozytorium jest licencjonowane na podstawie licencji MIT. Zobacz plik LICENSE po więcej informacji.

---

Zastrzeżenie: Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczeniowej AI Co-op Translator. Mimo że dokładamy wszelkich starań, aby zapewnić poprawność tłumaczenia, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym należy traktować jako autorytatywne źródło. 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.