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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
🔥 تخفیف ویژه دوره React JS فقط تا پایان فردا!

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

💰 قیمت اصلی دوره: ۲,۲۰۰,۰۰۰ تومان
🔥 فقط تا پایان فردا می‌تونی این دوره رو با قیمت ۷۹۸,۰۰۰ تومان تهیه کنی.

با خرید این دوره چی یاد می‌گیری؟

آموزش React از صفر تا پیشرفته، کاملاً پروژه‌محور
یادگیری اصولی Componentها، Props و State
آموزش کامل React Hooks (useState، useEffect و سایر Hookهای مهم)
کار با React Router و ساخت صفحات حرفه‌ای
اتصال به API و کار با Axios
مدیریت فرم‌ها و اعتبارسنجی اطلاعات
ساخت پروژه با ساختار استاندارد و اصول بازار کار

۸ پروژه حرفه‌ای و کاربردی برای تقویت رزومه و تجربه عملی

🎁 دوره کامل Git و GitHub هم کاملاً رایگان هدیه می‌گیری.

♾️ دسترسی دائمی به ویدیوها و تمام آپدیت‌های آینده دوره

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

این تخفیف فقط تا پایان فردا فعاله و بعد از اون قیمت دوره دوباره به ۲,۲۰۰,۰۰۰ تومان برمی‌گرده.

📌 ثبت‌نام:
https://codelines.ir/course/react-js

👇🏻یا

@codelines_support
3
🚨 اگه امروز دوباره می‌خواستم از صفر شروع کنم، فقط این ۷ کار رو انجام می‌دادم:

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

به خاطر این شکست می‌خورن که زودتر از موفقیت، جا می‌زنن. 🚀💙
4👏1
🔥 ۱۰ سایتی که هر برنامه‌نویسی باید بشناسه:

🌐 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 → نگهداری کدها، نمونه‌کار و همکاری تیمی.

💾 این پست رو ذخیره کن؛ مطمئن باش بارها بهش نیاز پیدا می‌کنی.
4❤‍🔥2
🚨 یه چیزی که خیلی‌ها برای گرفتن پروژه یا شغل توی برنامه‌نویسی اشتباه فکر می‌کنن...

«من مدرک مرتبط ندارم...» «سنم کمه...» «دیر شروع کردم...» «تجربه کاری ندارم...»

دوست من، برای خیلی از پروژه‌ها و کارهای برنامه‌نویسی، کسی اول ازت مدرک
نمی‌خواد...

طرف فقط می‌خواد ببینه:
می‌تونی مشکلش رو حل کنی؟ می‌تونی چیزی که می‌خواد رو بسازی؟ می‌تونی سر وقت تحویل بدی؟
همین.

مشتری یا شرکت دنبال این نیست که چند سالته یا چه مدرکی داری؛ دنبال کسیه که کارش رو راه بندازه.

ممکنه ۱۸ سالت باشه یا ۳۵ سال... ممکنه مدرک کامپیوتر داشته باشی یا اصلاً نداشته باشی...

چیزی که حرف آخر رو می‌زنه:
مهارت + نمونه‌کار + توانایی حل مسئله است. 🚀

پس به‌جای اینکه دنبال دلیل برای شروع نکردن بگردی، شروع کن چیزی بساز که نشون بده چی بلدی.
2👏1
🔥 ۱۰ سایتی که باعث میشن سریع‌تر برنامه‌نویسی کنی:

🤖 ChatGPT → رفع خطا، توضیح کد و
ایده گرفتن.

🎨 Figma Community → UIهای آماده برای تمرین و پروژه.

🧩 Shadcn/UI → کامپوننت‌های حرفه‌ای React.

Magic UI → کامپوننت‌ها و انیمیشن‌های آماده.

🌊 Tailwind CSS → مستندات کامل و نمونه‌های کاربردی.

🎯 React Icons → هزاران آیکون رایگان.

📦 NPM → پیدا کردن پکیج‌های موردنیاز پروژه.

Excalidraw → طراحی سریع فلوچارت و ایده‌های پروژه.

🌍 JSONPlaceholder → API رایگان برای تمرین.

🚀 Roadmap.sh → نقشه راه یادگیری برنامه‌نویسی.

📌 اگه این ۱۰ سایت رو بشناسی، هم سریع‌تر یاد می‌گیری، هم موقع پروژه کمتر گیر می‌کنی. 💙
1❤‍🔥1
🚨 ۱۰ سایت مخفی که کلی وقت برنامه‌نویس‌ها رو نجات میده!

اگه برنامه‌نویسی می‌کنی، این سایت‌ها رو یه گوشه ذخیره کن؛ یه روزی حسابی به کارت میان 👇

🧠 Stack Overflow → وقتی به یه خطای عجیب می‌خوری، احتمالاً جوابش اینجاست.
📚 DevDocs → مستندات چندین تکنولوژی رو یکجا داشته باش.
🔍 Regex101 → ساخت و تست Regex بدون دردسر.
🎯 Frontend Mentor → تمرین پروژه‌های واقعی فرانت‌اند.
🖼️ Unsplash → عکس‌های حرفه‌ای رایگان برای پروژه‌ها.
TinyPNG → حجم تصاویر رو کم کن و سرعت سایتت رو بالا ببر.
🎨 CSS Tricks → کلی ترفند خفن برای CSS.
🧪 JSFiddle → کدت رو سریع تست کن.
📦 Bundlephobia → قبل از نصب پکیج‌ها حجمشون رو بررسی کن.
🚀 Lighthouse → سرعت، سئو و کیفیت سایتت رو بررسی کن.

📌 خیلی از برنامه‌نویس‌ها این ابزارها رو دیر پیدا می‌کنن...
تو ذخیره‌ش کن که موقع پروژه دنبال ابزار نگردی. 🔥
3❤‍🔥2
🔥 چیزی که خیلی از برنامه‌نویس‌های تازه‌کار نمی‌دونن...

شرکت‌ها و مشتری‌ها دنبال «باهوش‌ترین آدم دنیا» نیستن.
دنبال کسی هستن که:
مسئولیت‌پذیر باشه جواب بده و ناپدید نشه بتونه مشکل رو پیگیری کنه وقتی چیزی رو بلد نیست، یاد بگیره
خیلی وقت‌ها یه برنامه‌نویس متوسط ولی قابل اعتماد، از یه برنامه‌نویس قوی که بدقولی می‌کنه جلو می‌زنه.

فقط روی کد زدن کار نکن...
روی حرفه‌ای بودن هم کار کن. 💻🚀
4👍1
🚨 ۱۰ سایت که برنامه‌نویس‌های حرفه‌ای یواشکی استفاده می‌کنن! 🤫

اینارو ذخیره کن؛ وسط پروژه چند بار به دادت می‌رسن 👇

🕵️ Wappalyzer بفهم سایت‌های معروف با چه تکنولوژی‌هایی ساخته شدن.
🧠 Explain Dev کدهای پیچیده رو ساده توضیح بده و سریع‌تر یاد بگیر.
🔥 Carbon از کدت عکس‌های خفن و حرفه‌ای برای پست و رزومه بساز.
🧪 Requestly درخواست‌های API و رفتار سایت رو بدون تغییر کد تست کن.
🧰 DevToys یه جعبه ابزار کامل برای برنامه‌نویس‌ها؛ از تبدیل فرمت‌ها تا تست دیتا.
🖥️ Responsively App سایتت رو همزمان توی چند سایز صفحه تست کن.
🗄️ DB Diagram قبل از ساخت دیتابیس، ساختارش رو راحت طراحی کن.
🎯 Frontend Practice تمرین فرانت‌اند با طراحی‌های واقعی سایت‌ها.
🧩 SVG Repo هزاران آیکون و فایل SVG رایگان برای پروژه‌ها.
⚙️ Open Source Alternative برای هر ابزار پولی، جایگزین‌های رایگان پیدا کن.

📌 خیلی از برنامه‌نویس‌ها فقط کدنویسی بلدند...

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

ذخیره کن، موقع پروژه می‌فهمی چرا به درد می‌خورن. 🔥
2👏1
🔥 یه پرامپت خفن برای فرانت‌اند کارها که باید ذخیره کنی 🤯

اگه با React یا فرانت‌اند کار می‌کنی، این پرامپت رو بده به هوش مصنوعی تا مثل یه Senior Frontend Developer کنارت باشه؛ نه فقط یه کدزن ساده.

با این پرامپت می‌تونی: ساختار بهتر برای پروژه بگیری کامپوننت‌بندی اصولی یاد بگیری تکنولوژی مناسب انتخاب کنی کد تمیزتر و استانداردتر بنویسی

پرامپت 👇

You are a Senior Frontend Developer with 10+ years of experience.

I want to build a professional frontend project.

Before writing any code:
1. Suggest the best project structure.
2. Define the components and their responsibilities.
3. Recommend the best technologies and explain why.
4. Create a step-by-step implementation roadmap.
5. Write clean, maintainable, production-ready code following industry standards.

Act like a mentor, not just a code generator.
Explain your decisions, point out my mistakes, and help me improve as a developer.


📌 این باعث میشه فقط کد آماده تحویل نگیری؛ بلکه مثل یه برنامه‌نویس حرفه‌ای فکر کردن رو یاد بگیری. 🚀
2👍1
چیت‌شیت React در یک پست 📌

useState → مدیریت State
useEffect → مدیریت Side Effect
useRef → دسترسی به DOM
useMemo → کش کردن مقدار
useCallback → کش کردن تابع
Context → اشتراک State
React.memo → جلوگیری از Render اضافی
key → شناسایی آیتم‌های لیست
4🔥1
😱 ۱۰ اشتباه که برنامه‌نویس‌های تازه‌کار انجام میدن
این اشتباهات باعث میشه ماه‌ها عقب بیفتی!
فقط آموزش دیدن پروژه ساختن
حفظ کردن کد فهمیدن منطق کد
یاد گرفتن ۵ زبان همزمان تمرکز روی یک مسیر
ترس از ارور یاد گرفتن Debug
کپی از ChatGPT تحلیل جواب
نخواندن کد دیگران بررسی پروژه‌های Open Source
نداشتن GitHub ساخت رزومه آنلاین
دنبال میانبر بودن استمرار روزانه
تو کدوم اشتباه رو کردی؟ 😅
4🔥1
۹ اشتباهی که سرعت پروژه React را
نابود می‌کند

رندرهای اضافی
استفاده زیاد از Context
key نامناسب
کامپوننت‌های خیلی بزرگ
عدم Code Splitting
تصاویر حجیم
APIهای غیرضروری
محاسبات داخل Render
نداشتن Lazy Loading
2🔥1
🔥 ۵ افزونه 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
3👍1🔥1
🚨 ۹۰٪ مبتدی‌ها این سؤال‌ها رو دارن!

اگر تازه برنامه‌نویسی رو شروع کردی، حتماً این پست رو ذخیره کن. 📌


برای برنامه‌نویسی باید ریاضی قوی باشم؟

خیر

برای بیشتر حوزه‌های برنامه‌نویسی، منطق مهم‌تر از ریاضیات پیشرفته است.

بدون دانشگاه میشه برنامه‌نویس شد؟

بله

شرکت‌ها بیشتر از مدرک، به مهارت، پروژه و GitHub تو اهمیت میدن.

لپ‌تاپ گرون لازمه؟

نه

برای شروع، یک لپ‌تاپ معمولی هم کاملاً کافیه.

روزی چند ساعت تمرین کنم؟

۲ تا ۳ ساعت مداوم

ثبات از تعداد ساعت مهم‌تره.

از کجا شروع کنم؟
HTML
⬇️
CSS
⬇️
JavaScript
⬇️
Git
⬇️
React یا مسیر موردنظر

چقدر طول می‌کشه برنامه‌نویس بشم؟

اگر هر روز تمرین کنی، معمولاً بین ۶ تا ۱۲ ماه می‌تونی برای اولین موقعیت‌های کاری آماده بشی.

انگلیسی باید خیلی قوی باشه؟

نه

در حد خوندن مستندات و سرچ کردن کافیه و به مرور بهتر میشی.

هوش مصنوعی جای برنامه‌نویس‌ها رو می‌گیره؟

نه

اما برنامه‌نویسی که از AI استفاده نکنه، احتمالاً از بقیه عقب می‌افته.
4🔥1
۵ نشونه که هنوز برای ورود به بازار کار آماده نیستی

نمی‌تونی یک پروژه رو از صفر بسازی
وقتی ارور می‌بینی گیر می‌کنی
نمی‌دونی چه چیزهایی رو باید یاد بگیری
Git و GitHub
بلد نیستی
پروژه برای رزومه نداری

ولی خبر خوب اینه:
همه این‌ها قابل یادگیریه.
👌31
🚀 ۱۰ سایت رایگان برای آنلاین کردن پروژه‌های برنامه‌نویسی 🔥

📌 ذخیره کن؛ بعداً بهشون نیاز پیدا می‌کنی

Vercel
Netlify
GitHub Pages
Cloudflare Pages
Firebase Hosting
Render
GitLab Pages
Surge
Replit
Gitpod

📤 برای یه برنامه‌نویس بفرست که هنوز پروژه‌هاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃
6
😳 چرا نباید داخل forEach از async/await استفاده کنی؟

۹۰٪ برنامه‌نویس‌ها حداقل یک بار این اشتباه رو انجام دادن.

users.forEach(async (user) => {
await sendEmail(user);
});

console.log("Done");


فکر می‌کنی اول کدوم اجرا میشه؟

Done
منتظر نمی‌مونه.

چون forEach منتظر Promiseها نمی‌مونه.

راه درست:

for (const user of users) {
await sendEmail(user);
}
3👍1
🤖 این پرامپت رو ذخیره کن؛ باهاش سریع‌تر باگ کدت رو پیدا کن! 🔥

هر وقت توی کدت گیر کردی، این پرامپت رو به AI بده تا مثل یک Debugger حرفه‌ای بررسیش کنه.

📌 فقط کدت و ارورت رو جایگذاری کن.

Act as a senior software
engineer and expert debugger.

Analyze the following code and:

1. Find the main issue or bug in the code.
2. Explain why this error is happening in a simple way.
3. Point out exactly where the problem is and why.
4. Provide the corrected version of the code.
5. Suggest a cleaner or more optimized approach if possible.

Programming language:
[Insert language]

Code:
[Paste your code here]

Error message or unexpected behavior:
[Describe the issue here]


🔥 با این پرامپت فقط جواب نمی‌گیری؛ دلیل مشکل رو هم یاد می‌گیری.

📌 ذخیره کن؛ موقع گیر کردن توی پروژه نجاتت می‌ده.

📤 برای یه برنامه‌نویس بفرست که همیشه دنبال پیدا کردن باگه 😄
4👏1