Storage Bar | #HTML #CSS #JavaScript


@htmlcss_channels

💡 Scroll-Snap-Type

Allows you to create smooth, controlled scrolls with a "binding" to certain positions

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

🔘 is used for carousels, sliders and lists.

Why is it needed:

➡️ Make UX convenient and predictable.

➡️ Get rid of crutches on JS.

💎@htmlcss_channels

- جرمی هاوارد، شخصیتی برجسته در حوزه هوش مصنوعی و علوم داده، یک برنامه FastHTML را معرفی کرده که دارای سیستم ورود، قابلیت کشیدن و رها کردن، و تمام نقاط پایانی CRUD (ایجاد، خواندن، به‌روزرسانی، حذف) است که در تنها ۸۴ خط کد پایتون کدنویسی شده ، این امر نشان‌دهنده جهشی بزرگ در توسعه وب نسبت به چارچوب‌های سنتی مانند ASP.NET MVC است که اغلب برای عملکرد مشابه به صدها خط کد نیاز دارند. - طراحی این برنامه در مخزن GitHub توضیح داده شده

👉https://github.com/AnswerDotAI/fasthtml/blob/main/examples/adv_app.py



👉https://www.answer.ai/posts/2025/01/15/monsterui.html


💎@htmlcss_channels

3D CSS Social Tiles with Hover Animation

💎 @htmlcss_channels

online gradient generator on #CSS

This free tool will allow you to quickly unscrew the desired gradient, copy the CSS code and insert into your project.

https://www.joshwcomeau.com/gradient-generator/


💎 @htmlcss_channels

📝 #CSS HANDBOOK

این کتاب به شما کمک میکند در کمترین زمان ممکن CSS را از صفر و بصورت جامع یاد بگیرید


👈برای دسترسی به کتابهایی که تا الان در کانال منتشر شده از #pdf استفاده کنید

💎 @htmlcss_channels

Uiverse

Uverse: this is 6000+ ready -made #HTML / #CSS components for your project

بیش از 6000 آیتم آماده رایگان در این مجموعه وجود دارد که می تونید در پروژه تون وارد کنید خودشو سازگار با پروژه تون میکنه شما فقط کپی کنید و لذت ببرید.

مؤلفه ها به طور مرتب در دسته ها طبقه بندی شده اند و به راحتی به پروژه شما منتقل می شوند

💎 @htmlcss_channels

📝 #JavaScript HANDBOOK



کتابچه راهنمای JavaScript از قانون 80/20 پیروی می کند: در 20 ٪ از زمان 80 ٪ موضوع را بیاموزید.
هدف این است که سرعت شما در یادگیری و حرفه ای شدن با JavaScript را بالا ببرد



👈برای دسترسی به سایر کتابهای طراحی و توسعه وب که تا الان تو کانال منتشر شده از #pdf استفاده کنید

💎 @htmlcss_channels

Liquid Glass Effect | #HTML #CSS #JavaScript


💎 @htmlcss_channels

📝 #HTML HANDBOOK

این کتاب با هدف کمک به شما در یادگیری سریع HTML و آشنایی با موضوعات پیشرفته HTML نوشته شده است


👈برای دسترسی به سایر کتابهای طراحی و توسعه وب که تا الان تو کانال منتشر شده از #pdf استفاده کنید

💎 @htmlcss_channels

Vivus

A library for creating drawn animations using SVG. Many different animations are available, as well as the ability to create your own script for drawing SVG in any way you like.

https://maxwellito.github.io/vivus/



💎 @htmlcss_channels

Rotating plates | #HTML #CSS #JavaScript



💎 @htmlcss_channels

Isometric Card Grid

Isometric card grid. Implemented using CSS and JS.

⤷ code



💎 @htmlcss_channels

✅ برنامه‌نویسی وب دقیقاً یعنی چی؟

🔆 فرانت‌اند (Front-End): همون چیزیه که کاربر می‌بینه؛ ظاهر سایت، دکمه‌ها، رنگ‌ها، عکس‌ها، فرم‌ها. با HTML، CSS و JavaScript ساخته می‌شه.

💻 بک‌اند (Back-End): بخشیه که پشت‌صحنه کار می‌کنه؛ مثل ذخیره‌سازی اطلاعات، ثبت‌نام، ورود کاربران، ارتباط با پایگاه داده‌ها. Php بهترین زبان برای نوشتن این بخشه!

📲 اپلیکیشن‌نویسی (Web App یا PWA): ساختن برنامه‌هایی مثل نسخه‌ی وب اینستاگرام، دیجی‌کالا یا واتساپ که روی موبایل و دسکتاپ مثل اپ کار می‌کنن. Ionic، angular، Node.js برای اپلیکیشن‌نویسی بسیار کارآمد و حرفه‌ایه

#HTML #CSS #JavaScript


💎 @htmlcss_channels

Table Flipping

The effect on the images during scrolling. Implemented using CSS.

⤷ code



💎 @htmlcss_channels

Animated Login Form using #HTML & #CSS

In this tutorial, we’ll build a *modern and animated Login Form* using just *HTML and CSS* — with smooth transitions, glowing borders, and floating labels.


💎 @htmlcss_channels

Dropdown Menu #HTML #CSS | Hover Effects


Code
Source



💎 @htmlcss_channels

⚡️ Bolt.new: AI-Powered Full-Stack Web Development in the Browser


Bolt.new is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required. If you're here to build your own AI-powered web dev agent using the Bolt open source codebase


https://github.com/stackblitz/bolt.new



💎 @htmlcss_channels

Create Snake Game in #HTML, #CSS, #JavaScript



💎 @htmlcss_channels