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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
آموزش برنامه نویسی فرانت اند
دسترسی پکیج به همراه توضیحات استفاده و نقشه راه و زمان شروع پشتیبانی برای تموم عزیزانی که امروز ثبت نام کردن ارسال شد 😇 بریم که بهترین ها رو در کنار هم رقم بزنیم👊🏻
با وارد کردن لایسنس ارسال شده
دوره های
HTML css
JavaScript
React js
Typescript
Next js
Git git hub
دوره از کد تا استخدام
۱۰۰ سوال استخدامی تستی با جواب تشریحی

باید براتون لیست بشه

در صورت مغایرت به اکانت پشتیبانی پیام بدید
5🔥2
const a = [1, 2, 3];

const b = a;

b.push(4);

console.log(a);
کدوم گزینه درسته ؟
Anonymous Quiz
29%
[1, 2, 3]
55%
[1, 2, 3 , 4]
12%
Undefined
4%
Error
👍1👏1
Rollback
یعنی چی؟ 🔙

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

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

Can we rollback?

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

v1.4.2 v1.4.1

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

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

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

#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی
4
🕵️ می‌خوای بفهمی یک سایت با چی ساخته شده؟

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

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

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

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

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

#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب
🔥1
💰 اگه می‌خوای اولین پروژه یا اولین شغلت رو بگیری، این ۵ کار رو انجام بده:

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

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

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

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

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

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

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

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

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

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

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

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

#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines
1🔥1
🚀 چطور پروژه بگیرم؟ از کجا کار پیدا کنم؟

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

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

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

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

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

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

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

فقط باید مهارت خوبی داشته باشی
1🔥1
🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی

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

اینارو ببین:

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

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

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

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

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

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

#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines
2
🔥 این ترفند 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 #برنامه_نویسی #کدنویسی
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