📅 روز 4: لیست‌ها و جدول‌ها در HTML
🎯 نمایش مرتب اطلاعات
تا اینجا یاد گرفتیم متن، عکس، لینک و فرم بسازیم.
امروز یاد می‌گیریم چطور اطلاعات رو مرتب و ساختاریافته نمایش بدیم.
📝 لیست‌ها (Lists)
لیست‌ها برای نمایش مجموعه‌ای از آیتم‌ها استفاده میشن.
مثلاً:
خرید روزانه
وظایف (Todo)
منوی سایت
🔹 لیست نامرتب (ul)
در این نوع لیست، آیتم‌ها با نقطه نمایش داده میشن.

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

خروجی:
• HTML
• CSS
• JavaScript

🔹 لیست مرتب (ol)
در این نوع لیست، آیتم‌ها شماره‌گذاری میشن.

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

خروجی:
یادگیری HTML
یادگیری CSS
یادگیری JavaScript

🔹 آیتم لیست (li)
هر مورد داخل لیست با تگ li ساخته میشه.

<li>آیتم اول</li>

📊 جدول‌ها (Tables)
جدول‌ها برای نمایش داده‌های منظم استفاده میشن.
مثلاً:
لیست دانش‌آموزان
محصولات
نمرات
ساختار اصلی جدول

<table>
  <tr>
    <td>نام</td>
    <td>سن</td>
  </tr>

  <tr>
    <td>علی</td>
    <td>20</td>
  </tr>
</table>

🧠 تگ‌های مهم جدول
table
جدول اصلی

tr

یک ردیف از جدول

td

یک سلول از جدول
مثال کامل

<table>
  <tr>
    <td>نام</td>
    <td>شغل</td>
  </tr>

  <tr>
    <td>حامد</td>
    <td>Front-End Developer</td>
  </tr>

  <tr>
    <td>علی</td>
    <td>UI Designer</td>
  </tr>
</table>

🎯 تمرین امروز
بخش اول:
یک لیست از تکنولوژی‌های زیر بساز:
HTML
CSS

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

پست بعدی آموزش ،میریم سراغ اولین پروژه کوچیک:
🔥 ساخت صفحه Login کامل با HTML (جمع‌بندی کل مباحث HTML)

#html_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

جدول ها
#html_lessons@devsourcech

نکته: بعضی تگ‌ها نیازی به تگ بسته ندارن 📌

<img src="image.jpg"> 🖼️


<hr>
<input type="text"> 📝

به این‌ها Void Elements میگن 🔄.


همچنین در HTML 🌐

<button>
بهتر از:

<div onclick=" ">

چون Accessibility رو رعایت می‌کنه 🛡️.

#hints@devsourcech 🔗
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

#نمونه_کد@devsourcech 📂📝

پلیر با HTML css و js و کتابخونه parcel.js 🎵🖥️

#سورس_کد@devsourcech 💻

لینک گیتهاب:

https://github.com/HamedFarazi/music-player.git 🔗🐙

#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

نکته:
اموزش های ابتدایی برای ورود به ریکت جلوتر که رفت یاد میدم بهتون که چجوری موقعیت یابی موس رو انجام بدید و باهاش کار کنید و همین پروژه خودم رو باهم از صفر بالا میاریم
هم تو css و هم JavaScript

تفاوت CSS و JS در موقعیت موس

CSS:
CSS می‌تواند بفهمد موس روی یک عنصر هست یا نه:

button:hover {
  background-color: red;
}

یعنی:
اگر موس رفت روی دکمه، رنگش عوض شود.

اما CSS به‌تنهایی معمولاً نمی‌تواند مختصات دقیق موس مثل x و y را بخواند.

JavaScript:

خودJavaScript می‌تواند موقعیت دقیق موس را بگیرد:

document.addEventListener("mousemove", function (event) {
  console.log("X:", event.clientX);
  console.log("Y:", event.clientY);
});

اینجا:

این event.clientX موقعیت افقی موس نسبت به پنجره مرورگر است
و این event.clientY موقعیت عمودی موس نسبت به پنجره مرورگر است

موقعیت‌یابی موس چه کاربردی دارد:
1. ساخت افکت‌های تعاملی
مثلاً یک نور یا سایه دنبال موس حرکت کند:

document.addEventListener("mousemove", (e) => {
  document.body.style.setProperty("--x", e.clientX + "px");
  document.body.style.setProperty("--y", e.clientY + "px");
});

css
body {
background: radial-gradient(
circle at var(--x) var(--y),
#444,
#111
);
}





2. ساخت Tooltip
مثلاً وقتی موس روی یک متن می‌رود، یک توضیح کوچک کنار موس نمایش داده شود.
البته toltip ساده را میتوانید با تایتل در attribute بسازید.

3. Drag & Drop
برای کشیدن و رها کردن عناصر، باید بدانیم موس کجاست.

مثلاً:
جابه‌جایی کارت‌ها
آپلود فایل با کشیدن
مرتب‌سازی آیتم‌ها

4. طراحی بازی‌های تحت وب
در بازی‌ها برای هدف‌گیری، حرکت کاراکتر یا تعامل با اشیا از موقعیت موس استفاده می‌شود.


5. ساخت اسلایدرها و کنترل‌های سفارشی
مثلاً یک کنترل صدا یا اسلایدر که با حرکت موس مقدارش تغییر کند.

6. تشخیص کلیک روی نقاط خاص
مثلاً در یک Canvas یا نقشه، بفهمیم کاربر دقیقاً کجا کلیک کرده است.

یک مثال ساده

<div id="box"></div>
<p id="pos"></p>

css

#box {
  width: 300px;
  height: 200px;
  background: lightblue;
}

javascript
const box = document.getElementById("box");
const pos = document.getElementById("pos");

box.addEventListener("mousemove", (event) => {
pos.textContent =
X: ${event.offsetX}, Y: ${event.offsetY};
});`



در این مثال، وقتی موس داخل box حرکت کند، مختصات موس داخل همان باکس نمایش داده می‌شود.


چند نوع مختصات مهم در JavaScript
jsnote_addویرایش با Canvasevent.clientX
event.clientY
نسبت به پنجره‌ی مرورگر.
jsnote_addویرایش با Canvasevent.pageX
event.pageY
نسبت به کل صفحه، حتی اگر اسکرول شده باشد.
jsnote_addویرایش با Canvasevent.offsetX
event.offsetY
نسبت به خود عنصری که رویداد روی آن اتفاق افتاده.
jsnote_addویرایش با Canvasevent.screenX
event.screenY
نسبت به صفحه‌نمایش دستگاه.

#hints@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

خیلی‌ها برای اولین بار اسم حریم خصوصی تفاضلی یا همون Differential Privacy رو می‌شنون


فرض کنید یه محصول دارید که برای میلیون‌ها کاربر نصب شده.
شما می‌خواید بفهمید مردم بیشتر از کدوم قابلیت استفاده می‌کنن، کدوم دکمه‌ها بیشتر کلیک می‌شن، یا کدوم بخش‌های اپلیکیشن مشکل دارن.
حالا سؤال اصلی اینه: چطور این آمار رو بگیریم، بدون اینکه بفهمیم هر کاربر دقیقاً چی کار کرده؟

اینجاست که Differential Privacy وارد میشه.

خلاصه ماجرا اینه:
به‌جای اینکه داده خام هر کاربر رو ببینی، یه مقدار نویز حساب‌شده به خروجی اضافه می‌کنی.
طوری که خروجی کلی هنوز برای تحلیل مفیده، ولی از روی اون نتونی بفهمی یه کاربر خاص دقیقاً چه چیزی فرستاده.

⚙️ این تکنیک کجا استفاده میشه؟

چند تا مثال واقعی:

- اپل برای Device Analytics ازش استفاده می‌کنه
- برای بعضی قابلیت‌های Apple Intelligence هم استفاده شده
- در سطح سیستم‌عامل، برای فهمیدن الگوهای کلی استفاده از امکانات
- در بعضی سناریوهای دولتی مثل سرشماری و disclosure avoidance
- برای تحلیل رفتار کلی کاربران، بدون دسترسی به داده شخصی خام

پس اگه بخوام خیلی ساده بگم، Differential Privacy بیشتر برای جمع‌زدن رفتار کلی مردم استفاده میشه، نه برای دیدن رفتار تک‌تک افراد.

حالا مشکل اینجاست…

اگه شما جونیور یا مید لول باشی، احتمالاً اولین سؤال اینه که:
«من دقیقاً کِی باید ازش استفاده کنم؟»

جواب کوتاه:
وقتی نیاز داری از داده کاربران بینش آماری بگیری، ولی نمی‌خوای یا نباید داده خام رو افشا کنی.

مثلاً:

- تعداد دفعات استفاده از یه feature
- میانگین امتیاز کاربران
- تعداد crashها در یک نسخه
- الگوهای کلی جست‌وجو
- تشخیص اینکه کدوم مسیرها بیشتر خراب می‌شن

یه مثال واقعی بزنم:

فرض کنید یه تیم موبایل دارید و می‌خواید بفهمید کدوم بخش اپلیکیشن باعث ترک کاربر میشه.
اگه لاگ خام بفرستی، ممکنه اطلاعات حساس لو بره.
ولی اگه از Differential Privacy استفاده کنی، می‌تونی آمار کلی بگیری… بدون اینکه مسیر دقیق یه کاربر خاص قابل شناسایی باشه.

اینجا دقیقاً فرقش با لاگ معمولی معلوم میشه.
لاگ معمولی میگه «این کاربر این کار رو کرد».
DP میگه «در کل، این رفتار این‌قدر زیاد دیده شده»… بدون اینکه بگه کدوم کاربر.

یه نکته مهم هم اینه که Differential Privacy جای همه چیز رو نمی‌گیره.
برای استفاده ازش باید بدونی چی رو می‌خوای اندازه بگیری و چقدر نویز قابل قبوله.
یعنی اگر metric خیلی حساس یا خیلی کم‌تعداد باشه، خروجی‌ات ممکنه عملاً بی‌فایده بشه.

پس برای جونیور و مید لول، برداشت درست اینه:

- DP برای تحلیل آماری امن استفاده میشه
- برای حذف کامل ریسک نیست، ولی ریسک شناسایی فرد رو خیلی کم می‌کنه
- بیشتر توی analytics، telemetry، feature usage، crash reporting، و measurement کاربرد داره
- باید روی count، sum، average و موضوعات مشابه فکر کنی، نه روی هر دیتایی

خلاصه اگر بخوام در یک جمله بگم:

Differential Privacy یعنی از داده کاربران، یه تصویر کلی بگیری… بدون اینکه بشه به‌راحتی فهمید هر فرد دقیقاً چی کار کرده.


Reaction 👎👍 و Share یادت نره 😉
✋ اگر تازه عضو کانال شدی٬ کلی پست تکنیکال به درد بخور و ناب رو از دست دادی٬ پس برای بررسیشون یه تایم کوچیک بذار

#سامان #مفاهیم #concept

⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 @devsource
‌
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

📅 روز 5: پروژه Login Page با HTML
🎯 جمع‌بندی تمام مباحث HTML
تا اینجا یاد گرفتیم:
✅ تگ‌های پایه
✅ لینک‌ها
✅ تصاویر
✅ فرم‌ها
✅ لیست‌ها
✅ جدول‌ها
حالا وقتشه همه چیز رو کنار هم بذاریم و اولین صفحه واقعی خودمون رو بسازیم.

🧠 پروژه امروز: صفحه ورود (Login)
تقریباً همه سایت‌ها یک صفحه ورود دارن.
ما هم یک نسخه ساده از اون رو فقط با HTML می‌سازیم.
ساختار صفحه

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
</head>

<body>

  <h1>ورود به حساب کاربری</h1>

  <form>

    <p>ایمیل</p>
    <input
      type="email"
      placeholder="ایمیل خود را وارد کنید"
    >

    <br><br>

    <p>رمز عبور</p>
    <input
      type="password"
      placeholder="رمز عبور"
    >

    <br><br>

    <button>
      ورود
    </button>

  </form>

</body>
</html>

🔍 بیایم کد رو بررسی کنیم
عنوان صفحه

<h1>ورود به حساب کاربری</h1>
عنوان اصلی صفحه.
فرم

<form>

</form>

تمام ورودی‌ها داخل فرم قرار می‌گیرن.
فیلد ایمیل

<input
  type="email"
  placeholder="ایمیل خود را وارد کنید"
/>

کاربر ایمیلش رو وارد می‌کنه.
فیلد رمز عبور

<input
  type="password"
  placeholder="رمز عبور"
/>

کاراکترها مخفی نمایش داده میشن.
دکمه ورود

<button>ورود</button>

برای ارسال فرم.

🎯 چالش امروز
سعی کن این موارد رو به پروژه اضافه کنی:
✅ یک لوگو یا عکس بالای فرم
✅ لینک "ثبت نام"
✅ لینک "فراموشی رمز عبور"
🚀 خروجی فاز HTML
اگر این ۵ روز رو کامل انجام داده باشی، الان می‌تونی:
✅ ساختار هر صفحه‌ای رو بسازی
✅ فرم طراحی کنی
✅ عکس و لینک اضافه کنی
✅ اطلاعات رو با لیست و جدول نمایش بدی
📌 فاز بعدی: CSS
از فردا وارد جذاب‌ترین بخش فرانت‌اند می‌شیم:
🎨 CSS
جایی که صفحه‌های ساده HTML تبدیل میشن به رابط‌های کاربری حرفه‌ای و مدرن. 😎🔥

#html_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

اینجا آموزش فشرده HTML برای ورود به React.js تموم شده 🎉🚀

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

دوستان در حال حاضر کارهای مربوط به ادیت، ضبط و ساخت ویدئو کوتاه در رابطه با پیش‌نیازهای ورود به ریکت در حال انجامه و فصل هاهم در حال ضبطه

قراره باهم کلی صحبت کنیم و به زودی منتشر میشه تا شما همیشه دسترسی داشته باشید به دوره رایگان HTML, CSS, JavaScript جهت آمادگی ورود به React.js 🎥✨

تا اون زمان پست‌های کانال رو دنبال کنید و از راهنمای دوره و هشتگ‌ها استفاده کنید.

انتهای هر پست براتون چالش و تمریناتی گذاشتم

زیر پست تمریناتتون رو بفرستید میبینم من شخصاً و کمکتون میکنم 🤝💪

#Hamed
#html_lessons@devsourcech
#css_lessons@devsourcech
#تکنولوژی

اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅

⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir/

🎨 فاز 2: CSS
نقشه راه یادگیری CSS برای React 🚀
خب حالا صفحاتمون هنوز ظاهر جذابی ندارن
اینجاست که CSS وارد میشه 💻.
CSS مسئول:
رنگ‌ها 🎨
فونت‌ها ✍️
فاصله‌ها 📏
چیدمان عناصر 📦
ریسپانسیو بودن 📱
هست.
🗺️ مسیر یادگیری CSS
📅 روز 6
اتصال CSS به HTML 🔗
رنگ‌ها 🌈
فونت‌ها 🔤
Text Styling ✨
📅 روز 7
Box Model 📦
Margin
Padding
Border
📅 روز 8
Display
Block
Inline
Inline-Block
📅 روز 9
Position
Relative
Absolute
Fixed
📅 روز 10
Flexbox (بخش اول) 🧶
📅 روز 11
Flexbox (بخش دوم)
تمرین عملی 💪
📅 روز 12
CSS Grid 📐
📅 روز 13
Hover
Transition
Animation های ساده 🎬
📅 روز 14
Responsive Design 📱💻
Media Query
📅 روز 15
پروژه نهایی CSS
ساخت Landing Page 🌐
🎯 هدف این فاز
بعد از این 10 روز باید بتونی:
✅ صفحات زیبا طراحی کنی
✅ UI های مدرن بسازی
✅ صفحات موبایل و دسکتاپ طراحی کنی
✅ برای ورود به React آماده بشی
#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

#نمونه_کد_فرانت_اند@devsourcech 📄


اینپوت با React.js ⚛️
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

#نمونه_کد_فرانت_اند@devsourcech
اینپوت با React.js ⚛️

📅 روز 6: شروع CSS
🧠 خبCSS چیست؟
Cascading Style Sheets
است.
اگر HTML اسکلت ساختمان باشد 🏗️
CSS طراحی داخلی، رنگ‌آمیزی و دکوراسیون آن ساختمان است 🎨
اتصال CSS به HTML
ابتدا یک فایل به نام:
style.css
بساز.
سپس داخل HTML این خط را قرار بده:

<link rel="stylesheet" href="style.css">

داخل تگ <head>.
اولین استایل

<h1>سلام دنیا</h1>

h1 {
  color: red;
}

تغییر رنگ متن

h1 {
  color: blue;
}

تغییر اندازه متن

h1 {
  font-size: 40px;
}

تغییر فونت ضخیم

h1 {
  font-weight: bold;
}

تغییر رنگ پس‌زمینه

body {
  background-color: lightgray;
}

🎯 تمرین امروز
یک صفحه HTML بساز که:
یک عنوان داشته باشد
یک متن داشته باشد
رنگ عنوان را تغییر بده
اندازه عنوان را تغییر بده
رنگ پس‌زمینه صفحه را عوض کن
💡 نکته مهم:
از امروز وارد بخشی شدی که ظاهر سایت‌ها را می‌سازد.
تقریباً هر چیزی که در ظاهر یک سایت می‌بینی، با CSS ساخته شده است.
📌 فردا: Box Model — مهم‌ترین مفهوم CSS که هر توسعه‌دهنده فرانت‌اند باید بلد باشد. 🚀

#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

#نمونه_کد_فرانت_اند@devsourcec🖥️
صفحه لاگین 🔐
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

#سورس_کد_فرانت_اند@devsourcech
سورس صفحه لاگین

HTML CSS JavaScript

#Hamed

#نمونه_کد_فرانت_اند@devsourcech
هاور افکت
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

#سورس_کد_فرانت_اند@devsourcech
#Hamed