Channel Public Channel

آموزش برنامه نویسی فرانت اند

@codelines_ir

👈🏻 ارتباط با من: @codelines_support 🔅

عرفان رضایی هستم ❤️
و اینجا خیلی ساده بهت یاد میدم
چطوری اصولی #برنامه_نویسی #فرانت_اند یاد بگیری 💻✨
که هم لذت ببری و هم وارد بازار کار بشی
😍🥇
@satisfaction_codelines 👈 نتایج و رضایت دوره

آدرس سایت 👈🏻: codelines.ir

Open in Telegram

Subscribers: 6.66K
Photos: 359
Videos: 48
Links: 132

Showing posts older than #5003 · Back to latest

Older Posts 20 shown

Post #5002 342 Sep 17, 2026, 09:18 UTC

📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.

لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایل‌ها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉

❤ 1

Post #5001 352 Sep 16, 2026, 20:27 UTC

Post #5000 342 Sep 16, 2026, 20:27 UTC

console.log("5" - 2);

Post #4999 394 Sep 16, 2026, 10:23 UTC

«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

این کارها رو می‌کردم:

ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه

نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.

هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines

❤ 7

Post #4998 355 Sep 16, 2026, 09:05 UTC

🔥 این ترفند 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

❤ 3
🔥 1

Post #4997 332 Sep 15, 2026, 19:47 UTC

Post #4996 344 Sep 15, 2026, 19:47 UTC

const a = [1, 2, 3];

const b = a;

b.push(4);

console.log(a);

Post #4995 349 Sep 15, 2026, 18:20 UTC

خیلی از مسیرهای سالم رشد عمدتاً هیجان‌انگیز نیستن. و اکثر روزها ممکنه تکراری و عاری از دستاورد مهیج زودبازده باشن. اما اگه بتونی اینا رو دووم بیاری و مستمر طی کنی، از ۹۰٪ مردم که اغلب دنبال هیجان می‌دوئن حسابی جلو می‌افتی و به جاهای خیلی خوبی می‌رسی.

❤ 9

Post #4994 399 Sep 15, 2026, 15:42 UTC

🔥 ۵ افزونه VS Code که کدنویسی رو اعتیادآور می‌کنن!
📌 حتماً ذخیره کن؛ یه روز به کارت میاد!

1️⃣ Prettier ✨
کدت رو همیشه تمیز و حرفه‌ای نگه می‌داره
✅ فرمت خودکار کد
✅ پایان جنگ با فاصله‌ها و خط‌ها

2️⃣ Error Lens 🚨
ارورها رو همون جایی که اتفاق افتادن نشون می‌ده
✅ دیگه دنبال خطا نگرد
✅ سریع‌تر Debug کن

3️⃣ GitLens 🔥
قدرت Git رو داخل VS Code بیار
✅ ببین کی و چرا یک خط کد تغییر کرده
✅ مدیریت حرفه‌ای پروژه‌ها

4️⃣ Auto Rename Tag ⚡
تغییر اسم تگ‌ها بدون دردسر
✅ مخصوص HTML / React
✅ سرعت بیشتر در کدنویسی

5️⃣ Material Icon Theme 🎨
ظاهر VS Code رو حرفه‌ای کن
✅ آیکون‌های جذاب برای فایل‌ها
✅ پیدا کردن فایل‌ها سریع‌تر میشه

📌 Save
کن که بعداً دنبال اسم افزونه‌ها نگردی
📤 برای رفیق برنامه‌نویست بفرست
#programming #vscode #developer #coding #frontend #webdevelopment

🔥 2

Post #4993 366 Sep 15, 2026, 10:14 UTC

🌐 ۷ سایت برای پیدا کردن API و دیتای آماده برای پروژه:

Public APIs → لیست
APIهای رایگان
JSONPlaceholder → API
فیک برای تمرین
Fake Store API → دیتای فروشگاه
Open-Meteo → API آب‌وهوا
REST Countries → اطلاعات کشورها
PokeAPI → دیتای Pokémon
The Movie Database → دیتای فیلم و سریال

🔥 دیگه برای هر پروژه لازم نیست خودت از صفر دیتای تست بسازی.

📌 Save
کن؛ برای پروژه بعدی به کارت میاد.

❤ 2
👏 1

Post #4992 404 Sep 14, 2026, 18:15 UTC

📌میانبرهای کیبورد که همه ی برنامه نویسان باید بلد باشن

با Win + V تاریخچه کپی‌ها رو ببین
با Ctrl + Shift + T تب بسته‌شده رو برگردون
با Win + Shift + S از بخشی از صفحه عکس بگیر
با Ctrl + L مستقیم برو روی نوار آدرس
با Ctrl + F داخل هر صفحه دنبال کلمه بگرد
با site: فقط داخل یک سایت جست‌وجو کن
با علامت نقل‌قول، عبارت دقیق رو در گوگل پیدا کن
با filetype:pdf فقط فایل PDF جست‌وجو کن
با Ctrl + Backspace یک کلمه کامل رو پاک کن
با Alt + Tab سریع بین برنامه‌ها جابه‌جا شو

❤ 2
🔥 1

Post #4991 402 Sep 14, 2026, 15:16 UTC

⚡️ Arrow Function

به جای اینکه اینجوری بنویسی:

function sum(a, b) {
  return a + b;
}

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

const sum = (a, b) => a + b;

هم کد کوتاه‌تره، هم خواناتر.

📌 فقط یادت باشه Arrow Function همیشه جای Function معمولی رو نمی‌گیره و توی بحث this رفتار متفاوتی داره.

ولی برای اکثر کارهای روزمره، انتخاب فوق‌العاده‌ایه.

#JavaScript #Frontend

❤‍🔥 1
❤ 1
👍 1

Post #4990 393 Sep 14, 2026, 11:13 UTC

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

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

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

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

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

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

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

❤ 1
👏 1

Post #4975 502 Sep 12, 2026, 08:08 UTC

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

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

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

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

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

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

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

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

❤ 3
🔥 1

Post #4974 467 Sep 11, 2026, 19:41 UTC

Post #4973 471 Sep 11, 2026, 19:41 UTC

let user = {
    name: "Ali",
    age: 20
};

Post #4972 474 Sep 11, 2026, 18:21 UTC

چرا همه Developerها باید HTTP رو بفهمن؟

وقتی می‌نویسی:

fetch("/api/users")

فقط یک خط JavaScript می‌بینی.
ولی پشتش یک دنیای کامل وجود داره:

GET

POST

PUT

PATCH

DELETE

و Status Codeهایی مثل:

مثلاً:
401 یعنی احراز هویت مشکل داره.
403 یعنی هویت مشخصه ولی اجازه دسترسی نداری.
404 یعنی Resource پیدا نشده.
500 یعنی مشکل سمت Server اتفاق افتاده.

📌 اگر HTTP رو نفهمی، Debug کردن پروژه‌های واقعی خیلی سخت‌تر میشه.

#HTTP #API #Frontend #Backend #WebDevelopment #Programming

👏 2

Post #4971 383 Sep 11, 2026, 12:33 UTC

Post #4970 409 Sep 11, 2026, 10:02 UTC

🚨 یه ترفند خیلی ساده برای تست Responsive بودن سایت:

لازم نیست هر بار صفحه مرورگرت رو با موس کوچیک و بزرگ کنی!

داخل Chrome بزن:
F12 → Ctrl + Shift + M

حالا وارد حالت Device Toolbar میشی و می‌تونی سایتت رو روی سایزهای مختلف موبایل، تبلت و دسکتاپ تست کنی. 📱💻
حتی می‌تونی سایز دلخواه خودت رو وارد کنی.

💡 یه نکته مهم: فقط با یک سایز تست نکن؛
ممکنه سایتت روی iPhone عالی باشه ولی روی یه صفحه 768px کاملاً به‌هم بریزه.

📌 قبل از Deploy کردن، Responsive بودن رو روی چند سایز مختلف چک کن.

Post #4969 420 Sep 11, 2026, 08:15 UTC

🔥 ۱۰ پکیج CSS پرطرفدار در npm

اگه Front-End کاری، این پکیج‌ها رو حداقل یک‌بار ببین 👇

Tailwind CSS → استایل‌دهی سریع و مدرن
Bootstrap → کامپوننت‌های آماده و معروف
Sass → نوشتن CSS حرفه‌ای‌تر
styled-components → استایل‌دهی در React
Emotion → CSS-in-JS سریع و انعطاف‌پذیر
Animate.css → انیمیشن‌های آماده
AOS → انیمیشن هنگام اسکرول
Bulma → فریمورک CSS سبک
UIkit → کامپوننت‌های آماده UI
PostCSS → پردازش و بهینه‌سازی CSS

📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.

❤ 1

Older posts →