TGViewer
Channel Public Channel
آموزش برنامه نویسی فرانت اند

آموزش برنامه نویسی فرانت اند

@codelines_ir

👈🏻 ارتباط با من: @codelines_support 🔅

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

آدرس سایت 👈🏻: codelines.ir
Subscribers
6.66K
Photos
359
Videos
48
Links
132

Showing posts older than #5023 · Back to latest

Older Posts 20 shown
Post #5022 520
اگه ۶ ماهه داری برنامه‌نویسی یاد می‌گیری ولی هنوز نمی‌تونی یه پروژه رو تنهایی بسازی، اینو بخون.

احتمالاً مشکل از هوش یا استعدادت نیست.

حتی شاید مشکل از کمبود آموزش هم نباشه.

مشکل اینه که بیشترِ وقتت رو صرف «یاد گرفتن» کردی، نه «حل کردن».
و این دوتا با هم فرق دارن.

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

❌ نمی‌دونی از کجا شروع کنی
❌ نمی‌دونی چه چیزی رو سرچ کنی
❌ با اولین ارور گیر می‌کنی
❌ سریع فکر می‌کنی «من برای برنامه‌نویسی ساخته نشدم»

در حالی که واقعیت اینه:

تو کم آموزش ندیدی؛ کم «مسئله حل کردی».

از امروز یه قانون برای خودت بذار:

هر چیزی که یاد می‌گیری، قبل از اینکه بری سراغ آموزش بعدی، باهاش یک چیز واقعی بساز.

حتی اگر کوچیک باشه. حتی اگر خراب بشه. حتی اگر مجبور بشی ۲۰ بار سرچ کنی.
چون هدف نهایی برنامه‌نویسی این نیست که بگی:

«من این مبحث رو بلدم.»
هدف اینه که وقتی بهت یک مسئله دادن، بتونی بگی:

«باشه، بذار ببینم چطور حلش کنم.» 🚀
  • ❤ 7
Post #5021 457
🚨 ۱۰ سایت مخفی که کلی وقت برنامه‌نویس‌ها رو نجات میده!

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

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

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

.
کدلاینز کدلاینز | آموزش فرانت اند پروژه محور از صفر تا استخدام آموزش فرانت اند از صفر تا استخدام: دوره‌های پروژه محور ری اکت (React)، جاوا اسکریپت (JavaScript)، HTML و CSS و گیت و گیت هاب — با دسترسی مادام‌العمر و پشتیبانی واقعی.
  • ❤ 5
  • 🔥 1
Post #5020 384
🎯 سوال مصاحبه | DNS چیه؟

فرض کن می‌خوای بری خونه دوستت؛ اسمش رو می‌دونی، ولی آدرس دقیقش رو نه.
اینجاست که DNS وارد عمل میشه. 😄
DNS اسم سایته مثل:
google.com

رو به آدرس واقعی سرورش (IP) تبدیل می‌کنه تا مرورگر بدونه باید به کجا وصل بشه.

📌 خلاصه:
google.com
⬇️
DNS
⬇️
142.250.xxx.xxx


💡 نکته : کامپیوترها اسم سایت‌ها رو نمی‌فهمن، فقط با IP Address ارتباط برقرار می‌کنن.
  • ❤ 4
Post #5019 372
افزونه‌های ضروری VS Code

⭐ Prettier فرمت خودکار کد

⭐ ESLint پیدا کردن خطاها

⭐ GitLens

قدرت بیشتر برای Git

⭐ Error Lens نمایش خطا کنار کد

⭐ Auto Rename Tag

تغییر همزمان تگ‌های HTML

⭐ Thunder Client

تست API داخل VS Code
  • ❤ 4
  • 👍 3
Post #5018 392
۵ نشونه که هنوز برای ورود به بازار کار آماده نیستی

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

ولی خبر خوب اینه:
همه این‌ها قابل یادگیریه.
  • ❤ 3
  • 👍 2
Post #5017 422
📱 Mobile First
یعنی چی؟

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

Mobile → Tablet → Desktop

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

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

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
  • ❤ 5
  • 🔥 1
Post #5016 373
🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:

clone → گرفتن پروژه
branch → ساخت شاخه
checkout → جابه‌جایی
add → آماده کردن تغییرات
commit → ثبت تغییرات
pull → گرفتن تغییرات
push → فرستادن تغییرات
merge → ترکیب Branchها

❌ Git
فقط push و pull نیست!

📌 Save
کن؛ برای کار تیمی لازمت میشه.
  • ❤ 5
  • 🔥 2
Post #5015 389
📲 می‌دونستی بخش زیادی از سایت‌های معروفی که هر روز می‌بینی، با React و next ساخته شدن؟

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

🔥 اگه به دنیای فرانت‌اند علاقه داری، React , next یکی از مهم‌ترین تکنولوژی‌هاییه که باید یاد بگیری!
  • ❤ 6
  • 👍 2
Post #5014 417
۶ سایت رایگان برای ساخت UI حرفه‌ای که باید ذخیره‌شون کنی

اگه فرانت‌اند کار می‌کنی، این لیست رو یه جا نگه دار:

shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI

همه‌شون برای پیدا کردن کامپوننت‌های آماده و ساخت سریع‌تر رابط کاربری کاربردی‌ان.

این پست رو Save کن؛ یه روز بهش نیاز پیدا می‌کنی.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
  • ❤ 5
  • 🔥 1
Post #5013 364
«اگه برنامه‌نویسی بلدی، این ۷ کار رو می‌تونی بفروشی»

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

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

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

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

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

#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines
  • ❤‍🔥 1
  • ❤ 1
  • 💯 1
Post #5012 367
😳 می‌دونستی سایتت می‌تونه بدون JavaScript تاریک بشه؟

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

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


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

کوچیکه، ولی برای یه سایت تمیز خیلی به‌دردبخوره. 🔥
  • ❤ 3
  • 🔥 1
Post #5011 362
🚀 ۱۰ سایت رایگان برای آنلاین کردن پروژه‌های برنامه‌نویسی 🔥

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

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

📤 برای یه برنامه‌نویس بفرست که هنوز پروژه‌هاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃
  • ❤ 2
  • 🔥 2
  • 👏 1
Post #5010 381
🔥 ۵ افزونه 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
  • ❤ 1
  • ❤‍🔥 1
  • 👌 1
Post #5009 352
⚡️ فرق npm install و npm ci چیه؟

اگه روی پروژه تیمی کار می‌کنی، این تفاوت رو حتماً بدون.

npm install
پکیج‌ها رو نصب می‌کنه و اگه لازم باشه فایل package-lock.json رو هم تغییر می‌ده.
npm install

npm ci
دقیقاً همون نسخه‌هایی که داخل package-lock.json ثبت شده رو نصب می‌کنه و هیچ تغییری هم توی فایل‌ها نمی‌ده.
npm ci


💡 کی از npm ci استفاده کنیم؟
موقع Deploy
توی CI/CD
وقتی می‌خوای مطمئن باشی همه دقیقاً یک نسخه از پکیج‌ها رو دارن.

📌 خلاصه:
برای توسعه روزمره → npm install
برای نصب سریع و مطمئن → npm ci
  • ❤ 2
  • 👍 1
  • 👏 1
Post #5008 366
⚡ ۸ میانبر 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
  • ❤ 1
  • 👍 1
Post #5007 412
۶ سایت رایگان برای ساخت UI حرفه‌ای که باید ذخیره‌شون کنی

اگه فرانت‌اند کار می‌کنی، این لیست رو یه جا نگه دار:

shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI

همه‌شون برای پیدا کردن کامپوننت‌های آماده و ساخت سریع‌تر رابط کاربری کاربردی‌ان.

این پست رو Save کن؛ یه روز بهش نیاز پیدا می‌کنی.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
  • ❤ 3
  • 👏 1
Post #5006 348
Post #5005 363
🔥 ۷ چیزی که قبل از استخدام شدن به‌عنوان Frontend Developer باید بلد باشی

Git و GitHub
کار با API
Authentication
مدیریت State
Error Handling
Debugging
Deploy کردن پروژه

ولی نکته اینجاست 👇
خیلی‌ها اینا رو تئوری بلدن.

ولی وقتی میگی:
«خب حالا یه پروژه از صفر بساز.»
گیر میکنن
اینجاست که تفاوت بلد بودن و تونستن مشخص میشه.

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

#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines
  • ❤ 3
  • ❤‍🔥 1
Post #5003 355
Rollback
یعنی چی؟ 🔙

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

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

Can we rollback?

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

v1.4.2 ❌ v1.4.1 ✅

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

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

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

#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی
  • ❤ 3
  • 🔥 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →