Front-End dasturlash (Mohirdev)

15 dan ortiq loyihalar asosida frontend dasturlash asoslarini amaliy tarzda o'rganing. Raqobatbardosh bilim, tajriba va portfoliongiz bilan ishga kirish imkoningizni oshiring.
 

 

Kurs tarkibi

 

 

1 Kirish

02.01. Kurs taqdimoti
02.02. Muallif haqida
02.03. Kursda o'rgatiladigan texnologiyalar
02.04. Kurs davomida tuziladigan loyihalar
02.05. Kurs oxirida qanday natijani maqsad qilish mumkin?
02.06. Frontend va umuman dasturlashni o'rganishdagi ustunlar, muhim nuqtalar
02.07. Veb dasturlash sohalari bilan tanishuv
02.08. Sayt tuzilishidagi bosqichlar ketma-ketligi
02.09. Sayt tuzish usullari va qachon qay biridan foydalanish kerak?
02.10. Onlayn kurs sayti uchun texnik talablarni tayyorlash, brainstorming
02.11. Onlayn kurs sayti qoralama dizaynini Balsamiqda tuzish
02.12. Mohirdevga xush kelibsiz
02.13. Ommaviy oferta bilan tanishib chiqing
02.14. Yopiq guruhga qo'shilish
02.15. Darslarni kompyuterda ko'rish
02.16. Darslarni telefonda ko'rish
02.17. Savol so'rash bo'yicha qo'llanma

 

 

 

2 Boshlang'ich tushunchalar

03.01. Google Chromeni o'rnatish va undagi sinxronizatsiyani yoqish
03.02. Visual Studio Codeni o'rnatish va sozlash. Muhim dasturlarni taskbarda qotirib qo'yish
03.03. Skrinshot olish uchun Lightshot dasturini o'rnatish va ishlatish
03.04. Loyihaning fayl va papkalarini to'g'ri tartiblash, Live Server kengaytmasini o'rnatish
03.05. Elementlar yozilishi qoidasi. Matnga oid elementlar
03.06. Tuzilmaviy elementlar. html, head, body, DevTools
03.07. Havola bilan ishlash
03.08. Boshqa HTML fayllarga havola bilan ulanish
03.09. Kodni HTML Validatorda tekshirish
03.10. Loyihani arxivlab (zip) yuborish
03.11. Verstka sohasining eng yaxshi va yomon tomoni
03.12. Figma bilan tanishuv. Akademnashr maketi. 1-katta vazifa ta'rifi
03.13. Akademnashir maketiga link
03.14. Akademnashr saytini tuzish bo'yicha yuborilgan ishlarni tahlil qilish
03.15. Akademnashr saytini tuzish vazifasi yechimi. Kod yozishdagi samaradorlikni oshirish bo'yicha tavsiyalar
03.16. Boshlang'ich tushunchalar

 

 

 

 

3 Ro'yxat, rasm va guruhlash

04.01. hr va br elementlari
04.02. Ro'yxatlar bilan ishlash va vazifa
04.03. Ro'yxatlardan o'rganganlarimizni Akademnashr maketiga tatbiq qilish
04.04. div elementi va guruhlash
04.05. div elementini Akademnashr maketiga tatbiq qilish
04.06. HTML5da qo'shilgan bo'lim elementlari - header, nav, main, section, footer va kichik vazifa
04.07. HTML5 bo'lim elementlarini Akademnashr maketiga tatbiq qilish
04.08. Sahifaga rasmlarni joylash. Rasmlar formatlari farqlari
04.09. Papka ichidagi rasmni joylash o'zi qanday ishlaydi
04.10. Radiusli burchakli rasmlarni eksport qilish va rasmga width va height berishning ahamiyati
04.11. Rasmlar hajmini optimallashtirish. TinyPNG instrumenti
04.12. Qachon rasmlarni img emas, svg kodi bilan joylanadi? SVG hajmini optimallashtirish.
04.13. Rastr rasmlarni retina ekran uchun moslashtirish
04.14. Squoosh instrumenti. Squoosh yordamida rasm hajmini optimallashtirish va retina uchun 2x rasmlarni chiqarish
04.15. Picsum Photos yordamida sahifaga ixtiyoriy rasmlarni olib kelish
04.16. Placeholder.com dan ixtiyoriy rasmlarni olib kelish
04.17. Ixtiyoriy sondagi so'zlardan iborat vaqtinchalik matn generatsiya qilish
04.18. Rasmlar asosida Akademnashr maketi bo'yicha vazifa ta'rifi
04.19. Akademnashr maketiga rasmlar bo'limida o'rgangan bilimlarni tatbiq qilish
04.20. Ro'yxat, rasm va guruhlash

 

 

 

 

4 Git, GitHub va Netlify

05.01. GitHub o'zi nima
05.02. GitHubda ro'yxatdan o'tish
05.03. Kompyuterdan Gitni va unga bog'langan login-parollarni o'chirib tashlash
05.04. Kompyuterga Gitni o'rnatish va undagi global sozlamalarni yangi profilga moslashtirish
05.05. Git asoslari
05.06. Git asoslarini demo loyiha asosida ishlatish
05.07. Akademnashr loyihasini GitHubga joylash
05.08. Netlify bilan tanishuv. Akademnashr loyihasini Netlifyga joylash
05.09. Git, GitHub va Netlify

 

 

 

 

5 CSSga kirish, tanlovchilar, rang va o'lcham

06.01. CSS asoslari. CSS uchun fayl ochib uni HTMLga ulash va ranglar asosidagi kichik misollar
06.02. CSSda ranglarni RGB formatida berish
06.03. RGBA va shaffof rang bilan ishlash
06.04. Ranglarni HEX formatida berish
06.05. Matnga oid ko'p ishlatiladigan stillar
06.06. CSSda kod ketma-ketligining ahamiyati
06.07. Elementlarga class orqali stil berish, classni nomlashdagi qoidalar
06.08. CSSda selectorlar kuchi. class VS element tanlovchisi
06.09. Ko'p ishlatiladigan class nomlari
06.10. Elementlarga bir nechta class berish. Matnni chap, o'rta va o'ngga keltirish
06.11. Elementlarning eni va bo'yini o'zgartirish
06.12. Rasmlarning object-fit xususiyati
06.13. Akademnashr maketiga CSSdan o'tilgan mavzularni tatbiq qilish bo'yicha vazifa ta'rifi
06.14. Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 1-qism
06.15. Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 2-qism
06.16. Ro'yxatning stillarini o'zgartirish va ota elementga ko'ra boshqa elementni tanlab stil berish
06.17. Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 3-qism
06.18. Akademnashr maketidagi yangi kodlarni GitHubga yuborish va Netlifyga joylash
06.19. CSS asoslari

 

 

 

 

6 CSSda shriftlar va meros bo'lib o'tadigan xususiyatlar

07.01. Shriftlar bilan ishlash. font-family va shriftlar turkumlari
07.02. Web safe shriftlardan foydalanish
07.03. Google Fontsdagi shriftlardan foydalanish
07.04. Google Fontsdagi bir nechta shriftni loyihaga ulash
07.05. Matnga oid global stillarni bodyga berish haqida
07.06. CSSda xususiyatlarning meros bo'lib o'tishi
07.07. Akademnashr maketiga shriftlarga oid CSSni qo'shish bo'yicha vazifa ta'rifi
07.08. Akademnashr maketiga shirftlarga oid CSSni qo'shish vazifasi yechimi
07.09. Vazifa yechimi kodini GitHubga yuborish
07.10. CSSda shriftlar va meros bo'lib o'tadigan xususiyatlar

 

 

 

 

7 CSSda DRY prinsipi va flexbox bilan tanishuv

08.01. Flexboxni o'rganishga tayyorgarlik. CSSda DRY prinsipidan foydalanish kichik misolda
08.02. display flex va justify-content xususiyatlari
08.03. Flexga oid align-items xususiyati
08.04. Akademnashr maketiga flex, justify-content va align-items xususiyatlarini tatbiq qilish
08.05. flex-wrap xususiyati
08.06. CSSda DRY prinsipi va flexbox bilan tanishuv

 

 

 

 

8 Psevdoklasslar, transition, outline, shaffoflik va SVG rangi bilan ishlash

09.01. CSSda psevdoklasslar bilan tanishuv - hover, active, focus va visited
09.02. CSS transition
09.03. outline xususiyati
09.04. opacity xususiyati. opacity VS shaffof rang
09.05. Akademnashr maketiga hover va active holatlar stillarini qo'shish. SVG ikonkalar rangini o'zgartirish

 

 

 

 

9 box-model, GitHubda issuelar, NormalizeCSS va soyalar bilan ishlash

10.01. border xususiyati
10.02. Akademnashr maketi outline stillarini o'zgartirish
10.03. padding xususiyati
10.04. border-radius
10.05. display inline va block farqlari. display inline-block bilan tanishuv
10.06. Akademnashr maketiga padding, border va border-radius xususiyatlarini tatbiq qilish
10.07. Code Review va GitHub repodagi issuelar haqida
10.08. NormalizeCSS haqida
10.09. margin xususiyati bilan tanishuv
10.10. Akademnashr maketiga NormalizeCSS va marginni tatbiq qilish
10.11. Rasmlar tagidagi bo'shliqni olib tashlash va Akademnashr maketiga o'zgartirish kiritish
10.12. margin collapse hodisasi haqida
10.13. marginni qaysi tomondan berish kerak
10.14. Box model va box-sizing tabiiy qiymati haqida
10.15. box-sizing tabiiy qiymatidagi noqulaylik va uni to'g'rilash
10.16. Qachon padding va qachon margin ishlatish kerak
10.17. padding va marginni qisqa usulda yozib tatbiq qilish
10.18. margin auto qiymatining o'ziga xosligi
10.19. container nima va qachon ishlatiladi
10.20. box-shadow va text-shadow xususiyatlari
10.21. Barcha o'rganilgan mavzularni Akademnashr maketiga tatbiq qilish. Saralash final
10.22. Loyiha reposi va Netlifydagi sahifasi

 

 

 

 

10 Amaliyot. "AnsorMed" loyihasi

11.01. AnsorMed maketiga link
11.02. AnsorMed loyihasi. Boshlang'ich holatni tayyorlash, GitHub va Netlifyga joylash
11.03. AnsorMed loyihasi. Loyiha shriftlarini ulash va global oddiy matnlar shrift stillarini berish
11.04. AnsorMed loyihasi. site-header HTML qismi
11.05. AnsorMed loyihasi. site-header stillari
11.06. AnsorMed loyihasi. site-footer to'liq
11.07. AnsorMed loyihasi. hero bo'limi
11.08. AnsorMed loyihasi. services bo'limi
11.09. AnsorMed loyihasi. CTA bo'limini qo'shish. Final
11.10. Loyiha reposi va Netlifydagi sahifasi

 

 

 

 

11 VS Code uchun qo'shimcha kengaytmalar

12.01. VS Code uchun kerakli kengaytmalar
12.02. TODO Tree kengaytmasini o'rnatish

 

 

 

 

12 Manfiy qiymatli margin va flexbox davomi

13.01. Manfiy qiymatli margin
13.02. Rasmlar galereyasini manfiy qiymatli margin yordamida osonroq joylashtirish
13.03. CSSda DRY prinsipidan foydalanish
13.04. flex-direction xususiyati
13.05. flex-grow xususiyati
13.06. flex-shrink xususiyati
13.07. Sticky footer tuzish
13.08. order xususiyati

 

 

 

 

13 N24 sayti amaliyot va form elementlari bilan ishlash

14.01. N24 maketiga link
14.02. N24 saytini tuzish. Global sozlamalar. Site-headerning tepa qismi
14.03. Form asoslari. form, input, label va button elementlari
14.04. Qidiruv formasini va interfaol elementlarning focus stillarini qo'shish
14.05. Sitenav va site-header-banner
14.06. Yangiliklar kartochkalari news-grid HTMLi
14.07. Yangiliklar kartochkalari new-grid stillari. Notifications bo'limi
14.08. N24 sayti. Global yangiliklar bo'limini tuzish
14.09. N24 sayti. Global yangiliklar va sidebar to'liq

 

 

 

 

14 Fonga rasm joylash, kontent va bezak rasmlar, flexga xos muhim masala. Psevdoelementlar

15.01. Fonga rasm joylash - background-image va unga oid xususiyatlar
15.02. Fonga retina rasm joylash
15.03. Qachon img va qachon background-image ishlatish kerak
15.04. Ikonkalarni spanning fon rasmi sifatida joylash
15.05. Bezak ikonkalarni img elementi bilan joylash
15.06. button va flex masalasi
15.07. Psevdoelementlar - before va after

 

 

 

 

15 Qolip repozitoriya va "Articles" maketi amaliyoti

16.01. Articles maketiga link
16.02. Qolip (template) repozitoriya yasash mavzusiga kirish. Demo
16.03. CSS starter qolip repozitoriya yasash
16.04. Qolip repozitoriyadan foydalanish. Articles maketining hero qismini tuzish
16.05. Articles maketi. Shriftlarni ulash. Heroga padding berish
16.06. Articles maketi. So'nggi videolar bo'limi to'liq

 

 

 

 

16 CSS counter va @font-face

17.01. CSSda counter xususiyatidan foydalanish
17.02. Shriftlarni @font-face yordamida ulash. Kirish
17.03. Google Fontsdagi shriftni @font-face yordamida ulash
17.04. Google Webfonts Helper xizmatidan foydalanish

 

 

 

 

17 Form elementlari davomi

18.01. Form elementlari. input takrorlash va select
18.02. Checkbox input, fieldset va legend elementlari
18.03. Radio input
18.04. datalist elementi
18.05. textarea elementi

 

 

 

 

18 N24 amaliyoti. Site-footer, news-list va kontakt sahifasi. Kamchiliklarni to'g'rilash

19.01. N24 maketi. site-footer HTML qismi
19.02. N24 maketi. site-footer stillari
19.03. N24 maketi. news-list sahifasi
19.04. N24 maketi. Kontakt formasi
19.05. N24 maketi. Kontakt ma'lumotlari
19.06. N24 maketi. Qidiruv inputi va notifications-cta fon rasmini joylash

 

 

 

 

19 CSSda prefikslash va minifikatsiya

20.01. CSSda prefikslash
20.02. CSSda minifikatsiya
20.03. Akademnashr va AnsorMed loyihalari stillarini prefikslash va minifikatsiya qilish

 

 

 

 

20 CSSda custom property

21.01. CSS custom property
21.02. CSS custom property. 2-qism
21.03. Akademnashr loyihasiga custom propertylarni tatbiq qilish
21.04. N24 loyihasiga custom propertylarni tatbiq qilish

 

 

 

 

21 "Apple Watch" loyihasi amaliyoti

22.01. Apple watch maketinga link
22.02. Apple Watch loyihasi. Site-header
22.03. Apple Watch loyihasi. Hero
22.04. Apple Watch loyihasi. Features
22.05. Apple Watch loyihasi. Promo va runners

 

 

 

 

22 "Intro form" loyihasi amaliyoti

23.01. Intro form maketinga link
23.02. Intro form loyihasi. Umumiy ishlar va hero
23.03. Intro form loyihasi. Signup form

 

 

 

 

23 "CoffeeRoasters" maketi amaliyoti

24.01. CoffeeRoasters maketiga link
24.02. CoffeeRoasters maketi. Site-header va hero
24.03. CoffeeRoasters maketi. Index-collection
24.04. CoffeeRoasters maketi. Index-features
24.05. CoffeeRoasters maketi. How-it-works
24.06. CoffeeRoasters maketi. Site-footer

 

 

 

 

24 Fonga bir nechta rasm joylash va CSSda gradient rang bilan ishlash

25.01. Fonga bir nechta rasm joylash
25.02. CSSda gradient fon joylash
25.03. Gradient rangli matn stilini berish

 

 

 

 

25 "Dark mode"li sayt tuzish va JavaScript DOM bilan ishlash asoslari

26.01. Dark mode variantli saytcha tuzish
26.02. JavaScript. Kirish
26.03. JavaScript. Sahifadagi elementni topish, nomlash va matnini o'zgartirish
26.04. JavaScript. Event listenerlar bilan tanishuv
26.05. JavaScript. Elementlarga class qo'shish va classni olib tashlash

 

 

 

 

26 CSS transform

27.01. transform xususiyati
27.02. transform xususiyatidagi qiymatlar ketma-ketligi ahamiyati va transform-origin
27.03. transformning perspective qiymati
27.04. CSS transform yordamida oyna ochilishi effektini tuzish

 

 

 

 

27 "Countries" loyihasi amaliyoti

28.01. Countries maketi. Global stillar, shrift va rasmlarni tayyorlash
28.02. Countries maketi. Site-header va SVG kodi intro
28.03. Rasmlarni SVG kod ko'rinishida joylash. SVG rasmning xususiyatlarini CSSda o'zgartirish
28.04. Countries maketi. Site-headerdagi SVG chegarasi rangini sayt temasiga moslashtirish
28.05. Countries maketi. Saytning dark-mode holatini o'chirib-yoqish
28.06. Countries maketi. Filtr
28.07. Countries maketi. Index-countries
28.08. Countries maketi. Index-countries stillari
28.09. Countries maketi. Country-page
28.10. "Countries" maketiga link

 

 

 

 

28 CSSdagi noodatiy tanlovchilar. Checkbox va radioga o'ziga xos stil berish

29.01. inputning valid tanlovchisi
29.02. inputning invalid va placeholder-shown tanlovchilari
29.03. disabled atributi va JS bo'yicha vazifa
29.04. disabled atributi va JS bo'yicha vazifa yechimi
29.05. + va ~ selectorlari qanday ishlaydi
29.06. :checked tanlovchisi
29.07. O'ziga xos stildagi checkbox tuzish
29.08. Checkbox va radioga o'ziga xos stil berish bo'yicha qo'shimcha videolar (ko'rish shart!)

 

 

 

 

29 CSS position xususiyati va u bo'yicha mashqlar

30.01. position xususiyati. static va relative position
30.02. position absolute
30.03. position absolute nimaga nisbatan joylashadi
30.04. Elementlar ustma-ust kelganda tartibini to'g'rilash va z-index
30.05. Position mavzusi bo'yicha mashqlar ta'riflari
30.06. Kir yuvish mashinasi interfeysi mashqi yechimi
30.07. Profil sozlamalari sahifasi mashqi yechimi
30.08. Pricing component with toggle maketiga link
30.09. Pricing component mashqi yechimi. Narxlar qismi
30.10. Pricing component mashqi yechimi. Switchni tuzish
30.11. Pricing component mashqi yechimi. Switch qiymatiga qarab JSda narxlarni o'zgartirish
30.12. Akademnashr, CoffeeRoasters va Countries maketlariga positionga oid yangiliklarni qo'shish
30.13. z-index stacking
30.14. Dropdown menu asoslari
30.15. Mover.uz saytidagi menyuni tuzish
30.16. position fixed
30.17. position sticky
30.18. Modal elementini tuzish
30.19. overflow xususiyati va position absolute
30.20. CSSda uchburchak yasash
30.21. CSSda transform, transition va position xususiyatlari bo'yicha qo'shimcha videodarslar (ko'rish shart!)

 

 

 

 

30 "Job Listings" loyihasi amaliyoti

31.01. Job listing maketiga link
31.02. Job Listings maketi bosh sahifasini tuzish

 

 

 

 

31 N24 maketi modali va JSdan qo’shimcha mavzular

32.01. N24 maketi modalini tuzish
32.02. N24 maketi modalini tugma bosilganda yopish
32.03. Nega JS amalini ishga tushiruvchi elementlarga js- prefiksli klass beriladi
32.04. JSdagi event listenerlarni sug'urtalash
32.05. setTimeout yordamida JS amalni keyinroq ishga tushirish

 

 

 

 

32 BEM

33.01. Kirish
33.02. Qanday ko'rinishdagi klasslar yozilishi mumkin
33.03. BEMga ko'ra HTML kod yozishdagi qoidalar va foydali manbalar
33.04. BEMdagi CSS stillariga oid ba'zi qoidalar
33.05. Stillarni Blockning o'zi emas uning ichki elementiga beriladigan holatlar haqida umumiy

 

 

 

 

33 Loyihalar tuzilishi vaqtini to'g'ri tahmin qilish va samaradorlikni oshirish uchun snippetlar

34.01. Loyihaga ketadigan vaqtni to'g'ri tahmin qilish. Google Sheetsdagi jadval misoli
34.02. Snippet tuzish

 

 

 

 

34 "Shortly" loyihasi amaliyoti va PerfectPixel instrumenti

35.01. "Shortly" maketiga link
35.02. Kirish
35.03. Global sozlamalar, shriftlar va o'zgaruvchilar
35.04. Site-header va button
35.05. PerfectPixel yondashuvi. Shortly maketi misoli
35.06. Hero bo'limi
35.07. URL qisqartirish bo'limi formasi va natijalari
35.08. CSS input validatsiyasi va placeholderlar rangini o'zgartirish kodini snippetga aylantirish
35.09. URL qisqartirish formasini submitdan to'xtatish va shu paytda natijalarni ko'rsatish
35.10. CSSda autofill qilingan qiymat stillarini o'zgartirish. Shortly maketidagi autofill stillarini o'zgartirish
35.11. Qisqartirilgan linkni ko'chirish tugmasi bosilganida uning holatini o'zgartirish. JSda Event delegation bilan sodda tanishuv
35.12. Qisqartirilgan linkni clipboardga ko'chirish
35.13. Index-features bo'limi
35.14. CTA bo'limi
35.15. Kodning qisqacha tahlili. BEMga oid fikrlar
35.16. Site-footer
35.17. Loyihaga ketgan vaqt haqida fikrlar. Loyiha kodini validator va BEM tree checkerda tekshirish
35.18. Site-footerdagi kichik kamchilikni to'g'rilash

 

 

 

 

35 "Bookmark" loyihasi amaliyoti. 1-qism

36.01. "Bookmark" maketiga link
36.02. Maket ko'rinishini tahlil qilish va loyihaga ketadigan vaqtni chamalash
36.03. css-starter repoga yangiliklar qo'shish
36.04. Shrift, global stillar, custom props va container stillarini to'g'rilash
36.05. Site-header bo'limi
36.06. Hero bo'limi
36.07. Bo'limlarning umumiy stillarini tuzish
36.08. Features bo'limi. Tab linklarini tuzish
36.09. Features bo'limi. Tab panellarni tuzish

 

 

 

 

36 JavaScript. Takrorlash

37.01. Kirish
37.02. JS kod qayerda yoziladi
37.03. Raqam va matn qanday yoziladi
37.04. Ma'lumotlarni consoleda ko'rsatish
37.05. O'zgaruvchi va matnlarni biriktirish
37.06. Matnlardagi belgilar sonini topish
37.07. Template literal bilan ishlash
37.08. Elementni tanlash - document.querySelector
37.09. Nega HTML elementlarga biriktiriladigan o'zgaruvchi nomini el bilan boshlash kerak
37.10. Bir nechta elementlarni tanlash - document.querySelectorAll
37.11. querySelectorAll bilan topilgan elementlar sonini aniqlash
37.12. Element matnini olish, o'zgartirish. DevToolsda elementga $0 nomi bilan murojaat qilish
37.13. class bilan ishlash, add, remove, toggle, contains
37.14. Event listener qo'shish
37.15. JSda event listener berilgan elementlarga js- prefiksli class berish sababi
37.16. Event turlari va selectning change hodisasiga misol
37.17. Mashq. inputga ma'lumot kiritilganda amal bajarish
37.18. Hodisalarga nisbatan amal bajarishni sug'urtalash (if)
37.19. setTimeout yordamida amalni bir muddatdan keyin bajarish
37.20. Event preventDefault
37.21. Bir nechta elementga event listener biriktirish
37.22. Bir nechta elementga event listener biriktirishda sug'urtalash kerakmi
37.23. data- atributlari bilan ishlash
37.24. Event delegation
37.25. Matnni nusxalash - navigator.clipboard.writeText()
37.26. DOM traversing
37.27. localStorage
37.28. Javas# JavaScript. Takrorlash bo'limi uchun testlar
37.29. Countries maketidagi dark-mode ni localhostga saqlash.

 

 

 

 

37 "Bookmark" loyihasi amaliyoti. 2-qism

38.01. Eslatma
38.02. Tablar ishlashining ta'rifi. Tab link bosilganda uning hrefi qiymatini olish va matnning split metodi
38.03. Tab link bosilganda tabs__item faolligini boshqarish
38.04. JavaScriptda funksiya tushunchasi asoslari
38.05. deactivateTabItems funksiyasini tuzish va ishga tushirish
38.06. Tablarni to'liq ishlatish
38.07. Tablardagi mo'ljal panelni dataset yordamida topish
38.08. Netlifyda o'zgarishlar ko'rinmaganda keshni tozalab deploy qilish
38.09. Tabpanellardagi BEM xatoliklarini to'g'rilash
38.10. Tabpanellardagi rasmlar marginini to'g'rilash
38.11. Extensions bo'limini tuzish
38.12. nth-child ning Xn + Y ko'rinishidagi tanlovchisi
38.13. FAQ bo'limi. Accordiongacha bo'lgan elementlar
38.14. Accordion HTML va CSS qismini tuzish
38.15. Accordion JS qismi
38.16. FAQ bo'limini PerfectPixelda maket bilan taqqoslash
38.17. Subscription bo'limi
38.18. Site-footer bo'limi
38.19. FAQ accordiondagi kamchilikni to'g'rilash va maslahat
38.20. JSda obyekt asoslari
38.21. Modifier klasslarni bir obyektga jamlash

 

 

 

 

38 "Easybank" loyihasi amaliyoti

39.01. "EasyBank" maketiga link
39.02. Kirish va birinchi vazifa
39.03. Loyiha vaqtini tahmin qilish va uning boshlang'ich kodini tayyorlash
39.04. Global stillar, o'zgaruvchilar, container va shrift stillari
39.05. Site-header
39.06. Hero
39.07. Features
39.08. Articles-grid va index-articles
39.09. Site-footer. Logo va socials
39.10. Site-footer links va cta-copy qismlari

 

 

 

 

39 "E-commerce product page" loyihasi amaliyoti

40.01. "E-commerce product page" maketiga link
40.02. Loyiha bilan tanishuv. Vaqtni chamalash
40.03. Custom props, shriftlar, container va body stillarini qo'shish
40.04. Site-header logo va sitenav
40.05. Site-header-cart-link
40.06. Site-header-profile link
40.07. Site-header-cart, shopping-cart va savatchadagi tovarlar soni stillari
40.08. Kontenti yo'q, bo'sh elementlarga doim empty klassi beriladimi
40.09. Shopping cart contenti HTML
40.10. Shopping cart mahsulotlar ro'yxati stillari
40.11. Shopping cart button
40.12. Shopping cart popup elementi JS qismi
40.13. Product page boshlang'ich holati
40.14. Img showcase HTML
40.15. Img showcase stillari
40.16. Img showcase scrollbari stilini o'zgartirish
40.17. Scrollbar stilini o'zgartirish uchun snippet tuzish va oldingi snippetlar triggerini tahrirlash
40.18. Mustaqil ish ta'rifi. Img showcase JS imkoniyatlari ta'rifi va tuzilishi bosqichlari
40.19. Img showcase thumbnail bosilganda uni faol holatga keltirish. Nega rasmlar button ga solingan edi
40.20. Img showcase thumbnail bosilganda faol rasmni o'zgartirish
40.21. Rasmlarga click event listener berish mumkinmi
40.22. Lightboxning HTML qismi
40.23. Lightboxning stillari
40.24. Lightboxni ochib-yopish
40.25. Lightbox bilan img-showcase bog'lanib qolgandagi xatoni to'g'rilash
40.26. Lightboxdagi rasmlar o'zgarishini tuzish
40.27. Lightboxdagi keyingi rasmga o'tish imkoniyatini tuzish
40.28. Lightboxdagi oldingi rasmga o'tish imkoniyatini tuzish
40.29. Rasm galereyasi va lightboxdagi o'zaro konfliktni to'g'rilash
40.30. Product info qismi HTML
40.31. Product info stillari
40.32. Mahsulot sonini tugma bosilganda o'zgartirish

 

 

 

 

40 Boshqa HTML va CSS imkoniyatlari

41.01. Bo'lim haqida ma'lumot
41.02. table elementi. 1-qism. Asoslar
41.03. table elementi. 2-qism. rowspan, colspan
41.04. table elementi. 3-qism. Ko'p ishlatiladigan stillar
41.05. iframe. YouTubedan video, YandexMaps va GoogleMapsdan xarita joylash
41.06. audio va video elementlari
41.07. CSS filter va mix-blend-mode

 

 

 

 

41 GitHub va Portfolio. Bajarilgan ishlarni ommaga taqdim qilish

42.01. GitHub profili sahifasini foydali, chiroyli ko'rinishga keltirish
42.02. GitHub profili sahifasini ma'lumot bilan to'ldirish. 1-qism
42.03. GitHub profili sahifasini ma'lumot bilan to'ldirish. 2-qism
42.04. Portfolio tuzish. U nima, nima ma'lumotlarni joylash kerak va ba'zi fikrlar
42.05. Portfolio tuzish. Portfolio bosh sahifasining birinchi talqinini tuzish
42.06. Portfolio tuzish. Loyiha haqidagi ma'lumotni Teletype saytida post sifatida joylash
42.07. Domen sotib olish va portfolio sahifasini yangi domenga ulash

 

 

 

 

42 Gitni Terminalda boshqarish va jamoaviy ishlash

43.01. Interfeys turlari - CLI vs GUI
43.02. Git buyruqlarini terminalda yozish
43.03. Sublime Merge dasturi bilan ishlash
43.04. Jamoaviy ishlash va SDLC mavzulariga kirish
43.05. Scrum bilan tanishuv
43.06. Waterfall usuli haqida ma'lumot. Branchlarga bo'lib ishlash mavzusiga kirish
43.07. Gitda branch bilan ishlash
43.08. Gitda branch bilan ishlash (terminal)
43.09. Git branchda ish tugallanmasa, uni repoga yuborish
43.10. Gitda branchni himoyalash qoidalari
43.11. Gitda branch ochilishidan oldin qilinadigan ishlar. GitHubdagi loyihani kompyuterga branchlari bilan olib kelish va ba'zi qo'shimcha qoidalar
43.12. Gitda merge conflict misoli va merge conflictni resolve qilish
43.13. GitHubda fork qilish imkoniyati
43.14. GitHubda fork qilingan repodagi o'zgarishni asl repoga yuborish. Jamoaviy ishlashga oid ba'zi tushunchalar bilan mini-tanishuv
43.15. GitHubda jamoaviy ishlashdagi texnik usullar haqida
43.16. GitHubda forklash asosida jamoaviy ishlash asoslari

 

 

 

 

43 "MyTeam" loyihasini jamoa bilan tuzish

44.01. "MyTeam" maketiga link
44.02. Jamoaviy ishlash amaliyotiga kirish
44.03. MyTeam maketining global ishlarini bajarish (container, shrift, custom props)
44.04. MyTeam maketini Netlifyga joylash
44.05. MyTeam maketini komponentlarga bo'lish. Repoga jamoa a'zolarini qo'shish

 

 

 

 

44 BONUS: ReactJS

45.01. ReactJS Modulga kirish
45.02. 1-dars. ReactJS nima
45.03. 2-dars. Kerakli dasturlar
45.04. 3-dars. NPM Haqida batafsil
45.05. Bonus. Webstorm kupon
45.06. 4-dars. ReactJS dastur tuzish. React APP
45.07. 5-dars. Sof ReactJS
45.08. 6-dars. Mini loyiha
45.09. 7-dars. JSX
45.10. 8-dars. Amaliyot
45.11. 9-dars. JSX hususiyatlari
45.12. 10-dars. illovani modullaga bo’lish
45.13. 11-dars. Shartli ko’rsatish
45.14. 12-dars. Loader misoli
45.15. 13-dars. Amaliyot
45.16. 14-dars. Class Komponentlar haqida
45.17. 15-dars. Class Komponent holati va boshqaruv
45.18. 16-dars. Class komponentlarda metodlar yaratish
45.19. 17-dars. Amaliyot
45.20. 18-dars. Hayotiy tsikl tushunchasi va React komponenti
45.21. 19-dars. Amaliyot
45.22. 20-dars. To’plamlar va kalit attribut bilan ishlash
45.23. 21-dars. Props
45.24. 22-dars. Amaliyot
45.25. 23-dars. Formalar bilan ishlash va validation
45.26. 24-dars. Checkbox, radio va TextArea bilan ishlash
45.27. 25-dars. Amaliyot
45.28. 26-dars. CreateRef haqida batafsil
45.29. 27-dars. Boshqarib bo’lmaydigon forma
45.30. 28-dars. Movie App. Loyiha bilan tanishuv
45.31. 28-dars. Loyiha bilan tanishuv
45.32. 29-dars. Header va Footer
45.33. 30-dars. API bilan tanishuv
45.34. 31-dars. Umumiy film ro'yhatini yasash
45.35. 32-dars. Qidiruv tugmasini yasash
45.36. 33-dars. Kategoriya bo'yicha filtirlashni qoshish
45.37. 34-dars. Muvaffaqiyatsiz qidiruvni boshqarish va Hostga joylash
45.38. 2-LOYIHA. Twitter Analog
45.39. 35-dars. Loyihaga kirish
45.40. 36-dars. JSX protessori
45.41. 37-dars. Komponentlar hususiyatlari
45.42. 38-dars. Komponentlarni holatlari
45.43. 39-dars. Ma'lumotlarni bazadan o'chirish
45.44. 40-dars. Form bilan ishlash
45.45. 41-dars. Dataga ma'lumot qoshish
45.46. 42-dars. Qidiruv tizimi va filter
45.47. 2-MODUL. Funktsiya komponentlar
45.48. 43-dars. Funktsional komponentlar
45.49. 44-dars. Fuktsional komponent yordamida hayot tsikili tushunchasi
45.50. 45-dars. Funktsional komponentda reflardan fotdalanish
45.51. 46-dars. Amaliyot. Komponentlar
45.52. 47-dars. Amaliyot. 1-qism
45.53. 48-dars. Amaliyot. 2-qism
45.54. 49-dars. Hooks. useState, useEffect, useRef va useMemo
45.55. 50-dars. Hook useCallback va useContext
45.56. 51-dars. Hook useLayoutEffect
45.57. 52-dars. Hook useImperativeHandle
45.58. 53-dars. Hook useReducer
45.59. 54-dars. Maxsus hooklar
45.60. 55-dars. Hooklardan foydalanish shartlari
45.61. 56-dars. Amaliyot. Hook useReducer
45.62. 3-LOYIHA. Shopping card
45.63. 57-dars. Loyihaga kirish
45.64. 58-dars. API bilan tanishuv
45.65. 59-dars. Header & Footer
45.66. 60-dars. Mahsulotlarni ro'yhatini ko'rsatish
45.67. 61-dars. Buyurtma holati va savatcha
45.68. 62-dars. Buyurtma berish fuktsiyasi
45.69. 63-dars. Mahsulotni o'chirish
45.70. 64-dars. Savatdagi mahsulotlarni o'zgartirish
45.71. 65-dars. Mahsulotlarni qo'shish va o'chirish
45.72. 66-dars. Toast kutubxonasi va Github
45.73. 3-MODUL. Murakkab Dastur xolati. Context bilan ishlash
45.74. 67-dars. Murakkab boshqaruv dastur holati: Context & Provider yasash
45.75. 68-dars. Reducer funktsiya yasash
45.76. 69-dars. Barcha komponentlarni rekvizitlar o'rniga kontekstga o'tkazish
45.77. 70-dars. Sharh
45.78. 4-LOYIHA. SPA dasturi (Single Page Application)
45.79. * MUHIM *
45.80. 71-dars. Routing va SPA. Tanishuv
45.81. 72-dars. Routing asoslar va Link komponenti
45.82. 73-dars. Hooks useHistory, useParams, useLocation va useRouteMatch
45.83. 74-dars. API
45.84. 75-dars. API metodlar yasash
45.85. 76-dars. Kategoriya va bosh sahifa
45.86. 77-dars. Filter yordamida mahsulotlarni olish metodi
45.87. 78-dars. Recipe
45.88. 79-dars. Qidiruv paneli
45.89. Modul bo'yicha so'rovnoma

 

 

 

 

45 Moslashuvchan (responsive) sayt tuzish asoslari

46.01. Moslashuvchan (responsive) sayt tuzishga kirish
46.02. Device toolbar bilan ishlash va ba'zi foydali instrumentlar
46.03. viewport meta
46.04. Media query bilan tanishuv
46.05. Responsive va adaptive saytlarning farqi
46.06. Desktop-first VS mobile-first
46.07. Moslashuvchan sayt tuzish haqidagi qiziq illyustratsiya
46.08. Ko'p kuzatiladigan xatolar
46.09. Elementlar enini foizda berish va uning foydalari
46.10. picture elementi bilan tanishuv
46.11. picture elementida media so'rovdan foydalanish

 

 

 

 

46 BONUS: Videouchrashuvlar

47.01. 12-fevral 2022
47.02. 3-mart 2022
47.03. 21-iyul 2022. 1-qism
47.04. 21-iyul 2022. 2-qism
47.05. 29-avgust 2022
47.06. 10-oktabr 2022
47.07. 30-oktabr 2022
47.08. 25-noyabr 2022
47.09. 8-yanvar 2023. 1-qism
47.10. 8-yanvar 2023. 2-qism
47.11. 8-yanvar 2023. 3-qism
47.12. 26-mart 2023 1-qism
47.13. 26-mart 2023 2-qism
47.14. 3-aprel 2023. 1-qism. Sass Kirish
47.15. 3-aprel 2023. 2-qism. Sass Kirish
47.16. 12-may Custome hook va savol-javob
47.17. 9.07.2023. Javascript - prototype inheritance
47.18. 14 - yanvar CSS Grid, savol-javob
47.19. 23-dekabr savol-javob, event loop
47.20. 27 yanvar 2024 Promise (js), savol-javob
47.21. 17.03.2024 Q&A

 

 

 

 

47 Kurs davomidagi o'zgarish va vazifalar

48.01. GitHub profildagi o'zgarish
48.02. Responsive sayt tuzishga oid vazifalar

 

 

 

 

48 Akademnashr saytini responsive qilish

49.01. Akademnashr maketini responsive qilish. Darslar ketma-ketligi haqida
49.02. Akademnashrdagi footer socialsni BEMga moslash
49.03. Site-footerni responsive qilish
49.04. Features bo'limini responsive qilish
49.05. Hero bo'limini responsive qilish
49.06. Promo bo'limini responsive qilish
49.07. Site-headerni responsive qilish

 

 

 

 

49 Responsive menyu tuzish

50.01. Kirish va HTML
50.02. Menyu stillari
50.03. JavaScript qismi
50.04. MUHIM! Edge caselarga moslashtirish

 

 

 

 

50 AnsorMed responsive

51.01. AnsorMed responsive. Hero qismi
51.02. AnsorMed responsive. Index-services qismi
51.03. AnsorMed responsive. CTA qismi
51.04. AnsorMed responsive. Site-footer qismini moslashtirishga tayyorgarlik
51.05. AnsorMed responsive. Site-footer qismi
51.06. AnsorMed responsive. Site-header

 

 

 

 

51 Minimalistic portfolio

52.01. Minimalistic Portfolio maketi bilan tanishuv
52.02. Minimalistic Portfolio. Maketni tuzishga ketadigan vaqt tahlili
52.03. Minimalistic Portfolio. Global stillar, container va custom props
52.04. Minimalistic Portfolio. Shriftlarni ulash
52.05. Minimalistic Portfolio. Site-header
52.06. Minimalistic Portfolio. Site-footer
52.07. Minimalistic Portfolio. CTA button
52.08. Minimalistic Portfolio. Button
52.09. Minimalistic Portfolio. Hero
52.10. Minimalistic Portfolio. img-text-info komponenti
52.11. Minimalistic Portfolio. About me bo'limi
52.12. Minimalistic Portfolio. Contact me CTA
52.13. Minimalistic Portfolio. Portfolio sahifasi
52.14. Minimalistic Portfolio. Project hero
52.15. Minimalistic Portfolio. Project info qismidagi xatboshini joylashtirish yondashuvi
52.16. Minimalistic Portfolio. Project meta. 1-qism. Float bilan ishlash
52.17. Minimalistic Portfolio. Project meta. 2-qism. Bo'limni to'liq responsive qilish
52.18. Minimalistic Portfolio. Project details
52.19. Minimalistic Portfolio. Page controls
52.20. Minimalistic Portfolio. Loyihalar sahifalari ma'lumotlarini to'ldirish
52.21. Minimalistic Portfolio. Kontakt sahifasi HTMLi
52.22. Minimalistic Portfolio. Kontakt sahifasi stillari
52.23. Minimalistic Portfolio. Form maydonlaridagi valid va invalid stillar
52.24. Absolyut qiymat o'rniga nisbiy qiymatlardan foydalanish haqida
52.25. Qachon qaysi o'lchov birligidan foydalanamiz. em va rem farqi
52.26. Minimalistic Portfolio. O'lchov birliklarini nisbiy qiymatlarga o'zgartirish
52.27. Responsive sayt tuzish bo'limidan keyingi vazifa

 

 

 

 

52 Bonus: Javascript asoslari

53.01. Javascript asoslari | 1. Kirish
53.02. Javascript asoslari | 2. Javascript va uning versiyalari
53.03. Javascript asoslari | 3. Salom dunyo!
53.04. Javascript asoslari | 4. Qiymatlar va o'zgaruvchilar
53.05. Javascript asoslari | 5. Ma'lumot turlari
53.06. Javascript asoslari | 6. let, const va var
53.07. Javascript asoslari | 7. Asosiy operatorlar
53.08. Javascript asoslari | 8. String
53.09. Javascript asoslari | 9. Mantiqiy operatorlar
53.10. Javascript asoslari | 10. Turni (type) o'zgartirish
53.11. Javascript asoslari | 11. Funksiya va uni e'lon qilish
53.12. Javascript asoslari | 12. Function expression va arrow function
53.13. Javascript asoslari | 13. Funksiyalar bo'yicha amaliyot
53.14. Javascript asoslari | 14. Array
53.15. Javascript asoslari | 15. Array methods
53.16. Javascript asoslari | 16. Objects
53.17. Javascript asoslari | 17. Object methods
53.18. Javascript asoslari | 18. if/else
53.19. Javascript asoslari | 19. switch
53.20. Javascript asoslari | 20. for
53.21. Javascript asoslari | 21. while
53.22. Javascript asoslari | 22. Oqim boshqaruvi bo’yicha amaliyot
53.23. Javascript asoslari | 23. DOM
53.24. Javascript asoslari | 24. Elementlarni tanlab olish
53.25. Javascript asoslari | 25. Elementlarni o’zgartirish
53.26. Javascript asoslari | 26. Elementlarni qo’shish va o’chirish
53.27. Javascript asoslari | 27. Hodisalar (events)
53.28. Javascript asoslari | 28. Ko’p uchraydigan hodisalar
53.29. Javascript asoslari | 29. DOM bo’yicha amaliyot
53.30. 0:02 / 3:09 Javascript asoslari | 30. Kurs yakuni

 

 

 

 

53 Bonus: Javascript asoslari

54.01. O'zgaruvchilar
54.02. Ma'lumot turlari
54.03. For Loop
54.04. Shartli operatorlar
54.05. Funksiya va return
54.06. DOM manipulyatsiyasi
54.07. this, bind, call & apply
54.08. Closure
54.09. LocalStorage
54.10. Class, getters & setters
54.11. ProtoType
54.12. Function constructor, context, this, class
54.13. Korzina yasash (Praktika)
54.14. DOM bilan ishlash
54.15. Loader yasaymiz
54.16. JSda o'yin yaratamiz
54.17. To-do list yasaymiz
54.18. Class yordamida dynamic content
54.19. Slider yasaymiz
54.20. Javascript asoslari | 20-dars. Owl carousel
54.21. VanillaJS
54.22. API, JSON & Promise
54.23. Weather App yasaymiz

 

 

 

 

Ommaviy ofertani ko'rish