28 KiB

Raw Permalink Blame History

Postępuj zgodnie z poniższymi krokami, aby rozpocząć korzystanie z tych zasobów:

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

Tworzenie stron internetowych dla początkujących - Kurs

Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu kompleksowemu kursowi przygotowanemu przez Microsoft Cloud Advocates. Każda z 24 lekcji wprowadza w 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 optymalizuj proces nauki dzięki naszej efektywnej metodzie opartej na projektach. Rozpocznij swoją przygodę z programowaniem już dziś!

🌐 Wsparcie dla wielu języków

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

Jeśli chcesz, aby obsługiwane były dodatkowe języki, lista dostępnych 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 sprawdzać, ponieważ co miesiąc zmieniamy zawartość.

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

Dodano nowy projekt asystenta AI, sprawdź projekt

📣 Ogłoszenie - Nowy kurs dotyczący generatywnej AI dla JavaScript

Nie przegap naszego nowego kursu dotyczącego generatywnej AI!

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

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 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, zamieściliśmy kilka sugestii dotyczących wykorzystania tego kursu. Chętnie poznamy Wasze opinie na naszym forum dyskusyjnym!

Uczniowie, dla każdej lekcji rozpocznij od quizu przed wykładem, a następnie przeczytaj materiały wykładowe, wykonaj różne aktywności i sprawdź swoją wiedzę za pomocą quizu po wykładzie.

Aby poprawić swoje doświadczenie w nauce, 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ą edukację, gorąco polecamy eksplorowanie Microsoft Learn w celu uzyskania dodatkowych materiałów do nauki.

📋 Konfiguracja środowiska

Ten kurs ma gotowe środowisko programistyczne! Na początku możesz wybrać uruchomienie kursu w Codespace (środowisko w przeglądarce, bez potrzeby instalacji), lub 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ą kursu.

Postępuj zgodnie z poniższymi krokami:

Zforkuj repozytorium: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
Sklonuj repozytorium: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Uruchamianie kursu 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ć.

!Codespace./images/createcodespace.png)

Uruchamianie kursu lokalnie na komputerze

Aby uruchomić ten kurs 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.

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>
```
Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając File

Otwórz folder i wybierz folder, który właśnie sklonowałeś. Rekomendowane rozszerzenia Visual Studio Code:

Live Server - do podglądu stron HTML w Visual Studio Code

Copilot - aby szybciej pisać kod

📂 Każda lekcja zawiera:

opcjonalną notatkę graficzną
opcjonalny film uzupełniający
quiz rozgrzewkowy przed lekcją
pisemną lekcję
w przypadku lekcji projektowych, przewodniki krok po kroku, jak zbudować projekt
sprawdzanie wiedzy
wyzwanie
dodatkowe materiały do czytania
zadanie
quiz po lekcji

Informacja o quizach: 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ądzających 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	Pracuj 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/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	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ą się poruszać 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 dla wydajności gry	Wykrywanie kolizji	Chris
19	Gra Kosmiczna	Liczenie punktów	Wykonuj obliczenia matematyczne na podstawie statusu gry i wydajności	Liczenie punktów	Chris
20	Gra Kosmiczna	Zakończenie i restart gry	Dowiedz się, jak zakończyć i zrestartować grę, w tym jak wyczyścić zasoby i zresetować 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ę, jak budować formularze i obsługiwać rutyny walidacyjne	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 zarządzać nim 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 znaleźć jako Ścieżkę nauki na Microsoft Learn!

Dzięki dopasowaniu treści do projektów proces nauki staje się bardziej angażujący dla studentów, a przyswajanie koncepcji zostaje wzmocnione. Napisaliśmy również kilka lekcji wprowadzających do podstaw JavaScript, które są połączone z filmami z serii "Beginners Series to: JavaScript", których autorzy przyczynili się do powstania tego programu nauczania.

Dodatkowo, quiz o niskim poziomie trudności przed zajęciami ustawia intencję studenta na naukę danego tematu, a drugi quiz po zajęciach zapewnia dalsze przyswajanie wiedzy. Ten program nauczania został zaprojektowany tak, aby był elastyczny i przyjemny, i 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 filmów: "Beginner Series to: Node.js".

Odwiedź nasz Kodeks postępowania oraz wytyczne dotyczące Współtworzenia. Czekamy na Twoje konstruktywne uwagi!

🧭 Dostęp offline

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

📘 PDF

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

🎒 Inne kursy

Nasz zespół tworzy inne kursy! Sprawdź:

Licencja

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

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczeniowej 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 wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.

28 KiB Raw Permalink Blame History