دوره آموزشی
دوبله زبان فارسی
یادگیری طراحی وب واکنش گرا با 4 پروژه لایو
✅ سرفصل و جزئیات آموزش
طراحی وب واکنش گرا با CSS3 ،HTML5 و بوت استرپ 5 پیشرفته را یاد بگیرید. 4 پروژه لایو با دستورالعمل های گام به گام بسازید.
آنچه یاد خواهید گرفت
- وب سایت های کامل واکنش گرا از ابتدا با HTML5 و CSS3 بسازید.
- 3 پروژه لایو با HTML5 ،CSS3 و بوت استرپ 5 بسازید. (فایل های قابل دانلود پروژه)
- داشبورد واکنش گرای بوت استرپ 5 برای وب اپلیکیشن EMS (سیستم مدیریت Employee) بسازید.
- اپلیکیشن وبلاگ واکنش گرای مبتنی بر بوت استرپ 5 بسازید.
- تم وب سایت آموزشی با بوت استرپ 5 بسازید.
- کروسل jQuery واکنش گرای پیشرفته و سفارشی را در وب سایت یکپارچه سازی کنید.
پیش نیازهای دوره
- شما به یک PC یا لپتاپ نیاز دارید.
- اتصال به اینترنت خوب
توضیحات دوره
(بروزرسانی ژوئن 2023) بخش بوت استرپ اکنون به بوت استرپ 5.3 بروزرسانی شده است. اکنون بخش بوت استرپ دارای درس های بیشتری با بخش های بروزرسانی شده از جدیدترین انتشار بوت استرپ 5.3 می باشد.
اینترنت هر ثانیه در حال رشد است و میلیون ها نفر وب سایت ها را در دستگاه های موبایل بیشتر از دسکتاپ ها مرور می کنند. اکنون زمان آن فرا رسیده است که ساخت طراحی وب واکنش گرا را شروع کنید که سریع، راحت و تمیز باشد.
در این دوره با پیشرفته ترین تکنیک های ساخت وب سایت های واکنش گرا و سازگار با موبایل آشنا خواهید شد. شما یاد خواهید گرفت چگونه عملکرد وب سایت را با فریمورک های CSS مانند بوت استرپ 5 بهبود بخشید.
در پایان دوره، شما قادر خواهید بود هر وب سایتی را ایجاد کنید، چه یک وبلاگ، وب سایت حرفه ای، چه حتی یک وب اپلیکیشن باشد.
ابتدا این دوره، این مسیر طراحی وب یا طراحی وب واکنش گرا، با برخی از مبانی HTML5 و CSS3 شروع می شود. شما چه یک کاربر مبتدی، چه با تجربه باشید، همچنان تعجب خواهید کرد که چه تعداد مهارت های جدید می توانید بدست آورید.
بنابراین، به عنوان محتوای دوره، ابتدا چند تگ مهم و ضروری HTML5 را یاد خواهید گرفت که از طریق آنها یاد خواهید گرفت چگونه هدینگ ها، پاراگراف ها، لینک ها، لیست ها، تصاویر و جداول را ایجاد کنید.
در بخش دوم دوره، یاد خواهید گرفت چگونه فرم های وب HTML5 را طراحی کرده و بسازید. شما همچنین یاد خواهید گرفت چگونه فرم های تماس، فرم های لاگین و فرم های ثبت نام ایجاد کنید.
سپس وارد بخش رسانه می شوید، جایی که یاد خواهید گرفت چگونه با عناصر رسانه مانند تگ های رسانه، تگ های audio، تگ های figures ،Iframes ،video و تگ های details کار کنید.
بعد از پوشش این ملزومات، یاد خواهید گرفت چگونه وب سایت خود را با این تگ ها ساختاردهی کنید. سپس به CSS می پردازید، اینجاست که طراحی وب شروع می شود.
بعداً فقط با HTML5 و CSS3 یک پروژه کامل را از ابتدا خواهید ساخت.
هنگامی که این کار انجام شد، روی محبوب ترین فریمورک CSS یعنی بوت استرپ کار خواهید کرد. همچنین خواهید دید چگونه می توانید 4 پروژه لایو را با HTML5 ،CSS3 و بوت استرپ بسازید.
این دوره برای چه کسانی مناسب است؟
- هر کسی که می خواهد طراحی وب را از ابتدا یاد بگیرد.
- هر کسی که می خواهد توسعه وب را از ابتدا یاد بگیرد.
- هر کسی که می خواهد آخرین استانداردهای HTML5 و CSS3 را یاد بگیرد.
- هر کسی که می خواهد آخرین نسخه بوت استرپ یعنی نسخه 5 را یاد بگیرد.
یادگیری طراحی وب واکنش گرا با 4 پروژه لایو
-
آشنایی با HTML5 و CSS3 00:59
-
آنچه که شما نیاز دارید 00:53
-
نصب ویرایشگر کد برای توسعه 01:27
-
Hello World 01:56
-
ساختار سند HTML5 03:17
-
مبانی HTML5 01:53
-
هدینگ ها و پاراگراف ها 01:39
-
فرمت بندی متن 03:37
-
لینک ها در HTML5 02:13
-
کار با لینک های تودرتو 03:20
-
لیست ها در HTML5 02:33
-
کار با تصاویر 02:49
-
جداول در HTML5 03:42
-
فرم ها در HTML5 03:14
-
ایجاد یک فرم تماس 02:54
-
ایجاد یک فرم لاگین 02:30
-
ایجاد یک فرم ثبت نام 05:11
-
گروه بندی عناصر 02:13
-
تگ های رسانه در HTML5 02:01
-
IFrames در HTML5 04:08
-
تگ Figure در HTML5 00:53
-
عناصر Collapse با تگ Details 02:02
-
ایجاد هدر 02:36
-
ایجاد منوی ناوبری 01:21
-
ایجاد بنر 01:35
-
افزودن محتوا به صفحه 01:38
-
ایجاد سایدبار 01:36
-
ساخت فوتر صفحه 03:24
-
افزودن کپی رایت 00:55
-
CSS درون خطی 02:41
-
CSS داخلی 02:04
-
CSS خارجی 01:31
-
مدل جعبه ای در CSS 03:07
-
مورد هدفم قرار دادن عناصر در CSS 06:10
-
طراحی با مدل جعبه ای 04:47
-
ساخت کانتینر 04:00
-
ساخت هدر وب سایت 03:38
-
ایجاد نوار ناوبری 04:24
-
ساخت منو کشویی 03:17
-
ایجاد اسلایدر تصویر 04:04
-
ساخت نگهدارنده محتوا 03:23
-
ایجاد سایدبار 03:21
-
ساخت فوتر 08:49
-
ایجاد صفحه درباره ما 02:16
-
ایجاد صفحات خدمات 03:50
-
ساخت صفحه محصولات 08:57
-
ساخت صفحه تماس با ما 04:27
-
افزودن منوی ناوبری 03:43
-
توضیح طراحی واکنش گرا (RWD) 03:54
-
انیمیشن با CSS3 06:51
-
مقدمه بوت استرپ 5 02:55
-
آنچه که شما نیاز دارید 02:16
-
Hello World 06:30
-
ساختار سند بوت استرپ 5 01:20
-
نقاط شکست 04:02
-
کانتینرها 02:28
-
شبکه 06:01
-
گزینه های Grid 05:32
-
تودرتوسازی ردیف ها و ستون ها 03:17
-
ترازبندی عمودی ستون 06:22
-
ترازبندی افقی ستون 05:30
-
Wrap کردن ستون و شکست ستون ها 03:27
-
مرتب سازی مجدد و آفست کردن ستون ها 05:38
-
یوتیلیتی های مارجین 06:34
-
Gutter ها 00:49
-
Gutter های افقی 05:17
-
Gutter های عمودی 02:06
-
Gutter های افقی و عمودی 02:47
-
تایپوگرافی 04:42
-
عناصر متن درون خطی 05:46
-
اختصارات و Blockquotes 05:03
-
کار با لیست ها 05:40
-
تصاویر در بوت استرپ 06:20
-
جداول در بوت استرپ 15:36
-
ترازبندی جدول، تودرتوسازی و آناتومی 06:16
-
Figures در بوت استرپ 03:06
-
فرم ها در بوت استرپ 05:58
-
کنترل فرم 13:38
-
بررسی ها و رادیوها 11:38
-
محدوده 03:33
-
گروه های ورودی 23:14
-
برچسب های شناور 05:07
-
طرح بندی فرم 10:11
-
فرم های افقی 06:06
-
فرم ها با قابلیت تغییر اندازه خودکار 07:28
-
فرم های درون خطی 07:10
-
اعتبارسنجی فرم 08:50
-
آکاردئون ها 10:04
-
هشدارها 06:28
-
رد کردن هشدارها 02:32
-
Badges 11:37
-
Breadcrumb 06:45
-
دکمه ها 20:54
-
گروه دکمه 08:14
-
نوار ابزار دکمه 04:59
-
تغییر گروه دکمه 06:06
-
کارت 12:39
-
تغییر اندازه کارت 03:05
-
ناوبری کارت 03:44
-
تصاویر کارت 07:38
-
استایل های کارت 08:48
-
کروسل 03:41
-
کنترل های کروسل 03:20
-
اندیکاتورهای کروسل 03:01
-
کپشن کروسل 03:46
-
افکت محو شدن کروسل 02:12
-
زمانبندی کروسل 02:09
-
غیرفعال سازی Touch Swiping کروسل 01:13
-
کروسل نوع تاریک 00:49
-
(بروزرسانی بوت استرپ 5.3) منسوخ شدن کروسل تاریک و متد جدید 03:05
-
دکمه بستن 02:52
-
(بروزرسانی بوت استرپ 5.3) منسوخ شدن "btn-close-white" و متد جدید 02:04
-
Collapse 04:19
-
Collapse افقی 02:47
-
چند هدف 04:34
-
منوهای کشویی 04:54
-
دکمه Split 03:14
-
تغییر اندازه منوی کشویی 02:19
-
منوهای کشویی تاریک 01:20
-
(بروزرسانی بوت استرپ 5.3) منسوخ شدن منوهای کشویی تاریک و متد جدید 01:59
-
جهت های منوی کشویی 06:09
-
ترازبندی کشویی و Dropup 07:22
-
آیتم های منو 06:25
-
ترازبندی منو 04:40
-
گزینه های ترازبندی منوی کشویی 06:43
-
محتوای منو 03:36
-
فرم های کشویی 04:01
-
گزینه های کشویی 04:03
-
بسته شدن خودکار کشویی 02:42
-
گروه لیست 02:24
-
لینک ها و دکمه های گروه لیست 03:31
-
List Group Flush 00:51
-
لیست شماره گذاری شده 02:36
-
لیست گروهی افقی 03:05
-
کلاس های گروه لیست متنی 03:11
-
گروه لیست با Badges 02:08
-
گروه لیست با محتوای سفارشی 02:58
-
چک باکس های گروهی و رادیوها 02:46
-
تب های جاوا اسکریپت گروه لیست 09:17
-
مودال ها 06:08
-
Backdrop استاتیک 02:02
-
اسکرول کردن محتوای طولانی 01:53
-
وسط چین کردن عمودی 00:46
-
Tooltip ها و Popover های مودال 06:37
-
استفاده از سیستم گرید در مودال 01:28
-
تغییر محتوای مودال 09:47
-
تاگل کردن بین مودال ها 06:50
-
اندازه های مودال اختیاری 03:06
-
نوار ناوبری 04:05
-
(بروزرسانی بوت استرپ 5.3) "bg-body-tertiary" کاملا جدید 02:28
-
لینک های ناوبری 06:05
-
نوار ناوبری کشویی 03:17
-
نوار ناوبری کشویی تودرتو 05:22
-
فرم های نوار ناوبری 01:54
-
گروه ورودی نوار ناوبری 00:57
-
متن ساده نوار ناوبری 01:03
-
رنگ های نوار ناوبری 02:01
-
(بروزرسانی بوت استرپ 5.3) نوار ناوبری در Dark-Mode 01:54
-
(بروزرسانی بوت استرپ 5.3) رنگ جدید نوار ناوبری 03:29
-
کانتینرهای نوار ناوبری 04:00
-
جایگذاری نوار ناوبری 05:02
-
اسکرول کردن نوار ناوبری 02:15
-
نوار ناوبری OffCanvas 10:57
-
نوار ناوبری و تب ها 10:10
-
یوتیلیتی های Flex ناوبری 02:09
-
تب ها و Pills ناوبری با منوی کشویی 04:15
-
رفتارهای تب ها و Pills 12:10
-
بررسی عمیق Offcanvas 06:58
-
(بروزرسانی بوت استرپ 5.3) Offcanvas در Dark-Mode 01:58
-
اسکرول کردن Offcanvas 02:35
-
جایگذاری Offcanvas 02:33
-
صفحه بندی 06:15
-
جایبان ها 08:44
-
بررسی عمیق Popover ها 05:46
-
جهت Poover 01:37
-
Popover های سفارشی 03:02
-
رد کردن با کلیک بعدی 01:09
-
فعال سازی Popover در Hover 00:48
-
نوارهای پیشرفت 03:30
-
ارتفاع و پس زمینه نوار پیشرفت 01:48
-
Stripes و انیمیشن 01:10
-
(بروزرسانی بوت استرپ 5.3) نوار پیشرفت جدید 05:19
-
(بروزرسانی بوت استرپ 5.3) ارتفاع نوار پیشرفت 01:31
-
(بروزرسانی بوت استرپ 5.3) برچسب ها و پس زمینه ها در نوارهای پیشرفت 03:43
-
(بروزرسانی بوت استرپ 5.3) چندین نوار پیشرفت استک شده 04:44
-
(بروزرسانی بوت استرپ 5.3) نوارهای پیشرفت Strip شده و متحرک 02:40
-
Scrollspy 11:16
-
اسپینرها 01:37
-
توسعه اسپینر 01:03
-
ترازبندی اسپینر 04:40
-
اندازه های اسپینر 01:54
-
اسپینر در دکمه ها 02:54
-
Toast ها 16:53
-
ترازبندی Toast 02:46
-
بررسی عمیق Tooltip ها 03:40
-
Tooltip سفارشی 02:32
-
جهت های Tooltip 01:49
-
HTML در Tooltip 01:41
-
Tooltip در عناصر غیرفعال 01:45
-
Clearfix 01:41
-
رنگ ها و پس زمینه 03:41
-
لینک های رنگی 01:17
-
(بروزرسانی بوت استرپ 5.3) یوتیلیتی های لینک 05:43
-
(بروزرسانی بوت استرپ 5.3) focus ring ها 05:06
-
(بروزرسانی بوت استرپ 5.3) Icon Link ها 04:38
-
نسبت ها 02:42
-
پوزیشن ها 04:18
-
استک ها 07:23
-
پنهان از نظر بصری 00:46
-
Stretched Link 02:39
-
کوتاه کردن متن 02:19
-
قانون عمودی 02:13
-
پس زمینه ها 01:48
-
(بروزرسانی بوت استرپ 5.3) رنگ های اضافی پس زمینه 03:42
-
گرادیان های پس زمینه 00:59
-
Opacity پس زمینه 02:22
-
Border ها 03:53
-
رنگ Border 03:06
-
Border Opacity 01:56
-
پهنای Border 01:10
-
شعاع Border 01:49
-
اندازه های Border گرد 02:15
-
رنگ های متن 01:34
-
Opacity متن 01:39
-
نمایش درون خطی و بلوک 02:44
-
پنهان سازی عناصر 03:31
-
نمایش در چاپ 02:30
-
Flex 02:03
-
Flex Direction 05:41
-
Flex Justify Content 02:37
-
Flex Align Items 03:44
-
Flex Align Self 03:58
-
Flex Fill 02:39
-
Flex Grow و Flex Shrink 03:26
-
مارجین های خودکار Flex 01:17
-
Flex با Align Items 01:53
-
Flex Wrap 02:18
-
Flex Order 03:44
-
Flex Align Content 03:57
-
Flex Media Object 03:36
-
شناور واکنش گرا 02:35
-
تعاملات 04:49
-
(بروزرسانی بوت استرپ 5.3) Opacity لینک 03:46
-
(بروزرسانی بوت استرپ 5.3) Underline های لینک 05:45
-
(بروزرسانی بوت استرپ 5.3) لینک های رنگی 02:26
-
(بروزرسانی بوت استرپ 5.3) Object Fit 04:16
-
(بروزرسانی بوت استرپ 5.3) Object Fit واکنش گرا 04:49
-
Opacity 01:17
-
سرریز 03:02
-
پوزیشن 02:32
-
پوزیشن عناصر مرکزی 02:23
-
پوزیشن عناصر مرکزی بین لبه ها 03:39
-
مثال های پوزیشن - بخش 1 08:31
-
مثال پوزیشن - بخش 2 05:17
-
سایه 02:01
-
سایزبندی 05:28
-
فاصله گذاری 03:55
-
Gap 01:40
-
ترازبندی متن 02:45
-
Warp کردن متن 01:30
-
شکست متن 01:04
-
تبدیل متن 01:47
-
اندازه فونت 01:05
-
وزن فونت و حروف ایتالیک 02:31
-
ارتفاع خط 01:34
-
Monoscope 01:06
-
ریست رنگ 01:26
-
دکوراسیون متن 01:57
-
ترازبندی عمودی 03:52
-
رویت پذیری 00:56
-
(بروزرسانی بوت استرپ 5.3) Z-Index 04:51
-
Bootstrap Icons 06:29
-
آشنایی با پروژه اپلیکیشن EMS2.0 03:08
-
ایجاد صفحه لاگین 09:04
-
ایجاد ناوبری داشبورد و لوگوی برند 05:59
-
ایجاد Toggler نوار ناوبری 02:08
-
ایجاد آیتم های نوار ناوبری 02:40
-
ایجاد فیلدهای فرم برای نوار ناوبری 04:56
-
ایجاد کارت ها برای داشبورد 03:32
-
ایجاد صفحه لیست کارمندان 01:59
-
ایجاد سایدبار صفحه کارمندان 03:37
-
ایجاد جدول لیست کارمندان 07:15
-
ایجاد مودال افزودن کارمندان 04:49
-
ایجاد فرم مودال افزودن کارمندان 06:49
-
ایجاد مودال جزئیات برای لیست کارمندان 07:07
-
ایجاد ویرایش جزئیات برای لیست کارمندان 05:04
-
ایجاد مودال حذف برای لیست کارمندان 05:14
-
ایجاد صفحه لیست مشاغل 01:42
-
بروزرسانی صفحه لیست شغل 03:27
-
ایجاد جدول لیست شغل 01:31
-
ایجاد مودال افزودن شغل 02:17
-
ایجاد مودال جزئیات برای شغل 02:05
-
ایجاد ویرایش جزئیات برای مودال شغل 02:52
-
ایجاد مودال حذف برای لیست شغل 03:43
-
مقدمه پروژه وبلاگ 01:21
-
آنچه برای ساخت قالب نیاز است 03:03
-
ایجاد فایل ایندکس 02:18
-
ایجاد نوار ناوبری و لوگوی برند 02:31
-
ایجاد Toggler نوار ناوبری 01:27
-
ایجاد آیتم های نوار ناوبری 03:00
-
ایجاد فیلد جستجو 02:02
-
ایجاد بنر صفحه اصلی 06:29
-
ایجاد مودال سابسکرایب 06:42
-
ایجاد بخش پست های صفحه اصلی 05:48
-
ایجاد فوتر وبلاگ 01:19
-
افزودن افکت های سفارشی به نوار ناوبری 02:28
-
ایجاد هدر صفحه پیش فرض 03:33
-
ایجاد حلقه پست برای صفحه پیش فرض 05:40
-
ایجاد فرم سابسکرایب سایدبار 03:00
-
ایجاد دسته بندی ها و ویجت های آرشیو 02:35
-
ایجاد صفحه و ناحیه محتوای پست 05:00
-
ایجاد فرم کامنت برای پست ها 03:23
-
ایجاد صفحه جستجو 02:06
-
لینک دهی همه موارد به یکدیگر 02:43
-
آشنایی با پروژه 01:51
-
راه اندازی فولدر پروژه 01:16
-
ایجاد نوار ناوبری و برند 02:56
-
ایجاد Toggler نوار ناوبری 01:45
-
ایجاد آیتم های ناوبری 03:12
-
ایجاد فیلد جستجوی نوار ناوبری 01:42
-
ایجاد دکمه های ثبت نام و لاگین نوار ناوبری 06:50
-
ایجاد متن بنر 05:44
-
افزودن تصویر بنر 02:24
-
ایجاد مجموعه ویژگی های سایت 06:43
-
ایجاد هدر حلقه دوره 04:38
-
ایجاد فیلتر حلقه دوره 04:10
-
ایجاد هدر حلقه دوره 02:01
-
ایجاد آیتم لیست دوره واحد 07:19
-
ایجاد داپلیکیت ها از آیتم های دوره 00:39
-
ایجاد محتوای صفحه اصلی 04:18
-
افزودن تصویر محتوای صفحه اصلی 00:47
-
ایجاد ناحیه سابسکرایب 07:23
-
ایجاد فوتر اصلی 01:43
-
ایجاد آدرس فوتر 02:44
-
ایجاد آیتم های لینک برای فوتر 01:42
-
ایجاد آیکون های رسانه های اجتماعی 04:45
-
ایجاد اطلاعات کپی رایت 01:44
-
ایجاد فوتر چسبنده 06:19
-
ایجاد هدر صفحه درباره ما 05:52
-
ایجاد بخش محتوای صفحه درباره ما 03:11
-
ایجاد صفحه دوره ها 04:20
-
ایجاد صفحه دوره واحد و Breadcrumb 05:44
-
ایجاد توضیحات هدر دوره و متادیتا 06:12
-
ایجاد متادیتای دوره 03:26
-
افزودن آیکون ها به متادیتای دوره 05:18
-
افزودن دکمه های دوره 03:28
-
ایجاد تصویر دوره واحد 01:33
-
ایجاد محتوای دوره واحد 07:02
-
ایجاد هدر FAQ 02:14
-
ایجاد لیست FAQ 03:18
-
ایجاد فرم پست سوالات 04:26
-
ایجاد صفحه وبلاگ و هدر 02:17
-
ایجاد لیست پست های وبلاگ 05:01
-
ایجاد سایدبار وبلاگ 02:16
-
ایجاد مودال سابسکرایب 05:22
-
ایجاد فرم سابسکرایب 02:23
-
ایجاد صفحه پست واحد 04:38
-
ایجاد هدر صفحه تماس با ما 05:07
-
ایجاد کارت های صفحه تماس با ما 06:12
-
ایجاد مودال تماس با ما 02:39
-
لینک دهی همه موارد به یکدیگر 04:09
مشخصات آموزش
یادگیری طراحی وب واکنش گرا با 4 پروژه لایو
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:همه سطوح
- تعداد درس:361
- مدت زمان :23:53:35
- حجم :13.71GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
The Great Courses
2,495,000
499,000 تومان
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
6,787,000
1,357,400 تومان
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
8,360,500
1,672,100 تومان
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
5,720,500
1,144,100 تومان
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,206,500
841,300 تومان
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,391,000
878,200 تومان
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
7,261,000
1,452,200 تومان
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:41:00
- تعداد درس: 9
-
سطح دوره:
-
زبان: دوبله فارسی