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
Wykonaj poniższe kroki, aby rozpocząć korzystanie z tych zasobów:
- Zrób fork repozytorium: Kliknij
- Sklonuj repozytorium:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Dołącz do Discorda Azure AI Foundry i spotkaj ekspertów oraz innych programistów
Arabski | Bengalski | Bułgarski | Birmański (Myanmar) | Chiński (uproszczony) | Chiński (tradycyjny, Hong Kong) | Chiński (tradycyjny, Makau) | 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 | Nigeryjski pidgin | 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ń, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparse checkout:
Bash / macOS / Linux:
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'CMD (Windows):
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
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 mieć w zakładkach i odwiedzać od czasu do czasu, ponieważ co miesiąc wymieniamy jej zawartość.
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.
Dodano nowy projekt AI Assistant, sprawdź projekt
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.
- Zabawa i wciągająca narracja, będziesz podróżować w czasie!
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
Odwiedź https://aka.ms/genai-js-course, aby zacząć!
Nauczyciele, zamieściliśmy kilka sugestii na temat wykorzystania tego programu nauczania. Chętnie poznamy Wasze opinie na naszym forum dyskusyjnym!
Uczniowie, 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 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, gdzie nasz zespół moderatorów chętnie odpowie na Wasze pytania.
Dla pogłębienia wiedzy zdecydowanie polecamy zapoznanie się z Microsoft Learn i dodatkowymi materiałami edukacyjnymi.
Ten program nauczania ma gotowe do użycia środowisko programistyczne! Podczas rozpoczęcia możesz wybrać uruchomienie kursu w Codespace (środowisko działające w przeglądarce, bez potrzeby instalacji), lub lokalnie na komputerze, używając edytora tekstu takiego jak Visual Studio Code.
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:
- Zrób fork repozytorium: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
- Sklonuj repozytorium:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
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.
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, 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 jako edytora, który zawiera również wbudowany Terminal. Visual Studio Code możesz pobrać tutaj.
-
Sklonuj swoje repozytorium na komputer. Możesz to zrobić, klikając przycisk Code i kopiując URL:
Następnie, otwórz Terminal w Visual Studio Code i uruchom następujące polecenie, zastępując
<your-repository-url>URL-em, który właśnie skopiowałeś:git clone <your-repository-url>
-
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 - do podglądu stron HTML w Visual Studio Code
- Copilot - aby pomóc pisać kod szybciej
- opcjonalną szkicówkę
- opcjonalne dodatkowe wideo
- quiz rozgrzewkowy przed lekcją
- lekcję pisaną
- w lekcjach projektowych, przewodniki krok po kroku jak zbudować projekt
- sprawdziany wiedzy
- wyzwanie
- dodatkowe materiały do czytania
- zadanie domowe
- quiz po lekcji
Informacja o quizach: 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 wdrożyć na Azure; postępuj zgodnie z instrukcjami w folderze
quiz-app.
| 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 | 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 | Floor |
| 03 | Getting Started | Dostępność | Poznaj podstawy dostępności stron internetowych | Podstawy dostępności | Christopher |
| 04 | JS Basics | Typy danych w JavaScript | Podstawy typów danych w JavaScript | Typy danych | Jasmine |
| 05 | JS Basics | Funkcje i metody | Poznaj funkcje i metody do zarządzania logiką aplikacji | Funkcje i metody | Jasmine i Christopher |
| 06 | JS Basics | Podejmowanie decyzji w JS | Naucz się tworzyć warunki w kodzie używając metod podejmowania decyzji | Podejmowanie decyzji | Jasmine |
| 07 | JS Basics | Tablice i pętle | Pracuj z danymi używając 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 układzie | Wprowadzenie do HTML | Jen |
| 09 | Terrarium | CSS w praktyce | Zbuduj CSS dla stylizacji internetowego terrarium, koncentrując się na podstawach CSS, w tym responsywności | Wprowadzenie do CSS | Jen |
| 10 | Terrarium | 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 | Jen |
| 11 | Typing Game | Tworzenie gry pisania na klawiaturze | Naucz się używać zdarzeń klawiatury do sterowania logiką aplikacji JavaScript | Programowanie sterowane zdarzeniami | Christopher |
| 12 | Green Browser Extension | Praca z przeglądarkami | Poznaj działanie przeglądarek, ich historię oraz jak stworzyć pierwsze elementy rozszerzenia przeglądarki | O przeglądarkach | Jen |
| 13 | Green Browser Extension | 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ęć | Jen |
| 14 | Green Browser Extension | 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ść | Jen |
| 15 | Space Game | 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 | 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 ekranowych | Odkryj jak elementy mogą nabierać ruchu korzystając ze współrzędnych kartezjańskich i API Canvas | Przemieszczanie elementów | Chris |
| 18 | Space Game | 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 | Chris |
| 19 | Space Game | Prowadzenie punktacji | Wykonuj obliczenia matematyczne na podstawie stanu i wyników gry | Prowadzenie wyników | Chris |
| 20 | Space Game | Zakończenie i restart gry | Poznaj zakończenie i restart gry, w tym czyszczenie zasobów i resetowanie wartości zmiennych | Warunek zakończenia | Chris |
| 21 | Banking App | 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 | Yohan |
| 22 | Banking App | Budowa formularza logowania i rejestracji | Dowiedz się jak budować formularze i obsługiwać walidację | Formularze | Yohan |
| 23 | Banking App | Metody pobierania i używania danych | Jak dane przepływają do i z aplikacji, jak je pobierać, przechowywać i usuwać | Dane | Yohan |
| 24 | Banking App | Koncepcje zarządzania stanem | Naucz się jak aplikacja przechowuje stan i jak nim zarządzać programowo | Zarządzanie stanem | Yohan |
| 25 | Kod przeglądarki / VScode | Praca z VScode | Naucz się jak używać edytora kodu | Korzystanie z edytora VScode | Chris |
| 26 | Asystenci AI | Praca z AI | Naucz się jak zbudować własnego asystenta AI | Projekt Asystent AI | Chris |
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 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.
🎓 Pierwsze lekcje tego programu możesz wziąć jako Ścieżkę nauki na platformie Microsoft Learn!
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", których autorzy przyczynili się do powstania tego programu nauczania.
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.
Ś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".
Zapoznaj się z naszym Kodeksem postępowania oraz wytycznymi Contributing. Czekamy na Twoje konstruktywne uwagi!
Możesz uruchomić tę dokumentację offline, korzystając z Docsify. Utwórz fork tego repozytorium, zainstaluj Docsify 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 wszystkich lekcji znajduje się tutaj.
Nasz zespół tworzy również inne kursy! Sprawdź:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
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.
Jeśli masz uwagi dotyczące produktu lub napotkasz błędy podczas tworzenia, odwiedź:
To repozytorium jest objęte licencją MIT. Zobacz plik LICENSE po więcej informacji.
Zastrzeżenie:
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczeń AI 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.