🚀 برنامه ۳۰ روزه HTML + CSS + JavaScript (مخصوص React)
🟢 فاز 1: HTML (روز 1 تا 5)
هدف: ساختار صفحه رو کامل بفهمی
روز 1:
ساختار کلی HTML
تگ‌های پایه (div, h1, p, span)
روز 2:
لینک‌ها و تصاویر
مسیرها (relative / absolute)
روز 3:
فرم‌ها (input, button, form)
روز 4:
لیست‌ها (ul, ol, li)
جدول ساده (table)
روز 5:
ساخت یک صفحه کامل HTML (Login Page ساده)
🎯 خروجی: یک صفحه کامل بدون CSS

#html_lessons@devsourcech

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

🟡 فاز ۲: CSS (روز ۶ تا ۱۵) 🎨
هدف: ساخت UI واقعی 💻
روز ۶:
selector ها + رنگ + فونت 🎨🔤
روز ۷:
box model (margin, padding, border) 📦
روز ۸:
display (block / inline / inline-block) 🔲
روز ۹:
position (relative, absolute, fixed) 📍
روز ۱۰:
Flexbox (خیلی مهم 🚨) ⚡
روز ۱۱:
Flexbox ادامه + تمرین 🏋️‍♂️
روز ۱۲:
Grid 🧱
روز ۱۳:
hover / transition ✨
روز ۱۴:
responsive design (media query) 📱💻
روز ۱۵:
ساخت یک UI کامل (مثلاً landing page ساده) 🖼️
🎯 خروجی: یک صفحه شبیه سایت واقعی 🌐

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

🔵 فاز 3: JavaScript (روز 16 تا 30) 📅
هدف: رسیدن به سطح React-ready 🎯

روز 16:
let / const 📝
انواع داده‌ها 🧾

روز 17:
شرط‌ها (if / else) ⚖️

روز 18:
حلقه‌ها (for / while) 🔄

روز 19:
آموزش function ها ⚙️

روز 20:
آموزش array ها 📊

روز 21:
map / filter / find (خیلی مهم 🚨) 🔍

روز 22:
آموزش object ها 🧱

روز 23:
آموزش destructuring ساده 🧩

روز 24:
DOM (querySelector, innerText) 🌐

روز 25:
آموزش event ها (click, input) ⚡

روز 26:
کار با فرم‌ها 📝

روز 27:
mini project 1: Todo List ✅

روز 28:
mini project 2: calculator ساده ➗

روز 29:
تمرین ترکیبی (array + DOM) 🤝

روز 30:
جمع‌بندی + رفع ضعف‌ها + آماده ورود به React 🚀

#javaScript_lessons@devsourcech

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

🎯 خروجی این ۳۰ روز:
بعدش تو می‌تونی:
✅ React رو بدون ترس شروع کنی
🚀 مفهوم state و props رو سریع بگیری
💻 پروژه بزنی

پس با من همراه شو تا با هم به دنیای برنامه‌نویسی بریم و سفرمونو شروع کنیم 🛠️🌍✨

برای دوره های فرانت هشتگ های مربوطه را دنبال
#javaScript_lessons@devsourcech

#css_lessons@devsourcech

#html_lessons@devsourcech


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

خب قبل از اینکه وارد آموزش بشیم، باید محیط کارمون رو آماده کنیم. 🛠️

مثلاً آماده کردن وسایل قبل از سفر میمونه ✈️

قراره VS Code رو نصب کنیم و چندتا ابزار مهم بهش اضافه کنیم.

💻 اول VS Code چیه؟

برنامه VS Code یه ادیتور کد سبک و قدرتمنده که باهاش کدنویسی می‌کنیم 💻. تقریباً همه‌ی فرانت‌اند دولوپرها از همین استفاده می‌کنن.

📦 مرحله 1: نصب VS Code
🔗 دانلود از سایت رسمی: https://code.visualstudio.com/
✔️ وارد سایت شو
✔️ روی Download برای سیستم عاملت کلیک کن
✔️ نصبش کن (مثل برنامه‌های معمولی Next → Next) ✅

⚙️ مرحله 2: تنظیمات اولیه (مهم)
بعد از نصب:
وارد Settings شو ⚙️
این گزینه‌ها رو فعال کن:
Auto Save → روشن 🔒
Word Wrap → روشن (برای اسکرول نکردن افقی) 📜

🔌 مرحله 3: اکستنشن‌های ضروری (خیلی مهم 🚨)
این اکستنشن‌ها رو حتما نصب کن:
🎯 1. Live Server
برای دیدن تغییرات سایت به صورت زنده بدون رفرش 🔄
🎨 2. Prettier – Code Formatter
برای مرتب کردن خودکار کدها 🧹
🧠 3. ES7+ React/Redux Snippets
برای کدنویسی سریع React (بعداً خیلی به درد می‌خوره) ⚛️
🌈 4. Material Icon Theme
برای قشنگ‌تر شدن فایل‌ها و فولدرها 📂
⚡ 5. Auto Rename Tag
وقتی یه تگ HTML رو تغییر میدی، تگ جفتش هم تغییر می‌کنه 🏷️

🧠 نکات مهم (خیلی مهم‌تر از نصب)
✔️ هیچوقت کد نامرتب ننویس 🚫
✔️ از همون اول عادت به تمیز نوشتن کد کن ✨
✔️ هر چیزی رو خودت تایپ کن، کپی نکن ⌨️
✔️ با VS Code راحت شو، این ابزار اصلی توئه 🚀

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

بریم شروع کنیم دوره ۳۰ روزه فشرده HTML, CSS, JS جهت آمادگی برای ورود به React.js 🚀💻📅

#javaScript_lessons@devsourcech

#css_lessons@devsourcech

#html_lessons@devsourcech


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

📅 روز 1: شروع HTML
🎯 ساختار صفحه و تگ‌های پایه
🧠خود HTML چیه؟
دوستانHTML زبان ساختاردهی صفحه‌های وبه و بیشتر تحت عنوان یک مارک آپ شناخته میشه تا زبان
یعنی با HTML مشخص می‌کنی:
چی عنوانه
چی متن عادیه
چی بخشه
🏗️ ساختار کلی یک فایل HTML
هر صفحه HTML یه ساختار ثابت داره:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    محتوا اینجا قرار می‌گیره
  </body>
</html>

🧱 تگ‌های پایه
🔹 1. div
برای ساختن بخش‌بندی صفحه استفاده میشه

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

🔹 2. h1
برای عنوان‌های اصلی استفاده میشه

<h1>سلام به دنیای وب</h1>

🔹 3. p
برای متن‌های معمولی استفاده میشه

<p>این یک متن ساده است</p>

🔹 4. span
برای متن‌های کوچک داخل یک جمله استفاده میشه

<p>سلام من <span>حامد</span> هستم</p>

🎯 تمرین امروز
یک فایل HTML بساز و داخلش این کارها رو انجام بده:
یک عنوان با h1
یک متن با p
یک بخش با div
داخل یک متن از span استفاده کن
هدف امروز:
فقط اینو بفهمی که HTML یعنی: 👉 ساختار دادن به صفحه، نه ظاهرش

#html_lessons@devsourcech

نکته : HTML زبان برنامه‌نویسی نیست، مارک اپ و ساختاردهی است 📝🏗️
#hints@devsourcech

🌐
#معرفی_وبسایت_فرانت_اند@devsourcech

دوستان برای تمرین هم میتونید از سایت freecodecamp.org 🎓 استفاده کنید

📅 روز 2: لینک و تصویر
🎯 ورود به دنیای واقعی صفحات وب
🧠 لینک‌ها (a)
برای اینکه کاربر از یک صفحه به صفحه دیگه بره از تگ a استفاده می‌کنیم.
✨ مثال ساده:

<a href="https://google.com">برو به گوگل</a>

⚡ نکته مهم:
اینhref یعنی آدرس مقصد لینک
می‌تونه هر سایتی باشه یا حتی صفحه داخلی سایت خودت

🖼️ تصاویر (img)
برای نمایش عکس از تگ img استفاده می‌کنیم.
✨ مثال:

<img src="image.jpg" alt="عکس نمونه">

🧠 توضیح:
اینsrc یعنی آدرس عکس
و alt وقتی عکس لود نشه یا برای سئو استفاده میشه

📂 مسیرها (Paths)
🔹 1. Relative Path (مسیر نسبی)
یعنی فایل داخل پروژه خودته

<img src="./images/photo.jpg">

👉 یعنی: داخل پوشه پروژه بگرد

🔹 2. Absolute Path (مسیر کامل)
یعنی آدرس کامل اینترنتی

<img src="https://example.com/image.jpg">

👉 یعنی: از اینترنت مستقیم بیار

🎯 تمرین امروز
یک صفحه HTML بساز و این کارها رو انجام بده:
یک عکس داخل صفحه نمایش بده 🖼️
یک لینک به گوگل بساز 🔗
از هر دو نوع مسیر (relative و absolute) استفاده کن
🚀 هدف امروز:
یاد بگیری صفحه فقط متن نیست، بلکه: 👉 لینک + تصویر = وب واقعی

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

📅 روز 3: فرم‌ها در HTML
🎯 ساخت تعامل با کاربر (ورود اطلاعات)
🧠 فرم (form) چیه؟
فرم‌ها برای گرفتن اطلاعات از کاربر استفاده میشن، مثل:
نام
ایمیل
پسورد
پیام
تقریباً همه سایت‌ها (لاگین، ثبت‌نام، سرچ) فرم دارن.
🧱 تگ form

<form>
  <!-- input ها اینجا قرار می‌گیرن -->
</form>

👉 یعنی: یک بخش برای گرفتن اطلاعات


اینپوت⌨️ input (ورودی)
برای گرفتن اطلاعات از کاربر استفاده میشه.
✨ مثال:

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

🔘دکمه button
برای ارسال یا انجام یک کار:

<button>ارسال</button>

🧠 چند نوع مهم input
🔹 متن:

<input type="text">

🔹 ایمیل:

<input type="email">

🔹 رمز:

<input type="password">

🧪 مثال کامل فرم

<form>
  <input type="text" placeholder="نام">
  <br><br>

  <input type="email" placeholder="ایمیل">
 
  <input type="password" placeholder="رمز عبور">

  <button>ثبت نام</button>
</form>

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

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

📅 روز 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