طراحی mobile-first

توضیحات

در این جلسه به طراحی mobile-first در css از دوره آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور میپردازیم.

HTML CSS طراحی وب طراحی سایت سی اس اس اچ تی ام ال css 3 html 5

برای مشاهده آنلاین و دسترسی به ویدیو لطفا ابتدا وارد سایت شوید . صفحه ورود

آشنایی با HTML شامل 13 قسمت

1

وب چگونه کار میکند؟

رایگان 09:44

2

معرفی HTML (اچ تی ام ال)

رایگان 06:58

3

ابزارهای مورد نیاز

رایگان 07:05

4

ساخت اولین صفحه

رایگان 17:16

5

ساختار html

رایگان 13:18

6

تگ های paragraph و heading

رایگان 10:26

7

تگ img

رایگان 11:18

8

تگ link

رایگان 11:29

9

تگ های strong و em

رایگان 08:00

10

تگ های list

رایگان 07:37

11

تگ های table

رایگان 08:12

12

تگ های form بخش اول

رایگان 15:43

13

تگ های form بخش دوم

رایگان 09:59
آشنایی با CSS شامل 6 قسمت

14

آشنایی با CSS (سی اس اس)

رایگان 08:37

15

ترتیب اجرای css

رایگان 06:42

16

selector در css

رایگان 10:37

17

تگ های span و div

رایگان 05:15

18

ارث بری در css

رایگان 10:22

19

ترکیب selector ها

رایگان 14:38
رنگ ها (colors) در css شامل 2 قسمت

20

پراپرتی background-color

رایگان 04:30

21

رنگ ها در css

رایگان 08:37
واحد ها (units) در css شامل 6 قسمت

22

واحد های pixel و percent

رایگان 08:06

23

واحد های em و rem

رایگان 09:17

24

واحد های vw و vh

رایگان 05:11

25

استایل های پیش فرض و ابزار devtools مرورگر

رایگان 14:38

26

تابع ()calc

رایگان 05:15

27

پراپرتی height و width

رایگان 12:23
تایپوگرافی (typography) در css شامل 3 قسمت

28

پراپرتی font-family

رایگان 08:55

29

افزودن فونت در css

رایگان 10:46

30

پراپرتی های دیگر فونت

رایگان 08:02
box model در css شامل 5 قسمت

31

پراپرتی padding

رایگان 10:29

32

پراپرتی margin

رایگان 07:10

33

پراپرتی border

رایگان 06:42

34

پراپرتی outline

رایگان 06:13

35

box-sizing

رایگان 08:08
نمایش (display) در css شامل 3 قسمت

36

پراپرتی display

رایگان 10:09

37

مقدار inline-box

رایگان 07:57

38

پراپرتی های دیگر display

رایگان 04:02
تصویر پس زمینه (background image) در css شامل 4 قسمت

39

پراپرتی background-image بخش اول

رایگان 10:00

40

پراپرتی background-image بخش دوم

رایگان 10:09

41

linear gradient در css

رایگان 05:51

42

background image overlay

رایگان 04:29
موقعیت (position) و float در css شامل 4 قسمت

43

پراپرتی float

رایگان 11:20

44

پراپرتی های position بخش اول

رایگان 14:13

45

پراپرتی های position بخش دوم

رایگان 06:20

46

پراپرتی z-index

رایگان 04:10
رسپانسیو (media query) در css شامل 4 قسمت

47

آشنایی با رسپانسیو (responsive)

رایگان 06:21

48

دستور media query

رایگان 08:40

49

مثال از media query

رایگان 08:29

طراحی mobile-first

رایگان 03:11
pseudo-element و pseudo-class در css شامل 3 قسمت

51

pseudo-element بخش اول

رایگان 07:08

52

pseudo-element بخش دوم

رایگان 04:54

53

pseudo-class

رایگان 08:27
transform و transition و animation در css شامل 4 قسمت

54

پراپرتی transform

رایگان 07:31

55

پراپرتی transition بخش اول

رایگان 06:22

56

پراپرتی transition بخش دوم

رایگان 11:50

57

پراپرتی animation

رایگان 07:44
مباحث تکمیلی در css شامل 6 قسمت

58

متغیر (variable) در css

رایگان 08:27

59

آشنایی با آیکون (icon)

رایگان 12:13

60

پراپرتی text-shadow و body-shadow

رایگان 05:02

61

مبحث browser prefix

رایگان 04:38

62

مبحث Semantic HTML

رایگان 09:22

63

پراپرتی object-fit

رایگان 04:57
پروژه شامل 22 قسمت

64

معرفی پروژه

رایگان 06:10

65

افزودن فونت و آیکون

رایگان 05:55

66

متغیر و استایل های عمومی پروژه

رایگان 07:34

67

بخش هدر (قسمت اول)

رایگان 12:37

68

بخش هدر (قسمت دوم)

رایگان 15:20

69

مرتب کردن کد در vscode

رایگان 07:18

70

بخش ویژگی ها (قسمت اول)

رایگان 17:11

71

بخش ویژگی ها (قسمت دوم)

رایگان 10:00

72

بخش درباره ما (HTML)

رایگان 08:24

73

بخش درباره ما (CSS)

رایگان 27:33

74

بخش محصولات (HTML)

رایگان 08:15

75

بخش محصولات (CSS)

رایگان 22:34

76

بخش خدمات (HTML)

رایگان 09:06

77

بخش خدمات (CSS)

رایگان 21:55

78

بخش تماس با ما (HTML)

رایگان 12:09

79

بخش تماس با ما (CSS)

رایگان 14:58

80

بخش فوتر

رایگان 09:07

81

بخش navbar (قسمت اول)

رایگان 13:56

82

بخش navbar (قسمت دوم)

رایگان 17:48

83

انیمیشن های پروژه

رایگان 08:03

84

ایجاد صفحات دیگر پروژه

رایگان 06:28

85

deploy (آپلود پروژه روی سرور)

رایگان 12:02
سخن پایانی و ادامه مسیر شامل 1 قسمت

86

سخن پایانی و ادامه مسیر

رایگان 11:14

برای دانلود ابتدا وارد سایت شوید

مدرس دوره علی شیخ

مدت دوره 13:47:11

تعداد ویدیو 86

وضعیت دوره : کامل شده

قیمت دوره : رایگان

برای دانلود ابتدا وارد سایت شوید

دسته بندی دوره ها

HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

دوره های پشنهادی

دوره های آموزشی

کامل شده

آموزش Javascript پروژه محور

آموزش جاوا اسکریپت + ES6 به همراه پروژه. جاوا اسکریپت زبان برنامه‌نویسی سطح بالا است که برای ایجاد تعامل با صفحات وب به...

رایگان

06:09:03

آموزش بوت استرپ 5 (Bootstrap) در دنیای واقعی

کامل شده

% 50 تخفیف

آموزش بوت استرپ 5 (Bootstrap) در دنیای واقعی

بعد از مشاهده دوره Bootstrap ۵ نیاز هست که شما دوستان عزیز ‌Bootstrap ۵ را در دنیای واقعی مشاهده کنید. به این معنی که شم...

~~699,000~~ 349,500 تومان

08:43:02

کامل شده

آموزش رایگان css grid (سی اس اس گرید) پروژه محور

بعد از فلکس باکس ماژول دیگری نیز برای صفحه آرایی معرفی شد به نام CSS Grid که باعث شد تا قدرت ما در صفحه آرایی بیشتر شود...

رایگان

05:06:22

کامل شده

آموزش بوت استرپ 5 (Bootstrap) پروژه محور

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

رایگان

12:08:39

مشاهده تمام دوره های آموزشی

کامنت های ارزشمند شما:

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

طراحی mobile-first

توضیحات

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

وب چگونه کار میکند؟

معرفی HTML (اچ تی ام ال)

ابزارهای مورد نیاز

ساخت اولین صفحه

ساختار html

تگ های paragraph و heading

تگ img

تگ link

تگ های strong و em

تگ های list

تگ های table

تگ های form بخش اول

تگ های form بخش دوم

آشنایی با CSS (سی اس اس)

ترتیب اجرای css

selector در css

تگ های span و div

ارث بری در css

ترکیب selector ها

پراپرتی background-color

رنگ ها در css

واحد های pixel و percent

واحد های em و rem

واحد های vw و vh

استایل های پیش فرض و ابزار devtools مرورگر

تابع ()calc

پراپرتی height و width

پراپرتی font-family

افزودن فونت در css

پراپرتی های دیگر فونت

پراپرتی padding

پراپرتی margin

پراپرتی border

پراپرتی outline

box-sizing

پراپرتی display

مقدار inline-box

پراپرتی های دیگر display

پراپرتی background-image بخش اول

پراپرتی background-image بخش دوم

linear gradient در css

background image overlay

پراپرتی float

پراپرتی های position بخش اول

پراپرتی های position بخش دوم

پراپرتی z-index

آشنایی با رسپانسیو (responsive)

دستور media query

مثال از media query

طراحی mobile-first

pseudo-element بخش اول

pseudo-element بخش دوم

pseudo-class

پراپرتی transform

پراپرتی transition بخش اول

پراپرتی transition بخش دوم

پراپرتی animation

متغیر (variable) در css

آشنایی با آیکون (icon)

پراپرتی text-shadow و body-shadow

مبحث browser prefix

مبحث Semantic HTML

پراپرتی object-fit

معرفی پروژه

افزودن فونت و آیکون

متغیر و استایل های عمومی پروژه

بخش هدر (قسمت اول)

بخش هدر (قسمت دوم)

مرتب کردن کد در vscode

بخش ویژگی ها (قسمت اول)

بخش ویژگی ها (قسمت دوم)

بخش درباره ما (HTML)

بخش درباره ما (CSS)

بخش محصولات (HTML)

بخش محصولات (CSS)

بخش خدمات (HTML)

بخش خدمات (CSS)