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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
for (var i = 0; i < 3; i++) { setTimeout(() => console.log("Hello"), 0); }
کد بالا چند بار Hello رو چاپ می‌کنه؟
Anonymous Quiz
8%
1 بار
25%
2 بار
46%
3 بار
21%
هیچ‌کدام
💻 اولین قانون برنامه‌نویسی: از ارورها نترس! 😄

اگر برنامه‌نویسی می‌کنی، دیر یا زود با این صحنه روبه‌رو می‌شی:
🔴 Error!
اما یه نکته مهم رو یادت باشه:
ارور یعنی شکست خوردی؟ نه!

ارور یعنی کامپیوتر داره بهت می‌گه کجای کارت نیاز به بررسی داره.

هر برنامه‌نویسی، حتی حرفه‌ای‌ترین‌ها، هر روز با خطا و باگ سروکله می‌زنن.

تفاوت یک برنامه‌نویس مبتدی و حرفه‌ای این نیست که یکی ارور می‌بینه و دیگری نه؛

🔥 تفاوتشون اینه که برنامه‌نویس حرفه‌ای بلد شده ارور رو بخونه، علتش رو پیدا کنه و حلش کنه.

پس دفعه بعد که با یک ارور روبه‌رو شدی، فرار نکن! 😎

📌 ارور دشمن تو نیست؛ یکی از بهترین معلم‌های توئه.
4🔥1
آموزش برنامه نویسی فرانت اند
بچه‌ها، یه سری تبلیغات خودِ تلگرام داخل کانال می‌ذاره. اینا همشون کلاهبرداریه، حواستون باشه. در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
بچه‌ها، یه سری تبلیغات خودِ تلگرام داخل کانال می‌ذاره.
اینا کلاً کلاهبرداریه، حواستون باشه.
در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
2🔥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

📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
4
🚨 ۵ چیزی که هر Front-End Developer باید درباره API بدونه:

🔹 GET → گرفتن اطلاعات
🔹 POST → ساخت اطلاعات جدید
🔹 PUT → جایگزینی کامل اطلاعات
🔹 PATCH → ویرایش بخشی از اطلاعات
🔹 DELETE → حذف اطلاعات
اما یه نکته مهم:

فقط بلد بودن fetch()نشون نمیده که API رو کامل بلدی !

Status Code
، Error Handling،
Authentication
و Loading State
رو هم باید بلد باشی.

📌 Save
کن؛ توی پروژه به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
5
💼 یه پروژه معمولی داری و می‌خوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟

این Prompt رو امتحان کن:

Act as a Senior Front-End Engineer and a Technical Recruiter.

I will describe my current project.

Analyze it and suggest features that would make the project demonstrate real-world engineering skills.

Prioritize features that demonstrate:
- Complex state management
- Authentication and authorization
- API integration
- Error handling
- Performance optimization
- Responsive design
- Accessibility
- Testing
- Real-world business logic

Avoid generic features that only make the project look bigger.

For each feature, explain what skill it demonstrates and why a recruiter would care.

Project:
[DESCRIBE PROJECT]


🔥 به‌جای اینکه پروژه‌ات فقط «قشنگ» باشه، کاری کن مهارتت رو ثابت کنه.
4
سوال مصاحبه JavaScript
console.log(NaN === NaN);
خروجی کد بالا چیست ؟
Anonymous Quiz
44%
true
31%
false
15%
undefined
11%
خطا
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره

یک Function خیلی بزرگه
یک کد چند بار تکرار شده
اسم متغیرها نامفهومه
شرط‌های تو در تو زیادن
تغییر یک چیز چند فایل رو خراب می‌کنه
یک فایل هزاران خط شده
Function چند کار مختلف انجام میده
کامنت‌های عجیب برای توضیح کد لازم شده
حذف یک Feature خیلی سخت شده
خودت از خواندن کد می‌ترسی

📌 Refactor
یعنی بهتر کردن ساختار کد، بدون تغییر رفتار اصلی برنامه.

#CleanCode #Refactoring #Programming #Developer #کدنویسی
3🔥1
📦 کتابخونه React | Framer Motion

می‌خوای انیمیشن‌های حرفه‌ای بسازی؟

Framer Motion تقریباً هر چیزی که بخوای رو
با چند خط کد انجام می‌ده.

Fade
Slide
Drag
Layout Animation

📌 انتخاب اول خیلی از پروژه‌های مدرن React.
آموزش SQL رایگان از صفر تا کوئری‌نویسی | PDF فارسی کاربردی


قیمت دوره رایگان!

برای ثبت نام و دریافت 👇🏻

https://codelines.ir/course/sql-practical-commands
4
const a = [1, 2, 3];

const b = a;

b.push(4);

console.log(a);
🔥 ۵ افزونه 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
4🔥1
برای شروع برنامه‌نویسی فرانت اند و طراحی سایت، اصلاً نیازی نیست که:

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

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

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

🚀 پشتکار، پشتکار، پشتکار
همین کافیه تا بتونی وارد دنیای فوق‌العاده‌ی برنامه‌نویسی بشی! 🌈
7🔥1🫡1
چقدر طول می‌کشه برنامه نویسی فرانت‌اند و طراحی سایت رو یاد بگیرم؟

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

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

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

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

ولی من دقیقاً همه اون چیزایی که واقعاً نیاز داری رو بهت گفتم.
5
💰 ۱۰ مهارتی که درآمد یک Front-End Developer را بیشتر می‌کند

🚀 تسلط کامل بر JavaScript
⚛️ یادگیری عمیق React (یا Next.js)
🌐 کار با REST API و GraphQL
📱 طراحی Responsive و Mobile-First
بهینه‌سازی Performance سایت
🛠️ تسلط بر Git & GitHub
🧪 آشنایی با Testing (Jest, Cypress)
🎨 درک اصول UI/UX
🤖 استفاده از ابزارهای هوش مصنوعی برای افزایش سرعت توسعه
💼 ساخت Portfolio قوی با پروژه‌های واقعی

💡 فقط کدنویسی کافی نیست؛ ترکیب مهارت فنی، پروژه‌های واقعی و یادگیری مداوم، بیشترین تأثیر را روی درآمد یک Front-End Developer دارد.
4
سوالی که خیلی‌هاتون توی پیوی ازم پرسیدید:

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

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

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

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

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

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

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

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