چند تا نکته و توضیح css✨⚡️

البته بیشتره👍😂

توی تیلویند تعدادی Breakpoint از قبل تعریف شده‌اند که می‌تونیم از اون‌ها برای ریسپانسیو کردن سایتمون استفاده کنیم.

عرض های پیش فرض که در تیلویند وجود دارد:
sm:
اشاره به سایز 640 پیکسل و بیشتر می‌کنه.
md:
اشاره به سایز 768 پیکسل و بیشتر می‌کنه.
lg:
اشاره به سایز 1024 پیکسل و بیشتر می‌کنه.
xl:
اشاره به سایز 1280 پیکسل و بیشتر می‌کنه.
2xl:
اشاره به سایز 1536 پیکسل و بیشتر می‌کنه.

تیلویند به صورت Mobile First طراحی شده؛ یعنی استایل‌هایی که بدون استفاده از Breakpoint می‌نویسیم، برای سایزهای کوچک‌تر اعمال می‌شن و بعد با استفاده از Breakpointها می‌تونیم استایل موردنظر خودمون رو برای صفحه‌های بزرگ‌تر تغییر بدیم.برای مثال:

<div class="text-sm md:text-lg">

در این مثال، در سایزهای کوچک‌تر، اندازه متن text-sm هست و وقتی عرض صفحه به 768 پیکسل یا بیشتر برسه، اندازه متن به text-lg تغییر می‌کنه.ساخت Breakpoint شخصیبعضی مواقع Breakpointهای پیش‌فرض Tailwind برای پروژه ما کافی نیستند و
نیاز داریم یک Breakpoint با سایز دلخواه خودمون تعریف کنیم.برای این کار وارد فایل input.css می‌شیم و در این فایل، Breakpoint مورد نظر خودمون رو داخل @theme تعریف می‌کنیم:

@theme {
--breakpoint-sl: 320px;
}

در مثال بالا، یک Breakpoint جدید با نام sl ومقدار 320px تعریف کردیم.حالا می‌تونیم
از این Breakpoint داخل کلاس‌های Tailwind استفاده کنیم:

<div class="sl:text-lg">

با این کار، از عرض 320 پیکسل به بالا، کلاس text-lg روی این عنصر اعمال
می‌شه.پس اگر Breakpoint های پیش‌فرض Tailwind برای پروژه ما کافی نباشن، می‌تونیم به راحتی Breakpointهای شخصی خودمون رو تعریف کنیم و از اون‌ها برای ریسپانسیو کردن دقیق‌تر سایت استفاده کنیم.

بعضی مواقع شده میخواهید یه پالت رنگی جذاب برای سایتتون انتخاب کنید اما نمیدونید از کجا پالت رنگی انتخاب کنید
چند وبسایت که داخلشون یه عالمه پالت رنگی هست رو میخوام براتون بزارم

uicolors.app

colorhunt.co

coolers.co

سایت های بالا برای انتخاب پالت رنگی هستند دیگ برای انتخاب رنگ سایتت از سایت های بالا استفاده کن

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

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

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

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

themeforest.net

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

1:)https://www.figma.com/files/team/1414306502546734829/resources/community/file/1327150779118367898?q_id=1c98e573-7ed7-4443-9e59-4518bc3a6893&fuid=1414306498485269620


2:)https://www.figma.com/files/team/1414306502546734829/resources/community/file/1377503858639657703?q_id=1c98e573-7ed7-4443-9e59-4518bc3a6893&fuid=1414306498485269620


3:)https://www.figma.com/files/team/1414306502546734829/resources/community/file/1382254995439883455?q_id=1c98e573-7ed7-4443-9e59-4518bc3a6893&fuid=1414306498485269620

4:)https://www.figma.com/files/team/1414306502546734829/resources/community/file/1181960949167857170?q_id=b714d939-bd25-4939-bec9-948e2118da96&fuid=1414306498485269620

5:)https://www.figma.com/files/team/1414306502546734829/resources/community/file/1138256358581554095?q_id=b714d939-bd25-4939-bec9-948e2118da96&fuid=1414306498485269620

6:)https://www.figma.com/files/team/1414306502546734829/resources/community/file/1283135509798522682?q_id=b714d939-bd25-4939-bec9-948e2118da96&fuid=1414306498485269620

7:)https://www.figma.com/files/team/1414306502546734829/resources/community/file/1166743766188291908?q_id=b714d939-bd25-4939-bec9-948e2118da96&fuid=1414306498485269620

8:)https://www.figma.com/files/team/1414306502546734829/resources/community/file/1022429870595398693?q_id=b714d939-bd25-4939-bec9-948e2118da96&fuid=1414306498485269620

🔰 طرح فیگمای وبسایت های مختلف
جهت تمرین و ایده برداری در پروژه های فرانت اند:

1) https://www.figma.com/design/pSsVuZ0HVF78DVZ2SAFheB/Real-Estate-Landing-page-(Community)?node-id=0-1&t=sLwCW3znMPLxO9Vc-0

2) https://www.figma.com/design/44D4axNGQzMVyOJVcSIG2T/Furniture-Website-(Community)?node-id=0-1&t=shewWAVoWvysrpLj-0

3) https://www.figma.com/design/UcCsta1vACfa0OAxd3qWqY/Travel-Agency-Landing-Page-(Community)?node-id=0-1&t=OrBU2mJEq922oqdL-0

4) https://www.figma.com/design/8IvxY7B5oWTgI8ajP3dpBn/Sports-news-websites-(Community)?node-id=0-1&t=sn1PWY5HPVGzn2OG-0

5) https://www.figma.com/design/HWo9aLdg7VeqUykKS1HOSf/Interior-Design-Website-Landing-Page-(Community)?node-id=0-1&t=GHQR0AOHXqNDFJKf-0

6) https://www.figma.com/design/HmEwVt5rX26rrklrIPPwYt/Virtual-Reality-Landing-Page-Concept-(Community)?node-id=0-1&t=ChRZYxlS0GEkU7GB-0

7) https://www.figma.com/design/EDb2IGilf3JlbTPPxydwc8/MNTN---Landing-Page-(Community)?node-id=0-1&t=ncXeiJXDaMScdiVk-0

8) https://www.figma.com/design/9vA8Gcovkmfj7vXPZRldrB/Consulting-%26-Agency-Website-Template-I-Crito-(Community)?node-id=0-1&t=IWwMni7Hqk4GgfZg-0

9) https://www.figma.com/design/wwcIHX1AWXh1WZ5YyBbIhC/Interactive-Portfolio-Website%3A-Figma-UI-Design-Tutorial-for-Beginners-%7C-Step-by-Step-Guide-(Community)?node-id=0-1&t=EgXnl4hjbexkvs4p-0

10) https://www.figma.com/design/qRLQI1SrVxFdgeqPNwQbQX/75%2B-Agriculture-Landing-website-templates-(Community)?node-id=0-1&t=YTdiTw1aQ1M0Q544-0

11) https://www.figma.com/design/3LTVUubUGaWEjqNU0s3f1K/SELHONO-Design-Website-template-(Community)?node-id=0-1&t=BBWRtjydYg71KDsC-0

12) https://www.figma.com/design/92sI4qybz9VCV0a1TcTSix/100%2B-Travel-Landing-website-templates-(Community)?node-id=0-1&t=hUQKATGwLfNG4toV-0

13) https://www.figma.com/design/UCVzoAb0bswbEWVYSgKz6b/food-Recipe-Website-Ui-Kit-(Community)?node-id=2-43&t=uMOJ9sLD6eGDSQTR-0

14) https://www.figma.com/design/Ws1HVXXKFDLvNuX5dx979n/E-Learning-Site-(Community)?node-id=0-1&t=YEmMM6Xz0JsnOybC-0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

حال کنید 🫡
@Spartamusic_finderbot


@awat_dev

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

دیگه لازم نیست برای انیمیشن‌های وابسته به اسکرول، صد خط جاوااسکریپت بنویسید و به رویداد 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 بذارید تا تجربه‌ی کاربر خراب نشه.

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

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

واقعیت

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