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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
خروجی‌ کد بالا چیه؟
Anonymous Quiz
6%
1
16%
2
35%
3
43%
Undefined
🔐 JWT


اگه تا حالا وارد یه سایت یا اپ شدی و دیگه لازم نبوده هر بار دوباره لاگین کنی، احتمال زیاد پشت صحنه از JWT استفاده شده.

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

JWT
از ۳ بخش تشکیل شده:

🔹 Header: نوع توکن و الگوریتم امضا
🔹 Payload: اطلاعاتی مثل شناسه کاربر و زمان انقضا
🔹 Signature: مطمئن می‌کنه توکن دستکاری نشده.

⚠️ فقط یادت باشه اطلاعات داخل Payload رمزگذاری نشده؛ فقط Encode شده، پس اطلاعات حساس داخلش نذار.

#JWT #Backend #API #Security
⚡1❤1
رشد کردن همین قدر سادس 😇
❤5🔥1💯1
🤔 null و undefined
چه فرقی دارن؟

این دوتا خیلی شبیه هم به نظر میان، ولی
یکی نیستن!

let name;

console.log(name);


خروجی:
undefined

یعنی هنوز هیچ مقداری به متغیر ندادی.
حالا اینو ببین:

let name = null;


اینجا خودت عمداً گفتی که این متغیر فعلاً هیچ مقداری نداره.

💡 خلاصه:
✅ undefined = هنوز مقداردهی نشده.

✅ null = عمداً خالیه.

همین تفاوت کوچیک، موقع کار با APIها
خیلی مهم میشه.

#JavaScript #Frontend
❤1👏1
🤔 Library
و Framework چه فرقی دارن؟


خیلی ساده:

🔹 Library → تو تصمیم می‌گیری کِی ازش استفاده کنی.
🔹 Framework → ساختار و جریان کلی پروژه بیشتر توسط Framework
مشخص میشه.

مثلاً در دنیای Front-End:
React
معمولاً به‌عنوان Library شناخته میشه،

در حالی که Next.js یک Framework بر پایه React محسوب میشه.

📌 این تفاوت رو برای مصاحبه هم بلد باش.

#React #NextJS #JavaScript #فرانت_اند #برنامه_نویسی #FrontEnd
❤1🔥1
REST API
یه استاندارد برای ارتباط بین فرانت‌اند و بک‌اند هست.


وقتی React یا هر فرانت‌اند دیگه‌ای اطلاعاتی مثل محصولات یا اطلاعات کاربر رو می‌خواد، معمولاً از طریق REST API درخواست می‌فرسته و جواب می‌گیره.
❤3👍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

📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
❤1
🚨 اگه Front-End کار می‌کنی، این اشتباه CORS رو باید بشناسی!

وقتی Front-End و Backend روی Originهای متفاوت باشن، مرورگر ممکنه درخواست رو بلاک کنه.

مثلاً:
frontend.com → api.com   


و یهو می‌بینی:
❌ CORS Error

نکته مهم:

CORS
معمولاً مشکل Backend/Server
Configuration

هست، نه اینکه JavaScript
تو خراب باشه!

؛ این خطا دیر یا زود سراغت میاد.
❤1
آموزش Tailwind CSS 4 (تیلویند) از صفر تا پروژه | PDF فارسی

آموزش Tailwind CSS 4 به
زبان ساده در یک PDF فارسی ۱۶۱ صفحه‌ای؛

نصب با Vite و Next.js، Flex و Grid، Responsive، React، Dark Mode و ۳ پروژه واقعی.

قیمت ۳۹۸ هزار تومان

ثبت نام
❤2👍1
console.log([] == false);
خروجی کد بالا چیست؟
Anonymous Quiz
29%
true
51%
false
14%
undefined
6%
خطا
افزونه‌های ضروری VS Code

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

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

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

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

⭐ Auto Rename Tag تغییر همزمان تگ‌های HTML

⭐ Thunder Client تست API داخل VS Code
🔥2
برای شروع برنامه‌نویسی فرانت اند و طراحی سایت، اصلاً نیازی نیست که:

❌ چیزی از کامپیوتر یا برنامه‌نویسی بدونی
❌ مدرک دانشگاهی داشته باشی
❌ رشته‌ت کامپیوتر یا مرتبط باشه (حتی اگه معماری خوندی، میتونی برنامه نویس بشی!)
❌ ریاضی‌ت خیلی قوی باشه (فقط همون چهارتا عمل اصلی کافی‌ه ➕➖✖️➗)
❌ به زبان انگلیسی مسلط باشی

🎂 سن هم اصلاً مهم نیست
چه ۱۰ سالت باشه، چه ۵۰ سال، مهم فقط پشتکاره 💪🔥

💻 فقط کافیه بلد باشی سیستم رو روشن و خاموش کنی...
بقیه‌ش با منه 😉✨

🚀 پشتکار، پشتکار، پشتکار
همین کافیه تا بتونی وارد دنیای فوق‌العاده‌ی برنامه‌نویسی بشی! 🌈
❤3🔥1
❓ سوالی که خیلی‌هاتون توی پیوی ازم پرسیدید:

«از برنامه‌نویسی فرانت‌اند و طراحی سایت چقدر می‌تونم درآمد داشته باشم؟» 💸💻

✅ جوابش اینه:
کاملاً بستگی به خودت داره که چقدر مهارت داری و چطور بتونی ازش درآمد بسازی! ولی بذار یه تصویر کلی بهت بدم 👇

💼 کمترین قیمت پروژه‌هایی که می‌تونی تو این حوزه بگیری، حدوداً از ۲۵ تا ۷۰-۸۰ میلیون تومن هست (برای هر پروژه!) 💰

👨‍💼 یا اگه بخوای توی شرکت استخدام بشی، معمولا از همون اول، حداقل ۳۰میلیون حقوق پایه بهت می‌دن. (و این فقط شروع کاره!) 🚀

🧠 پس اگه واقعاً یاد بگیری و پشتکار داشته باشی، درآمد خیلی خوبی می‌تونی بسازی. فقط کافیه مسیر رو درست بری ...
🔥2❤1👍1🫡1
⏳ چقدر طول می‌کشه برنامه نویسی فرانت‌اند و طراحی سایت رو یاد بگیرم؟

✅ اگه روزی ۱ تا ۲ ساعت ویدیو ببینی و تمرین کنی، توی حداقل ۴ ماه می‌تونی اولین پروژه‌تو بگیری یا استخدام شی! 🚀

👨‍💼 اگه دانشجویی یا شاغل، و فقط روزی ۱ ساعت وقت داری، با یه برنامه‌ریزی درست می‌تونی توی‌ ۵ ماه به درآمد برسی 💰

🧠 من اینجام تا زمانم رو در اختیار تو بذارم
تا بتونی بدون سردرگمی و خیلی سریع، برنامه‌نویسی رو یاد بگیری 🚀

❌ اگه بخوای خودت تنهایی شروع کنی و این‌ور اون‌ور آموزش ببینی،
احتمالش زیاده که پراکنده یاد بگیری و ماها یا حتی سال‌ها طول بکشه تا مسلط شی!

✅ ولی من دقیقاً همه اون چیزایی که واقعاً نیاز داری رو بهت گفتم.
❤2🔥1🙏1👨‍💻1
🚀 چطور پروژه بگیرم؟ از کجا کار پیدا کنم؟

👨‍💻 اول از همه می‌تونی یه رزومه ساده و مرتب درست کنی و بفرستی برای شرکت‌های نرم‌افزاری

📌 از طریق سایت‌های استخدامی مثل:
✅ جابینجا
✅ جاب‌ویژن
✅ آی‌استخدام و....

📦 اما اگه بخوای پروژه‌ای و مستقل کار کنی (یعنی فریلنسینگ)، اینم راهشه:

🌐 سایت‌های ایرانی:
پونیشا، کارلنسر، انجام‌میده و....

💵 سایت‌های خارجی (درآمد دلاری):
Fiverr، Upwork، Freelancer

🖇خیلی سایت های دیگه هستن نخواستم پست طولانی بشه با یه سرچ ساده میتونی پیداشون کنی

📍برای برنامه نویسی کار به شدت زیادهه پس غصه ی این مورد رو اصلاا نخور
❤2👍1🔥1
🎯 از کجا برنامه‌نویسی فرانت‌اند و طراحی سایت رو شروع کنم؟

ببین 👇 برای شروع باید بری سراغ چیزایی که توی همه آگهی‌های استخدام و پروژه‌ها ازت می‌خوان:

💡 پایه‌ها:
✅ Html Css

✅ JavaScript

اینا دو تا پایه اصلی ساخت هر صفحه‌ی وب هستن! باید خوب بلدشون باشی.

بعدش چی؟
باید بری سراغ یه کتابخونه مدرن که بازار کارش داغه و یادگیریش آسونه 😍

🔥 پیشنهاد من: React JS
توسعه داده‌شده توسط فیسبوک ✅
اینستاگرام هم باهاش نوشته شده! 📱

😎 نگران نباش، من همه‌ی اینارو با کلی تمرین، پروژه‌ی واقعی و آموزش حرفه‌ای بهت یاد می‌دم. قراره حسابی خفن شی! 🚀
❤3🔥1
📌برای یادگیری برنامه نویسی فرانت اند پیش نیازی لازمه داشته باشم؟؟

🔎هیچی نمیدونم از برنامه نویسی فرانت اند چیکار کنم منم میتونم؟؟



❗️هیچ پیش‌نیازی لازم نیست!

برای شروع برنامه‌نویسی، لازم نیست هیچی بلد باشی.

من همه‌چی رو از صفر مطلق یادت می‌دم

هر چیزی که لازم داری، از پایه گفتم، حتی نرم‌افزارایی که باید نصب کنی رو مو به مو توضیح دادم.

✅ تنها چیزی که باید بلد باشی اینه:
چطور سیستم‌تو روشن و خاموش کنی!

پس نگران هیچی نباش، فقط شروع کن 💪
❤2👍1
❓ از کجا بفهمم برای برنامه‌نویسی ساخته شدم؟

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

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

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

✋ هیچ‌کس از اول نمی‌دونه واسه چی ساخته شده،
ولی کسی که امتحان نکنه، هیچ‌وقت نمی‌فهمه! 🚀
❤3👏1
بچه هایی که امروز توی جشنواره پکیج جامع برنامه نویسی فرانت اند با تخفیف ۶۷ درصدی ثبت نام کردن از روی سایت

برای بعضی هاتون لایسنس تولید نشده

کلمه ی لایسنس رو بفرستید پشتیبانی تا دسترسی پکیج براتون ارسال بشه


@codelines_support
❤15🙏1🫡1
❓ فرانت‌اند بهتره یا بک‌اند؟

🎯 اگه از صفر می‌خوای شروع کنی، زود به درآمد برسی و دلسرد نشی،
بدون شک: فرانت‌اند انتخاب بهتریه!

چرا؟ 👇
✅ یادگیری آسون‌تر
⏱️ زمان کمتر
💼 فرصت شغلی بیشتر (تقریباً تو همه آگهی‌ها HTML, CSS, JS رو می‌خوان)

🧠 وقتی اینا رو خوب یاد گرفتی و تجربه جمع کردی،
برو سمت بک‌اند
اون‌وقت می‌تونی فول‌استک دولوپر بشی 💻⚙️

💰 و درآمدت؟ راحت چند برابر میشه!

🧩 پس عجله نکن، هوشمندانه شروع کن:
فرانت‌اند اول → بک‌اند بعد
هم مسیر رو بلدی، هم جیبت پرتره 😉✨
❤2