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 kursowi przygotowanemu przez Microsoft Cloud Advocates. Każda z 24 lekcji skupia się na JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki czy gry kosmiczne. Uczestnicz w quizach, dyskusjach i zadaniach praktycznych. Rozwijaj swoje umiejętności i zwiększ efektywność nauki dzięki naszej metodzie opartej na projektach. Rozpocznij 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. Sforkuj repozytorium: Kliknij
2. Sklonuj repozytorium: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Dołącz do społeczności Azure AI Foundry Discord i poznaj ekspertów oraz innych programistów

🌐 Obsługa wielu języków

Obsługiwane za pomocą GitHub Action (Automatyczne i zawsze aktualne)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Korean | Lithuanian | Malay | Marathi | Nepali | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Jeśli chcesz, aby dodatkowe języki były obsługiwane, lista dostępnych języków znajduje się tutaj

🧑‍🎓 Jesteś studentem?

Odwiedź stronę Student Hub, gdzie znajdziesz zasoby 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 odwiedzać, ponieważ co miesiąc zmieniamy zawartość.

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

Dodano nowy projekt Asystenta AI, sprawdź go projekt

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

Nie przegap naszego nowego programu nauczania dotyczącego generatywnej AI!

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

• Lekcje obejmujące wszystko, od podstaw po RAG.
• Interakcja z historycznymi postaciami 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 oraz wyzwanie, które pomoże Ci nauczyć się takich tematów jak:

• Tworzenie i optymalizacja promptów
• Generowanie aplikacji tekstowych i graficznych
• Aplikacje wyszukiwawcze

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

🌱 Rozpoczęcie pracy

Nauczyciele, przygotowaliśmy kilka sugestii dotyczących wykorzystania tego programu nauczania. Chętnie poznamy Wasze opinie na naszym forum dyskusyjnym!

Uczniowie, dla każdej lekcji zacznij od quizu wprowadzającego, a następnie przeczytaj materiał wykładowy, wykonaj różne aktywności i sprawdź swoją wiedzę za pomocą quizu końcowego.

Aby wzbogacić swoje doświadczenie edukacyjne, połącz się z rówieśnikami, aby wspólnie pracować nad projektami! Dyskusje są mile widziane na naszym forum dyskusyjnym, gdzie nasz zespół moderatorów będzie dostępny, aby odpowiedzieć na Twoje pytania.

Aby poszerzyć swoją wiedzę, gorąco polecamy eksplorację Microsoft Learn w celu uzyskania dodatkowych materiałów edukacyjnych.

📋 Konfiguracja środowiska

Ten program nauczania ma gotowe środowisko deweloperskie! Na początku możesz wybrać, czy chcesz uruchomić program w Codespace (środowisko w przeglądarce, bez konieczności instalacji), czy lokalnie na swoim komputerze, używając edytora tekstu, takiego jak Visual Studio Code.

Utwórz swoje repozytorium

Aby łatwo zapisywać swoją pracę, zaleca się 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 w Twoim koncie GitHub z kopią programu nauczania.

Wykonaj poniższe kroki:

1. Sforkuj 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

W swojej kopii tego repozytorium, którą utworzyłeś, kliknij przycisk Code i wybierz Open with Codespaces. Spowoduje to utworzenie nowego Codespace, w którym możesz pracować.

Uruchamianie programu nauczania lokalnie na komputerze

Aby uruchomić ten program nauczania lokalnie na swoim komputerze, będziesz potrzebować edytora tekstu, przeglądarki i narzędzia wiersza poleceń. Nasza pierwsza lekcja, Wprowadzenie do języków programowania i narzędzi pracy, przeprowadzi Cię przez różne opcje dla każdego z tych narzędzi, abyś mógł wybrać to, co najlepiej Ci odpowiada.

Naszą rekomendacją jest użycie 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 URL:

   CodeSpace

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

   git clone <your-repository-url>
   

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

Rekomendowane rozszerzenia dla Visual Studio Code:

• Live Server - do podglądu stron HTML w Visual Studio Code
• Copilot - aby pomóc Ci szybciej pisać kod

📂 Każda lekcja zawiera:

• opcjonalny szkic
• opcjonalny materiał wideo uzupełniający
• quiz rozgrzewkowy przed lekcją
• lekcja pisemna
• dla lekcji opartych na projektach, przewodniki krok po kroku, jak zbudować projekt
• sprawdzanie wiedzy
• wyzwanie
• dodatkowa lektura
• zadanie
• quiz po lekcji

Uwaga dotycząca quizów: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów, każdy z trzema pytaniami. Są dostępne tutaj. 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 nauczania	Powiązana Lekcja	Autor
01	Pierwsze kroki	Wprowadzenie do programowania i narzędzi pracy	Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom w ich pracy	Wprowadzenie do języków programowania i narzędzi pracy	Jasmine
02	Pierwsze kroki	Podstawy GitHub, w tym praca w zespole	Jak korzystać z GitHub w swoim projekcie, jak współpracować z innymi nad kodem	Wprowadzenie do GitHub	Floor
03	Pierwsze kroki	Dostępność	Poznaj podstawy dostępności w sieci	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	Dowiedz się o funkcjach i metodach zarządzania logiką aplikacji	Funkcje i metody	Jasmine i Christopher
06	Podstawy JS	Podejmowanie decyzji w JS	Naucz się tworzyć warunki w kodzie za pomocą metod podejmowania decyzji	Podejmowanie 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	Zbuduj HTML, aby stworzyć internetowe terrarium, koncentrując się na budowie układu	Wprowadzenie do HTML	Jen
09	Terrarium	CSS w praktyce	Zbuduj CSS, aby stylizować internetowe terrarium, koncentrując się na podstawach CSS, w tym na responsywności strony	Wprowadzenie do CSS	Jen
10	Terrarium	Zamknięcia w JavaScript, manipulacja DOM	Zbuduj JavaScript, aby terrarium działało jako interfejs przeciągnij i upuść, koncentrując się na zamknięciach i manipulacji DOM	Zamknięcia w JavaScript, manipulacja DOM	Jen
11	Gra Typing	Zbuduj grę Typing	Dowiedz się, jak używać zdarzeń klawiatury do sterowania logiką aplikacji JavaScript	Programowanie oparte na zdarzeniach	Christopher
12	Rozszerzenie przeglądarki Green	Praca z przeglądarkami	Dowiedz się, jak działają przeglądarki, ich historia oraz jak zbudować pierwsze elementy rozszerzenia przeglądarki	O przeglądarkach	Jen
13	Rozszerzenie przeglądarki Green	Budowanie formularza, wywoływanie API i przechowywanie zmiennych w lokalnej pamięci	Zbuduj elementy JavaScript swojego rozszerzenia przeglądarki, aby wywoływać API za pomocą zmiennych przechowywanych w lokalnej pamięci	API, formularze i lokalna pamięć	Jen
14	Rozszerzenie przeglądarki Green	Procesy w tle w przeglądarce, wydajność sieci	Użyj procesów w tle przeglądarki do zarządzania ikoną rozszerzenia; dowiedz się o wydajności sieci i optymalizacjach, które można zastosować	Zadania w tle i wydajność	Jen
15	Gra Kosmiczna	Bardziej zaawansowane tworzenie gier w JavaScript	Dowiedz się o dziedziczeniu za pomocą klas i kompozycji oraz wzorcu Pub/Sub, przygotowując się do budowy gry	Wprowadzenie do zaawansowanego tworzenia gier	Chris
16	Gra Kosmiczna	Rysowanie na canvas	Dowiedz się o API Canvas, używanym do rysowania elementów na ekranie	Rysowanie na canvas	Chris
17	Gra Kosmiczna	Przemieszczanie elementów po ekranie	Odkryj, jak elementy mogą zyskać ruch za pomocą współrzędnych kartezjańskich i API Canvas	Przemieszczanie elementów	Chris
18	Gra Kosmiczna	Wykrywanie kolizji	Spraw, aby elementy zderzały się i reagowały na siebie za pomocą naciśnięć klawiszy oraz zapewnij funkcję cooldown, aby poprawić wydajność gry	Wykrywanie kolizji	Chris
19	Gra Kosmiczna	Liczenie punktów	Wykonuj obliczenia matematyczne na podstawie statusu i wydajności gry	Liczenie punktów	Chris
20	Gra Kosmiczna	Zakończenie i restart gry	Dowiedz się o zakończeniu i restartowaniu gry, w tym o czyszczeniu zasobów i resetowaniu wartości zmiennych	Warunek zakończenia	Chris
21	Aplikacja bankowa	Szablony HTML i trasy w aplikacji internetowej	Dowiedz się, jak stworzyć szkielet architektury wielostronicowej witryny za pomocą tras i szablonów HTML	Szablony HTML i trasy	Yohan
22	Aplikacja bankowa	Budowanie formularza logowania i rejestracji	Dowiedz się o budowaniu formularzy i obsłudze procedur walidacji	Formularze	Yohan
23	Aplikacja bankowa	Metody pobierania i używania danych	Jak dane przepływają do i z aplikacji, jak je pobierać, przechowywać i usuwać	Dane	Yohan
24	Aplikacja bankowa	Koncepcje zarządzania stanem	Dowiedz się, jak aplikacja zachowuje stan i jak nim zarządzać programowo	Zarządzanie stanem	Yohan
25	Przeglądarka/VScode Code	Praca z VScode	Dowiedz się, jak korzystać z edytora kodu	Korzystanie z edytora kodu VScode	Chris
26	Asystenci AI	Praca z AI	Dowiedz się, jak zbudować własnego asystenta AI	Projekt Asystent AI	Chris

🏫 Pedagogika

Nasz program nauczania został zaprojektowany z uwzględnieniem dwóch kluczowych zasad pedagogicznych:

• nauka oparta 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 internetowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie, budując grę Typing, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu kosmicznych najeźdźców oraz aplikację bankową dla firm. Pod koniec serii studenci zdobędą solidne podstawy w zakresie tworzenia stron internetowych.

🎓 Pierwsze kilka lekcji z tego programu nauczania można odbyć jako Ścieżkę nauki na Microsoft Learn!

Zapewniając, że treści są zgodne z projektami, proces staje się bardziej angażujący dla studentów, a przyswajanie koncepcji zostanie wzmocnione. Napisaliśmy również kilka lekcji wprowadzających w podstawy JavaScript, aby zapoznać się z koncepcjami, w połączeniu z wideo z kolekcji "Seria dla początkujących: JavaScript", której niektórzy autorzy przyczynili się do powstania tego programu nauczania.

Ponadto quiz o niskim poziomie trudności przed zajęciami ustawia intencję ucznia na naukę danego tematu, a drugi quiz po zajęciach zapewnia dalsze przyswajanie wiedzy. Ten program nauczania został zaprojektowany tak, aby był elastyczny i zabawny, można go realizować 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.

Chociaż celowo unikaliśmy wprowadzania frameworków JavaScript, aby skupić się na podstawowych umiejętnościach potrzebnych jako programista internetowy przed przyjęciem frameworka, dobrym kolejnym krokiem po ukończeniu tego programu nauczania byłoby poznanie Node.js za pomocą innej kolekcji wideo: "Seria dla początkujących: Node.js".

Odwiedź nasze Zasady postępowania i Wytyczne dotyczące współpracy. Czekamy na Twoją konstruktywną opinię!

🧭 Dostęp offline

Możesz uruchomić tę dokumentację offline, korzystając z Docsify. Sforkuj to repozytorium, zainstaluj Docsify na swoim komputerze lokalnym, a następnie w folderze głównym tego repozytorium wpisz docsify serve. Witryna zostanie uruchomiona na porcie 3000 na Twoim localhost: localhost:3000.

📘 PDF

PDF wszystkich lekcji można znaleźć tutaj.

🎒 Inne kursy

Nasz zespół tworzy inne kursy! Sprawdź:

• MCP dla początkujących
• Edge AI dla początkujących
• Agenci AI dla początkujących
• Generatywna AI dla początkujących .NET
• Generatywna AI z JavaScript
• Generatywna AI z Java
• AI dla początkujących
• Data Science dla początkujących
• ML dla początkujących
• Cyberbezpieczeństwo dla początkujących
• Web Dev dla początkujących
• IoT dla początkujących
• Rozwój XR dla początkujących
• Opanowanie GitHub Copilot do agentowego wykorzystania
• Opanowanie GitHub Copilot dla programistów C#/.NET
• Wybierz swoją własną przygodę z Copilotem

Uzyskanie pomocy

Jeśli utkniesz lub masz pytania dotyczące tworzenia aplikacji AI, dołącz do:

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:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż 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 jego języku źródłowym powinien być uznawany za autorytatywne źródło. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.