Html and Css & Jsآموزش

سایت Obsidian UI یه کالکشن جذاب از کامپوننت‌های مدرنه که به پروژه‌هاتون یه ظاهر کاملاً پرمیوم و شیک میده. کپی کنید و سطح رابط کاربری سایتتون رو چند لول ببرید بالاتر.

🔗 https://www.obsidianui.dev/

💎 @Htmlcss_channels | #HTML #css #JavaScript

1.33K views06:46

1:22

مدل Jev توی طراحی یک Design System چقدر خوبه؟

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

هیچ‌کدوم از بخش‌های این ویدیو سریع‌تر نشده؛ هر بار که استایل رو تغییر می‌ده، در واقع 4 درخواست موازی اجرا میشه که حدود 2 ثانیه زمان می‌بره و هزینه‌ش حدود $0.0007 هستش.

29 تا فلگ برای کنترل چیزهایی مثل فرم گوشه‌ها، حاشیه‌ها، خانواده آیکون‌ها، مسیرهای نمودار، بافت صفحه، میزان تراکم و انیمیشن‌ها استفاده میشن؛ همه‌شون هم روی shadcn ساخته شدن.

علاوه بر این‌ها، رنگ، شعاع گوشه‌ها، فاصله‌ها و مقیاس تایپوگرافی هم به‌صورت پیوسته قابل تنظیم هستن.

💎 @Htmlcss_channels | #HTML #css #JavaScript

988 views11:12

HTML: Responsive images

🔅 تصاویر واکنش‌گرا در HTML

با اين تکنیک، مرورگر خودش بهترین نسخه تصویر رو بر اساس اندازه صفحه لود می‌کنه!

🎯 چرا تصاویر واکنش‌گرا مهمن؟

👈 سرعت لود بالاتر – تصویر کوچک‌تر برای موبایل
👈 صرفه‌جویی در پهنای باند
👈 تجربه کاربری بهتر در همه دستگاه‌ها
👈 سئوی بهتر – گوگل سایت‌های سریع رو دوست داره

💻 کد :

<picture>
<source srcset="large.png" media="(min-width: 10rem)" />
<source srcset="medium.png" media="(min-width: 6rem)" />
<img src="small.png" alt="…" />
</picture>

با این تکنیک ساده:

📱 در موبایل → تصویر کوچک و سبک

💻در دسکتاپ → تصویر بزرگ و باکیفیت

⚡ سرعت لود تا ۵۰٪ بهتر!

#Responsive #WebDesign #Frontend

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤4🔥1

1.02K views11:49

0:44

۵ منبع رایگان کاربردی برای طراحان و توسعه‌دهندگان وبسایت!

اگه دنبال کامپوننت‌های آماده، آیکون، انیمیشن و موکاپ هستی، از این سایت‌ها استفاده کنید 👇

Spectrum UI : ui.spectrumhq.in

✨ ۲۵۰+ کامپوننت Open Source با React و Tailwind
پشتیبانی از MCP (Model Context Protocol)
مناسب برای ساخت سریع رابط کاربری حرفه‌ای

Animated Buttons : animatedbuttons.colorion.co

🎬 دکمه‌های CSS انیمیشنی رایگان با افکت‌های جذاب و خلاقانه با قابلیت کپی کردن کد

Obsidian UI: obsidianui.dev

🧩 ۳۵+ کامپوننت و بلاک آماده ، سازگار با shadcn CLI شامل طراحی های مدرن و مینیمال

Keyline Icons: keylineicons.com

🎯 ۸۰۰۰+ آیکون رایگان برای Shadcn با سبک‌های متنوع و یکدست و جستجوی آسان

Morflax Studio : studio.morflax.com

🎭 موکاپ‌های ۳D رایگان برای ساخت موشن گرافیک حرفه‌ای و ارائه پروژه‌ها

💎 @Htmlcss_channels | #HTML #css #JavaScript

1.08K views06:43

0:22

برای معرفی پروژه هاتون به کارفرما بهتره از این روش استفاده کنید
این وبسایت پروژه هاتون رو تبدیل می‌کنه به Showreel متحرک، بدون اینکه بری سراغ After Effects

بیش از 260 مدل Motion داره و برای معرفی UI/UX، اپ، سایت و پورتفولیو خیلی به‌درد می‌خوره.

فقط مدیا رو میدی، استایل رو انتخاب می‌کنی و خروجی می‌گیری.

لینک:
https://reelfolio.io

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

💎 @Htmlcss_channels | #HTML #css #JavaScript

760 views18:41

🔅 CSS Clamp

clamp(minimum, preferred, maximum);

In this example, the preferred value is 50%.

On the left 50% of the 400px viewport is 200px, which is less than the 300px minimum value that gets used instead.

On the right, 50% of the 1400px viewport equals 700px, which is greater than the minimum value and lower than the 800px maximum value, so it equates to 700px.

💎 @Htmlcss_channels | #HTML #css #JavaScript

536 viewsedited 09:03

🔅 CSS Clamp clamp(minimum, preferred, maximum); In this example, the preferred value is 50%. On the left 50% of the 400px viewport is 200px, which is less than the 300px minimum value that gets used instead. On the right, 50% of the 1400px viewport equals…

؛CSS Clamp — اندازه‌گذاری هوشمند

فرمول ساده

؛clamp(کمترین, مقدار_ایده‌آل, بیشترین)
مثل یه کش لاستیکی عمل می‌کنه:

🟢 اگه خیلی کوچیک شد → به کمترین حد می‌رسه

🔴 اگه خیلی بزرگ شد → به بیشترین حد می‌رسه

🟡 در حالت عادی → اندازه ایده‌آل رو داره

مثال تصویر

width: clamp(300px, 50%, 800px);صفحه نمایش۵۰٪نتیجه📱 کوچک (400px)200px300px (کمترین)💻 بزرگ (1400px)700px700px (ایده‌آل)🖥️ خیلی بزرگ (2000px)1000px800px (بیشترین)

کجا استفاده می‌شه؟

۱. سایز فونت responsive
/* بهترین روش برای فونت‌های واکنش‌گرا */
font-size: clamp(16px, 2.5vw, 32px);

موبایل: 16px

دسکتاپ: 32px

بینشون: بر اساس عرض صفحه

۲. عرض کارت‌ها

.card {
width: clamp(280px, 90%, 1200px);
}

۳. فاصله‌ها (padding/margin)

padding: clamp(1rem, 3vw, 3rem);

۴. ارتفاع هدر

height: clamp(60px, 10vh, 120px);

مقایسه با روش‌های قدیمی

قبلاً باید اینطوری می‌نوشتی:
/* ۱۰ خط کد با media query */

.title {
font-size: 16px;
}
@media (min-width: 768px) {
.title { font-size: 24px; }
}
@media (min-width: 1200px) {
.title { font-size: 32px; }
}

حالا فقط یه خط:

.title {
font-size: clamp(16px, 4vw, 32px);
}

🎉 همین! تمیزتر، سریع‌تر، بدون media query.

نکات مهم ⚠️

۱. ترتیب مهمه!
/* ✅ درست */

clamp(MIN, PREFERRED, MAX)

/* ❌ غلط */

clamp(MAX, PREFERRED, MIN)

۲. می‌تونی ترکیب واحد استفاده کنی

font-size: clamp(1rem, 2.5vw + 0.5rem, 3rem);

۳. پشتیبانی مرورگرها

✅ Chrome, Firefox, Safari, Edge (نسخه‌های جدید)

یه مثال کامل و کاربردی

.hero {
/* عنوان اصلی */
font-size: clamp(2rem, 5vw, 4.5rem);

/* زیرعنوان */
padding: clamp(1rem, 3vw, 2rem);

/* عرض کلی */
max-width: clamp(320px, 90%, 1400px);

/* فاصله داخلی */
margin: clamp(2rem, 5vh, 5rem) auto;
}

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤3

667 viewsedited 09:04

0:10

Media is too big

این سایت کامپوننت های وبی زیبایی داره ، تستش کنید

uselayouts.com

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤4👍2

555 views06:32

If you have a website, incorporating an AI agent (or several) can be really helpful.

And in this in-depth tutorial, andrewbaisden walks you through creating a team of agents for your site.

You'll build the front end with React, the back end with Python, and use helpful tools like Agno & Groq Cloud, too.

https://www.freecodecamp.org/news/build-a-team-of-ai-agents-for-your-website-for-free/

💎 @Htmlcss_channels | #HTML #css #JavaScript

480 views07:50

0:26

📊 نمودارهای آماده و انیمیشن‌دار برای React با EvilCharts

نمودارهایی مثل Line، Bar، Pie و Sankey رو با یک دستور shadcn وارد پروژه می‌کنید.

کدشون در اختیار خودتونه؛ پس داده، رنگ و رفتارشون رو هر طور بخواید تغییر می‌دید.

رایگان و متن‌بازه.

https://evilcharts.com

💎 @Htmlcss_channels | #HTML #css #JavaScript

369 views14:15

Forwarded from Iran AI House | خانه هوش ایران

0:57

Media is too big

ثبت نام دوره‌های تخصصی آموزش هوش مصنوعی شروع شد!

اگه مدت‌هاست می‌خوای هوش مصنوعی رو جدی‌تر یاد بگیری، ثبت‌نام رو برای بعدا نذار؛

دوره های تخصصی شامل :

📌 دوره آموزش هوش مصنوعی با پایتون
📌دوره تحلیل داده ( Data Analysis)
📌 دوره Machine Learning مقدماتی
📌 دوره Machine Learning پیشرفته
📌 دوره Deep Learning مقدماتی تا پیشرفته

دانش‌آموزهای مستعد هم فرصت دریافت بورسیه و عضویت در باشگاه نخبگان هوش مصنوعی رو دارن.
هر دوره فقط ۲۰ نفر ظرفیت داره.

💬

مشاوره قبل از ثبت نام :
@IranAIHousestu

🔗

پیش ثبت نام و اطلاعات بیشتر :
https://landing.iranaihouse.ai/aischool

Please open Telegram to view this post

VIEW IN TELEGRAM

286 views18:15

Forwarded from رویدادها و دوره های آموزشی

اگه کسب و کارت هوشمند نیست،وقتشه هوشمندش کنی!

🎓 دوره جامع ABA | دستیار کسب وکار هوشمند

در این دوره یاد می گیرید چطور:
🔹 فرصت های واقعی AI را در کسب وکار پیدا کنید
🔹 فرایندهای کاری را بازطراحی و هوشمند کنید
🔹 از AI برای فروش، بازاریابی، مالی و منابع انسانی استفاده کنید
🔹 دستیارها و Agentهای هوشمند بسازید
🔹 برای تحول AI در سازمان یک نقشه عملی داشته باشید

🎓 مدرک وزارت علوم، تحقیقات و فناوری
💰 امکان پرداخت نقدی و اقساطی

✅ همراه با ضمانت آموزشی

✅ برای ثبت‌نام و دریافت مشاوره رایگان به آیدی زیر پیام دهید:
@elmsaz_admin11

علمساز | ساز یادگیری

260 views06:40

0:36

سایت StringTune یه مجموعه از کامپوننت های آماده برای ساخت تجربه‌های تعاملی و انیمیشن‌های مدرنه که کمک می‌کنه سایتتون خیلی روان‌تر و جذاب‌تر به نظر برسه. ✨

نکته جالبش اینه که رویکردش بیشتر CSS-محوره و تا جای ممکن بدون JavaScript اضافی کار می‌کنه. 🔥

🔗 https://string-tune.fiddle.digital/skill-hub

💎 @Htmlcss_channels | #HTML #css #JavaScript

245 views13:03