دوره آموزشی
دوبله زبان فارسی
تسلط به HTML و CSS با ساخت پروژه های واقعی
✅ سرفصل و جزئیات آموزش
در این دوره با ساخت پروژه تجارت الکترونیک با CSS ،flex، گرید، دسترسی به وب، واکنش گرایی، معماری BEM و انیمیشن آشنا می شوید.
آنچه یاد خواهید گرفت:
- طراحی وب سایت های واقعی و واکنش گرا
- مبانی HTML پیشرفته از جمله دسترسی به وب
- طرح بندی پیشرفته CSS شامل flex و طرح بندی گرید
- CSS پیشرفته شامل محاسبه Specificity و معماری BEM
- چگونه وب سایت تجارت الکترونیک و وبلاگ طراحی کنیم؟
- بهترین شیوه ها برای کدنویسی
- افزونه های ضروری برای صرفه جویی در زمان
پیش نیازهای دوره
- مهارت های اولیه کامپیوتر
- یک دوره موثر در HTML و CSS برای مبتدیان یا حتی دانشجویان با دانش متوسط HTML و CSS
- شما تمام تجربیات واقعی را که باید هنگام شروع سفر خود برای تبدیل شدن به توسعه دهنده نرم افزار یا توسعه دهنده وب داشته باشید، در اختیار خواهید داشت.
آنچه این دوره را خاص می کند؟
در این دوره زمان زیادی را صرف توضیح تئوری کرده ایم که به شما کمک می کند تا پیاده سازی های عملی بسیاری از مباحث را به راحتی درک کنید. ما چالش های زیادی را برای شما اضافه کرده ایم تا بتوانید بلافاصله پس از اتمام یک درس، یادگیری خود را تست کنید. شما با بسیاری از افزونه ها آشنا میشوید و در زمان کدنویسی 50 درصد صرفه جویی می کنید. این دوره باعث پیشرفت شما در این زمینه خواهد شد.
برخی از نکات برجسته دوره کدامند؟
ویژگی های هیجان انگیز زیادی در این دوره وجود دارد. از هیجان و شادی غرق خواهید شد.
برخی از ویژگی های هیجان انگیزی که در مورد HTML و CSS خواهید آموخت:
- تایپوگرافی HTML
- لیست ها، لینک و رسانه در HTML
- جدول و فرم ها در HTML
- دسترسی به وب
- سلکتورها و combinators در CSS
- مدل جعبه ای در CSS
- طراحی طرح بندی CSS - شناور، موقعیت یابی، flex و گرید
- طراحی وب سایت واکنش گرا (RWD) CSS
- تبدیل، ترنزیشن و انیمیشن در CSS
- معماری CSS BEM
- پروژه وبلاگ
- پروژه تجارت الکترونیک
این دوره برای چه کسانی مناسب است؟
- تمام سطوح
- بسیار مبتدی پسند
- کسی که می خواهد طراح وب و توسعه دهنده وب باشد.
تسلط به HTML و CSS با ساخت پروژه های واقعی
-
راه اندازی محیط - ویژوال استودیو کد 01:56
-
زبان نشانه گذاری 01:57
-
HTML چیست؟ چرا HTML؟ 02:32
-
تگ های HTML و انواع آن ها 04:20
-
Attribute های HTML 02:23
-
ساختار اولیه فایل HTML 04:20
-
آزمون HTML 1 None
-
کاربرد اولیه تگ های Head 03:31
-
کاربرد پیشرفته تگ های Head و بررسی سئو 10:13
-
چگونه فایل HTML را اعتبارسنجی کنیم؟ 03:44
-
کامنت ها در HTML 04:08
-
هدینگ ها در HTML 06:33
-
شکست خط و پاراگراف HTML 04:47
-
تگ های فرمت بندی متن HTML 04:38
-
انتیتی و نماد HTML 03:32
-
آیکون Font Awesome و افزونه فونت آیکون 05:46
-
آزمون HTML 2 None
-
لیست HTML - بخش 1 06:15
-
لیست HTML - بخش 2 05:07
-
لیست HTML - بخش 3 02:16
-
لیست HTML - بخش 4 - لیست توضیحات 02:03
-
لینک در HTML 06:48
-
چگونه آیکون قابل کلیک را ایجاد کنیم؟ 02:57
-
چگونه تصویر را اضافه کنیم؟ 04:39
-
چگونه از Unsplash تصاویر را دریافت کنیم؟ 01:15
-
چگونه می توان تصویر را روی سرور میزبانی کرد؟ 02:08
-
چگونه با استفاده از iframe یک نقشه اضافه کنیم؟ 03:47
-
آزمون 3 HTML None
-
چگونه با استفاده از iframe هر وب سایتی را اضافه کنیم؟ 01:00
-
چگونه با استفاده از iframe یک ویدئوی یوتیوب اضافه کنیم؟ 01:48
-
چگونه صدا و ویدئو را اضافه کنیم؟ 02:00
-
جدول HTML 07:51
-
فرم HTML - بخش 1 - فرم اولیه 07:09
-
فرم HTML - بخش 2 - فرم قابل دسترسی 04:22
-
فرم HTML - بخش 3 - دکمه رادیویی و ناحیه متنی 04:56
-
ارسال داده فرم به آدرس ایمیل 04:25
-
دسترسی به وب - بخش 1 - تست دسترسی به وب 03:53
-
دسترسی به وب - بخش 2 - HTML سمانتیک در مقابل HTML غیرسمانتیک 07:26
-
دسترسی به وب - بخش 3 02:39
-
دسترسی به وب - بخش 4 - نقش و aria-label 03:45
-
آزمون 4 HTML None
-
طرح کلی ماژول CSS 01:34
-
چرا CSS؟ - سینتکس قوانین CSS 04:25
-
CSS درون خطی 04:55
-
CSS داخلی 03:03
-
CSS خارجی 04:43
-
سلکتورها و Combinators در CSS 02:24
-
سلکتورهای عنصر و گروه بندی 04:46
-
سلکتورهای تودرتو و جهانی 07:39
-
سلکتورهای شناسه 04:32
-
سلکتورهای کلاس 05:12
-
افزونه تکمیل خودکار HTML به CSS 02:45
-
سلکتورهای Attribute 05:33
-
سلکتور شبه کلاس و شبه عنصر 14:05
-
سلکتورهای نوادگان، فرزند، مجاور و خواهر و برادر عمومی 06:51
-
آزمون 1 CSS None
-
تایپوگرافی - ویژگی های فونت 07:17
-
تایپوگرافی - چگونه google font را اضافه کنیم؟ 04:58
-
تایپوگرافی - چگونه رنگ اضافه کنیم؟ 06:48
-
تایپوگرافی - چگونه متن را فرمت بندی کنیم؟ 08:24
-
مدل جعبه ای - محتوا و Padding 07:26
-
مدل جعبه ای - بوردر و مارجین 05:31
-
ویژگی های اندازه های جعبه 07:57
-
تایپوگرافی - چگونه آیکون ها را اضافه و استایل دهی کنیم؟ 05:27
-
عناصر درون خطی در مقابل بلوک درون خطی در مقابل عناصر بلوک 09:08
-
ویژگی های عرض در مقابل حداکثر عرض 04:46
-
ویژگی های opacity و سرریز 07:05
-
ویژگی های پس زمینه 08:20
-
آزمون 2 CSS None
-
متغیرها و فیلتر 08:44
-
طراحی سایه ها و کارت 11:11
-
طراحی طرح بندی - شناور 15:52
-
طراحی طرح بندی - موقعیت یابی 12:24
-
طراحی طرح بندی - نوار ناوبری flex و شاخص زد 06:56
-
طراحی طرح بندی - بدون طرح بندی flex 12:16
-
طراحی طرح بندی - با طرح بندی flex 10:16
-
طراحی طرح بندی - (تسک 1) 02:07
-
طراحی طرح بندی - آیتم flex 07:26
-
طراحی طرح بندی - (تسک 2 و تسک 3) 05:26
-
طراحی طرح بندی - (تسک 4) 05:56
-
طراحی طرح بندی - چیت شیت CSS FlexBox 01:57
-
طراحی طرح بندی - طرح بندی گرید و ریفکتور کردن کدها 04:35
-
طراحی طرح بندی - طرح بندی دوباره flex 07:30
-
طراحی طرح بندی - مثال طرح بندی گرید 08:44
-
طراحی طرح بندی - آیتم شبکه 05:28
-
آزمون 3 CSS None
-
طراحی وب سایت واکنش گرا - مبانی 03:47
-
طراحی وب سایت واکنش گرا - کوئری رسانه 15:13
-
طراحی وب سایت واکنش گرا - بخش پایانی 14:10
-
چگونه یک دایره ایجاد کنیم؟ 04:43
-
دارایی ترنزیشن 10:05
-
ترنزیشن (تسک 6) 02:00
-
ویژگی تبدیل - بخش 1 05:01
-
ویژگی تبدیل - بخش 2 (تسک 7) 07:51
-
انیمیشن - بخش 1 05:51
-
ایجاد یک دایره (تسک 8) 01:31
-
انیمیشن - بخش 2 11:29
-
اولویت سلکتورها 11:02
-
محاسبه امتیاز اولویت و Specificity 05:26
-
مشکلات بدون معماری BEM 15:28
-
معماری BEM - بلوک، عنصر و مودیفایر 14:12
-
تمرین و توسعه BEM 06:31
-
آزمون 4 CSS None
-
دموی پروژه وبلاگ 01:41
-
راه اندازی اولیه برای پروژه وبلاگ 11:32
-
طراحی نوار ناوبری 14:42
-
طراحی نوار ناوبری واکنش گرا 05:55
-
طراحی بنر 14:36
-
طراحی بخش بنر واکنش گرا 09:55
-
طراحی بخش درباره ما 19:49
-
طراحی بخش درباره ما واکنش گرا 03:38
-
طراحی بخش آرشیو 13:30
-
طراحی بخش آرشیو واکنش گرا 03:16
-
طراحی بخش پست وبلاگ 19:02
-
بخش پست بلاگ واکنش گرا 03:32
-
طراحی بخش تماس با ما 13:18
-
طراحی بخش تماس با ما واکنش گرا 02:38
-
طراحی بخش فوتر 21:39
-
افزودن منوی جمع شونده 11:19
-
استقرار وب سایت در Netlify 04:55
-
دموی پروژه 04:59
-
راه اندازی پروژه 07:45
-
ایجاد نوار ناوبری 09:25
-
طراحی نوار ناوبری 11:02
-
نوار ناوبری واکنش گرا 06:46
-
نوار ناوبری جمع شونده 05:08
-
ایجاد و طراحی فوتر 05:45
-
راه اندازی همه صفحات دیگر 04:12
-
ایجاد بنر 08:24
-
طراحی بنر 10:23
-
ایجاد سایدبار 12:58
-
طراحی سایدبار 03:21
-
ایجاد و طراحی بخش اکشن 08:40
-
ایجاد محصول واحد 06:57
-
طراحی محصول واحد 10:00
-
ایجاد و طراحی نشان 06:04
-
ایجاد چندین محصول 05:51
-
ایجاد صفحه بندی 03:46
-
طراحی صفحه بندی 05:21
-
ایجاد صفحه جزئیات محصول 08:26
-
طراحی صفحه جزئیات محصول 03:08
-
ایجاد بخش آیتم های سبد خرید 12:53
-
طراحی بخش آیتم های سبد خرید 07:55
-
ایجاد بخش پرداخت سبد خرید 04:29
-
طراحی بخش پرداخت سبد خرید 05:30
-
ایجاد و طراحی صفحه پروفایل 10:24
-
ایجاد صفحه رجیستر 07:11
-
طراحی صفحه رجیستر 07:57
-
ایجاد و طراحی صفحه لاگین 04:27
-
ایجاد صفحه تماس با ما 08:16
-
طراحی صفحه تماس با ما 04:08
-
استقرار پروژه در Netlify 04:41
مشخصات آموزش
تسلط به HTML و CSS با ساخت پروژه های واقعی
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:همه سطوح
- تعداد درس:152
- مدت زمان :16:10:40
- حجم :9.3GB
- زبان:دوبله زبان فارسی
- دوره آموزشی: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
-
سطح دوره:
-
زبان: دوبله فارسی