</awat>

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

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

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

سومین سایت تم فارست هست من ندیدم افراد زیادی بشناسنش ولی سایت خوبیه برای ایده گرفتن از طرح های وبسایت های مختلف لینکش رو پایین براتون میزارم برای قالبای وردپرسه فکر کنم ولی طرحای خوبی داره برای ایده برداری بد نیست استفاده کنید از طرحاش

themeforest.net

❤9

150 views-𝐌𝐨𝐡𝐬𝐞𝐍, 21:54

</awat>

❤6🗿1

152 views-𝐌𝐨𝐡𝐬𝐞𝐍, 09:19

</awat>

Figma

Real Estate Landing page (Community)

Created with Figma

❤6🗿1

298 views-𝐌𝐨𝐡𝐬𝐞𝐍, 09:19

</awat>

اینم طرحای که خود صوفی داده گفتم قرار بدم براتون داشته باشید.

❤7🗿1

208 views-𝐌𝐨𝐡𝐬𝐞𝐍, 09:20

</awat>

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

❤7🗿1

195 views-𝐌𝐨𝐡𝐬𝐞𝐍, 09:21

</awat>

0:10

This media is not supported in your browser

VIEW IN TELEGRAM

🔥5❤2

175 viewsHamed, 09:49

</awat>

Video

توضیح شو میزارم 👍

152 viewsHamed, 09:49

</awat>

گیت واقعاً چیکار می‌کنه؟ 🌱

خیلیا گیت رو فقط با git add و git commit می‌شناسن، ولی دقیقاً نمی‌دونن زیرش چه اتفاقی می‌افته.

گیت یه سیستم کنترل نسخه‌ی توزیع‌شده‌ست؛ یعنی به‌جای اینکه فقط آخرین نسخه‌ی فایل‌هات رو نگه داره، از کل تاریخچه‌ی پروژه عکس می‌گیره. هر commit یه snapshot کامل از وضعیت فایل‌هاست، نه فقط یه لیست تغییرات. به همین خاطره که برگشتن به هر نسخه‌ی قبلی پروژه اینقدر سریع و مطمئنه.

سه مرحله‌ی اصلی کار با گیت:
git add . → فایل‌ها میرن به staging area
git commit -m "..." → یه snapshot ثبت می‌شه
git push → این snapshot به remote (مثل GitHub) فرستاده می‌شه

نکته کاربردی: قبل از commit، با
git status
همیشه چک کن چه فایل‌هایی قراره commit بشن؛ خیلی از commit‌های اشتباه همینجا جلوگیری می‌شه.

اگه این توضیح براتون روشن‌کننده بود، فوروارد کنید برای کسی که تازه گیت یاد می‌گیره 🚀

❤8

282 viewsHamed, 09:58

</awat>

رفقا یادتون باشه ، هر سر صبح که بلند میشید ، اینطوری کار هایی که باید انجام بدید رو بنویسید و بعدش یکی یکی تیک بزنید بعد انجام ، هم حس حال خوبی داره و هم باعث مرتبی کارها در ذهن شما میشه و دیگه درگیر چیز های الکی نمیشید ❤️

نکته : کنار اون مهم تر ها یه ستاره بزنید

❤12

189 views< !--ꪗꪖડⅈꪀ_ᦔꫀꪜꫀꪶꪮρꫀ𝕣 -- >., edited 06:29

</awat>

0:04

This media is not supported in your browser

VIEW IN TELEGRAM

انیمیشن با CSS خالص، بدون یه خط JS 🎬
هر بار که می‌خوایم یه چیزی رو تکون بدیم، بزرگش کنیم یا محوش کنیم، عادت داریم بریم سراغ کتابخونه‌های سنگین. ولی خیلی وقتا همون @keyframes ساده کارو راه می‌ندازه.
اینجا ۵ تا از انیمیشن‌هایی که خودمون تقریباً تو هر پروژه ازشون استفاده می‌کنیم رو با کدشون گذاشتیم:
🔄 چرخش کامل با rotate
💓 ضربان و بزرگ‌نمایی با pulse
➡️ اسلاید افقی نرم
👻 محو شدن تدریجی با fadeIn
⬆️ پرش فنری با bounce
کدا رو سیو کن، تست کن، دستکاریش کن. بهترین راه یاد گرفتن همینه.
تو کدوم یکی رو بیشتر استفاده می‌کنی؟ کامنت کن 👇
@awat_dev

❤8

252 viewsHamed, 06:40

</awat>

🎧 SPARTAN MUSIC FINDER ⚔️
👋سلام
من بهت کمک می کنم که هر آهنگی که دوست داری رو کاملا رایگان دانلود کنی !!!
❗️فقط کافیه که یکی از موارد زیر رو برام بفرستی :

🎶هنرمند یا نام آهنگ
🔤 متن آهنگ
🎙ویس از موسیقی
📹 ویدیو همراه با موسیقی
📼 ضبط صدا
🔗 لینک ویدیو به اینستاگرام ، تیک تاک ، یوتوب و سایت های دیگر

حال کنید 🫡
@Spartamusic_finderbot

@awat_dev

❤4🔥3

296 viewsA, 10:49

</awat>

چون دانا نماید به کاری درنگ
به پیروزی آرد جهانی به چنگ
همه کارها در فرو بستگی
گشاید ولیکن به آهستگی

فردوسی

❤5🔥1🕊1

137 viewsA, 10:47

</awat>

Fetch در JavaScript چیه؟ 🌐

"fetch()" یکی از روش‌های ساده و مدرن جاوااسکریپت برای ارسال درخواست به سرور و دریافت اطلاعات از API هست.

مثلاً برای گرفتن اطلاعات از یک API:

fetch("https://api.example.com/users")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.log("Error:", error);
});

🔹 "fetch()" درخواست رو ارسال می‌کنه.
🔹 "response.json()" پاسخ سرور رو به JSON تبدیل می‌کنه.
🔹 با "then()" نتیجه رو دریافت و پردازش می‌کنیم.
🔹 با "catch()" خطاها رو مدیریت می‌کنیم.

امروزه معمولاً استفاده از "async/await" خوانایی کد رو بیشتر می‌کنه:

async function getUsers() {
const response = await fetch("https://api.example.com/users");
const data = await response.json();

console.log(data);
}

💡 نکته: با "fetch" فقط اطلاعات دریافت نمی‌کنیم؛ می‌تونیم درخواست‌های "POST"، "PUT" و "DELETE" هم به API ارسال کنیم.

POST => ارسال دیتا به سمت سرور

PUT => تغییر دیتای کلی در سرور

PATCH => تغییر دیتای جزئی در سرور

@awat_dev

❤3🔥2

143 viewsawat, edited 12:07

</awat>

🎬 انیمیشن‌هایی که با اسکرول شما زنده می‌شن!

دیگه لازم نیست برای انیمیشن‌های وابسته به اسکرول، صد خط جاوااسکریپت بنویسید و به رویداد scroll گوش بدید؛ حالا خود CSS این کار رو انجام می‌ده!

با ویژگی تازه‌ی Scroll-Driven Animations می‌تونید یک انیمیشن رو مستقیم به موقعیت اسکرول کاربر وصل کنید. هرچقدر کاربر پایین‌تر بره، انیمیشن هم جلوتر می‌ره؛ درست مثل یک نوار پیشرفت زنده.

مثال ساده:

.fade-in {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes appear {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

نکته مهم: فعلاً این ویژگی روی مرورگرهای مبتنی بر Chromium به‌خوبی کار می‌کنه؛ برای Safari و Firefox حتماً با @supports یک fallback بذارید تا تجربه‌ی کاربر خراب نشه.

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

❤5💯3

272 viewsHamed, edited 12:14

</awat>

طراحی رابط کاربری UI
وبسایت زرین پال

@awat_dev

❤9🔥3

400 viewsA, edited 18:33

</awat>

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

واقعیت

❤8🔥2😁1🗿1

198 viewsA, 22:30

</awat>

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

❤5

155 views-𝐌𝐨𝐡𝐬𝐞𝐍 𝐀𝐰𝐚𝐭, 18:25

</awat>

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

❤3

147 views𝑨𝒏𝒐𝒔𝒉𝒊𝒓𝒂𝒗𝒂𝒏 𝒂𝒘𝒂𝒕, 18:35

</awat>

0:17

This media is not supported in your browser

VIEW IN TELEGRAM

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

❤4

163 viewsℋ𝒶𝓂ℯ𝒹 𝒜𝓌𝒶𝓉, 18:41

</awat>

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

❤3🔥2

128 viewsℋ𝒶𝓂ℯ𝒹 𝒜𝓌𝒶𝓉, 13:53

</awat>

فلکس باکس چیه و چه کاربردی داره؟
فرض کنین یه 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;

}

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

❤4👏1

142 views-𝐌𝐨𝐡𝐬𝐞𝐍 𝐀𝐰𝐚𝐭, edited 14:17

About

Blog

Apps

Platform