اگر احتمال بردنت صده
فدای سرت که سرعتت کمه...

واقعیت

ایده برای تمرین html , css و بلر

یک ایده برای ساخت فوتر با
HTML, CSS

ایده ساخت کارت
جالبه:))

دوستان چالش حل کد بزارم؟؟؟
البته بعد توضیح فلکس باکس؟؟

فلکس باکس چیه و چه کاربردی داره؟
فرض کنین یه container دارین که داخلش سه تا item دارین و اگر آیتم ها تون بلاک لول باشن به صورت پیشفرض زیر هم قرار میگیرن و سه خط رو پر میکنن.

بعضی مواقع شده شما میخواین سه تا آیتم رو بیارین کنار هم قرار بدین سوال براتون پیش میاد چطور بیارمشون کنار هم ؟

دو روش دارین که این روش اول منسوخ شده که میخوام بگم صرفا جهت دونستن میگم بهتون
اولین روش (استفاده نکنید منسوخ شده)
استفاده از float هست قبل از اینکه فلکس باکس برای چیدمان layout سایت بوجود بیاد از float استفاده میشد که کمی کار رو سخت میکرد و اذیت کننده بود مثالش هم پایین براتون مینویسم:

.left{
float: left;
  width: 50%;
}
.right{
float: right;
  width: 50%;
}

به این صورت آیتم ها رو کنار هم میچیدن که یک باگ خیلی بزرگ داشت
وقتی به سکشن اول ما پراپرتی float رو میدادیم سکشن بعدی که میزدیم میومد کنارش و باید یه پراپرتی دیگ میدادیم بهش تا درست بشه

clear: both;

پراپرتی بالا رو باید میدادیم به سکشن تا بتونیم سکشن بعدی رو درست طراحی کنیم

زیاد دربارش دیگ حرف نمیزنم چون در حد دونستن بود و از این استفاده نکنین.

حالا بریم سراغ مبحث اصلی فلکس باکس

خب برای فعالسازی flexbox ما به کانتینر والد اون آیتم ها
display: flex;

میدیم تا فلکس باکس برای ما فعال بشوند وقتی فعال شد آیتم ها کنار هم میان که برای مدیریت فاصله وسط چین کردن و چیدمان آیتم ها از پراپرتی هایی استفاده میکنیم که برای کانتینر والد هست و برای خود فلکس باکس هست و بدون فعال کردن فلکس باکس هیچ کاری نمیکند.

اولین پراپرتی justify-content هست که با این پراپرتی شما میتوانید فاصله بین آیتم ها را بچینید
مقدار هایی که این پراپرتی میگیرد:

start
end
space-between
space-around
space-evenly
center

که شما میتوانید مشخص کنید آیتم ها اول یا اخر یا فاصله یکنواخت یا چسبیده داشته باشند
این پراپرتی در موقعیت چپ و راست عمل میکند برای عملیات بالا و پایین از align-items استفاده میکنیم که مقدار های این پراپرتی:

stretch
flex-start
flex-end
center

baselineکه هر کدام قابلیت خاص خودش رو داره بیشترین استفاده هم استارت و اند و وسط هستند

برای مثال شما یک کانتینر والد دارید که سه آیتم داخل آن وجود دارد شما میخواهید این آیتم ها را کنار هم بچینید و وسط چین کنید آن ها را بصورت زیر میتوانید انجام دهید:

.container {
display: flex;
align-items: center;
justify-content: center;

}

به همین راحتی آیتم ها میان کنار هم و وسط قرار میگیرند.

چالش امروز جاوااسکریپتی 🧠

کد زیر رو نگاه کن:

console.log("۱");

setTimeout(() => {
  console.log("۲");
}, 0);

Promise.resolve().then(() => {
  console.log("۳");
});

console.log("۴");

به نظرت ترتیب چاپ کدوم گزینه‌ست؟


حرف گزینه‌ت رو تو کامنت‌ها بنویس! فردا جواب رو با توضیح کامل می‌فرستم.

نکته مهم: جواب این سؤال دقیقاً به تفاوت Microtask Queue و Macrotask Queue توی event loop جاواسکریپت برمی‌گرده.

اگه چالش رو دوست داشتی، برای یه دوست هم فوروارد کن 🔁

فردا توضیح رو میزارم براتون
ببینم چی جواب میدین

📌 حلقه‌ها در جاوااسکریپت؛ کدت رو چندباره کن بدون خستگی!

حلقه‌ها بهت اجازه میدن یه کار رو تکراری اجرا کنی. تو جاوااسکریپت چند نوع حلقه داریم که هرکدوم جایگاه خودشون رو دارن:

-----------------------------------------

🔁 for کلاسیک
وقتی تعداد دفعات مشخصه:
for (let i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}

🔁 while
وقتی شرط نامشخصه و ممکنه اصلاً اجرا نشه:

let n = 3;
while (n > 0) {
console.log(n--);
}

🔁 do...while
حداقل یک بار اجرا میشه، حتی اگر شرط غلط باشه:

let x = 10;
do {
console.log(x);
} while (x < 5); // چاپ ۱۰

🔁 for...of (مدرن)
برای آرایه‌ها و اشیاء قابل تکرار (iterable):

const colors = ['red', 'green', 'blue'];
for (let c of colors) {
console.log(c);
}

🔁 for...in
برای کلیدهای object (با احتیاط استفاده کن):

const user = {name: 'Ali', age: 25};
for (let key in user) {
console.log(key, user[key]);
}

-----------------------------------------

⚠️ نکته مهم:
از for...in روی آرایه استفاده نکن (ترتیب رو رعایت نمیکنه و خواص اضافی رو هم میاره). به جاش از for...of یا forEach استفاده کن.

✅ عملکرد:
حلقه‌های for و while سرعت بالایی دارن، ولی برای خوانایی کد، for...of و متدهای مدرن مثل map، filter رو ترجیح بده.

-----------------------------------------

💡 جمع‌بندی:
- تعداد مشخص → for
- شرط نامشخص → while
- حداقل یک بار → do...while
- آرایه/رشته → for...of
- آبجکت → for...in (با دقت)

حلقه‌ها رو درست انتخاب کن تا کدت هم سریع باشه هم خواناتر! 🚀

#جاوااسکریپت #حلقه #JavaScript #آموزش

@awat_dev

╭─ 🎨 AI IMAGE COMMANDS ─╮

🛍️ Marketing
"/product_ad" • "/banner" • "/promo" • "/sale"
"/offer" • "/new_product" • "/brand"

📱 Social Media
"/telegram_post" • "/story_ad" • "/thumbnail"
"/channel_cover" • "/quote" • "/announcement"

✨ Styles
"/luxury_ad" • "/minimal_ad" • "/cinematic"
"/3d_ad" • "/neon" • "/retro" • "/cyberpunk" • "/premium"

🍔 Specialized
"/food_ad" • "/fashion_ad" • "/cosmetic_ad"
"/tech_ad" • "/packaging" • "/logo_mockup"

📊 Info
"/infographic" • "/educational" • "/comparison"
"/before_after" • "/testimonial" • "/countdown" • "/giveaway"

🎯 Special
"/seasonal" • "/event" • "/viral" • "/isometric"

@awat_dev

╰─ ✦ Create • Design • Inspire ✦ ─╯

به شدت مفید برای بچه های designer

جواب چالش قبلی 👇

گزینه‌ی درست: B) 1 - 4 - 3 - 2

چرا؟ چون جاوااسکریپت تک‌رشته‌ایه و کدهای سینک (مثل console.log("۱") و console.log("۴")) همیشه اول اجرا می‌شن.

بعدش نوبت Microtask Queue می‌رسه؛ یعنی Promise.then ها، که زودتر از هر تایمر اجرا می‌شن، حتی اگه setTimeout با ۰ میلی‌ثانیه صدا زده شده باشه.

در آخر نوبت Macrotask Queue، یعنی setTimeout، می‌رسه.

نکته مهم: setTimeout(fn, 0) یعنی «فوری» نیست؛ یعنی «هر وقت stack و microtask queue خالی شدن». این سؤال کلاسیک مصاحبه‌های فرانت‌اندیه، حتماً حفظش کن 😉

اگه گزینه‌ی درست رو زده بودی، تو کامنت‌ها بگو! فوروارد هم یادت نره 🔁

Happy 130 😍🍻

رفقا دمتون گرم تا اینجای کار همراه تیم آوات بودید ، به مناسبت 130 تایی شدنمون هر هفته 10 تا سایت کاربردی میگیم که مربوط به حوضه FrontEnd میشه 🔥❤️

🚀 ۱۰ سایت کاربردی که هر فرانت‌اندکار مبتدی بهتره بشناسه

یادمه اوایل کدنویسی، همیشه سردرگم بودم که آموزش رو از کجا دنبال کنم. این لیست همون چیزیه که کاش زودتر پیدا می‌کردم؛ سیوش کن، به دردت می‌خوره 👇

1️⃣ مرجع کامل HTML، CSS و JavaScript
developer.mozilla.org

2️⃣ آموزش و راهنمای Performance سایت
web.dev

3️⃣ مقاله‌ها و منابع کاربردی CSS
css-tricks.com

4️⃣ یادگیری JavaScript از صفر تا مباحث پیشرفته
javascript.info

5️⃣ بررسی سازگاری ویژگی‌ها با مرورگرها
caniuse.com

6️⃣ تمرین‌های واقعی و پروژه‌محور Front-End
frontendmentor.io

7️⃣ محیط آنلاین برای تست و اشتراک‌گذاری کد
codepen.io

8️⃣ آموزش‌های رایگان و پروژه‌محور
freecodecamp.org

9️⃣ ساخت و مدیریت پالت‌های رنگی
coolors.co

🔟 فونت‌های رایگان مناسب استفاده در وب
fonts.google.com

💡 نکته مهم:
لازم نیست همه این سایت‌ها رو هم‌زمان دنبال کنی. هر هفته روی یکی از اون‌ها تمرکز کن و واقعاً ازش استفاده کن؛ نتیجه خیلی محسوس‌تره.

اگه به دردت خورد، سیوش کن و برای یه فرانت‌اندکار دیگه هم بفرست 🙌

@awat_dev