آموزش HTML CSS و جاوا اسکریپت برای مبتدیان - دوره طراحی وب [ویدئو]

سرفصل ها و درس ها

مقدمه ای بر توسعه وب و طراحی وب Introduction to Web Development and Web Design

• مقدمه ای بر توسعه وب Introduction to Web Development

• نحوه استفاده از این دوره How to Use This Course

بخش دوره HTML را بیاموزید Learn HTML Course Section

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

• آشنایی با HTML Getting to Know HTML

• عنصر چیست What is an Element

• ساختار صفحه HTML HTML Page Structure

• فراداده HTML HTML Metadata

• HTML Doctype HTML Doctype

• سعی کنید صفحه شاخص بسازید Try to Make Index Page

• قالب بندی عنصر HTML Element Formatting HTML

• سرفصل های HTML HTML Headings

• برچسب های خود بسته شونده Self-Closing Tags

• تمرین HTML شماره 2 HTML Exercise #2

• نظرات HTML HTML Comments

• متن از پیش فرمت شده Preformatted Text

• موجودیت های HTML HTML Entities

• قالب بندی متن HTML HTML Text Formatting

• بیشتر قالب بندی متن HTML More HTML Text Formatting

• قالب بندی متن را تمرین کنید Practice Text Formatting

• Divs و Spans برای سازماندهی محتوا Divs and Spans to Organize Content

• عناصر معنایی HTML5 HTML5 Semantic Elements

• تمرین 3: عناصر معنایی HTML5 Exercise 3: HTML5 Semantic Elements

• محتوای جایگیر Placeholder Content

• برچسب لنگر هایپرلینک ها Hyperlinks Anchor Tag

• سعی کنید یک صفحه بسازید Try to Build a Page

• افزودن تصاویر به صفحه شما Adding Images to Your Page

• تمرین 4: تصاویر Exercise 4: Images

• لیست های HTML HTML Lists

• تمرین 5: اضافه کردن لیست ها Exercise 5: Adding Lists

• تمرین 6: اولین وب سایت را بازسازی کنید Exercise 6: Rebuild the First Website

• تمرین 7: لیست های تو در تو Exercise 7: Nested Lists

• جداول HTML HTML Tables

• جداول HTML با سبک HTML Tables with Style

• فرم های HTML HTML Forms

• یک فرم تماس ایجاد کنید Create a Contact Form

• گزینه های فرم HTML HTML Form Options

• ارسال فرم Form Submission

• انواع ورودی بیشتر HTML5 More Input Types HTML5

• بیشتر با فرم های HTML5 More with HTML5 Forms

• مجموعه فیلد فرم HTML HTML Form Fieldset

• تمرین 9: تمرین فرم Exercise 9: Form Practice

• آی فریم های HTML HTML iframes

• تمرین شماره 10: یک سایت بسازید Exercise #10: Build a Site

بخش CSS CSS Section

• مقدمه ای بر CSS Introduction to CSS.

• CSS چیست What is CSS

• مبانی CSS Basics of CSS

• سبک درون خطی CSS CSS Inline Style

• استایل تگ CSS CSS Style Tag Styling

• ایجاد و استفاده از فایل CSS Creating and Using CSS File

• انتخاب CSS و کلاس ها CSS Selection and Classes

• رنگ های CSS CSS Colors.

• ویژگی پس زمینه CSS CSS Background Property

• ویژگی نمایش CSS CSS Display Property

• CSS برای موارد فهرست CSS for List Items

• تمرین شماره 1 CSS: به یک وب سایت ساده سبک دهید CSS Exercise #1: Style a Simple Website

• معیارها و ویژگی های CSS Measures and Properties of CSS

• CSS Divs and Spans CSS Divs and Spans

• یک ظاهر طراحی CSS متن Styling Text CSS

• خانواده فونت CSS CSS Font Family

• فونت های گوگل CSS Google Fonts CSS

• تمرین شماره 2 CSS CSS Exercise #2

• تصاویر شناور CSS CSS Floats Images

• عناصر شناور CSS CSS Float Elements

• مدل جعبه CSS CSS Box Model

• تمرین 3: CSS Exercise 3: CSS

• تمرین 3: راه حل Exercise 3: Solution

• طرح کلی CSS CSS Outline

• موقعیت CSS CSS Position

• تمرین شماره 4: شبکه تصویر Exercise #4: Image Grid

• سرگرمی CSS با هایپرلینک CSS Fun with Hyperlinks

• کلاس های شبه CSS CSS Pseudo Classes

• CSS و جداول CSS and Tables

• سرریز CSS و MaxWidth CSS Overflow and MaxWidth

• ترازهای عناصر CSS CSS Element Alignments

• پروژه وب سایت قسمت 1 Website Project Part 1

• پروژه وب سایت قسمت 2 Website Project Part 2

• پروژه وب سایت قسمت 3 Website Project Part 3

آموزش بخش جاوا اسکریپت Learn JavaScript Section

• به جاوا اسکریپت خوش آمدید Welcome to JavaScript

• جاوا اسکریپت بنویس Write JavaScript

• عنصر HTML را به روز کنید Update HTML Element

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

• متغیرهای جاوا اسکریپت JavaScript Variables

• متغیرهای جاوا اسکریپت در عمل JavaScript Variables in Action

• جاوا اسکریپت آن را امتحان کنید، تمرین شماره 1 JavaScript Try it, Exercise #1

• اپراتورها و واگذاری ها Operators and Assignments

• توابع جاوا اسکریپت JavaScript Functions

• تمرین شماره 2 جاوا اسکریپت: تابع JavaScript Exercise #2: Function

• r به توابع نگاه کنید r Look at Functions

• اشیاء جاوا اسکریپت JavaScript Objects

• تمرین شماره 3 جاوا اسکریپت: 3 شی JavaScript #3 Exercise: 3 Objects

• آرایه های جاوا اسکریپت JavaScript Arrays

• روش های آرایه Array Methods

• بیانیه های شرط جاوا اسکریپت Condition Statements JavaScript

• ترکیب با توابع Combine with Functions

• سوئیچ جاوا اسکریپت JavaScript Switch

• حلقه های جاوا اسکریپت JavaScript Loops

• روش های رشته جاوا اسکریپت JavaScript String Methods

• جاوا اسکریپت ES6 ES6 JavaScript

• مدل شیء سند Document Object Model

• جاوا اسکریپت شنوندگان رویداد Eventlisteners JavaScript

• تمرین شماره 4 جاوا اسکریپت: تمرین بررسی رویداد JavaScript Exercise #4: Event Checker Exercise

مدل شی سند جاوا اسکریپت JavaScript Document Object Model

• مقدمه ای بر جاوا اسکریپت DOM Introduction to JavaScript DOM

• DOM چیست؟ What is the DOM

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

• انتخاب جاوا اسکریپت DOM JavaScript DOM Selection

• دستکاری متن عنصر Element Text Manipulation

• تغییر کلاس های DOM Change Classes DOM

• تغییر سبک DOM Change Styles DOM

• دستکاری ویژگی عنصر Element Attribute Manipulation

• رویدادهای تعاملی DOM Interactive DOM Events

• Multiple Elements را انتخاب کنید Select Multiple Elements

• رویدادهای کلیدی KeyPress Events.

• رویدادهای ماوس جاوا اسکریپت JavaScript Mouse Events

• JavaScript DOM عناصر خود را ایجاد کنید JavaScript DOM Create Your Own Elements

• شنوندگان رویداد به عناصر جدید Event listeners to New elements

• ایجاد لیست پویا Create Dynamic List

• فهرست ورودی تمرین پروژه: عنصر جدید اضافه کنید List Project Exercise Input: Add New Element

• پاداش پروژه: اضافه کردن ارزش شی Project Bonus: Adding Object Value

جاوا اسکریپت JSON و AJAX JavaScript JSON and AJAX

• مقدمه ای بر JSON Introduction to JSON

• JSON چیست؟ What is JSON

• JSON به عنوان داده JSON as Data

• راه حل ایجاد JSON Solution Create JSON

• جزئیات JSON JSON Details

• راه حل: خروجی JSON به HTML Solution: Output JSON to HTML

• آرایه های اشیاء جاوا اسکریپت JavaScript Arrays of Objects

• اشیاء آرایه راه حل جاوا اسکریپت JavaScript Solution Array Objects

• داده های شی حلقه جاوا اسکریپت JavaScript Loop Object Data

• Solution Loop Object Data Solution Loop Object Data

• جاوا اسکریپت افزودن به شی JavaScript Add to Object

• روش های JSON جاوا اسکریپت JavaScript JSON methods

• ارزش‌های ذخیره‌سازی محلی Local Storage Values

• راه حل: محل ذخیره سازی Solution: Local Storage

• واکشی جاوا اسکریپت JavaScript Fetch

• راه حل: واکشی جاوا اسکریپت. Solution: JavaScript Fetch.

• اختصار گرفتن خطاها Catching Errors Shorthand

• JSON با چندین آیتم JSON with Multiple Items

• راه حل برای هر JSON Solution forEach JSON

• نتیجه گیری JSON JSON Conclusion

جی کوئری را یاد بگیرید Learn jQuery

• jQuery مقدمه بخش jQuery Introduction to the Section

• چرا جی کوئری و چیست؟ Why jQuery and What is it

• انتخاب با جی کوئری Selecting with jQuery

• سرگرمی جی کوئری با استایلینگ jQuery Fun with Styling

• محتوای جی کوئری jQuery Content

• ویژگی های جی کوئری jQuery Attributes

• ویژگی های تصویر و فرم Image and Form Attributes

• jQuery روی رویدادها کلیک کنید jQuery Click Events

• شنونده رویداد آماده سند Document Ready Event Listener

• رویدادهای ماوس جی کوئری jQuery Mouse Events

• رویدادهای صفحه کلید jQuery Keyboard Events jQuery

• jQuery در شنونده رویداد jQuery on Event listener

• جلوه های jQuery Hide Show jQuery Effects Hide Show

• جلوه محو شدن جی کوئری jQuery Fade Effect

• جلوه اسلاید جی کوئری jQuery Slide Effect

• jQuery Animate Effect jQuery Animate Effect

• جی کوئری AJAX jQuery AJAX

• بار و خطای CORS Load and CORS error

• AJAX و داده های فرم AJAX and Form Data

• آیتم های متعدد در خروجی پاسخ Multiple Items in Response Output

• عنصر را انتخاب کنید Select Element

• دوره تمرین jQuery Course jQuery Exercise

طراحی و توسعه وب: پرسش ها، پاسخ ها و قطعه کد Web Design and Development: Questions, Answers, and Code Snippets

• جاوا اسکریپت پاپ آپ مدال JavaScript PopUp Modal

• نمونه باکس مدل و اندازه جعبه حاشیه Box Model and Border Box Sizing Example

• نحوه انتخاب عناصر پویا از صفحه با استفاده از QuerySelectorAll How to Select Dynamic Elements from the Page Using QuerySelectorAll

• عناصر صفحه را به صورت پویا به DOM اضافه کنید شنوندگان رویداد، همه عناصر منطبق را اضافه کنید. Add Page Elements Dynamically to DOM add Event Listeners, All Matching Elements.