دوره آموزش حرفه ای طراحی قالب با Html Css FlexBox از صفر
- سطح دوره: متوسط
- اشتراک گذاری:
- مدت زمان 28:7:25
- اخرین بروزرسانی 2022/09/01
مباحث این دوره
125 درس28:7:25
معرفی
فصل اول – بررسی مفاهیم و اصطلاحات
فصل دوم – مروری بر Media Query
فصل سوم – نامگذاری به روش BEM
فصل چهارم – پروژه سایت شرکتی
1استخراج فایل های مورد نیاز از طرح17:27
2ایجاد ساختار اولیه پروژه20:33
3افزودن و ویرایش کد های مورد نیاز23:13
4کد نویسی Container18:36
5کد نویسی ساختار Html بخش Header22:48
6کد نویسی همبرگر منو بخش اول20:18
7کد نویسی همبرگر منو بخش دوم12:45
8کد نویسی NavMenu برای موبایل16:16
9کد نویسی Menu برای دسکتاپ19:03
10تکمیل بخش Header(Nav)15:15
11نوشتن کامنت های بخش Header5:02
12کد نویسی بخش HeaderContent17:41
13ریسپانسیو سازی بخش HeaderContent16:28
14مرور بر مفاهیم و رفع اشکالات14:26
15ریزکاری های بخش Header – اتمام Header17:10
16شروع Main – کد نویسی ساختار Html بخش Services21:03
17کد نویسی Css بخش Services13:16
18ریسپانسیو سازی بخش Services – اتمام Services15:23
19کد نویسی ساختار Html بخش Destinations15:55
20کد نویسی Css بخش Destinations17:32
21کد نویسی Css بخش Destinations-Place جلسه اول15:54
22کد نویسی Css بخش Destinations-Place جلسه دوم9:29
23ریسپانسیو سازی بخش Destinations13:18
24ریزکاری های بخش Destinations – اتمام Destinations11:08
25کد نویسی ساختار Html بخش Newsletter18:50
26کد نویسی Css بخش Newsletter جلسه اول20:07
27کد نویسی Css بخش Newsletter جلسه دوم18:53
28ریسپانسیو سازی بخش Newsletter – اتمام Newsletter20:20
29کد نویسی ساختار Html بخش Footer جلسه اول13:33
30کد نویسی ساختار Html بخش Footer جلسه دوم16:57
31کد نویسی Css بخش Footer جلسه اول18:21
32کد نویسی Css بخش Footer جلسه دوم15:30
33ریسپانسیو سازی بخش Footer – اتمام Footer23:49
34رفع باگ ها و تکمیل پروژه بخش اول14:29
35رفع باگ ها و تکمیل پروژه بخش دوم – اتمام پروژه سایت شرکتی19:41
36بازبینی و اصلاحیه پروژه15:26
37فشرده سازی تصاویر و فایل های Css – اضافه کردن پیشوند کد های Css20:00
38سخن پایانی – پایان فصل چهارم2:05
39آزمون پایانی فصل چهارم
فصل پنجم – پیاده سازی Grid System
1سیستم گرید(Grid System) چیست؟9:53
2توضیح نقاط شکست(Breakpoints) و کلمات کلیدی مربوطه11:31
3کد نویسی کلاس row و col12:49
4نحوه محاسبه عرض ستون ها15:05
5کد نویسی تمامی کلاس های col + تمرین13:40
6حل تمرین جلسه قبل – توضیح نحوه استفاده از ردیف و ستون16:16
7ایجاد ستون های ریسپانسیو جلسه اول12:02
8ایجاد ستون های ریسپانسیو جلسه دوم9:17
9تمرین – پیاده سازی طرح با سیستم گرید9:39
10حل تمرین جلسه قبل – پایان فصل پنجم10:07
11آزمون پایانی فصل پنجم
فصل ششم – پروژه سایت شخصی
1فایل های مورد نیاز و خروجی گرفتن از طرح16:21
2ایجاد ساختار پروژه و دسته بندی فایل های مورد نیاز12:22
3تحلیل طرح سایت شخصی15:38
4کد نویسی ساختار Html بخش Header5:32
5کد نویسی Css بخش Header جلسه اول15:45
6کد نویسی Css بخش Header جلسه دوم15:46
7کد نویسی Css بخش Header جلسه سوم12:49
8ریسپانسیو سازی بخش Header15:52
9تکمیل بخش Header12:21
10کد نویسی ساختار Html بخش Home13:19
11کد نویسی Css بخش Home جلسه اول17:48
12کد نویسی Css بخش Home جلسه دوم16:11
13ریسپانسیو سازی بخش Home جلسه اول13:13
14ریسپانسیو سازی بخش Home جلسه دوم19:21
15تکمیل بخش Home28:43
16کد نویسی ساختار Html بخش About us13:22
17کد نویسی Css کامپوننت Sections12:16
18کد نویسی Css بخش About us جلسه اول15:03
19کد نویسی Css بخش About us جلسه دوم7:41
20ریسپانسیو سازی بخش About us – اتمام About us14:58
21کد نویسی ساختار Html بخش Services10:06
22کد نویسی Css بخش Services16:24
23ریسپانسیو سازی بخش Services – اتمام Services20:18
24تحلیل ساختار بخش Resume جلسه اول14:05
25تحلیل ساختار بخش Resume جلسه دوم8:24
26کد نویسی ساختار Html بخش Resume12:20
27کد نویسی Css بخش Resume جلسه اول13:27
28کد نویسی Css بخش Resume جلسه دوم15:59
29کد نویسی Javascript بخش Resume جلسه اول8:03
30کد نویسی Css بخش Resume جلسه سوم15:58
31کد نویسی Javascript بخش Resume جلسه دوم16:44
32ریسپانسیو سازی بخش Resume – اتمام Resume22:17
33کد نویسی ساختار Html بخش Portfolio12:46
34کد نویسی Css بخش Portfolio13:17
35ریسپانسیو سازی SwiperJs بخش Portfolio9:55
36ریسپانسیو سازی بخش Portfolio5:28
37کد نویسی NavigationTabs بخش Portfolio15:58
38بازنویسی و بهبودی کد های Javascript بخش Portfolio – اتمام Portfolio9:27
39کد نویسی ساختار Html بخش Pricing9:37
40کد نویسی Css بخش Pricing جلسه اول9:09
41کد نویسی Css بخش Pricing جلسه دوم11:41
42ریسپانسیو سازی بخش Pricing – اتمام Pricing2:51
43کد نویسی ساختار Html بخش Contact us10:58
44کد نویسی Css بخش Contact us جلسه اول11:42
45کد نویسی Css بخش Contact us جلسه دوم12:34
46کد نویسی Css بخش Contact us جلسه سوم7:48
47ریسپانسیو سازی بخش Contact us – اتمام Contact us4:39
48کد نویسی ساختار Html بخش Footer4:07
49کد نویسی Css بخش Footer12:21
50ریسپانسیو سازی بخش Footer – اتمام Footer00:02:56
51اصلاح و بهبود جزئیات پروژه21:02
52رفع مشکل تار شدن متن ها هنگام استفاده از ()skew00:14:21
53کد نویسی Javascript بخش Scroll to section13:49
54مقدمه ای بر Intersection Observer API13:04
55تکمیل نهایی بخش Scroll پروژه توسط Intersection Observer10:14
56مقدمه ای بر Dark mode و بررسی روش های پیاده سازی00:13:17
57پیاده سازی Dark mode جلسه اول – ایجاد دکمه Switch Theme00:10:27
58پیاده سازی Dark mode جلسه دوم – تغییر رنگ ها00:11:57
59پیاده سازی Dark mode جلسه سوم – تغییر رنگ ها8:07
60پیاده سازی Dark mode جلسه چهارم – ذخیره تم در LocalStorage – اتمام پروژه سایت شخصی14:09
61بررسی فایل های نهایی پروژه و نکات مربوطه7:47
62حل مشکل Tap Highlight عناصر9:40
صحبتی با شما
فصل هفتم – نکات مهم برای بالا بردن مهارت (بزودی)
