اگه بخوام فرانت‌اند رو از صفر شروع کنم، این مسیر رو میرم 👇

نه ۲۰ تا دوره همزمان ببینم...
نه پریدن از این تکنولوژی به اون تکنولوژی...

تقریباً این مسیر:

1️⃣ HTML
برای اینکه ساختار صفحات وب رو درست بفهمم.
⬇️
2️⃣ CSS
برای طراحی، Responsive کردن و پیاده‌سازی رابط کاربری.
⬇️
3️⃣ JavaScript
اینجا تازه وارد برنامه‌نویسی واقعی سمت فرانت‌اند می‌شم.
متغیرها، توابع، آرایه‌ها، Object، DOM، Event، API، Async/Await و...
⬇️
4️⃣ Git و GitHub
چون پروژه‌ای که فقط روی لپ‌تاپ خودت باشه برای بازار کار کافی نیست.
⬇️
5️⃣ React.js
برای ساخت رابط‌های کاربری مدرن و پروژه‌های واقعی‌تر.
⬇️
6️⃣ پروژه، تمرین و ساخت نمونه‌کار

چون فقط دیدن آموزش کسی رو برنامه‌نویس نمی‌کنه.

🔥 ثبت‌نام پکیج جامع باز میشه!
اگر منتظر بودید، زمانش مشخص شد:

📅 پنجشنبه ⏰ ساعت ۱۵:۰۰ 👥 فقط برای ۱۵ نفر

ظرفیت ثبت‌نام پکیج جامع رو باز می‌کنیم.

قیمت اصلی پکیج ۶ میلیون تومان هست؛
اما این بار می‌تونید با شرایط ویژه فقط با:
۲٬۴۹۸٬۰۰۰ تومان
ثبت‌نام کنید. 🔥

یعنی بیش از ۳.۵ میلیون تومان صرفه‌جویی در هزینه ثبت‌نام.

⚠️ ظرفیت فقط ۱۵ نفره و ثبت‌نام از ساعت ۱۵ روز پنجشنبه شروع میشه.

اگر می‌خوای جزو این ۱۵ نفر باشی، پنجشنبه ساعت ۱۵ آماده باش. 🚀

جامع ترین پکیج جامع برنامه نویسی فرانت اند با ۶ ماه پشتیبانی vip

این آخرین فرصت ثبت نام با این قیمت هستش و دیگه این قیمت تکرار نمیشه

با ثبت نام داخل این پکیج به هیچ آموزش ، دوره ، کلاس حضوری نیازی ندارید

🌐 چرا بعضی سایت‌ها با اینترنت ضعیف هم سریع باز میشن؟

چون فقط به «سرعت اینترنت» وابسته نیستن.

از چیزهایی مثل:

⚡ CDN
📦 Cache 🖼️ تصاویر بهینه
📉 Compression
💾 Browser Cache
🚀 Lazy Loading
استفاده می‌کنن.

یعنی Performance فقط این نیست که:
«کدم سریع اجرا بشه.»

کل مسیر بین کاربر تا محتوایی که می‌بینه مهمه.

#Performance #WebDevelopment #Frontend #سرعت_سایت #برنامه_نویسی #توسعه_وب

Rollback
یعنی چی؟ 🔙

Deploy
کردی.
۵ دقیقه بعد:
سایت خراب میشه.

اولین سؤال ممکنه این باشه:

Can we rollback?

Rollback
یعنی برگردوندن سیستم به نسخه قبلی که سالم بوده
.
مثلاً:

v1.4.2 ❌ v1.4.1 ✅

تا وقتی مشکل بررسی و Fix بشه، نسخه سالم قبلی دوباره فعال میشه.

🔥 یکی از چیزهایی که در پروژه واقعی
خیلی مهمه:

فقط Deploy کردن رو بلد نباش؛ برگشتن از Deploy خراب رو هم باید بلد باشی.

#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی

🕵️ می‌خوای بفهمی یک سایت با چی ساخته شده؟

این ابزارها رو امتحان کن:

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

می‌تونی سرنخ‌هایی درباره:

Framework
CMS
Analytics
Server
CDN
و تکنولوژی‌های استفاده‌شده
پیدا کنی.

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

#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب

💰 اگه می‌خوای اولین پروژه یا اولین شغلت رو بگیری، این ۵ کار رو انجام بده:

✅ توی سایت‌های استخدام مثل جابینجا، جاب‌ویژن و... رزومه بساز و هر روز برای آگهی‌های جدید رزومه بفرست. حتی اگه همه شرایطش رو نداری.

✅ توی سایت‌های فریلنسری مثل پونیشا و کارلنسر پروفایل کامل بساز و هر روز برای چند پروژه پیشنهاد بفرست.

✅ توی لینکدین، با برنامه‌نویس‌ها و مدیرهای فنی ارتباط بگیر. خیلی از
فرصت‌های شغلی اصلاً آگهی نمی‌شن.

✅ نمونه‌کارهات رو داخل GitHub و یک پورتفولیو منتشر کن. خیلی از شرکت‌ها قبل از مصاحبه اول کدهای تو رو نگاه می‌کنن.

✅ توی گروه‌های تلگرام و کامیونیتی‌های برنامه‌نویسی عضو باش. خیلی از پروژه‌های کوچک و معرفی‌ها از همین گروه‌ها پیدا می‌شن.

یه اشتباه بزرگ اینه که فقط منتظر بمونی یه آگهی مناسب پیدا بشه.

هر روز ۱۰ تا درخواست بفرست.
ممکنه ۹ تاش بی‌جواب بمونه، ولی همون یکی، می‌تونه مسیر شغلی تو رو عوض کنه. 🚀

«اگه برنامه‌نویسی بلدی، این ۷ کار رو می‌تونی بفروشی»

خیلی‌ها فکر می‌کنن برای درآمد گرفتن باید حتماً پروژه‌های خیلی بزرگ بگیرن.

درحالی‌که کلی کار کوچک وجود داره:

🔹 تبدیل Figma به سایت
🔹 رفع Bug
🔹 ساخت Landing Page
🔹 اتصال API
🔹 ساخت Dashboard
🔹 بهینه‌سازی سرعت
🔹 اضافه کردن Feature به پروژه موجود

اولین پول برنامه‌نویسی‌ات قرار نیست از یک پروژه ۵۰۰ میلیونی بیاد.

از حل یک مشکل واقعی شروع میشه.

#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines

🚀 چطور پروژه بگیرم؟ از کجا کار پیدا کنم؟

👨‍💻 اول از همه می‌تونی یه رزومه ساده و مرتب درست کنی و بفرستی برای شرکت‌های نرم‌افزاری

📌 از طریق سایت‌های استخدامی مثل:
✅ جابینجا
✅ جاب‌ویژن
✅ آی‌استخدام و....

📦 اما اگه بخوای پروژه‌ای و مستقل کار کنی (یعنی فریلنسینگ)، اینم راهشه:

🌐 سایت‌های ایرانی:
پونیشا، کارلنسر، انجام‌میده و....

💵 سایت‌های خارجی (درآمد دلاری):
Fiverr، Upwork، Freelancer

🖇خیلی سایت های دیگه هستن نخواستم پست طولانی بشه با یه سرچ ساده میتونی پیداشون کنی

📍برای برنامه نویسی کار به شدت زیادهه پس غصه ی این مورد رو اصلاا نخور

فقط باید مهارت خوبی داشته باشی

🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی

قبل از اینکه این دستور رو بزنی:
git push

اینارو ببین:

☑️ console.log
اضافی نداری؟

☑️ فایل .env اشتباهی Push نمی‌شه؟

☑️ Error
توی Console نداری؟

☑️ اسم متغیرهای تستی باقی نمونده؟

☑️ پروژه روی سیستم خودت واقعاً کار می‌کنه؟

همین ۳۰ ثانیه می‌تونه جلوی یک دردسر واقعی رو بگیره.

#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines

🔥 این ترفند JavaScript رو خیلی‌ها نمی‌دونن

فرض کن اینو داری:

const user = {
  name: "Ali",
  age: 22
};



می‌خوای name رو ازش بگیری.
احتمالاً می‌نویسی:

const name = user.name;



اما می‌تونی خیلی تمیزتر بنویسی:

const { name } = user;



این قابلیت اسمش Destructuringـه.

حتی می‌تونی چندتا مقدار بگیری:

const { name, age } = user;



و جالب‌تر اینکه می‌تونی اسم متغیر رو هم عوض کنی:

const { name: username } = user;





console.log(username);



📌 اینو زیاد توی React، کار با API و پروژه‌های واقعی می‌بینی.
اگر JavaScript می‌زنی، Destructuring از اون چیزهاییه که باید واقعاً بلد باشی، نه فقط اسمش رو شنیده باشی.

#JavaScript #JS #Frontend #React
#Programming #کدنویسی #برنامه_نویسی #Codelines

چرا filter یکی از کاربردی‌ترین متدهای JavaScriptـه؟

فرض کن فقط می‌خوای کاربران بالای ۱۸ سال رو داشته باشی:

const users = [
  { name: "Ali", age: 22 },
  { name: "Sara", age: 16 },
  { name: "Reza", age: 25 }
];





const adults = users.filter(user => user.age >= 18);



حالا:

console.log(adults);


خروجی:

[
  { name: "Ali", age: 22 },
  { name: "Reza", age: 25 }
]


یعنی filter میاد از بین آیتم‌های آرایه، فقط مواردی که شرطت رو پاس می‌کنن نگه می‌داره.

📌 این دقیقاً همون کاریه که توی پروژه‌های واقعی برای فیلتر محصولات، کاربران، سفارش‌ها و کلی داده دیگه انجام میدی.

#JavaScript #Filter #Frontend #Programming #برنامه_نویسی #کدنویسی