❓ برای یادگیری برنامه نویسی فرانتاند و طراحی سایت، خودآموز بهتره یا شرکت تو دوره؟
🧠 خودآموز رفتن ممکنه،
اما باید انرژی زیادی بذاری واسه پیدا کردن منابع مطمئن توی این طوفان اطلاعاتی 🌪
📺 آموزشای یوتیوب چطور؟ اونام خوبن ولی:
❌ پراکندهن
❌ بدون پشتیبانی
❌ بدون مسیر مشخص
و نتیجه؟
👉 وقتت میره، انرژیت تموم میشه، ولی پیشرفت کم!
🎯 بهترین کار؟
شرکت تو دورهای که دقیقاً برای بازار کار طراحی شده
نه فقط یادگیری تئوری، بلکه ساختن مسیر شغلی واقعی! 💼💻
✨ من همهی مسیر رو برات چیدم:
ابزارها، تمرینها، پروژهها، پشتیبانی — هر چی لازم داری تا یه برنامهنویس حرفهای و درآمدزا بشی 💪💰
https://codelines.ir/package
🧠 خودآموز رفتن ممکنه،
اما باید انرژی زیادی بذاری واسه پیدا کردن منابع مطمئن توی این طوفان اطلاعاتی 🌪
📺 آموزشای یوتیوب چطور؟ اونام خوبن ولی:
❌ پراکندهن
❌ بدون پشتیبانی
❌ بدون مسیر مشخص
و نتیجه؟
👉 وقتت میره، انرژیت تموم میشه، ولی پیشرفت کم!
🎯 بهترین کار؟
شرکت تو دورهای که دقیقاً برای بازار کار طراحی شده
نه فقط یادگیری تئوری، بلکه ساختن مسیر شغلی واقعی! 💼💻
✨ من همهی مسیر رو برات چیدم:
ابزارها، تمرینها، پروژهها، پشتیبانی — هر چی لازم داری تا یه برنامهنویس حرفهای و درآمدزا بشی 💪💰
https://codelines.ir/package
کدلاینز
کدلاینز | آموزش فرانت اند پروژه محور از صفر تا استخدام
آموزش فرانت اند از صفر تا استخدام: دورههای پروژه محور ری اکت (React)، جاوا اسکریپت (JavaScript)، HTML و CSS و گیت و گیت هاب — با دسترسی مادامالعمر و پشتیبانی واقعی.
❤1👍1
🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:
❌ Git
فقط
📌 Save
کن؛ برای کار تیمی لازمت میشه.
clone → گرفتن پروژه branch → ساخت شاخه checkout → جابهجایی add → آماده کردن تغییرات commit → ثبت تغییرات pull → گرفتن تغییرات push → فرستادن تغییرات merge → ترکیب Branchها❌ Git
فقط
push و pull نیست!📌 Save
کن؛ برای کار تیمی لازمت میشه.
❤2👏1
❓ از کجا بفهمم برای برنامهنویسی ساخته شدم؟
🧠 لازم نیست از قبل بدونی!
باید امتحانش کنی 💻
فقط یه مدت باهاش کار کن، اگه:
🧱 از ساختن یه چیز جدید لذت بردی
👨💼 حس کردی کارت واسه خودته
💸 آزادی مالی برات جذابه
🧩 از حل کردن مشکلها خسته نمیشی
🌱 دیدی که داری رشد میکنی...
💡 بدون که مسیر درستو پیدا کردی!
✋ هیچکس از اول نمیدونه واسه چی ساخته شده،
ولی کسی که امتحان نکنه، هیچوقت نمیفهمه! 🚀
🧠 لازم نیست از قبل بدونی!
باید امتحانش کنی 💻
فقط یه مدت باهاش کار کن، اگه:
🧱 از ساختن یه چیز جدید لذت بردی
👨💼 حس کردی کارت واسه خودته
💸 آزادی مالی برات جذابه
🧩 از حل کردن مشکلها خسته نمیشی
🌱 دیدی که داری رشد میکنی...
💡 بدون که مسیر درستو پیدا کردی!
✋ هیچکس از اول نمیدونه واسه چی ساخته شده،
ولی کسی که امتحان نکنه، هیچوقت نمیفهمه! 🚀
❤4👍1🔥1
🌐 چند روش ذخیره اطلاعات در مرورگر که هر Front-End Developer باید بدونه:
📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن
⏱️ sessionStorage → اطلاعات تا پایان بستن تب
🍪 Cookie → دادههای کوچک + امکان ارسال به سرور
🗄️ IndexedDB → ذخیره حجم زیادی از دادههای ساختاریافته
⚡ Cache Storage → ذخیره فایلها و Responseها برای افزایش سرعت
💾 Storage API → مدیریت و بررسی فضای ذخیرهسازی
📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن
⏱️ sessionStorage → اطلاعات تا پایان بستن تب
🍪 Cookie → دادههای کوچک + امکان ارسال به سرور
🗄️ IndexedDB → ذخیره حجم زیادی از دادههای ساختاریافته
⚡ Cache Storage → ذخیره فایلها و Responseها برای افزایش سرعت
💾 Storage API → مدیریت و بررسی فضای ذخیرهسازی
📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤🔥3🔥1🙏1
🤔 زبانم خوب نیست، ریاضیم ضعیفه، رشتمم کامپیوتر نیست... یعنی میتونم برنامهنویس فرانت اند و طراح سایت بشم؟
✅ آره! حتی اگه رشتت معماری، حقوق، پزشکی یا هر چیز دیگهای باشه! فقط بلد باشی کامپیوتر رو روشن کنی، بقیش رو من مثل آب خوردن یادت میدم! 😎
🚀 نه ریاضی پیچیده میخوای، نه زبان عالی! فقط یه مسیر درست و تمرین!
💡 خیلیا با همین شرایط از صفر شروع کردن و الان درآمدای میلیونی دارن... تو هم میتونی! 🔥
✅ آره! حتی اگه رشتت معماری، حقوق، پزشکی یا هر چیز دیگهای باشه! فقط بلد باشی کامپیوتر رو روشن کنی، بقیش رو من مثل آب خوردن یادت میدم! 😎
🚀 نه ریاضی پیچیده میخوای، نه زبان عالی! فقط یه مسیر درست و تمرین!
💡 خیلیا با همین شرایط از صفر شروع کردن و الان درآمدای میلیونی دارن... تو هم میتونی! 🔥
❤1⚡1👏1
⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:
📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
Ctrl + P → پیدا کردن فایل Ctrl + Shift + P → Command Palette Ctrl + D → انتخاب مشابه بعدی Alt + ↑ / ↓ → جابهجایی خط Shift + Alt + ↓ → کپی خط Ctrl + / → Comment Ctrl + B → باز/بسته کردن Sidebar Ctrl + Shift + F → جستجو در کل پروژه📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
❤3🔥1💯1
🔥 ۱۰ پکیج 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
📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
اگه Front-End کاری، این پکیجها رو حداقل یکبار ببین 👇
Tailwind CSS → استایلدهی سریع و مدرن
Bootstrap → کامپوننتهای آماده و معروف
Sass → نوشتن CSS حرفهایتر
styled-components → استایلدهی در React
Emotion → CSS-in-JS سریع و انعطافپذیر
Animate.css → انیمیشنهای آماده
AOS → انیمیشن هنگام اسکرول
Bulma → فریمورک CSS سبک
UIkit → کامپوننتهای آماده UI
PostCSS → پردازش و بهینهسازی CSS
📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
❤1
🚨 یه ترفند خیلی ساده برای تست Responsive بودن سایت:
لازم نیست هر بار صفحه مرورگرت رو با موس کوچیک و بزرگ کنی!
داخل Chrome بزن:
F12 → Ctrl + Shift + M
حالا وارد حالت Device Toolbar میشی و میتونی سایتت رو روی سایزهای مختلف موبایل، تبلت و دسکتاپ تست کنی. 📱💻
حتی میتونی سایز دلخواه خودت رو وارد کنی.
💡 یه نکته مهم: فقط با یک سایز تست نکن؛
ممکنه سایتت روی iPhone عالی باشه ولی روی یه صفحه 768px کاملاً بههم بریزه.
📌 قبل از Deploy کردن، Responsive بودن رو روی چند سایز مختلف چک کن.
لازم نیست هر بار صفحه مرورگرت رو با موس کوچیک و بزرگ کنی!
داخل Chrome بزن:
F12 → Ctrl + Shift + M
حالا وارد حالت Device Toolbar میشی و میتونی سایتت رو روی سایزهای مختلف موبایل، تبلت و دسکتاپ تست کنی. 📱💻
حتی میتونی سایز دلخواه خودت رو وارد کنی.
💡 یه نکته مهم: فقط با یک سایز تست نکن؛
ممکنه سایتت روی iPhone عالی باشه ولی روی یه صفحه 768px کاملاً بههم بریزه.
📌 قبل از Deploy کردن، Responsive بودن رو روی چند سایز مختلف چک کن.
🔥 ۵ افزونه 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️⃣ 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
چرا همه Developerها باید HTTP رو بفهمن؟
وقتی مینویسی:
فقط یک خط JavaScript میبینی.
ولی پشتش یک دنیای کامل وجود داره:
و Status Codeهایی مثل:
مثلاً:
401 یعنی احراز هویت مشکل داره.
403 یعنی هویت مشخصه ولی اجازه دسترسی نداری.
404 یعنی Resource پیدا نشده.
500 یعنی مشکل سمت Server اتفاق افتاده.
📌 اگر HTTP رو نفهمی، Debug کردن پروژههای واقعی خیلی سختتر میشه.
#HTTP #API #Frontend #Backend #WebDevelopment #Programming
وقتی مینویسی:
fetch("/api/users")فقط یک خط JavaScript میبینی.
ولی پشتش یک دنیای کامل وجود داره:
GET
POST
PUT
PATCH
DELETE
و Status Codeهایی مثل:
200
201
400
401
403
404
500
مثلاً:
401 یعنی احراز هویت مشکل داره.
403 یعنی هویت مشخصه ولی اجازه دسترسی نداری.
404 یعنی Resource پیدا نشده.
500 یعنی مشکل سمت Server اتفاق افتاده.
📌 اگر HTTP رو نفهمی، Debug کردن پروژههای واقعی خیلی سختتر میشه.
#HTTP #API #Frontend #Backend #WebDevelopment #Programming
👏2
برای دسترسی به مقدار name در کد بالا کدام گزینه صحیح است؟
Anonymous Quiz
29%
user[name]
12%
user->name
54%
4%
user::name
💰 اگه میخوای اولین پروژه یا اولین شغلت رو بگیری، این ۵ کار رو انجام بده:
✅ توی سایتهای استخدام مثل جابینجا، جابویژن و... رزومه بساز و هر روز برای آگهیهای جدید رزومه بفرست. حتی اگه همه شرایطش رو نداری.
✅ توی سایتهای فریلنسری مثل پونیشا و کارلنسر پروفایل کامل بساز و هر روز برای چند پروژه پیشنهاد بفرست.
✅ توی لینکدین، با برنامهنویسها و مدیرهای فنی ارتباط بگیر. خیلی از
فرصتهای شغلی اصلاً آگهی نمیشن.
✅ نمونهکارهات رو داخل GitHub و یک پورتفولیو منتشر کن. خیلی از شرکتها قبل از مصاحبه اول کدهای تو رو نگاه میکنن.
✅ توی گروههای تلگرام و کامیونیتیهای برنامهنویسی عضو باش. خیلی از پروژههای کوچک و معرفیها از همین گروهها پیدا میشن.
یه اشتباه بزرگ اینه که فقط منتظر بمونی یه آگهی مناسب پیدا بشه.
هر روز ۱۰ تا درخواست بفرست.
ممکنه ۹ تاش بیجواب بمونه، ولی همون یکی، میتونه مسیر شغلی تو رو عوض کنه. 🚀
✅ توی سایتهای استخدام مثل جابینجا، جابویژن و... رزومه بساز و هر روز برای آگهیهای جدید رزومه بفرست. حتی اگه همه شرایطش رو نداری.
✅ توی سایتهای فریلنسری مثل پونیشا و کارلنسر پروفایل کامل بساز و هر روز برای چند پروژه پیشنهاد بفرست.
✅ توی لینکدین، با برنامهنویسها و مدیرهای فنی ارتباط بگیر. خیلی از
فرصتهای شغلی اصلاً آگهی نمیشن.
✅ نمونهکارهات رو داخل GitHub و یک پورتفولیو منتشر کن. خیلی از شرکتها قبل از مصاحبه اول کدهای تو رو نگاه میکنن.
✅ توی گروههای تلگرام و کامیونیتیهای برنامهنویسی عضو باش. خیلی از پروژههای کوچک و معرفیها از همین گروهها پیدا میشن.
یه اشتباه بزرگ اینه که فقط منتظر بمونی یه آگهی مناسب پیدا بشه.
هر روز ۱۰ تا درخواست بفرست.
ممکنه ۹ تاش بیجواب بمونه، ولی همون یکی، میتونه مسیر شغلی تو رو عوض کنه. 🚀
❤3🔥1
🕵️ میخوای بفهمی یک سایت با چی ساخته شده؟
این ابزارها رو امتحان کن:
🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns
میتونی سرنخهایی درباره:
Framework
CMS
Analytics
Server
CDN
و تکنولوژیهای استفادهشده
پیدا کنی.
📌 برای تحقیق و بررسی سایتهای مختلف خیلی کاربردیه.
#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب
این ابزارها رو امتحان کن:
🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns
میتونی سرنخهایی درباره:
Framework
CMS
Analytics
Server
CDN
و تکنولوژیهای استفادهشده
پیدا کنی.
📌 برای تحقیق و بررسی سایتهای مختلف خیلی کاربردیه.
#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب
❤1👏1
⚡️ Arrow Function
به جای اینکه اینجوری بنویسی:
میتونی خیلی خلاصهتر بنویسی:
هم کد کوتاهتره، هم خواناتر.
📌 فقط یادت باشه Arrow Function همیشه جای Function معمولی رو نمیگیره و توی بحث
ولی برای اکثر کارهای روزمره، انتخاب فوقالعادهایه.
#JavaScript #Frontend
به جای اینکه اینجوری بنویسی:
function sum(a, b) {
return a + b;
}میتونی خیلی خلاصهتر بنویسی:
const sum = (a, b) => a + b;
هم کد کوتاهتره، هم خواناتر.
📌 فقط یادت باشه Arrow Function همیشه جای Function معمولی رو نمیگیره و توی بحث
this رفتار متفاوتی داره.ولی برای اکثر کارهای روزمره، انتخاب فوقالعادهایه.
#JavaScript #Frontend
❤🔥1❤1👍1
📌میانبرهای کیبورد که همه ی برنامه نویسان باید بلد باشن
با
با
با
با
با
با
با علامت نقلقول، عبارت دقیق رو در گوگل پیدا کن
با
با
با
با
Win + V تاریخچه کپیها رو ببینبا
Ctrl + Shift + T تب بستهشده رو برگردونبا
Win + Shift + S از بخشی از صفحه عکس بگیربا
Ctrl + L مستقیم برو روی نوار آدرسبا
Ctrl + F داخل هر صفحه دنبال کلمه بگردبا
site: فقط داخل یک سایت جستوجو کنبا علامت نقلقول، عبارت دقیق رو در گوگل پیدا کن
با
filetype:pdf فقط فایل PDF جستوجو کنبا
Ctrl + Backspace یک کلمه کامل رو پاک کنبا
Alt + Tab سریع بین برنامهها جابهجا شو❤2🔥1
🌐 ۷ سایت برای پیدا کردن API و دیتای آماده برای پروژه:
Public APIs → لیست
APIهای رایگان
JSONPlaceholder → API
فیک برای تمرین
Fake Store API → دیتای فروشگاه
Open-Meteo → API آبوهوا
REST Countries → اطلاعات کشورها
PokeAPI → دیتای Pokémon
The Movie Database → دیتای فیلم و سریال
🔥 دیگه برای هر پروژه لازم نیست خودت از صفر دیتای تست بسازی.
📌 Save
کن؛ برای پروژه بعدی به کارت میاد.
Public APIs → لیست
APIهای رایگان
JSONPlaceholder → API
فیک برای تمرین
Fake Store API → دیتای فروشگاه
Open-Meteo → API آبوهوا
REST Countries → اطلاعات کشورها
PokeAPI → دیتای Pokémon
The Movie Database → دیتای فیلم و سریال
🔥 دیگه برای هر پروژه لازم نیست خودت از صفر دیتای تست بسازی.
📌 Save
کن؛ برای پروژه بعدی به کارت میاد.
❤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
📌 حتماً ذخیره کن؛ یه روز به کارت میاد!
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
🔥2
خیلی از مسیرهای سالم رشد عمدتاً هیجانانگیز نیستن. و اکثر روزها ممکنه تکراری و عاری از دستاورد مهیج زودبازده باشن. اما اگه بتونی اینا رو دووم بیاری و مستمر طی کنی، از ۹۰٪ مردم که اغلب دنبال هیجان میدوئن حسابی جلو میافتی و به جاهای خیلی خوبی میرسی.
❤9