Wix Studio Asoslari 1.0

10-dars: Docking, Margin va Padding – Responsiv Joylashuv Asoslari

Bu darsda siz responsiv dizayn asoslarini mukammal o‘zlashtirasiz. Aynan elementlarning ekran o‘lchamlariga mos joylashuvi dizayn sifati va foydalanish qulayligini belgilaydi.

Dars davomida siz o‘rganasiz:

• Docking: elementlar konteynerning qaysi chekkasiga yopishishini boshqarish

• Margin: element va uning chekkasi orasidagi tashqi bo‘shliq

• Padding: konteyner va ichki kontent orasidagi bo‘shliqni yaratish

• Wix Studio’da avtomatik va qo‘lda dockingni sozlash

• Responsive layoutlar uchun margin/padding birliklarini (px, %, vw, vh) tanlash

• Manfiy margin holatlarini tushunish

• Tugma, matn, sarlavha va rasm kabi elementlarni to‘g‘ri joylashtirish

Ushbu darsdan so‘ng:

• Har qanday ekran o‘lchamida dizayn buzilmasdan ishlashini ta’minlaysiz

• Muammoli elementlarni to‘g‘ri joylashtirishda professional usullarni qo‘llaysiz

• Padding va margin farqini amaliy ravishda tushunasiz

Bu dars — Stack va Grid dizayn tizimlaridan avvalgi poydevor. Uni chuqur tushunib olsangiz, keyingi darslar ancha oson kechadi.

11-dars: Stack (To‘plam) – Elementlar orasidagi tartib va barqaror masofa

Ushbu darsda siz Wix Studio’da Stack vositasi yordamida elementlarni barqaror va tartibli joylashtirishni o‘rganasiz.

Dars davomida siz quyidagilarni bilib olasiz:

• Stack nima va qachon ishlatiladi

• Ekran o‘lchami o‘zgarganda elementlar joylashuvini qanday nazorat qilish kerak

• Vertikal va gorizontal Stack-larni yaratish

• Stack ichiga yangi element qo‘shish yoki mavjudlarini chiqarib olish

• Elementlar orasidagi masofani sozlash (manual/Shift bilan)

• Breakpoint-larda Stack pozitsiyasini o‘zgartirish

• Ichki Stacklar bilan murakkab dizaynlar yaratish

• “Use on All Breakpoints” va “Hide” funksiyalari

Dars yakunida siz:

• Sayt dizaynini yanada tartibli, moslashuvchan va professional ko‘rinishga olib kelasiz

• Matn, tugma, rasm kabi elementlar orasida masofani buzmasdan dizayn yaratishingiz mumkin

• Stack orqali breakpointlar orasidagi muvofiqlikni saqlashni o‘rganasiz

Stack — bu responsiv dizaynning soddalashtirilgan va kuchli vositasidir. Uni to‘g‘ri ishlatishni bilgan foydalanuvchi keyingi bosqichdagi Grid va Advanced Layout-larga osonlik bilan o‘tadi.

12-dars: Section Grid yordamida professional va moslashuvchan bo‘limlar yaratish

Bu darsda siz Section Grid vositasi orqali Wix Studio’da zamonaviy va responsiv bo‘limlarni qanday yaratishni o‘rganasiz.

Darsda o‘rganasiz:

• Section Grid nima va qanday ishlaydi

• Grid’ni qo‘lda yoki preset orqali sozlash

• Hujayralar (cells) qo‘shish, bo‘lish va o‘lchamini o‘zgartirish

• Rasm, matn, tugma kabi kontentlarni Grid ichiga joylashtirish

• Hujayralar orasidagi horizontal va vertical gap ni sozlash

• Grid atrofida padding bilan chuqurlik hissi yaratish

• Grid ichida elementlarni Swap (joy almashtirish) qilish

• Har bir breakpoint uchun (desktop, tablet, mobile) alohida dizayn qilish

• Kichik ekranlarda Grid’ni row formatiga o‘tkazish

• Section Grid’ni istalgan payt CSS Gridga aylantirish

Dars natijasida siz:

• Wix Studio’da professional joylashtirilgan, moslashuvchan bo‘limlar yarata olasiz

• Har qanday ekran o‘lchamida aniq, barqaror va tartibli dizaynni saqlab qolasiz

• Section Grid va breakpointlarga moslashuv asoslarini mustahkamlaysiz

Grid bu — zamonaviy dizaynda ustunlik beradigan asosiy vositalardan biridir. Bu dars keyingi bosqich — CSS Grid va Repeaters — uchun poydevor bo‘lib xizmat qiladi.

13-dars: Repeaters bilan dinamik dizayn yaratish (A-B pattern + CMS)

Bu darsda siz Repeaters yordamida Wix Studio’da bir xil dizaynli, ammo turli mazmunli bloklarni qanday yaratishni o‘rganasiz. Repeaters – bu saytingizda ko‘p elementli, tartibli va moslashuvchan tuzilma yaratish uchun eng kuchli vositalardan biridir.

Darsda o‘rganasiz:

• Repeaters nima va uni qanday qo‘shish mumkin

• Layout (joylashuv), yo‘nalish, elementlar soni va spacing (bo‘shliqlar)ni sozlash

• Har bir element ichidagi kontentni mustaqil tahrirlash

• Har bir breakpoint (desktop, tablet, mobile) uchun Repeaters dizaynini moslashtirish

• A-B pattern (ikkilamchi dizayn) yaratish va elementlar orasidagi dizayn farqlarini sozlash

• A va B design o‘rtasida: ranglar, shrift, radius, interaktivlik kabi farqlar kiritish

• Repeaters ni CMS (Content Management System) bilan bog‘lash va dinamik tarkib yaratish

• CMS kolleksiyadan avtomatik tarzda yangi bloklar yaratish

• AB pattern va CMS bilan ishlashning breakpointlarga ta’siri

Dars natijasida siz:

• Responsive va modular bloklarni tez va samarali yaratishni o‘rganasiz

• Har bir ekran o‘lchamiga mos tartibda dizayn qilishni bilib olasiz

• Sayt mazmunini CMS bilan boshqariladigan dinamik Repeaters orqali avtomatlashtira olasiz

Repeaters – bu professional veb-dizaynning asosiy quroli. Dizaynni tartibli, optimallashtirilgan va CMS bilan boshqariladigan qilishni istasangiz, ushbu dars siz uchun muhim bo‘ladi.

14-dars. Amaliy mashg'ulot 2 – Grid va Repeater bilan ilg‘or amaliy mashq

Ushbu darsda siz avvalgi darslarda o‘rganilgan bilimlarni amaliyotda mustahkamlaysiz. Stack, Grid, Docking, Repeaters kabi vositalarni birgalikda ishlatib, to‘liq responsiv bo‘limlar yaratasiz.

Darsda quyidagilarni bajarasiz:

Bo‘lim: 3 ta katakchali Grid yaratish

• 3 ustunli Section Grid qo‘shasiz

• Har bir katakka turli kontent (rasm, matn, tugma) joylashtirasiz

• Dizaynni desktopda gorizontal, mobilda vertikal bo‘lishi uchun moslashtirasiz

• Breakpoint o‘zgarishlariga qanday javob berishini sozlaysiz

Bo‘lim: Repeater + A-B pattern bilan matnli bo‘lim

• Repeater yaratib, unga matnli kartochkalar qo‘shasiz

• A-B dizayn naqshi (AB pattern) qo‘llaysiz – elementlar navbat bilan turli dizaynda bo‘ladi

• Har bir breakpoint uchun kartochkalar sonini moslashtirasiz (masalan, desktop – 4ta, tablet – 2ta, mobil – 1ta)

• Repeater-ni responsive va modular uslubda sozlaysiz

Dars yakunida siz:

• Grid va Repeater asosida murakkabroq bo‘limlarni yaratishni o‘rganasiz

• Har xil breakpointlarda dizayn moslashuvini to‘g‘ri sozlashni bilib olasiz

• Real dizayn loyihasi yaratishda foydalaniladigan kombinatsiyalashgan yondashuvni amalda qo‘llaysiz

Bu mashq sizni haqiqiy loyihalar uchun tayyorlaydi. Professional dizaynerlar ishlatadigan tartibga solish texnikalarini o‘zlashtirasiz!

15-dars. Amaliy mashg'ulot 2 - Dizayn bo'yicha ko'rsatma

Bu darsda siz sayt uchun ikkita responsiv bo‘lim yaratishni o‘rganasiz.

Dars ikki asosiy qismdan iborat:

1. Grid bo‘limi yaratish

• Uchta katakchadan iborat Section Grid qo‘shish

• Har bir katakchani rang, padding va kontent bilan to‘ldirish

• Planshet va mobil uchun grid tartibini moslashtirish

1. Repeater bo‘limi yaratish

• Matn elementlari va repeater qo‘shish

• Repeater elementlarini A-B dizayn naqshida sozlash

• Breakpointlarga moslashuvni optimallashtirish

Dars yakunida siz:

• Responsiv grid va repeater bo‘limlarini mustaqil yaratish qobiliyatiga ega bo‘lasiz

• Har bir ekran o‘lchamida dizaynni moslashtirishni o‘rganasiz

16-dars: Breakpointlar bilan Ishlash

• Breakpointlar yordamida sayt turli ekran o‘lchamlariga moslashadi: Desktop (1001+ px), Planshet (751–1000 px), Mobil (320–750 px).

• Har bir breakpointda elementlarning o‘lchami, joylashuvi va dizayni alohida boshqarilishi mumkin.

• Yuqori breakpointlarda qilingan o‘zgarishlar pastki breakpointlarga avtomatik o‘tadi (cascading), ammo pastkidan yuqoriga ta’sir qilmaydi.

• Override funksiyasi bilan pastki breakpointlarda mustaqil sozlash mumkin.

• Tuzilishga ta’sir qiluvchi o‘zgarishlar (element qo‘shish, o‘chirish, stack yaratish) barcha breakpointlarga ta’sir qiladi.

• Elementni o‘chirish o‘rniga “Hide” funksiyasidan foydalanish tavsiya etiladi, bu faqat tanlangan breakpointda amal qiladi.

• Yangi elementlar faqat qo‘shilgan breakpointda ko‘rinadi, yuqorilarida avtomatik yashiriladi.

17-dars: Responsive AI bilan Ishlash
Responsive AI yordamida saytning har bir breakpoint uchun dizaynini tez va avtomatik moslashtirish mumkin.

• AI-ni butun bo‘limga yoki faqat mobil breakpointga qo‘llash mumkin.

• AI sahifadagi elementlarni analiz qilib, gridlar va stacklar kabi struktura elementlarini avtomatik qo‘shadi.

• O‘zgartirishlar real vaqt rejimida ko‘rsatiladi; natija yoqmasa bekor qilish mumkin.

• AI tahrirlangan dizaynni qo‘lda ham o‘zgartirish mumkin, lekin AI qayta ishga tushirilganda o‘zgarishlar yo‘qolishi mumkin.

• Cascading qoidasiga ko‘ra, yuqori breakpointdagi o‘zgarishlar pastki breakpointlarga o‘tadi, ammo override qilingan elementlarda bu ta’sir bo‘lmaydi.

• Override-larni olib tashlash uchun “Remove Overrides” opsiyasidan foydalaning.

18-dars: Amaliy mashg'ulot | Responsive AI

Ushbu darsda siz to‘rtinchi bo‘limni qurib, Responsive AI yordamida mobil dizaynni avtomatik sozlashni o‘rganasiz.
Bo‘limda Text Mask, rasm, paragraf va tugma bo‘ladi.

• Elementlar avval desktopda joylashtiriladi.

• Keyin AI faqat mobil breakpoint uchun mos dizayn yaratadi.

• Desktop va tablet versiyalari o‘zgarishsiz qoladi.

• Zarur bo‘lsa, qo‘lda tahrirlash ham mumkin.

19-dars: Amaliy mashg'ulot - Mobil Breakpoint uchun Responsive AI

Ushbu darsda Responsive AI yordamida mobil versiya uchun dizayn yaratishni o‘rganasiz.
Bo‘limga text mask, rasm, matn va tugma qo‘shiladi.

• Dastlab elementlar desktopda joylashtiriladi.

• So‘ng mobil breakpointga o‘tib, AI yordamida dizayn avtomatik moslashtiriladi.

• Keyin, agar kerak bo‘lsa, qo‘shimcha qo‘lda tahrirlash ham amalga oshiriladi.

Challenge yakunida siz mobil uchun mukammal dizayn yaratgan bo‘lasiz.

20-dars: Sticky va Pinned Pozitsiyalar

Ushbu darsda sahifadagi elementlarga Sticky va Pinned joylashuv turlarini qanday qo‘llashni o‘rganasiz.

• Pinned pozitsiya — elementni ekranga mahkamlab qo‘yadi, foydalanuvchi sahifani skroll qilganda u joyidan siljimaydi.

• Sticky pozitsiya — element skroll paytida ma’lum nuqtaga yetganda “yopishib qoladi” va ota konteyner chegarasida harakatlanadi.

Bu joylashuv turlari header, menyu, tugma kabi muhim elementlarni doim ko‘rinib turishini yoki foydalanuvchi e’tiboriga tushishini ta’minlash uchun foydalidir.

Dars davomida ularning farqlari va breakpointlardagi ta’siri ham tushuntiriladi.

21-dars: Interaktivlik va Animatsiyalar

Ushbu darsda sahifangizga interaktiv animatsiyalar qo‘shishni o‘rganasiz.

Siz elementlarga quyidagi hodisalar bo‘yicha harakatlar berishingiz mumkin:

• Entrance (kirish) – sahifaga kirganda harakat.

• Hover – sichqoncha olib borilganda o‘zgarish.

• Click – bosilganda reaksiya.

• Scroll – skrollga javob.

• Loop – cheksiz takrorlanadigan harakat.

• Custom – elementlarga bosqichma-bosqich o‘zgarish berish.

Har bir trigger uchun tayyor effektlar mavjud, ularni sozlab, yo‘nalish, tezlik, davomiylik kabi parametrlarni moslashtirishingiz mumkin.

Bu darsdan so‘ng siz saytga hayot bag‘ishlovchi, foydalanuvchini jalb qiluvchi animatsiyalarni qo‘shishni bilasiz.

22-dars: Amaliy mashg'ulot - Harakat va Interaktivlik Qo‘shish

Ushbu darsda sahifamizga animatsiyalar va interaktiv harakatlar qo‘shamiz:

• Sarlavhaga kirish (Entrance) animatsiyasi beramiz.

• Pastdagi o‘q uchun doimiy harakat (Loop) yaratamiz.

• A va B Repeater elementlariga ikki xil hover effekti qo‘shamiz.

• Matn maskasi skroll qilinganda siljiydi (Scroll animation).

• Header pin qilinadi va skroll effekti qo‘shiladi.

Bu darsda siz sahifangizni jonlantiradigan va foydalanuvchi e’tiborini jalb qiladigan interaktiv elementlar bilan ishlashni o‘rganasiz.

23-dars: Amaliy mashg'ulot - Animatsiyalar va Interaktivlik

Ushbu darsda saytimizga harakat va jonlilik qo‘shamiz:

• Sarlavha uchun kirish (Entrance) animatsiyasi

• O‘qcha elementi uchun loop (takrorlanuvchi) animatsiya

• A va B Repeater kartalari uchun alohida hover effektlar

• Text mask uchun scroll animatsiyasi

• Header pinned bo‘lib qoladi va scroll paytida shaffoflik o‘zgaradi

Endi sayt jonli ko‘rinishda ishlaydi va turli breakpointlarda o‘zini moslashtiradi.

Keyingi darsda: Advanced Sizing va CSS Grid bilan tanishamiz!

24-dars: Advanced Sizing

Ushbu darsda Advanced Sizing funksiyasi bilan tanishamiz:

• Elementlarga foiz (%), VW/VH, calc kabi o‘lchov birliklarini qo‘llash

• Breakpointlarga mos holda aniq nazorat o‘rnatish

• Har bir elementni Advanced rejimga o‘tkazish va tahrirlash

• "Mixed" belgisining ma’nosi va “Use on all Breakpoints” opsiyasi

Endi dizayningiz har bir ekranga ancha aniq va moslashuvchan tarzda javob beradi.

25-dars: CSS Grid vs Section Grid

Ushbu darsda Section Grid va CSS Grid farqlarini o‘rganamiz:

• Section Grid – avtomatik va soddalashtirilgan tartib

• CSS Grid – kengaytirilgan sozlamalar va aniq nazorat

CSS Grid bilan nima qilsa bo‘ladi?

• Grid hujayralarini birlashtirish

• Cheklanmagan ustun/qatorlar

• Breakpointlarga mos noyob tartiblar

• Foiz, fr, vw/vh, max-content kabi aniq birliklar bilan ishlash

Dars davomida:

• CSS Grid qo‘shishni o‘rganasiz

• Rasm, sarlavha, paragraf va tugmalarni gridga joylashtirishni bilib olasiz

• Section Grid’ni CSS Grid’ga aylantirishni amalda ko‘rasiz

Keyingi darsda: Professional layout va grid dizaynini yanada mukammallashtirish!

26-dars: Footer yaratish va saytni yakunlash

Ushbu darsda siz o‘z saytingizga footer (pastki bo‘lim) qo‘shasiz va uni CSS Grid yordamida professional tarzda sozlashni o‘rganasiz.

Bu darsda:

• CSS Grid bilan uch qatorli footer yaratamiz:

  • Yuqori qatordagi elementlar balandligi kontentga moslashadi

  • Pastki qator har breakpointda bir xil balandlikda qoladi

  • Mobilda har qator mustaqil balandlikda bo‘ladi

• Saytdagi menyuni yakunlaymiz:

  • Har bir menyu elementi sahifadagi tegishli bo‘limga ankor (anchor) orqali bog‘lanadi

  • Saytda smooth scroll (yumshoq harakat) hosil qilinadi

Bu dars orqali saytni yakuniy holatga olib kelish, foydalanuvchi navigatsiyasi va professional dizayn asoslarini mustahkamlaysiz.

Kurs yakunida siz to‘liq funksional, adaptiv va interaktiv saytga ega bo‘lasiz!

Final Dars: Footer Dizayni, Menu Ankorlar va Saytni Yakunlash

Ushbu darsda siz o‘zingizning Wix Studio sayt dizayningizni to‘liq yakunlaysiz!

Dars mazmuni:

1. Footer dizayni va CSS Grid qo‘llanilishi:

• 2x2+1 layout bilan moslashuvchan grid tuzilmasi yaratamiz.

• Katta logotip, kontakt ma'lumotlari, ijtimoiy ikonalar va navigatsion elementlar joylashtiriladi.

• CSS Grid yordamida har bir qator va ustun o‘lchami aniq belgilanadi.

• Advanced sizing orqali kichik ekranlarda logotip buzilmasligi ta’minlanadi.

2. Responsivlik va mobil moslashuv:

• Mobil breakpoint’da layout rows tarziga o‘tkaziladi.

• Har bir qator uchun min/max height belgilanadi.

• Ortiqcha grid qatorlari olib tashlanadi, dizayn tozalanadi.

3. Anchor linklar va menyu sozlash:

• Har bir sahifa bo‘limiga anchor belgilanadi.

• Menu itemlari ushbu anchor’lar bilan bog‘lanadi.

• Navigatsiya smooth scroll bilan ishlaydi.

• Menu kengligi va logotip fixed qilib sozlanadi.

Natijada:

• Sayt to‘liq tayyor, har bir ekran o‘lchamida ideal ko‘rinishda.

• Siz Wix Studio’da professional, responsiv va interaktiv real sayt yaratish jarayonini to‘liq egalladingiz!

Bu bilan kurs rasman yakunlanadi! Endi siz o‘rgangan ko‘nikmalar asosida o‘z mijozlaringiz yoki shaxsiy loyihalaringiz uchun saytlar yaratishga tayyorsiz!