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 za pomocą praktycznych projektów, takich jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Weź udział w quizach, dyskusjach oraz praktycznych zadaniach. Doskonal swoje umiejętności i zoptymalizuj przyswajanie wiedzy dzięki naszej skutecznej, projektowej metodzie nauczania. Rozpocznij swoją podróż z kodowaniem już dziś!
Dołącz do społeczności Azure AI Foundry Discord
Postępuj zgodnie z poniższymi krokami, aby rozpocząć korzystanie z tych zasobów:
- Utwórz forka repozytorium: Kliknij
- Sklonuj repozytorium:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Dołącz do Azure AI Foundry Discord i poznaj ekspertów oraz innych programistów
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 | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Wolisz klonować lokalnie?
To repozytorium zawiera tłumaczenia na ponad 50 języków, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparsowanego 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"To zapewni Ci wszystko, czego potrzebujesz, aby ukończyć kurs, przy znacznie szybszym pobieraniu.
Jeśli chcesz, aby obsługiwane były dodatkowe języki tłumaczeń, są one wymienione tutaj
Odwiedź Student Hub page, gdzie znajdziesz zasoby dla początkujących, pakiety studenckie oraz sposoby na zdobycie darmowego vouchera na certyfikat. To jest strona, którą warto dodać do zakładek i regularnie odwiedzać, ponieważ co miesiąc zmieniamy zawartość.
Dodano nowe wyzwanie, znajdziesz je pod nazwą "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie do wykonania za pomocą GitHub Copilot i trybu agenta. Jeśli nie korzystałeś wcześniej z trybu agenta, umożliwia on nie tylko generowanie tekstu, ale także tworzenie i edytowanie plików, uruchamianie poleceń i wiele więcej.
Dodano nowy projekt AI Assistant, sprawdź go projekt
Nie przegap naszego nowego programu nauczania Generatywnej 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, sprawdzian wiedzy i wyzwanie, które pomogą Ci nauczyć się takich tematów 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 dotyczących korzystania z tego programu nauczania. Chętnie poznamy Wasze opinie na naszym forum dyskusyjnym!
Uczący się, na każdą lekcję zacznij od quizu przed wykładem, potem zapoznaj się z materiałem wykładowym, wykonuj różne aktywności i sprawdź swoją wiedzę przy pomocy quizu po wykładzie.
Aby wzbogacić swoje doświadczenie edukacyjne, połącz się z rówieśnikami, aby wspólnie pracować nad projektami! Zachęcamy do dyskusji na naszym forum dyskusyjnym, gdzie zespół moderatorów będzie dostępny, by odpowiadać na pytania.
Aby poszerzyć swoją edukację, gorąco polecamy eksplorację Microsoft Learn w celu zdobycia dodatkowych materiałów do nauki.
Ten program nauczania ma gotowe środowisko programistyczne! Na początku możesz wybrać uruchomienie kursu w Codespace (środowisko działające w przeglądarce, bez potrzeby instalacji), albo lokalnie na swoim 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. Utworzy to nowe repozytorium na Twoim koncie GitHub z kopią kursu.
Wykonaj następujące kroki:
- Utwórz forka 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 kliknij przycisk Code i wybierz Open with Codespaces. To utworzy nowy Codespace do pracy.
Aby uruchomić kurs 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 pracy, przeprowadzi Cię przez różne opcje dla każdego z tych narzędzi, abyś mógł wybrać te, które najlepiej Ci odpowiadają.
Naszą rekomendacją jest użycie 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, zamieniając
<your-repository-url>na skopiowany wcześniej URL: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.
Polecane rozszerzenia Visual Studio Code:
- Live Server - do podglądu stron HTML w Visual Studio Code
- Copilot - aby pomóc Ci szybciej pisać kod
- opcjonalną notatkę szkicową
- opcjonalny film uzupełniający
- quiz rozgrzewkowy przed lekcją
- lekcję pisaną
- w lekcjach projektowych, przewodniki krok po kroku jak zbudować projekt
- kontrole wiedzy
- wyzwanie
- dodatkową lekturę
- zadanie domowe
- quiz po lekcji
Notatka o quizach: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne tutaj, aplikacja quizowa może być uruchomiona lokalnie lub wdrożona w Azure; postępuj zgodnie z instrukcjami w folderze
quiz-app.
| Nazwa Projektu | Wprowadzone Pojęcia | Cele Nauki | Powiązana Lekcja | Autor | |
|---|---|---|---|---|---|
| 01 | Getting Started | Wstęp do programowania i narzędzi pracy | Poznaj podstawowe założenia większości języków programowania oraz oprogramowanie wspomagające pracę profesjonalnych developerów | Intro to Programming Languages and Tools of the Trade | Jasmine |
| 02 | Getting Started | Podstawy GitHub, w tym praca zespołowa | Jak korzystać z GitHub w projekcie oraz jak współpracować z innymi nad bazą kodu | Intro to GitHub | Floor |
| 03 | Getting Started | Dostępność | Naucz się podstaw dostępności stron internetowych | Accessibility Fundamentals | Christopher |
| 04 | JS Basics | Typy danych w JavaScript | Podstawy typów danych w JavaScript | Data Types | Jasmine |
| 05 | JS Basics | Funkcje i metody | Poznaj funkcje i metody do zarządzania logiką aplikacji | Functions and Methods | Jasmine and Christopher |
| 06 | JS Basics | Podejmowanie decyzji w JS | Naucz się tworzyć warunki w swoim kodzie za pomocą metod podejmowania decyzji | Making Decisions | Jasmine |
| 07 | JS Basics | Tablice i pętle | Pracuj z danymi używając tablic i pętli w JavaScript | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML w praktyce | Zbuduj HTML tworzący terrarium online, skupiając się na budowie układu | Introduction to HTML | Jen |
| 09 | Terrarium | CSS w praktyce | Zbuduj CSS stylizujący terrarium online, skupiając się na podstawach CSS oraz responsywności strony | Introduction to CSS | Jen |
| 10 | Terrarium | Domknięcia JavaScript, manipulacja DOM | Zbuduj JavaScript, który sprawi, że terrarium będzie działać jako interfejs drag/drop, skupiając się na domknięciach i manipulacji DOM | JavaScript Closures, DOM manipulation | Jen |
| 11 | Typing Game | Budowanie gry w pisanie | Naucz się wykorzystywać zdarzenia klawiatury do sterowania logiką aplikacji JavaScript | Event-Driven Programming | Christopher |
| 12 | Green Browser Extension | Praca z przeglądarkami | Naucz się jak działają przeglądarki, poznaj ich historię i jak tworzyć szkielety elementów rozszerzeń przeglądarki | About Browsers | Jen |
| 13 | Green Browser Extension | Tworzenie formularzy, wywoływanie API i przechowywanie zmiennych w local storage | Stwórz elementy JavaScript w rozszerzeniu do przeglądarki, aby wywoływać API używając zmiennych przechowywanych lokalnie | APIs, Forms, and Local Storage | Jen |
| 14 | Green Browser Extension | Procesy w tle w przeglądarce, wydajność witryn webowych | Wykorzystaj procesy w tle przeglądarki do zarządzania ikoną rozszerzenia; poznaj wydajność stron oraz optymalizacje | Background Tasks and Performance | Jen |
| 15 | Space Game | Zaawansowany development gier w JavaScript | Poznaj dziedziczenie przy użyciu klas i kompozycji oraz wzorzec Pub/Sub, przygotowując się do budowy gry | Introduction to Advanced Game Development | Chris |
| 16 | Space Game | Rysowanie na canvas | Poznaj API Canvas, wykorzystywane do rysowania elementów na ekranie | Drawing to Canvas | Chris |
| 17 | Space Game | Przemieszczanie elementów | Odkryj, jak elementy mogą się poruszać korzystając ze współrzędnych kartezjańskich i API Canvas | Moving Elements Around | Chris |
| 18 | Space Game | Wykrywanie kolizji | Spraw, by elementy się zderzały i reagowały na siebie przy pomocy naciśnięć klawiszy, dodaj funkcję cooldown dla wydajności gry | Collision Detection | Chris |
| 19 | Space Game | Liczenie punktów | Wykonuj obliczenia matematyczne bazujące na stanie i wydajności gry | Keeping Score | Chris |
| 20 | Space Game | Zakończenie i ponowne uruchomienie gry | Naucz się kończyć i restartować grę, w tym sprzątać zasoby i resetować zmienne | The Ending Condition | Chris |
| 21 | Banking App | Szablony HTML i routingi w aplikacji webowej | Naucz się tworzyć szkielet architektury wielostronicowej strony internetowej używając routingu i szablonów HTML | HTML Templates and Routes | Yohan |
| 22 | Banking App | Tworzenie formularza logowania i rejestracji | Naucz się tworzyć formularze i obsługiwać rutyny walidacji | Forms | Yohan |
| 23 | Banking App | Metody pobierania i używania danych | Jak dane przepływają do i z aplikacji, jak je pobierać, przechowywać i usuwać | Data | Yohan |
| 24 | Banking App | Koncepcje zarządzania stanem | Naucz się, jak Twoja aplikacja przechowuje stan i jak nim zarządzać programistycznie | State Management | Yohan |
| 25 | Browser/VScode Code | Praca z VScode | Naucz się korzystać z edytora kodu | Use VScode Code Editor | Chris |
| 26 | AI Assistants | Praca z SI | Naucz się tworzyć własnego asystenta AI | AI Assistant project | Chris |
Nasz program nauczania opiera się na dwóch kluczowych zasadach pedagogicznych:
- nauka przez projekty
- częste quizy
Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik używanych przez współczesnych twórców stron internetowych. Uczniowie będą mieli okazję zdobyć praktyczne doświadczenie, budując grę pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu najeźdźców kosmicznych oraz aplikację bankową dla firm. Pod koniec serii uczniowie zdobędą solidną wiedzę na temat tworzenia stron internetowych.
🎓 Możesz rozpocząć od kilku pierwszych lekcji tego programu nauczania jako ścieżkę nauki na Microsoft Learn!
Dzięki zapewnieniu, że zawartość jest zgrana z projektami, proces nauki jest bardziej angażujący dla uczniów, a utrwalenie koncepcji zostaje zwiększone. Przygotowaliśmy również kilka wprowadzających lekcji z podstaw JavaScript, uzupełnionych filmem z serii "Beginners Series to: JavaScript", której autorzy przyczynili się do tego programu.
Ponadto quiz niskiego ryzyka przed lekcją ustawia intencję ucznia na naukę danego tematu, a drugi quiz po lekcji zapewnia dalsze utrwalenie wiedzy. Ten program był zaprojektowany tak, aby był elastyczny i przyjemny i może być realizowany w całości lub częściowo. Projekty zaczynają się od małych i stopniowo stają się coraz bardziej złożone w ciągu 12-tygodniowego cyklu.
Chociaż celowo unikaliśmy wprowadzania frameworków JavaScript, aby skoncentrować się na podstawowych umiejętnościach potrzebnych programiście webowemu przed przyjęciem frameworka, dobrym następnym krokiem po ukończeniu tego programu jest nauka Node.js za pomocą innej serii filmów: "Beginner Series to: Node.js".
Odwiedź nasze wytyczne Code of Conduct i Contributing. Czekamy na Twoje konstruktywne uwagi!
Możesz korzystać z tej dokumentacji offline, używając Docsify. Sklonuj to repozytorium, zainstaluj Docsify na swoim komputerze lokalnym, a następnie w katalogu głównym tego repozytorium wpisz docsify serve. Strona zostanie uruchomiona na porcie 3000 na Twoim localhost: localhost:3000.
PDF ze wszystkimi lekcjami można znaleźć 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 uczniów i doświadczonych programistów w dyskusjach o MCP. To wspierająca społeczność, w której pytania są mile widziane, a wiedza jest swobodnie dzielona.
Jeśli masz uwagi dotyczące produktu lub napotkasz błędy podczas tworzenia, odwiedź:
To repozytorium jest licencjonowane na podstawie licencji MIT. Więcej informacji znajdziesz w pliku LICENSE.
Zastrzeżenie:
Dokument ten został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Mimo że dokładamy starań, aby tłumaczenie było jak najdokładniejsze, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w jego rodzimym języku powinien być traktowany jako źródło autorytatywne. W przypadku informacji o krytycznym znaczeniu 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.