آموزش HTML، CSS و JavaScript با ساخت بازی Flappy Bird! - آخرین آپدیت

Lessons Lessons

• سلام و خوش آمدید! Hallo und willkommen!

• مقایسه HTML، CSS و JavaScript HTML, CSS und JavaScript im Vergleich

• نگاهی کوتاه به پلتفرم CodePen و تمرین: کدها در عمل Kurzer Einblick in die Plattform CodePen & Übung: Code-Schnipsel (Pen) in Aktion

• مقدمه‌ای بر بخش نکات و ترفندها Intro zum Abschnitt mit Tipps & Tricks

• ساختاربندی متن (عناوین، بخش‌ها، پانویس‌ها) Text strukturieren (Überschriften, Textabschnitte, Fußnoten)

• اجزای اصلی HTML: المان‌ها و تگ‌ها Die HTML-Grundbausteine: Elemente und Tags

• تاکیدهای متنی برای صفحه‌خوان‌ها و دسترسی‌پذیری در HTML Textbetonungen für Screenreader und Barrierefreiheit in HTML

• جمع‌بندی HTML Zusammenfassung HTML

• قوانین: انتخابگرها (Selectors)، ویژگی‌ها (Properties) و مقادیر (Values) Regeln: Selektoren (selectors), Eigenschaften (properties), Werte (values)

• تعیین مقادیر رنگ در CSS Farbwerte in CSS angeben

• مفهوم Specificity و بازنویسی مقادیر در CSS Spezifität und Werte überschreiben in CSS

• متغیرها: تعریف و مقداردهی اولیه Variablen: Deklaration und Initialisierung

• کلمات کلیدی (Keywords) Schlüsselwörter (keywords)

• متغیرها و قراردادهای نام‌گذاری Variablen und Namenskonventionen

• مقادیر متغیرها و انواع داده‌ها Variablenwerte und Datentypen

• عملگرها: ۱. عملگرهای تخصیص Die Operatoren: I. Zuweisungsoperatoren

• عملگرها: ۲. عملگرهای مقایسه‌ای Die Operatoren. II. Vergleichsoperatoren

• عملگرها: ۳. عملگرهای منطقی Die Operatoren: III. Logische Operatoren

• توابع به طور کلی (بخش اول) Funktionen allgemein (Teil 1)

• توابع به طور کلی (بخش دوم) Funktionen allgemein (Teil 2)

• متدها (توابع وابسته به شیء) Methoden (objektgebundene) Funktionen

• رویدادها: Event Handler، Event Target و Event Listener Events: Event Handler, Event Targets und Event Listener

• اشیاء (Objects) Objekte

• آرایه‌ها (بخش اول) Arrays (Teil 1)

• آرایه‌ها (بخش دوم) Arrays (Teil 2)

• حلقه‌ها (Loops): for و forEach Schleifen (loops): for und forEach

• متدهای متنوع آرایه (بخش اول): map, sort, filter, reduce... Diverse Array-Methoden (Teil 1): map, sort, filter, reduce...

• متدهای متنوع آرایه (بخش دوم): map, sort, filter, reduce... Diverse Array-Methoden (Teil 2): map, sort, filter, reduce...

• اشیاء خاص Besondere Objekte

• برنامه Hello World Hello World

• مقدمه: جذابیت‌های توسعه بازی! Intro: Das ist so toll an der Spieleentwicklung!

• CodeCombat: یادگیری کدنویسی به روش بازی CodeCombat: Spielerisch das Coden lernen

• مدل شیء سند (DOM) Das Document Object Model (DOM, engl. für Dokumenten-Objekt-Modell)

• نصب Visual Studio Code (VSCode) Installation von Visual Studio Code (kurz: VSCode)

• تنظیمات VS Code Setup VS Code

• ساختار فایل HTML (بخش اول) Der Aufbau der HTML-Datei (Teil 1)

• ساختار فایل HTML (بخش دوم) Der Aufbau der HTML-Datei (Teil 2)

• المان Canvas (بخش اول): ایجاد کانتکست و رنگ‌آمیزی Das Canvas-Element (Teil 1): Kontext erstellen und Canvas einfärben

• المان Canvas (بخش دوم): رسم مربع‌ها Das Canvas-Element (Teil 2): Vierecke zeichnen

• المان Canvas (بخش سوم): خطوط، مثلث‌ها و دایره‌ها Das Canvas-Element (Teil 3): Linien, Dreiecke, (Halb-)Kreise

• المان Canvas (بخش چهارم): تصاویر و متن Das Canvas-Element (Teil 4): Bilder und Schrift

• توابع بازگشتی، توابع Callback و دستورات If/Else (بخش اول) Rekursive Funktionen, Callback-Funktionen und If/Else-Anweisungen (Teil 1)

• توابع بازگشتی، توابع Callback و دستورات If/Else (بخش دوم) Rekursive Funktionen, Callback-Funktionen und If/Else-Anweisungen (Teil 2)

• تفاوت Declaration و Expression؛ توابع ناشناس و Arrow Functions (بخش اول) Function declaration vs. expression; Anonyme Funktion, Pfeilfunktion (Teil 1)

• تفاوت Declaration و Expression؛ توابع ناشناس و Arrow Functions (بخش دوم) Function declaration vs. expression; Anonyme Funktion, Pfeilfunktion (Teil 2)

• کدهای HTML و فایل‌های تصویری HTML-Code und Bild-Dateien

• رسم و تغییر اندازه تصاویر در Canvas (بخش اول) Bilder auf den Canvas zeichnen und skalieren (Teil 1)

• رسم و تغییر اندازه تصاویر در Canvas (بخش دوم) Bilder auf den Canvas zeichnen und skalieren (Teil 2)

• تصاویر متحرک: انیمیشن‌ها (بخش اول) Bewegte Bilder: Animationen (Teil 1)

• تصاویر متحرک: انیمیشن‌ها (بخش دوم) Bewegte Bilder: Animationen (Teil 2)

• تصاویر متحرک: انیمیشن‌ها (بخش سوم) Bewegte Bilder: Animationen (Teil 3)

• کنترل پرنده با Event Handlerها (بخش اول) Den Vogel lenken mit Event Handlers (Teil 1)

• کنترل پرنده با Event Handlerها (بخش دوم) Den Vogel lenken mit Event Handlers (Teil 2)

• منطق برخورد: پرنده در مقابل لوله‌ها (بخش اول) Die Kollisionslogik: Vogel vs. Rohre (Teil 1)

• منطق برخورد: پرنده در مقابل لوله‌ها (بخش دوم) Die Kollisionslogik: Vogel vs. Rohre (Teil 2)

• خداحافظی و نکات پایانی Tschüß & Tipps