آموزش HTML، CSS و جاوااسکریپت از طریق بازی‌سازی - آخرین آپدیت

HTML و CSS HTML and CSS

• مرور کلی دوره Course Overview

• مقدمه، W3C و بررسی HTML صفحه وب Introduction, W3C and Looking at Web Page HTML

• ساختار پایه HTML Basic HTML Structure

• هایپرلینک‌ها و متن Hyperlinks and Text

• لیست‌ها، جدول‌ها، کاراکترهای خاص و تصاویر Lists, Tables, Special Characters and Images

• اعتبارسنج W3C W3C Validator

• تصاویر در مرورگرها Images in Browsers

• مقدمه استایل‌دهی Introduction

• قوانین استایل و صفحات استایل (Style Sheets) Style Rules and Style Sheets

• ویژگی‌های فونت و رنگ در CSS CSS Font and Colour Properties

• ویژگی‌های پاراگراف، باکس و حاشیه در CSS CSS Paragraph, Box and Border Properties

• استفاده از ویژگی‌های Id و Class Using the Id Attribute and the Class Attribute

انیمیشن‌های CSS و جاوااسکریپت CSS Animations and JavaScript

• انیمیشن‌های CSS CSS Animations

• استفاده از جاوااسکریپت در HTML و متغیرها Using JavaScript in HTML and Variables

• رویدادهای پایه و اعداد تصادفی Basic Events and Random Numbers

• DOM چیست؟ What is the DOM?

• گره‌های DOM DOM Nodes

• یافتن و تغییر یک المان در DOM Finding and Changing an Element in the DOM

• پیمایش در DOM و دریافت المان‌ها با نام تگ Traversing the DOM and Getting Elements Using Tag Name

• تنظیم و پاک‌سازی تایمرها Setting and Clearing Timers

• ساخت یک تایمر معکوس Making a Countdown Timer

jQuery و انتخابگرهای CSS jQuery and CSS Selectors

• استفاده از jQuery Using jQuery

• مثال HTML و استفاده از علامت $ The Example HTML and Using '$'

• انتخاب المان‌ها در jQuery Selecting Elements in jQuery

• خواندن و تغییر ویژگی‌ها و پراپرتی‌های CSS Reading and Changing Attributes and CSS Properties

• خواندن و تغییر محتوای المان Reading and Changing Element Content

• استفاده از انتخابگرهای متعدد CSS Using Multiple CSS Selectors

• انتخاب المان‌های زیرمجموعه یک جد و انتخاب فرزندان مستقیم Selecting Things Under an Ancestor and Selecting Immediate Children

• استفاده از شبه-کلاس‌های ساختاری Using Structural Pseudo Classes

• برنامه‌نویسی با استفاده از انتخابگرهای CSS Programming Using CSS Selectors

• رویداد Ready و رویداد Click The Ready Event and the Click Event

• نمایش و پنهان کردن المان‌ها با jQuery Showing and Hiding Things Using jQuery

SVG به همراه انیمیشن‌های CSS SVG with CSS Animations

• شروع به استفاده از SVG Starting to Use SVG

• رسم خطوط Drawing Lines

• رسم مستطیل‌ها Drawing Rectangles

• رسم دایره‌ها و ایجاد مسیرها (Paths) Drawing Circles and Creating Paths

• رسم متن و استفاده از سایر ویرایشگرها Drawing Text and Using Other Editors

• انیمیت کردن SVG Animating SVG

• استفاده از درصد در Keyframeها Using Percentage in Keyframes

• کنترل انیمیشن‌های CSS Controlling CSS Animations

• استفاده از رویدادهای انیمیشن Using Animation Events

• گروه‌بندی المان‌ها Grouping Things Together

• تعریف المان‌ها در ناحیه <def> در SVG Defining Things in the SVG <def>...</def> Area

• استفاده از گرادینت‌های خطی Using Linear Gradients

• استفاده از گرادینت‌های شعاعی Using Radial Gradients

ویژگی‌های پیشرفته‌تر جاوااسکریپت More JavaScript Features

• اعلان متغیرها Declaring Variables

• استفاده از آرایه‌ها در جاوااسکریپت Using JavaScript Arrays

• استفاده از آبجکت‌ها در جاوااسکریپت Using JavaScript Objects

• عملگر Spread The Spread Operator

• تجزیه ساختاری (Destructuring) آبجکت‌ها و آرایه‌ها Destructuring Objects and Arrays

• توابع به عنوان متغیر و توابع Arrow Functions as Variables and Arrow Functions

• Closure در جاوااسکریپت JavaScript Closure

• یک مثال ساده از Closure A Simple Closure Example

• توابع دارای وضعیت و مثال‌های Factory Function Functions with States and Function Factory Examples

• کار با فایل‌های جاوااسکریپت Working With JavaScript Files

• ساخت ماژول GameScore Building a GameScore Module

• استفاده از ماژول GameScore و IIFE Using the GameScore Module and IIFE

استفاده از HTML Canvas Using HTML Canvas

• مقدمه‌ای بر HTML Canvas Introduction to HTML Canvas

• رسم مستطیل‌ها و استفاده از استایل‌های Fill و Stroke Drawing Rectangles and, Using Fill and Stroke Styles

• رسم مسیرها با خطوط و دایره‌ها Drawing Paths with Lines and Circles

• افزودن تعامل (Interactivity) Adding Interactivity

• رسم متن و تصاویر Drawing Text and Images

• رسم سر ربات Drawing the Robot Head

• Sprite Sheet چیست؟ What is a Sprite Sheet?

• رسم Spriteها روی بوم (Canvas) Drawing Sprites on Canvas

• کار با انیمیشن‌ها Working With Animations

• ساخت انیمیشن‌های Sprite Making Sprite Animations

• زمان‌بندی انیمیشن Animation Timing

• استفاده از صوت در صفحات وب Using Audio on Web Pages