29 KiB

Raw Blame History

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. Weź udział w quizach, dyskusjach i zadaniach praktycznych. Rozwijaj swoje umiejętności i optymalizuj proces nauki dzięki efektywnej 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:

Sforkuj repozytorium: Kliknij
Sklonuj repozytorium: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Dołącz do społeczności Azure AI Foundry na Discordzie i poznaj ekspertów oraz innych programistów

🌐 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ę dla studentów, gdzie znajdziesz zasoby dla początkujących, pakiety dla studentów, a nawet możliwość uzyskania darmowego certyfikatu. To strona, którą warto dodać do zakładek i regularnie sprawdzać, ponieważ co miesiąc dodajemy nowe treści.

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

Dodano nowy projekt asystenta AI, sprawdź projekt

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

Nie przegap naszego nowego programu nauczania o 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.
Ciekawa 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 zgłębić takie tematy jak:

Tworzenie zapytań i inżynieria zapytań
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, na początku każdej lekcji rozwiążcie quiz wprowadzający, a następnie zapoznajcie się z materiałem lekcyjnym, wykonajcie różne aktywności i sprawdźcie swoją wiedzę w quizie końcowym.

Aby wzbogacić swoje doświadczenie w nauce, połączcie się z innymi uczestnikami kursu, aby wspólnie pracować nad projektami! Zachęcamy do dyskusji na naszym forum dyskusyjnym, gdzie nasz zespół moderatorów będzie dostępny, aby odpowiedzieć na Wasze pytania.

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

📋 Konfiguracja środowiska

Ten program nauczania ma gotowe środowisko programistyczne! Na początku możesz wybrać, czy chcesz uruchomić program w Codespace (środowisko przeglądarkowe, 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:

Sforkuj 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 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 będziesz mógł 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, które 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 > Open Folder i wybierając folder, który właśnie sklonowałeś.

Rekomendowane rozszerzenia do Visual Studio Code:

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

Copilot - aby szybciej pisać kod

📂 Każda lekcja zawiera:

opcjonalny szkic
opcjonalne dodatkowe wideo
quiz wprowadzający przed lekcją
pisemny materiał lekcyjny
dla lekcji opartych na projektach, przewodniki krok po kroku, jak zbudować projekt
sprawdzenie wiedzy
wyzwanie
dodatkowe materiały do przeczytania
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 zespołowa	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ć wirtualne terrarium, koncentrując się na budowie układu	Wprowadzenie do HTML	Jen
09	Terrarium	CSS w praktyce	Zbuduj CSS, aby stylizować wirtualne 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 stworzyć 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ę o zakończeniu i ponownym uruchomieniu 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ę, 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 nim zarządzać programowo	Zarządzanie stanem	Yohan
25	Kod przeglądarki/VScode	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!

Zapewniając, że treści są zgodne z projektami, proces 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 przedstawiają koncepcje, w połączeniu z filmem z kolekcji "Seria dla początkujących: JavaScript", której niektórzy 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 zabawny, i można go realizować w całości lub częściowo. Projekty zaczynają się od małych 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: "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ź:

Uzyskiwanie 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 dla więcej informacji.

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż staramy się zapewnić dokładność, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za autorytatywne źródło. W przypadku informacji krytycznych 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.

29 KiB Raw Blame History