آموزش توسعه وب FrontEnd و طراحی HTML CSS JS را کامل کنید

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

توسعه وب مدرن مقدمه ای بر محتوای دوره Modern Web Development introduction to course content

• مقدمه توسعه وب سایت مدرن Modern Website Development Introduction

• توسعه دهنده وب مدرن نگاهی پنهانی Modern Web developer Sneak peek

• نکات و منابع دوره Course Tips and Resources

اصول HTML وب سایت را بیاموزید Learn HTML fundamentals of website

• مقدمه دوره HTML CSS HTML CSS Course Introduction

• شروع کار با HTML Getting Started with HTML

• در مورد HTML بدانید HTML چیست Learn about HTML what is HTML

• منابع resources

• یک قالب HTML ایجاد کنید تا چندین بار از آن استفاده کرده و مجدداً استفاده کنید Create an HTML template to use and reuse multiple times

• نظرات HTML و اطلاعات متا HTML Comments and Meta Information

• پاراگراف های HTML سرفصل ها را شکست می دهد HTML Paragraphs LineBreaks Headings

• اطلاعات متا و فضای خالی در فایل های HTML Meta information and whitespace in HTML files

• کار با ویژگی ها و تصاویر HTML Working with HTML attributes and images

• انواع لیست HTML List types HTML

• کار با جداول HTML Working with Tables HTML

• اتصال صفحات وب با لینک ها Connecting webpages with hyperlinks

• منابع کد منبع Source Code resources

• نحوه ایجاد یک فرم اولیه در HTML How to create a basic form in HTML

• انواع ورودی HTML5 HTML5 Input Types

• ایجاد فرم های شگفت انگیز در HTML Creating amazing forms in HTML

• فرم های وب HTML5 HTML5 Web forms

• کد منبع HTML HTML Source Code

• کد HTML را تمرین کنید Practice HTML Code

• بخش بندی محتوای HTML5 HTML5 Content Sectioning

اصول CSS توسعه وب سایت را بیاموزید Learn CSS fundamentals of website development

• چگونه CSS و جاوا اسکریپت را به صفحات HTML اضافه کنیم How to add CSS and JavaScript to HTML pages

• کار با Style Colors و تراز متن CSS Working with Style Colors and text alignment CSS

• کد منبع افزودن CSS و جاوا اسکریپت Source Code adding CSS and JavaScript

• گزینه های CSS Background Styling CSS Background Styling options

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

• جعبه CSS Model Borders CSS box Model Borders

• کد منبع HTML Source Code HTML

• کوتاه نویسی بالشتک مدل CSS Box CSS Box model padding shorthand

• حاشیه های مدل جعبه CSS CSS Box Model Margins

• کد منبع CSS Source Code CSS

• CSS Shorthand در مقابل Long Declarations PX EM and Percentage CSS Shorthand vs Long Declarations PX EM and Percentage

• مدل جعبه منابع Resources Box Model

• گزینه های نمایش CSS CSS display options

• عناصر موقعیت CSS CSS position elements

• کد منبع گزینه های نمایش و موقعیت Display and Position Options Source Code

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

• عناصر شبه CSS CSS pseudo Elements

• کد منبع شبه Source Code Pseudo

• انتخابگرهای چندگانه ویژگی های یکسان Multiple Selectors Same Properties

• تودرتو انتخابگر CSS CSS Selector Nesting

• CSS CSS را پاک کنید و صفحه وب ما را متحول کنید CSS Clean up CSS and transform our webpage

• تبدیل یک لیست به نوار ناوبری Transform a list into a navigation bar

• 2 ستون در قسمت محتوای اصلی ایجاد کنید Create 2 columns in main content area

مراحل بعدی CSS CSS Next Steps

• CSS یک ظاهر طراحی بیشتر از صفحه HTML CSS more styling of HTML page

• آن را به وب سایت CSS واکنش گرا تبدیل کنید Make it responsive CSS website

• اضافه کردن فونت های گوگل Adding Google Fonts

• کد منبع وب سایت Website Source Code

• منابع CSS CSS resources

جاوا اسکریپت محتوای پویا تعاملی ایجاد می کند JavaScript creating interactive Dynamic Content

• منابع دوره مقدماتی جاوا اسکریپت JavaScript Introduction course resources

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

• چگونه جاوا اسکریپت را به صفحه وب خود اضافه کنیم How to add JavaScript to your webpage

• نحو جاوا اسکریپت نحوه نوشتن کد Syntax of JavaScript how to write code

• هشدارهای نظرات کد منبع Source Code Comments alerts

• اشکال زدایی پیام های کنسول ابزارهای توسعه دهنده در جاوا اسکریپت Debugging Dev tools console messages in JavaScript

نوشتن کد جاوا اسکریپت Writing JavaScript code

• انواع داده متغیرهای جاوا اسکریپت JavaScript Variables Data Types

• متغیرهای کد منبع Source Code Variables

• جاوا اسکریپت آرایه ها چگونه کار می کنند JavaScript How arrays work

• جاوا اسکریپت با آرایه ها کار می کند JavaScript working with Arrays

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

• آرایه های جاوا اسکریپت به صورت رشته ها و برش ها JavaScript Arrays as Strings and Slices

• آرایه های کد منبع Source Code Arrays

• جاوا اسکریپت کار با اشیا JavaScript Working with Objects

• اشیاء سازنده جاوا اسکریپت JavaScript Constructor Objects

• اشیاء کد منبع Source Code Objects

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

• جاوا اسکریپت با توابع کار می کند JavaScript working with Functions

• توابع جاوا اسکریپت در عمل JavaScript Functions in Action

• جاوا اسکریپت ارزش دامنه جهانی در توابع JavaScript Global Scope Values in Functions

• توابع کد منبع Source Code Functions

جاوا اسکریپت در عمل پویا و تعاملی می شود JavaScript in Action get Dynamic and Interactive

• DOM چیست؟ What is the DOM

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

• JavaScript getElementById JavaScript getElementById

• جاوا اسکریپت DOM عناصر را از طریق Class و Tags انتخاب می کند JavaScript DOM select elements via Class and Tags

• داده های Document Object را جاوا اسکریپت کنید JavaScript the Document Object data

• ویژگی های استایل به روز رسانی جاوا اسکریپت با استفاده از DOM JavaScript Update Styling attributes using the DOM

• کد منبع DOM Source Code DOM

• جاوا اسکریپت بر روی DOM کلیک کنید JavaScript DOM onclick

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

• رویدادهای کد منبع Source Code Events

• JavaScript addEventListener JavaScript addEventListener

• منبع AddEventlistener Source AddEventlistener

• جاوا اسکریپت Queryselectorall شنوندگان رویداد چندین عنصر را انتخاب می کند JavaScript Queryselectorall multiple elements event listeners

• گزینه های انتخاب عنصر بیشتر جاوا اسکریپت JavaScript More Element Selection options

• کد منبع انتخاب چند عنصر Source Code Multiple Element Selection

• جاوا اسکریپت ایجاد عناصر جدید JavaScript Creating New Elements

• کد منبع ایجاد عناصر Source Code Create Elements

• DOM و Form Create Form Validation DOM and Form Create Form Validation

• اعتبار سنجی فرم کد منبع Source Code Form Validation

اصول جاوا اسکریپت JavaScript fundamentals

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

• معرفی اپراتورهای جاوا اسکریپت JavaScript Operators Introduction

• اپراتورهای جاوا اسکریپت رنگ های ردیف متناوب را افزایش می دهند JavaScript Operators increment alternating row colors

• عملگر سه تایی شرطی جاوا اسکریپت JavaScript Conditional ternary operator

• عملگرهای منطقی جاوا اسکریپت JavaScript Logical operators

• اپراتورهای کد منبع Source Code Operators

• روش ریاضی جاوا اسکریپت JavaScript Math Method

• روش تاریخ جاوا اسکریپت JavaScript Date Method

• کد منبع روش های مفید Source Code Useful Methods

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

• جاوا اسکریپت با شرایط کار می کند JavaScript working with Conditions

• شرایط کد منبع Source Code Conditions

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

• سوئیچ کد منبع Source Code Switch

• JavaScript while Loop JavaScript While Loop

• حلقه Do JavaScript JavaScript Do loop

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

• حلقه های کد منبع Source Code Loops

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

• معرفی جاوا اسکریپت به JSON JavaScript introduction to JSON

• چند شی جاوا اسکریپت JavaScript Multiple Objects

• اتصال جاوا اسکریپت AJAX JavaScript AJAX connection

• جاوا اسکریپت داده های JSON را با استفاده از AJAX دریافت کنید JavaScript Get JSON data using AJAX

• داده های فایل JSON خارجی جاوا اسکریپت با استفاده از AJAX JavaScript External JSON file Data using AJAX

• کد منبع AJAX Source Code AJAX

• جاوا اسکریپت AJAX جزئیات بیشتر JavaScript AJAX more details

• تعامل با سرور جاوا اسکریپت AJAX JavaScript AJAX server interaction

• جاوا اسکریپت AJAX داده ها را به سرور ارسال می کند JavaScript AJAX send data to server

• جاوا اسکریپت AJAX داده ها را به سرور ارسال می کند JavaScript AJAX post data to server

• کد منبع AJAX POST Source Code AJAX POST

• به روز رسانی فرم به چالش ورودی های متعدد update form to multiple inputs challenge

• کد منبع چندین فیلد Source Code Multiple fields

سوالات و پاسخ های سریع جاوا اسکریپت با مثال های کدنویسی و تکه های کد JavaScript Quick Questions and Answer with Coding Examples and code snippets

• کد منبع جاوا اسکریپت Stringify LocalStorage Source Code JavaScript Stringify LocalStorage

• حذف کننده فضای خالی رشته String WhiteSpace Remover

• مثال سازنده شی Object Constructor Example

• تصادفی ریاضی و تصادفی آرایه ها. Math Random and Arrays Random.

• آرایه جاوا اسکریپت حذف موارد JavaScript Array Remove Items

• عبارت تابع بلافاصله فراخوانده شده است Immediately Invoked Function Expression

• تبدیل خودکار نوع داده Data Automatic Type Conversion

• سریال سازی و سریال زدایی جاوا اسکریپت JavaScript Serialization and deserialization

• روش نقشه جاوا اسکریپت JavaScript Map Method

• شرایط منطقی جاوا اسکریپت JavaScript Logical Condition

• آرایه جاوا اسکریپت شامل روش JavaScript Array Includes Method

• روش فیلتر آرایه جاوا اسکریپت JavaScript Array Filter Method

• جاوا اسکریپت Stringify LocalStorage JavaScript Stringify LocalStorage

• با استفاده از جاوا اسکریپت یک تایمر شمارش معکوس با فواصل زمانی ایجاد کنید Create a Count Down timer with intervals using JavaScript

• بسته شدن جاوا اسکریپت JavaScript Closures

jQuery برای کدنویسی سریعتر jQuery for quicker coding

• مقدمه ای بر جی کوئری Introduction to jQuery

• چگونه jQuery را به صفحات وب خود اضافه کنیم How to add jQuery to your webpages

• منابع دوره jquery را به صفحه وب خود اضافه کنید Course resources Add jquery into your webpage

• منابع دوره jQuery jQuery Course Resources

• DOM در جاوا اسکریپت چیست؟ what is the DOM in JavaScript

• درباره DOM بیاموزید Learn about the DOM

• اطلاعات مدل شی سند از طریق مرورگر Document Object Model information via the browser

jQUERY آسان AJAX jQUERY easy AJAX

• نحوه نوشتن کد جی کوئری How to write jQuery code

• jQuery ابتدا کد جی کوئری را بررسی کنید jQuery Check First jQuery Code

• کد منبع دوره jQuery 1 Course Source Code jQuery 1

• از jQuery برای به روز رسانی محتوای صفحه وب استفاده کنید Use jQuery to update web page content

• همه چیز درباره انتخابگرهای جی کوئری عناصر را از صفحه وب شما انتخاب می کنند All about jquery selectors pick elements from your webpage

• دستکاری صفحه وب jQuery و تعامل محتوا jQuery Web page manipulation and content interaction

• کد منبع برای وب سایت مورد استفاده در این دوره Source Code for Website used within this course

• استفاده از Every و THIS برای دریافت محتویات عنصر Using Each and THIS to get element contents

• به روز رسانی عناصر قبل از اضافه کردن Prepend Updating Elements Before After Prepend Append

• نمونه به روز رسانی عناصر Sample of Updating Elements

• اصلاح عناصر خالی حذف Modify Elements Empty Remove

• هر حلقه پیشرفته each loop advanced

• کد منبع برای jQuery مثال Source code for jQuery example

رویدادهای جی کوئری jQuery Events

• شنوندگان رویداد صفحات وب تعاملی Event listeners Interactive web pages

• شنوندگان رویداد jQuery روی رویدادها در مقابل معمولی کلیک کنید jQuery event listeners Click events shorthand vs regular

• چالش jQuery 1 لیست تعاملی ایجاد کنید jQuery Challenge 1 create interactive list

• کد منبع برای چالش Source Code for Challenge

• راه حل jQuery برای چالش 1 jQuery Solution to Challenge 1

• رویدادهای متداول ماوس جی کوئری Common jQuery Mouse events

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

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

• رویدادهای کد منبع Source Code Events

• رویدادهای جی کوئری را شکل دهید Form Events jQuery

• نسخه نمایشی کد منبع Source Code Demo

• چالش فرم جی کوئری ۲ jQuery Form Challenge 2

• کد منبع برای چالش Source Code for Challenge

• بررسی فیلد فرم راه حل چالش jQuery 2 jQuery Challenge 2 Solution Form Field Check

• کد منبع برای چالش Source Code for Challenge

• کد منبع برای چالش Source Code for Challenge

پیمایش جی کوئری jQuery Traversing

• قدرت jQuery Find jQuery power of Find

• کد منبع Source Code

• انتخاب والدین و فرزندان Parents and Children selection

• انتخاب بیشتر jQuery از حلقه های کودکان jQuery more selection of Children looping

• jQuerry Traversing Next و خواهر و برادر jQuerry Traversing Next and siblings

• کد منبع آن را خودتان امتحان کنید Source Code try it Yourself

• پیمودن اولین انتخاب آخر Traversing First Last Selection

• کد منبع Source Code

• فیلترهای جی کوئری برای انتخاب jQuery Filters for selection

استایلینگ جی کوئری jQuery Styling

• جی کوئری مقادیر CSS را اضافه کنید jQuery Add CSS values

• jQuery چگونه با کلاس ها کار کنیم jQuery howto work with classes

• jQuery CSS حذف کلاس jQuery CSS remove Class

• چالش hasclass تغییر کلاس hasclass challenge Toggle class

• کد منبع چالش چالش فهرست Source Code Challenge Toggle list

• فهرست کد منبع List Source Code

• راه حل چالش jQuery گزینه های فهرست پویا را تغییر دهید jQuery challenge solution Toggle Dynamic List Items

• کد منبع لیست پویا Dynamic List Source Code

• محتوای jQuery Attribute و به روز رسانی jQuery Attribute Content and update

• کد منبع ویژگی jQuery jQuery Attribute Source Code

جلوه ها و انیمیشن های jQUERY jQUERY Effects and Animations

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

• jQuery Toggle Element jQuery Toggle Element

• jQuery Callbacks jQuery Callbacks

• کد منبع پنهان نمایش Source Code Hide Show

• محو شدن عناصر جی کوئری jQuery Fading Elements

• کد منبع محو شدن جی کوئری jQuery Fading Source Code

• jQuery Element Sliding jQuery Element Sliding

• اسلاید کد منبع Source Code Slide

• عناصر خود را با jQuery متحرک کنید animate your Elements with jQuery

• کد منبع jQuery Animate jQuery Animate Source Code

جی کوئری AJAX jQuery AJAX

• jQuery و AJAX jQuery and AJAX

• بارگیری ساده محتوا به عنصر از طریق AJAX Simple loading content to element via AJAX

• جی کوئری AJAX دریافت کنید jQuery AJAX get

• جی کوئری داده های JSON را از فایل خارجی دریافت می کند jQuery getJSON data from external file

• دریافت بار کد منبع jQuery AJAX Get Load Source Code jQuery AJAX

• jQuery با داده های POST کار می کند jQuery working with POST data

• روش jQuery AJAX jQuery AJAX method

• منابع دوره jQuery jQuery Course Resources

HTML CSS و jQuery را با هم ترکیب کنید Bringing it together HTML CSS and jQuery

• طرح درس HTML CSS HTML CSS Lesson Plan

• jQuery Keyup محتوای مطابقت در فیلد فرم jQuery Keyup Content match in form field

• کد منبع Source Code

• فرم انتخاب مقدار بازگشتی در تغییر Form Select return value on change

• پاسخ رویداد jQuery AJAX از سرور jQuery Event AJAX response from server

• jQuery و دکمه های رادیویی و چک باکس ها jQuery and radio buttons and check boxes

• کد منبع Source Code

• راه اندازی تکمیل خودکار رابط کاربری جی کوئری jQuery UI autocomplete setup

• jQuery UI از فایل Dynamic JSON تکمیل می شود jQuery UI autocomplete from Dynamic JSON file

• کد منبع Source Code

قطعات کد و پروژه های سریع از بخش پرسش و پاسخ Code Snippets and Quick Projects from Q&A section

• نحوه ایجاد یک پنجره مودال پاپ آپ جاوا اسکریپت How to create a JavaScript popup modal window

• کد منبع Source Code

• کد منبع Source Code

• CSS Flexbox شروع به کار نمایش فلکس فلکس روپ و فلکس جهت CSS Flexbox Getting started display flex flex wrap and flex Direction

• عناصر تراز Flexbox CSS CSS Flexbox align elements

• ویژگی های کودکان CSS Flexbox CSS Flexbox children properties

• CSS Flexbox شروع به کار صفحه نمایش flex flex wrap flex جهت کد مثال CSS Flexbox Getting started display flex flex wrap flex Direction Code Example

• رمزگذاری رشته با جاوا اسکریپت String encryption with JavaScript

• کد منبع برای مثال رمزگذاری رشته Source code for String Encryption example

• مثال کدنویسی ویژگی Zindex CSS Zindex CSS property coding example

سوالات HTML دانش خود را در مورد عناصر HTML تست کنید HTML Questions Test your Knowledge on HTML Elements

• مقدمه ای بر سوالات HTML5 Introduction to HTML5 Questions

• سوالات HTML5 منابع توسعه دهنده وب HTML5 Questions Web Dev Resources

• سوالات HTML5 1-5 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 1-5 test your knowledge of HTML with Video Answers

• HTML5 سوالات 6-10 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 6-10 test your knowledge of HTML with Video Answers

• سوالات 11-15 HTML5 دانش خود را از HTML با پاسخ های ویدئویی آزمایش کنید HTML5 Questions 11-15 test your knowledge of HTML with Video Answers

• سوالات 16-20 HTML5 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 16-20 test your knowledge of HTML with Video Answers

• سوالات HTML5 21-25 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 21-25 test your knowledge of HTML with Video Answers

• سوالات 26-30 HTML5 دانش خود را از HTML با پاسخ های ویدئویی آزمایش کنید HTML5 Questions 26-30 test your knowledge of HTML with Video Answers

• سوالات HTML5 31-35 دانش خود را از HTML با پاسخ های ویدئویی آزمایش کنید HTML5 Questions 31-35 test your knowledge of HTML with Video Answers

• سوالات HTML5 36-40 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 36-40 test your knowledge of HTML with Video Answers

• HTML5 سوالات 41-45 دانش خود را از HTML با پاسخ های ویدئویی آزمایش کنید HTML5 Questions 41-45 test your knowledge of HTML with Video Answers

• HTML5 سوالات 46-50 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 46-50 test your knowledge of HTML with Video Answers

• سوالات HTML5 51-55 دانش خود را از HTML با پاسخ های ویدئویی آزمایش کنید HTML5 Questions 51-55 test your knowledge of HTML with Video Answers

• HTML5 سوالات 56-60 دانش خود را از HTML با پاسخ های ویدئویی آزمایش می کند HTML5 Questions 56-60 test your knowledge of HTML with Video Answers

• HTML5 سوالات 61-65 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 61-65 test your knowledge of HTML with Video Answers

• سوالات HTML5 66-70 دانش خود را از HTML با پاسخ های ویدئویی آزمایش می کنند HTML5 Questions 66-70 test your knowledge of HTML with Video Answers

• HTML5 سوالات 71-75 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 71-75 test your knowledge of HTML with Video Answers

• HTML5 سوالات 76-80 دانش خود را از HTML با پاسخ های ویدئویی آزمایش می کند HTML5 Questions 76-80 test your knowledge of HTML with Video Answers

• سوالات HTML5 81-85 دانش خود را از HTML با پاسخ های ویدئویی آزمایش کنید HTML5 Questions 81-85 test your knowledge of HTML with Video Answers

• سوالات HTML5 86-90 دانش خود را از HTML با پاسخ های ویدئویی آزمایش می کنند HTML5 Questions 86-90 test your knowledge of HTML with Video Answers

• سوالات HTML5 91-95 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 91-95 test your knowledge of HTML with Video Answers

• سوالات HTML5 96-100 دانش خود را از HTML با پاسخ های ویدئویی تست کنید HTML5 Questions 96-100 test your knowledge of HTML with Video Answers

• سخنرانی پاداش Bonus Lecture