آموزش دوره جامع HTML و CSS: ساخت وب‌سایت‌های واکنش‌گرا - نسخه ۲۰۲۵ - آخرین آپدیت

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

01-مقدمه ای بر دوره جامع HTML و CSS: ساخت وب سایت های واکنش گرا و واقعی 01 Introduction to HTML & CSS Masterclass: Build Responsive Real-World Websites

• به دوره جامع HTML و CSS خوش آمدید Welcome to HTML and CSS Masterclass

• شروع کار Getting Started

• دانلود فایل های منبع دوره Download the Course Resource Files

02-توسعه وب چیست؟ 02 What is Web Development?

• توسعه وب چیست؟ What is Web Development?

03-مبانی اولیه HTML 03 Basic Fundamentals in HTML

• نحوه دانلود و نصب ویرایشگر متن (VSCode) How to download and install text editor (VSCode)

• آشنایی با رابط کاربری VSCode Navigating VSCode interface

• نصب و درک افزونه های HTML و CSS Install and understand HTML and CSS extensions

• نحوه ایجاد فایل ها و پوشه های HTML و CSS How to create HTML and CSS files and folder

• نصب و دانلود مرورگر Install and download browser

04-درک HTML - قسمت 1 04 Understanding HTML - Part 1

• HTML چیست؟ What is HTML

• اسناد HTML - قسمت 1 HTML documents - Part 1

• اسناد HTML - قسمت 2 HTML documents - Part 2

05-درک HTML - قسمت 2 05 Understanding HTML - Part 2

• تگ های HTML - قسمت 1 HTML Tags - Part 1

• تگ های HTML - قسمت 2 HTML Tags - Part 2

• پیوندها Links

• تصاویر Images

• لیست ها Lists

• جداول Tables

• فرم های HTML HTML forms

• رسانه HTML - قسمت 1 HTML Media - Part 1

• رسانه HTML - قسمت 2 HTML Media - Part 2

• دکمه Button

• نظرات Comments

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

• تمرین HTML HTML Exercise

• تمرین HTML 2 HTML Exercise 2

06-درک CSS 06 Understanding CSS

• CSS چیست؟ What is CSS

• انواع CSS Types of CSS

• نحو CSS CSS Syntax

• نظرات CSS CSS Comments

07-انتخابگرهای CSS - قسمت 1 07 CSS Selectors - Part 1

• انتخابگر سراسری Universal Selector

• انتخابگر عنصر Element Selector

• انتخابگر کلاس Class Selector

• انتخابگر ID ID Selector

• انتخابگر گروهی Grouping Selector

• انتخابگر فرزند Descendant Selector

08-انتخابگرهای CSS - قسمت 2 08 CSS Selectors - Part 2

• انتخابگرهای شبه کلاس - قسمت 1 Pseudo-classes Selectors - Part 1

• انتخابگرهای شبه کلاس - قسمت 2 Pseudo-classes Selectors - Part 2

09-واحد های CSS 09 CSS Units

• واحد های CSS CSS Units

10-استایل دهی فونت CSS 10 CSS Font Styling

• استایل دهی فونت Font Styling

• رنگ فونت Font Color

• تمرین CSS CSS Exercise

• تمرین CSS 2 CSS Exercise 2

11-استایل دهی پس زمینه CSS 11 CSS Background Styling

• استایل دهی پس زمینه Background Styling

12-مدل جعبه ای CSS (حاشیه داخلی، حاشیه و مارجین) 12 CSS Box Model (Padding, Border and Margin)

• 12-مدل جعبه ای CSS (حاشیه داخلی، حاشیه و مارجین) 12 CSS Box Model (Padding, Border and Margin)

13-طرح بندی CSS 13 CSS Layout

• ویژگی Display Display Property

• Float، Clear و Overflow Float, Clear and Overflow

• موقعیت دهی - قسمت 1 Positioning - Part 1

• موقعیت دهی - قسمت 2 Positioning - Part 2

14-انیمیشن، Transition و Transform 14 Animation, Transition and Transform

• Transformation Transformation

• Transition Transition

• Animation Animation

15-CSS Flexbox 15 CSS Flexbox

• Flexbox CSS در مقابل Grid CSS CSS Flexbox Vs CSS Grid

• Flexbox - قسمت 1 Flexbox - Part 1

• Flexbox - قسمت 2 Flexbox - Part 2

• Flexbox - قسمت 3 Flexbox - Part 3

16-CSS Grid 16 CSS Grid

• CSS Grid - قسمت 1 CSS Grid - Part 1

• CSS Grid - قسمت 2 CSS Grid - Part 2

17-پروژه 1 - وب سایت مسافرتی 17 Project 1 - Travel Website

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

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

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

18-پروژه 2 - وب سایت گالری عکس 18 Project 2 - Photo Gallery Website

• وب سایت گالری عکس - قسمت 1 Photo Gallery Website - Part 1

• وب سایت گالری عکس - قسمت 2 Photo Gallery Website - Part 2

• وب سایت گالری عکس - قسمت 3 Photo Gallery Website - Part 3

• وب سایت گالری عکس - قسمت 4 Photo Gallery Website - Part 4

• وب سایت گالری عکس - قسمت 5 Photo Gallery Website - Part 5

• وب سایت گالری عکس - قسمت 6 Photo Gallery Website - Part 6

• وب سایت گالری عکس - قسمت 7 Photo Gallery Website - Part 7

19-پروژه 3 - وب سایت معماری 19 Project 3 - Architecture Website

• وب سایت معماری - قسمت 1 Architecture Website - Part 1

• وب سایت معماری - قسمت 2 Architecture Website - Part 2

• وب سایت معماری - قسمت 3 Architecture Website - Part 3

• وب سایت معماری - قسمت 4 Architecture Website - Part 4

• وب سایت معماری - قسمت 5 Architecture Website - Part 5

• وب سایت معماری - قسمت 6 Architecture Website - Part 6

• وب سایت معماری - قسمت 7 Architecture Website - Part 7

• وب سایت معماری - قسمت 8 Architecture Website - Part 8

• وب سایت معماری - قسمت 9 Architecture Website - Part 9

• وب سایت معماری - قسمت 10 Architecture Website - Part 10

20-نتیجه گیری 20 Conclusion

• هدیه Bonus