🌀 BOOTSTRAP darslari | BOOTSTRAP 5 SCROLLSPY VA OFFCANVAS (10-dars)


👉 Videoga o'tish


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🗂 Plagin nima ❓

Plagin - ( inglizcha "plug in" - "ulanish uchun") mustaqil ravishda kompilyatsiya qilingan dasturiy ta'minot moduli bo'lib, asosiy dasturga dinamik ravishda ulangan va uning imkoniyatlarini kengaytirish yoki ishlatish uchun mo'ljallangan. Plaginlar odatda umumiy kutubxonalar sifatida ishlaydi.

Plaginlarni ulash imkoniyatiga ega bo'lish uchun asosiy dasturni ishlab chiquvchisi unda ba'zi dasturiy interfeyslarni ta'minlashi kerak. Ba'zi ilovalarda plaginlarni foydalanuvchi qo'shimcha ravishda sozlashi mumkin.

Plaginlar frontend dasturlashda ham juda muhim hisoblanadi. Buni hisobga olgan holda navbatdagi darslarimiz ham aynan Frontend dasturchi uchun kerak bo'lgan ayrim plaginlarni ilovalarimizda foydalanish bo'yicha bo'ladi.

Bizni kuzatishda davom eting !!!

👉 @doston_dev

🌀 OWL-CAROUSEL plagini haqida ...

Veb ilovalarni ishlab chiqishda biz ko'pincha rasm slayderini, bannerni yoki mahsulot karuselini yaratishga to'g'ri kelamiz. Ushbu vazifalarni bajarish uchun bizga juda ham mashhur bo'lgan jQuery plagini Owl Carousel yordamga keladi.

Plagin juda ko'p sonli sozlamalarga ega, u turli xil ekran o'lchamlari uchun moslashtirilgan, barcha zamonaviy brauzerlar bilan mos keladi (va ko'plab eskirgan, ammo hali ham foydalaniladi).

OWL Carousel Slider - veb ilovalar yaratish uchun moslashtirilgan va to'liq sezgir Carousel Slider plaginidir. Ushbu Carousel Slider plaginini saytingizning istalgan joyida slayder ko'rsatish mumkin.

Qisqa kod yordamida sozlash uchun siz 40 dan ortiq parametrlardan foydalanishingiz mumkin, bu uni juda konfiguratsiya va foydalanuvchilar uchun qulay qiladi. Siz saytingizda OWL Carousel slayderini har qanday qarama -qarshiliksiz ishlatishingiz mumkin.

OWL Carousel slayderi shuningdek, video galereyalarni ko'rsatishga yordam beradigan YouTube yoki Vimeo videolarini ham qo'llab-quvvatlaydi.

✨ Plagin bir qancha yangi xususiyatlarni o'z ichiga oladi:

🟡 Ko'rsatiladigan slaydlar elementini qurilma kengligi bo'yicha boshqarish (ko'rish porti).

🟠 Bir sahifada bir nechta misollar.

🟣 Navigatsiyani surish imkoniyati.

🔵 Infinity Slaydlar loopi.

🔴 YouTube/Vimeo videolarini qo'llab-quvvatlash.

✨ Boshqa mavjud xususiyatlari:

⚡️Tez va sezgir slaydlar.
⚡️Kuchli administrator sozlamalari
⚡️Slayder maydoni uchun fon tasviri va rangi.
⚡️Qisqa kodli tizim.
⚡️Slayder vidjeti.
⚡️To'liq javob beradigan va mobil versiyasi tayyor.
⚡️Kuchli sozlamalar variantlari paneli
⚡️Bir marta bosish bilan qisqa kod tugmasi.
⚡️Owl karusel variantlari.
⚡️Yoqilgan navigatsiyani bosish imkoniyati.
⚡️Sichqonchani sudrab o'tish yoqilgan.
⚡️Qisqa kodni qo'llab-quvvatlash
⚡️Maxsus xabar turi slayder.
⚡️Tasvirlar / Videolar / Tavsiflarni qo'llab-quvvatlash.
⚡️Juda Yengil.
⚡️O'rnatish va ishlatish oson.
⚡️To'liq tarjima qilish mumkin
⚡️Istalgan joyda cheksiz slayder.
⚡️Sof CSS yoki LESS bilan tahrirlanadigan uslublar
⚡️Yaxshi tashkil etilgani osongina sozlash imkonini beradi.


Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 PLUGINS | OWL-CAROUSEL (1-dars)


👉 Videoga o'tish


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

📊 Barchaning sevimli grafik kutubxonasi ...

Highcharts - zamonaviy SVG-ga asoslangan, ko'p platformali diagramma kutubxonasi. Bu web va mobil loyihalarga interaktiv jadvallar va diagrammalarni qo'shishni osonlashtiradi. U 2009 yildan beri faol ishlab chiqilmoqda va mustahkam xususiyatlar to'plami, foydalanish qulayligi va puxta hujjatlar tufayli ishlab chiquvchilarning sevimlisi bo'lib qolmoqda.

Highchartning barcha diagramma kutubxonalari har qanday ma'lumotlar bazasi yoki serverlar to'plami bilan ishlay oladi. Ma'lumotlar istalgan shaklda, jumladan CSV, JSON yoki yuklangan va yangilangan jonli shaklda berilishi mumkin. .Net, PHP, Python, R va Java, shuningdek, iOS va Android kabi eng mashhur tillar uchun frameworklar hamda Angular, Vue va React kabi JavaScript frameworklari Highcharts hamjamiyatida mavjud.

Highcharts ko'rish qobiliyati zaif foydalanuvchilar va faqat klaviatura navigatsiyasiga ega foydalanuvchilar uchun sanoatning eng murakkab foydalanish imkoniyatini qo'llab-quvvatlaydi.

👉 @doston_dev

🌀 PLUGINS | HIGHCHARTS (2-dars)


👉 Videoga o'tish


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

♨️ AOS JS - sahifani aylantirishda scroll animatsiyasi bilan ishlash kutubxonasi ...

Frontend dasturchilari web ilovalarni ishlab chiqishda ko'pincha mijozlar saytga ajoyib effektlarni - sahifani aylantirishda ya'ni sahifada scroll yuzaga kelganda animatsiyani amalga oshirishni so'rashlari bilan duch kelishadi. Ha, albatta, siz CSS-da bunday effektlarni o'zingiz yaratishingiz mumkin, lekin munosib animatsiya qilish uchun bir necha soat vaqt sarflaganingizga to'g'ri keladi. Ammo xavotirga o'rin yo'q. Bu maqsadlar uchun ko'plab tayyor kutubxonalar allaqachon yaratilgan va eng yaxshilaridan biri bu Animate On Scroll yoki AOS js.

AOS js sahifa pastga va yuqoriga aylantirganda ya'ni scroll hosil qilinganda elementlarni jonlantirishga ya'ni turli effektlarni hosil qilishga imkon beradi. Yuqoriga qaytsangiz, elementlar avvalgi holatiga jonlanadi va pastga aylantirsangiz, elementlar yana jonlantirishga tayyor bo‘ladi.

👉 @doston_dev

🌀 PLUGINS | AOS - Animate on scroll (3-dars)


👉 Videoga o'tish


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🗂 Sassy Cascading Style Sheets (SCSS)

SCSS - bu CSS-da kompilyatsiya qilingan preprocessor tili. Bu SASS ning maxsus turi (Syntactically Awesome Style Sheets). SCSS-ning senariysi Saasscript-da amalga oshiriladi. SCSS CSS-ning barcha xususiyatlarini o'z ichiga oladi, shuningdek, qo'shimcha xususiyatlarga qo'shimcha ravishda qo'shiladi.


SCSS-dan foydalanib, biz CSS-ga ko'plab qo'shimcha funktsiyalarni qo'shishimiz mumkin, masalan, o'zgaruvchilar, joylashtirish va boshqalar. Ushbu qo'shimcha funktsiyalarning barchasi an'anaviy CSS-ni yozish bilan taqqoslaganda CSS-ni yozishni ancha osonlashtirishi va tezlashtirishi mumkin.
SCSS an'anaviy CSS-ni ishlab chiqaradi. SASS yoki SCSS-da kodni o'qish CSS-da o'qishdan tezroq.

❗️SASS va SCSS ularning sintaksisiga nisbatan yagona farqi - bu chiziqning ishlatilishidir {}. Boshqacha qilib aytganda, SCSS tarkibi SASSdan boshqa narsa emas.

✅ SCSS ning afzalliklari

✨ Bu sizga dastur tuzilishida toza, oson va kam CSS yozishni osonlashtiradi.

✨ Unda kamroq kodlar mavjud, shuning uchun siz CSS-ni tezroq yozishingiz mumkin.

✨ U juda yaxshi hujjatlarga ega, ya'ni barcha kerakli ma'lumotlarni Internet orqali olishingiz mumkin.

✨ Ichki sintaksisdan va ranglarni boshqarish, matematik funksiyalar va boshqa qiymatlar kabi foydali funksiyalardan foydalanishingiz uchun OSON.

✨ U CSS-ning barcha versiyalari bilan mos keladi. Shunday qilib, siz istalgan mavjud CSS kutubxonalaridan foydalanishingiz mumkin.

✨ U CSS-dagi qiymatlarni istagancha qayta ishlatishga yordam beradigan o'zgaruvchilardan iborat.

✨ Sintaksisni ajratib ko'rsatish keng qo'llaniladigan CSS vositasi va SCSS-da qo'llab-quvvatlanadi. SCSS sizga mavjud koddan foydalanishga imkon beradi va kodning tashqi harakatlarini o'zgartirmasdan uning ichki tuzilishini yaxshilashga yordam beradi.

⚠️ SCSS ning kamchiliklari

⚡️Nosozliklarni tuzatish - Dastlabki protsessorlarda kompilyatsiya bosqichi mavjud, bu esa kodni disk raskadrovka qilishga urinishda CSS-dagi kod satrlarini ahamiyatsiz qiladi. Ammo disk raskadrovka dasturlashdan ikki baravar qiyin va bu juda katta kamchiliklar mavjud.

⚡️Katta CSS fayllari - Manba fayllari kichik bo'lishi mumkin, ammo yaratilgan CSS ulkan bo'lishi mumkin, bu esa SCSS ga qiyinchilik olib keladi.

⚡️Tushunish - Dastlabki protsessorlar keng tarqalib ketgan bo'lsa ham, CSS-da bilimlar mavjud. Asbobni tushunish va undan samarali foydalanish o'rtasida katta farq bor.

⚡️Rivojlanish - kompilyatsiya mavjud bo'lgan eng yaxshi vositalardan foydalangandan keyin ham rivojlanishni sekinlashtirishi mumkin.

⚡️Foyda yo'qotish - SASS-dan foydalanish brauzerning ichki elementlari inspektorining afzalliklarini yo'qotishiga olib kelishi mumkin.


Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 SASS darslari

Sass - bu CSS-ga kompilyatsiya qilingan uslublar jadvali tili. Bu sizga o'zgaruvchilardan, o'rnatilgan qoidalardan, miksinlardan, funktsiyalardan va boshqalardan foydalanishga imkon berad.

🟢 Sass CSS-ning barcha versiyalari bilan to'liq mos keladi. Sass boshqa CSS kengaytma tillariga qaraganda ko'proq xususiyat va qobiliyatlarga ega.

🟣 Sass katta uslublar jadvallarini yaxshi tartibga solishga yordam beradi va dizaynni loyihalar ichida va loyihalar bo'ylab almashishni osonlashtiradi.

🟠 Sass bir nechta texnologik kompaniyalar va yuzlab dasturchilar tomonidan faol qoʻllab-quvvatlanadi va ishlab chiqiladi.

Xullas bugungi navbatdagi darsimizda Sass ning barcha xususiyatlari haqida batafsil fikr yuritamiz.

👉 Videoga o'tish


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

#Portfolio_uchun
#Maket
#Amaliyot
#Figma

Assalom-u alaykum hurmatli obunachilar !!!

Mana HTML, CSS, Bootstrap, Sass, Scss darslarini ham yakunlab oldik. Endi shu kungacha egallagan bilimlarimiz, Bootstrap va SCSS orqali web saytlarning web dizaynerlar tomonidan yaratilgan maketidan foydalangan holda responsive web sahifalarni shakllantiramiz.

Bu amaliyot darslarimizda biz quyidagi Davlat Test Markazi ning web-sahifa maketidan foydalanishga qaror qildik. Amaliyot darslarimiz davomida ushbu web sahifa maketini responsive ko'rinishda "jonlantiramiz".

🗂 Veb sahifa maketi

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 HTML, BOOTSTRAP, SASS | NAVBAR AMALIYOT (1-QISM)

Amaliyot darslarimizning quyidagi ilk darsi davomida web sahifaning NAVBAR qismini shakllantiramiz.

👉 Videoga o'tish

🗂 Veb sahifa maketi


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 HTML, BOOTSTRAP, SASS | HEADER AMALIYOT (2-QISM)

Amaliyot darslarimizning navbatdagi darsi davomida web sahifaning HEADER qismini shakllantiramiz.


👉 Videoga o'tish

🗂 Veb sahifa maketi


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 HTML, BOOTSTRAP, SASS | MAIN AMALIYOT (3-QISM)

Amaliyot darslarimizning quyidagi ilk darsi davomida web sahifaning MAIN qismini shakllantiramiz.


👉 Videoga o'tish

🗂 Veb sahifa maketi


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

#foydali_kod
#html
#css
#animation

✨ Turli effektlarga ega 100 dan ortiq veb-sayt tugmalari

👉 Kod linki

@doston_dev

🌀 HTML, BOOTSTRAP, SASS | SECTIONS AMALIYOT (4-QISM)

Amaliyot darslarimizning navbatdagi qismida web sahifaning bir nechta bo'limlari SECTION larni shakllantirishni ko'rib chiqamiz.


👉 Videoga o'tish

🗂 Veb sahifa maketi


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 HTML, BOOTSTRAP, SASS | FOOTER AMALIYOT (5-QISM)

Amaliyot darslarimizning so'nggi qismi davomida web sahifaning FOOTER qismini shakllantiramiz va loyihani yakunlaymiz.


👉 Videoga o'tish

🗂 Veb sahifa maketi


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

Assalom-u alaykum hurmatli obunachilar !!!

Mana so'rovnomamiz ham o'z nihoyasiga yetdi. Ko'pchilik so'rovnomada JavaScript darslarini chiqarishimizni so'rashibdi. Shuni inobatga olgan holda navbatdagi darslarimiz JavaScript dasturlash tili haqida bo'lishini sizlarga e'lon qilamiz.

✨ Navbatdagi maqolamizda JavaScript dasturlash tili bilan yaqindan qisqacha tanishishingiz mumkin. JavaScript nima? Nega aynan Javascript? JavaScriptning afzalliklari va kamchiliklari va shu kabi savollar haqida fikr yuritamiz. Bu maqola sizda JavaScript dasturlash tili haqida ilk tassurotlarni aks ettira oladi degan umiddamiz.

Bizni kuzatishda davom eting !!!

👉 @doston_deva

🗂 JavaScript nima ❓

Bu savolga har xil javob berish mumkin. JavaScript yuqori darajadagi dasturlash tili, to'g'rirog'i web dasturlash tili, undan ham to'g'rirog'i klient(brauzer) tomonda ishlaydigan dasturlash tili, ya'ni bu web dasturlash tili ishlashi uchun hech qanday server(Apache, ngnix) kerak emas, oddiy brauzerda(Javascript'da yozilgan kodlar) ishlayveradi.

Dastlab JavaScript "Web-sahifalarni jonli qilish(dinamik)" uchun yaratilgan. Ushbu tildagi dasturlar skriptlar deyiladi. Ularni HTML ichiga kiritish va web-sahifa yuklanganda avtomatik ravishda ishga tushirish mumkin. Skriptlar oddiy matn sifatida tarqatiladi va ijro etiladi. Ular ishlashi uchun intepritator yoki komplyatsiya bo'lishi shart emas, sizga kerakli narsa brauzer(Google va firefoxni tavsiya qilaman).

💥 Bu til nima uchun kerak❓

Bu dasturlash tili orqali serverga so'rov jo'natmasdan, so'rovlarni(javascript kodlarini), ya'ni yozilgan kodlar natijasini, brauzerni ishga tushirgan holda olishingiz mumkin. Asosan interaktiv(dinamik) saytlar tuzish uchun kerak.

✨ Yuqoridagi fikr nima degani❓

Har xil turdagi web dasturlash tillari mavjud, misol uchun, PHP, ASP, JAVA. Bu dasturlash tillari serverga murojaat qilgan holda ishlaydi. Misol uchun, siz arifmetik qo'shish amalini bajarmoqdasiz, yig'indini olish uchun, siz yozgan kod, web serverga jo'natiladi, server bu kodni qayta ishlaydi va natijani sizga jo'natadi. Shu tariqa siz natijani olasiz, brauzer ham serverdan javob(natija) kelguncha aylanib yotadi. Bundan ko'rinib turibdiki, saytning(web sahifaning) ishlash tezligi server sozlamalariga, servergacha bo'lgan masofaga, aloqa kabellariga va boshqa narsalarga bog'liq bo'lib qoladi. JavaScript'da yozilgan kodlar esa, hech qanday serverga murojaatni amalga oshirmaydi, shu sababli bu dasturlash tili kodlari brauzerni qayta yuklamasdan ishlayveradi.

⛳️ Nima uchun JavaScript❓

Tilining ochiqligi e’tiborga loyiq. Odatda bir-biri bilan raqobatlashayotgan kompaniyalar ham JavaScript’ni rivojlantirish uchun hamkorlik qiladi. Tili juda moslashuvchan va ob’yektli-mo‘ljalli tarafdorlari uchun ham, funksional yondoshuvchilar uchun ham to‘g‘ri kelaveradi. Katta miqdordagi kutubxona va freymvorklari turli darajadagi vazifalarni hal eta oladi, Node.js server platformasi esa tilni nafaqat brauzerda, balki konsolda ham ishlatish imkonini beradi. Siz hatto stol ustida yoki mobil ilovalarini ham yozishingiz mumkin: birinchisini Electron freymvork yordamida, ikkinchisini esa, NativeScript yoki React Native yordamida.

🎯 JavaScript dasturlash tili bilan, JAVA dasturlash tili bitta narsami❓

Yo'q, bu ikki til boshqa boshqa dasturlash tillari hisoblanadi. Ko'pchilik shu ikki tilni bitta deb o'ylashadi. JavaScript yaratilganida, u boshqa nomga ega edi - "LiveScript". Ammo o'sha vaqtlarda Java tili juda mashhur edi va JavaScript-ni Java-ning "Qarindoshi(akasi)" sifatida joylashtirish foydali bo'lishi haqida qaror qabul qilindi. Vaqt o'tishi bilan JavaScript o'z xususiyatiga ega bo'lgan ECMAScript deb nomlangan mutlaqo mustaqil tilga aylandi va endi Java bilan hech qanday aloqasi yo'q.(Albatta bu JavaScript bo'lib qoladi)

📚 JavaScript tilini o'rganish uchun o'zbekcha darslarni qayerdan topsa bo'ladi❓

Agar sabr bilan kuzatib borsangiz, biz bu tilni, Youtube va Telegram kanallarimiz orqali o'rgatib boramiz.

Bizni kuzatishda davom eting va do'stlaringizga ham ulashing !!!


Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 JavaScript darslari | KIRISH (1-dars)


👉 Videoga o'tish


〽️ Biz siz uchun darslarni tayyorlamoqdamiz. Siz ham bizni qo'llab quvvatlab yuborasiz degan umiddamiz !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram