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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
🚨 ۵ چیزی که هر Front-End Developer باید درباره API بدونه:

🔹 GET → گرفتن اطلاعات
🔹 POST → ساخت اطلاعات جدید
🔹 PUT → جایگزینی کامل اطلاعات
🔹 PATCH → ویرایش بخشی از اطلاعات
🔹 DELETE → حذف اطلاعات
اما یه نکته مهم:

فقط بلد بودن fetch()نشون نمیده که API رو کامل بلدی !

Status Code
، Error Handling،
Authentication
و Loading State
رو هم باید بلد باشی.

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

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
5
💼 یه پروژه معمولی داری و می‌خوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟

این Prompt رو امتحان کن:

Act as a Senior Front-End Engineer and a Technical Recruiter.

I will describe my current project.

Analyze it and suggest features that would make the project demonstrate real-world engineering skills.

Prioritize features that demonstrate:
- Complex state management
- Authentication and authorization
- API integration
- Error handling
- Performance optimization
- Responsive design
- Accessibility
- Testing
- Real-world business logic

Avoid generic features that only make the project look bigger.

For each feature, explain what skill it demonstrates and why a recruiter would care.

Project:
[DESCRIBE PROJECT]


🔥 به‌جای اینکه پروژه‌ات فقط «قشنگ» باشه، کاری کن مهارتت رو ثابت کنه.
4
سوال مصاحبه JavaScript
console.log(NaN === NaN);
خروجی کد بالا چیست ؟
Anonymous Quiz
44%
true
31%
false
15%
undefined
11%
خطا
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره

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

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

#CleanCode #Refactoring #Programming #Developer #کدنویسی
3🔥1
📦 کتابخونه React | Framer Motion

می‌خوای انیمیشن‌های حرفه‌ای بسازی؟

Framer Motion تقریباً هر چیزی که بخوای رو
با چند خط کد انجام می‌ده.

Fade
Slide
Drag
Layout Animation

📌 انتخاب اول خیلی از پروژه‌های مدرن React.
آموزش SQL رایگان از صفر تا کوئری‌نویسی | PDF فارسی کاربردی


قیمت دوره رایگان!

برای ثبت نام و دریافت 👇🏻

https://codelines.ir/course/sql-practical-commands
4
const a = [1, 2, 3];

const b = a;

b.push(4);

console.log(a);
🔥 ۵ افزونه 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
4🔥1
برای شروع برنامه‌نویسی فرانت اند و طراحی سایت، اصلاً نیازی نیست که:

چیزی از کامپیوتر یا برنامه‌نویسی بدونی
مدرک دانشگاهی داشته باشی
رشته‌ت کامپیوتر یا مرتبط باشه (حتی اگه معماری خوندی، میتونی برنامه نویس بشی!)
ریاضی‌ت خیلی قوی باشه (فقط همون چهارتا عمل اصلی کافی‌ه ✖️)
به زبان انگلیسی مسلط باشی

🎂 سن هم اصلاً مهم نیست
چه ۱۰ سالت باشه، چه ۵۰ سال، مهم فقط پشتکاره 💪🔥

💻 فقط کافیه بلد باشی سیستم رو روشن و خاموش کنی...
بقیه‌ش با منه 😉

🚀 پشتکار، پشتکار، پشتکار
همین کافیه تا بتونی وارد دنیای فوق‌العاده‌ی برنامه‌نویسی بشی! 🌈
7🔥1🫡1
چقدر طول می‌کشه برنامه نویسی فرانت‌اند و طراحی سایت رو یاد بگیرم؟

اگه روزی ۱ تا ۲ ساعت ویدیو ببینی و تمرین کنی، توی حداقل ۴ ماه می‌تونی اولین پروژه‌تو بگیری یا استخدام شی! 🚀

👨‍💼 اگه دانشجویی یا شاغل، و فقط روزی ۱ ساعت وقت داری، با یه برنامه‌ریزی درست می‌تونی توی‌ ۵ ماه به درآمد برسی 💰

🧠 من اینجام تا زمانم رو در اختیار تو بذارم
تا بتونی بدون سردرگمی و خیلی سریع، برنامه‌نویسی رو یاد بگیری 🚀

اگه بخوای خودت تنهایی شروع کنی و این‌ور اون‌ور آموزش ببینی،
احتمالش زیاده که پراکنده یاد بگیری و ماها یا حتی سال‌ها طول بکشه تا مسلط شی!

ولی من دقیقاً همه اون چیزایی که واقعاً نیاز داری رو بهت گفتم.
5
💰 ۱۰ مهارتی که درآمد یک Front-End Developer را بیشتر می‌کند

🚀 تسلط کامل بر JavaScript
⚛️ یادگیری عمیق React (یا Next.js)
🌐 کار با REST API و GraphQL
📱 طراحی Responsive و Mobile-First
بهینه‌سازی Performance سایت
🛠️ تسلط بر Git & GitHub
🧪 آشنایی با Testing (Jest, Cypress)
🎨 درک اصول UI/UX
🤖 استفاده از ابزارهای هوش مصنوعی برای افزایش سرعت توسعه
💼 ساخت Portfolio قوی با پروژه‌های واقعی

💡 فقط کدنویسی کافی نیست؛ ترکیب مهارت فنی، پروژه‌های واقعی و یادگیری مداوم، بیشترین تأثیر را روی درآمد یک Front-End Developer دارد.
4
سوالی که خیلی‌هاتون توی پیوی ازم پرسیدید:

«از برنامه‌نویسی فرانت‌اند و طراحی سایت چقدر می‌تونم درآمد داشته باشم؟» 💸💻

جوابش اینه:
کاملاً بستگی به خودت داره که چقدر مهارت داری و چطور بتونی ازش درآمد بسازی! ولی بذار یه تصویر کلی بهت بدم 👇

💼 کمترین قیمت پروژه‌هایی که می‌تونی تو این حوزه بگیری، حدوداً از ۲۵ تا ۷۰-۸۰ میلیون تومن هست (برای هر پروژه!) 💰

👨‍💼 یا اگه بخوای توی شرکت استخدام بشی، معمولا از همون اول، حداقل ۳۰میلیون حقوق پایه بهت می‌دن. (و این فقط شروع کاره!) 🚀

🧠 پس اگه واقعاً یاد بگیری و پشتکار داشته باشی، درآمد خیلی خوبی می‌تونی بسازی. فقط کافیه مسیر رو درست بری ...
2🔥1
🤔 زبانم خوب نیست، ریاضیم ضعیفه، رشتمم کامپیوتر نیست... یعنی می‌تونم برنامه‌نویس فرانت اند و طراح سایت بشم؟

آره! حتی اگه رشتت معماری، حقوق، پزشکی یا هر چیز دیگه‌ای باشه! فقط بلد باشی کامپیوتر رو روشن کنی، بقیش رو من مثل آب خوردن یادت میدم! 😎

🚀 نه ریاضی پیچیده می‌خوای، نه زبان عالی! فقط یه مسیر درست و تمرین!

💡 خیلیا با همین شرایط از صفر شروع کردن و الان درآمدای میلیونی دارن... تو هم می‌تونی! 🔥
3🔥1👌1
console.log(typeof null);
خروجی تکه کد بالا چیه ؟
Anonymous Quiz
39%
Null
36%
Object
21%
Undefined
4%
Boolean
🥰1😁1
اگه تازه وارد کانال شدی و هنوز دقیق نمی‌دونی برنامه‌نویسی اصلاً به درد تو می‌خوره یا نه، این چند روز کانال رو از دست نده 👀

قرار نیست از همون اول بری سراغ کدهای عجیب‌غریب.

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

• برنامه‌نویسی فرانت‌اند دقیقاً چیه
• از کجا باید شروع کنی
• چقدر زمان می‌بره
• چه چیزهایی باید یاد بگیری
• و اصلاً میشه ازش به درآمد رسید یا نه

حتی اگه تا به امروز یک خط کد هم نزدی، این مطالب برای توئه. 👌
6
یه نکته خیلی مهم که گفتم اینجا بگم بد نیست 👇
اصلاً مهم نیست که الان:

📚 دانش‌آموز و کنکوری هستی
🏠 خانه‌داری
💼 کارمندی
🎓 دانشجویی


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

برنامه‌نویسی یک رشته دانشگاهی نیست که فقط یه عده خاص اجازه داشته باشن یادش بگیرن.
برنامه‌نویسی یه مهارته.
مثل هر مهارت دیگه‌ای می‌تونی از صفر شروعش کنی، تمرین کنی، توش قوی بشی و بعد ازش برای:

ساخت سایت
گرفتن پروژه
استخدام
فریلنسری
استفاده کنی.
6👏1
اصلاً فرانت‌اند چیه؟

اول از همه بریم سراغ اولین سؤال:

فرانت‌اند دقیقاً یعنی چی؟
هر چیزی که توی یک سایت می‌بینی و باهاش کار می‌کنی، بخش زیادی ازش مربوط به فرانت‌اند میشه.
مثلاً:
• منوی سایت
• دکمه‌ها
• فرم ثبت‌نام
• ظاهر صفحات
• کارت محصولات
• صفحه فروشگاه
• نسخه موبایل سایت

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

مثلاً وقتی وارد سایت دیجی‌کالا میشی، محصول می‌بینی، روی دکمه کلیک می‌کنی، منو باز می‌کنی یا چیزی سرچ می‌کنی...
برنامه‌نویس فرانت‌اند روی همین بخش‌ها کار می‌کنه. ظراحی فرم ها،دکمه ها، منوها و ...
پس خیلی ساده:
فرانت‌اند = ساخت ظاهر و تعاملات سایت
3🔥1💯1