📝 دوره آموزشی CSS: Images

📌 یادگیری مدیریت تصاویر و اشکال با CSS.


💎 @Htmlcss_channels | #HTML #css #JavaScript

CSS: Advanced Layouts with Grid

این دوره بهت یاد می‌ده چطور از تمام قابلیت‌های CSS Grid استفاده کنی تا رابط‌های کاربری زیبا، قابل دسترسی و واکنش‌گرا بسازی.

چی یاد می‌گیری؟

1. مفاهیم پایه CSS Grid:
• ساختار Grid و سلول‌ها
• تعریف ردیف‌ها و ستون‌ها
• مدیریت فضای خالی

2. قابلیت‌های پیشرفته:
• ؛Grid Areas و ساختارهای پیچیده
•؛ Grid Template Areas برای طراحی‌های مدرن
• ؛Grid Auto Flow و مدیریت ترتیب عناصر

3. واکنش‌گرایی:
• استفاده از Media Queries با Grid
• طراحی ریسپانسیو برای موبایل و دسکتاپ
• ؛Grid در طراحی‌های متفاوت سایز

4. دسترسی‌پذیری:
• ساختار معنایی Grid
• استفاده از ARIA برای دسترسی بهتر
• تست دسترسی‌پذیری Grid

5. بهترین روش‌ها:
• الگوهای طراحی با Grid
• بهینه‌سازی پرفورمنس
• حل مشکلات رایج Grid

• این دوره سطح پیشرفته دارد، پس با CSS و HTML آشنایی داشته باش


💎 @Htmlcss_channels  | #HTML #css #JavaScript

اگر هنوز داری نوت‌هات رو توی Google Docs، Notion یا فایل‌های پراکنده نگه می‌داری، یه بار Obsidian رو ببین.

سرویسObsidian یه اپ نوت‌برداریه، ولی بیشتر شبیه یه مغز دوم عمل می‌کنه.

هر یادداشت می‌تونه به یادداشت‌های دیگه لینک بشه. کم‌کم بین ایده‌ها، پروژه‌ها، مقاله‌ها و یادداشت‌هات یه شبکه ساخته میشه. بعد می‌تونی همه این ارتباطات رو روی یه گراف ببینی.

چیزی که Obsidian رو خاص کرده اینه که فایل‌هات روی کامپیوتر خودت ذخیره میشن، نه روی سرور یه شرکت. همه چیز هم فایل Markdown ساده است. یعنی مالک واقعی اطلاعاتت خودتی و اگر فردا Obsidian هم نباشه، فایل‌هات سر جاشون هستن.

برنامه‌نویس‌ها برای مستندسازی، فاندرها برای ثبت ایده‌ها، نویسنده‌ها برای تحقیق و تولید محتوا، و دانشجوها برای ساختن پایگاه دانش شخصی ازش استفاده می‌کنن.

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

یه جور ویکی‌پدیای شخصی خودته.



💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی بهترین منابع برای Front End Design

🌈 Color Sites:
1. colorhunt.co
2. coolors.co
3. color.adobe.com
4. pigment.shapefactory.co

💻 Sites To Download Fonts:
1. dafont.com
2. 1001fonts.com
3. fontsquirrel.com
4. fontfreak.com/fonts-new.htm

🖼 Sites To Download Vector Logos:
1. seeklogo.com
2. logovector.net
3. logotypes101.com
4. logos-vector.com

🔵 Sites To Download Icons:
1. flaticon.com
2. freeicons.io
3. iconstore.co
4. iconfinder.com
5. digitalnomadicons.com
6. iconstore.co

🖌 Brushes Download Sites:
1. brushking.eu
2. brusheezy.com/brushes
3. myphotoshopbrushes.com
4. fbrushes.com
5. gfxfever.com

📁 Sites To Download Files:
1. freepik.com
2. all-free-download.com
3. vecteezy.com
4. freeimages.com

📸 Sites To Download Mockups:
1. mockupsforfree.com
2. mockupworld.co
3. graphicburger.com
4. zippypixels.com

✨ Inspiration Sites:
1. inspirationde.com
2. designspiration.net
3. pinterest.com
4. dribbble.com

🎥 Video Sites:
1. mixkit.co
2. coverr.co
3. motionplaces.com
4. videezy.com

🖼 Photo Sites Without Background:
1. cleanpng.com
2. pngimg.com
3. footyrenders.com
4. pngtree.com

📷 Photo Sites:
1. unsplash.com
2. pexels.com
3. pixabay.com
4. stocksnap.io
5. burst.shopify.com.



💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی ریپو Awesome Web Design Tools :

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

https://github.com/nafasebra/awesome-webdesign-tools


💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی ریپو Clean Code JavaScript :

مجموعه‌ای از اصول برای نوشتن کدهای تمیزتر و قابل نگهداری‌تر در JavaScript

در این ریپو نکاتی مثل نام‌گذاری بهتر، ساده‌سازی توابع، کاهش پیچیدگی و ساختاردهی بهتر کد بررسی شده تا توسعه و رفع باگ راحت‌تر شود.

https://github.com/ryanmcdermott/clean-code-javascript


💎 @Htmlcss_channels  | #HTML #css #JavaScript

فونت QR Font یک فونت TrueType جالب است که متن را مستقیماً به QR Code تبدیل می‌کند.

با قرار دادن متن داخل براکت، فونت آن را به کد QR تبدیل می‌کند و بقیه متن را مثل یک فونت معمولی نمایش می‌دهد. نسخه‌های مختلف این فونت برای ظرفیت‌های متفاوت در دسترس هستند.

https://github.com/jimparis/qr-font


💎 @Htmlcss_channels  | #HTML #css #JavaScript

۸۰سوال مصاحبه فرانت اند به همراه پاسخ

💎 @Htmlcss_channels  | #HTML #css #JavaScript

۶سایت برای پیدا کردن چالش‌ UIUX :دقیقاً کم‌ کم آمادت میکنن یک Case Study حرفه‌ای بسازی.

1. Daily UI → http://dailyui.co
2. UI Coach → http://uicoach.io
3. UX Challenge → http://uxchallenge.co
4. UX Tools → http://uxtools.co/challenges
5. Fake Clients → http://fakeclients.com
6. Good Brief → http://goodbrief.io


💎 @Htmlcss_channels  | #HTML #css #JavaScript

✅ هوش مصنوعی در سایت 'arxiv' ادغام شده و این سایت به 'autoarxiv' تغییر پیدا کرد.

هوش مصنوعی اضافه شده چه کار می‌کند:
• جستجوی هوشمند: به جای جستجوی کلمه‌کلیدی ساده، با زبان طبیعی می‌توانید مقاله پیدا کنید
• خلاصه‌سازی خودکار: مقالات طولانی را در چند خط خلاصه می‌کند
• پیشنهاد مقالات مرتبط: مقالات مشابه را پیشنهاد می‌دهد• پاسخ به سوال درباره مقاله: می‌توانید از محتوای مقاله سوال بپرسید
• تحلیل روندهای تحقیقاتی: کمک می‌کند موضوعات داغ هر حوزه را بشناسید

https://openresearch.sh/



💎 @Htmlcss_channels  | #HTML #css #JavaScript

اسکرول نرم به المنت‌ها با متد scrollIntoView

یکی از زیباترین افکت‌هایی که می‌تونی به سایتت اضافه کنی، اسکرول نرم هست. وقتی کاربر روی یه لینک کلیک می‌کنه، صفحه به جای پرش ناگهانی، به‌صورت نرم و روان به المنت مورد نظر اسکرول می‌شه. بیا ببینیم چطور این کار رو انجام بدیم.
؛ 🎯 scrollIntoView چیه؟ scrollIntoView یک متد در JavaScript هست که المنت مورد نظر رو در ناحیه قابل مشاهده مرورگر قرار می‌ده. این متد از قدیمای Web API هست ولی با گزینه behavior: 'smooth' قابلیت اسکرول نرم بهش اضافه شده.

JS:

const links = document.querySelectorAll('.link');

links.forEach((item) => {
 item.addEventListener('click', (e) => {
  e.preventDefault();

  let id = item.getAttribute('href');
  let formattierID = id.substring(1);
  let section = document.getElementById(formattierID);

  section.scrollIntoView({
   behavior: 'smooth',
  });
 });
});

💎 @Htmlcss_channels  | #HTML #css #JavaScript

CSS Grid Crash Course


💎 @Htmlcss_channels  | #HTML #css #JavaScript

🔅 Light to Dark mode in CSS



💎 @Htmlcss_channels  | #HTML #css #JavaScript

5 کتاب عالی توی سطوح مختلف برای جاوا اسکریپت 🔥

Eloquent JavaScript (4th Edition)
بهترین کتاب برای یادگیری جاوااسکریپت از پایه با تمرین‌های کاربردی.
You Don't Know JS Yet
مجموعه‌ای عمیق برای درک مفاهیم داخلی و پیشرفته جاوااسکریپت.
JavaScript: The Definitive Guide (7th Edition)
مرجع جامع و کامل برای یادگیری و مراجعه در تمام سطوح.
JavaScript: The Good Parts
آموزش نوشتن کد تمیز و استفاده از بخش‌های قدرتمند زبان.
Secrets of the JavaScript Ninja (2nd Edition)
مناسب برنامه‌نویسان متوسط تا حرفه‌ای برای تسلط بر تکنیک‌های پیشرفته و الگوهای حرفه‌ای.


💎 @Htmlcss_channels  | #HTML #css #JavaScript

تا حالا از AI خواستی برات یک سایت طراحی کنه و آخرش با همون ترکیب همیشگی روبه‌رو شدی؟
گرادیان بنفش، سه‌تا کارت کنار هم، متن‌های بزرگ و یک ظاهر که انگار قبلاً صد بار دیدیش؟ 😅

اینجاست که Taste Skill وارد می‌شه.


پست بعدی رو ببینید 🔻

💎 @Htmlcss_channels  | #HTML #css #JavaScript

🔺مهارت Taste Skill یک مجموعه دستورالعمل برای ابزارهای کدنویسی مبتنی بر هوش مصنوعیه که کمک می‌کنه رابط کاربری‌های حرفه‌ای‌تر، منسجم‌تر و کمتر کلیشه‌ای بسازن.

در واقع خودش فریم‌ورک یا کتابخانه UI نیست؛ یک فایل راهنماست که AI قبل از طراحی و کدنویسی می‌خونه و بر اساسش تصمیم می‌گیره:

• چه فونت و ترکیب‌بندی‌ای مناسب پروژه‌ست
• فاصله‌گذاری‌ها و رنگ‌ها چطور انتخاب بشن
• انیمیشن‌ها چقدر و کجا استفاده بشن
• طراحی چطور با هویت برند هماهنگ بمونه
• از چه الگوهای تکراری و بی‌دلیلی دوری بشه

مثلاً به AI یادآوری می‌کنه که هر صفحه‌ای به گرادیان بنفش، کارت‌های شیشه‌ای یا داشبورد نمایشی نیاز نداره!

این ابزار با سرویس‌ها و ایجنت‌هایی مثل Cursor، Claude Code، Codex، Windsurf، v0 و چند ابزار دیگه قابل استفاده‌ست و به فریم‌ورک خاصی هم محدود نیست.

برای نصب نسخه اصلی می‌تونید از این دستور استفاده کنید:

"npx skills add github.com/Leonxlnx/taste… --skill "design-taste-frontend""

بعد از نصب، AI فایل "SKILL.md" رو می‌خونه و موقع طراحی رابط کاربری، قواعدش رو در نظر می‌گیره.

در مجموع، اگه با AI سایت می‌سازید ولی از خروجی‌های تکراری و بیش‌ازحد «AI‌طور» خسته شدید، Taste Skill می‌تونه مثل یک طراح هنری یا منتقد طراحی کنار ایجنت کدنویسی‌تون عمل کنه.

🔗 tasteskill.dev

📍https://github.com/Leonxlnx/taste-skill

#هوش_مصنوعی #طراحی_رابط_کاربری #برنامه_نویسی #طراحی_وب



💎 @Htmlcss_channels  | #HTML #css #JavaScript