Html and Css & Jsآموزش
ادمین : @Maryam3771 تعرفه تبلیغات: https://t.me/alloadv/822
Show more📈 Analytical overview of Telegram channel Html and Css & Jsآموزش
Channel Html and Css & Jsآموزش (@htmlcss_channels) in the Farsi language segment is an active participant. Currently, the community unites 22 681 subscribers, ranking 8 786 in the Education category and 14 837 in the Iran region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 22 681 subscribers.
According to the latest data from 18 June, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by 1 415 over the last 30 days and by -28 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 2.71%. Within the first 24 hours after publication, content typically collects 1.53% reactions from the total number of subscribers.
- Post reach: On average, each post receives 615 views. Within the first day, a publication typically gains 346 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 3.
- Thematic interests: Content is focused on key topics such as css, #javascript, دنیا, وبینار, شغل.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“ادمین :
@Maryam3771
تعرفه تبلیغات:
https://t.me/alloadv/822”
Thanks to the high frequency of updates (latest data received on 19 June, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Education category.
⏰ 170 ساعت | آموزش آنلاین و آفلاین 💎 امکان کارآموزی در گروه همراه اول🌐پیشثبتنام #رایگان: 🔗 https://l.hamrah.academy/4wh ⭐️ @hamrah_academy | آکادمی همراه اول
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';
```css
.box {
background: paint(dots);
--dot-color: blue;
}
رنگ رو از CSS تغییر بده! ۵️⃣ نتیجه • ✅ بدون عکس • ✅ بدون پلاگین • ✅ فقط CSS خالص • ✅ روی compositor thread اجرا میشه (سریع) چرا CSS Houdini مهمه؟روش قدیمی | با Houdini ------------+----------------
عکس یا SVG | کد جاوااسکریپت
استایل ثابت | پارامترهای پویا
حجم بالا | سبک و سریع
💎 @Htmlcss_channels | #HTML #css #JavaScript⏰ 170 ساعت | آموزش آنلاین و آفلاین ✅ امکان کارآموزی در گروه همراه اول ✅ امکان ثبتنام به صورت اقساطی🌐 لینک پیشثبتنام #رایگان: 🔗 https://l.hamrah.academy/wbv ⭐️ @Hamrah_Academy | آکادمی همراه اول
.container {
display: grid;
place-items: center;
}
یه خط ساده که همه چیز رو وسط میاره! هم عمودی، هم افقی.
۲️⃣ پدینگ چپ و راست (با logical properties)
.button {
padding-inline: 1rem;
}
به جای padding-left و padding-right — یه دونه بنویس!
نکته: همین ترفند رو میتونی برای margin و border هم استفاده کنی:
• margin-inline / border-inline → چپ و راست
• padding-block / margin-block → بالا و پایین
۳️⃣ ستونهای همعرض در گرید
.container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
هر تعداد ستون که داشته باشی، همه همعرض میشن! عالی برای layoutهای داینامیک.
۴️⃣ استایل همزمان hover و focus
button:is(:hover, :focus) {
/* استایل خودت رو اینجا بنویس */
}
یه بار بنویس، برای هر دو حالت کار کنه! هم برای موس، هم برای کیبورد (accessibility).
۵️⃣ دایره کامل
.circle {
width: 2rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
}
هرچیزی رو تبدیل به دایره میکنه! با aspect-ratio مطمئن میشی که همیشه square بمونه.
۶️⃣ حذف فاصله اضافی بین آیتمهای گرید
.container {
gap: 0;
}
یا برای فاصله دلخواه:
.container {
gap: 1rem;
}
💡 چرا اینا کاربردی ان؟
• کوتاه و مینیمال — هر کدوم یه خطه
• مدرن — از قابلیتهای جدید CSS استفاده میکنن
• کاربرد روزمره — توی هر پروژهای بهشون نیاز داری
#CSS #WebDevelopment #Frontend #برنامه_نویسی
Available now! Telegram Research 2025 — the year's key insights 
