آموزش مقدمه ای بر فناوری های توسعه وب سایت

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

معرفی Introduction

• معرفی Introduction

• چرا توسعه وب را یاد بگیریم؟ Why learn Web Development?

راه اندازی محیط Environment Setup

• ابزارهای توسعه وب Web Development Tools

• کد ویژوال استودیو را نصب کنید Install Visual Studio Code

• برنامه های افزودنی توسعه توصیه شده Recommended Development Extensions

• Git و GitHub را راه اندازی کنید Setup Git and GitHub

• راه اندازی وب سایت پروژه فضای کاری Setup Website Project Workspace

نحو پایه HTML HTML Basic Syntax

• اولین صفحه HTML خود را بنویسید - متن و پیوندها Write Your First HTML Page - Text and Links

• برچسب‌های HTML بیشتر - تصاویر، فرم‌ها و فهرست‌ها را کاوش کنید Explore More HTML Tags - Images, Forms and Lists

• حتی بیشتر تگ های HTML - جداول، نظرات و سبک های درون خطی Even More HTML Tags - Tables, Comments and Inline Styles

HTML پایه Basic HTML

• HTML را کاوش کنید Explore HTML

• اولین سند HTML خود را بنویسید Write your first HTML Document

• اضافه کردن متن و لینک Adding Text and Links

• چندین صفحه HTML Multiple HTML Pages

• افزودن تصاویر Adding Images

• اضافه کردن لیست های مرتب و نامرتب Adding Ordered and Unordered Lists

• اضافه کردن یک جدول HTML Adding an HTML Table

• افزودن فرم HTML - قسمت 1 Adding an HTML Form - Part 1

• افزودن فرم HTML - قسمت 2 Adding an HTML Form - Part 2

• جاسازی محتوای خارجی Embedding External Content

• جاسازی محتوای رسانه ای (تصویری و صوتی) Embedding Media Content (Video and Audio)

• نظرات و استایل Comments and Styling

• به GitHub اضافه کنید Add to GitHub

• کد منبع بخش Section Source Code

برگه های سبک آبشاری Cascading Style Sheets

• مقدمه ای بر CSS - سبک های داخلی و داخلی و خارجی Introduction to CSS - Inline and Internal and External Stylesheets

• CSS چیست (Cascading Style Sheets) What is CSS (Cascading Style Sheets)

• CSS درون خطی Inline CSS

• CSS پیشرفته تر - کلاس ها، برچسب ها و انتخابگرهای شناسه More Advanced CSS - Classes, Tags and ID Selectors

• CSS داخلی Internal CSS

• کد منبع مرجع Reference Source Code

• استایل شیت های خارجی External Stylesheets

• معناشناسی HTML HTML Semantics

• طرح بندی غیر معنایی HTML - قسمت 1 HTML Non-Semantic Layout - Part 1

• چیدمان غیر معنایی HTML - قسمت 2 HTML Non-Semantic Layout - Part 2

• چیدمان و طراحی یکسان صفحه وب Consistent Web Page Layout and Design

• استفاده از کلاس ها Using Classes

• به GitHub اضافه کنید Add to GitHub

• کد منبع بخش Section Source Code

آشنایی با جاوا اسکریپت، جی کوئری و بوت استرپ Understanding JavaScript, jQuery and Bootstrap

• جاوا اسکریپت و کنسول مرورگر را کاوش کنید Explore JavaScript and the Browser Console

• بیانیه های جاوا اسکریپت و اعلان های متغیر JavaScript Statements and Variable Declarations

• عملیات محاسباتی جاوا اسکریپت JavaScript Arithmetic Operations

• بیانیه های تصمیم جاوا اسکریپت JavaScript Decision Statements

• بیانیه های تکرار جاوا اسکریپت JavaScript Repetition Statements

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

• متغیرها و دامنه جاوا اسکریپت JavaScript Variables and Scope

• جاوا اسکریپت و HTML DOM JavaScript and HTML DOM

• افزودن جاوا اسکریپت به وب سایت Adding JavaScript to Website

• با استفاده از جی کوئری Using jQuery

• مقدمه ای بر بوت استرپ 5 Introduction to Bootstrap 5

• کد منبع مرجع Reference Source Code

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

• جاوا اسکریپت چیست؟ What is JavaScript?

• جاوا اسکریپت و کنسول مرورگر را کاوش کنید Explore JavaScript and the Browser Console

• بیانیه های جاوا اسکریپت و اعلان های متغیر JavaScript Statements and Variable Declarations

• عملیات محاسباتی جاوا اسکریپت JavaScript Arithmetic Operations

• بیانیه های تصمیم جاوا اسکریپت JavaScript Decision Statements

• بیانیه های تکرار جاوا اسکریپت JavaScript Repetition Statements

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

• متغیرها و دامنه جاوا اسکریپت JavaScript Variables and Scope

• جاوا اسکریپت و HTML DOM JavaScript and HTML DOM

• جاوا اسکریپت در نحو HTML JavaScript in HTML Syntax

• افزودن جاوا اسکریپت به HTML - قسمت 1 Adding JavaScript to HTML - Part 1

• افزودن جاوا اسکریپت به HTML - قسمت 2 Adding JavaScript to HTML - Part 2

• جی کوئری چیست؟ What is jQuery?

• افزودن jQuery به وب سایت Adding jQuery to a Website

• جی کوئری در مقابل جاوا اسکریپت jQuery vs JavaScript

• به GitHub اضافه کنید Add to GitHub

• کد منبع بخش Section Source Code

وب سایت را با Netlify منتشر کنید Publish Website with Netlify

• اضافه کردن وب سایت به GitHub Add Website to GitHub

• وب سایت عمومی با Netlify ایجاد کنید Create Public Website with Netlify

توسعه وب با چارچوب بوت استرپ Web Development with the Bootstrap Framework

• بوت استرپ چیست؟ What is Bootstrap?

• اسناد Boostrap را کاوش کنید Explore Boostrap's Documentation

• اضافه کردن بوت استرپ به وب سایت شما Adding Bootstrap to your Website

• افزودن نوار ناوبری Boostrap و Layout - قسمت 1 Adding Boostrap Navbar and Layout - Part 1

• اضافه کردن Boostrap Navbar و Layout - قسمت 2 Adding Boostrap Navbar and Layout - Part 2

• جداول بوت استرپ Bootstrap Tables

• فرم های بوت استرپ Bootstrap Forms

• دکمه های بوت استرپ Bootstrap Buttons

• بوت استرپ چرخ فلک Bootstrap Carousel

• کارت های بوت استرپ و گرید Bootstrap Cards and Grid

• آکاردئون بوت استرپ Bootstrap Accordion

• وب سایت را پاکسازی کنید Clean Up Website

• ردیابی صفحه فعال - CSS + جاوا اسکریپت Tracking Active Page - CSS + JavaScript

• به GitHub اضافه کنید Add to GitHub

• کد منبع بخش Section Source Code

طراحی مجدد وب سایت با بوت استرپ 5 Redesign Website with Bootstrap 5

• صفحه اصلی را با اسلایدر و طرح بندی بوت استرپ دوباره طراحی کنید Redesign Home Page with Bootstrap Slider and Layout

• طراحی مجدد درباره صفحه با بوت استرپ گرید و دکمه ها Redesign About Page with Bootstrap Grid and Buttons

• طراحی مجدد صفحه تماس با فرم های بوت استرپ Redesign Contact Page with Bootstrap Forms

• وب سایت زنده را کامل و به روز کنید Complete and Update Live Website

• کد منبع مرجع Reference Source Code

انتشار وب سایت شما Publishing your Website

• اصول میزبانی وب سایت Website hosting Principles

• نتلیفای چیست؟ What is Netlify?

• وب سایت را با استفاده از استقرار دستی در Netlify منتشر کنید Publish Website using Manual Deploy on Netlify

• انتشار وب سایت با استفاده از GitHub و Netlify (CI/CD Pipeline) Publish Website using GitHub and Netlify (CI/CD Pipeline)

• ویژگی های اضافی Netlify Additional Netlify Features

نتیجه گیری Conclusion

• خلاصه دوره Course Recap

• توصیه ها Recommendations

بخش پاداش Bonus Section

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