🚀 برنامه ۳۰ روزه 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