قیمت این دوره: 690,000 448,500 تومان
  • مدرس دوره : حسن خسروجردی
  • تعداد ویدیوها : 96 ویدیو
  • مدت زمان دوره : 21:21:00
  • سطح دوره : متوسط
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1401/09/03
ثبتـــ نام در این دوره ثبت نام در دوره
دوره آموزش طراحی سایت پروژه محور

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

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

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




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

مدت زمان دوره 21:21:00
00:00
00:00

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

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

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

86

  • نمایش و عدم نمایش notification , comment , profile

00:06:20

در این قسمت نمایش و عدم نمایش notification , comment , profile نوشته میشود.

87

  • ساخت بخش sidebar dropdown

00:11:29

در این قسمت ساخت بخش sidebar dropdown انجام میشود.

88

  • full screen

00:14:08

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

89

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

00:05:37

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

90

  • سخن پایانی با شما عزیزان

00:08:25

سخن پایانی با شما عزیزان

91

  • معرفی بروز رسانی اول - ( متخصص UI , UX )

00:03:22

معرفی بروز رسانی اول - ( متخصص UI , UX )

92

  • ui , ux چیست ؟ چه تفاوت هایی با هم دارند؟

00:17:17

ui , ux چیست ؟ چه تفاوت هایی با هم دارند؟

93

  • طراحی تعاملی - Interaction Design

00:17:30

طراحی تعاملی - Interaction Design

94

  • iterative design - طراحی تکرارشونده

00:06:30

iterative design - طراحی تکرارشونده

95

  • طراح UX چه کسی هست؟ - چهار اصل اساسی در UX

00:21:28

طراح UX چه کسی هست؟ - چهار اصل اساسی در UX

96

  • UX Designer کیست ؟ و چه وظایفی دارد؟

00:13:04

UX Designer کیست ؟ و چه وظایفی دارد؟

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

مشاهده همه دوره ها
اینستاگرام
تلگرام

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

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

علیر ضا

ارسال شده در 1404/05/04

سلام خسته نباشید میخواستم بپرسم که این دوره پیش نیازی به جز html و css هم نیاز داره ؟ یا  مثلا bootstrap و flex box رو بعد این دوره هم میشه یاد گرفت . خیلی ممنون 

ابوالقاسم رحیمی

ابوالقاسم رحیمی

ارسال شده در 1404/03/28

با سلام 

تشکر از برگزاری چنین دوره مفید و خوبی

انشاء الله بخش ux چه زمانی منتشر میشه؟

زهرا شجاعی

زهرا شجاعی

ارسال شده در 1404/02/05

سلام  ممنون از دوره ی خوب و کاربردی تون. خیلی لذت بردم همه موارد رو با حوصله و ساده و روان توضیح دادین. اینکه پروژه محور هست دوره رو خیلی کاربردی کرده.  ممنون میشم سرفصل UI/UX   رو کامل کنید . 

نوید حریریان

نوید حریریان

ارسال شده در 1403/11/23

سلام وقتتون بخیر

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

محمد مهدی مالکی آل

محمد مهدی مالکی آل

ارسال شده در 1403/10/14

سلام استاد 

آیا دوره html css رایگانتون که برای چند ساله پیشه اوکیه ببینیمش یا شما دوره بروز تر و جدید تری میگید که ببینیم

محمد مهدی مالکی آل

حسن خسروجردی (مدرس)

ارسال شده در 1403/11/03

با سلام خدمت شما

 

بله اوکی هست و تغییراتی نداشته در این سال ها

 

 

موفق و پیروز باشید

علیرضا میرزایی

علیرضا میرزایی

ارسال شده در 1403/06/26

بهتر از شما نیست مهندس ممنون از دوره خوبتون

علیرضا میرزایی

حسن خسروجردی (مدرس)

ارسال شده در 1403/11/03

با سلام خدمت شما

 

زنده باشید خوشحالیم راضی بودید

 

 

موفق و پیروز باشید

امیر عباس حبیب پور

امیر عباس حبیب پور

ارسال شده در 1403/06/23

سلام استاد خسته نباشید خیلی دوره عالی بود ممنونم فقط خواستم درخواست کنم اگر در توانتون هست حتما دوره ای مربوط به react رو به صورت مقدماتی تا پیشرفته تدریس کنید و داخل تاپ لرن بزارید تا استفاده کنیم ممنونیم.

امیر عباس حبیب پور

حسن خسروجردی (مدرس)

ارسال شده در 1403/06/26

سلام و عرض ادب

 

 

سلامت باشید خوشحالیم راضی بودید

 

حتما

 

موفق و سربلند باشید