🌀 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

#foydali_kod
#html
#css
#animation

✨ Sof CSS o'tish (toggle) tugmalari | ON-OFF kalitlari (Switches)

👉 Kod linki

@doston_dev