سلام بر شما زیبایان خفته😎🙋🏻‍♂️
#first_message

#about_channel

خب اینجا من میخوام:
⚪️ از تجربیات یکی دوساله و شبانه روزیم تو مسیر یادگیری و کسب درآمد توی فرانت اند بگم

⚪️ نقشه راه کامل با جزئیات بدم برای کسایی که اول راهن

⚪️ مسائل و مشکلات رایج رو حل کنم

و در نهایت کنار شما باشم تا باهم بتونیم از تجربیات هم استفاده کنیم❤️🔥

#about_me

درباره ی خودم اگه بخوام براتون بگم،
من محمد عرفان قدوسی هستم که همه عرفان صدام میزنن، رشتم کامپیوتر هست
قبل از برنامه نویسی ۵ - ۶ سال کار گرافیکی انجام میدادم ولی به دلایلی تغییر مسیر دادم و اومدم سمت برنامه نویسی😎
حدود ۲ سال شبانه روزی تلاش کردم چون خیلی برام مهم بود که نتیجه های خیلی خوبی از این مسیر بگیرم حالا که کار گرافیکی رو رها کردم!
خیلی چیزارو امتحان کردم
پایتون
دارت - فلاتر
C
C#
جاوا
و نهایتا قلابم به جاوا اسکریپت گیر کرد😎🔥

الانم خودم چند تا شرکت همزمان کار میکنم و به شماهم میخوام کمک کنم که نتیجه های خوب بگیرید از این مسیر

اول از همه بهتون بگم که محتوای این کانال فعلا قابل سیو کردن نیست و چنل پرایویت هست، اگه دوست یا آشنایی دارید که فکر میکنید این محتوا میتونه به پیشرفتش کمک کنه حتما بهم بگید تا ادش کنم داخل کانال:
@erfundev

و اینکه تو هر مرحله با من میتونید در ارتباط باشید، سوالی داشتید بپرسید، باهم داخل گوگل میت جلسه میذاریم یا توی anydesk میام حل میکنم مشکلاتتونو

#road_map
اول از همه میخوام واسه دوستانی که تازه شروع کردن یه مسیر مشخص کنم که از روش مرحله به مرحله پیش برن تا زودتر به درآمد اولشون برسن

1. Html
2. Css
3. Javanoscript (intermediate)
4. Git/github
5. React.js (intermediate)
6. Tailwindcss
🔴 توی این مرحله شما باید یه سری پروژه نمونه (که بهتون میگم) واسه خودتون بزنید و یه رزومه (که اونم بهتون میگم چطوری) برای خودتون درست کنید و به عنوان junior frontend developer واسه جاهای مختلف بفرستید😎🔥

از اینجا به بعد دیگه وارد سطح mid-level میشید:
6. Typenoscript
7. Javanoscript (advanced)
8. React(advanced)
9. Next.js -> page router
10. Next.js -> app router
و یه سری کتابخونه های ریکت که خیلی مهمن:
__ framer-motion
__ MUI
__ react-hook-form
__ styled-components
__ redux-toolkit
__ zustand
__ react-query
و کتابخونه های اعتبار سنجی:
__ ZOD (تو سطح حرفه ای این یکی استفاده میشه)
__ YUP

و css که راحت و راحت تر میشه:
__ shadcn ui
__ chakra ui
__ daisy ui (این یکی سازندش ایرانیه ها😎🇮🇷)
__ styled-jsx
__ styled-components

البته خودمونیم از این کتابخونه های css من زیاد استفاده نمیکنم وقتی tailwind به اون قدرتمندی هست!
ولی بعضی وقتا ادم حالشو نداره😂

و پروژه های خفن که قطعا باید با اینا کانفیگ بشه:
__ eslint
__ prettier
__ husky

و اینایی که یکم پیشرفته ‌س و نزدیک تبدیل شدن به یه سنیوره:
__ web socket
__ pwa
__ manifest.json
__service workers

در نهایت واسه سطح senior:
__ SOLID principles
__ design patterns
__ performance optimization
__ clean code rules
__ data structure
__ algorithms
و البته دنیایی از تجربه

#resources
خب بریم واسه منابع و لینکا و دوره هایی که خودم استفاده میکنم و واقعا بهم تو این مسیر کمک کرده:

🔵 اول از همه html :
https://holosen.net/product/html-css-course/
بچه ها این یه دوره html css هست
که فقط html رو ببینید
واقعا واسه css دوره خوبی نیست...

🔵 واسه css:
__ دوره css جامع frontcast.ir عالیه! که در ادامه اکانتمو میذارم براتون برید لاگین کنید و استفاده کنید

🔵 واسه js:
https://developer.mozilla.org/en-US/
__سورس اول خودم سایت mdn

__بعدش دوره جامع جاوا اسکریپت فرانت کست(میذارم اکانتمو توی پیام بعدی)

__بعدش دوره جاوا اسکریپت sabzlearn
که وااااقعا کامله!!
قشنگ سطح بندی شده و با یه بیان خیلی خوب میگه
ولی بدونید که زمان خیلی زیادی ازتون میگیره و خیلی از‌ مطالبی که‌ میگه هیچوقت به کارتون نمیاد واقعا

🔵 واسه ریکت:
__ نئون لرن یه دوره رایگان ریکت داره ۷ ساعته داخل چنل یوتیوبش:
https://youtu.be/HVifx7Sy6UA?si=auswxhWvnBeDRegE
فوق العادس ولی یکم قدیمیه
مثلا واسه react-router-dom داره ورژن قبلی رو میگه که ۵ هست
ولی بعدش خودش یه ویدیو گذاشته و ورژن ۶ رو آموزش داده

__ بعد چنل web dev simplified
__ و بعدشم چنل dave gray

__ فرانت کست هم دوره خوبی راجبش داره، ریکت و ریداکس روآموزش داده به زبان خیلی ساده

🔵 واسه tailwind:
راستش من هیچ منبعی بهتر از داکیومنتش پیدا نکردم!
https://tailwindcss.com/docs/installation
از مرحله نصب کردن و راه انداختنش توی همه ی پروژه ها و فریم ورکا و کتابخونه ها گفته تا تک به تک پروپرتی های css!

خیلی راحت هرچی خواستین سرچ کنید داخلش
مثلا transition
سرچ‌ کنید
خودش مستقیم میبرتتون داخل صفحه ای که خیلیی خوب همه چی رو براتون گفته

🔵 واسه تایپ اسکریپت:

__ دوره فرانت کست هست
__ چنل dave gray یه دوره توپ داره
__ دوره codeyad هم هست ولی رایگان نیست

🔵 واسه ریکت و جاوا اسکریپت پیشرفته بنظرم سرچ کنید ببینید چی پیدا میکنید و بیان کیو بیشتر از همه دوست دارید
ولی خلاصه بهتون بگم اینطوریه که باید مطالب بیشتر و خفن تری از js یاد بگیرید مثل اینا:
+ Closure
+ Deep copy and shallow copy
+ OOP
+ ES6 + ES7 + ES8
+ event loop
+ Memory heap
+ prototypes
+ HOF
این مطالبو خودمم براتون آموزش میذارم تو همین چنل در آینده نزدیک

🔵 واسه ریکت پیشرفته هم:
+ react with typenoscript
+ virtual dom
+ memoization
+ code splitting

🔵در نهایت next.js:
__ خفن ترین داکیومنت رو داره اول از همه!
Nextjs.org
__ دوره فرانت کست هم خیلی خوبه مطالب رو عالی و کامل گفته

واسه app router هم:
__ هم داکیومنت خیلی خفنش🔥
__ هم دوره ی فوق العاده dave gray داخل چنلش

#youtube
اینم چنل dave gray
https://youtube.com/@DaveGrayTeachesCode?si=zixC9_wSnpl6B7C1

از قسمت پلی لیستاش میتونید به محتوایی ک گفتم دسترسی داشته باشید

#youtube
چنل web dev simplified
واااقعا خفنه!
اکثر چیزای توی توسعه وب رو آموزش داده کافیه یه چرخ توی چنلش بزنید به حرفم میرسید🔥❤️

https://youtube.com/@WebDevSimplified?si=tMw3e-aJy5G1WrTW

#youtube

و به مرحله next.js و typenoscript که رسیدید‌ این چنل خیلی خوبه چیزای واقعا با ارزشی رو گفته:
https://youtube.com/@ByteGrad?si=fIkUOn7Bnqc-_ED8

#youtube

در نهایت امیر عظیمی خفن که سال هاست به عنوان senior software engineer توی انگلستان، لندن زندگی و کار میکنه و از تجربیاتش توی این چنل میگه. در کنارش کلی چیزای فنی هم داره

مسائلی مثل SOLID و design patterns رو میتونید ازش یاد بگیرید:

https://youtube.com/@ParsclickTV?si=I0V_XgyDWKYzBI9P