#Foydali_manba

Web Skills - bu veb dasturchi sifatida o'rganilishi mumkin bo'lgan foydali ko'nikmalar to'plami. Bu sayt veb dasturlarni ishlab chiqishni endigina boshlagan dasturchilar va shuningdek, ko'p yillar davomida bu sohada bo'lgan va yangi narsalarni o'rganmoqchi bo'lganlar uchun foydalidir.


Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 CSS darslari | BORDER, BORDER-RADIUS, OVERFLOW (5-dars)

🔵 CSS Border Properties - CSS chegara xususiyatlari

CSS ning border xususiyatlari sizga elementning chegaralarini belgilash imkonini beradi. Misol uchun elementning chegarasini qattiq chiziq, juft chiziq, nuqta chiziq va boshqalar, yoki u rasm orqali tasvirlash mumkin . Bundan tashqari border xususiyatlari chegara uslubini (border-style), rangini (border-color) va qalinligini (border-width) belgilaydigan turli xil xususiyatlarni qanday sozlashni sizga tasvirlab beriladi.

🔵 Handling Overflowing Content - Ortiqcha tarkib bilan ishlash

CSS ning overflow xususiyati sizga tarkibni qisqarish yoki aylantirish satrlarini ko'rsatish yoki blok darajasidagi elementning ortiqcha tarkibini namoyish qilish yoki bermaslikni belgilashga imkon beradi.

Bugungi darsimizda aynan border, border-radius, overflow xususiyatlari haqida batafsil gaplashamiz.

👉 Videoga o'tish

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 Qiziqarli HTML teglari:

🟢 <CODE> tegi dastur kodi bo'lgan bir yoki bir nechta matnli satrlarni ko'rsatishga mo'ljallangan.

🔴 <BLOCKQUOTE> tegi hujjat ichidagi uzun tirnoqlarni ajratib ko'rsatish uchun mo'ljallangan. Matn chap va o'ng to'ldirilgan tekislangan blok shaklida ko'rsatiladi.

🟣 <DEL> tegi hujjatning yangi versiyasida olib tashlangan matnni ajratib ko'rsatish uchun ishlatiladi. Ushbu formatlash hujjat matniga qanday o'zgartirishlar kiritilganligini kuzatib borish imkonini beradi.

🟠 <XMP> tegi konteyner tarkibini "xuddi shunday" va belgilangan kenglikdagi shriftda aks ettiradi. <XMP> tegi yopilmaguncha, undagi barcha teglar oddiy matn sifatida ko'rsatiladi.

🟡 <ABBR> tegi belgilar qisqartmalar ekanligini bildiradi. Sarlavha parametri qisqartmaning dekodlanishini beradi, bu esa qisqartirishni tushunish imkonini beradi.

🔵 <ADRESS> tegi muallif haqidagi ma'lumotlarni saqlashga mo'ljallangan. Ma'lumot yig'ish uchun qidiruv tizimlari ushbu teg tarkibini tahlil qilishi rejalashtirilgan.

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 CSS darslari | DISPLAY PROPERTIES (INLINE, BLOCK, INLINE-BLOCK, FLEX, NONE) (6-dars)

CSS da displey xususiyati elementni blok yoki inline element sifatida ko'rib chiqilishini yoki uning bolalari hisoblanuvchi elementlar uchun ishlatilgan tartibini belgilash imkonini beradi. Rasmiy ravishda CSS da displey xususiyati elementning ichki va tashqi ko'rinishini belgilaydi. Tashqi tur elementning oqim sxemasida ishtirokini belgilasa, ichki turi esa bola elementlari tartibini belgilaydi.

Navbatdagi darsimizda CSS dagi display 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

#Foydali_manba
#Doston_Dev

HTML va CSSni o'rganib, lekin yaxshi natijalarga erisha olmayotgan yoki mukammal bilishiga ishonchi komil bo'lmayotganlar uchun ajoyib sayt, htmlreference.io va cssreference.io.

Bu ikkita saytda HTMLdagi har bitta tag va CSSdagi har bitta property uchun ularning ta'riflari va amaliyotlar keltirilgan. Biron-bir qoida esingizdan chiqib qolsa, juda qo'l keladi.

Ijtimoiy tarmoqlardagi sahifalarimizga obuna bo'ling:

👉 Telegram | YouTube | Instagram

🌀 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