قیمت این دوره: 150,000 97,500 تومان
  • مدرس دوره : حسن خسروجردی
  • تعداد دانشجویان این دوره : 1,869 نفر
  • تعداد ویدیوها : 85 ویدیو
  • مدت زمان دوره : 19:16:00
  • سطح دوره : متوسط
  • وضعیت دوره : در حال برگزاری
  • تاریخ آخرین بروزرسانی : 1400/02/18
ثبتـــ نام در این دوره
دوره آموزش طراحی سایت پروژه محور

دوره آموزش طراحی سایت پروژه محور

امروزه طراحی سایت یکی از محبوب ترین مشاغل دنیا محسوب میشود.در این دوره قصد داریم بصورت کاملا پروژه محور طراحی سایت رو به شما عزیزان اموزش دهیم تا آماده ورود به این حوزه پر طرفدار بشوید.مزیت شرکت در‌ این دوره‌ پروژه های متنوع و بروزی هست که در طول د‌وره نوشته شده و خط به خط توضیح داده میشود.در  این دوره‌ از html , css , flex box , css grid , javascript , bootstrap استفاده میشود تا بصورت عملی موارد یادگیری شده در‌ دوره های مرتبط به هر کدام را بصورت عملی بیاموزید.

پیشنهاد میکنیم برای آشنایی بیشتر‌ با سرفصل های دوره بخش معرفی این دوره را مشاهده نمایید.

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

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

مدت زمان دوره 19:16:00

  • در صورتیکه ویدئو نمایش داده نشد آن را دانلود کنید و با KmPlayer مشاهده کنید.

  • لطفا در صورت اقدام به دانلود تا انتها فرایند دانلود ، این صفحه را باز نگاه دارید.

1

  • معرفی دوره

  • 00:20:26
  • رایگانــ

در این بخش کلیات دوره معرفی میشود. ۴ پروژه عملی + آموزش css grid

2

  • معرفی ابزار مورد نیاز

  • 00:06:28
  • رایگانــ

در این بخش ابزار موردنیاز برای این دوره معرفی میشوند.

3

  • پیکربندی پروژه اول

  • 00:32:23
  • رایگانــ

در این بخش پیکربندی کلی پروژه انجام میشود.

4

  • ساخت بخش منو ها و لوگو

  • 00:21:34
  • رایگانــ

در این بخش منوی اصلی سایت و همچنین لوگوی سایت طراحی میشود.

5

  • ساخت بخش بنر و دکمه ها

  • 00:34:28
  • نقدیــ

در این بخش سازکاری برای طراحی دکمه ها پیاده میشود و همچنین بخش بنر سایت نوشته میشود.

6

  • تصحیح فونت ها

  • 00:14:11
  • نقدیــ

در این بخش فونت های پروژه تصحیح میشوند و بخش ابتدایی services طراحی میگردد

7

  • پیاده سازی بخش services

  • 00:18:18
  • نقدیــ

در این بخش services header طراحی میشود. همچنین نکاتی درمورد چیدمان باکس ها گفته میشود.

8

  • ساخت باکس ها

  • 00:27:00
  • نقدیــ

در این بخش ساخت باکس های بخش services انجام میشود.

9

  • استفاده از clear , margin auto

  • 00:18:45
  • نقدیــ

در این بخش تکنیک استفاده از clear و margin auto بررسی میشود.

10

  • بخش About

  • 00:09:43
  • نقدیــ

در این بخش about header طراحی میشود.

11

  • طراحی بخش profile

  • 00:15:41
  • نقدیــ

در این بخش باکس های profile در کنار هم قرار میگیرند

12

  • طراحی بخش contact-header

  • 00:11:00
  • نقدیــ

در این بخش فوتر profile و هدر contact طراحی میشود.

13

  • تکمیل بخش contact

  • 00:18:00
  • نقدیــ

در این بخش , قسمت contact تکمیل میشود.

14

  • طراحی بخش footer - اتمام پروژه اول

  • 00:07:55
  • نقدیــ

در این بخش قسمت فوتر طراحی میشود.

15

  • شروع پروژه دوم - طرح بندی اولیه پروژه

  • 00:12:19
  • نقدیــ

در این بخش طرح بندی اولیه پروژه و بخش هدر انجام میشود.

16

  • ساخت کلاس های آماده

  • 00:16:15
  • رایگانــ

در این بخش کلاس های پر تکرار آماده ساخته میشوند.

17

  • ساخت کلاس های آماده - بخش دوم

  • 00:14:15
  • نقدیــ

در این بخش کلاس های آماده ساخته میشوند.

18

  • سایزبندی صفحات + سورس قالب اصلی

  • 00:19:18
  • نقدیــ

در این بخش سایزبندی صفحات همانند بوت استرپ انجام میشود.

19

  • طراحی بخش منو ها

  • 00:09:53
  • نقدیــ

در این بخش منو ها و لوگو در جایگاه مشخص قرار میگیرند

20

  • ساخت منوی burger

  • 00:17:06
  • نقدیــ

در این بخش نحوه ساخت منوی burger در سایز های کوچک بررسی میشود.

21

  • پیکربندی بخش intro

  • 00:18:28
  • نقدیــ

در این بخش پیکربندی کلی بخش intro انجام میشود.

22

  • پیکربندی بخش intro - بخش دوم

  • 00:09:57
  • نقدیــ

در این بخش ردیف اول از intro در html تکمیل میشود.

23

  • پیکربندی بخش intro - بخش سوم

  • 00:08:02
  • نقدیــ

در این بخش تمامی قسمت های intro در html نوشته میشوند.

24

  • استایل دهی بخش intro

  • 00:09:44
  • نقدیــ

در این بخش عرض و ارتفاع عناصر اصلی اعمال میشود.

25

  • استایل دهی بخش intro - بخش دوم

  • 00:11:19
  • نقدیــ

در این قسمت بک گراند ها اعمال میشوند و راهکاری برای قرار گیری caption روی باکس ها ارائه میشود.

26

  • استایل دهی بخش intro - بخش سوم

  • 00:11:13
  • نقدیــ

در این قسمت , بخش intro به پایان میرسد و تکمیل میشود.

27

  • اتمام بخش intro

  • 00:12:51
  • نقدیــ

در این بخش ریسپانسیو intro نوشته میشود.

28

  • طراحی بخش main news

  • 00:08:14
  • نقدیــ

در این بخش , بخش بندی main و aside انجام میشود.

29

  • تکمیل بخش main-news

  • 00:09:57
  • نقدیــ

در این بخش استایل های بخش main-news نوشته میشود.

30

  • طراحی خبر های تکمیلی

  • 00:10:38
  • نقدیــ

در این بخش دو خبر تکمیلی طراحی میشوند.

31

  • طراحی sidebar - بخش اول

  • 00:09:36
  • نقدیــ

در این بخش اولین قسمت از sidebar طراحی میشود.

32

  • طراحی بخش popular post

  • 00:13:54
  • نقدیــ

در این بخش پست های محبوب طراحی میشوند.

33

  • اتمام بخش app

  • 00:13:01
  • نقدیــ

در این بخش تمامی بخش ها app نوشته میشود.

34

  • طراحی بخش footer

  • 00:12:12
  • نقدیــ

در این بخش فوتر سایت طراحی میشود.

35

  • طراحی ردیف اول footer

  • 00:23:33
  • نقدیــ

در این بخش ردیف اول فوتر طراحی میشود.

36

  • تکمیل بخش footer

  • 00:11:29
  • نقدیــ

در این بخش فوتر تکمیل میشود.

37

  • پایان پروژه دوم

  • 00:07:23
  • نقدیــ

در این بخش قالب دوم به اتمام میرسد.

38

  • CSS Grid - بخش اول

  • 00:14:13
  • رایگانــ

توضیحات کلی درمورد CSS Grid

39

  • CSS Grid - بخش دوم

  • 00:14:19
  • نقدیــ

در این بخش خاصیت های gap. line , column , row , container , grid container بررسی میشوند

40

  • CSS Grid - بخش سوم

  • 00:10:00
  • نقدیــ

در این بخش در رابطه با gap و line صحبت میشود.

41

  • CSS Grid - بخش چهارم

  • 00:08:14
  • نقدیــ

در این بخش در رابطه با row , column , justify content صحبت میشود.

42

  • CSS Grid - بخش پنجم

  • 00:10:30
  • نقدیــ

در این بخش درمورد grid-colum grid-row و align-content بحث میشود.

43

  • CSS Grid - بخش ششم

  • 00:10:04
  • نقدیــ

در این بخش در رابطه با واحد fr و mixing صحبت میشود.

44

  • CSS Grid - بخش هفتم

  • 00:07:43
  • نقدیــ

در این بخش در رابطه با grid-area صحبت میشود.

45

  • CSS Grid - بخش هشتم

  • 00:06:34
  • نقدیــ

در این بخش درمورد grid area صحبت میشود.

46

  • CSS Grid - بخش نهم

  • 00:17:46
  • نقدیــ

در این قسمت پروژه عملی نوشته میشود. بخش اول

47

  • CSS Grid - بخش دهم

  • 00:11:55
  • نقدیــ

در این بخش پروژه عملی تکمیل میشود.

48

  • CSS Grid - بخش یازدهم

  • 00:08:19
  • نقدیــ

در این بخش در رابطه با order در css grid صحبت میشود.

49

  • CSS Grid - بخش آخر

  • 00:10:11
  • نقدیــ

در این بخش در رابطه با minmax , auto-fill , auto-fit صحبت میشود.

50

  • معرفی پروژه سوم

  • 00:03:56
  • رایگانــ

در این بخش پروژه سوم که با کمک flexBox نوشته میشود معرفی شده است

51

  • چیدمان اولیه پروژه سوم

  • 00:09:47
  • نقدیــ

در این بخش تنظیمات و ساخت پوشه ها انجام میشود.

52

  • طراحی بخش header

  • 00:17:11
  • نقدیــ

در این قسمت بخش های کلی header ساخته میشوند.

53

  • طراحی بخش header - بخش دوم

  • 00:11:57
  • نقدیــ

در این بخش منو ها تکمیل شده و بخش search نیز طراحی میشود.

54

  • طراحی بخش سرچ و drop down

  • 00:12:14
  • نقدیــ

در این قسمت بخش سرچ و drop down menu تکمیل میشود.

55

  • طراحی بخش slide

  • 00:13:14
  • نقدیــ

در این بخش , قسمت slide طراحی میشود.

56

  • تکمیل بخش slide

  • 00:11:22
  • نقدیــ

در این بخش , قسمت اسلاید تکمیل میشود.

57

  • طراحی بخش search-form

  • 00:25:14
  • نقدیــ

در این قسمت بخش سرچ نوشته میشود.

58

  • box-sizing

  • 00:08:20
  • رایگانــ

در این قسمت درمورد box-sizing صحبت میشود.

59

  • طراحی بخش popular heading

  • 00:14:19
  • نقدیــ

در این قسمت بخش popular heading طراحی میشود.

60

  • طراحی بخش popular image

  • 00:13:05
  • نقدیــ

در این قسمت عکس ها در کنار هم تنظیم میشوند.

61

  • تکمیل بخش popular destination

  • 00:10:26
  • نقدیــ

در این قسمت بخش popular destination تکمیل میشود.

62

  • طراحی بخش newsletter

  • 00:15:40
  • نقدیــ

در این قسمت بخش خبرنامه طراحی میشود.

63

  • تکمیل بخش newsletter

  • 00:11:10
  • نقدیــ

در این قسمت بخش خبرنامه تکمیل میشود.

64

  • ساخت بخش video

  • 00:15:48
  • نقدیــ

در این قسمت بخش video تکمیل میشود.

65

  • طرح بندی کلی بخش فوتر

  • 00:06:17
  • نقدیــ

در این قسمت طرح بندی کلی بخش فوتر انجام میشود.

66

  • تکمیل پروژه سوم

  • 00:10:25
  • نقدیــ

در این قسمت پروژه سوم تکمیل میشود.

67

  • معرفی پروژه چهارم ( پنل ادمین )

  • 00:08:21
  • نقدیــ

در این بخش پروژه چهارم ( پنل ادمین ) معرفی میشود.

68

  • اضافه کردن ابزار مورد نیاز برای طراحی پنل ادمین

  • 00:16:27
  • نقدیــ

در این بخش ابزار مورد نیاز برای طراحی پنل به پروژه اضافه میشوند.

69

  • طراحی بخش header

  • 00:18:43
  • نقدیــ

در این قسمت , چیدمان اصلی header انجام میشود.

70

  • طراحی بخش sidebar header

  • 00:14:42
  • نقدیــ

در این قسمت بخش sidebar header طراحی میشود.

71

  • طراحی بخش سرچ و full screen

  • 00:17:47
  • نقدیــ

در این قسمت , طراحی بخش سرچ و full screen انجام میشود.

72

  • طراحی بخش Notification

  • 00:14:54
  • نقدیــ

در این قسمت , بخش اعلان ها طراحی میشود.

73

  • تکمیل بخش notification

  • 00:16:22
  • نقدیــ

در این بخش , قسمت اعلان ها تکمیل میشود.

74

  • طراحی بخش comment

  • 00:11:24
  • نقدیــ

در این قسمت طراحی کلی بخش comment انجام میشود.

75

  • تکمیل بخش comment و طراحی بخش Avatar

  • 00:17:17
  • نقدیــ

در این بخش , قسمت کامنت ها تکمیل شده و اواتار طراحی میشود.

76

  • تکمیل بخش header

  • 00:11:31
  • نقدیــ

در این قسمت header تکمیل میشود.

77

  • طراحی بخش sidebar

  • 00:11:22
  • نقدیــ

در این قسمت بخش سایدبار پنل ادمین طراحی میشود.

78

  • طراحی sidebar - بخش دوم

  • 00:14:11
  • نقدیــ

در این بخش قسمت لینک ها تکمیل میشود.

79

  • تکمیل بخش sidebar

  • 00:22:34
  • نقدیــ

در این بخش سایدبار تکمیل میشود.

80

  • طراحی card های پنل ادمین

  • 00:15:11
  • نقدیــ

در این بخش card های پنل ادمین طراحی میشوند.

81

  • طراحی card های پنل ادمین - بخش دوم

  • 00:11:17
  • نقدیــ

در این قسمت رنگ ها و اندازه card ها مشخص میشوند.

82

  • تکمیل طراحی پنل ادمین

  • 00:13:23
  • نقدیــ

در این بخش طراحی پنل ادمین به پایان میرسد

83

  • sidebar toggle hide / show

  • 00:15:20
  • نقدیــ

در این بخش نمایش و عدم نمایش سایدبار مدیریت میشود.

84

  • نمایش و عدم نمایش sidebar و header

  • 00:10:10
  • نقدیــ

در این قسمت نمایش و عدم نمایش sidebar و header نوشته میشود.

85

  • نمایش و عدم نمایش بخش سرچ

  • 00:08:50
  • نقدیــ

در این قسمت نمایش و عدم نمایش بخش سرچ نوشته میشود.

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

جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .