it-forward / it-forward.github.io Goto Github PK

Namunalardan foydalanib:

Menimcha, mana bu package'ni ishlatamiz: https://yarnpkg.com/package/gh-pages

Qo'shimcha material: https://dev.to/javascripterika/deploy-a-react-app-as-a-github-user-page-with-yarn-3fka

Yo'l xaritasi uchun alohida sahifa ochish va boshlang'ich dizaynini HTML+CSS'da yasash.
Duolingo yo'l xaritasidan foydalansangiz bo'ladi.

Reactni TypeScript bilan birgalikda create-react-app'dan foydalanib o'rnating.

Yo'l xaritasida endi HTML va CSS o'rniga CS50 va Odin projectlarni kelitirib o'tish kerak.

Hello World matnini faqat "Hello"ga o'zgartiring.

Ustoz-shogird daraxti va boshqa joylardan a'zo profili ustiga bosganda boradigan sahifani yaratishimiz kerak.
Ichida bo'lishi kerak qismlar:

• rasm
• ism-familiya
• o'zi haqida qisqacha
• bog'lanish uchun github, linkedin va boshqa linklar
• ustozi kim ekanligi
• shogirdlari soni: bevosita va bilvosita (shogirdlarining shogirdlari soni). Shu va tepadagi qism uchun ustoz-shogir daraxtiga borish uchun link qo'shish kerak
• portfoliosi: qilgan loyihalari skrinshot, nomi, Github linki va Netlify/Vercel linki

Boshlanishiga shablonimiz muallifi (Figmadagi 👋🏼 Hello sahifasi) va lending page stilidan foydalansangiz bo'ladi:

Roadmap sahifasi tayyor bo'lib qoldi. Shunga endi data yaratishimiz kerak.
Ma'lumotni hozirgacha o'rgangan texnologiyalar va Frontend Roadmap reposidan foydalanishimiz mumkin:

https://github.com/kamranahmedse/developer-roadmap

Yangi logotipni kerakli joyga ishlatib chiqish.

Master branch'da turib loyihani run qilganda, terminalda shunaqa warning'lar chiqmoqda. Warning'larni deyarli hammasi bir xil bo'lib, biri useEffect funksiyasida kuzatilishi kerak bo'lgan state unitib qoldirilganligi haqida bo'lsa, qolganlarida loyihada ishlatilmayotgan o'zgaruvchilar haqida.

Ustoz-shogird daraxti uchun alohida sahifa ochish va boshlang'ich dizaynini HTML+CSS'da yasash.

Daraxtning o'zini chizish uchun birorta JS package ham tanlash. Masalan,

• https://reactflow.dev/
• https://github.com/daniel-hauser/react-organizational-chart
• https://d3js.org/

Mana bu maqolada ayni biz qidirgan narsani qilib ko'rsatgan ekan: https://naveenda.medium.com/how-to-make-the-employee-hierarchy-chart-using-react-d48c7ca440c3

Ko'rinishi taxminan mana bu yerdagi namunaga o'xshasa yaxshi: https://balkan.app/OrgChartJS

Landing Page skeleti tayyor. Lekin endi ichiga haqiqiy ma'lumotlarni yozib shiqish kerak.

Slayd linki: https://docs.google.com/presentation/d/1fFfkejxL1EmHM4099U6Hi-gToz-MgFmmfgNgMwmZY9k/edit?usp=sharing

Quyidagi bo'limlarni README.md faylda yozish:

• "Pay IT Forward" loyihasining asosiy maqsadi
• O'qitish va "to'lov" tartibi
• Nimalarni o'rgatamiz
• Kursni bitirish sharti: ishga joylashib oylik olgandan keyingina
• Hozirgi jamoa: ustoz va shogirdlar
• Shogird bo'lish uchun talablar: ingliz tilini bilish, qiziquvchanlik, mas'uliyatli bo'lish va hk.

Buni hal qilganingizdan keyin quyidagilar ishlashi kerak:

• Bosh sahifadan istalgan boshqa sahifaga o'tish
• Yo'l xaritasidan har bir dars sahifasiga o'tish
• Ustoz-shogird daraxtidan har bir a'zo profiliga o'tish