آموزش برنامه نویسی فرانت اند
8.19K subscribers
328 photos
47 videos
26 files
113 links
👈🏻 ارتباط با من: @codelines_support 🔅

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
چرا 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 #برنامه_نویسی #کدنویسی
const person = {
name: 'Ali',
getName: () => this.name
};
console.log(person.getName());
خروجی کد بالا چیست ؟
Anonymous Quiz
52%
‘Ali’
19%
undefined
26%
خطا
3%
‘’
چه روش هایی برای پول درآوردن از برنامه نویسی به جز موارد گفته شده وجود داره ؟

ما خودمون دقیقا چطوری پروژه میگیریم👇🏻
👍2
1- آژانس‌های طراحی سایت و دیجیتال مارکتینگ

این یکی برای فرانت‌اند خیلی خفنه.

توی گوگل/اینستاگرام/لینکدین دنبال این شرکت ها بگرد:

آژانس طراحی سایت
شرکت طراحی سایت
آژانس دیجیتال مارکتینگ
شرکت نرم افزاری
استودیو طراحی سایت


بعد مستقیم به مدیر یا مسئول فنی پیام بده:
«سلام، من توسعه‌دهنده Front-end هستم و اگر برای پروژه‌های شما نیروی برون‌سپاری/فریلنس لازم دارید، خوشحال می‌شم نمونه‌کار بفرستم.»


خیلی از آژانس‌ها پروژه دارند ولی نیروی ثابت کافی ندارند.
3
2-پیدا کردن سایت‌های ضعیف و پیشنهاد بازطراحی

این روش به نظرم برای تو خیلی مهمه.

مثلاً سرچ کن:
فروشگاه اینترنتی + شهر
شرکت + شهر
کلینیک + شهر
آموزشگاه + شهر


سایت‌هایی که ظاهر قدیمی یا موبایل ضعیف دارند پیدا کن.
بعد به صاحب کسب‌وکار پیام بده:
«سلام، سایتتون رو دیدم. روی موبایل چند مشکل UI/Responsive داره. من توسعه‌دهنده فرانت‌اند هستم؛ اگر مایل باشید می‌تونم چند موردی که قابل بهبود هست رو براتون بفرستم.»


یعنی به جای اینکه بگی «سایت می‌سازم»، یک مشکل واقعی پیدا می‌کنی.
2
3-لینکدین

خیلی دست‌کم گرفته میشه.

دنبال این افراد باش:

Founder
CEO
Product Manager
CTO
مدیر فنی
مدیر آژانس
مدیر دیجیتال مارکتینگ

و شرکت‌هایی که محصول وب دارند را پیدا کن.

برای پروژه‌های B2B، لینکدین می‌تواند از کانال تلگرام هم بهتر باشد.
3
4-همکاری با طراح‌های UI/UX؛ یکی از مسیرهای خوب برای گرفتن پروژه Front-end

اگر Front-end کار می‌کنی، فقط دنبال مشتری نگرد؛ با آدم‌هایی همکاری کن که خودشون به مشتری دسترسی دارن.

یکی از بهترین گزینه‌ها، طراح‌های UI/UX و
مخصوصاً طراح‌های Figma هستن.

خیلی از طراح‌ها طراحی سایت و اپلیکیشن رو انجام میدن، اما پیاده‌سازی Front-end رو خودشون انجام نمی‌دن. این دقیقاً جاییه که می‌تونی وارد همکاری بشی.

مثلاً به یک طراح پیام بده و خیلی ساده بگو:
«اگر پروژه‌ای داشتی که طراحی Figma آماده بود و برای پیاده‌سازی Front-end به کمک نیاز داشتی، خوشحال می‌شم باهم همکاری کنیم.»


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

طراح پروژه طراحی رو می‌گیره → تو پیاده‌سازی Front رو انجام میدی → هر دو از پروژه درآمد دارید.

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

پس به‌جای اینکه فقط دنبال مشتری نهایی باشی، شبکه‌ای از طراح‌های خوب بساز. 🤝

این مدل همکاری واقعاً وجود داره و در پروژه‌های فریلنسری هم نمونه‌های زیادی از همکاری نزدیک بین طراح و دولوپر دیده می‌شه.
🔥3
🔥 ۱۰ سایتی که هر برنامه‌نویسی باید بشناسه:

🌐 MDN Web Docs → مرجع کامل
HTML، CSS و JavaScript.
Can I Use → بررسی پشتیبانی مرورگرها از ویژگی‌های CSS و JS.
🎨 CSS Gradient → ساخت گرادینت‌های حرفه‌ای.
🎨 Coolors → ساخت پالت رنگ برای پروژه‌ها.
🖼️ Undraw → تصاویر SVG رایگان برای سایت.
📷 Pexels → عکس‌های رایگان و باکیفیت.
🔤 Google Fonts → فونت‌های رایگان وب.
💻 CodePen → تست سریع HTML، CSS و JavaScript.
🚀 Vercel → انتشار رایگان پروژه‌های React و Next.js.
🐙 GitHub → نگهداری کدها، نمونه‌کار و همکاری تیمی.

💾 این پست رو ذخیره کن؛ مطمئن باش بارها بهش نیاز پیدا می‌کنی.
📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

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

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

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉
3
👨‍💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد می‌شنوی:


حتما ذخیره‌ش کن توی محیط کاری خیلی به دردت میخوره

🔹 Code Review → بررسی کد

🔹 Pull Request → درخواست ادغام تغییرات

🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy

🔹 Staging → محیط قبل از Production

🔹 Production → محیط واقعی کاربران

📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.

#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd
بچه هایی که توی جشنواره پکیج جامع رو ثبت نام کردن و آموزش رو شروع کردن لازم دونستم این موارد رو بهتون بگم 👇🏻
روزی ۱ الی ۲ ساعت کنار ویدیو دیدن تمرین هم داشته باشید

سعی کنید مباحث رو یاد بگیرید
یعنی حفظ نکنید
بببنید هر موضوع کجا کاربرد داره
سینتکس رو میتونید با سرچ کردن بدست بیارید
اگه خواستید مباحث مهم هم میتونید یادداشت برداری گنید
که مثلا فلان تگ مفهومش اینه و کاربردش هم اینجاست
پس فقط کاربردش و مفهومش رو به خوبی یاد بگیرید
🤯 یک اشتباه کوچیک در React

این کد رو ببین:

<button onClick={handleClick()}>
Click
</button>

به نظرت درست نوشته شده؟
نه!

اینجا handleClick همون لحظه Render اجرا میشه.

معمولاً باید بنویسی:

<button onClick={handleClick}>
Click
</button>


📌 یک جفت () می‌تونه کل رفتار Component رو عوض کنه.
1
Merge Conflict
یعنی چی؟

تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.

حالا Git میگه:

CONFLICT
خوردی

یعنی Git نمی‌تونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.

باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درست‌تره و بعد دوباره Commit کنی.

📌 Merge Conflict
چیز عجیبی نیست؛

بخشی از کار روزمره تیم‌های برنامه‌نویسیه.

#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
👍1
📱 Mobile First
یعنی چی؟

یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:

Mobile → Tablet → Desktop

نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
CSS ساده‌تر
تمرکز روی محتوای ضروری
Responsive Design بهتر

📌 اگه Front-End کار می‌کنی، Mobile First رو جدی بگیر.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
3
😳 می‌دونستی سایتت می‌تونه بدون JavaScript تاریک بشه؟

فقط اینو بذار توی HTML:

<meta name="color-scheme"
content="dark light">


حالا مرورگر می‌فهمه سایتت از Dark Mode پشتیبانی می‌کنه و بعضی المان‌های پیش‌فرضش رو خودش با تم سیستم هماهنگ می‌کنه. 🌙

کوچیکه، ولی برای یه سایت تمیز خیلی به‌دردبخوره. 🔥
👏1
«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

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

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

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

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

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
1🔥1
۸ میانبر VS Code که بهتره حفظشون کنی:

Ctrl + P → پیدا کردن فایل
Ctrl + Shift + P → Command Palette
Ctrl + D → انتخاب مشابه بعدی
Alt + ↑ / ↓ → جابه‌جایی خط
Shift + Alt + ↓ → کپی خط
Ctrl + / → Comment
Ctrl + B → باز/بسته کردن Sidebar
Ctrl + Shift + F → جستجو در کل پروژه

📌 اینا رو یکی‌یکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
🔥2