🌀 CSS darslari | POSITION PROPERTIES (STATIC, ABSOLUTE, RELATIVE, STICKY, FIXED) (7-dars)

CSS da position - xususiyati element uchun ishlatiladigan joylashish turini bildiradi (statik, nisbiy, aniq, mutlaq yoki yopishqoq). Bu yerda 4 xil pozitsiya qiymatlari mavjud:

🔵 static

🟣 relative

🔴 fixed

🟡 absolute

🟠 sticky

Keyinchalik elementlar yuqori, pastki, chap va o'ng xususiyatlar yordamida joylashtiriladi. Biroq, bu xususiyatlar pozitsiya xususiyati birinchi o'rnatilmagan bo'lsa, ishlamaydi. Ular pozitsiya qiymatiga qarab turli xil ishlaydi.

Navbatdagi darsimizda CSS dagi position xususiyati haqida batafsil gaplashamiz. Bizni kuzatishda davom eting !!!

👉 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

🌀 CSS darslari | PSEUDO ELEMENTLAR VA PSEUDO CLASSLAR (8-dars)

CSS Pseudo elementlari elementlarga yoki qismlarga ularga ID yoki classlar qo'shmasdan ularni stillash imkonini beradi. CSS Pseudo classlari esa sizga elementning hover, aktiv va fokus kabi holatida elementning dinamik holatini, shuningdek umumiy hujjat elementi ichida mavjud bo'lgan, ammo boshqa selektorlardan foydalanmagan holda umumiy element ichidagi elementlarni sozlash imkonini beradi. Masalan, element ichidagi birinchi yoki oxirgi bola elementlarini nishonga olish.

Navbatdagi darsimizda CSS dagi Pseudo elementlar va Pseudo classlar haqida batafsil gaplashamiz. Bizni kuzatishda davom eting !!!

👉 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

🗂 Microsoft Windows 11 ning muqobil versiyasini taqdim etdi !!!

Bugun Microsoft Windows 11 ning muqobil versiyasi chiqdi. Bugundan boshlab Windows 11ning muqobil versiyasidan rasman foydalanishingiz mumkin. Ko'pgina Windows foydalanuvchilari yillar davomida Windows 10 xususiyatlarining yangilanishi vizual o'zgarishlar nuqtai nazaridan ko'p narsa qilmasligidan shikoyat qilishgan. Ha, bu yangi Windows 11 versiyasida foydalanuvchi interfeysiga ko'proq e'tibor berildi va foydalanuvchi interfeysi yaxshilandi.

Yuqoridagi maqolamizda Windows 11 ning Windows 10 dan farqlari haqida fikr yuritamiz !!!

Windows 11 ni ushbu link orqali yuklab olishingiz mumkin :

👉 Yuklab olish


@doston_dev

🗂 CSS da TRANSFORM va TRANSITION xususiyatlari

CSS3 da transform (konvertatsiya qilish) va transition (o'tish) xususiyatlari oldingi web dasturchilarga elementlarni koordinata ichida create (yaratish), move (ko'chirish), reshape (o'zgartirish), rotate (aylantirish), scale (o'lchash) va translate qilishni JavaScript ishlatmagan holda juda osonlashtirgan. CSS3 ga ushbu xususiyatlarning qo'shilishi web ilovalarni statik, matnga o'xshash tabiatdan vizual effektlar yuklangan dinamik ko'rinishga o'tkazdi.

🟣 Transformatsiya - bu elementga shaklini, hajmini va joylashuvini o'zgartirish xususiyatini o'zgartirishga imkon beradigan xususiyat bo'lib, konvertatsiya tezligi va davomiyligini nazorat qilib, uni silliq va chiziqli ravishda bo'lishini namoyon qilishdir.

Tranform va Transition - bu mustaqil xususiyatlar, lekin ular odatda web sahifadagi elementlarning izchil va to'g'ri harakatini yaratish uchun bu xususiyatlar birgalikda ishlatiladi. Transitionsiz, konvertatsiya transform effektlari darhol va to'satdan sodir bo'ladi. CSS da transform va transition ko'pincha rivojlangan CSS larda joylashgan. Garchi ular matn xususiyatlari kabi tez -tez ishlatilmasada, ular haqida alohida hech narsa yo'q. Ular hali ham standart CSS qoidalari va sintaksisiga amal qilishadi.


Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 CSS darslari | TRANSFORM, TRANSITION (9-dars)

Navbatdagi darsimizda CSS dagi TRANSFORM va TRANSITION haqida batafsil gaplashamiz. Bizni kuzatishda davom eting !!!

👉 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

🌀 CSS darslari | FONT-FAMILY (10-dars)

Navbatdagi darsimizda CSS dagi FONT-FAMILY xususiyati bilan tanishamiz. Bizni kuzatishda davom eting !!!

👉 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

🗂 ​​Dasturchilar qobiliyatlarini doimiy ravishda rivojlantirib borishi kerak

Dasturchilar, boshqa mutaxassislar singari, doimiy ravishda rivojlanishi kerak. Bugun biz sizga takomillashtirilishi kerak bo'lgan ko'nikmalar haqida gapiramiz.
⠀
👨🏻‍💻 Klaviaturada yozish tezligi

Ushbu ko'nikma loyihani qanchalik tez bajarishingizni va uning qanchalik katta bo'lishini belgilaydi. Ideal holda, siz kodni klaviaturaga qaramagan holatda yozishni o'rganishingiz kerak. Bunda sizga turli xil bosma simulyatorlar yordam beradi.

🇬🇧 Ingliz tili

IT bo'yicha eng yangi va eng zamonaviy ma'lumotlar har doim ingliz tilida chiqadi. Albatta bu bir kun o'zgarishi mumkin, ammo yaqin orada emas. Agar siz hamma yangiliklardan xabardor bo'lishni va faqat eng yaxshilaridan foydalanishni istasangiz, unda chet el manbalarini o'qing.

🧩 Mantiq

Har qanday algoritm mantiqiy tuzilgan amallar ketma - ketligi. Ushbu mahoratni rivojlantirish orqali dasturchi o'z ishining tezligini va kodning " tozaligini " oshiradi, bu uning loyihasida kamroq xatolarga olib keladi.

Dasturchi bo'lishni xohlaysizmi?
Siz keltirib o'tilgan qanday mahoratni mukammal egalladingiz?

@doston_dev

🌀 CSS darslari | SHADOW, GRADIENT (11-dars)

Navbatdagi darsimizda CSS da elementlar va matnlarga soya berish uchun qo'llaniladigan SHADOW xususiyati va bir elementning rangi uchun bir nechta ranglardan foydalanish imkoniyatini beruvchi GRADIENT xususiyatlari bilan tanishamiz. Bizni kuzatishda davom eting !!!

👉 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

#Offline

W3school.com saytining offline versiyasi

Dasturlash bo'yicha eng
yaxshi saytni endi #Offline ham ishlatsak bo'ladi.

Eng so'nggi versiya #2021

🗂 Yuklab olish uchun link

@doston_dev

🌀 CSS darslari | CSS ANIMATIONS (12-dars)

Animatsiya veb saytlarga dinamizm beradi va ularning imkoniyatlarini tushunishni yaxshilaydi. Bu veb sahifalarni jonlantiradi va foydalanuvchi bilan muloqotda bo'lishga yordam beradi. CSS3 o'tishidan farqli o'laroq, CSS animatsiyalari asosiy kadrlarga asoslangan. Bu sizga effektlarni ma'lum vaqt davomida o'ynashga va takrorlashga, shuningdek loop ichidagi animatsiyani avtomatik ravishda to'xtatishga imkon beradi.

Navbatdagi darsimizda CSS da animatsiyalar yaratish uchun xizmat qiladigan CSS xususiyatlari haqida batafsil tanishamiz. Bizni kuzatishda davom eting !!!

👉 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

🗂 Dasturchi bo'lish qiyinmi va unga nimalar talab etiladi❓

🔵 Kuchli ishtiyoq

🟢 Sabr (juda ko'p mashqlar, qayta-qayta urinib ko'rish)

🟣 Mantiq

🔴 Jamoa bilan ishlash

🟠 Qorong'ulik bo'lishi kerak emas (Ish topiladi, faqat potensial bo'lsa)

🟡 Xarakter (Uddalay olaman degan)

@doston_dev

🌀 CSS darslari | RESPONSIVE WEB DESIGN (MEDIA QUERIES) (13-dars)

E'tiborli web-dizayn - bu sahifalar tashrif buyuruvchilarning ekran o'lchamlari asosida ularning tartibini va tashqi ko'rinishini dinamik ravishda o'zgartirishi mumkin bo'lgan web-sahifalarni yaratishning yondashuvidir. Katta ekranlar u kattaroq ekranlarga mos keladigan tartibni olishi mumkin, shuning uchun kichikroq qurilmalar, masalan, uyali telefonlar, o'sha web-saytni kichikroq ekranga mos ravishda formatlashtirishi mumkin. Ushbu yondashuv barcha foydalanuvchilar uchun yaxshiroq foydalanuvchi tajribasini taqdim etadi va hatto qidiruv tizimining tartibini yaxshilashga yordam beradi. Moslashuvchan web-dizaynning muhim qismi CSS Media so'rovlaridir.

Bugungi darsimizda CSS da aynan Media Queries ya'ni media so'rovlaridan foydalanishni o'rganamiz.

👉 Videoga o'tish

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🗂 Nima uchun Frontend dasturchi grafik tahrirlash dasturlarida ishlash ko'nikmalariga ega bo'lish kerak❓

Frontend dasturchining asosiy vazifasi interfeysning oldingi qismini ishlab chiqishdir. Ya'ni, bunday mutaxassis dizaynerlar tomonidan ishlab chiqilgan narsalarni "jonlantiradi". Soddaroq qilib aytganda Frontend dasturchi rasm ko‘rinishidagi sayt dizaynini kodga o‘tkazadi. U interfeysning ishlashi va saqlanishi uchun javob beradi. Shu ish mobaynida grafik tahrirlash dasturlari bilan ishlash saytning rasm ko‘rinishidan kerakli elementlarini shlatish uchun ajratib olish uchun zarur. Shuning uchun bugungi kunda Frontend dasturchilar Figma, Adobe Photoshop va Sketch kabi grafik tahrirlash dasturlarida ishlash ko‘nikmasiga ega bo‘lishi lozim.

Buni inobatga olgan holda navbatdagi darslarimiz grafik tahrirlash dasturi hisoblanadigan FIGMA da ishlash ko'nikmalariga ega bo'lish haqida bo'lishini e'lon qilamiz. Bizni kuzatishda davom eting !!!

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 WORKING WITH FIGMA | Figma bilan ishlash

Navbatdagi darsimizda siz Frontend dasturchilari uchun bilim va ko'nikmalar talab etiladigan FIGMA grafik tahrirlash dasturida ishlash ko'nikmalariga ega bo'lasiz. Bizni kuzatishda davom eting !!!

👉 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 va CSS darslarini ham yakunlab oldik. Endi shu kungacha HTML va CSS darslari yordamida egallagan bilimlarimiz orqali web saytlarning web dizaynerlar tomonidan yaratilgan maketidan foydalangan holda web saytlarni shakllantirishni boshlaymiz.

Bu amaliyot darslarimizda biz quyidagi POLAR ice-cream muzqaymoq do'konining maketidan foydalanishga qaror qildik. Amaliyot darslarimiz davomida ushbu web sayt maketini "jonlantiramiz".

🗂 Veb sahifa maketi

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 HTML, CSS | AMALIYOT (1-QISM)


👉 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

🗂 CSS 3 haqida

CSS - bu stillar bilan ishlash uchun mo’ljallangan kodlar majmuasidir. Hozirgi kunga kelib yangi CSS3 versiyasi ishlab chiqilmoqda, lekin hali ko’p brauzerlar bu stillarni aks ettira olmayapti. Shuning uchun CSS3 yaratuvchilari brauzer o’rtasida kelishmovchiliklarni oldini olish maqsadida brauzer turiga qarab har xil prefikslar ishlab chiqishdi va bu prefikslardan CSS3 to’liq yaratilmaguncha ishlatish tavsiya etilgan, CSS3 to’liq yaratilgandan so’ng bu prefikslar olib tashlanadi.

🌀 Bu prefikslar quydagilar:

🟡 Safari va Chrome brouzerlari uchun:  -webkit-

🔴 Opera brouzeri uchun:  -o-

🟠 Firefox brouzeri uchun: -moz-

🔵 Internet Explorer(IE) brouzeri uchun:
-ms-

Bu prefikslarni ishlatmagan holda misollar keltirdim, agar sizda bu misollar ishlamasa oldiga prefikslarni qo’yib ishlatib ko’ring.

🌀 CSS3 da eng asosiy qo’shilgan stillardan biri bu animastiyalardir, ya’ni stillar almashinish jarayoni birdaniga emas, balki sekin astalik bilan sodir bo’lishidir. Quyida CSS3 versiyasiga yangi qo’shilgan ba’zi stillarni misol tariqasida ko’rsatib o’taman.

⚡️Elementlarni(matn, rasm, fon,..) och(прозрачный) ko’rinishda aks ettirish.

background-color: rgba(10,0,255,0.7);

Bu erda sahifa foniga rang berib, shu rangni 0.7 darajali och tusga keltirilmoqda, tanishing CSS3 ning yangi elementi rgba.

⚡️Elementlarning istalgan burchagiga(qismiga) bir vaqtning o’zida har xil rasmlarni joylashtirish. Bu saytni verstka qilish jarayonini yengillashtiradi.

background:
url(top.gif) top left no-repeat,
url(center.png) top 11px no-repeat,
url(bottom.png) bottom left no-repeat,
url(middle.png) left no-repeat;

⚡️Resize buyrug’i. Bu buyruq orqali foydalanuvchi istalgan elementning o’lchamini o’zgartirish mumkin bo’ladi.

div.resize {
width: 25px;
height: 35px;
resize: both;
}

⚡️CSS3 ning yana bir yangiligi bu – elementlar(shakllar, bloklar) burchagini istalgan radiusda burish mumkinligidir. Ko’p web saytlar forma yaratish jarayonida, formaning burchaklarini burishni verstka paytida biror rasm orqali amalga oshirishadi, bu esa qo’shimcha ish va vaqt yo’qotishga olib keladi, CSS3 da bu muammo bartaraf etilgan va quyidagicha amalga oshirish mumkin bo’ladi.

#forma {
border-bottom-right-radius: 2em;
border-bottom-left-radius: 1em;
border-top-left-radius: 5em;
border-top-right-radius: 3em;
}

⚡️CSS3ning soyalar bilan ishlash qismi. Barcha “p” teglari uchun soyalar hosil qilish.

p {
text-shadow: #003471 /* soya rangi */ 2px /* o’ng tomonga surilishi*/ 5px /* pastga surilish */ 2px /* размытие*/;
}

⚡️Shriftlar. Internetda ko’p foydalanuvchilar verdana shrifti bilan ishlaydi. Nega? Chunki bu shrift barcha kompyuterlarda mavjud va brouzerda chiroyli ko’rinishga ega. Agar stillarda qo’llanilgan shrift foydalanuvchi kompyuterida mavjud bo’lmasa, brouzer matnni istalgan boshqa shriftda ko’rsatishi mumkin. Bu esa shriftlar rang barangligiga olib keladi. CSS3 da shriftlar bilan ishlash uchun yangi komanda @font-face.

@font-face {
font-family: shrift_akm;
src: url('http://blabla.uz/fonts/shrift_akm.ttf');
}
h1 {
font-family: shrift_akm;
}

⚡️Web sahifada kolonkalar. Bunisiga nima deysiz? Element ichidagi matnlarni bir necha ustunli kolonkalarda chiqarishingiz mumkin.

div {
column-width: 15em;
column-gap: 2em; /* yashil rangda */
column-rule: 4px solid red; /* qizil rangda */
padding: 5px; /* qora rangda */
}

<div>
42242 422 42 422 422
4565 56 5454 54565 456
...
</div>

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 HTML, CSS | AMALIYOT (2-QISM)


👉 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, CSS | AMALIYOT (3-QISM)


👉 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

🗂 Amaliyot darslarimiz davomida shakllantirilgan web sahifaning kodlari

@doston_dev

🔈Bootstrap nima?

🔸 Bootstrap - bu tezroq va osonroq web ishlab chiqish uchun bepul bo'lgan framework. Bootstrap tarkibiga HTML va CSS asosidagi dizayn shablonlari, tipografiya, shakllar, tugmalar, jadvallar, navigatsiya, modullar, rasm karusellari va boshqa ko'plab narsalar, shuningdek ixtiyoriy JavaScript plaginlari kiradi.
Bootstrap sizga osonlik bilan moslashuvchan dizaynlarni yaratish imkoniyatini beradi.

Moslashuvchan web dizayn bu nima?

🔸 Moslashuvchan web dizayn - bu kichik telefonlardan tortib katta monitorlarga qadar barcha qurilmalarda yaxshi ko'rinishga mos ravishda o'zlarini avtomatik ravishda sozlaydigan web saytlarni yaratishdir.

Bootstrap 3 & Bootstrap 5.

🔸Bootstrap 5 - bu Bootstrapning eng yangi versiyasi bo'lib; yangi komponentlar, tez uslublar jadvali va yanada moslashuvchanlikni ta'minlaydi. Bootstrap 5 barcha asosiy brauzerlar va platformalarning so'nggi, barqaror versiyalarini qo'llab-quvvatlaydi. Biroq, Internet Explorer 9 va undan past versiyalari qo'llab-quvvatlanmaydi.

🔸Agar sizga Internet Explorer 8-9 qo'llab-quvvatlashi kerak bo'lsa, Bootstrap 3dan foydalaning. Bootstrap 3 - Bootstrapning eng barqaror versiyasidir va u hali ham jamoa tomonidan muhim xato tuzatishlari va hujjatlarni o'zgartirish uchun qo'llab-quvvatlanadi. Biroq, unga yangi xususiyatlar qo'shilmagan.

Nima uchun Bootstrapdan foydalanish kerak?
Bootstrapning afzalliklari:

♦️Foydalanish oson: HTML va CSS haqida oddiy ma'lumotga ega bo'lgan har kim Bootstrapdan foydalanishni boshlashi mumkin.
♦️Moslashuvchan xususiyatlar: Bootstrapning moslashuvchan CSS si telefonlar, planshetlar va monitorlarga moslashadi.
♦️Brauzerlar uchun: Bootstrap 5 barcha zamonaviy brauzerlarga (Chrome, Firefox, Internet Explorer 10+, Edge, Safari va Opera) mos keladi.

Bootstrap 5 ni qayerdan olish mumkin?
🔸O'z veb saytingizda Bootstrap 5 dan foydalanishni boshlashning ikki yo'li mavjud.

1) CDN orqali Bootstrap 5 ni ulang;
2) Bootstrap 5 ni getbootstrap.com saytidan yuklab oling

Bootstrap 5 CDN.
🔸Bootstrap 5ni o'zingiz yuklab olishni xohlamasangiz, uni CDNdan (Content Delivery Network) qo'shishingiz mumkin.

Bootstrap 5 CDNdan foydalanishning bir afzalligi:
🔸Ko'p foydalanuvchilar allaqachon boshqa saytga tashrif buyurish paytida MaxCDNdan Bootstrap 5 ni yuklab olishgan. Natijada, ular sizning saytingizga tashrif buyurganlarida keshdan yuklanadi, bu esa tezroq yuklanishiga imkon yaratadi. Bundan tashqari, ko'pchilik CDN foydalanuvchilari undan faylni so'raganidan so'ng, unga eng yaqin serverdan xizmat ko'rsatilishiga ishonch hosil qiladi, bu holatda esa tezroq yuklanishiga sabab bo'ladi.


Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram