قیمت این دوره: 250,000 162,500 تومان
  • مدرس دوره : علی صالحی
  • تعداد ویدیوها : 39 ویدیو
  • مدت زمان دوره : 6:20:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1403/07/30
ثبتـــ نام در این دوره ثبت نام در دوره
آموزش صفر تا صد  HTML, CSS و jQuery برای طراحی وب استاتیک

آموزش صفر تا صد HTML, CSS و jQuery برای طراحی وب استاتیک

برای طراحی وبسایت‌های استاتیک یک ترکیب معمول و موثر است. در ادامه به توضیح هر یک از این تکنولوژی‌ها و نحوه استفاده آن‌ها در طراحی وبسایت‌های استاتیک می‌پردازیم:

 

1. HTML (HyperText Markup Language)

HTML زبان نشانه‌گذاری است که برای ایجاد ساختار و محتوای صفحات وب استفاده می‌شود. هر صفحه وب اساساً با استفاده از HTML ساخته می‌شود و شامل عناصر مختلفی است که محتوای صفحه را تعریف می‌کنند. برای مثال برای نوشتن عناوین از تگ <h> استفاده میکنیم.

 

2. CSS (Cascading Style Sheets)

CSS زبانی است که برای طراحی و استایل‌دهی به صفحات HTML استفاده می‌شود. با استفاده از CSS، می‌توانید ظاهر و احساس صفحات وب را تغییر دهید، از جمله رنگ‌ها، فونت‌ها، فاصله‌ها و نحوه نمایش عناصر.

ویژگی‌های CSS:

   استایل‌دهی متنی: مانند رنگ، اندازه و نوع فونت.

   استایل‌دهی به عناصر: مانند پس‌زمینه، حاشیه‌ها، اندازه و موقعیت.

   طراحی واکنش‌گرا: با استفاده از Media Queries

    استفاده از HTML، CSS و jQuery

3. jQuery

jQuery یک کتابخانه جاوااسکریپت است که برای ساده‌سازی کار با HTML، دستکاری درخت DOM، رویدادها و ایجاد انیمیشن‌ها استفاده می‌شود. jQuery به شما امکان می‌دهد تا با کدنویسی کمتر، تعاملات پیچیده‌تر را در صفحات وب ایجاد کنید.

ویژگی‌های jQuery:

    دستکاری DOM: افزودن، حذف و تغییر عناصر HTML.

    کنترل رویدادها: مدیریت کلیک‌ها، حرکت ماوس و سایر تعاملات کاربر.

    ایجاد انیمیشن‌ها: افکت‌های پنهان‌سازی، نمایش و تغییر انیمیشن‌های سفارشی.

    AJAX: ارسال و دریافت داده‌ها بدون بارگذاری مجدد صفحه

 

جمع‌بندی

 

با ترکیب HTML، CSS و jQuery، می‌توانید وبسایت‌های استاتیک زیبا، کاربرپسند و تعاملی ایجاد کنید. هر کدام از این تکنولوژی‌ها نقش خاصی در فرآیند طراحی و توسعه وب دارند:

 

    HTML: ساختار و محتوای صفحه را تعریف می‌کند.

     CSS: ظاهر و استایل صفحه را تنظیم می‌کند.

    jQuery: تعاملات و رفتارهای پویا را مدیریت می‌کند.

این سه ابزار به شما امکان می‌دهند تا تجربه کاربری غنی‌تری ایجاد کنید و وبسایت‌هایی بسازید که هم زیبا و هم کاربردی باشند.

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

تنظیمات vscode و آماده سازی محیط برنامه نویسی

تاریخچه زبان نشانه گذاری html

head & body

بررسی ساختار تگ ها

عناوین (headings)

html attributes

html styles

html formatting

تگ مربوط به تصاویر

بررسی تگ div

تگ لینک و اضافه کردن فایل به صفحه

بررسی تگ های block و inline block

تگ form

بررسی اسکریپت ها --- (پایان فصل اول)

معرفی css و بررسی ساختار آن

selector ها

کار با پراپرتی های color

پراپرتی های مربوط به تصاویر

border properties

margin & padding & text

fonts & lists

display & positions

overflow & float

gradiant & shadow

transform & transition

CSS animations

responsive

flex-box --- (پایان فصل دوم)

معرفی کتابخانه jQuery

نصب و راه اندازی کتابخانه jQuery

کار با selector ها

کار با css و استایل دهی به المان ها

events (رویداد ها)

پیمایش

بین

عناصر (Traversing)

پروژه تمرینی 1 (بلاگ ورزشی)

پروژه تمرینی 2 (اسکرول به بالای صفحه سایت) --- پایان فصل سوم

معرفی Ajax

بررسی ساختار اولیه و معرفی Data Attributes

بررسی

ساختار




فهرستـــ ویدیوها

مدت زمان دوره 6:20:00
  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1
  • تنظیمات vscode و آماده سازی محیط برنامه نویسی

00:33:26

در این قسمت به معرفی نرم افزار vscode و تنظیمات مربوطه پرداختیم تا بتوانیم محیط رو برای شروع بستر برنامه نویسی فراهم کنیم .

2
  • تاریخچه زبان نشانه گذاری HTML

00:03:30

در این قسمت به معرفی زبان html پرداختیم و تاریخچه آن را مورد بررسی قرار دادیم .

3
  • بررسی ساختار صفحه (head &amp; body)

00:04:06

در این قسمت ، ساختار یک صفحه html در مرورگر را مورد بررسی قرار دادیم که شامل دو بخش head (سربرگ) و body (بدنه) میباشد .

4
  • بررسی ساختار تگ ها

00:03:38

در این قسمت ساختار تگ ها (عناصر صفحه html) را مورد بررسی قرار دادیم .

5
  • عناوین (headings)

00:03:23

در این قسمت ساختار عناوین و تگ های heading را مورد بررسی قرار دادیم.

6
  • html attributes

00:03:10

در این قسمت ، attribute های تگ های html را مورد بررسی قرار دادیم .

7
  • html styles

00:03:58

در این قسمت ، تگ

8
  • html formatting

00:03:55

یکسری تگ ها قابلیت استایل دهی و فرمت دهی به عناصر را دارا هستند ، برای مثال تگ باعث bold و پر رنگ شدن المان صفحه میشود . در این قسمت ، این تگ های فرمت را مورد بررسی قرار دادیم .

9
  • تگ مربوط به تصاویر

00:03:23

در این قسمت ، تگ که برای تصاویر استفاده میشود را مورد بررسی قرار دادیم .

10
  • بررسی تگ div

00:02:25

در این قسمت به معرفی تگ پرکاربرد div پرداختیم.

11
  • تگ لینک و اضافه کردن فایل به صفحه

00:02:42

برای اضافه کردن فایل داخل پروژه ، از تگ لینک (link) استفاده میکنیم.

12
  • بررسی تگ های block و inline block

00:04:06

در این قسمت ، تگ های مربوط به block و inline-block را مورد بررسی قرار دادیم .

13
  • بررسی تگ form

00:03:16

در این قسمت تگ پرکاربرد

را مورد بررسی قرار دادیم.
14
  • بررسی اسکریپت ها - (پایان فصل اول)

00:04:12

در این قسمت به معرفی تگ script در html پرداختیم .

15
  • معرفی CSS و بررسی ساختار آن

00:06:05

همانطور که اشاره کردیم , html ساختار صفحه مرورگر ما را تشکیل میده اما به تنهایی کافی نیست . ما برای تغییر در استایل و ظاهر تگ ها و عناصر html , نیاز به کد های css داریم . در این قسمت ، css و ساختار آن را مورد بررسی قرار دادیم .

16
  • کار با selector ها

00:06:32

ما برای تغییر در استایل عناصر html ، نیاز به selector ها برای دسترسی به عناصر و تگ ها داریم . در این قسمت انواع selector ها رو مورد بررسی قرار دادیم .

17
  • کار با پراپرتی های color

00:10:12

در این قسمت پراپرتی color و رنگ ها رو مورد بررسی قرار دادیم .

18
  • پراپرتی های مربوط به تصاویر

00:07:55

در این قسمت پراپرتی های مربوط به تصاویر را مورد بررسی قرار دادیم .

19
  • border properties

00:05:24

در این قسمت به معرفی پراپرتی border پرداختیم .

20
  • پراپرتی های متن و ایجاد فواصل (margin &amp; padding)

00:17:27

در این قسمت پراپرتی های مربوط به متن و ایجاد فواصل بین عناصر (margin & padding) را آموزش دادیم .

21
  • پراپرتی های فونت و لیست

00:12:49

در این قسمت پراپرتی های مربوط به فونت ها و لیست ها رو مورد بررسی قرار دادیم .

22
  • positions &amp; display

00:19:26

در این قسمت پراپرتی های مربوط به جایگاه و نمایش عناصر صفحه را مورد بررسی قرار دادیم .

23
  • overflow &amp; float

00:14:45

در این قسمت پراپرتی های overflow و float رو مورد بررسی قرار دادیم .

24
  • gradiant &amp; shadow

00:09:30

در این قسمت به معرفی پراپرتی های گرادیانت و سایه (gradiant & shadow) پرداختیم .

25
  • transform &amp; transition

00:10:29

در این قسمت پراپرتی های transform و transition را مورد بررسی قرار دادیم.

26
  • کار با انیمیشن ها (css animations)

00:09:12

در این قسمت پراپرتی های مربوط به انیمیشن ها در CSS را مورد بررسی قرار دادیم .

27
  • نمایش عناصر در دستگاه های مختلف (Responsive)

00:07:30

تگ های html در دستگاه های مختلف (موبایل ، تبلت ...) در اندازه و سایز یکسان قرار نمیگیرن . یکی از مهمترین کارهایی که باید صورت بگیره ، پیاده سازی درست عناصر در اندازه های مختلف متناسب با دستگاه کاربر میباشد که اصطلاحا به آن Responsive کردن عناصر ، گفته میشود .

28
  • flex-box (پایان فصل دوم)

00:07:34

در این قسمت به معرفی flex-box پرداختیم.

29
  • معرفی کتابخانه jQuery

00:03:59

در این قسمت به معرفی کتابخانه jQuery ، یکی از پرکاربردی ترین کتابخانه های جاوااسکریپت میپردازیم .

30
  • نصب و راه اندازی کتابخانه jQuery

00:10:13

در این قسمت ، طریقه نصب کتابخانه jQuery را به شما عزیزان آموزش خواهیم داد .

31
  • کار با selector ها

00:06:45

برای دسترسی به عناصر صفحه نیاز هست که از selector ها استفاده کنیم . در این قسمت به معرفی انواع selector ها میپردازیم .

32
  • کار با css و استایل دهی به المان ها

00:05:03

در این قسمت به معرفی css و استایل دهی به المان ها در jQuery پرداختیم .

33
  • events (رویداد ها)

00:13:54

در این قسمت , events (رویداد ها) را در jQuery مورد بررسی قرار دادیم .

34
  • پیمایش بین عناصر (Traversing)

00:15:59

در این قسمت به معرفی Traversing پرداختیم .

35
  • پروژه تمرینی 1 (بلاگ ورزشی)

00:16:54

اولین پروژه تمرینی برای نمایش بلاگ ورزشی با افکتهای متنوع

36
  • پروژه تمرینی 2 (اسکرول به بالای صفحه سایت) - (پایان فصل سوم)

00:14:00

در این قسمت یک پروژه تمرینی با قابلیت اسکرول به بالای صفحه سایت پیاده سازی خواهیم کرد .

37
  • معرفی Ajax

00:08:42

در این قسمت، تکنولوژِی Ajax را مورد بررسی قرار دادیم .

38
  • بررسی ساختار اولیه و معرفی Data Attributes

00:22:27

در این قسمت ، ساختار اولیه Ajax را مورد بررسی قرار داده و به معرفی Data Attributes پرداختیم.

39
  • بررسی ساختار Ajax و ارسال اطلاعات فرم - (قسمت آخر)

00:39:02

در ادامه قسمت قبل ، ساختار Ajax رو به صورت کامل مورد بررسی قرار داده و به شکل پروژه عملی از طریق یک فرم، دیتا را به صورت Ajax ارسال خواهیم کرد .

دوره های دیگر مدرس

مشاهده همه دوره ها

نظرات کاربران در رابطه با این دوره

لطفا سوالات خود را راجع به این آموزش در این بخش پرسش و پاسخ مطرح کنید به سوالات در قسمت نظرات پاسخ داده نخواهد شد و آن نظر حذف میشود.
جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .