</awat>

دوستان اکانت جمنای پرو به فروش می‌رسد با قیمت 500 هزار تومان اگر تمایل به خرید داشتید به دایرکت پیام بدید

فروش اکانت جمنای پرو

@awat_admin
دایرکت☝🏽

❤3🤩2

196 viewsawat, edited 20:40

</awat>

</awat> pinned a photo

20:43

</awat>

‏آیا میدانستید؟ 🗿

‏"()document.write"

یکی از قابلیت‌های خیلی قدیمی جاوااسکریپته که از زمان مرورگرهای قدیمی مثل Netscape به جا مونده.

‏باهاش خیلی ساده می‌تونستی یه متن رو مستقیم بندازی توی صفحه:‏

document.write("Hello World");

‏امروزه دیگه تقریباً کسی ازش استفاده نمی‌کنه و بیشتر یه یادگاری از روزای قدیم وب محسوب میشه

#فسیل

@awat_dev

❤3

154 viewsawat, edited 05:01

</awat>

رفقا این نمونه فرم log in برای تمرین html CSS خیلی مناسبه

@awat_dev

❤3🤩1💯1

199 viewsawat, 05:21

</awat>

رفقا این نمونه فرم log in برای تمرین html CSS خیلی مناسبه @awat_dev

file_000000001b5c820abd9484ce6c8b9f0c.png

1.9 MB

تصویر بک گراند فرم

@awat_dev

❤3

187 viewsawat, edited 05:22

</awat>

رفقا این نمونه فرم log in برای تمرین html CSS خیلی مناسبه @awat_dev

از این چالش ها برگزار کنیم شما انجام بدین؟؟

🔥6🗿1

143 viewsℋ𝒶𝓂ℯ𝒹 𝒜𝓌𝒶𝓉, 08:44

</awat>

🧱 مرحله ۱ | تگ‌های پایه HTML 🔹 تگ "<html>" مشخص می‌کنه کل صفحه یک سند HTML هست. 🔹 تگ "<head>" اطلاعات و تنظیمات صفحه اینجا نوشته میشه. 🔹 تگ "<title>" عنوانی که روی تب مرورگر نمایش داده میشه. 🔹 تگ "<body>" محتوایی که داخل صفحه دیده میشه، اینجا قرار می‌گیره.…

سری دوم معرفی تگ ها

138 viewsAmir Awat, 21:58

</awat>

126 viewsAmir Awat, 22:01

</awat>

🚀 آموزش HTML | مرحله دوم

در مرحله اول با تگ‌های پایه HTML آشنا شدیم.
حالا در مرحله دوم چند تگ کاربردی‌تر را یاد می‌گیریم.

در این قسمت فقط نصف تگ‌های مرحله دوم را بررسی می‌کنیم. 👇

---

🔹 1. تگ "<div>"

برای ساخت یک بخش یا قسمت در صفحه استفاده می‌شود.

<div>
این یک بخش از صفحه است.
</div>

---

🔹 2. تگ "<span>"

برای مشخص کردن یک قسمت از متن استفاده می‌شود.

<p>
من در حال یادگیری <span>HTML</span> هستم.
</p>

---

🔹 3. تگ "<img>"

برای نمایش تصویر در صفحه استفاده می‌شود.

<img src="photo.jpg" alt="عکس من">

"src" مسیر تصویر را مشخص می‌کند و "alt" توضیح جایگزین تصویر است.

---

🔹 4. تگ "<ul>"

برای ساخت لیست بدون شماره استفاده می‌شود.

<u

l>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

---

🔹 5. تگ "<ol>"

برای ساخت لیست شماره‌دار استفاده می‌شود.

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

---

🔹 6. تگ "<li>"

برای ساخت هر آیتم داخل لیست استفاده می‌شود.

<ul>
<li>یادگیری HTML</li>
<li>یادگیری CSS</li>
<li>یادگیری JavaScript</li>
</ul>

---

🔹 7. تگ "<br>"

برای رفتن به خط بعد استفاده می‌شود.

سلام

<br>
به دوره HTML خوش آمدید.

---

📌 خلاصه مرحله دوم

تا اینجا با این تگ‌ها آشنا شدیم:

<div>
<span>
<img>
<ul>
<ol>
<li>
<br>

⏳ نصف باقی‌مانده تگ‌های مرحله دوم را در بخش بعدی یاد می‌گیریم.
#html

@awat_dev

❤3👏3

141 viewsAmir Awat, edited 22:01

</awat>

🚀 آموزش HTML | مرحله دوم در مرحله اول با تگ‌های پایه HTML آشنا شدیم. حالا در مرحله دوم چند تگ کاربردی‌تر را یاد می‌گیریم. در این قسمت فقط نصف تگ‌های مرحله دوم را بررسی می‌کنیم. 👇 --- 🔹 1. تگ "<div>" برای ساخت یک بخش یا قسمت در صفحه استفاده می‌شود. <div>…

قسمت دوم مرحله دوم معرفی تگ های html

#html

@awat_dev

❤3🔥1

128 viewsAmir Awat, 22:06

</awat>

منظور از نسخه پروداکشن چیه دقیقا ؟
نسخه ای برنامه ما که برای انتشار نهایی بر روی سرور ساخته میشه بهش میگن نسخه پروداکشن. سبک ، فشرده ، بهینه‌.

چرا اصلا باید نسخه پروداکشن بسازیم ؟
چون
حجم کم => سرعت بالا
کدفشرده => امنیت بیشتر
حذف فایل های اضافی => عملکرد بهتر
اماده برای کاربران واقعی.

پس
فاز Development فقط برای توسعه و تست.
و فاز production برای انتشار نهایی بر روی سرور

@awat_dev

🔥6

101 viewsAli, 13:11

</awat>

🚀 تگ‌های "<details>" و "<summary>" در HTML

با این دو تگ می‌تونی بدون JavaScript بخش‌های بازشونده مثل FAQ بسازی. 🔥

━━━━━━━━━━━━━━

📌 "<details>"

برای ساخت بخش باز و بسته‌شونده استفاده می‌شه.

📌 "<summary>"

عنوان قابل کلیک برای "<details>" هست.

مثال:

<details>
  <summary>HTML چیست؟</summary>
  <p>HTML برای ساختار صفحات وب استفاده می‌شود.</p>
</details>

━━━━━━━━━━━━━━

❓ ساخت FAQ

<details>
  <summary>CSS چیست؟</summary>
  <p>CSS برای طراحی و زیباسازی صفحات وب است.</p>
</details>

<details>
  <summary>JavaScript چیست؟</summary>
  <p>JavaScript برای ایجاد رفتار و تعامل در صفحات وب استفاده می‌شود.</p>
</details>

━━━━━━━━━━━━━━

🔓 ویژگی "open"

اگر بخوای بخش از ابتدا باز باشه، "open" رو اضافه کن:

<details open>
  <summary>اطلاعات بیشتر</summary>
  <p>این بخش از ابتدا باز است.</p>
</details>

━━━━━━━━━━━━━━

🧠 خلاصه:

✅ "<details>" → بخش بازشونده
✅ "<summary>" → عنوان قابل کلیک
✅ "open" → باز بودن اولیه
✅ مناسب برای FAQ
✅ بدون نیاز به JavaScript

#HTML

@awat_dev

❤1🔥1💯1

193 viewsawat, edited 21:13

</awat>

برای نصب Font Awesome با استفاده از npm، می‌توانید مراحل زیر را دنبال کنید:

▎1. نصب npm

مطمئن شوید که Node.js و npm بر روی سیستم شما نصب شده‌اند. اگر Node.js را نصب کرده‌اید، npm به‌طور خودکار نصب می‌شود.

▎2. ایجاد پروژه جدید (اختیاری)

اگر هنوز یک پروژه جدید ندارید، می‌توانید با استفاده از دستورات زیر یک پروژه جدید ایجاد کنید:

mkdir my-project
cd my-project
npm init -y

▎3. نصب Font Awesome

برای نصب Font Awesome، دستور زیر را در ترمینال اجرا کنید:

npm install --save @fortawesome/fontawesome-free

▎4. استفاده از Font Awesome در پروژه

پس از نصب، شما باید فایل‌های CSS و JS مربوط به Font Awesome را در پروژه خود وارد کنید. برای این کار، می‌توانید به فایل CSS خود (مثلاً style.css) و یا به HTML خود (مثلاً index.html) لینک دهید.

▎روش اول: استفاده در HTML

در فایل HTML خود، قبل از تگ </head>، لینک CSS و JS را اضافه کنید:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
    <title>Font Awesome Example</title>
</head>
<body>
    <h1>مثال آیکون Font Awesome</h1>
    <i class="fas fa-camera"></i> <!-- آیکون دوربین -->
</body>
</html>

▎روش دوم: استفاده در CSS

اگر می‌خواهید از Font Awesome در CSS استفاده کنید، می‌توانید به صورت زیر عمل کنید:

@import '~@fortawesome/fontawesome-free/css/all.min.css';

▎5. استفاده از آیکون‌ها

حالا شما می‌توانید از آیکون‌های Font Awesome در HTML خود استفاده کنید. به عنوان مثال:

<i class="fas fa-user"></i> <!-- آیکون کاربر -->
<i class="fab fa-github"></i> <!-- آیکون گیت‌هاب -->

با دنبال کردن این مراحل، شما می‌توانید Font Awesome را به پروژه خود اضافه کرده و از آن استفاده کنید.

❤4

250 views-𝐌𝐨𝐡𝐬𝐞𝐍 𝐀𝐰𝐚𝐭, 22:13

</awat>

هیچ روزِ صفری نداشته باشید.

👏10❤1🔥1🤩1

159 viewsAli, edited 10:45

</awat>

یه توصیه برادرانه
توی سال 2026 باید سخت کار کرد دوستان و غیر از این باخت منتظره

زندگی

🔥6🤝6🤷‍♂2

141 viewsAmir Awat, edited 19:12

</awat>

✨ انیمیشن ورود المنت‌ها فقط با CSS

یادته وقتی یه کارت یا مودال رو با JS به صفحه اضافه می‌کردی، انیمیشن ورودش کار نمی‌کرد؟ 😅
دلیلش این بود که مرورگر برای المنتی که تازه ساخته شده «حالت قبلی» نداشت تا ازش انیمیت کنه.

@starting-style
دقیقاً همین حالت اولیه رو بهش می‌ده:

.card {
  opacity: 1;
  transform: none;
  transition: opacity .4s, transform .4s;

  @starting-style {
    opacity: 0;
    transform: translateY(20px);
  }
}

یعنی المنت موقع اولین رندر از حالت داخل @starting-style شروع می‌کنه و نرم به استایل اصلی می‌رسه. روی dialog و popover هم عالی جواب می‌ده 👌

💡 نکته مهم:
برای انیمیشنِ خروج (مثلاً رسیدن به display: none) باید transition-behavior: allow-discrete هم اضافه کنی. مرورگرهای مدرن پشتیبانی می‌کنن، ولی قبل از استفاده توی پروژه اصلی، Can I Use رو چک کن.

📤 برای دوستی که هنوز انیمیشن ورود رو با JS می‌نویسه فوروارد کن!

@awat_dev

❤6

162 viewsℋ𝒶𝓂ℯ𝒹 𝒜𝓌𝒶𝓉, edited 18:04

</awat>

حتما در کنار چیز های که الان دارید یاد میگیرید، میتونید web performance هم یادبگیرید

@awat_dev

❤8

136 viewsAli, edited 11:19

</awat>

معرفی کتابخانه AOS

کتابخانه AOS (Animate On Scroll) برای ساخت انیمیشن هنگام اسکرول در صفحات وب استفاده میشه.

با چند خط کد می‌تونی المان‌های سایت رو هنگام اسکرول با افکت‌های جذابی مثل "fade"، "zoom" و "slide" نمایش بدی.

نحوه استفاده:

<div data-aos="fade-up">
    Hello World
</div>

و در JavaScript:

AOS.init();

ساده، سبک و کاربردی برای جذاب‌تر کردن رابط کاربری سایت.

@awat_dev

🔥4💯4❤2

125 viewsAmir Awat, 09:45

</awat>

دوستانی که با sass کار میکنید.
دیگه لازم نیست دستی خودتون بیاید rem رو محاسبه کنید و بنویسید.
یک فانکشن تعریف میکنید و پیکسل رو به rem تبدیل میکنه.
یعنی شما براساس همون پیکسل کارکنید مشکلی نیست چون این تابع به rem تبدیلش میکنه
ورودی رو بر اساس پیکسل میدی و اون خروجی رو با rem اعمال میکنه

@awat_dev

❤7

142 viewsAli, 13:32

</awat>

پروژه جدید از نوع پنل مدیریت به زودی همراه سورس کد کامل آپلود میشه دوستان🩵

🔥6❤2

117 viewsAmir Awat, 16:27

</awat>

👨‍💻 پنل مدیریت آموزشگاه موسیقی (هارمونیک)

🔥9❤3

300 viewsawat, edited 19:21

About

Blog

Apps

Platform