html and css آموزش

Public

Vedi canale

128

169

2.6K

Non riesci ad unirti? @htmlcss_channels

23.2k Membri

Aggiornato: September 7, 2026 at 12:11 PM

html and css آموزش

ادمین : @Maryam3771 تعرفه تبلیغات: https://t.me/alloadv/822

Join @htmlcss_channels for exclusive maryam3771 and httpstmealloadv822 content and discussions in 22

Classifica

Classifica globale

#107063

-354

Classifica per lingua

#1147

-7

Classifica per categoria

#541

-4

Crescita abbonati (Ultimi 21 giorni)

Totale: 23.2K

Crescita 24h: +28 0%

Ultimi post

html and css آموزش

10 set 2026, 01:01

🎥 Video

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

؛𝗹𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀.𝗱𝗲𝘃 چند تا کتابخونه آماده برای افکت‌های مدرن UI رو یکجا جمع کرده؛ فعلاً چیزهایی مثل Border Beam، Thinking Orbs، Liquid Metal، Gooey و Image Effects داره و بیش از ۲۰ Variant آماده هم براشون گذاشته. نکته خوبش اینه که می‌تونی سریع Preview بگیری و مستقیم برای پروژه‌هات استفاده کنی.

برای Hero Section، Dashboard، AI Interface، Loading State و سایت‌های Motion-heavy واقعاً می‌تونه ایده‌های خوبی بده؛ مخصوصاً اگه با Claude، Codex یا Cursor سایت می‌سازی و می‌خوای خروجی کمتر Generic باشه.

🔖
https://libraries.dev/

💎   | #HTML #css #JavaScript

1,000

html and css آموزش

10 set 2026, 01:01

🎥 Video

قابلیت جدید Claude Code با /design برای یک صفحه، طرح و پروتوتایپ بصری می‌سازه. می‌تونید ۲ یا ۳ مسیر متفاوت بخواید، مقایسه‌شون کنید و طرح منتخب رو برای پیاده‌سازی به Claude Code بسپارید

ساخت سه طرح خودکار نیست؛ تعداد گزینه‌ها رو باید در درخواست مشخص کنید.

https://claude.com/product/design

💎   | #HTML #css #JavaScript

2,110

html and css آموزش

10 set 2026, 01:01

معرفی ابزارهای سئو با هوش مصنوعی؛ کدام‌یک رایگان هستند؟

ابزارهای سئو مبتنی بر هوش مصنوعی در سال‌های اخیر به کمک تولیدکنندگان محتوا آمده‌اند تا تحقیق کلمات کلیدی، بهینه‌سازی مقالات و تحلیل رقبا را سریع‌تر انجام دهند. در میان ابزارهای شناخته‌شده، Jasper AI دارای نسخه رایگان محدود است، اما امکانات کامل آن پولی است. ابزارهایی مانند Surfer SEO، Semrush، Frase و NeuronWriter نسخه رایگان کامل ندارند و بیشتر با دوره آزمایشی یا امکانات محدود رایگان ارائه می‌شوند. Ahrefs نیز برخی ابزارهای رایگان دارد، اما قابلیت‌های اصلی آن نیازمند اشتراک است. برای شروع بدون هزینه، ابزارهایی مانند Google Search Console، Google Trends و Keyword Planner همچنان گزینه‌های کاربردی برای بررسی وضعیت سایت و پیدا کردن موضوعات مناسب هستند.

💎   | #HTML #css #JavaScript

2,440

html and css آموزش

10 set 2026, 01:01

🎥 Video

ساخت فرم ثبت‌نام فقط چیدن چندتا فیلد کنار هم نیست؛ نمایش درست خطاها، بررسی امنیت رمز عبور و وضعیت ارسال فرم هم باید درست کار کنه.

که beUI مجموعه‌ای از کامپوننت‌های آماده و قابل شخصی‌سازیه که کدشون رو مستقیم داخل پروژه استفاده می‌کنید.
https://beui.dev/

💎   | #HTML #css #JavaScript

1,770

html and css آموزش

10 set 2026, 01:01

🎥 Video

برای ساخت هر دکمه، فرم یا حالت بارگذاری لازم نیست CSS رو از صفر بنویسید.

چون UIverse بیش از ۷ هزار کامپوننت آماده و متن‌باز داره؛از دکمه و فیلد ورودی گرفته تا کارت، لودر و چک‌باکس.

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

https://uiverse.io/

💎   | #HTML #css #JavaScript

2,030

html and css آموزش

10 set 2026, 01:01

🎥 Video

یک قالب متن‌باز که URL یک سایت رو می‌گیره، طراحی و اجزاش رو بررسی می‌کنه و با کمک AI Agentها نسخه‌ای از اون رو با Next.js و Tailwind بازسازی می‌کنه.

طراحی، Assetها و Design Tokenها استخراج می‌شن و بخش‌های سایت به‌صورت موازی ساخته می‌شن.

https://github.com/JCodesMore/ai-website-cloner-template

💎   | #HTML #css #JavaScript

2,290

html and css آموزش

10 set 2026, 01:01

نمونه کد عملی برای پیاده‌سازی CSS View Transitions

🎬 نمونه کد: CSS View Transitions

۱. فعال‌سازی ساده روی همه صفحات

ساده‌ترین راه، فعال‌سازی روی  هست. فقط کافیه این CSS رو اضافه کنی:
@view-transition {
navigation: auto;
}
همین! حالا هر جابه‌جایی بین صفحات، خودکار انیمیشن داره.

۲. شخصی‌سازی انیمیشن با https://t.me/keyframes

می‌تونی تعیین کنی صفحه قدیم چطور محو بشه و صفحه جدید چطور ظاهر بشه:
::view-transition-old(root) {
animation: fadeOut 0.4s ease-out;
}

::view-transition-new(root) {
animation: fadeIn 0.4s ease-in;
}

@keyframes fadeOut {
to {
opacity: 0;
transform: translateY(-20px);
}
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
}
۳. انیمیشن اختصاصی برای یک المان خاص

فرض کن می‌خوای وقتی از یه صفحه به صفحه دیگه می‌ری، یه کارت خاص جابه‌جا بشه. کافیه بهش یه view-transition-name بدی:
تیتر اصلیتوضیحات کارت

و تو CSS:
::view-transition-old(hero-card),
::view-transition-new(hero-card) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
۴. مثال کامل: یک صفحه با دو لینک
دموی View Transitionsصفحه اصلیروی دکمه زیر بزن تا انیمیشن جابه‌جایی رو ببینی.
برو به صفحه دوم




۵. مثال با JavaScript (برای SPA)
function navigateTo(url) {
if (!document.startViewTransition) {
window.location.href = url;
return;
}

document.startViewTransition(() => {
window.location.href = url;
});
}


💎   | #HTML #css #JavaScript

html and css آموزش

10 set 2026, 01:01

🎥 Video

یه نفر یه رابط کاربری ساخته به اسم Sashimi UI که ایده‌ش واقعاً جالبه.

یه UI Library که می‌خواد تا جای ممکن از قدرت خود HTML استفاده کنه؛ بدون dependency، بدون JavaScript، بدون قفل شدن به یه framework خاص و بدون کلی فایل config اضافی. یعنی برای ساخت UIهای مدرن می‌تونی از قابلیت‌های native خود وب مثل dialog، popover، فرم‌ها و interactive elementهای HTML استفاده کنی، در حالی که کدت ساده و نزدیک به خود HTML باقی می‌مونه.

خلاصه فقط HTML و بس :

http://github.com/yuto-hasegawa/sashimi-ui

💎   | #HTML #css #JavaScript

1,220

html and css آموزش

10 set 2026, 01:01

📷 Photo

Make your web pages feel like as Prompt Engineering for LLMs ingle-page app

Smooth page transitions with CSS View Transitions reduce jank and improve UX.

✨ صفحات وبت رو مثل یه اپلیکیشن تک‌صفحه‌ای حرفه‌ای کن!

اگه از اون دسته طراح‌هایی هستی که می‌خوای جابه‌جایی بین صفحات وب، روان و بدون پرش باشه، وقتشه با CSS View Transitions آشنا بشی. این قابلیت جدید، همون چیزیه که اپلیکیشن‌های موبایل و SPAها رو از بقیه متمایز می‌کنه، حالا اومده تو وب.

💡 چرا View Transitions؟ چون کاربر دیگه لازم نیست بین صفحات مختلف، صفحه سفید ببینه یا منتظر لود شدن بمونه. همه چیز به‌صورت انیمیشن روان و یکپارچه اتفاق می‌افته. نتیجه؟ تجربه کاربری بهتر، حس حرفه‌ای‌تر و حس مدرن‌تر.

💎   | #HTML #css #JavaScript

1,370

html and css آموزش

10 set 2026, 01:01

🎥 Video

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

توی Gradient Lab رنگ‌ها رو انتخاب می‌کنی و جهت ترکیب، میزان محوشدن، سرعت حرکت و روشنایی رو تغییر می‌دی. آخرش هم نتیجه رو به‌شکل عکس، ویدیو یا کد آماده برای سایت می‌گیری.

http://backgrounds.supply/gradient-lab

💎   | #HTML #css #JavaScript

1,140

html and css آموزش

25 ago 2026, 21:01

🎥 Video

🎨 اگه برای طراحی سایت یا اپلیکیشن دنبال انیمیشن‌ها و المان‌های آماده هستید، این ابزار می‌تونه کلی از زمان طراحی رو کم کنه.

✨ سرویس OriginKit⁠ یک کتابخانه رایگان از کامپوننت‌های متحرک برای وب‌سایت‌های مدرنه که می‌تونید المان‌های آماده رو بردارید و مستقیم داخل پروژه‌تون استفاده کنید.

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

🛠️ این کامپوننت‌ها برای استفاده در پروژه‌های React و Framer طراحی شدن و امکان اتصال به ابزارهای کدنویسی هوش مصنوعی مثل Claude Code و Codex هم در نظر گرفته شده.

🚀 برای طراح‌ها و توسعه‌دهنده‌هایی که زیاد با AI و وایب‌کدینگ کار می‌کنن، OriginKit می‌تونه یه منبع آماده و کاربردی برای ساخت سریع‌تر رابط‌های جذاب باشه.

http://originkit.dev/

💎   | #HTML #css #JavaScript

1,010

html and css آموزش

25 ago 2026, 21:01

🎥 Video

با Three.js میشه سایت‌های تعاملی سه‌بعدی ساخت که نور، آب‌وهوا، دوربین و مدل‌های 3D رو مستقیم داخل مرورگر کنترل می‌کنن.

این پروژه برای ساخت مدل‌ها از Claude Code و برای تکسچر و صدا از Higgsfield استفاده کرده.

Three.js: https://threejs.org/

💎   | #HTML #css #JavaScript

917

html and css آموزش

25 ago 2026, 21:01

🎥 Video

یه اکستنشن خوب به اسم postmate جایگزین بی دردسر postman

تقریبا همه‌چی رو ساپورت می‌کنه GraphQL و WebSocket خیلی بی دردسره.

http://marketplace.visualstudio.com/items?itemName=PostMate-lab.postmate

💎   | #HTML #css #JavaScript

1,000

html and css آموزش

25 mag 2026, 22:58

📷 Photo

☯️ https://httb.ir/LDGEm

🧠 از مفاهیم پایه تا پروژه‌های واقعی
🐍 به همراه آموزش Python و SQL Server

💯 دوره آنلاین #علم_داده مناسب برای:

✔️ دانشجوها ✔️ تحلیلگران داده ✔️کارکنان واحدهای تخصصی
و
⭐️ افرادی که دنبال تغییر مسیر شغلی به دنیای تحلیلگری داده و دیتاساینس هستن

📌 مشاوره رایگان + مشاهده جزئیات دوره:

🔗 http://httb.ir/LDGEm

⚪️ گواهینامه معتبر مؤسسه توسعه
---
📈 جمع‌بندی سریع:
✅ دوره آنلاین
✅ شروع با مفاهیم پایه
✅ یادگیری ماشین Python، (ML) و شبکه‌های عصبی
✅ آموزش با Case Study ها و تحلیل‌ها از صنایع و حوزه‌های متعدد

1,320

html and css آموزش

25 mag 2026, 22:58

📷 Photo

🔰 Smooth Scrolling with CSS Snap

Learn how to create scroll-able sections and carousels using just CSS Scroll Snap. No JavaScript needed. This guide breaks it down in 6 slides with examples, tips, and visuals.

💎

1,120

html and css آموزش

25 mag 2026, 22:58

🎥 Video

Glassmorphism Login Form Using HTML & CSS | Step-by-Step Full Tutorial

💎

1,590

html and css آموزش

25 mag 2026, 22:58

🎥 Video

Modern Input Label Hover & Focus Animation

💎

1,260

html and css آموزش

25 mag 2026, 22:58

🎥 Video

: Social Media Icons Hover Effects 🔥 HTML & CSS

#webdevelopment #coding #html #css

💎

1,100

html and css آموزش

25 mag 2026, 22:58

🎥 Video

یه فیچر عالی واسه فرانت‌اند کارها امروز توسط Claude Code معرفی شد!

از این به بعد میتونید کدهای UI رو مستقیم به فایل دیزاین تو Figma تبدیل کنید!

💎

1,680

html and css آموزش

25 mag 2026, 22:58

🎥 Video

Light Toggle Function | HTML, CSS & JS

💎

1,750

html and css آموزش

25 mag 2026, 22:58

🎥 Video

Simple To-Do List App Using JavaScript

💎

1,760

html and css آموزش

25 mag 2026, 22:58

🎥 Video

Animated Upload File Button | HTML CSS

💎

2,150

html and css آموزش

25 mag 2026, 22:58

🎥 Video

Color Flipper Button | HTML, CSS & JS

💎

1,650

html and css آموزش

28 apr 2026, 09:15

🎥 Video

Counter button| HTML, CSS & JS

💎

1,890

html and css آموزش

28 apr 2026, 09:15

🎥 Video

؛Masked SVG Loader - بارگذاری انیمیشن با استفاده از CSS و جاوا اسکریپت

https://codepen.io/jh3y/pen/BabVPVd

💎

1,970

Showing 25 of 25 posts

No more posts

Valutazione

Accesso richiesto

Recensioni degli utenti (0)

Nessuna recensione ancora. Sii il primo a condividere la tua opinione!

Canali Telegram correlati

Loading recommended channels...

html and css آموزش

html and css آموزش

Classifica

Crescita abbonati (Ultimi 21 giorni)

Ultimi post

تیتر اصلی

صفحه اصلی

Valutazione

Recensioni degli utenti (0)

Canali Telegram correlati

Latexmods

FLAGTON BITNEST JSI LIS LUDOMAN ARNI VNUK BATYM TSP RICH🇮🇹🇺🇳

🌐 Zazyvala • Bot Channels

@Linuxaibot 💀💀💀

Hanzo Darkweb

Deconstructing Flutter

ScontiQuest

doublemur #noform

Canali Telegram correlati

Latexmods

FLAGTON BITNEST JSI LIS LUDOMAN ARNI VNUK BATYM TSP RICH🇮🇹🇺🇳

🌐 Zazyvala • Bot Channels

@Linuxaibot 💀💀💀

Hanzo Darkweb

Deconstructing Flutter

ScontiQuest

doublemur #noform

Ultimi post

تیتر اصلی

صفحه اصلی

Recensioni degli utenti (0)