آموزش برنامه نویسی فرانت اند
6.59K subscribers
357 photos
48 videos
27 files
133 links
👈🏻 ارتباط با من: @codelines_support 🔅

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
😩 همش از این شاخه به اون شاخه می‌ری؟

نمی‌تونی روی یادگیری برنامه‌نویسی تمرکز کنی؟


✅ مشکل از تو نیست، مشکل اینه که مسیر مشخصی نداری!

🚀 چیزی که نیاز داری، یه نقشه راه اصولیه؛ تا بدونی دقیقاً چی رو، کی و چطور باید یاد بگیری.

💡 فقط کافیه ۴ ماه روی یه مسیر درست تمرکز کنی؛

👉 هم یاد می‌گیری
👉 هم پروژه می‌گیری
👉 هم شروع می‌کنی به پول درآوردن!

🔥 پس وقتتو هدر نده...
❤3💯1
🔥 طراحی یه سایت کوچیک = درآمد یه کارمند توی یه ماه!

💰 می‌دونستی یه پروژه ساده فرانت‌اند و طراحی سایت حداقل 35 میلیون ارزش داره؟


🚀 برنامه نویسی فرانت‌اند یه بلیت طلاییه!
❤2👏1💯1
💻🚀 برنامه‌نویسی فرانت اند: کاری که می‌تونی از هر جا و هر زمان انجام بدی! 🔥

یه مهارت که نیاز به دفتر و رئیس و ساعت کاری نداره! از خونه، توی سفر، هر جا که بخوای کار می‌کنی! 😏

خودت تصمیم می‌گیری چقدر وقت بذاری و چقدر پول دربیاری! این یعنی آزادی واقعی!
❤1👍1👨‍💻1
Merge Conflict
یعنی چی؟

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

حالا Git میگه:

CONFLICT
خوردی

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

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

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

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

#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
❤3👍1
🔥 بچه‌هایی که قدیم پکیج جامع برنامه‌نویسی فرانت‌اند رو تهیه کردن!

اگر PDF دوره‌های Next.js، TypeScript و ۱۰۰ سوال استخدامی برنامه‌نویسی فرانت‌اند (چهارگزینه‌ای + جواب تشریحی) رو ندارید، این فرصت رو از دست ندید 👇

💰 قیمت هر ۳ دوره در سایت: ۱,۰۱۸,۰۰۰ تومان

🎯 اما فقط امروز می‌تونید هر ۳ دوره رو با قیمت ویژه ۴۹۸,۰۰۰ تومان تهیه کنید!

🎟 برای دریافت کد تخفیف، به پشتیبانی پیام بدید.

❤️ این تخفیف مخصوص بچه‌هاییه که قبلاً پکیج جامع رو تهیه کردن.

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

@codelines_support
❤3👌1
👀 این ۵ تا Attribute HTML رو خیلی‌ها جدی نمی‌گیرن:

loading="lazy" → لود تنبل تصاویر
autocomplete → تجربه بهتر فرم‌ها
aria-label → دسترسی‌پذیری بهتر
defer → جلوگیری از بلاک شدن HTML
rel="noopener" → امنیت بیشتر لینک‌های جدید

همین جزئیات کوچیکه که کد یه Junior رو از یه Developer حرفه‌ای جدا می‌کنه. 🚀

📌 Save
کن؛ بعداً به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
🔥2❤1
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره

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

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

#CleanCode #Refactoring #Programming #Developer #کدنویسی
❤3🔥1
😵‍💫 چرا با اینکه زیاد آموزش می‌بینی، هنوز نمی‌تونی پروژه بزنی؟

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

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

اما وقتی صفحه رو می‌بندی و می‌خوای خودت شروع کنی، نمی‌دونی از کجا.

این یعنی باید نسبتِ «آموزش دیدن» به «تمرین کردن» رو تغییر بدی.

📌 آموزش باید شروع یادگیری باشه، نه پایانش.

#برنامه_نویسی #یادگیری #فرانت_اند #Frontend #Developer
🔥2👏1
جمله نابی امشب :

هر تصمیمی می‌گیری، بگیر ولی یا با تمام وجود پاش بمون یا کاملا بیخیالش شو!
تردید، آدمو نابود می‌کنه...
❤8🤝1
let arr = [10, 20, 30];
console.log(arr[1]);
خروجی‌ کد بالا کدوم گزینس؟
Anonymous Quiz
17%
10
19%
1
62%
20
1%
30
❤2
📲 می‌دونستی بخش زیادی از سایت‌های معروفی که هر روز می‌بینی، با React و next ساخته شدن؟

🏆 از اینستاگرام و دیجی‌کالا گرفته تا کلی وب‌سایت و اپلیکیشن محبوب، React , next یکی از تکنولوژی‌های پرکاربرد برای ساخت رابط کاربریه.

🔥 اگه به دنیای فرانت‌اند علاقه داری، React , next یکی از مهم‌ترین تکنولوژی‌هاییه که باید یاد بگیری!
❤2🔥1
اگه می‌خوای Frontend Developer بشی:

❌ هر روز دنبال Framework جدید نباش.

✅ JavaScript
رو عمیق یاد بگیر.

چون Frameworkها عوض می‌شن؛
ولی JavaScript هنوز سر جاشه. 🔥

#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❤2👏1
«اگه برنامه‌نویسی بلدی، این ۷ کار رو می‌تونی بفروشی»

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

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

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

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

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

#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines
❤2
📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

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

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

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉
❤4👍1
⏳ «وقت ندارم برنامه‌نویسی یاد بگیرم!»

لازم نیست هر روز ۵ ساعت وقت بذاری.

اگر روزی فقط ۴۵ دقیقه وقت داری:
۱۵ دقیقه → یادگیری
۲۰ دقیقه → کدنویسی
۱۰ دقیقه → مرور

بعد از چند ماه، همین زمان‌های کوچک جمع میشن.

📌 مشکل خیلی وقت‌ها کمبود زمان نیست؛

نداشتن برنامه مشخصه.
❤5👌1
🕵️ می‌خوای بفهمی یک سایت با چی ساخته شده؟

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

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

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

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

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

#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب
❤1🔥1
کدام مقدار Falsy نیست؟
Anonymous Quiz
20%
0
25%
“”
30%
[ ]
26%
null
از کجا شروع کنیم؟

خب، حالا که فهمیدیم فرانت‌اند چیه...
سؤال بعدی:
از کجا باید شروع کنیم؟
مسیر شروع فرانت‌اند اینه:
HTML CSS
⬇️
JavaScript
⬇️
React , typescript
⬇️
nextjs
⬇️
git github

نکته مهم اینجاست:
لازم نیست روز اول بری React بخونی.
لازم نیست Next.js بلد باشی.
لازم نیست حتی بدونی GitHub چیه.

هیچی لازم نیست بدونی فقط خواستم مسیر رو برات روشن کنم چون من همه رو بدون اینکه اصلا هیچی بدونی با کلی پروژه تمرین یادت میدم

و دقیقاً به همین دلیل شروع برنامه‌نویسی خیلی ساده‌تر از چیزیه که وقتی اسم ۲۰ تا تکنولوژی رو کنار هم می‌بینی فکر می‌کنی.

حالا سؤال بعدی:
چقدر طول می‌کشه یاد بگیری؟
❤3👏1🙏1