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

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

@codelines_ir

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

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

آدرس سایت 👈🏻: codelines.ir
Subscribers
6.49K
Photos
357
Videos
48
Links
133

Showing posts older than #4770 · Back to latest

Older Posts 20 shown
Post #4769 344
اگه چند وقته داری برنامه‌نویسی یاد می‌گیری، این پست رو تا آخر بخون 👇

یه مشکل خیلی رایج بین بچه‌هایی که فرانت‌اند یاد می‌گیرن وجود داره:

مدام در حال یاد گرفتنن، ولی هیچ‌وقت احساس نمی‌کنن آماده‌ان!

یه مدت HTML و CSS می‌خونن...
بعد میرن سراغ JavaScript.

وسطش می‌بینن همه درباره React حرف می‌زنن، میرن React.

بعد یکی میگه Git و GitHub برای استخدام لازمه.
یکی میگه پروژه بزن.
یکی میگه رزومه بساز.
یکی میگه بدون TypeScript شانسی نداری...
و آخرش چی؟ 😐

بعد از چند ماه کلی چیز دیدی، ولی هنوز نمی‌دونی:

«الان دقیقاً باید چی یاد بگیرم و قدم بعدیم چیه؟»
  • ❤ 3
  • 🔥 1
Post #4767 328
const user = {
name: "Sara",
age: 20
};

console.log(user.name);
Post #4766 363
🎯 یه ابزار خفن که هر برنامه‌نویسی باید بشناسه!

🧠 Excalidraw

قبل از اینکه کد بزنی، ایده‌ت رو اینجا بکش!
می‌تونی باهاش فلوچارت، دیاگرام، وایرفریم و معماری پروژه طراحی کنی؛ حتی چند نفر هم‌زمان روی یک صفحه کار کنن. ✨

🔥 رایگان و Open Source
⚡ بدون نیاز به نصب
📤 خروجی PNG و SVG
🤝 همکاری آنلاین


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

🔗 [excalidraw.com](https://excalidraw.com/?utm_source=chatgpt.com)

#برنامه_نویسی #ابزار_برنامه_نویسی #Developer
Excalidraw Excalidraw — Collaborative whiteboarding made easy Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
  • 👏 2
  • ❤ 1
Post #4765 289
🤖 با وجود هوش مصنوعی، هنوز برنامه‌نویسی یاد بگیریم؟

قطعاً بله! 🔥

هوش مصنوعی قرار نیست برنامه‌نویس‌های خوب رو حذف کنه؛
بلکه کارهای تکراری رو سریع‌تر و ساده‌تر می‌کنه.

کسی که فقط کد می‌نویسه، ممکنه جایگزین بشه.
اما کسی که بلد باشه:

🧠 درست فکر کنه
💡 ایده بده
🛠 مسئله حل کنه


با هوش مصنوعی، چند برابر قدرتمندتر می‌شه. 🚀

🎯 برنامه‌نویس آینده کسی نیست که با AI رقابت کنه؛
کسیه که بلد باشه از AI درست استفاده کنه.


#برنامه_نویسی #هوش_مصنوعی #AI #تکنولوژی
  • ❤ 3
  • 👍 1
  • 💯 1
Post #4764 276
💻 اولین قانون برنامه‌نویسی: از ارورها نترس! 😄

اگر برنامه‌نویسی می‌کنی، دیر یا زود با این صحنه روبه‌رو می‌شی:
🔴 Error!
اما یه نکته مهم رو یادت باشه:
❌ ارور یعنی شکست خوردی؟ نه!

✅ ارور یعنی کامپیوتر داره بهت می‌گه کجای کارت نیاز به بررسی داره.

هر برنامه‌نویسی، حتی حرفه‌ای‌ترین‌ها، هر روز با خطا و باگ سروکله می‌زنن.

تفاوت یک برنامه‌نویس مبتدی و حرفه‌ای این نیست که یکی ارور می‌بینه و دیگری نه؛

🔥 تفاوتشون اینه که برنامه‌نویس حرفه‌ای بلد شده ارور رو بخونه، علتش رو پیدا کنه و حلش کنه.

پس دفعه بعد که با یک ارور روبه‌رو شدی، فرار نکن! 😎

📌 ارور دشمن تو نیست؛ یکی از بهترین معلم‌های توئه.
  • 😁 3
  • ❤ 2
  • 👍 1
Post #4763 290
🔥 ۳ ترفند CSS خفن و کاربردی که کمتر کسی استفاده می‌کنه!

اگر CSS کار می‌کنی، این ۳ مورد رو حتماً ذخیره کن 👇

1️⃣ سایز متن رو هوشمند کن با clamp()

h1 {
font-size: clamp(2rem, 5vw, 4rem);
}

📱 متن بین موبایل و دسکتاپ خودش متناسب می‌شه؛ بدون Media Query

2️⃣نسبت تصویر رو همیشه ثابت نگه دارگه دار

img {
aspect-ratio: 16 / 9;
object-fit: cover;
}

🔥 برای کارت‌های محصول، گالری و Thumbnail فوق‌العا

3️⃣ متن‌های چندخطی رو حرفه‌ای‌تر کن‌

h2 {
text-wrap: balance;
}

✨ مرورگر خطوط عنوان رو متعادل‌تر می‌چینه و ظاهر UI تمیزتر می‌شه.

💡و CSS فقط رنگ و فاصله نیست؛ وقتی ابزارهای جدیدش رو بشناسی، خیلی از کارها بدون JavaScript انجام می‌شن.
  • ❤ 6
  • 🔥 1
Post #4762 274
🔥 چرا بعضی‌ها بعد از یک سال هنوز برنامه‌نویس مبتدی هستن؟

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

📌 فقط آموزش جمع می‌کنن
📌 پروژه واقعی انجام نمی‌دن
📌 با اولین چالش جا می‌زنن
📌 منتظرن تا «کاملاً آماده» بشن

اما واقعیت اینه:

برنامه‌نویسی با شروع کردن رشد می‌کنه، نه با آماده شدن. 🚀

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

پس منتظر زمان مناسب نباش.
  • ❤ 5
  • 👏 1
Post #4761 265
💰 اگه می‌خوای اولین پروژه یا اولین شغلت رو بگیری، این ۵ کار رو انجام بده:

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

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

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

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

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

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

هر روز ۱۰ تا درخواست بفرست.
ممکنه ۹ تاش بی‌جواب بمونه، ولی همون یکی، می‌تونه مسیر شغلی تو رو عوض کنه. 🚀
  • ❤ 3
  • 👏 1
Post #4760 268
«این سؤال رو توی مصاحبه ازت بپرسن، معلوم میشه واقعاً برنامه‌نویسی بلدی یا نه»

فرض کن یک API داری که گاهی ۳ ثانیه طول می‌کشه جواب بده.

چی کار می‌کنی؟

❌ فقط Loading می‌ذاری؟

یا بررسی می‌کنی:
API چرا کند شده؟
Cache لازم داریم؟
Request اضافی داریم؟
Pagination داریم؟
Query سنگینه؟

می‌تونیم اطلاعات رو Lazy Load کنیم؟
برنامه‌نویس واقعی فقط کد نمی‌نویسه؛ دلیل کند بودن سیستم رو پیدا می‌کنه.

#مصاحبه_برنامه_نویسی #Developer #Frontend #Backend #Programming #کدنویسی
  • ❤ 4
  • 🔥 1
Post #4759 268
«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

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

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

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

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

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
  • ❤ 4
Post #4758 295
«اگه برنامه‌نویسی بلدی، این ۷ کار رو می‌تونی بفروشی»

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

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

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

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

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

#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines
  • ❤ 4
  • 👏 1
Post #4757 310
🤖 شبیه‌سازی مصاحبه Front-End با AI

می‌خوای قبل از مصاحبه واقعی، خودت رو محک بزنی؟ 😈

این پرامپت رو به AI بده:

Act as a Senior Front-End interviewer.

Conduct a realistic interview.
Ask only one question at a time.

Questions should cover JavaScript, React, CSS, Browser, and Performance.

Do not reveal the correct answer until I respond.

After each answer:

* Give me a score from 0 to 10.
* Point out my mistakes.
* Ask a harder related question.

At the end, tell me how ready I am for a Junior / Mid / Senior position.


اینطوری AI فقط سؤال نمی‌پرسه؛ نقاط ضعف مصاحبه‌ات رو هم پیدا می‌کنه.
  • ❤ 2
  • 🔥 1
Post #4755 280
let numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers.length);
Post #4754 289
🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی

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

اینارو ببین:

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

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

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

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

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

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

#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines
  • ❤ 2
  • 👏 1
Post #4753 258
🔥 ۵ قابلیت JavaScript که کدت رو تمیزتر می‌کنه

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

1. Optional Chaining

user?.profile?.name


2. Nullish Coalescing

const name = user.name ?? "Guest";


3. Destructuring

const { name, age } = user;


4. Spread

const newUser = { ...user, age: 25 };


5. Default Parameter

function greet(name = "Guest") {}


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

#JavaScript #JS #Frontend #Programming #کدنویسی #برنامه_نویسی #Codelines
  • ❤ 2
Post #4751 235
🔥 این ترفند 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
  • ❤ 2
  • ❤‍🔥 1
Post #4750 236
۱۰ سؤال مهم قبل از شروع یک پروژه

قبل از کدنویسی بپرس:

کاربر این پروژه کیه؟
مشکل اصلی چیه؟
مهم‌ترین Feature چیه؟
چه اطلاعاتی نیاز داریم؟
API از کجا میاد؟
چه محدودیت‌هایی داریم؟
نسخه موبایل داریم؟
چه حالت‌های خطایی داریم؟
معیار موفقیت پروژه چیه؟
Deadline
واقعی چقدره؟

📌 خیلی از مشکلات پروژه از کد شروع نمی‌شن؛ از ابهام در نیازمندی‌ها شروع می‌شن.

#SoftwareDevelopment
#ProjectManagement #Developer #Programming
  • ❤ 2
  • 🔥 1
Post #4749 232
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره

یک Function خیلی بزرگه
یک کد چند بار تکرار شده
اسم متغیرها نامفهومه
شرط‌های تو در تو زیادن
تغییر یک چیز چند فایل رو خراب می‌کنه
یک فایل هزاران خط شده
Function چند کار مختلف انجام میده
کامنت‌های عجیب برای توضیح کد لازم شده
حذف یک Feature خیلی سخت شده
خودت از خواندن کد می‌ترسی

📌 Refactor
یعنی بهتر کردن ساختار کد، بدون تغییر رفتار اصلی برنامه.

#CleanCode #Refactoring #Programming #Developer #کدنویسی
  • ❤ 4
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →