html and css آموزش
@htmlcss_channels
22.7K subscribers
528 photos
256 videos
93 files
324 links
ادمین :
@Maryam3771


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

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


💎 @Htmlcss_channels | #HTML #css #JavaScript
🔥2❤1
471 views
html and css آموزش
؛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
❤4
565 viewsedited  
html and css آموزش
🖥️ پروژه‌های تمرینی برای توسعه‌دهنده وب (با سورس کد)

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

• تکنولوژی: 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
❤1
419 views
html and css آموزش
This media is not supported in your browser
VIEW IN TELEGRAM
#فیگما یک اکستنشن مرورگر کروم معرفی کرده که یک سایت رو باز میکنید
میزنید روی کپی
میرید داخل فیگما Past میکنید
تمام، الان یک سایت قابل ادیت دارید

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

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

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


💎 @Htmlcss_channels | #HTML #css #JavaScript
❤5
384 views
html and css آموزش
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
❤1
57 views
html and css آموزش
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
❤2
59 views