در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بصورت آنلاین و رایگان میتونین کدهای HTML و CSS و Javascript مورد نظرتون رو قرار بدین و در قسمت output خروجی اون رو مشاهده کنید. همچنین میتونین محل قرارگیری قسمتهای مختلف رو متناسب با سلیقه خودتون با استفاده از Drag & Drop تغییر بدین. در بالای هر ...

همونطور که خاطرتون هست، در جلسه قبل در مورد تبدیل Inspector به یک ویرایشگر قدرتمند، اطلاعاتی رو در اختیارتون قرار دادیم و با مثالها و تصاویری که قرار دادیم، شما رو بصورت کامل با اون و ویژگی هاش آشنا کردیم. در این جلسه میخوایمxa0در مورد بلاک کردن درخواستهایی خاص صحبت کنیم و مبحث Block Request در Insp...

{ const config = { in: { base: { duration: 600, easing: 'easeOutQuint', scale: [0,1], rotate: [-180,0], opacity: { value: 1, easing: 'linear', duration: 100 } }, content: { duration: 300, delay: 250, easing: 'easeOutQuint', translateY: [20,0], opacity: { value: 1, easing: 'linear', duration: 100 } }...

همونطور که اطلاع دارید در جلسه قبل در مورد Set و WeakSetxa0براتون توضیحاتی رو قرار دادیم و شما رو بصورت کامل با اونا آشنا کردیم. در این جلسه میخوایم در مورد Map و WeakMap که در ES6 معرفی شده اند، توضیحاتی رو قرار بدیم. برای این آموزش از اینxa0لینکxa0و اینxa0لینکxa0به عنوان منبع استفاده میکنیم. Map و...

در این قسمت میخوام یک کد ( Calla Lilliesxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید با استفاده از CSS خالص ظاهر گل به زیبایی شبیه سازی و ساخته شده و میتونین از اون ایده بگیرید. برای ساخت این گل، ترکیبی از ویژگی های box-shadow و gradient و transform (برای rotate یا چرخاندن المنتها) و ... استفاد...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که با استفاده از اون میتونین سایتهای واکنشگرا خودتون یا دیگران رو به راحتی و در سریع ترین زمان، مورد تست قرار بدین. برای شروع وارد سایتxa0XRespondxa0بشین. بعد از اینکه سایت بالا باز شد، لینک سایت مورد نظر برای تست شدن رو در فیلد مربوطه بالای سایت قرار بدین...

{ const config = { in: { base: { duration: 200, easing: 'easeOutQuad', rotate: [35,0], opacity: { value: 1, easing: 'linear', duration: 100 } }, content: { duration: 1000, delay: 50, easing: 'easeOutElastic', translateX: [50,0], rotate: [10, 0], opacity: { value: 1, easing: 'linear', duration: 100 }...

همونطور که خاطرتون هست، در جلسه قبل در مورد Code coverage اطلاعاتی رو در اختیارتون قرار دادیم و با مثالها و تصاویری که قرار دادیم، شما رو بصورت کامل با اون و ویژگی هاش آشنا کردیم. در این جلسه میخوایم نحوه اضافه کردن پروژه های مورد نظرمون به Workspace رو توضیح بدیم و با این ویژگی میتونیم Inspector یا...

همونطور که اطلاع دارید در جلسه قبل در مورد Destructuring در اشیاء یا object ها توضیحاتی رو قرار دادیم و شما رو بصورت کامل با اونا آشنا کردیم. در این قسمت قصد داریم در مورد Destructuring در آرایه ها بحث کنیم.xa0Destructuring در آرایه ها بسیار شبیه بهxa0Destructuring در اشیاء است. درون اشیاء با استفاد...

همونطور که اطلاع دارید در جلسه گذشته تابع showError رو تکمیل کردیم و ارور مربوط به هر فیلد رو در صورت وجود در زیر اون فیلد نمایش دادیم. همچنین یک استایل قرمز رنگ نیز برای border و متن پیام قرار دادیم تا ظاهر بهتری داشته باشد. در این جلسه میخوایم کدها رو ادامه بدیم و امکانات جدیدی رو به اون اضافه کنی...

در این قسمت میخوام یک کد ( Load more contentxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید تعدادی آیتم بصورت لیستی قرار داده شده اند و زمانی که بر روی دکمه Load More کلیک میکنید، محتوای جدید با استایلی زیبا لود میشن و نمایش داده میشن. اگر صفحه اسکرول عمودی داشته باشه، همزمان با لود شدن محتوای جدی...

در این قسمت میخوام یک کد ( Audio Visualizer2xa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک دایره با استفاده از Three.js ساخته شده و قرار گرفته. با استفاده از دکمه choose a mp3 file در بالا و سمت چپ صفحه میتونین یک صدا یا موسیقی رو انتخاب کنید و زمانی که صدا پخش میشه، این دایره به زیبایی عکس ال...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بهترین و محبوب ترین طراحی های در زمینه Material Design رو قرار داده و شما با دیدن اونا میتونین ایده های زیادی برای طراحی بگیرید و از اونا استفاده کنید. برای هر طرح یک gif قرار داده شده که نحوه عملکرد اون رو نمایش میده و با کلیک بر روی هر کدام به ...

همونطور که اطلاع دارید در جلسات گذشته ترفندهای بسیار زیادی رو برای Inspector مرورگر Chrome قرار دادیم و شما رو با ویژگی ها و امکاناتی که در اختیارتون قرار میده رو آشنا کردیم. از این جلسه به بعد سعی میکنیم در مورد ویژگی هایی که جدید به Inspector اضافه میشه و یا ویژگی هایی که اصلا در موردشون بحث نشده،...

همونطور که اطلاع دارید در جلسه گذشته تابع hasError رو تکمیل کردیم و متناسب با هر حالت، یک ارور قرار دادیم تا ارور و مشکل رو به خوبی به کاربر بفهمونیم. در جلسه قبل متن ارور ها رو در Console چاپ کردیم ولی در این جلسه میخوایم کاری کنیم که ارورها بجای چاپ شدن در Console در زیر همون فیلدی که مشکل داره، ن...

همونطور که خاطرتون هست، در جلسه پیش در موردxa0متدهای جدید اضافه شده به آرایه ها براتون توضیحاتی رو قرار دادیم. در این جلسه میخوایم در موردxa0Destructuring در اشیاء براتون توضیحاتی رو قرار بدیم و با مزایا و ویژگی هایی که داره، آشناتون بکنیم.xa0Destructuring به معنی استخراج کردن اطلاعات کوچکتر از آرای...

همونطور که میدونین در جلسه قبل توضیحاتیxa0در مورد غیر فعال کردن اعتبارسنجی ذاتی فرمها با استفاده از ویژگی novalidate دادیم. همچنین شما رو با رویداد blur و تکنیک Event Bubbling آشنا کردیم. در این جلسه میخوایم این موضوع رو ادامه بدیم. همونطور که خاطرتون هست در جلسه قبل از کد زیر استفاده کردیم: documen...

در این قسمت میخوام یک کد ( chessboard vacuumxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک صفحه شطرنج قرار گرفته و بصورت دوره ای یک حالت خلاء مانند در مرکز به وجود میاد و خانه های شطرنج به زیبایی جابجا میشن و انیمیشن دیدنی رو به وجود میارن. این کار با استفاده از CSS خالص به وجود اومده و میتونی...

همونطور که اطلاع دارید در جلسات گذشته باxa0کلاسها و امکانات و قابلیتهای اونا بصورت مقدماتی آشنا شدیم. در این جلسه قصد داریم در مورد انواع روشهای ساخت آرایه با هم بحث کنیم و تفاوت اونا رو با استفاده از مثالهای متنوع متوجه بشیم. همونطور که می دونید آرایه ها بخش بسیار مهمی از هر زبان برنامه نویسی از جم...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در محیط Photoshop با استفاده از 13 دایره کوچک و بزرگ و با تقاطع اونا، 13 حیوان مختلف رو به وجود آورده که میتونین از اون ایده بگیرید و هر حیوان یا چیز دیگه ای رو که بخواید طراحی کنید. این آموزش بصورت مرحله به مرحله این کار رو به شما آموزش میده. در آخر آم...