دوره آموزشی
دوبله زبان فارسی
طراحی وب واکنشگرا با HTML5 و CSS
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- وبسایتهای واکنشگرا و تطبیقپذیر را با استفاده از HTML5 و CSS ایجاد کنید.
- تکنیکهای پیشرفته CSS را برای طرح بندی و طراحی پیادهسازی کنید.
- دسترسیپذیری وب را با استانداردهای WCAG و WAI-ARIA بهبود بخشید.
- عملکرد وب را بهینهسازی کرده و تصاویر واکنشگرا را به طور مؤثر مدیریت کنید.
- به ویژگیهای پیشرفته CSS و ویژگیهای سفارشی مسلط شوید.
پیشنیازهای دوره
- تجربه قبلی در زمینه اصول اولیه توسعه وب توصیه میشود.
توضیحات دوره
اگر از وبسایتهای ایستایی که عملکرد خوبی ندارند خسته شدهاید، این دوره مسیری است برای ایجاد وبسایتهای سریع، قابل دسترس و از نظر بصری چشمگیر که بازدیدکنندگان را به کاربران وفادار تبدیل میکنند. این دوره توسط Ben Frain تدریس میشود و بر اساس کتاب پرفروش او با عنوان «طراحی وب واکنشگرا با HTML5 و CSS، ویرایش چهارم» ساخته شده است!
در این دوره، شما با بررسی اصول طراحی واکنشگرا و درک پشتیبانی مرورگرها شروع خواهید کرد. سپس، یاد میگیرید که نشانهگذاری HTML مؤثری بنویسید، از جمله عناصر معنایی جدید در HTML5، و دسترسیپذیری را با انطباق با WCAG و WAI-ARIA بهبود بخشید.
در مرحله بعد، به بررسی پیچیدگیهای مدیا کوئریها و کانتینر کوئریها خواهید پرداخت و پیادهسازی و تست طراحیهای واکنشگرا را درک خواهید کرد. شما طرحهای با پیکسل ثابت را به طرح بندی های شناور تبدیل کرده و از قدرت Flexbox و CSS Grid برای طراحیهای پیچیده و انعطافپذیر استفاده خواهید کرد.
بخشهای پایانی شما را با ترنزیشنها، ترنسفورمها و انیمیشنها، به همراه ویژگیهای پیشرفته CSS مانند ویژگیهای سفارشی و توابع CSS، و همچنین تکنیکهای عملی برای فرمهای HTML5، قابلیتهای پیشرفته CSS و بهینهسازی عملکرد آشنا خواهد کرد.
در پایان این دوره، شما مهارتهای لازم برای ساخت وبسایتهایی را خواهید داشت که سریع، کارآمد و با هر دستگاهی سازگار هستند.
این دوره برای چه کسانی مناسب است؟
- این دوره برای توسعهدهندگان و طراحان وب با درک اولیه از HTML و CSS طراحی شده است که میخواهند دانش خود را در زمینه طراحی وب واکنشگرا عمیقتر کنند.
طراحی وب واکنشگرا با HTML5 و CSS
-
مقدمه 01:33
-
پشتیبانی مرورگر، ابزارها و نمونههای کد 06:21
-
درک طراحی وب واکنشگرا 09:48
-
ورود مدیا کوئریها 05:52
-
خلاصه 02:42
-
نوشتن نشانهگذاری HTML 02:41
-
شروع صحیح صفحات HTML 12:09
-
عناصر معنایی جدید در HTML5 12:17
-
عناصر گروهبندی HTML 07:58
-
عناصر معنایی سطح متن در HTML 08:50
-
استفاده از عناصر HTML5 03:45
-
انطباق با استانداردهای دسترسیپذیری WCAG و WAI-ARIA برای وب اپلیکیشنهای قابل دسترستر 06:23
-
تعبیه رسانه در HTML5 14:49
-
عنصر 08:29
-
خلاصه و تکالیف 02:09
-
مدیا کوئریها و کانتینر کوئریها 03:47
-
تگ meta و مدیا کوئریها 19:40
-
تست طراحیهای واکنشگرا روی امولاتورها و شبیهسازها 04:16
-
آیا باید مدیا کوئریها را در فایلهای جداگانه قرار داد؟ 03:09
-
مدیا کوئریها را یکپارچه کنیم یا هرجا مناسب است پراکنده کنیم؟ 05:30
-
مدیا کوئریهای سطح 5 11:34
-
کانتینر کوئریها 13:42
-
خلاصه 01:50
-
طرح بندی شناور و Flexbox - مقدمه 02:01
-
تبدیل یک طرح با پیکسل ثابت به یک طرح بندی شناور متناسب 11:44
-
چرا به Flexbox نیاز داریم؟ 02:14
-
پیادهسازی Flexbox 14:16
-
فوتر چسبنده 02:40
-
بازآرایی بصری 09:20
-
خلاصه 01:46
-
طرح بندی با CSS Grid - مقدمه 02:28
-
سینتکس اولیه Grid 11:33
-
بهبود سیستم Grid خود 09:22
-
جایگذاری و اندازهبندی آیتمهای طرح بندی گرید 09:11
-
خطوط نامگذاری شده گرید و نواحی قالب گرید 11:46
-
auto-fit و auto-fill 06:01
-
سینتکس خلاصه 13:43
-
اجازه دادن به عناصر تودرتو برای شرکت در گرید 08:53
-
خلاصه 03:54
-
انتخابگرهای CSS، تایپوگرافی و بیشتر 02:56
-
انتخابگرها، واحدها و قابلیتها 06:10
-
انتخابگرهای CSS - فراتر از معمول! 11:49
-
شبه-کلاسهای ساختاری CSS 13:57
-
انتخاب مبتنی بر nth در طراحیهای وب واکنشگرا 08:14
-
انتخابگرهای ترکیبی – فرزند، همزاد بعدی و همزادهای بعدی 10:27
-
گروهبندی انتخابگرها 14:04
-
واحدهای طول وابسته به ویوپورت واکنشگرا 07:57
-
استفاده از supports@ برای انشعاب در CSS 09:20
-
تایپوگرافی وب 05:09
-
دستور font-face@ در CSS 26:04
-
فونتهای متغیر 13:52
-
خلاصه 01:04
-
مقدمه 02:04
-
فرمت رنگ RGB 07:14
-
کانال آلفا 06:50
-
مفاهیم و اصطلاحات رنگ 06:41
-
فضاهای رنگ پیشرفته 06:02
-
بررسی در رنگ Lab و LCH 07:06
-
OKLab و OKLCH 12:49
-
استفاده از توابع ()color-mix و ()color-contrast 09:45
-
خلاصه 01:43
-
مقدمه و اهداف 01:40
-
سایههای متن و سایههای باکس 10:58
-
گرادینتهای پسزمینه 16:12
-
گرادینتهای مخروطی، گرادینتهای تکرارشونده و الگوهای گرادینت پسزمینه 11:50
-
تصاویر پسزمینه چندگانه 11:49
-
فیلترهای CSS 14:17
-
clip-path در CSS 09:43
-
Mask-Image و Mix-Blend-Mode 09:32
-
خلاصه 01:29
-
مقدمهای بر تصاویر واکنشگرا 04:12
-
فرمتهای تصویری مدرن 11:25
-
سینتکس تصویر واکنشگرا 09:59
-
کارگردانی هنری با عنصر picture 05:57
-
خلاصه 01:33
-
مقدمهای بر SVG 05:10
-
درک یک SVG اولیه 05:32
-
عناصر و ویژگیهای SVG 10:51
-
ساخت SVGs 06:09
-
درج SVG در صفحات وب 09:07
-
استفاده مجدد از آبجکت های گرافیکی از Symbols 08:05
-
رنگآمیزی مجدد SVGs با ویژگیهای سفارشی CSS 06:06
-
استفاده مجدد از آبجکت های گرافیکی از منابع خارجی 04:41
-
رنگآمیزی SVGs با mask-image 04:34
-
بررسی متدهای درج SVG 04:23
-
انیمیشن SMIL 07:07
-
استایلدهی به SVGs 05:25
-
متحرکسازی یک SVG با CSS 03:42
-
متحرکسازی SVG با جاوااسکریپت 10:31
-
استفاده از SVGs به عنوان فیلترها 03:07
-
درک مدیا کوئریها در SVG 02:51
-
بهینهسازی SVGs 04:15
-
خلاصه و منابع 02:30
-
مقدمهای بر ترنزیشنها، ترنسفورمها و انیمیشنها 02:25
-
ترنزیشنهای CSS و ویژگیهای آنها 12:55
-
درک توابع زمانی برای ترنزیشنهای CSS 07:17
-
ترنسفورمهای 2D در CSS 12:05
-
درک ویژگی transform-origin 02:22
-
ترنسفورمهای 3D در CSS 11:07
-
یادگیری درباره ویژگی Translate3D 11:38
-
انیمیشنهای CSS، تمرینات، آموزش و خلاصه 20:18
-
مقدمهای بر توابع CSS و ویژگیهای سفارشی 03:03
-
شروع با ویژگیهای سفارشی CSS 07:09
-
تغییر ویژگیهای سفارشی با JavaScript 07:10
-
ویژگیهای ویژگیهای سفارشی 07:57
-
بررسی توابع CSS به طور دقیق 06:13
-
نگاهی به توابع min ،max و clamp در CSS 07:24
-
ادغام دانش ما تا این نقطه 08:33
-
خلاصه 02:37
-
مقدمهای بر فرمهای HTML5 02:32
-
درک کامپوننت های فرمهای HTML5 05:33
-
بررسی در ویژگیهایی مانند 'required' و 'autofocus' 06:31
-
یادگیری درباره صفات autocomplete و list 07:38
-
انواع Input در HTML5 14:25
-
درک ورودیهای تاریخ و زمان 09:58
-
استایلدهی به فرمهای HTML5 با CSS 02:38
-
مشخص کردن فیلدهای الزامی 08:36
-
استایلدهی به نشانههای ورودی و رنگهای پسزمینه با CSS 05:48
-
خلاصه 00:57
-
مقدمهای بر ویژگیهای CSS و لایههای آبشاری 05:07
-
تسلط بر لایههای آبشاری برای بهبود مدیریت استایل 17:00
-
یادگیری درباره تو در تو سازی CSS 01:24
-
سادهسازی CSS با انتخابگرها و مدیا کوئریهای تودرتو 09:47
-
خلاصه 01:32
-
نکات و تکنیکها - مقدمه 01:50
-
خلاصهسازی متن در CSS 06:32
-
پنلهای اسکرولشونده و اسکرولبارهای سفارشی 11:21
-
CSS Scroll Snap 07:49
-
اسکرول نرم با CSS scroll-behavior 04:00
-
نکات مهم پایانی 04:20
-
تعیین سطوح پشتیبانی مرورگر 04:48
-
فریمورکهای CSS و لینتینگ 07:35
-
بررسی عملکرد و ابزارهای عملکرد 09:53
-
پدیده بزرگ بعدی چیست؟ 03:17
-
خلاصه 01:13
مشخصات آموزش
طراحی وب واکنشگرا با HTML5 و CSS
- تاریخ به روز رسانی: 1404/06/21
- سطح دوره:متوسط
- تعداد درس:135
- مدت زمان :16:38:22
- حجم :12.87GB
- زبان:دوبله زبان فارسی
- دوره آموزشی: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
-
سطح دوره:
-
زبان: دوبله فارسی