📲 می‌دونستی بخش زیادی از سایت‌های معروفی که هر روز می‌بینی، با React و next ساخته شدن؟

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

🔥 اگه به دنیای فرانت‌اند علاقه داری، React , next یکی از مهم‌ترین تکنولوژی‌هاییه که باید یاد بگیری!

اگه می‌خوای Frontend Developer بشی:

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

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

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

#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی

«اگه برنامه‌نویسی بلدی، این ۷ کار رو می‌تونی بفروشی»

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

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

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

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

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

#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines

📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

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

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

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉

⏳ «وقت ندارم برنامه‌نویسی یاد بگیرم!»

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

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

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

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

نداشتن برنامه مشخصه.

🕵️ می‌خوای بفهمی یک سایت با چی ساخته شده؟

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

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

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

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

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

#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب

از کجا شروع کنیم؟

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

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

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

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

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

چقدر طول می‌کشه؟

این یکی از پرتکرارترین سؤال‌هاست:
چقدر زمان می‌بره فرانت‌اند یاد بگیرم؟
جوابش بستگی داره به اینکه چقدر وقت بذاری.
ولی یه چیز رو از همین اول بدون:
قرار نیست ۲ هفته‌ای برنامه‌نویس بشی.
و قرار هم نیست ۳ سال صبر کنی تا اولین سایتت رو بسازی.
اگر منظم جلو بری، از همون هفته‌های اول می‌تونی چیزهایی بسازی.
مثلاً:
هفته‌های اول → صفحات ساده
بعدش → سایت‌های خوشگل‌تر
بعدش → سایت‌های تعاملی
بعدش → پروژه‌های واقعی‌تر
پس به جای اینکه بپرسی:
«چند ماه طول می‌کشه حرفه‌ای بشم؟»
این رو بپرس:
«اگه امروز شروع کنم، یک ماه دیگه چه چیزی می‌تونم بسازم؟»
این سؤال خیلی بهتره.

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

۱۰
Extension
کاربردی Chrome برای Developerها

React Developer Tools
Redux DevTools
JSON Viewer
Lighthouse
Wappalyzer
WhatFont
ColorZilla
CSS Viewer
EditThisCookie
VisBug

📌 لازم نیست مرورگرت رو با ۵۰ تا Extension پر کنی؛ فقط چیزهایی رو نصب کن که واقعاً در Workflowت استفاده می‌شن.

#Chrome #DevTools #Frontend #Developer #Programming

❓ برای یادگیری برنامه نویسی فرانت‌اند و طراحی سایت، خودآموز بهتره یا شرکت تو دوره؟

🧠 خودآموز رفتن ممکنه،
اما باید انرژی زیادی بذاری واسه پیدا کردن منابع مطمئن توی این طوفان اطلاعاتی 🌪

📺 آموزشای یوتیوب چطور؟ اونام خوبن ولی:
❌ پراکنده‌ن
❌ بدون پشتیبانی
❌ بدون مسیر مشخص

و نتیجه؟
👉 وقتت می‌ره، انرژیت تموم میشه، ولی پیشرفت کم!

🎯 بهترین کار؟
شرکت تو دوره‌ای که دقیقاً برای بازار کار طراحی شده
نه فقط یادگیری تئوری، بلکه ساختن مسیر شغلی واقعی! 💼💻

✨ من همه‌ی مسیر رو برات چیدم:
ابزارها، تمرین‌ها، پروژه‌ها، پشتیبانی — هر چی لازم داری تا یه برنامه‌نویس حرفه‌ای و درآمدزا بشی 💪💰


https://codelines.ir/package

🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:

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

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

📌 Save
کن؛ برای کار تیمی لازمت میشه.

❓ از کجا بفهمم برای برنامه‌نویسی ساخته شدم؟

🧠 لازم نیست از قبل بدونی!
باید امتحانش کنی 💻
فقط یه مدت باهاش کار کن، اگه:

🧱 از ساختن یه چیز جدید لذت بردی
👨‍💼 حس کردی کارت واسه خودته
💸 آزادی مالی برات جذابه
🧩 از حل کردن مشکل‌ها خسته نمی‌شی
🌱 دیدی که داری رشد می‌کنی...

💡 بدون که مسیر درستو پیدا کردی!

✋ هیچ‌کس از اول نمی‌دونه واسه چی ساخته شده،
ولی کسی که امتحان نکنه، هیچ‌وقت نمی‌فهمه! 🚀

🌐 چند روش ذخیره اطلاعات در مرورگر که هر Front-End Developer باید بدونه:

📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن

⏱️ sessionStorage → اطلاعات تا پایان بستن تب

🍪 Cookie → داده‌های کوچک + امکان ارسال به سرور

🗄️ IndexedDB → ذخیره حجم زیادی از داده‌های ساختاریافته

⚡ Cache Storage → ذخیره فایل‌ها و Responseها برای افزایش سرعت

💾 Storage API → مدیریت و بررسی فضای ذخیره‌سازی

📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری

🤔 زبانم خوب نیست، ریاضیم ضعیفه، رشتمم کامپیوتر نیست... یعنی می‌تونم برنامه‌نویس فرانت اند و طراح سایت بشم؟

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

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

💡 خیلیا با همین شرایط از صفر شروع کردن و الان درآمدای میلیونی دارن... تو هم می‌تونی! 🔥

⚡ ۸ میانبر 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

🔥 ۱۰ پکیج CSS پرطرفدار در npm

اگه Front-End کاری، این پکیج‌ها رو حداقل یک‌بار ببین 👇


Tailwind CSS → استایل‌دهی سریع و مدرن
Bootstrap → کامپوننت‌های آماده و معروف
Sass → نوشتن CSS حرفه‌ای‌تر
styled-components → استایل‌دهی در React
Emotion → CSS-in-JS سریع و انعطاف‌پذیر
Animate.css → انیمیشن‌های آماده
AOS → انیمیشن هنگام اسکرول
Bulma → فریمورک CSS سبک
UIkit → کامپوننت‌های آماده UI
PostCSS → پردازش و بهینه‌سازی CSS

📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.

🚨 یه ترفند خیلی ساده برای تست Responsive بودن سایت:

لازم نیست هر بار صفحه مرورگرت رو با موس کوچیک و بزرگ کنی!

داخل Chrome بزن:
F12 → Ctrl + Shift + M

حالا وارد حالت Device Toolbar میشی و می‌تونی سایتت رو روی سایزهای مختلف موبایل، تبلت و دسکتاپ تست کنی. 📱💻
حتی می‌تونی سایز دلخواه خودت رو وارد کنی.

💡 یه نکته مهم: فقط با یک سایز تست نکن؛
ممکنه سایتت روی iPhone عالی باشه ولی روی یه صفحه 768px کاملاً به‌هم بریزه.

📌 قبل از Deploy کردن، Responsive بودن رو روی چند سایز مختلف چک کن.