Web-Dev-For-Beginners/translations/pl

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 zagłębia się w JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia do przeglądarek oraz gry kosmiczne. Weź udział w quizach, dyskusjach i praktycznych zadaniach. Rozwijaj swoje umiejętności i optymalizuj przyswajanie 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 poniższe kroki, aby rozpocząć korzystanie z tych zasobów:

1. Forkuj repozytorium: Kliknij
2. Sklonuj repozytorium: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Dołącz do Azure AI Foundry na Discordzie i poznaj ekspertów oraz innych deweloperów

🌐 Wsparcie wielojęzyczne

Obsługiwane przez GitHub Action (automatycznie i zawsze aktualne)

Arabskie | Bangla | Bułgarski | Birmański (Myanmar) | Chiński (uproszczony) | Chiński (tradycyjny, Hongkong) | Chiński (tradycyjny, Macau) | Chiński (tradycyjny, Tajwan) | Chorwacki | Czeski | Duński | Niderlandzki | Estoński | Fiński | Francuski | Niemiecki | Grecki | Hebrajski | Hindi | Węgierski | Indonezyjski | Włoski | Japoński | Kannada | Koreański | Litewski | Malajski | Malajalam | Marathi | Nepalski | Pidgin nigeryjski | 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) | Tamil | Telugu | Tajski | Turecki | Ukraiński | Urdu | Wietnamski

Wolisz sklonować lokalnie?

To repozytorium zawiera ponad 50 tłumaczeń, 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 otrzymasz wszystko, czego potrzebujesz, aby ukończyć kurs, a pobieranie będzie szybsze.

Jeśli chcesz, aby dodano wsparcie dla innych języków, lista obsługiwanych jest dostępna tutaj

🧑‍🎓 Jesteś studentem?

Odwiedź 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 od czasu do czasu sprawdzać, ponieważ co miesiąc aktualizujemy zawartość.

📣 Ogłoszenie – Nowe wyzwania z trybem agenta GitHub Copilot do wykonania!

Dodano nowe wyzwanie, szukaj „GitHub Copilot Agent Challenge 🚀” w większości rozdziałów. To nowe wyzwanie do wykonania z użyciem GitHub Copilot i trybu agenta. Jeśli wcześniej nie korzystałeś z trybu agenta, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, wykonywać polecenia i więcej.

📣 Ogłoszenie – Nowy projekt do zbudowania z użyciem Generative AI

Dodano nowy projekt AI Assistant, sprawdź go projekt

📣 Ogłoszenie – Nowy program nauczania z zakresu Generative AI dla JavaScript właśnie został wydany

Nie przegap naszego nowego kursu Generative AI!

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

• Lekcje obejmujące wszystko od podstaw po RAG.
• Interakcja 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, sprawdzenie wiedzy i wyzwanie, które pomaga w nauce takich tematów jak:

• Promptowanie i inżynieria promptów
• Generowanie aplikacji tekstowych i graficznych
• Aplikacje do wyszukiwania

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

🌱 Rozpoczęcie

Nauczyciele, przygotowaliśmy kilka sugestii dotyczących korzystania z tego programu nauczania. Chętnie poznamy waszą opinię na naszym forum dyskusyjnym!

Uczący się, dla każdej lekcji zacznij od quizu wstępnego, zapoznaj się z materiałem, wykonaj różne aktywności i sprawdź swoją wiedzę w quizie podsumowującym.

Aby wzbogacić doświadczenie nauki, połącz się z rówieśnikami i pracujcie razem nad projektami! Zachęcamy do dyskusji na naszym forum dyskusyjnym, gdzie zespół moderatorów jest gotowy odpowiedzieć na Twoje pytania.

Aby pogłębić swoją edukację, zdecydowanie polecamy eksplorację Microsoft Learn w celu zdobycia dodatkowych materiałów do nauki.

📋 Konfiguracja środowiska

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

Utwórz swoje repozytorium

Aby łatwo zapisać swoją pracę, zaleca się 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ą tego programu nauczania.

Postępuj według tych kroków:

1. Forkuj 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 kursu w Codespace

W swojej kopii repozytorium, które utworzyłeś, kliknij przycisk Code i wybierz Open with Codespaces. To utworzy dla Ciebie nowe środowisko Codespace do pracy.

Uruchamianie kursu lokalnie na komputerze

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

Polecamy używanie Visual Studio Code jako edytora, który ma również wbudowany terminal. Możesz pobrać Visual Studio Code tutaj.

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

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

   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 bezpośrednio w Visual Studio Code
• Copilot - aby pomóc Ci szybciej pisać kod

📂 Każda lekcja zawiera:

• opcjonalny sketchnote
• opcjonalny uzupełniający film
• quiz rozgrzewkowy przed lekcją
• lekcję pisemną
• w przypadku lekcji projektowych, przewodniki krok po kroku dotyczące tworzenia projektu
• sprawdziany wiedzy
• wyzwanie
• dodatkową lekturę
• zadanie domowe
• quiz po lekcji

Notatka dotycząca quizów: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne tutaj. Aplikację quizową można uruchomić lokalnie lub opublikować na Azure; postępuj zgodnie z instrukcjami w folderze quiz-app.

🗃️ Lekcje

	Nazwa projektu	Nauczane koncepcje	Cele nauczania	Powiązana lekcja	Autor
01	Zacznijmy	Wprowadzenie do programowania i narzędzia pracy	Poznanie podstaw większości języków programowania oraz oprogramowania wspierającego profesjonalnych programistów	Wprowadzenie do języków programowania i narzędzi pracy	Jasmine
02	Zacznijmy	Podstawy GitHub, w tym praca zespołowa	Jak korzystać z GitHub w projekcie, jak współpracować z innymi nad kodem	Wprowadzenie do GitHub	Floor
03	Zacznijmy	Dostępność	Poznanie podstaw dostępności w sieci	Podstawy dostępności	Christopher
04	Podstawy JS	Typy danych w JavaScript	Podstawy dotyczące typów danych w JavaScript	Typy danych	Jasmine
05	Podstawy JS	Funkcje i metody	Poznanie funkcji i metod zarządzających logiką aplikacji	Funkcje i metody	Jasmine i Christopher
06	Podstawy JS	Tworzenie decyzji w JS	Nauka tworzenia warunków w kodzie za pomocą metod podejmowania decyzji	Tworzenie decyzji	Jasmine
07	Podstawy JS	Tablice i pętle	Praca z danymi za pomocą tablic i pętli w JavaScript	Tablice i pętle	Jasmine
08	Terrarium	HTML w praktyce	Tworzenie HTML do zbudowania wirtualnego terrarium, koncentrując się na układzie	Wprowadzenie do HTML	Jen
09	Terrarium	CSS w praktyce	Tworzenie CSS do stylizacji wirtualnego terrarium, ze szczególnym uwzględnieniem podstaw CSS i responsywności strony	Wprowadzenie do CSS	Jen
10	Terrarium	Closures w JavaScript, manipulacja DOMem	Tworzenie kodu JavaScript, który pozwoli terrarium działać jako interfejs drag/drop, ze szczególnym uwzględnieniem closures i manipulacji DOM	Closures i manipulacja DOM	Jen
11	Typing Game	Tworzenie gry do pisania	Nauka korzystania z zdarzeń klawiatury do sterowania logiką aplikacji w JavaScript	Programowanie zdarzeniowe	Christopher
12	Green Browser Extension	Praca z przeglądarkami	Poznanie działania przeglądarek, ich historii oraz jak zbudować pierwsze elementy rozszerzenia do przeglądarki	O przeglądarkach	Jen
13	Green Browser Extension	Budowa formularza, wywołanie API i przechowywanie zmiennych	Tworzenie elementów JavaScript rozszerzenia do przeglądarki, które wywołują API korzystając z lokalnego przechowywania zmiennych	API, formularze i lokalne przechowywanie	Jen
14	Green Browser Extension	Procesy w tle w przeglądarce, wydajność sieciowa	Korzystanie z procesów działających w tle do zarządzania ikoną rozszerzenia, poznanie wydajności sieci i optymalizacji	Procesy w tle i wydajność	Jen
15	Space Game	Bardziej zaawansowany rozwój gier w JavaScript	Poznanie dziedziczenia za pomocą klas i kompozycji oraz wzorca Pub/Sub, przygotowanie do tworzenia gry	Wprowadzenie do zaawansowanego tworzenia gier	Chris
16	Space Game	Rysowanie na canvas	Nauka o API Canvas używanym do rysowania elementów na ekranie	Rysowanie na Canvas	Chris
17	Space Game	Przemieszczanie elementów na ekranie	Odkryj, jak elementy mogą poruszać się przy użyciu 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 nawzajem za pomocą naciśnięć klawiszy oraz zapewnij funkcję cooldown	Wykrywanie kolizji	Chris
19	Space Game	Liczenie punktów	Wykonuj obliczenia matematyczne na podstawie statusu i wydajności gry	Liczenie punktów	Chris
20	Space Game	Kończenie i restartowanie gry	Nauka o kończeniu i restartowaniu gry, w tym sprzątaniu zasobów i resetowaniu zmiennych	Warunek zakończenia	Chris
21	Banking App	Szablony HTML i trasy w aplikacji webowej	Nauka tworzenia szkieletu architektury wielostronicowej strony internetowej z wykorzystaniem tras i szablonów HTML	Szablony HTML i trasy	Yohan
22	Banking App	Budowa formularza logowania i rejestracji	Poznanie budowania formularzy i obsługi walidacji	Formularze	Yohan
23	Banking App	Metody pobierania i używania danych	Jak dane przepływają do aplikacji i z niej, jak je pobierać, przechowywać i usuwać	Dane	Yohan
24	Banking App	Koncepcje zarządzania stanem	Nauka, jak aplikacja przechowuje stan i jak nim sterować programistycznie	Zarządzanie stanem	Yohan
25	Browser/VScode Code	Praca z VScode	Nauka korzystania z edytora kodu	Używanie edytora VScode	Chris
26	AI Assistants	Praca z AI	Nauka tworzenia własnego asystenta AI	Projekt asystenta AI	Chris

🏫 Pedagogika

Nasz program nauczania zaprojektowano w oparciu o dwie kluczowe zasady pedagogiczne:

• naukę opartą na projektach
• częste quizy

Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik stosowanych przez współczesnych programistów webowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie, tworząc grę do pisania, wirtualne terrarium, przyjazne środowisku rozszerzenie przeglądarki, grę w stylu Space Invaders oraz aplikację bankową dla firm. Pod koniec cyklu studenci zdobędą solidną wiedzę na temat tworzenia stron internetowych.

🎓 Możesz rozpocząć od pierwszych lekcji tego programu jako Ścieżkę nauki na Microsoft Learn!

Zapewnienie zgodności treści z projektami sprawia, że proces jest bardziej angażujący dla uczniów, a utrwalanie koncepcji jest usprawnione. Napisaliśmy także kilka wprowadzających lekcji podstaw JavaScript, aby przedstawić koncepcje, połączonych z filmem z kolekcji "Seria dla początkujących: JavaScript", których autorzy przyczynili się do powstania tego programu.

Ponadto quiz o niskim stopniu ryzyka przed zajęciami nastawia ucznia na naukę danego tematu, a drugi quiz po lekcji zapewnia jego dalsze utrwalenie. Ten program został zaprojektowany tak, aby był elastyczny i przyjemny, można go realizować w całości lub w częściach. Projekty zaczynają się od małych i stają się coraz bardziej złożone w ciągu 12-tygodniowego cyklu.

Choć celowo zrezygnowaliśmy z wprowadzania frameworków JavaScript, aby skupić się na podstawowych umiejętnościach potrzebnych jako web developer zanim przystąpi się do pracy z frameworkiem, kolejnym dobrym krokiem po ukończeniu tego kursu byłoby poznanie Node.js za pomocą innej kolekcji filmów: "Seria dla początkujących: Node.js".

Odwiedź nasze wytyczne Kodeks postępowania i Współtworzenie. Cenimy Twoje konstruktywne opinie!

🧭 Dostęp offline

Możesz uruchomić tę dokumentację offline, korzystając z Docsify. Zrób fork tego repozytorium, zainstaluj Docsify na swoim komputerze, a następnie w głównym folderze tego repozytorium wpisz docsify serve. Strona zostanie uruchomiona na porcie 3000 na twoim lokalnym hoście: localhost:3000.

📘 PDF

Plik PDF ze wszystkimi lekcjami można znaleźć tutaj.

🎒 Inne kursy

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

LangChain

Azure / Edge / MCP / Agenci

---

Seria Generative AI

---

Core Learning

---

Seria Copilot

Uzyskanie 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 na temat MCP. To wspierająca społeczność, gdzie pytania są mile widziane, a wiedza jest dzielona swobodnie.

Jeśli masz opinie o produkcie lub natkniesz się na błędy podczas tworzenia, odwiedź:

Licencja

To repozytorium jest licencjonowane na podstawie licencji MIT. Aby uzyskać więcej informacji, zobacz plik LICENSE.

---

Zrzeczenie się odpowiedzialności:
Niniejszy dokument został przetłumaczony za pomocą automatycznej usługi tłumaczeniowej AI Co-op Translator. Pomimo naszych starań o dokładność, 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 zalecamy 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.