Front-End dasturlash
15 dan ortiq loyihalar asosida frontend dasturlash asoslarini amaliy tarzda o'rganing. Raqobatbardosh bilim, tajriba va portfoliongiz bilan ishga kirish imkoningizni oshiring.
Xarid qilish
Kursdan nimani kutishingiz mumkin?
Bilim va ko'nikmalar
Front-End dasturlash mutaxassisi bo'lish uchun kerakli bilimlarga ega bo'lasiz.
Loyihalar
Kurs davomida siz zamonaviy texnologiyalardan foydalangan holda 21 ta loyihani yakunlaysiz.
Sertifikat
Sizning bilimingiz darajasini ifodalovchi sertifikatga ega bo'lasiz.
Karyerani boshlash
Kursimizdan so'ng siz bemalol karyerangizni boshlashga tayyor bo’lib chiqasiz.
00
00
00
Frontend dasturchi qanday vazifalarni bajaradi?
Frontend dasturchilar saytlar dizayniga ko'ra Chrome kabi brauzerlarda ishlaydigan saytlar ko'rinishi qismi kodini yozishga mas'ul hisoblanadi. Ular ish davomida HTML, CSS, JavaScript va ularga bog'liq instrumentlardan foydalanib chiroyli, ishlatishga qulay, turli ekranlarda yaxshi ko'rinuvchi va tez saytlar yozishadi. Odatda UX/UI dizayner va backend dasturchilar bilan bir jamoa bo'lib ishlashadi. Kundalik vazifalariga sayt frontendi kodini yozish, undagi xatolarni to'g'rilash, sayt ishlash tezligini oshirish kabilar kiradi.
Kurs qanday tartibda o'tiladi?
Yopiq guruh
Telegramdagi yopiq guruhda o'quvchilar istalgan vaqt o'qituvchilar va mentorlardan o'zlarini qiziqtirgan savollarga javob topishi mumkin. Ular har doim yordamga tayyor turishadi.
Oylik onlayn uchrashuvlar
Har oy kurs o'qituvchilari bilan Zoom uchrashuvlari bo'lib o'tadi. Suhbat davomida o'zingizni qiynayotgan muammo va savollarga javob topishingiz mumkin.
Videodarslar
Darslar video shaklda platformaga joylangan bo'lib, ularni xohlagan payt, istalgan joyda ko'rishingiz mumkin. Videodarslar yangilanib boriladi.
Vazifalar
Modul oxirida test topshiriqlari berilgan. Testdan muvaffaqiyatli o'tgan o'quvchilargina keyingi moduldagi darslarga kirish imkoniga ega bo'ladi.
Kurs haqida batafsil ma'lumot olishni xohlaysizmi?
Ma’lumotlaringizni qoldiring. Siz bilan tez orada bog'lanamiz
Front-End dasturlash
mutaxassislarining oylik maoshi
Ko'rsatilgan ma'lumotlar hh.uz va boshqa saytlardagi
ma'lumotlardan tuzilgan
junior
middle
senior
$200
$800
$1500
junior
$200
middle
$800
senior
$1500
Kurs kimlar uchun?
01
Dasturlash sohasiga yangi bo’lganlar
Praktikum kursida barcha bilimlar 0 dan boshlab o’rgatiladi. Shu sababdan, umuman dasturlashdan xabari yo’q yoki ozgina tushunchasi bor o’quvchilar uchun bu kursni ideal deyishimiz mumkin.
02
Boshlang’ich Frontend dasturchilar
Frontend dasturlash bo’yicha turli manbalardan o’rganib, biroz tajribaga ega bo’lib, bilimlarini tartibga keltirishni istaganlar Frontenddagi bilimlarini amaliy loyihalarda charxlab, kod yozishning optimal usullarini o’rganmoqchi bo’lganlaz K Frontend dasturlashdagi verstka qismi bo’yicha boy portfolioga ega bo’lmoqchilar uchun bu kurs mos keladi.
Nega aynan bu kurs?
Mukammal o'quv dasturi
Bu kursda frontend dasturlash asoslari amaliyotga urg’u berilgan holda o’rgatiladi. Kurs davomida kundalik ishda juda kam ishlatiladigan mavzular bilan o’quvchilar vaqti olinmaydi. Balki, bir nechta maketlarni o’rgangan mavzular asosida davomiy boyitib borish usulida amaliy bilimlar o’rgatiladi.
Murakkab loyihalardan tashkil topgan portfolio
Kurs oxirida o’quvchilar portfolioisi uchun 15 dan ortiq loyihalar qilishadi. Bu loyihalar qilish orqali o’quvchilar junior sifatida birinchi ishini bemalol topa olishadi.
Siz uchun qulay vaqtda
Kurslarni o'zingizga qulay vaqtda, joriy ishlaringizga xalaqit qilmagan holda o'rganib borishingiz mumkin.
Kurs tarkibi
- 635 ta dars
- 21 ta loyiha qilinadi
- 80 soat kurs davomiyligi
- 6 ta test va topshiriqlar
Darslarni kompyuterda ko'rish
Darslarni telefonda ko'rish
Ommaviy oferta bilan tanishib chiqing
Yopiq guruhga qo'shilish
Savol so'rash bo'yicha qo'llanma
00:03:00
00:05:00
Kursda o'rgatiladigan texnologiyalar
00:07:00
Kurs davomida tuziladigan loyihalar
00:08:00
Kurs oxirida qanday natijani maqsad qilish mumkin?
00:05:00
Frontend va umuman dasturlashni o'rganishdagi ustunlar, muhim nuqtalar
00:11:00
Veb dasturlash sohalari bilan tanishuv
00:16:00
Sayt tuzilishidagi bosqichlar ketma-ketligi
00:14:00
Sayt tuzish usullari va qachon qay biridan foydalanish kerak?
00:17:00
Onlayn kurs sayti uchun texnik talablarni tayyorlash, brainstorming
00:33:00
Onlayn kurs sayti qoralama dizaynini Balsamiqda tuzish
00:47:00
00:03:00
00:10:00
Skrinshot olish uchun Lightshot dasturini o'rnatish va ishlatish
00:04:00
Loyihaning fayl va papkalarini to'g'ri tartiblash, Live Server kengaytmasini o'rnatish
00:08:00
Elementlar yozilishi qoidasi. Matnga oid elementlar
00:17:00
Tuzilmaviy elementlar. html, head, body, DevTools
00:09:00
Havola bilan ishlash
00:07:00
Boshqa HTML fayllarga havola bilan ulanish
00:07:00
Kodni HTML Validatorda tekshirish
00:04:00
Loyihani arxivlab (zip) yuborish
00:03:00
Verstka sohasining eng yaxshi va yomon tomoni
00:04:00
Figma bilan tanishuv. Akademnashr maketi. 1-katta vazifa ta'rifi
00:14:00
Akademnashir maketiga link
00:01:00
Akademnashr saytini tuzish bo'yicha yuborilgan ishlarni tahlil qilish
00:08:00
Akademnashr saytini tuzish vazifasi yechimi. Kod yozishdagi samaradorlikni oshirish bo'yicha tavsiyalar
00:15:00
Boshlang'ich tushunchalar
00:03:00
00:14:00
Ro'yxatlardan o'rganganlarimizni Akademnashr maketiga tatbiq qilish
00:06:00
div elementi va guruhlash
00:07:00
div elementini Akademnashr maketiga tatbiq qilish
00:03:00
HTML5da qo'shilgan bo'lim elementlari - header, nav, main, section, footer va kichik vazifa
00:14:00
HTML5 bo'lim elementlarini Akademnashr maketiga tatbiq qilish
00:06:00
Sahifaga rasmlarni joylash. Rasmlar formatlari farqlari
00:11:00
Papka ichidagi rasmni joylash o'zi qanday ishlaydi
00:04:00
Radiusli burchakli rasmlarni eksport qilish va rasmga width va height berishning ahamiyati
00:07:00
Rasmlar hajmini optimallashtirish. TinyPNG instrumenti
00:07:00
Qachon rasmlarni img emas, svg kodi bilan joylanadi? SVG hajmini optimallashtirish.
00:06:00
Rastr rasmlarni retina ekran uchun moslashtirish
00:09:00
Squoosh instrumenti. Squoosh yordamida rasm hajmini optimallashtirish va retina uchun 2x rasmlarni chiqarish
00:05:00
Picsum Photos yordamida sahifaga ixtiyoriy rasmlarni olib kelish
00:07:00
Placeholder.com dan ixtiyoriy rasmlarni olib kelish
00:03:00
Ixtiyoriy sondagi so'zlardan iborat vaqtinchalik matn generatsiya qilish
00:03:00
Rasmlar asosida Akademnashr maketi bo'yicha vazifa ta'rifi
00:01:00
Akademnashr maketiga rasmlar bo'limida o'rgangan bilimlarni tatbiq qilish
00:14:00
Ro'yxat, rasm va guruhlash
00:10:00
GitHubda ro'yxatdan o'tish
00:05:00
Kompyuterdan Gitni va unga bog'langan login-parollarni o'chirib tashlash
00:01:00
Kompyuterga Gitni o'rnatish va undagi global sozlamalarni yangi profilga moslashtirish
00:05:00
00:12:00
Git asoslarini demo loyiha asosida ishlatish
00:14:00
Akademnashr loyihasini GitHubga joylash
00:02:00
Netlify bilan tanishuv. Akademnashr loyihasini Netlifyga joylash
00:08:00
Git, GitHub va Netlify
00:08:00
00:06:00
RGBA va shaffof rang bilan ishlash
00:03:00
Ranglarni HEX formatida berish
00:06:00
Matnga oid ko'p ishlatiladigan stillar
00:08:00
CSSda kod ketma-ketligining ahamiyati
00:03:00
Elementlarga class orqali stil berish, classni nomlashdagi qoidalar
00:05:00
CSSda selectorlar kuchi. class VS element tanlovchisi
00:04:00
Ko'p ishlatiladigan class nomlari
00:04:00
Elementlarga bir nechta class berish. Matnni chap, o'rta va o'ngga keltirish
00:03:00
Elementlarning eni va bo'yini o'zgartirish
00:05:00
Rasmlarning object-fit xususiyati
00:03:00
Akademnashr maketiga CSSdan o'tilgan mavzularni tatbiq qilish bo'yicha vazifa ta'rifi
00:02:00
Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 1-qism
00:12:00
Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 2-qism
00:10:00
Ro'yxatning stillarini o'zgartirish va ota elementga ko'ra boshqa elementni tanlab stil berish
00:04:00
Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 3-qism
00:03:00
Akademnashr maketidagi yangi kodlarni GitHubga yuborish va Netlifyga joylash
00:06:00
CSS asoslari
00:04:00
00:05:00
Google Fontsdagi shriftlardan foydalanish
00:09:00
Google Fontsdagi bir nechta shriftni loyihaga ulash
00:05:00
Matnga oid global stillarni bodyga berish haqida
00:05:00
CSSda xususiyatlarning meros bo'lib o'tishi
00:04:00
Akademnashr maketiga shriftlarga oid CSSni qo'shish bo'yicha vazifa ta'rifi
00:01:00
Akademnashr maketiga shirftlarga oid CSSni qo'shish vazifasi yechimi
00:08:00
Vazifa yechimi kodini GitHubga yuborish
00:01:00
CSSda shriftlar va meros bo'lib o'tadigan xususiyatlar
00:07:00
00:05:00
Flexga oid align-items xususiyati
00:03:00
Akademnashr maketiga flex, justify-content va align-items xususiyatlarini tatbiq qilish
00:07:00
flex-wrap xususiyati
00:04:00
CSSda DRY prinsipi va flexbox bilan tanishuv
00:10:00
00:08:00
outline xususiyati
00:04:00
opacity xususiyati. opacity VS shaffof rang
00:05:00
Akademnashr maketiga hover va active holatlar stillarini qo'shish. SVG ikonkalar rangini o'zgartirish
00:08:00
00:05:00
00:02:00
00:03:00
border-radius
00:04:00
display inline va block farqlari. display inline-block bilan tanishuv
00:10:00
Akademnashr maketiga padding, border va border-radius xususiyatlarini tatbiq qilish
00:12:00
Code Review va GitHub repodagi issuelar haqida
00:12:00
NormalizeCSS haqida
00:05:00
margin xususiyati bilan tanishuv
00:04:00
Akademnashr maketiga NormalizeCSS va marginni tatbiq qilish
00:14:00
Rasmlar tagidagi bo'shliqni olib tashlash va Akademnashr maketiga o'zgartirish kiritish
00:08:00
margin collapse hodisasi haqida
00:04:00
marginni qaysi tomondan berish kerak
00:01:00
Box model va box-sizing tabiiy qiymati haqida
00:06:00
box-sizing tabiiy qiymatidagi noqulaylik va uni to'g'rilash
00:09:00
Qachon padding va qachon margin ishlatish kerak
00:03:00
padding va marginni qisqa usulda yozib tatbiq qilish
00:03:00
margin auto qiymatining o'ziga xosligi
00:06:00
container nima va qachon ishlatiladi
00:06:00
box-shadow va text-shadow xususiyatlari
00:08:00
Barcha o'rganilgan mavzularni Akademnashr maketiga tatbiq qilish. Saralash final
00:17:00
Loyiha reposi va Netlifydagi sahifasi
AnsorMed maketiga link
00:08:00
AnsorMed loyihasi. Loyiha shriftlarini ulash va global oddiy matnlar shrift stillarini berish
00:05:00
AnsorMed loyihasi. site-header HTML qismi
00:06:00
AnsorMed loyihasi. site-header stillari
00:15:00
AnsorMed loyihasi. site-footer to'liq
00:07:00
AnsorMed loyihasi. hero bo'limi
00:12:00
AnsorMed loyihasi. services bo'limi
00:16:00
AnsorMed loyihasi. CTA bo'limini qo'shish. Final
00:09:00
Loyiha reposi va Netlifydagi sahifasi
VS Code uchun kerakli kengaytmalar
00:17:00
TODO Tree kengaytmasini o'rnatish
00:02:00
Manfiy qiymatli margin
00:07:00
Rasmlar galereyasini manfiy qiymatli margin yordamida osonroq joylashtirish
00:13:00
CSSda DRY prinsipidan foydalanish
00:10:00
flex-direction xususiyati
00:05:00
flex-grow xususiyati
00:06:00
flex-shrink xususiyati
00:07:00
00:06:00
order xususiyati
00:04:00
N24 maketiga link
N24 saytini tuzish. Global sozlamalar. Site-headerning tepa qismi
00:27:00
Form asoslari. form, input, label va button elementlari
00:12:00
Qidiruv formasini va interfaol elementlarning focus stillarini qo'shish
00:07:00
00:14:00
Yangiliklar kartochkalari news-grid HTMLi
00:22:00
Yangiliklar kartochkalari new-grid stillari. Notifications bo'limi
00:19:00
N24 sayti. Global yangiliklar bo'limini tuzish
00:18:00
N24 sayti. Global yangiliklar va sidebar to'liq
00:21:00
00:20:00
Fonga retina rasm joylash
00:08:00
Qachon img va qachon background-image ishlatish kerak
00:05:00
Ikonkalarni spanning fon rasmi sifatida joylash
00:07:00
Bezak ikonkalarni img elementi bilan joylash
00:05:00
button va flex masalasi
00:03:00
Psevdoelementlar - before va after
00:09:00
Articles maketiga link
00:03:00
CSS starter qolip repozitoriya yasash
00:06:00
Qolip repozitoriyadan foydalanish. Articles maketining hero qismini tuzish
00:21:00
Articles maketi. Shriftlarni ulash. Heroga padding berish
00:07:00
Articles maketi. So'nggi videolar bo'limi to'liq
00:30:00
CSSda counter xususiyatidan foydalanish
00:09:00
00:11:00
Google Fontsdagi shriftni @font-face yordamida ulash
00:10:00
Google Webfonts Helper xizmatidan foydalanish
00:06:00
Form elementlari. input takrorlash va select
00:08:00
Checkbox input, fieldset va legend elementlari
00:07:00
Radio input
00:03:00
datalist elementi
00:05:00
textarea elementi
00:03:00
N24 maketi. site-footer HTML qismi
00:10:00
N24 maketi. site-footer stillari
00:13:00
N24 maketi. news-list sahifasi
00:04:00
N24 maketi. Kontakt formasi
00:18:00
N24 maketi. Kontakt ma'lumotlari
00:12:00
N24 maketi. Qidiruv inputi va notifications-cta fon rasmini joylash
00:07:00
CSSda prefikslash
00:07:00
CSSda minifikatsiya
00:04:00
Akademnashr va AnsorMed loyihalari stillarini prefikslash va minifikatsiya qilish
00:05:00
CSS custom property
00:11:00
CSS custom property. 2-qism
00:09:00
Akademnashr loyihasiga custom propertylarni tatbiq qilish
00:09:00
00:05:00
Apple watch maketinga link
00:16:00
00:17:00
Apple Watch loyihasi. Features
00:10:00
Apple Watch loyihasi. Promo va runners
00:11:00
Intro form maketinga link
Intro form loyihasi. Umumiy ishlar va hero
00:26:00
Intro form loyihasi. Signup form
00:14:00
CoffeeRoasters maketiga link
CoffeeRoasters maketi. Site-header va hero
00:44:00
CoffeeRoasters maketi. Index-collection
00:25:00
CoffeeRoasters maketi. Index-features
00:20:00
CoffeeRoasters maketi. How-it-works
00:16:00
CoffeeRoasters maketi. Site-footer
00:13:00
Fonga bir nechta rasm joylash
00:04:00
CSSda gradient fon joylash
00:12:00
Gradient rangli matn stilini berish
00:04:00
Dark mode variantli saytcha tuzish
00:16:00
00:09:00
JavaScript. Sahifadagi elementni topish, nomlash va matnini o'zgartirish
00:08:00
00:04:00
JavaScript. Elementlarga class qo'shish va classni olib tashlash
00:06:00
transform xususiyati
00:08:00
00:06:00
transformning perspective qiymati
00:03:00
CSS transform yordamida oyna ochilishi effektini tuzish
00:11:00
"Countries" maketiga link
00:21:00
Countries maketi. Site-header va SVG kodi intro
00:12:00
Rasmlarni SVG kod ko'rinishida joylash. SVG rasmning xususiyatlarini CSSda o'zgartirish
00:10:00
Countries maketi. Site-headerdagi SVG chegarasi rangini sayt temasiga moslashtirish
00:03:00
Countries maketi. Saytning dark-mode holatini o'chirib-yoqish
00:06:00
Countries maketi. Filtr
00:07:00
Countries maketi. Index-countries
00:08:00
Countries maketi. Index-countries stillari
00:13:00
Countries maketi. Country-page
00:26:00
00:07:00
inputning invalid va placeholder-shown tanlovchilari
00:04:00
disabled atributi va JS bo'yicha vazifa
00:05:00
disabled atributi va JS bo'yicha vazifa yechimi
00:10:00
+ va ~ selectorlari qanday ishlaydi
00:05:00
:checked tanlovchisi
00:02:00
O'ziga xos stildagi checkbox tuzish
00:21:00
Checkbox va radioga o'ziga xos stil berish bo'yicha qo'shimcha videolar (ko'rish shart!)
03:00:00
position xususiyati. static va relative position
00:10:00
00:07:00
position absolute nimaga nisbatan joylashadi
00:10:00
Elementlar ustma-ust kelganda tartibini to'g'rilash va z-index
00:04:00
Position mavzusi bo'yicha mashqlar ta'riflari
00:03:00
Kir yuvish mashinasi interfeysi mashqi yechimi
00:31:00
Profil sozlamalari sahifasi mashqi yechimi
00:28:00
Pricing component with toggle maketiga link
Pricing component mashqi yechimi. Narxlar qismi
00:30:00
Pricing component mashqi yechimi. Switchni tuzish
00:19:00
Pricing component mashqi yechimi. Switch qiymatiga qarab JSda narxlarni o'zgartirish
00:17:00
Akademnashr, CoffeeRoasters va Countries maketlariga positionga oid yangiliklarni qo'shish
00:39:00
z-index stacking
00:07:00
Dropdown menu asoslari
00:06:00
Mover.uz saytidagi menyuni tuzish
00:11:00
position fixed
00:04:00
position sticky
00:03:00
Modal elementini tuzish
00:08:00
overflow xususiyati va position absolute
00:04:00
CSSda uchburchak yasash
00:06:00
CSSda transform, transition va position xususiyatlari bo'yicha qo'shimcha videodarslar (ko'rish shart!)
04:00:00
Job listing maketiga link
Job Listings maketi bosh sahifasini tuzish
00:35:00
00:15:00
N24 maketi modalini tugma bosilganda yopish
00:03:00
Nega JS amalini ishga tushiruvchi elementlarga js- prefiksli klass beriladi
00:04:00
JSdagi event listenerlarni sug'urtalash
00:07:00
setTimeout yordamida JS amalni keyinroq ishga tushirish
00:05:00
00:11:00
Qanday ko'rinishdagi klasslar yozilishi mumkin
00:05:00
BEMga ko'ra HTML kod yozishdagi qoidalar va foydali manbalar
00:13:00
BEMdagi CSS stillariga oid ba'zi qoidalar
00:07:00
Stillarni Blockning o'zi emas uning ichki elementiga beriladigan holatlar haqida umumiy
00:07:00
00:11:00
Snippet tuzish
00:13:00
"Shortly" maketiga link
00:04:00
Global sozlamalar, shriftlar va o'zgaruvchilar
00:11:00
Site-header va button
00:19:00
PerfectPixel yondashuvi. Shortly maketi misoli
00:12:00
Hero bo'limi
00:11:00
URL qisqartirish bo'limi formasi va natijalari
00:36:00
00:03:00
URL qisqartirish formasini submitdan to'xtatish va shu paytda natijalarni ko'rsatish
00:05:00
CSSda autofill qilingan qiymat stillarini o'zgartirish. Shortly maketidagi autofill stillarini o'zgartirish
00:08:00
Qisqartirilgan linkni ko'chirish tugmasi bosilganida uning holatini o'zgartirish. JSda Event delegation bilan sodda tanishuv
00:12:00
Qisqartirilgan linkni clipboardga ko'chirish
00:06:00
Index-features bo'limi
00:18:00
CTA bo'limi
00:05:00
Kodning qisqacha tahlili. BEMga oid fikrlar
00:04:00
Site-footer
00:19:00
Loyihaga ketgan vaqt haqida fikrlar. Loyiha kodini validator va BEM tree checkerda tekshirish
00:03:00
Site-footerdagi kichik kamchilikni to'g'rilash
00:01:00
"Bookmark" maketiga link
00:06:00
css-starter repoga yangiliklar qo'shish
00:03:00
Shrift, global stillar, custom props va container stillarini to'g'rilash
00:14:00
Site-header bo'limi
00:25:00
00:19:00
Bo'limlarning umumiy stillarini tuzish
00:08:00
Features bo'limi. Tab linklarini tuzish
00:13:00
Features bo'limi. Tab panellarni tuzish
00:21:00
Kirish
00:01:00
JS kod qayerda yoziladi
00:03:00
00:02:00
Ma'lumotlarni consoleda ko'rsatish
00:01:00
O'zgaruvchi va matnlarni biriktirish
00:07:00
Matnlardagi belgilar sonini topish
00:03:00
Template literal bilan ishlash
00:04:00
Elementni tanlash - document.querySelector
00:02:00
00:04:00
Bir nechta elementlarni tanlash - document.querySelectorAll
00:03:00
querySelectorAll bilan topilgan elementlar sonini aniqlash
00:02:00
Element matnini olish, o'zgartirish. DevToolsda elementga $0 nomi bilan murojaat qilish
00:05:00
class bilan ishlash, add, remove, toggle, contains
00:05:00
Event listener qo'shish
00:05:00
JSda event listener berilgan elementlarga js- prefiksli class berish sababi
00:03:00
Event turlari va selectning change hodisasiga misol
00:07:00
Mashq. inputga ma'lumot kiritilganda amal bajarish
00:04:00
Hodisalarga nisbatan amal bajarishni sug'urtalash (if)
00:04:00
setTimeout yordamida amalni bir muddatdan keyin bajarish
00:03:00
Event preventDefault
00:06:00
Bir nechta elementga event listener biriktirish
00:04:00
Bir nechta elementga event listener biriktirishda sug'urtalash kerakmi
00:01:00
data- atributlari bilan ishlash
00:03:00
Event delegation
00:07:00
Matnni nusxalash - navigator.clipboard.writeText()
00:03:00
DOM traversing
00:05:00
localStorage
00:10:00
Eslatma
00:09:00
Tab link bosilganda tabs__item faolligini boshqarish
00:04:00
JavaScriptda funksiya tushunchasi asoslari
00:04:00
deactivateTabItems funksiyasini tuzish va ishga tushirish
00:01:00
Tablarni to'liq ishlatish
00:07:00
Tablardagi mo'ljal panelni dataset yordamida topish
00:04:00
Netlifyda o'zgarishlar ko'rinmaganda keshni tozalab deploy qilish
00:01:00
Tabpanellardagi BEM xatoliklarini to'g'rilash
00:06:00
Tabpanellardagi rasmlar marginini to'g'rilash
00:06:00
Extensions bo'limini tuzish
00:23:00
nth-child ning Xn + Y ko'rinishidagi tanlovchisi
00:03:00
FAQ bo'limi. Accordiongacha bo'lgan elementlar
00:03:00
Accordion HTML va CSS qismini tuzish
00:15:00
Accordion JS qismi
00:04:00
FAQ bo'limini PerfectPixelda maket bilan taqqoslash
00:04:00
Subscription bo'limi
00:19:00
Site-footer bo'limi
00:09:00
FAQ accordiondagi kamchilikni to'g'rilash va maslahat
00:02:00
JSda obyekt asoslari
00:04:00
Modifier klasslarni bir obyektga jamlash
00:06:00
"EasyBank" maketiga link
00:01:00
Loyiha vaqtini tahmin qilish va uning boshlang'ich kodini tayyorlash
00:07:00
Global stillar, o'zgaruvchilar, container va shrift stillari
00:06:00
00:23:00
Hero
00:19:00
Features
00:17:00
Articles-grid va index-articles
00:21:00
Site-footer. Logo va socials
00:14:00
Site-footer links va cta-copy qismlari
00:11:00
"E-commerce product page" maketiga link
00:07:00
Custom props, shriftlar, container va body stillarini qo'shish
00:11:00
Site-header logo va sitenav
00:13:00
Site-header-cart-link
00:12:00
Site-header-profile link
00:05:00
Site-header-cart, shopping-cart va savatchadagi tovarlar soni stillari
00:16:00
Kontenti yo'q, bo'sh elementlarga doim empty klassi beriladimi
00:07:00
Shopping cart contenti HTML
00:10:00
Shopping cart mahsulotlar ro'yxati stillari
00:11:00
Shopping cart button
00:13:00
Shopping cart popup elementi JS qismi
00:09:00
Product page boshlang'ich holati
00:10:00
Img showcase HTML
00:13:00
Img showcase stillari
00:13:00
Img showcase scrollbari stilini o'zgartirish
00:06:00
Scrollbar stilini o'zgartirish uchun snippet tuzish va oldingi snippetlar triggerini tahrirlash
00:04:00
00:07:00
Img showcase thumbnail bosilganda uni faol holatga keltirish. Nega rasmlar button ga solingan edi
00:09:00
Img showcase thumbnail bosilganda faol rasmni o'zgartirish
00:14:00
Rasmlarga click event listener berish mumkinmi
00:03:00
Lightboxning HTML qismi
00:09:00
Lightboxning stillari
00:18:00
Lightboxni ochib-yopish
00:04:00
Lightbox bilan img-showcase bog'lanib qolgandagi xatoni to'g'rilash
00:01:00
Lightboxdagi rasmlar o'zgarishini tuzish
00:10:00
Lightboxdagi keyingi rasmga o'tish imkoniyatini tuzish
00:17:00
Lightboxdagi oldingi rasmga o'tish imkoniyatini tuzish
00:03:00
Rasm galereyasi va lightboxdagi o'zaro konfliktni to'g'rilash
00:04:00
Product info qismi HTML
00:07:00
Product info stillari
00:12:00
00:07:00
Bo'lim haqida ma'lumot
00:02:00
table elementi. 1-qism. Asoslar
00:13:00
table elementi. 2-qism. rowspan, colspan
00:09:00
table elementi. 3-qism. Ko'p ishlatiladigan stillar
00:07:00
iframe. YouTubedan video, YandexMaps va GoogleMapsdan xarita joylash
00:07:00
audio va video elementlari
00:09:00
CSS filter va mix-blend-mode
00:12:00
GitHub profili sahifasini foydali, chiroyli ko'rinishga keltirish
00:16:00
GitHub profili sahifasini ma'lumot bilan to'ldirish. 1-qism
00:18:00
GitHub profili sahifasini ma'lumot bilan to'ldirish. 2-qism
00:05:00
00:09:00
Portfolio tuzish. Portfolio bosh sahifasining birinchi talqinini tuzish
00:25:00
Portfolio tuzish. Loyiha haqidagi ma'lumotni Teletype saytida post sifatida joylash
00:14:00
Domen sotib olish va portfolio sahifasini yangi domenga ulash
00:14:00
00:04:00
Git buyruqlarini terminalda yozish
00:10:00
Sublime Merge dasturi bilan ishlash
00:07:00
Jamoaviy ishlash va SDLC mavzulariga kirish
00:12:00
Scrum bilan tanishuv
00:23:00
Waterfall usuli haqida ma'lumot. Branchlarga bo'lib ishlash mavzusiga kirish
00:14:00
Gitda branch bilan ishlash
00:15:00
Gitda branch bilan ishlash (terminal)
00:04:00
Git branchda ish tugallanmasa, uni repoga yuborish
00:05:00
Gitda branchni himoyalash qoidalari
00:04:00
Gitda branch ochilishidan oldin qilinadigan ishlar. GitHubdagi loyihani kompyuterga branchlari bilan olib kelish va ba'zi qo'shimcha qoidalar
00:11:00
Gitda merge conflict misoli va merge conflictni resolve qilish
00:13:00
GitHubda fork qilish imkoniyati
00:07:00
GitHubda fork qilingan repodagi o'zgarishni asl repoga yuborish. Jamoaviy ishlashga oid ba'zi tushunchalar bilan mini-tanishuv
00:07:00
00:05:00
GitHubda forklash asosida jamoaviy ishlash asoslari
00:15:00
"MyTeam" maketiga link
Jamoaviy ishlash amaliyotiga kirish
00:02:00
MyTeam maketining global ishlarini bajarish (container, shrift, custom props)
00:14:00
MyTeam maketini Netlifyga joylash
00:02:00
MyTeam maketini komponentlarga bo'lish. Repoga jamoa a'zolarini qo'shish
00:34:00
00:06:00
Device toolbar bilan ishlash va ba'zi foydali instrumentlar
00:06:00
viewport meta
00:04:00
Media query bilan tanishuv
00:08:00
Responsive va adaptive saytlarning farqi
00:06:00
Desktop-first VS mobile-first
00:06:00
Moslashuvchan sayt tuzish haqidagi qiziq illyustratsiya
00:02:00
Ko'p kuzatiladigan xatolar
00:18:00
Elementlar enini foizda berish va uning foydalari
00:12:00
picture elementi bilan tanishuv
00:13:00
picture elementida media so'rovdan foydalanish
00:14:00
GitHub profildagi o'zgarish
00:01:00
Responsive sayt tuzishga oid vazifalar
00:01:00
00:02:00
Akademnashrdagi footer socialsni BEMga moslash
00:07:00
Site-footerni responsive qilish
00:17:00
Features bo'limini responsive qilish
00:14:00
Hero bo'limini responsive qilish
00:16:00
Promo bo'limini responsive qilish
00:14:00
Site-headerni responsive qilish
00:12:00
Kirish va HTML
00:08:00
Menyu stillari
00:10:00
JavaScript qismi
00:05:00
MUHIM! Edge caselarga moslashtirish
00:14:00
12-fevral 2022
00:15:00
3-mart 2022
00:23:00
21-iyul 2022. 1-qism
00:30:00
21-iyul 2022. 2-qism
00:35:00
29-avgust 2022
01:06:00
10-oktabr 2022
01:29:00
30-oktabr 2022
00:56:00
25-noyabr 2022
01:08:00
8-yanvar 2023. 1-qism
00:38:00
8-yanvar 2023. 2-qism
00:35:00
8-yanvar 2023. 3-qism
00:34:00
26-mart 2023 1-qism
00:40:00
26-mart 2023 2-qism
00:25:00
00:39:00
00:30:00
12-may Custome hook va savol-javob
* Samarali dars qilish *
1-dars. JavaScript modulni samarali tugatish
2-dars. Ish joyini sozlash
3-dars. JsHint bilan ishlash
*-*-*- MODULE 2. JAVASCRIPT ASOSLAR -*-*-*
4-dars. JavaScript nima?
5-dars. O'zgaruvchilar
5.2-dars. Qat'iy rejim va u nima
6-dars. JavaScript-dagi ma'lumotlar turlarini tasnifi
7-dars. Foydalanuvchi bilan oddiy muloqot
9-dars. Interpolatsiya
10-dars. Operatorlar
11-dars. Git & GitHub
12-dars. Amaliyot. Ilova yaratishni boshlaymiz
13-dars. Shartli operatorlar
14-dars. Tsikl
15-dars. Amaliyot. Uyga vazifa. Tsikl
16-dars. Funksiya, ES6
17-dars. Metod va xususiyatlar
18-dars. Amaliyot. Uyga vazifa. Function
19-dars. Callback function
20-dars. Obyektlar, destruptizatsiya
21-dars. Massivlar va psevdo-massivlar
22-dars. Clonlash, ES6
23-dars. SPREAD operator
24-dars. OOP asoslari, prototipga yo'naltirilgan meros
25-dars. Amaliyot. Uyga vazifa. OOP
26-dars. Dynamic typing
27-dars. DOM bilan ishlash
28-dars. Metod bilan ishlash. DOM
29-dars. Amaliyot. DOM elemental bilan
30-dars. Xodisalar bilan ishlash
31-dars. Navigatsiya DOM bo'yicha
32-dars. Amaliyot. Uyga vazifa. DOM xodisalar
33-dars. Defer. Async. Dynamic script.
34-dars. Developer tools. Xatolarni kuzatish
*-*-*- MODULE 3. JAVASCRIPT LOYIHADA -*-*-*
35-dars. ClassList
36-dars. Delegatsiya xaqida batafsil
37-dars. Loyiha. Tab
38-dars. Animatsiya SetTimeout SetInterval
39-dars. Loyiha. Loader
40-dars. Date bilan ishlash
41-dars. Loyiha. Aksiya
42-dars. Loyihaga qo'shimcha
43-dars. Window, doc bilan ishlash
44-dars. Loyiha. Modal
45-dars. Optimize
46-dars. Funksiya konstruktor
47-dars. Context this & closure
48-dars. Call, Apply & Bind
49-dars. Class
50-dars. Loyiha. Class
51-dars. Loyiha. Rest operator
*-*-*- MODULE 4. JAVASCRIPT SERVER -*-*-*
52-dars. Server
53-dars. Windows. XAMMP
54-dars. JSON. Chuqur clonlash
55-dars. AJAX
56-dars. Loyiha Ma'lumotlarni yuborish
57-dars. Dynamic styling
58-dars. Promise
59-dars. Promise method
60-dars. Loyiha. Fetch API
61-dars. Map, filter, reduce.
62-dars. NPM
63-dars. Json-server
64-dars. Loyiha. Async/Await
65-dars. Loyiha GetRecource
66-dars. Loyiha. AXIOS
67-dars. Loyiha. Slider
68-dars. Loyiha. Carousel
69-dars. Loyiha. Dot-Carousel
70-dars. Localstorage
71-dars. Oddiy iboralar
72-dars. Getter & Setter
73-dars. Getters / Setters
74-dars. Inkapsulatsiya Constructor
75-dars. Inkapsulatsiya Class.
76-dars. Webpack
77-dars. Loyiha. Webpack
78-dars. Module ES6
79-dars. Try Catch
80-dars. Fix bug
81-dars. Loyiha. Module optimize
82-dars. Yakun. Babel, CoreJS
Modul bo'yicha so'rovnoma
ReactJS Modulga kirish
1-dars. ReactJS nima
2-dars. Kerakli dasturlar
3-dars. NPM Haqida batafsil
Bonus. Webstorm kupon
4-dars. ReactJS dastur tuzish. React APP
5-dars. Sof ReactJS
6-dars. Mini loyiha
7-dars. JSX
8-dars. Amaliyot
9-dars. JSX hususiyatlari
10-dars. illovani modullaga bo’lish
11-dars. Shartli ko’rsatish
12-dars. Loader misoli
13-dars. Amaliyot
14-dars. Class Komponentlar haqida
15-dars. Class Komponent holati va boshqaruv
16-dars. Class komponentlarda metodlar yaratish
17-dars. Amaliyot
18-dars. Hayotiy tsikl tushunchasi va React komponenti
19-dars. Amaliyot
20-dars. To’plamlar va kalit attribut bilan ishlash
21-dars. Props
22-dars. Amaliyot
23-dars. Formalar bilan ishlash va validation
24-dars. Checkbox, radio va TextArea bilan ishlash
25-dars. Amaliyot
26-dars. CreateRef haqida batafsil
27-dars. Boshqarib bo’lmaydigon forma
28-dars. Movie App. Loyiha bilan tanishuv
28-dars. Loyiha bilan tanishuv
29-dars. Header va Footer
30-dars. API bilan tanishuv
31-dars. Umumiy film ro'yhatini yasash
32-dars. Qidiruv tugmasini yasash
33-dars. Kategoriya bo'yicha filtirlashni qoshish
34-dars. Muvaffaqiyatsiz qidiruvni boshqarish va Hostga joylash
2-LOYIHA. Twitter Analog
35-dars. Loyihaga kirish
36-dars. JSX protessori
37-dars. Komponentlar hususiyatlari
38-dars. Komponentlarni holatlari
39-dars. Ma'lumotlarni bazadan o'chirish
40-dars. Form bilan ishlash
41-dars. Dataga ma'lumot qoshish
42-dars. Qidiruv tizimi va filter
2-MODUL. Funktsiya komponentlar
43-dars. Funktsional komponentlar
44-dars. Fuktsional komponent yordamida hayot tsikili tushunchasi
45-dars. Funktsional komponentda reflardan fotdalanish
46-dars. Amaliyot. Komponentlar
47-dars. Amaliyot. 1-qism
48-dars. Amaliyot. 2-qism
49-dars. Hooks. useState, useEffect, useRef va useMemo
50-dars. Hook useCallback va useContext
51-dars. Hook useLayoutEffect
52-dars. Hook useImperativeHandle
53-dars. Hook useReducer
54-dars. Maxsus hooklar
55-dars. Hooklardan foydalanish shartlari
56-dars. Amaliyot. Hook useReducer
3-LOYIHA. Shopping card
57-dars. Loyihaga kirish
58-dars. API bilan tanishuv
59-dars. Header & Footer