WisarWisar
Hamroh materiallar/Intervyu52 daqiqa

Texnik intervyu: Web asoslari, HTML va CSS

Bu bo'lim full-stack dasturchi uchun frontend poydevori bo'yicha chuqur intervyu tayyorgarligidir. U web qanday ishlashidan (HTTP, brauzer, render) tortib HTML semantikasi va CSS layout tizimlarigacha bo'lgan real intervyu savollarini qamrab oladi.

Har bir savol quyidagicha tuzilgan:

  • Aniq ta'rif — tushuncha nima ekani.
  • Mexanizm — ichkarida qanday ishlashi (bu yerda nomzodlar ajralib turadi).
  • Kod/misol — kerak bo'lsa.
  • Tuzoq — nomzodlar ko'p adashadigan joy.
  • Follow-up — intervyuchi keyin nima so'raydi.

Belgilar: oson · o'rta · qiyin. Qavs ichida — (daraja): qaysi bosqichdagi nomzoddan kutiladi.

Qanday foydalanish kerak

  • Avval savolni yoping, o'zingiz ovoz chiqarib javob bering — intervyu bu bilimni gapirib bera olishdir.
  • Keyin javobni o'qing, ayniqsa Mexanizm qismini: aynan shu chuqurlik sizni junior'dan ajratadi.
  • Tuzoqlarni yodda tuting — intervyuchilar aynan shularni tekshirish uchun savol beradi.
  • Follow-uplarga ham tayyor bo'ling: bitta savol hech qachon bitta bo'lmaydi, u zanjir.

1-QISM. Web asoslari va HTTP

Bu bo'lim: URL'dan sahifagacha bo'lgan yo'l, HTTP protokoli (metodlar, status kodlar, sarlavhalar), HTTP/1.1 2 3 evolutsiyasi, HTTPS/TLS, CORS, va holatni saqlash (cookie, session, storage).

S: Foydalanuvchi brauzerga https://example.com yozib Enter bosgach, nima sodir bo'ladi? Batafsil ayting. (Junior/Middle)

J:

  • Ta'rif: Bu — web'ning "poydevor" savoli. Intervyuchi sizning tizimni qanchalik keng ko'rishingizni sinaydi.
  • Mexanizm (bosqichma-bosqich):
    1. URL tahlili — brauzer sxema (https), host (example.com), port, yo'lni ajratadi.
    2. DNS qidiruv — host nomi IP manzilga aylantiriladi. Avval brauzer keshi OS keshi router ISP DNS resolver root/TLD/authoritative serverlar tekshiriladi.
    3. TCP ulanish — IP:port'ga TCP three-way handshake (SYN SYN-ACK ACK) o'rnatiladi.
    4. TLS handshake (HTTPS bo'lgani uchun) — sertifikat tekshiriladi, kalitlar almashadi, shifrlangan kanal quriladi.
    5. HTTP so'rov — GET / HTTP/2 va sarlavhalar yuboriladi.
    6. Server javobi — status kod + sarlavhalar + HTML body qaytadi.
    7. Render — brauzer HTML'ni parse qilib DOM, CSS'ni parse qilib CSSOM quradi, ularni birlashtirib render tree hosil qiladi, layout (reflow) va paint bosqichlaridan o'tib ekranga chizadi. JS yo'lda topilsa, uni yuklab bajaradi.
  • Tuzoq: Ko'p nomzod faqat "DNS server HTML" deb qisqa gapiradi. Kuchli javob DNS keshlash bosqichlari, TCP/TLS handshake va render pipelineni ham eslatadi.
  • Follow-up: "DNS qanday keshlanadi?", "TLS handshake ichida aynan nima almashadi?", "Render bosqichida nima birinchi chiziladi?"

S: HTTP nima va u qanday xususiyatlarga ega? (Junior)

J:

  • Ta'rif: HTTP (HyperText Transfer Protocol) — mijoz (brauzer) va server o'rtasida ma'lumot almashish uchun application-layer protokoli. So'rov–javob (request–response) modelida ishlaydi.
  • Mexanizm: Mijoz so'rov (metod + URL + sarlavhalar + body) yuboradi, server javob (status kod + sarlavhalar + body) qaytaradi. HTTP stateless (holatsiz) — har bir so'rov mustaqil, server oldingi so'rovni "eslamaydi" (holat cookie/token orqali qo'shiladi).
  • Tuzoq: "HTTP TCP'da ishlaydi" deyish HTTP/1.1 va 2 uchun to'g'ri, lekin HTTP/3 UDP (QUIC) ustida ishlaydi. Buni bilish sizni ajratadi.
  • Follow-up: "Stateless bo'lsa, tizim foydalanuvchini qanday eslab qoladi?" (javob: cookie/session/token).

S: HTTP metodlarini sanang va farqini tushuntiring (GET, POST, PUT, PATCH, DELETE). (Junior)

J:

  • GET — resursni olish. Parametrlar URL'da, body yo'q (odatda), keshlanadi, xavfsiz (safe) va idempotent.
  • POST — yangi resurs yaratish yoki server holatini o'zgartirish. Body'da ma'lumot, keshlanmaydi, idempotent emas (ikki marta yuborsangiz ikkita yozuv paydo bo'lishi mumkin).
  • PUT — resursni to'liq almashtirish (butun obyektni yuborasiz). Idempotent.
  • PATCH — resursni qisman yangilash (faqat o'zgargan maydonlar). Ko'pincha idempotent, lekin kafolatlanmagan.
  • DELETE — resursni o'chirish. Idempotent.
  • Tuzoq: PUT bilan PATCH farqini adashtirish. PUT = to'liq almashtirish, PATCH = qisman. Yana: "GET body yubora olmaydi" — spetsifikatsiya bo'yicha yuborish mumkin, lekin ko'p server/proxy uni e'tiborsiz qoldiradi, shuning uchun amalda ishlatilmaydi.
  • Follow-up: "Idempotent nima? PUT nega idempotent, POST nega yo'q?"

S: Idempotent va safe metod nima? Qaysi metodlar shunday? (Middle)

J:

  • Safe (xavfsiz): Server holatini o'zgartirmaydi (faqat o'qiydi). GET, HEAD, OPTIONS.
  • Idempotent: Bir xil so'rovni bir necha marta yuborish natijasi bir marta yuborishga teng (server holati bir xil qoladi). GET, PUT, DELETE, HEAD.
  • Mexanizm: DELETE /users/5 ni 3 marta yuborsangiz — foydalanuvchi baribir o'chgan (natija bir xil). POST /users ni 3 marta yuborsangiz — 3 ta foydalanuvchi paydo bo'ladi (idempotent emas).
  • Tuzoq: "Idempotent = bir xil javob qaytaradi" deb o'ylash. Yo'q — idempotent holat (state) haqida, javob kodi haqida emas. DELETE birinchi safar 200, ikkinchi safar 404 qaytarishi mumkin, lekin baribir idempotent (holat o'zgarmaydi).
  • Follow-up: "Nega bu tarmoq muhandisligida muhim?" (javob: retry/qayta urinishlar xavfsizligi).

S: HTTP status kodlarini kategoriyalari bo'yicha tushuntiring. (Junior)

J:

  • 1xx (Informational) — so'rov qabul qilindi, jarayon davom etmoqda (100 Continue, 101 Switching Protocols).
  • 2xx (Success) — muvaffaqiyat: 200 OK, 201 Created (yangi resurs), 204 No Content (muvaffaqiyat, lekin body yo'q).
  • 3xx (Redirection) — qayta yo'naltirish: 301 doimiy, 302/307 vaqtinchalik, 304 Not Modified (kesh yaroqli).
  • 4xx (Client Error) — mijoz xatosi: 400 noto'g'ri so'rov, 401 autentifikatsiya yo'q, 403 ruxsat yo'q, 404 topilmadi, 409 konflikt, 422 validatsiya xatosi, 429 juda ko'p so'rov.
  • 5xx (Server Error) — server xatosi: 500 ichki xato, 502 bad gateway, 503 servis ishlamayapti, 504 gateway timeout.
  • Tuzoq: 401 va 403 ni adashtirish. 401 = "kimligingiz noma'lum, login qiling"; 403 = "kimligingiz ma'lum, lekin ruxsatingiz yo'q".
  • Follow-up: "301 va 302 SEO uchun qanday farq qiladi?" (301 link ranking'ni yangi manzilga o'tkazadi).

S: 301 va 302 redirect farqi nima? Qachon qaysi birini ishlatasiz? (Middle)

J:

  • 301 Moved Permanently — resurs doimiy ko'chirildi. Brauzer va qidiruv tizimlari yangi URL'ni keshlaydi va eslab qoladi. SEO "juice" (ranking) yangi URL'ga o'tadi.
  • 302 Found / 307 Temporary Redirect — resurs vaqtinchalik boshqa joyda. Keshlanmaydi, eski URL asosiy bo'lib qoladi.
  • Mexanizm: Farq — Location sarlavhasi bilan bir xil, lekin keshlash va SEO xatti-harakati boshqacha. 301 ni brauzer agressiv keshlaydi.
  • Tuzoq: Vaqtinchalik holatda 301 ishlatib qo'yish — brauzer uni keshlaydi va keyin qaytarib bo'lmaydi, foydalanuvchilar eski manzilga qaytolmaydi. 302 va 307 farqi: 307 metodni saqlaydi (POST POST), 302 esa ba'zi brauzerlarda POST'ni GET'ga o'zgartiradi.
  • Follow-up: "Domenni ko'chirsangiz qaysi kod?" (301).

S: HTTP sarlavhalari (headers) nima uchun kerak? Muhimlarini sanang. (Middle)

J:

  • Ta'rif: Sarlavhalar — so'rov/javob haqidagi metama'lumot (kalit: qiymat juftliklari). Body'dan alohida yuboriladi.
  • Muhim so'rov sarlavhalari: Host, User-Agent, Accept (qaysi format kutilyapti), Authorization (token), Cookie, Content-Type, Accept-Encoding (gzip/br).
  • Muhim javob sarlavhalari: Content-Type, Content-Length, Set-Cookie, Cache-Control, ETag, Location, Access-Control-Allow-Origin (CORS), Content-Encoding.
  • Tuzoq: Content-Type ni noto'g'ri qo'yish — masalan API application/json o'rniga text/html yuborsa, mijoz JSON'ni parse qilmaydi.
  • Follow-up: "Cache-Control: no-cache va no-store farqi nima?" (no-cache = keshla, lekin ishlatishdan oldin server bilan tekshir; no-store = umuman saqlama).

S: HTTP/1.1, HTTP/2 va HTTP/3 farqini tushuntiring. (Senior)

J:

  • HTTP/1.1: Matnli protokol. Bitta TCP ulanishda so'rovlar navbatma-navbat (head-of-line blocking). Ko'p resurs uchun brauzer 6 tagacha parallel ulanish ochadi. Keep-alive bilan ulanish qayta ishlatiladi.
  • HTTP/2: Binary protokol. Multiplexing — bitta TCP ulanishda ko'p so'rov parallel (stream'lar orqali). Header compression (HPACK). Server push (server so'ralmagan resursni oldindan yuboradi — hozir deprecated). Lekin TCP darajasida head-of-line blocking qoladi (bir paket yo'qolsa, hamma stream kutadi).
  • HTTP/3: QUIC (UDP ustida) protokolida ishlaydi. TCP o'rniga QUIC ishlatgani uchun TCP-darajali head-of-line blocking yo'q — bir stream'dagi paket yo'qolsa boshqalar davom etadi. TLS 1.3 ichiga qurilgan, ulanish 0-RTT/1-RTT'da tez o'rnatiladi.
  • Tuzoq: "HTTP/2 head-of-line blocking'ni butunlay yechdi" deyish. Yo'q — u HTTP-darajasida yechdi, lekin TCP-darajasida qoldi. Aynan buni HTTP/3 (QUIC) yechadi.
  • Follow-up: "Nega HTTP/3 UDP tanladi?", "QUIC ulanishni qanday tez o'rnatadi?"

S: HTTPS va HTTP farqi nima? TLS qanday ishlaydi? (Middle/Senior)

J:

  • Ta'rif: HTTPS = HTTP + TLS (Transport Layer Security) shifrlash qatlami.
  • TLS uchta narsani ta'minlaydi:
    1. Maxfiylik (encryption) — ma'lumot yo'lda o'qib bo'lmaydi.
    2. Yaxlitlik (integrity) — yo'lda o'zgartirilmaganini kafolatlaydi.
    3. Autentifikatsiya — sertifikat orqali server haqiqiyligini tasdiqlaydi.
  • Mexanizm (TLS handshake, soddalashtirilgan):
    1. Mijoz ClientHello (qo'llab-quvvatlaydigan shifr to'plamlari) yuboradi.
    2. Server ServerHello + sertifikat (ichida ochiq kalit) qaytaradi.
    3. Mijoz sertifikatni CA (Certificate Authority) orqali tekshiradi.
    4. Asimmetrik shifrlash bilan simmetrik sessiya kaliti xavfsiz almashtiriladi.
    5. Keyingi barcha ma'lumot tez simmetrik kalit bilan shifrlanadi.
  • Tuzoq: "TLS hamma narsani asimmetrik shifrlaydi" deyish. Yo'q — asimmetrik faqat kalit almashish uchun (sekin), keyin butun trafik simmetrik shifrlanadi (tez). Bu gibrid model.
  • Follow-up: "CA nega ishoniladi?", "Self-signed sertifikat nega brauzerda ogohlantirish beradi?"

S: CORS nima? Nega kerak va qanday ishlaydi? (Middle/Senior)

J:

  • Ta'rif: CORS (Cross-Origin Resource Sharing) — brauzer mexanizmi bo'lib, bir origin'dagi (domen+port+sxema) sahifa boshqa origindagi resursga so'rov yuborishiga ruxsat berish/berilmaslikni boshqaradi.
  • Mexanizm: Brauzerda Same-Origin Policy (SOP) amal qiladi — xavfsizlik uchun kross-origin so'rovlar cheklanadi. CORS — serverning "menga bu origin'dan so'rov yuborish mumkin" degan ruxsatini javob sarlavhalari orqali beradi:
    • Access-Control-Allow-Origin: https://myapp.com
    • Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Credentials.
  • Preflight: "Murakkab" so'rovlar (PUT/DELETE, maxsus header, Content-Type: application/json) oldidan brauzer OPTIONS so'rovini yuboradi — serverdan ruxsat so'raydi. Server ruxsat bersa, asosiy so'rov ketadi.
  • Tuzoq: "CORS xatosini frontend'da tuzatish mumkin" deb o'ylash. Yo'q — CORS ruxsatini faqat server beradi (javob sarlavhalari orqali). Frontend hech narsa qila olmaydi. Yana: CORS brauzer cheklovi — Postman yoki backend'dan so'rov CORS'ga bog'liq emas.
  • Follow-up: "Preflight qachon yuboriladi?", "Access-Control-Allow-Origin: * bilan credentials: true nega birga ishlamaydi?" (xavfsizlik — wildcard bilan cookie yuborib bo'lmaydi).

S: Same-Origin Policy nima? Origin nima? (Middle)

J:

  • Origin = sxema + host + port uchligi. https://app.com:443 va http://app.com — turli origin (sxema farq qiladi). https://app.com va https://api.app.com — turli origin (host farq qiladi).
  • Same-Origin Policy: Brauzer xavfsizlik siyosati — bir origin'dagi skript boshqa origin'ning DOM'iga, cookie'siga yoki javobiga (odatda) kira olmaydi. Bu XSS/CSRF hujumlarni cheklaydi.
  • Tuzoq: Faqat domen'ni tekshirib, port yoki sxemani unutish. http va https — turli origin.
  • Follow-up: "SOP'ga qanday istisnolar bor?" (<img>, <script>, <link> teglari kross-origin resurs yuklashi mumkin — CORS bu istisnolarni boshqaradi).

S: Cookie nima va u qanday ishlaydi? (Junior/Middle)

J:

  • Ta'rif: Cookie — server brauzerga saqlash uchun yuboradigan kichik matn ma'lumot. Keyingi har bir so'rovda avtomatik shu domenga qaytariladi.
  • Mexanizm: Server javobda Set-Cookie: session=abc123 yuboradi brauzer saqlaydi keyingi so'rovlarda Cookie: session=abc123 sarlavhasini avtomatik qo'shadi. Shu tariqa stateless HTTP'ga "holat" qo'shiladi.
  • Muhim atributlar:
    • HttpOnly — JS o'qiy olmaydi (XSS'dan himoya).
    • Secure — faqat HTTPS orqali yuboriladi.
    • SameSite (Strict/Lax/None) — kross-sayt so'rovlarda yuborilishini boshqaradi (CSRF'dan himoya).
    • Expires/Max-Age — yashash muddati.
    • Domain/Path — qaysi manzillarga yuborilishi.
  • Tuzoq: Sezgir tokenni HttpOnlysiz cookie yoki localStorage'da saqlash — XSS orqali o'g'irlanadi. Autentifikatsiya cookie'lari doim HttpOnly + Secure + SameSite bo'lishi kerak.
  • Follow-up: "SameSite=Lax va Strict farqi?", "CSRF'ni cookie qanday himoya qiladi?"

S: localStorage, sessionStorage va cookie farqini tushuntiring. (Middle)

J:

Xususiyat Cookie localStorage sessionStorage
Sig'im ~4 KB ~5–10 MB ~5–10 MB
Serverga yuboriladimi Ha, har so'rovda Yo'q Yo'q
Yashash muddati Belgilangan (Expires) Doimiy (qo'lda o'chirilguncha) Tab yopilguncha
JS'dan kirish Ha (HttpOnly'dan tashqari) Ha Ha
Ishlatilishi Auth, sessiya UI holat, kesh Vaqtinchalik forma holati
  • Mexanizm: Cookie avtomatik so'rovga qo'shiladi (shuning uchun auth uchun qulay), storage esa faqat JS orqali o'qiladi va serverga qo'lda yuboriladi.
  • Tuzoq: JWT tokenni localStorage'da saqlash keng tarqalgan, lekin XSS'ga zaif — skript o'qiy oladi. HttpOnly cookie xavfsizroq. Yana: sessionStorage har tabda alohida (bir tabdagi qiymat boshqasida yo'q), localStorage esa domen bo'yicha umumiy.
  • Follow-up: "Token'ni qayerda saqlaysiz va nega?", "sessionStorage ikki tabda bo'linadimi?"

S: Session va token (JWT) autentifikatsiya farqi nima? (Middle/Senior)

J:

  • Session-based: Server login'da sessiya yaratadi va uni xotira/DB'da saqlaydi, mijozga faqat sessiya ID (cookie'da) beradi. Har so'rovda server ID bo'yicha sessiyani qidiradi. Stateful — server holatni saqlaydi.
  • Token-based (JWT): Server imzolangan token (foydalanuvchi ma'lumotini o'z ichiga olgan) beradi. Mijoz uni har so'rovda Authorization: Bearer ... da yuboradi. Server tokenning imzosini tekshiradi — DB'ga qaramaydi. Stateless — masshtablash oson.
  • Tuzoq: JWT'ni "bekor qilib bo'lmasligi" muammosini unutish. Token muddati tugaguncha yaroqli qoladi — logout/bloklashda alohida blacklist yoki qisqa muddat + refresh token kerak. Yana: JWT shifrlanmagan, faqat imzolangan — ichidagi ma'lumot Base64'da ochiq o'qiladi, sezgir ma'lumot solmang.
  • Follow-up: "JWT'ni qanday bekor qilasiz?", "Refresh token nima uchun kerak?"

S: REST API nima? Uning tamoyillarini ayting. (Middle)

J:

  • Ta'rif: REST (Representational State Transfer) — HTTP asosidagi API dizayn uslubi. Resurslar URL bilan ifodalanadi, ular ustida HTTP metodlari orqali amal bajariladi.
  • Tamoyillari:
    • Stateless — har so'rov mustaqil, server sessiya holatini saqlamaydi.
    • Resurs-yo'naltirilgan — /users/5/orders kabi ot (noun) bilan, fe'l bilan emas (/getUser emas).
    • HTTP metodlari amalni bildiradi: GET (o'qish), POST (yaratish), PUT/PATCH (yangilash), DELETE.
    • Standart status kodlar ishlatiladi.
    • Ko'rinishlar — bir resurs JSON/XML formatda qaytishi mumkin.
  • Tuzoq: URL'ga fe'l qo'yish (/createUser, /deletePost) — bu REST emas. Amal metod bilan, resurs URL bilan.
  • Follow-up: "REST va GraphQL farqi?", "REST'ning kamchiligi nima?" (over/under-fetching).

S: GET so'rovi keshlanadi, POST keshlanmaydi — nega? (Middle)

J:

  • Mexanizm: GET safe va idempotent — ma'lumotni faqat o'qiydi, holatni o'zgartirmaydi. Shuning uchun bir xil GET natijasini brauzer/proxy/CDN xavfsiz keshlashi mumkin. POST esa server holatini o'zgartiradi — uni keshlash noto'g'ri natijaga olib keladi (bir buyurtma o'rniga kesh qaytarilsa xato bo'ladi).
  • Tuzoq: Ma'lumotni o'zgartiradigan amalni GET orqali qilish (/deleteUser?id=5) — brauzer yoki prefetch uni keshlab yoki oldindan chaqirib, tasodifan o'chirib qo'yishi mumkin. O'zgartiruvchi amallar hech qachon GET bo'lmasin.
  • Follow-up: "Kesh'ni qanday boshqarasiz?" (Cache-Control, ETag).

S: Cache-Control, ETag va Last-Modified qanday ishlaydi? (Senior)

J:

  • Cache-Control — keshlash siyosatini belgilaydi: max-age=3600 (soniyada muddat), no-cache (keshla, lekin ishlatishdan oldin server bilan validatsiya qil), no-store (umuman saqlama), public/private, immutable.
  • ETag — resurs mazmunining "barmoq izi" (hash). Mijoz keyingi so'rovda If-None-Match: <etag> yuboradi. Server mazmun o'zgarmagan bo'lsa 304 Not Modified (body'siz) qaytaradi — trafik tejaladi.
  • Last-Modified — resurs oxirgi o'zgargan vaqt. Mijoz If-Modified-Since bilan tekshiradi (ETag'ning vaqtga asoslangan varianti).
  • Mexanizm: max-age tugamaguncha brauzer keshdan oladi (server'ga bormaydi). Muddat tugagach — ETag/Last-Modified bilan validatsiya qiladi: o'zgarmagan bo'lsa 304, o'zgargan bo'lsa 200 + yangi mazmun.
  • Tuzoq: no-cache "keshlama" degani emas — u "keshla, lekin har safar tekshir" degani. "Keshlama" — bu no-store.
  • Follow-up: "Statik fayllarni (JS bundle) qanday keshlaysiz?" (uzun max-age + fayl nomida hash — cache busting).

S: WebSocket nima? HTTP'dan qanday farq qiladi? (Middle)

J:

  • Ta'rif: WebSocket — mijoz va server o'rtasida ikki tomonlama (full-duplex), doimiy ulanish ochadigan protokol. Real-time ilovalar (chat, o'yin, jonli bildirishnoma) uchun.
  • Mexanizm: Ulanish HTTP orqali boshlanadi (Upgrade: websocket sarlavhasi bilan handshake), keyin protokol WebSocket'ga "ko'tariladi" va TCP ulanish ochiq qoladi. Server mijozga so'ralmasdan ma'lumot yuborishi mumkin (HTTP'da server faqat so'rovga javob beradi).
  • Tuzoq: Har real-time holatda WebSocket kerak deb o'ylash. Ba'zan SSE (Server-Sent Events) yoki oddiy polling yetarli. WebSocket ochiq ulanishni ushlab turadi — resurs sarflaydi.
  • Follow-up: "WebSocket va SSE va polling qachon qaysi biri?", "Ulanish uzilib qolsa qanday tiklaysiz?"

S: DNS qanday ishlaydi? Rekursiv qidiruvni tushuntiring. (Middle)

J:

  • Ta'rif: DNS (Domain Name System) — host nomini (example.com) IP manzilga (93.184.216.34) aylantiruvchi taqsimlangan tizim.
  • Mexanizm (rekursiv qidiruv):
    1. Brauzer/OS keshi tekshiriladi.
    2. Topilmasa — recursive resolver (odatda ISP) ga so'rov ketadi.
    3. Resolver root serverdan so'raydi u .com TLD serverga yo'naltiradi.
    4. TLD server domenning authoritative nameserver'ini beradi.
    5. Authoritative server yakuniy A/AAAA yozuv (IP) ni qaytaradi.
    6. Natija TTL muddatiga keshlanadi.
  • Tuzoq: DNS'ni "bitta server" deb tasavvur qilish. Aslida u iyerarxik: root TLD authoritative. Yana: TTL keshlash tufayli DNS o'zgarishi darhol tarqalmaydi (propagatsiya vaqti kerak).
  • Follow-up: "A, AAAA, CNAME, MX yozuvlari farqi?", "TTL past bo'lsa nima bo'ladi?"

S: CSRF va XSS nima? Farqini va himoyani tushuntiring. (Senior)

J:

  • XSS (Cross-Site Scripting): Hujumchi sahifaga zararli JS joylashtiradi (masalan izohga <script> orqali). U qurbon brauzerida ishlab, cookie/token o'g'irlaydi.
    • Himoya: foydalanuvchi kiritmasini escape/sanitize qilish, Content-Security-Policy (CSP), HttpOnly cookie, framework'ning avtomatik escaping'i (React JSX matnni escape qiladi).
  • CSRF (Cross-Site Request Forgery): Hujumchi qurbonni (allaqachon login qilgan) boshqa saytda bilib-bilmay so'rov yuborishga majbur qiladi (masalan yashirin forma). Brauzer cookie'ni avtomatik biriktiradi, server so'rovni haqiqiy deb qabul qiladi.
    • Himoya: SameSite cookie, CSRF token (server bergan yashirin token), Origin/Referer tekshirish.
  • Tuzoq: Ikkalasini adashtirish. Farq: XSS — kod inyeksiyasi (ishonchni suiiste'mol qilish); CSRF — brauzerning avtomatik cookie yuborishidan foydalanish. XSS bo'lsa CSRF himoyasini ham chetlab o'tish mumkin.
  • Follow-up: "React XSS'dan qanday himoya qiladi?", "dangerouslySetInnerHTML nega xavfli?"

S: API'da 200 status bilan xatolik qaytarish yaxshimi yoki 4xx/5xx? (Middle)

J:

  • Javob: To'g'ri REST amaliyoti — HTTP status kodini semantik ishlatish: validatsiya xatosi 400/422, ruxsatsiz 401/403, topilmadi 404, server xatosi 500. 200 bilan {error: ...} qaytarish anti-pattern.
  • Mexanizm: Status kod — mijoz (brauzer, kesh, monitoring) tushunadigan standart signal. Har doim 200 qaytarsangiz, mijoz muvaffaqiyat/xatoni body'ni parse qilmasdan bilolmaydi, retry/monitoring buziladi.
  • Tuzoq: GraphQL bu yerda istisno — u odatda hamma narsani 200 bilan qaytaradi va xatolarni errors maydonida beradi (bitta so'rovda qisman muvaffaqiyat bo'lishi mumkin).
  • Follow-up: "Validatsiya xatosiga 400 yoki 422?", "Xato javob body'sida nima bo'lishi kerak?"

S: URL tuzilishini qismlarga ajrating. (Junior)

J: https://user:pass@www.example.com:443/path/page?query=1&sort=asc#section

  • https — sxema (protokol).
  • user:pass@ — auth (kamdan-kam ishlatiladi).
  • www.example.com — host (domen).
  • :443 — port (HTTPS uchun standart, odatda yashiriladi).
  • /path/page — yo'l (path).
  • ?query=1&sort=asc — query string (parametrlar).
  • #section — fragment/hash (serverga yuborilmaydi, brauzer ichida ishlatiladi).
  • Tuzoq: Fragment (#...) serverga yuborilmaydi — u faqat brauzerda (anchor, SPA routing). Ko'p nomzod buni bilmaydi.
  • Follow-up: "Query va fragment farqi?", "SPA hash routing nega ishlaydi?"

S: CDN nima va u qanday tezlashtiradi? (Middle)

J:

  • Ta'rif: CDN (Content Delivery Network) — dunyo bo'ylab tarqalgan edge serverlar to'plami. Statik kontent (rasm, JS, CSS, video) foydalanuvchiga geografik yaqin serverdan beriladi.
  • Mexanizm: Foydalanuvchi so'rovi eng yaqin edge'ga yo'naltiriladi (anycast/DNS). Kontent u yerda keshlangan bo'lsa darhol qaytadi; bo'lmasa origin'dan olib keshlaydi. Bu latency (kechikish)ni va origin yukini kamaytiradi.
  • Tuzoq: Dinamik, foydalanuvchiga xos kontentni CDN'da keshlab qo'yish — bir foydalanuvchi ma'lumoti boshqasiga ko'rinib qolishi mumkin. Cache-Control: private yoki no-store kerak.
  • Follow-up: "Cache invalidation'ni qanday qilasiz?", "Edge va origin farqi?"

S: GET so'rovida query parametr, POST'da body — nega shunday? (Junior/Middle)

J:

  • Mexanizm: GET body'siz loyihalangan (ma'lumot olish uchun) — parametrlar URL query'da ketadi, shuning uchun URL keshlanadi/bookmark qilinadi. POST bodyda ma'lumot yuboradi — u katta bo'lishi, sezgir bo'lishi (URL loglarga tushmaydi) va tuzilma (JSON) bo'lishi mumkin.
  • Tuzoq: Parol yoki tokenni GET query'ga qo'yish — URL server loglariga, brauzer tarixiga, Referer sarlavhasiga tushadi. Sezgir ma'lumot doim body'da (POST).
  • Follow-up: "URL uzunligi cheklovi bormi?" (brauzer/server bo'yicha ~2000–8000 belgi).

2-QISM. Brauzer, render jarayoni, DOM va event'lar

Bu bo'lim: Critical Rendering Path, DOM va CSSOM, reflow/repaint, JS bajarilishi (call stack, event loop), event bubbling/capturing/delegation.

S: Critical Rendering Path (CRP) nima? Bosqichlarini ayting. (Senior)

J:

  • Ta'rif: CRP — brauzer HTML, CSS va JS'ni oborib, birinchi piksellarni ekranga chizishgacha bo'lgan bosqichlar ketma-ketligi.
  • Bosqichlar:
    1. DOM — HTML parse qilinib, Document Object Model (daraxt) quriladi.
    2. CSSOM — CSS parse qilinib, CSS Object Model quriladi.
    3. Render Tree — DOM + CSSOM birlashtiriladi (faqat ko'rinadigan elementlar; display:none kirmaydi).
    4. Layout (Reflow) — har element o'lchami va joyi (geometriya) hisoblanadi.
    5. Paint — piksellar (rang, matn, chegara) chiziladi.
    6. Composite — qatlamlar (layers) birlashtirilib ekranga chiqariladi.
  • Tuzoq: CSS render-blocking ekanini unutish — CSSOM qurilmaguncha brauzer render qilmaydi. Shuning uchun CSS <head>da (tez yuklansin), sinxron JS </body> oxirida yoki defer bilan bo'ladi.
  • Follow-up: "CSS render-blocking, JS parser-blocking — nega?", "First Contentful Paint'ni qanday tezlashtirasiz?"

S: JS <script> teg async va defer farqi nima? (Middle/Senior)

J:

  • Oddiy <script>: HTML parseri to'xtaydi, skript yuklanadi va bajariladi, keyin parse davom etadi (parser-blocking). Sekinlashtiradi.
  • defer: Skript fonda parallel yuklanadi, HTML parse'ni to'xtatmaydi. Bajarilishi DOM to'liq qurilgach (DOMContentLoaded oldidan), tartib saqlangan holda boshlanadi.
  • async: Skript fonda parallel yuklanadi, lekin yuklanishi bilanoq darhol bajariladi (parse to'xtashi mumkin). Tartib kafolatlanmaydi — qaysi tez yuklansa, o'sha ishlaydi.
  • Kod:
html
<script src="a.js" defer></script>  <!-- tartibli, DOM tayyor bo'lgach -->
<script src="b.js" async></script>  <!-- mustaqil, yuklanishi bilan -->
  • Tuzoq: DOM'ga bog'liq skriptga async qo'yish — DOM tayyor bo'lmasdan ishga tushib xato beradi. Analitika kabi mustaqil skript uchun async, ilova mantiqi uchun defer mos.
  • Follow-up: "Modul (type="module") qanday yuklanadi?" (default defer kabi), "defer va DOMContentLoaded tartibi?"

S: Reflow (layout) va repaint (paint) nima? Farqi va qaysi biri qimmat? (Senior)

J:

  • Reflow (layout): Element geometriyasi (o'lcham, joylashuv) o'zgarganda brauzer layout'ni qayta hisoblaydi. Bir elementning o'zgarishi butun daraxtni qayta hisoblashga majburlashi mumkin — qimmat.
  • Repaint: Faqat vizual xususiyat (rang, background, visibility, box-shadow) o'zgarganda — geometriya o'zgarmaydi, brauzer qayta chizadi. Reflow'dan arzonroq.
  • Composite: transform va opacity faqat kompozitsiya bosqichida (GPU'da) o'zgaradi — eng arzon, layout/paint'ni chetlab o'tadi.
  • Nima reflow qo'zg'atadi: width, height, top, left, margin, padding, display, font-size, DOM'ga element qo'shish, offsetWidth o'qish.
  • Tuzoq: Animatsiyani left/top/margin bilan qilish — har kadrda reflow. To'g'risi — transform: translate() va opacity (GPU, faqat composite). Layout thrashing — siklda o'zgartirish va o'qishni aralashtirish (el.style.width=...; el.offsetHeight;) majburiy sinxron reflow chaqiradi.
  • Follow-up: "Layout thrashing nima va qanday oldini olasiz?" (o'qish va yozishni ajratish, requestAnimationFrame), "Nega transform animatsiya uchun yaxshi?"

S: DOM nima? U HTML'dan qanday farq qiladi? (Junior/Middle)

J:

  • Ta'rif: DOM (Document Object Model) — HTML hujjatning xotiradagi obyekt-daraxt ko'rinishi. JS shu daraxt orqali sahifani o'qiydi va o'zgartiradi.
  • Mexanizm: HTML — matn (manba kod). Brauzer uni parse qilib DOM daraxtini quradi (har teg — node). HTML noto'g'ri yozilgan bo'lsa ham brauzer DOM'ni "tuzatib" quradi (masalan yopilmagan teg avtomatik yopiladi).
  • Tuzoq: "DOM = HTML" deb o'ylash. Yo'q — HTML manba matn, DOM jonli obyekt tuzilma. JS DOM'ni o'zgartirsa, HTML manba o'zgarmaydi (View Source eski HTML'ni ko'rsatadi, DevTools jonli DOM'ni).
  • Follow-up: "Virtual DOM nima va nega kerak?", "innerHTML va textContent farqi?"

S: Event loop qanday ishlaydi? Microtask va macrotask farqi. (Senior)

J:

  • Ta'rif: JS bir oqimli (single-threaded) — bir vaqtda bitta ish bajaradi. Event loop asinxron ishlarni (timer, promise, tarmoq) navbatlar orqali boshqaradi.
  • Mexanizm:
    1. Call stack — joriy bajarilayotgan kod.
    2. Asinxron ish tugagach, callback navbatga qo'yiladi.
    3. Macrotask navbati: setTimeout, setInterval, I/O, event'lar.
    4. Microtask navbati: Promise.then, queueMicrotask, MutationObserver.
    5. Event loop: call stack bo'shagach — avval barcha microtasklarni bajaradi, keyin bitta macrotask, keyin yana microtask'lar... va render.
  • Kod:
js
console.log('1');
setTimeout(() => console.log('2'), 0);   // macrotask
Promise.resolve().then(() => console.log('3')); // microtask
console.log('4');
// Natija: 1, 4, 3, 2  (microtask macrotask'dan oldin)
  • Tuzoq: setTimeout(fn, 0) "darhol" ishlaydi deb o'ylash — yo'q, u macrotask navbatiga tushadi va barcha microtask'lardan keyin ishlaydi. Cheksiz microtask (recursive promise) render'ni bloklaydi.
  • Follow-up: "Nega natija shunday tartibda?", "async/await event loop'da qanday joylashadi?"

S: Event bubbling, capturing va delegation nima? (Middle/Senior)

J:

  • Bubbling (ko'pirish): Event maqsad elementdan boshlab yuqoriga (ota-onalarga) tarqaladi: button div body document. Bu standart rejim.
  • Capturing (ushlash): Event yuqoridan pastga tarqaladi (document maqsad). addEventListener(type, fn, true) bilan yoqiladi. Kam ishlatiladi.
  • To'liq oqim: capturing (past) target bubbling (yuqori).
  • Delegation (delegatsiya): Ko'p bola elementga alohida listener o'rniga bitta ota elementga listener qo'yiladi, event bubbling orqali ko'tarilganda event.target bilan qaysi bola ekani aniqlanadi.
  • Kod:
js
// Har <li> ga emas, bitta <ul> ga:
document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('Bosildi:', e.target.textContent);
  }
});
  • Tuzoq: event.target va event.currentTarget ni adashtirish. target — event asli boshlangan element (bosilgan li); currentTarget — listener biriktirilgan element (ul). Yana: stopPropagation() bubbling'ni to'xtatadi va delegatsiyani buzishi mumkin.
  • Follow-up: "Delegation nega yaxshi?" (dinamik qo'shilgan elementlar ham ishlaydi, xotira tejaladi), "preventDefault va stopPropagation farqi?"

S: preventDefault(), stopPropagation() va stopImmediatePropagation() farqi. (Middle)

J:

  • preventDefault() — brauzerning standart harakatini to'xtatadi (link o'tishi, forma yuborilishi, checkbox belgilanishi), lekin event tarqalishini to'xtatmaydi.
  • stopPropagation() — event'ning tarqalishini (bubbling/capturing) to'xtatadi, lekin standart harakat va shu elementdagi boshqa listenerlar ishlaydi.
  • stopImmediatePropagation() — tarqalishni ham, shu elementdagi qolgan listenerlarni ham to'xtatadi.
  • Tuzoq: preventDefault bilan stopPropagation ni bir xil deb o'ylash. Forma yuborilishini to'xtatmoqchi bo'lsangiz preventDefault kerak, stopPropagation emas.
  • Follow-up: "Formani AJAX bilan yuborishda qaysi biri?" (preventDefault).

S: innerHTML, textContent va innerText farqi. (Middle)

J:

  • innerHTML — element ichidagi HTMLni (teglar bilan) o'qiydi/yozadi. Yozganda HTML parse qilinadi.
  • textContent — faqat matnni (teglarsiz) o'qiydi/yozadi. Yashirin (display:none) elementlar matnini ham oladi. Tez.
  • innerText — ko'rinadigan matnni oladi (CSS'ni hisobga oladi, reflow qo'zg'atadi — sekin).
  • Tuzoq: Foydalanuvchi kiritmasini innerHTML ga qo'yish — XSS xavfi (skript inyeksiyasi). Matn uchun doim textContent ishlating. Yana: innerText reflow chaqirgani uchun siklda ishlatish sekin.
  • Follow-up: "Nega innerHTML XSS xavfli?", "innerText nega textContentdan sekin?"

S: Sahifa yuklanish event'lari: DOMContentLoaded va load farqi. (Middle)

J:

  • DOMContentLoaded — HTML to'liq parse qilinib DOM qurilgach ishlaydi. Rasm, stylesheet, iframe kutilmaydi. JS'ni ishga tushirish uchun odatda shu yetarli.
  • load (window.onload) — barcha resurslar (rasmlar, CSS, iframe, shriftlar) to'liq yuklangach ishlaydi. Kechroq.
  • Tuzoq: DOM'ga tegadigan kodni resurslar yuklanishini kutib loadda yozish — keraksiz kechikish. DOM tayyor bo'lsa DOMContentLoaded yetarli. defer skript esa DOMContentLoaded'dan oldin ishlaydi.
  • Follow-up: "Skriptni </body> oxiriga qo'ysangiz bu event'lar kerakmi?"

S: document.querySelector va getElementById farqi, qaysi tezroq? (Middle)

J:

  • getElementById('x') — faqat ID bo'yicha, jonli, juda tez (ichki hash jadval).
  • querySelector('.class') — istalgan CSS selektor bo'yicha (birinchi mos), moslashuvchan, lekin biroz sekinroq.
  • querySelectorAll — statik NodeList qaytaradi (o'zgarishlarni kuzatmaydi), getElementsByClassName esa jonli HTMLCollection qaytaradi.
  • Tuzoq: getElementsByClassName jonli — siklda uzunligini o'qisangiz cheksiz sikl bo'lishi mumkin (DOM o'zgarganda uzunlik ham o'zgaradi). querySelectorAll statik — xavfsizroq.
  • Follow-up: "Jonli va statik kolleksiya farqi?", "NodeList va Array farqi?"

S: Debounce va throttle farqi. Qachon qaysi biri? (Senior)

J:

  • Debounce: Funksiya oxirgi chaqiruvdan keyin belgilangan vaqt jim tursa ishlaydi. Ketma-ket chaqiruvlarda faqat oxirgisi hisobga olinadi. Misol: qidiruv input'i — foydalanuvchi yozishni to'xtatgach so'rov yuborish.
  • Throttle: Funksiya belgilangan intervalda ko'pi bilan bir marta ishlaydi. Misol: scroll/resize — sekundiga cheklangan marta.
  • Kod (debounce):
js
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
  • Tuzoq: Ikkalasini aralashtirish. Debounce — "tugagach bir marta"; throttle — "muntazam intervalda". Scroll'ga debounce qo'ysangiz, foydalanuvchi to'xtaguncha hech narsa ishlamaydi.
  • Follow-up: "Autocomplete'ga qaysi biri?" (debounce), "Infinity scroll'ga?" (throttle).

S: Brauzer JS'ni qanday bajaradi? Call stack va Web API rolini ayting. (Middle)

J:

  • Mexanizm:
    1. Call stack — sinxron kod bu yerda ketma-ket bajariladi (LIFO).
    2. Web API'lar — setTimeout, fetch, DOM event'lar brauzer tomonidan (JS oqimidan tashqarida) bajariladi.
    3. Ular tugagach callback task/microtask navbatiga qo'yiladi.
    4. Event loop call stack bo'shashini kutib, navbatdagi callback'ni stack'ga qo'yadi.
  • Tuzoq: "JS ko'p oqimli" deb o'ylash. JS bir oqimli, lekin brauzer (Web API'lar) fonda ish bajaradi — shuning uchun asinxronlik mumkin. Og'ir sinxron sikl butun UI'ni muzlatadi (bir oqim band).
  • Follow-up: "Web Worker nima?" (haqiqiy parallel oqim), "Nima uchun og'ir hisob UI'ni bloklaydi?"

S: Repaint chaqiradigan va composite'da qoladigan CSS xususiyatlarga misol. (Middle/Senior)

J:

  • Layout (reflow) chaqiradi: width, height, padding, margin, top/left, font-size, display.
  • Paint (repaint) chaqiradi: color, background, box-shadow, border-color, visibility.
  • Faqat composite (eng arzon): transform, opacity (GPU'da, layout/paint'siz).
  • Tuzoq: will-change: transform ni hamma joyga qo'yish — u elementni alohida GPU qatlamiga ko'chiradi, ortiqcha ishlatilsa xotira ko'p sarflanadi va sekinlashadi. Faqat animatsiyalanadigan elementga, kerak bo'lganda qo'ying.
  • Follow-up: "60 FPS animatsiya uchun nima qilasiz?", "will-change nima qiladi?"

3-QISM. HTML — semantika, formalar va accessibility

Bu bo'lim: semantik teglar, hujjat tuzilishi, formalar va validatsiya, accessibility (ARIA, a11y), meta teglar va SEO asoslari.

S: Semantik HTML nima va nega muhim? (Junior)

J:

  • Ta'rif: Semantik HTML — mazmunga ma'no beruvchi teglar ishlatish: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> — <div>/<span> o'rniga.
  • Nega muhim:
    • Accessibility — skrindagi o'qigichlar (screen reader) tuzilishni tushunadi (bu sarlavha, bu navigatsiya).
    • SEO — qidiruv tizimlari mazmun iyerarxiyasini yaxshiroq indekslaydi.
    • O'qiluvchanlik — kod boshqa dasturchiga tushunarli.
  • Tuzoq: Hamma narsani <div> bilan yasash ("div soup"). <button> o'rniga <div onclick> ishlatish — u klaviaturadan ishlamaydi, screen reader'ga tugma deb bilinmaydi, fokus olmaydi.
  • Follow-up: "<section> va <div> qachon?", "<b> va <strong>, <i> va <em> farqi?" (birinchisi vizual, ikkinchisi semantik ta'kid).

S: <section>, <article>, <div> qachon ishlatiladi? (Middle)

J:

  • <article> — mustaqil, o'zicha to'liq mazmun: blog post, yangilik, izoh, mahsulot kartochkasi. Kontekstdan chiqarsa ham mazmun bo'ladi.
  • <section> — mavzuviy bo'lim (odatda sarlavha bilan): "Sharhlar", "Bog'liq maqolalar". Hujjatning mantiqiy qismi.
  • <div> — semantik ma'nosi yo'q, faqat stil/layout uchun konteyner.
  • Tuzoq: <section> ni faqat stil uchun ishlatish. Agar element faqat CSS uchun bo'lsa — <div> to'g'ri. <section> odatda sarlavhaga (heading) ega bo'lishi kerak.
  • Follow-up: "Ichma-ich <article> bo'ladimi?" (ha — maqola ichida izohlar article bo'lishi mumkin).

S: <button> va <a> teglari qachon ishlatiladi? (Junior/Middle)

J:

  • <a href> — navigatsiya uchun: boshqa sahifa/URL'ga o'tish. Yangi tabda ochish, nusxalash mumkin.
  • <button> — sahifada amal uchun: forma yuborish, modal ochish, JS harakati.
  • Tuzoq: Amal uchun <a href="#"> ishlatib onclick osish — bu semantik va accessibility jihatdan noto'g'ri (screen reader "havola" deydi, klaviatura Enter/Space boshqacha ishlaydi). Navigatsiya uchun <button onclick=location...> ham noto'g'ri. Qoida: o'tish <a>, harakat <button>.
  • Follow-up: "<a> ni tugmadek ko'rinishga stillash mumkinmi?" (ha, lekin semantika saqlanishi kerak).

S: HTML forma elementlari va <input> turlarini sanang. (Junior/Middle)

J:

  • Asosiy elementlar: <form>, <input>, <textarea>, <select>/<option>, <button>, <label>, <fieldset>/<legend>.
  • Input turlari: text, password, email, number, tel, url, date, time, checkbox, radio, file, range, color, search, hidden.
  • Mexanizm: type mobil klaviatura turini (email @ bilan, number raqamli), brauzer validatsiyasini va UI'ni o'zgartiradi.
  • Tuzoq: <label> ni input bilan bog'lamaslik. <label for="email"> yoki input'ni label ichiga o'rash — bosilganda input fokuslanadi va screen reader nomni o'qiydi. Bog'lanmagan label — accessibility muammosi.
  • Follow-up: "name atributi nega muhim?" (formada serverga yuboriladigan kalit), "type=number va inputmode farqi?"

S: HTML forma validatsiyasini qanday amalga oshirasiz? (Middle)

J:

  • Brauzer (native) validatsiya: atributlar orqali — required, type="email", min/max, minlength/maxlength, pattern (regex). Brauzer avtomatik tekshiradi va xabar ko'rsatadi.
  • Constraint Validation API: JS'da input.validity, input.checkValidity(), setCustomValidity() bilan boshqarish.
  • Kod:
html
<input type="email" required minlength="5" pattern="[^@]+@[^@]+\.[^@]+">
  • Tuzoq: Faqat frontend validatsiyaga tayanish. Frontend validatsiya — foydalanuvchi qulayligi uchun, lekin uni chetlab o'tish oson (DevTools, to'g'ridan API). Server tomonda ham validatsiya majburiy.
  • Follow-up: "Nega server validatsiya kerak?", "novalidate nima?", "Xato xabarini qanday moslashtirasiz?"

S: Accessibility (a11y) nima? ARIA qachon kerak? (Senior)

J:

  • Ta'rif: Accessibility — web'ni imkoniyati cheklangan (ko'rish, eshitish, harakat, kognitiv) foydalanuvchilar uchun ham foydalanish mumkin qilish. Klaviatura navigatsiyasi, screen reader'lar, yetarli kontrast.
  • ARIA (Accessible Rich Internet Applications): Semantik HTML yetmagan joyda (maxsus komponentlar: tab, modal, slider) rol va holatni screen reader'ga bildiruvchi atributlar: role, aria-label, aria-expanded, aria-hidden, aria-live.
  • Birinchi qoida: "Native HTML element mavjud bo'lsa, ARIA emas, o'shani ishlating." <button> allaqachon tugma roliga ega — unga role="button" shart emas.
  • Tuzoq: ARIA'ni ortiqcha yoki noto'g'ri ishlatish. Noto'g'ri ARIA — ARIA yo'qligidan yomonroq (screen reader'ni chalg'itadi). Yana: faqat rang bilan ma'no berish (qizil = xato) — rang ko'rmaydiganlar uchun matn/ikon ham kerak.
  • Follow-up: "aria-label va aria-labelledby farqi?", "Fokus boshqaruvi modal'da qanday?", "WCAG kontrast talabi qancha?" (matn uchun 4.5:1).

S: alt atributi nega muhim? Qachon bo'sh qoldiriladi? (Middle)

J:

  • Ta'rif: alt — rasm yuklanmasa yoki screen reader uchun matnli muqobil.
  • Mexanizm: Screen reader alt matnini o'qiydi. Rasm yuklanmasa brauzer alt ni ko'rsatadi. SEO ham alt ni indekslaydi.
  • Qachon bo'sh (alt=""): Rasm dekorativ bo'lsa (faqat bezak, ma'no tashimasa) — alt="" qo'yiladi, shunda screen reader uni o'tkazib yuboradi. alt ni butunlay tashlab ketish (alt yo'q) esa boshqacha — screen reader fayl nomini o'qishga urinadi.
  • Tuzoq: Har rasmga "rasm", "image" deb yozish yoki fayl nomini qo'yish. alt mazmunni tavsiflashi kerak ("Toshkent metro sxemasi"), dekorativ bo'lsa bo'sh.
  • Follow-up: "Murakkab grafik (chart) uchun alt yetarlimi?" (yo'q, batafsil tavsif kerak).

S: <meta viewport> teg nima uchun? Responsive'da roli. (Junior/Middle)

J:

  • Ta'rif: <meta name="viewport" content="width=device-width, initial-scale=1"> — mobil brauzerga sahifani qurilma kengligida ko'rsatishni aytadi.
  • Mexanizm: Usiz mobil brauzer sahifani ~980px kenglikda "desktop" deb render qilib, kichraytirib ko'rsatadi (foydalanuvchi zoom qilishi kerak). width=device-width bilan CSS piksellari qurilmaga moslashadi va media query'lar to'g'ri ishlaydi.
  • Tuzoq: Bu teg'siz responsive dizayn ishlamaydi — media query'lar mobil'da kutilgandek trigger bo'lmaydi. user-scalable=no bilan zoom'ni o'chirish — accessibility muammosi (ko'zi ojiz foydalanuvchi zoom qila olmaydi).
  • Follow-up: "initial-scale nima?", "Nega zoom'ni o'chirmaslik kerak?"

S: SEO uchun HTML darajasida nima qilasiz? (Middle)

J:

  • Semantik teglar — to'g'ri iyerarxiya (bitta <h1>, tartibli <h2>–<h6>).
  • Meta teglar — <title>, <meta name="description">, Open Graph (og:title, og:image) ijtimoiy tarmoq uchun.
  • alt rasmlarga, tavsifli link matni ("bu yerni bosing" emas).
  • Semantik landmark'lar — <nav>, <main>, <article>.
  • Strukturalangan ma'lumot — JSON-LD (Schema.org).
  • Tez yuklanish — Core Web Vitals SEO'ga ta'sir qiladi.
  • Tuzoq: SPA (React) da kontent JS bilan render bo'lsa, qidiruv botlari ba'zan uni ko'rmaydi — SSR/SSG (Next.js) kerak bo'lishi mumkin. Yana: bir nechta <h1> yoki sarlavha darajalarini o'tkazib yuborish (h1 h3) semantikani buzadi.
  • Follow-up: "SPA'da SEO muammosini qanday yechasiz?", "Core Web Vitals nima?"

S: <script> ni <head> da yoki </body> oxirida qo'yasizmi? Nega? (Middle)

J:

  • Klassik javob: Oddiy sinxron <script> ni </body> oxirida qo'yish — u parser'ni bloklamasin, DOM tayyor bo'lsin.
  • Zamonaviy javob: <head> da defer bilan qo'yish yaxshiroq — skript parallel yuklanadi (vaqt tejaladi), lekin bajarilishi DOM tayyor bo'lgach boshlanadi. Bu ikkala afzallikni birlashtiradi.
  • Tuzoq: <head> da oddiy (defer'siz) skript qo'yish — u DOM qurilishini to'xtatadi, sahifa "oq" turadi. document.write ni asinxron skriptda ishlatish esa sahifani buzadi.
  • Follow-up: "defer bilan </body> oxiridagi skript orasida yuklanish tezligi farqi bormi?" (defer parallel yuklanadi — tezroq).

S: id va class farqi nima? (Junior)

J:

  • id — sahifada noyob (bitta element), JS/anchor/label bilan bog'lash uchun.
  • class — ko'p elementga takrorlanishi mumkin, asosan stil va guruhlash uchun.
  • CSS specificity: id selektori (#x) class selektoridan (.x) kuchliroq.
  • Tuzoq: Bir id ni bir necha elementga berish — HTML noto'g'ri, getElementById faqat birinchisini topadi, xatti-harakat oldindan aytib bo'lmas. Stil uchun id ishlatish ham qochiladi (specificity muammosi).
  • Follow-up: "Nega stil uchun class afzal?", "Specificity nima?"

S: data-* atributlari nima uchun kerak? (Middle)

J:

  • Ta'rif: data-* — HTML elementga maxsus ma'lumot biriktirish uchun standart usul: <div data-user-id="42" data-role="admin">.
  • Mexanizm: JS'dan element.dataset.userId (camelCase'ga o'giriladi) orqali o'qiladi. CSS'dan [data-role="admin"] bilan selektor qilinadi.
  • Tuzoq: Ko'p yoki katta ma'lumotni data-* da saqlash — DOM og'irlashadi. Katta holat uchun JS obyekt/state yaxshiroq. Yana: standart bo'lmagan atribut (userid=) o'rniga doim data- prefiks ishlating (valid HTML uchun).
  • Follow-up: "dataset camelCase'ni qanday o'giradi?", "CSS'da data atributiga qanday murojaat?"

S: <picture> va srcset nima uchun? Responsive rasm. (Middle)

J:

  • srcset: <img> ga bir necha o'lchamli rasm variantini beradi, brauzer ekran/DPRga qarab mosini tanlaydi:
html
<img src="s.jpg" srcset="s.jpg 480w, m.jpg 800w, l.jpg 1200w" sizes="(max-width:600px) 480px, 800px">
  • <picture>: Turli shart (media query, format) uchun butunlay boshqa rasm — art direction yoki webp/avif fallback:
html
<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="...">
</picture>
  • Tuzoq: Barcha qurilmaga bitta katta rasm berish — mobil'da ortiqcha trafik. srcset bilan brauzer optimal o'lchamni yuklaydi. loading="lazy" bilan ekrandan tashqaridagi rasmlarni kechiktirib yuklash ham foydali.
  • Follow-up: "srcset va <picture> qachon qaysi biri?", "loading=lazy nima qiladi?"

S: Blok va inline elementlar farqi. (Junior)

J:

  • Blok (block): Butun qatorni egallaydi, yangi qatordan boshlanadi, width/height qabul qiladi: <div>, <p>, <h1>, <section>.
  • Inline: Faqat mazmuni kengligini egallaydi, qator ichida joylashadi, width/height ishlamaydi, vertikal margin/padding to'liq ta'sir qilmaydi: <span>, <a>, <strong>, <img> (inline-block'ga o'xshaydi).
  • inline-block: Inline kabi yonma-yon, lekin blok kabi width/height qabul qiladi.
  • Tuzoq: Inline elementga width/height berib ishlamasligidan hayron bo'lish — display: inline-block yoki block kerak. Yana: inline elementlar orasidagi "sirli bo'shliq" HTML'dagi bo'sh joy (whitespace) tufayli paydo bo'ladi.
  • Follow-up: "<img> qaysi display?", "Inline elementlar orasidagi bo'shliqni qanday olib tashlaysiz?"

4-QISM. CSS — box model, layout, specificity va zamonaviy texnikalar

Bu bo'lim: box model, specificity (hisoblash), position, flexbox, grid, responsive, unit'lar, z-index, animatsiya, metodologiyalar va performance.

S: CSS box model nima? box-sizing roli. (Junior)

J:

  • Ta'rif: Har element to'rt qavatli quti: content padding border margin (ichdan tashqariga).
  • box-sizing:
    • content-box (default): width faqat kontentni o'lchaydi; padding va border ustiga qo'shiladi. width:100px; padding:20px real kenglik 140px.
    • border-box: width padding va border bilan birga hisoblanadi. width:100px; padding:20px real kenglik 100px (kontent 60px). Bashoratli.
  • Kod:
css
*, *::before, *::after { box-sizing: border-box; }
  • Tuzoq: content-box da width:100% + padding qo'yib, element konteynerdan chiqib ketishi (overflow). border-box bu muammoni yechadi — shuning uchun ko'p loyihada global qo'yiladi.
  • Follow-up: "Margin box modelning bir qismimi?" (ha, lekin tashqarida — elementlararo masofa), "Margin collapse nima?"

S: CSS specificity qanday hisoblanadi? Misol bilan. (Middle/Senior)

J:

  • Ta'rif: Bir necha selektor bitta elementga tegsa, eng yuqori specificity (aniqlik) g'olib bo'ladi. U to'rt qismli qiymat: (inline, ID, class/attribute/pseudo-class, element/pseudo-element).
  • Hisoblash:
    • Inline stil (style="...") (1,0,0,0)
    • Har ID (#x) (0,1,0,0)
    • Har class/[attr]/:hover (0,0,1,0)
    • Har teg/::before (0,0,0,1)
  • Misollar:
    • #nav .item a ID(1) + class(1) + element(1) = (0,1,1,1)
    • .btn.primary 2 class = (0,0,2,0)
    • ul li a 3 element = (0,0,0,3)
    • (0,1,0,0) > (0,0,10,0) — bitta ID o'nta class'dan kuchli.
  • !important hammasidan ustun (lekin qochish kerak), * (universal) specificity'ga 0.
  • Tuzoq: Class'lar sonini "qo'shib" ID bilan tenglashtirmoqchi bo'lish — noto'g'ri. Bu o'nlik sanoq emas; ID darajasi har qancha class'dan ustun. !important bilan urishlarni "tuzatish" texnik qarz to'playdi.
  • Follow-up: "!important ni qanday bekor qilasiz?" (yana !important yoki yuqori specificity), "Ikki selektor teng specificity bo'lsa?" (oxirgi yozilgani g'olib — cascade).

S: CSS cascade nima? Qoidalar qanday tanlanadi? (Middle)

J:

  • Ta'rif: Cascade — bir elementga bir necha qoida tegsa, brauzer qaysi birini qo'llashni tartib bilan hal qiladi.
  • Tartib (yuqoridan pastga):
    1. Muhimlik (origin va importance) — user-agent < author < author !important < user !important.
    2. Specificity — aniqroq selektor.
    3. Manba tartibi — teng bo'lsa, oxirgi yozilgani g'olib.
  • Tuzoq: Faqat "oxirgi yozilgani g'olib" deb o'ylash — bu faqat specificity teng bo'lganda. Aniqroq selektor tartibdan qat'i nazar ustun.
  • Follow-up: "Inheritance (meros) cascade'ning bir qismimi?", "inherit, initial, unset farqi?"

S: position qiymatlarini tushuntiring (static, relative, absolute, fixed, sticky). (Junior/Middle)

J:

  • static (default) — normal oqim, top/left ta'sir qilmaydi.
  • relative — normal oqimda qoladi, lekin top/left/right/bottom bilan o'z joyidan siljiydi. Absolute bolalar uchun kontekst yaratadi.
  • absolute — normal oqimdan chiqadi, eng yaqin position != static bo'lgan otaga nisbatan joylashadi (topilmasa <html>ga).
  • fixed — oqimdan chiqadi, viewportga nisbatan (scroll qilsangiz ham joyida qoladi).
  • sticky — normal oqimda, lekin belgilangan chegaraga (top: 0) yetganda yopishadi (relative va fixed gibridi).
  • Tuzoq: absolute element "qaysidir otaga" nisbatan deb o'ylash — aslida u eng yaqin positioned (relative/absolute/fixed/sticky) otaga nisbatan. Ota position bermasa, u butun sahifaga nisbatan joylashib "adashib" ketadi. sticky esa ota overflow: hidden bo'lsa ishlamaydi.
  • Follow-up: "sticky nega ba'zan ishlamaydi?", "absolute markazlashtirishni qanday qilasiz?"

S: z-index va stacking context qanday ishlaydi? (Senior)

J:

  • Ta'rif: z-index elementlarning ustma-ust (Z o'qida) tartibini boshqaradi — faqat positioned (yoki flex/grid bola) elementlarda ishlaydi.
  • Stacking context: Alohida "qatlam olami". Uning ichidagi z-indexlar faqat shu kontekst ichida taqqoslanadi. Yangi kontekst yaratadi: position + z-index, opacity < 1, transform, filter, will-change, isolation: isolate.
  • Mexanizm: Ota stacking context'ning z-indexi uning barcha bolalaridan ustun. Ya'ni z-index: 1 bo'lgan ota ichidagi z-index: 9999 bola, z-index: 2 bo'lgan boshqa otadan pastda qoladi.
  • Tuzoq: "z-index'ni 9999 qilsam tepada bo'ladi" deb o'ylash. Element boshqa stacking context ichida bo'lsa, tashqi elementdan ustun bo'lolmaydi — qancha katta qo'ymang. opacity: 0.99 yoki transform beixtiyor yangi kontekst yaratib, z-index'ni "buzishi" mumkin.
  • Follow-up: "Modal boshqa element ostida qoldi — nega?", "Yangi stacking context nima yaratadi?"

S: Flexbox'ni to'liq tushuntiring: asosiy o'q, o'qlar, xossalar. (Middle/Senior)

J:

  • Ta'rif: Flexbox — bir o'lchovli (qator YOKI ustun) layout tizimi. Konteyner display: flex, ichidagilar — flex item'lar.
  • O'qlar: flex-direction asosiy o'qni (main axis) belgilaydi (row gorizontal, column vertikal). Ko'ndalang o'q (cross axis) unga perpendikulyar.
  • Konteyner xossalari:
    • justify-content — asosiy o'q bo'ylab joylashuv (flex-start, center, space-between, space-around, space-evenly).
    • align-items — ko'ndalang o'q bo'ylab (stretch, center, flex-start, baseline).
    • flex-wrap — bir qatorga sig'masa o'rash (wrap).
    • align-content — ko'p qatorlar orasini (wrap bo'lganda).
    • gap — element orasidagi masofa.
  • Item xossalari:
    • flex-grow — bo'sh joyni qanday egallash (ulush).
    • flex-shrink — joy yetmasa qisqarish ulushi.
    • flex-basis — boshlang'ich o'lcham.
    • flex: 1 = 1 1 0 (teng taqsimlash).
    • align-self — bitta item'ni alohida tekislash.
  • Tuzoq: justify-content va align-items ni flex-direction o'zgarganda adashtirish — column da justify-content vertikalni boshqaradi (main axis o'zgardi). Yana: flex-basis va width konfliktida basis ustun. flex: 1 ba'zan kontent'dan katta item'ni ham qisqartiradi (min-width: 0 kerak).
  • Follow-up: "flex: 1 nimaga teng?", "Nega uzun matnli flex item overflow bo'ladi?" (min-width: 0), "Markazlashtirish: justify-content:center; align-items:center."

S: CSS Grid'ni to'liq tushuntiring va Flexbox'dan farqi. (Middle/Senior)

J:

  • Ta'rif: Grid — ikki o'lchovli (qator VA ustun bir vaqtda) layout tizimi. display: grid.
  • Asosiy xossalar:
    • grid-template-columns / grid-template-rows — panjara tuzilishi: repeat(3, 1fr), 200px 1fr auto.
    • fr — bo'sh joyning ulushli birligi.
    • gap — kataklar orasidagi masofa.
    • grid-template-areas — nomlangan hududlar bilan vizual layout.
    • Joylashtirish: grid-column: 1 / 3 (1-dan 3-chizig'igacha), grid-row, span.
    • auto-fit/auto-fill + minmax() — responsive panjara media query'siz:
  • Kod:
css
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
  • Flexbox vs Grid: Flexbox — bir o'lchovli (kontent oqimiga qarab, ichkaridan tashqariga). Grid — ikki o'lchovli (tashqi panjaradan boshlab). Grid butun sahifa layout'iga, Flexbox komponent ichidagi qatorga mos.
  • Tuzoq: "Grid Flexbox'ni almashtiradi" deb o'ylash — ular birga ishlaydi (Grid tashqi layout, Flexbox ichki tekislash). Yana: fr va % farqi — fr gapni hisobga oladi, % yo'q (overflow bo'lishi mumkin).
  • Follow-up: "auto-fit va auto-fill farqi?", "Grid'da element'ni qanday joylashtirasiz?", "Qachon Grid, qachon Flexbox?"

S: auto-fit va auto-fill farqi (Grid'da). (Senior)

J:

  • auto-fill — imkoni boricha ko'p ustun yaratadi, hatto ular bo'sh bo'lsa ham (element yetmasa, bo'sh treklar qoladi).
  • auto-fit — bo'sh ustunlarni yig'ib tashlaydi (collapse), mavjud elementlar qolgan joyni to'ldirib cho'ziladi.
  • Mexanizm: repeat(auto-fill, minmax(200px, 1fr)) — 3 element, keng ekranda 5 ta joy bo'lsa: auto-fill 5 ta trek (2 tasi bo'sh), auto-fit 3 ta trek (kengaygan) qiladi.
  • Tuzoq: Element'lar kam bo'lganda auto-fill bo'sh joy qoldirib "g'alati" ko'rinadi — ko'pincha auto-fit kutilgan natijani beradi.
  • Follow-up: "Kartochka gridini media query'siz responsive qilish?"

S: Margin collapse (margin yig'ilishi) nima? (Middle)

J:

  • Ta'rif: Ikki vertikal margin uchrashganda ular qo'shilmaydi, balki kattasi qoladi (collapse). Faqat blok elementlarning yuqori/pastki margin'ida.
  • Uch holat: ketma-ket qardosh elementlar orasida; ota va birinchi/oxirgi bola orasida (padding/border bo'lmasa); bo'sh elementning o'z margin'lari.
  • Mexanizm: p { margin: 20px 0 } — ikki paragraf orasida 40px emas, 20px bo'ladi.
  • Tuzoq: Ota-bola margin collapse'idan hayron bo'lish — bolaga margin-top bergani ota'ni pastga suradi. Yechim: ota'ga padding, border, overflow: hidden yoki flex/grid (bularda collapse bo'lmaydi). Gorizontal margin hech qachon collapse bo'lmaydi.
  • Follow-up: "Flex konteynerda collapse bo'ladimi?" (yo'q), "Collapse'ni qanday to'xtatasiz?"

S: CSS unit'lar: px, %, em, rem, vw/vh farqi. (Middle)

J:

  • px — mutlaq piksel (aslida CSS piksel, qurilma pikseliga aynan teng emas).
  • % — ota elementga nisbatan (width % — ota kengligi, padding % ham ota kengligiga nisbatan).
  • em — joriy elementning font-sizeiga nisbatan. Ichma-ich ishlatilsa ko'payib ketadi (compound).
  • rem — root (<html>) font-sizeiga nisbatan. Bashoratli, ichma-ich ko'paymaydi.
  • vw/vh — viewport kengligi/balandligining 1% i. 100vw = ekran kengligi.
  • Tuzoq: em ning compound effekti — ichma-ich font-size: 1.5em qavatlar bo'ylab kattalashib ketadi. padding da em ba'zan foydali (font'ga nisbatan), lekin tipografiyada rem bashoratliroq. 100vw gorizontal scrollbar hisobiga overflow berishi mumkin.
  • Follow-up: "Nega rem accessibility uchun yaxshi?" (foydalanuvchi brauzer font o'lchamini o'zgartirsa moslashadi), "em va rem qachon qaysi biri?"

S: Responsive dizayn nima? Mobile-first yondashuvi. (Middle)

J:

  • Ta'rif: Responsive dizayn — sahifa turli ekran o'lchamlariga (mobil, planshet, desktop) moslashadi. Vositalar: media query, moslashuvchan grid, %/fr/rem, srcset.
  • Mobile-first: Avval mobil uchun asosiy stil yoziladi, keyin min-width media query'lar bilan kattaroq ekranlarga qo'shimcha qilinadi:
css
.box { flex-direction: column; }           /* mobil (default) */
@media (min-width: 768px) {
  .box { flex-direction: row; }             /* planshet+ */
}
  • Nega mobile-first: Mobil qurilmalar zaifroq — ular faqat kerakli (kam) CSS'ni oladi; qo'shimcha stil kattaroq ekranga yuklanadi. min-width yig'indi (progressive enhancement).
  • Tuzoq: max-width (desktop-first) bilan boshlash — mobil qurilma barcha desktop stil'ni yuklab, keyin ustidan bekor qiladi (samarasiz). Breakpoint'larni qurilma modeliga (iPhone px) bog'lash noto'g'ri — kontent buzilgan joyda breakpoint qo'ying.
  • Follow-up: "Breakpoint'ni qanday tanlaysiz?", "min-width va max-width media query farqi?", "Container query nima?"

S: Media query nima? Qanday yoziladi? (Junior/Middle)

J:

  • Ta'rif: Media query — ma'lum shart (ekran kengligi, orientatsiya, DPR, foydalanuvchi afzalligi) bajarilganda CSS qo'llash:
css
@media (min-width: 768px) and (orientation: landscape) { ... }
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }
  • Turlari: min-width/max-width (kenglik), orientation, prefers-color-scheme (dark mode), prefers-reduced-motion (animatsiyani kamaytirish), hover/pointer (qurilma turi).
  • Tuzoq: prefers-reduced-motion ni e'tiborsiz qoldirish — vestibulyar buzilishi bor foydalanuvchilar uchun animatsiya muammo. Yana: min-width va max-width chegaralarida bir piksellik "tegishuv" (768px ikkalasida) — mobile-first'da faqat min-width ishlatib qutilinadi.
  • Follow-up: "Dark mode'ni qanday qo'llaysiz?", "prefers-reduced-motion uchun nima qilasiz?"

S: CSS transition va animation farqi. Performansli animatsiya. (Middle/Senior)

J:

  • transition — bir holatdan boshqasiga (:hover kabi trigger'da) silliq o'tish. Boshi/oxiri bor, faqat trigger'da ishlaydi:
css
.btn { transition: transform 0.3s ease; }
.btn:hover { transform: scale(1.1); }
  • animation + @keyframes — ko'p bosqichli, o'z-o'zidan (trigger'siz) ishlaydigan, takrorlanadigan (infinite), murakkab harakat:
css
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }
.dot { animation: pulse 1s infinite; }
  • Performans: Faqat transform va opacity ni animatsiyalang — ular GPU'da, layout/paint'siz (composite). width, height, top, left — har kadrda reflow, sekin (jank).
  • Tuzoq: left/top/margin bilan animatsiya qilib "sakrash" (jank) olish. To'g'risi — transform: translate(). will-changeni ortiqcha ishlatish xotira sarflaydi. 60 FPS uchun kadrga ~16ms.
  • Follow-up: "Nega transform leftdan tez?", "ease, linear, cubic-bezier farqi?", "animation-fill-mode nima?"

S: display: none, visibility: hidden, opacity: 0 farqi. (Middle)

J:

Xususiyat display:none visibility:hidden opacity:0
Joy egallaydimi Yo'q (oqimdan chiqadi) Ha (joy qoladi) Ha (joy qoladi)
Bosish/hodisa Yo'q Yo'q Ha (bosiladi)
Animatsiya bo'ladimi Yo'q Yo'q Ha (silliq)
Screen reader O'qimaydi O'qimaydi O'qiydi
  • Tuzoq: opacity: 0 element'ni "yashiradi", lekin u bosiladi va fokus oladi — ko'rinmas tugma tasodifan bosiladi. Yashirish uchun pointer-events: none yoki display: none kerak. display: none dan blockga o'tishni animatsiya qilib bo'lmaydi.
  • Follow-up: "Fade-out animatsiyasidan keyin qanday olib tashlaysiz?" (opacity transition + transitionend'da display:none), "pointer-events nima qiladi?"

S: CSS'da vertikal markazlashtirishni qanday qilasiz? (Middle)

J:

  • Flexbox (eng oson):
css
.parent { display: flex; justify-content: center; align-items: center; }
  • Grid:
css
.parent { display: grid; place-items: center; }
  • Absolute + transform:
css
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  • Mexanizm: transform: translate(-50%,-50%) element'ni o'z o'lchamining yarmiga qaytaradi (top/left 50% element burchagini markazga qo'yadi, translate markazini to'g'rilaydi).
  • Tuzoq: margin: auto faqat gorizontalda (blokda) ishlaydi; vertikalda ishlashi uchun flex konteyner kerak (margin: auto flex item'da har ikki o'qda ishlaydi). line-height faqat bir qatorli matn uchun.
  • Follow-up: "place-items nima?", "Noma'lum balandlikda markazlashtirish?"

S: rem va em ni real loyihada qachon ishlatasiz? (Middle)

J:

  • rem — global tipografiya, spacing, layout o'lchamlari uchun. Root'ga bog'liq — bashoratli, accessibility'da foydalanuvchi font sozlamasiga moslashadi.
  • em — komponentga ichki nisbat kerak bo'lganda: tugma paddingini uning font-sizeiga bog'lash (padding: 0.5em 1em) — font kattalashsa padding ham mos ravishda o'sadi.
  • Tuzoq: Butun layout'ni em bilan qurish — ichma-ich compound effekti sababli o'lchamlar boshqarib bo'lmas holga keladi.
  • Follow-up: "62.5% trick nima?" (html { font-size: 62.5% } bilan 1rem = 10px qilish).

S: BEM metodologiyasi nima? Nega kerak? (Middle)

J:

  • Ta'rif: BEM (Block, Element, Modifier) — CSS class nomlash konvensiyasi:
    • Block — mustaqil komponent: .card.
    • Element — blok qismi: .card__title, .card__image (__).
    • Modifier — variant/holat: .card--featured, .button--disabled (--).
  • Nega kerak: Global CSS'da nom to'qnashuvi va yuqori specificity muammosini yechadi. Har class yassi (bitta class specificity), ichma-ich selektor kam — kod bashoratli va qayta ishlatiladigan bo'ladi.
  • Kod:
css
.card { }
.card__title { }
.card--featured { }
  • Tuzoq: BEM'ni ichma-ich selektor bilan aralashtirish (.card .card__title) — bu specificity'ni oshirib BEM maqsadini buzadi. BEM'da har element o'z yassi class'iga ega bo'lishi kerak.
  • Follow-up: "BEM va CSS Modules farqi?", "Utility-first (Tailwind) bilan taqqoslang."

S: CSS-in-JS nima? Afzallik va kamchiliklari. (Middle/Senior)

J:

  • Ta'rif: CSS'ni JS/komponent ichida yozish (styled-components, Emotion). Stil komponentga bog'lanadi, prop'larga qarab dinamik bo'ladi.
  • Afzalliklar: avtomatik scoping (nom to'qnashuvi yo'q), dinamik stil (prop stil), o'lik kod olib tashlash oson, komponent bilan birga ko'chadi.
  • Kamchiliklar: runtime xarajat (stil JS'da generatsiya bo'ladi — biroz sekinlik), bundle hajmi, SSR murakkabligi. Shu sabab zero-runtime yechimlar (Tailwind, CSS Modules, Linaria, vanilla-extract) ommalashdi.
  • Tuzoq: Runtime CSS-in-JS'ni katta ilovada tanqidiy yo'lda ishlatish — render'da stil hisoblanib performansga ta'sir qiladi. Zamonaviy trend — build-time'da stil ajratish.
  • Follow-up: "CSS Modules qanday scoping qiladi?", "Tailwind qanday ishlaydi?", "Runtime vs zero-runtime?"

S: overflow xossasi va uning qiymatlari. (Middle)

J:

  • Qiymatlar: visible (default, chiqib turadi), hidden (kesiladi), scroll (doim scrollbar), auto (kerak bo'lsa scrollbar), clip.
  • Mexanizm: overflow: hidden kontent'ni konteyner chegarasida kesadi. overflow: auto/scroll yangi BFC (Block Formatting Context) yaratadi — float'larni o'rab oladi, margin collapse'ni to'xtatadi.
  • Tuzoq: overflow: hidden ni faqat "yashirish" deb bilish — u position: sticky ni buzadi (sticky ota overflow bo'lsa ishlamaydi) va matn kesilib qolishiga sabab bo'ladi. text-overflow: ellipsis uchun overflow: hidden + white-space: nowrap kerak.
  • Follow-up: "Matnni ... bilan kesish qanday?", "BFC nima?"

S: BFC (Block Formatting Context) nima? (Senior)

J:

  • Ta'rif: BFC — sahifaning mustaqil layout mintaqasi, ichidagi elementlar tashqariga ta'sir qilmaydi va aksincha.
  • Nima yaratadi: overflow != visible, display: flow-root (toza usul), float, position: absolute/fixed, flex/grid konteyner.
  • Nima uchun kerak:
    1. Float'ni o'rab olish — ota float bo'lgan bolani o'z ichiga oladi (balandlik yig'iladi).
    2. Margin collapse'ni to'xtatadi — BFC ichidagi margin tashqari bilan yig'ilmaydi.
    3. Float element ustiga yozilmaslik.
  • Tuzoq: BFC'ni bilmasdan overflow: hidden bilan float clearfix qilish — ishlaydi, lekin nojo'ya (kontent kesilishi mumkin). Zamonaviy toza yechim — display: flow-root.
  • Follow-up: "Clearfix hack nima edi?", "display: flow-root nima?"

S: :hover, :focus, :active va :focus-visible farqi. (Middle)

J:

  • :hover — sichqoncha element ustida (mobil'da yo'q).
  • :focus — element fokusda (klaviatura tab yoki bosish).
  • :active — bosilib turgan payt.
  • :focus-visible — fokus klaviaturadan kelganda (sichqoncha bosishda emas) — outline'ni faqat klaviatura foydalanuvchiga ko'rsatish uchun.
  • Tuzoq: outline: none bilan fokus konturini butunlay o'chirish — accessibility falokati (klaviatura foydalanuvchi qayerdaligini ko'rmaydi). To'g'ri yechim: :focus-visible bilan chiroyli fokus stili berish, sichqoncha bosishda yashirish.
  • Follow-up: "Fokusni nega o'chirmaslik kerak?", ":focus-within nima?"

S: CSS o'zgaruvchilari (custom properties) nima? SASS o'zgaruvchisidan farqi. (Middle)

J:

  • Ta'rif: --main-color: #333; — CSS custom property, var(--main-color) bilan ishlatiladi.
  • SASS o'zgaruvchisidan farqi:
    • CSS o'zgaruvchisi runtimeda yashaydi — JS'dan o'zgartiriladi, media query ichida qayta belgilanadi, meros oladi (cascade). Dark mode/theming uchun ideal.
    • SASS o'zgaruvchisi compile-timeda — build'dan keyin yo'qoladi, dinamik o'zgarmaydi.
  • Kod:
css
:root { --gap: 16px; }
@media (min-width: 768px) { :root { --gap: 32px; } }
.box { gap: var(--gap); }
  • Tuzoq: CSS o'zgaruvchisini media query ichida @media shartini almashtirishga ishlatib bo'lmaydi (@media (--var) yo'q) — u faqat qiymat uchun. Fallback: var(--x, 10px).
  • Follow-up: "Dark mode'ni CSS o'zgaruvchisi bilan qanday?", "JS'dan qanday o'zgartirasiz?" (style.setProperty).

S: float nima edi va nega bugun kam ishlatiladi? (Junior/Middle)

J:

  • Ta'rif: float — elementni chapga/o'ngga suradi, matn uni o'rab oladi. Aslida matn ichida rasm o'rash uchun mo'ljallangan.
  • Tarix: Flexbox/Grid'gacha butun sahifa layout'i (ustunlar) float bilan qurilardi — bu esa "clearfix" hack'lari va murakkablik keltirardi.
  • Bugun: Layout uchun Flexbox/Grid ishlatiladi. float faqat asl maqsadi — matn ichida rasm o'rash uchun qoladi.
  • Tuzoq: Float qilingan element ota balandligiga qo'shilmaydi (ota "yig'ilib" qoladi) — clearfix yoki BFC kerak edi. Zamonaviy kodda layout uchun float qo'llash — eskirgan yondashuv.
  • Follow-up: "Clearfix qanday ishlagan?", "Nega Grid float'ni almashtirdi?"

S: CSS performance: renderni tezlashtirish uchun nima qilasiz? (Senior)

J:

  • Selektor samaradorligi: brauzer selektorni o'ngdan chapga o'qiydi. Chuqur ichma-ich (div > ul li a span) va universal (* {}) selektorlardan qoching.
  • Reflow'ni kamaytirish: layout thrashing'dan qoch (o'qish/yozishni ajrat), transform/opacity bilan animatsiya qil.
  • Critical CSS: birinchi ekran uchun CSS'ni inline qilib, qolganini kechiktirish (FCP tez).
  • content-visibility: auto — ekrandan tashqaridagi bo'limlarni render qilmaslik (katta sahifada tezlik).
  • CSS hajmini kamaytirish — ishlatilmagan CSS'ni tozalash (PurgeCSS), minify.
  • will-change ni faqat kerakli animatsiyaga (ortiqchasi xotira sarflaydi).
  • Tuzoq: "CSS selektor optimizatsiyasi eng muhim" deb o'ylash — zamonaviy brauzerlarda selektor tezligi kamdan-kam bo'g'iz; asosiy muammo layout/paint (reflow, katta paint mintaqalari). Avval profiling (DevTools Performance) qiling.
  • Follow-up: "content-visibility nima qiladi?", "Critical CSS'ni qanday ajratasiz?", "Layout thrashing'ni qanday topasiz?"

S: transform xossasi va uning funksiyalari. (Middle)

J:

  • Funksiyalar: translate(x,y), scale(), rotate(), skew(), matrix(), va 3D: translate3d, rotateX/Y/Z, perspective.
  • Mexanizm: transform elementni vizual o'zgartiradi, lekin layout'da egallagan joyi o'zgarmaydi (boshqa elementlar surilmaydi). GPU'da hisoblanadi — arzon.
  • Tuzoq: transform layout'ni o'zgartirmagani uchun element vizual siljisa ham, uning "asl" joyi bosishni qabul qiladi (event target). Yana: transform element'ga stacking context va containing block (fixed bolalar uchun) yaratadi — bu kutilmagan joylashuvga olib kelishi mumkin.
  • Follow-up: "translate va top/left farqi?", "transform fixed bolaga qanday ta'sir qiladi?"

S: CSS'da !important qachon ishlatiladi va nega qochiladi? (Middle)

J:

  • Ta'rif: !important qoidani specificity'dan qat'i nazar eng ustun qiladi (faqat boshqa !important yoki yuqori origin ustidan chiqadi).
  • Nega qochiladi: Cascade'ning tabiiy oqimini buzadi — keyin uni bekor qilish uchun yana !important kerak bo'ladi, "important urushi" boshlanadi. Kod boshqarib bo'lmas holga keladi.
  • Qachon o'rinli: Uchinchi tomon (tashqi kutubxona) stil'ini majburan bekor qilish, yoki utility class'lar (Tailwind ba'zi holatda). Ba'zan foydalanuvchi stil varag'ida.
  • Tuzoq: Specificity muammosini !important bilan "tuzatish" — asl sabab (ortiqcha ID selektor, chuqur ichma-ichlik) hal qilinmaydi, texnik qarz to'planadi.
  • Follow-up: "!important ni qanday bekor qilasiz?", "Uni ishlatmasdan specificity'ni qanday boshqarasiz?"

S: Pseudo-class va pseudo-element farqi. (Middle)

J:

  • Pseudo-class (:) — element'ning holati/pozitsiyasini tanlaydi: :hover, :focus, :nth-child(2), :first-of-type, :not(), :checked.
  • Pseudo-element (::) — element'ning qismini yoki virtual mazmun yaratadi: ::before, ::after, ::first-line, ::placeholder, ::selection.
  • Mexanizm: ::before/::after content bilan real bo'lmagan (DOM'da yo'q) element yaratadi — ikonka, dekorativ chiziq uchun.
  • Tuzoq: ::before/::after da content majburiy (hatto content: "") — usiz element paydo bo'lmaydi. Yana: bitta qavat (:) eski sintaksis (CSS2), yangi standart pseudo-element uchun ikki qavat (::).
  • Follow-up: "::before bilan ikonka qanday qo'yasiz?", ":nth-child va :nth-of-type farqi?"

S: em bilan rem — accessibility nuqtai nazaridan qaysi biri va nega? (Senior)

J:

  • Javob: Tipografiya va layout uchun rem (yoki em) ishlatish pxdan afzal, chunki foydalanuvchi brauzer standart font o'lchamini kattalashtirsa (ko'zi ojiz uchun), rem/em moslashadi, px esa qotib qoladi.
  • Mexanizm: rem root font-size'ga bog'liq; brauzer sozlamasi root'ni o'zgartiradi butun sahifa mos kattalashadi. px bu sozlamaga befarq.
  • Tuzoq: font-sizeni pxda qotirib, "responsive" deb hisoblash. Zoom (Cmd/Ctrl +) pxni ham kattalashtiradi, lekin brauzerdagi standart font o'lchami sozlamasi faqat nisbiy birliklarga ta'sir qiladi — WCAG buni talab qiladi.
  • Follow-up: "WCAG matn o'lchami talabi?", "media query'da em ishlatish afzalmi?" (ha, breakpoint ham font sozlamasiga moslashadi).

S: gap xossasi flex va grid'da qanday ishlaydi? (Middle)

J:

  • Ta'rif: gap (yoki row-gap/column-gap) — flex/grid item'lar orasidagi masofa. Faqat ichki bo'shliqlar (chetlarda emas).
  • Mexanizm: margin bilan qilinadigan bo'shliqning muammosini (oxirgi elementda ortiqcha margin, :last-child hack'lari) yechadi. Grid'da ancha oldin, flexbox'da nisbatan yangi (hozir keng qo'llab-quvvatlanadi).
  • Tuzoq: Eski brauzerlarda flex gap ishlamasligini unutish (bugun deyarli hammada bor). Yana: gap faqat item'lar orasida — chetdagi bo'shliq uchun konteyner padding kerak.
  • Follow-up: "gapgacha bo'shliqni qanday qilardingiz?" (margin + negatif margin hack).

S: Nega CSS "cascading" deb ataladi va inheritance nima? (Middle)

J:

  • Cascade: Bir elementga bir necha manba (brauzer, muallif, foydalanuvchi) va selektordan qoidalar "sharsharadek" tushadi; brauzer ularni importance specificity tartib bo'yicha hal qiladi.
  • Inheritance (meros): Ba'zi xossalar ota'dan bola'ga avtomatik o'tadi: color, font-family, font-size, line-height, visibility. Ko'pchilik (box model — margin, padding, border, width) meros olmaydi.
  • Boshqarish: inherit (majburan meros ol), initial (standart qiymat), unset (meros oladigan bo'lsa inherit, aks holda initial), revert.
  • Tuzoq: Barcha xossa meros oladi deb o'ylash — border, padding meros olmaydi. a teg color ni meros olmaydigandek ko'rinadi — aslida brauzer user-agent stili (a { color: blue }) meros'dan ustun.
  • Follow-up: "inherit va initial farqi?", "Qaysi xossalar meros oladi?"

S: min-width, max-width va clamp() responsive'da qanday yordam beradi? (Middle/Senior)

J:

  • min-width/max-width — element o'lchamini chegaralaydi: max-width: 1200px — kontent juda kengaymaydi, width: 100% bilan birga mobilda to'liq, desktopda cheklangan.
  • clamp(min, ideal, max) — moslashuvchan qiymat: font-size: clamp(1rem, 2.5vw, 2rem) — kichik ekranda 1rem, katta ekranda 2rem, orasida vwga qarab silliq o'zgaradi. Media query'siz fluid tipografiya.
  • Mexanizm: clamp max(min, min(ideal, max)) ga teng — ideal qiymatni ikki chegara orasida ushlaydi.
  • Tuzoq: Faqat vw bilan font qilish (font-size: 2vw) — juda kichik ekranda o'qib bo'lmas, juda katta ekranda ulkan. clamp chegaralar bilan buni yechadi.
  • Follow-up: "Fluid typography nima?", "min()/max() CSS funksiyalari?"

S: Container query nima? Media query'dan farqi. (Senior)

J:

  • Ta'rif: Container query — komponent o'zi joylashgan konteyner o'lchamiga qarab stil oladi (viewport emas):
css
.card-wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { flex-direction: row; } }
  • Media query'dan farqi: Media query butun viewportga qaraydi; container query ota konteynerga. Shu sabab bir komponent turli joyda (keng sidebar / tor kolonka) turlicha ko'rinadi — haqiqiy modulli, qayta ishlatiladigan komponent.
  • Tuzoq: Container query'ni har joyda ishlatish — u yangi (eski brauzerlarda yo'q), fallback rejalash kerak. Konteyner container-type bermasa ishlamaydi.
  • Follow-up: "Nega bu komponent dizayni uchun muhim?", "Brauzer qo'llab-quvvatlashi qanday?"

S: Inline stil, ichki (internal) va tashqi (external) CSS farqi. (Junior)

J:

  • Inline (style="...") — element'da to'g'ridan, eng yuqori specificity, qayta ishlatilmaydi, keshlanmaydi.
  • Internal (<style> <head>da) — bitta sahifa uchun, HTML bilan yuklanadi.
  • External (<link rel="stylesheet">) — alohida fayl, keshlanadi (bir marta yuklanib, boshqa sahifalarda qayta ishlatiladi), maintainability yaxshi.
  • Tuzoq: Inline stil'ni !importantsiz bekor qilib bo'lmaydi (juda yuqori specificity). Katta loyihada inline stil — texnik qarz. Critical CSS uchun internal (inline) atayin ishlatiladi (birinchi render tez).
  • Follow-up: "Critical CSS nega inline qo'yiladi?", "External CSS render-blocking'ni qanday kamaytirasiz?"

S: aspect-ratio xossasi nima uchun kerak? (Middle)

J:

  • Ta'rif: aspect-ratio: 16 / 9 — element balandligini kengligiga nisbatan avtomatik saqlaydi.
  • Mexanizm: Ilgari bu uchun "padding-top hack" (padding-top: 56.25%) ishlatilardi — endi bitta xossa. Responsive video/rasm konteyneri, kartochkalar uchun.
  • Tuzoq: Kontent belgilangan nisbatdan katta bo'lsa, aspect-ratio buziladi (kontent ustun keladi) — overflow yoki min-height bilan boshqarish kerak. Layout shift (CLS)ni oldini olishda rasmlarga width/height yoki aspect-ratio berish muhim.
  • Follow-up: "Padding-top hack nima edi?", "CLS (layout shift)ni qanday kamaytirasiz?"

S: contain va content-visibility — rendering performance uchun. (Senior)

J:

  • contain: layout paint — brauzerga elementning ichki o'zgarishi tashqariga ta'sir qilmasligini bildiradi — brauzer layout/paint hisobini shu element bilan cheklaydi (tezlik).
  • content-visibility: auto — ekrandan tashqaridagi kontent'ni render qilmaydi (layout/paint'ni o'tkazib yuboradi), foydalanuvchi scroll qilganda render qiladi. Uzun sahifalarda dastlabki render'ni sezilarli tezlashtiradi.
  • Tuzoq: content-visibility: auto bilan contain-intrinsic-size bermaslik — brauzer render qilinmagan blok balandligini bilmaydi, scrollbar "sakraydi". Taxminiy o'lcham berish kerak.
  • Follow-up: "contain-intrinsic-size nima uchun?", "Bu virtualizatsiyadan qanday farq qiladi?"

S: CSS reset va normalize farqi. (Middle)

J:

  • Reset (masalan Eric Meyer reset) — barcha brauzer standart stil'larini nolga tushiradi (margin, padding, font-size — hammasi 0/bir xil). Toza boshlash, lekin hamma narsani qaytadan yozish kerak.
  • Normalize.css — brauzerlar orasidagi nomuvofiqliklarni tuzatadi, lekin foydali standart stil'larni saqlaydi (h1 katta qoladi). Yumshoqroq yondashuv.
  • Tuzoq: Ikkalasini birga ishlatish (ortiqcha). Zamonaviy loyihalar ko'pincha kichik maxsus "modern reset" (masalan box-sizing: border-box, margin: 0, img { max-width: 100% }) ishlatadi.
  • Follow-up: "Zamonaviy minimal reset'da nima bo'ladi?", "Nega box-sizing: border-box global qo'yiladi?"

Eng ko'p so'raladigan 10 savol

Bu savollar deyarli har frontend/full-stack intervyusida uchraydi — ularni mukammal biling:

  1. Brauzerga URL yozib Enter bosgach nima bo'ladi? (DNS TCP TLS HTTP render — to'liq zanjir).
  2. CSS specificity qanday hisoblanadi? (inline, ID, class, element — misol bilan hisoblab bering).
  3. Flexbox va Grid farqi va qachon qaysi biri? (bir o'lchovli vs ikki o'lchovli).
  4. position qiymatlari, ayniqsa absolute va sticky. (nimaga nisbatan joylashadi).
  5. Event bubbling, capturing va delegation. (target vs currentTarget).
  6. box-sizing va box model. (content-box vs border-box).
  7. Reflow va repaint farqi, animatsiyani qanday tezlashtirasiz. (transform/opacity).
  8. CORS nima va nega faqat server yecha oladi.
  9. Cookie, localStorage, sessionStorage farqi va token qayerda saqlanadi.
  10. HTTP status kodlar, ayniqsa 401 vs 403, 301 vs 302.

Maslahat: Intervyuda javobni strukturali bering: avval ta'rif, keyin mexanizm (nega/qanday), so'ng misol yoki tuzoq. Aynan "nega/qanday ishlaydi" qismi sizni junior'dan middle/senior'ga ko'taradi. Follow-up savollarga tayyor bo'ling — bitta savol har doim zanjir.

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
Texnik intervyu: Web asoslari, HTML va CSS — Wisar