دوره پیشرفته CSS و JavaScript

یک دوره آنلاین انعطاف پذیر، 4 هفته ای که به شما مهارت های پیشرفته را به شما آموزش می دهد. یاد بگیرید که انیمیشن های فانتزی را ایجاد کنید، از کتابخانه های کد جدید استفاده کنید و اطلاعات را از وب سایت های دیگر با API ها و AJAX استفاده کنید.
آن را برای افراد راحت با HTML، CSS و Level Beginner JavaScript طراحی شده و می خواهید کمی عمیق تر بشوید.
این گام بعدی بعدی برای دانش آموزانی است که قبلا جاوا اسکریپت ما را برای دوره طراحان تکمیل کرده اند.

عنوان اصلی : Advanced CSS + Javascript

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

خوش آمدگویی و معرفی دوره
نمای کلی پروژه جشنواره پنجاه و معرفی ویرایشگر SuperHi
اضافه کردن HTML اولیه و توضیح ساختار ما
استفاده از فونت های سفارشی در سایت های ما با @font-face
تنظیم سبک های بخش عرض و ارتفاع کامل ما
افزودن انیمیشن به عناصر با استفاده از فریم های کلیدی CSS
با استفاده از CSS جلوه‌های قدیمی خود را طراحی کنید
استفاده از حالت های ترکیبی CSS برای ایجاد جلوه های همپوشانی
استفاده از فریم‌های کلیدی برای ایجاد جلوه‌های قدیمی وب
استفاده از جاوا اسکریپت برای ایجاد یک آرایه تکرار شونده طولانی از متن مارکی
دریافت عناصر از صفحه ما و تغییر محتوای آنها با استفاده از وانیلی جاوا اسکریپت
با استفاده از CSS به مجموعه‌های خط‌آپ خود استایل می‌دهیم
افزودن تصادفی به موقعیت های شکل پس زمینه با استفاده از انتخابگرهای فرزند n
ایجاد یک انیمیشن ضربان دار برای شکل های دایره پس زمینه ما
متحرک سازی عناصر با استفاده از جاوا اسکریپت به جای CSS
چگونه توابع را بر روی چندین عنصر با استفاده از جاوا اسکریپت در مقابل جی کوئری اجرا می کنیم
ایجاد تاخیر انیمیشن افزایش خودکار با استفاده از حلقه های جاوا اسکریپت
استفاده از انیمیشن‌های چرخشی در شکل‌های squiggle ما
استفاده از StackOverflow برای یافتن تابعی که یک عدد تصادفی برای ما تولید می کند
افزودن جاوا اسکریپت مدرن به کد ما برای ظرافت بیشتر و آینده نگری
یافتن کتابخانه‌های جاوا اسکریپت در GitHub برای کمک به ما در برخی از عملکردها
محو شدن محو شدن در انتقال‌ها در پیمایش
استفاده از حلقه‌های جاوا اسکریپت برای اعمال تأخیر انتقال خودکار افزایشی به ترکیب‌ها و شکل‌های ما
پیوند دادن به محتوای صفحه ما با استفاده از تگ های لنگر در ویژگی های id
استفاده از جاوا اسکریپت برای پیمایش روان به عناصر صفحه ما
افزودن سبک های طرح بندی برای بخش پاورقی با استفاده از flexbox
استفاده از flexbox برای رسیدن به طرح نامنظم فرم ثبت نام به راحتی
با استفاده از پرس و جوهای رسانه، سایت خود را بر روی صفحه نمایش های کوچکتر قرار می دهیم
استفاده از CampaignMonitor برای ایجاد مشترک از صفحه ما
معرفی پروژه
اسلایدهای تعاملی جدید
آنچه یاد خواهیم گرفت
افزودن HTML اولیه ما
طرح بندی ستون با استفاده از flexbox
طراحی نمایانگر ورودی جستجو و بارگیری
API ها چیست و چرا عالی هستند؟
دریافت داده ها در پس زمینه با استفاده از fetch
استفاده از Fetch برای دریافت داده از API Giphy
ایجاد عنصر ویدیوی gif با استفاده از جاوا اسکریپت
تفکیک وظایف به عملکردهای خودشان
استفاده از CSS Grid برای چیدن ویدیوهایمان روی هم
پاسخ به رویدادهای فشار کلیدی در ورودی
استفاده از داده‌های رویداد برای آزمایش کلیدی که فشار داده‌ایم
بهبود راهنمایی جستجوی ما برای نشان دادن آنچه کاربر در حال جستجو است
قرار دادن کد واکشی ما در تابعی که از عبارت جستجو استفاده می کند
دریافت یک مورد تصادفی از آرایه تصاویر ما
تغییر وضعیت بارگیری در صفحه ما
افزودن یک جلوه انیمیشن ویدیویی در بارگذاری ویدیو
پاک کردن پشته گیف و بازنشانی جستجو
پاسخ دادن به رویدادها در کل صفحه
رسیدگی به خطاها زمانی که همه چیز اشتباه می شود
سبک‌ها و ترفندهای واکنش‌گرا
پایان پروژه و خلاصه کد نهایی
معرفی پروژه
SVG چیست و چگونه از آنها استفاده کنیم؟
ایجاد صفحه خودمان با یک تصویر SVG ساده
معرفی Tachyons به عنوان یک جعبه ابزار سبک وزن CSS
مقدمه ای بر سیستم شبکه ای با استفاده از تاکیون ها
ساخت شبکه کامل ما
تکمیل شبکه نهایی و رنگ‌های پس‌زمینه
رسم دایره ها در SVG برای ساخت انیمیشن تونل ما
معرفی anime.js و استفاده از آن برای متحرک سازی تونل ما
استفاده از مبدا تبدیل و آسان کردن برای افزودن شخصیت به انیمیشن‌هایمان
استفاده از تابع تاخیر برای ایجاد افکت متحرک متحرک
افکت انیمیشن تسمه نقاله ما
افزودن پالت رنگ ما با استفاده از کلاس های سبک وزن CSS
مشاهده دموهای anime.js و استفاده از آنها برای متحرک سازی مسیرها
استفاده از تکنیک مسیر مشابه برای ایجاد یک انیمیشن موج
استفاده از SVGOMG برای فشرده سازی SVG
استفاده از سایه جعبه داخلی برای افزودن حاشیه به کادرهایمان
افزودن کد متقاطع SVG به
استفاده از جاوا اسکریپت برای تکثیر محتوای SVG ما چندین بار
متحرک سازی صلیب های ما با استفاده از افکت چرخش تاخیری
تکرار همین تکنیک برای مربع هایمان
متحرک سازی الگوی نقطه ما با استفاده از تبدیل مقیاس
افزودن عنوان ما به عنوان SVG خام
متحرک سازی جعبه های چشمک زن با استفاده از رنگ پس زمینه و آرایه ها
ایجاد انیمیشن تونل مربعی خود با استفاده از SVG rects
صفحه ما را اصلاح می کنیم تا آن را واکنش گرا کنیم
ترفندها و خلاصه نهایی پروژه
معرفی پروژه
افزودن HTML اولیه ما
افزودن فونت های سفارشی ما
طراحی بخش مقدماتی ما
درباره واحدهای em و rem
اعمال stroke به متن عنوان ما
طراحی کردن دکمه تماس به اقدام ما
مقدمه ای بر باسس
شبکه های 12 ستونی پاسخگو با استفاده از basscs
افزودن بخش درباره و تنوع عنوان
استفاده از متغیرها در CSS
فاصله پاسخگو با استفاده از کلاس های کمکی
استایل بخشیدن به بخش بلندگوها و نقل قول ما
نمایش و نشان دادن سرصفحه ثابت ما در اسکرول
عناصر اسکرول افقی و اسکروی سفارشیllbars
متن عمودی با استفاده از حالت نوشتن CSS
استایل بخشیدن به بخش ثبت نام با استفاده از شبکه CSS
افزودن بخش و پاورقی تصاویر نهایی ما
افکت شناور شیب پارالکس برای تصاویر ما
محو شدن تصاویر در اسکرول
نمایش فرم پرداخت ما با استفاده از تبدیل
معرفی Stripe برای پرداخت
تفکیک جریان پرداخت Stripe
استفاده از کد Stripe برای فرم پرداخت ما
ارسال سفارش به سرور ما با استفاده از fetch
ایجاد پیام برای پرداخت های موفق
افزودن حالت بارگذاری متحرک به فرم ما
اضافه کردن سبک‌ها برای اینکه صفحه ما کاملاً واکنش‌گرا باشد
خلاصه پروژه