WebDevClub - WIUT

​​🔥🎬 freeCodeCamp 007 - Kaskadlanish, tanlovchilar ahamiyati, ranglar bilan ishlash va CSS o’zgaruvchilar

Assalomu alaykum. Ushbu videoda navbatdagi 20 ta mashqni birga bajarib ko'ramiz. Videoda quyidagi mavzularni o'rganib chiqishingiz mumkin:
📌 CSS xususiyatlarning meros qolishi
📌 CSSda kaskadlanish qoidalari
📌 CSS tanlovchilarining ahamiyati darajasi
📌 ranglarni RGB va HEX kodlari yordamida tahrirlash
📌 CSS o'zgaruvchilari bilan ishlash

‼️ ESLATMA ‼️
Faqat videonigina ko'rib, umuman mashq qilmaslik veb dasturlashni o'rganishdagi samaradorlikni ancha-muncha pasaytirib yuboradi. Shuning uchun biron mashqning ta'rifi va o'tiladigan yangi mavzu haqida ma'lumot berilganda videoni to'xtatib, mashqni mustaqil bajarishga harakat qilib ko'ring.

YouTube: https://youtu.be/xRaoYHX1DL0
Mover: https://mover.uz/watch/hO90tktm/

Matnlar tarjimasida yordamlashmoqchi bo'lganlar uchun: https://goo.gl/forms/f8gZXB3QppQB5ssb2

Video yoqqan bo'lsa, layk bosing va kanalga obuna bo'ling. Yaqinlaringiz bilan o'rtoqlashish ham esdan chiqmasin-a 😉

Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq @mayoquz
#freeCodeCamp #css

​​🍏🎬 FrontLoops #10-3 - Apple Watch sayti. Imkoniyatlar.

Bu videoda Apple Watch lending sahifasining imkoniyatlar qismini tuzishni ko'rib chiqamiz. Videoda quyidagilar bo'yicha ma'lumot olishingiz mumkin:

📌 psevdoelementlar yordamida turli xil shakllar yasash
📌 elementning hover holatida uning ko'rinishini o'zgartirish
📌 bir qatorda yonma-yon joylashgan 3 element orasini ajratishning CSSdagi 3 uslubi
📌 bir necha elementlarda takrorlanuvchi bezaklarni bir tanlovchi (selector)ga jamlash

VIDEOGA HAVOLALAR
Mover: https://mover.uz/watch/hC4rcutm/
YouTube: https://youtu.be/a7KT4re4JSg

Video yoqqan bo'lsa, kanalga obuna bo'ling va do'stlaringiz bilan ulashing :) Video bo'yicha savol va takliflarni video izohlarida qoldirishingiz mumkin.

10-mashq kodi: https://codepen.io/Muhammadjavohir/pen/rroJZJ
Hamma mashqlar kodlari: https://codepen.io/collection/AEWJkO/

Oldingi video - "FrontLoops #10-2. Apple Watch sayti. Promo":
Mover: https://mover.uz/watch/lTWIqZtm/
YouTube: https://youtu.be/CIgx5t1UAqE

Kanallarimizga obuna bo'ling.
Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq
#frontLoops @mayoquz

​​🔥🎬 freeCodeCamp 005 - Ranglar, shriftlar, element o'lchami va chegaralar bilan ishlash

Assalomu alaykum. Ushbu videoda navbatdagi 15 ta mashqni birga bajarib ko'ramiz. Videoda quyidagi mavzularni o'rganib chiqishingiz mumkin:
📌 yozuv va fon rangini o'zgartirish - color va background-color
📌 CSS tanlovchilari (selector) bilan ishlash - element, sinf va ID tanlovchilari
📌 shrift o'lchami va turini o'zgartirish - font-size, font-family
📌 Google Fonts shriftlar kutubxonasidan shriftni ulab ishlatish
📌 elementlar enini o'zgartirish - width
📌 elementlar chegaralarini o'zgartirish - border-width, border-style, border-color, border-radius

‼️ ESLATMA ‼️
Faqat videonigina ko'rib, umuman mashq qilmaslik veb dasturlashni o'rganishdagi samaradorlikni ancha-muncha pasaytirib yuboradi. Shuning uchun biron mashqning ta'rifi va o'tiladigan yangi mavzu haqida ma'lumot berilganda videoni to'xtatib, mashqni mustaqil bajarishga harakat qilib ko'ring.

YouTube: https://youtu.be/0IL-pf5jE5Q
Mover: https://mover.uz/watch/QL8i4Ltm

Matnlar tarjimasida yordamlashmoqchi bo'lganlar uchun: https://goo.gl/forms/f8gZXB3QppQB5ssb2

Video yoqqan bo'lsa, layk bosing va kanalga obuna bo'ling. Yaqinlaringiz bilan o'rtoqlashish ham esdan chiqmasin-a 😉

Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq @mayoquz
#freeCodeCamp #css

​​🔥🎬 freeCodeCamp 004 - Shakl va unga bog'liq elementlar

Assalomu alaykum. Ushbu videoda navbatdagi 11 ta mashqni birga bajarib ko'ramiz. Videoda quyidagi mavzularni o'rganib chiqishingiz mumkin:
📌 input tegi yordamida ma'lumot kiritishga mo'ljallangan maydonlar yaratish
📌 input ga matn yozilguniga qadar vaqtincha ko'rinib turuvchi matn joylash - placeholder atributi
📌 ma'lumot kiritiluvchi maydonlarni to'ldirishni majburiy yoki ixtiyoriy qilish - required atributi
📌 bir necha variantlardan faqat bir donasini va cheklanmagan sondagisini tanlash imkonini beruvchi input turlari bilan ishlash - radio va checkbox
📌 radio va checkbox maydonlarini avvaldan tanlangan holga keltirish
📌 bir nechta elementlarni div elementi yordamida guruhlash
📌 sahifadagi asosiy tuzilma teglari bilan ishlash - DOCTYPE, html, head, title, body

‼️ ESLATMA ‼️
Faqat videonigina ko'rib, umuman mashq qilmaslik veb dasturlashni o'rganishdagi samaradorlikni ancha-muncha pasaytirib yuboradi. Shuning uchun biron mashqning ta'rifi va o'tiladigan yangi mavzu haqida ma'lumot berilganda videoni to'xtatib, mashqni mustaqil bajarishga harakat qilib ko'ring.

YouTube: https://youtu.be/CgW4ClJEbX4
Mover: https://mover.uz/watch/FmZWhEtm/

Matnlar tarjimasida yordamlashmoqchi bo'lganlar uchun: https://goo.gl/forms/f8gZXB3QppQB5ssb2

Video yoqqan bo'lsa, layk bosing va kanalga obuna bo'ling. Yaqinlaringiz bilan o'rtoqlashish ham esdan chiqmasin-a 😉

Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq @mayoquz
#freeCodeCamp #html

​​🎬 FrontLoops #10-2 - Apple Watch sayti. Promo 🍏.

Bu videoda Apple Watch lending sahifasining promo qismini tuzishni ko'rib chiqamiz. Videoda quyidagilar bo'yicha ma'lumot olishingiz mumkin:

📌 HSL rang formati
📌 BEM uslubi bo'yicha CSS kod yozish
📌 Sublime Text 3 matn muharririda samaradorlikni oshirish, vaqtni tejash (SnippetMaker va AdvancedNewFile paketlari bilan ishlash)
📌 CSS kodni bir necha fayllarga bo'lib yozish
📌 absolute joylashtirish yordamida elementlarni surish
📌 Chrome DevTools yordamida saytni turli ekranlardagi ko'rinishini tekshirish

VIDEOGA HAVOLALAR
Mover: https://mover.uz/watch/lTWIqZtm/
YouTube: https://youtu.be/CIgx5t1UAqE

Videoda eslab o'tilgan onlayn manbalar:
https://www.bradhussey.ca/ - kanadalik veb dasturlovchi va onlayn instruktor Brad Husseyning shaxsiy blogi
https://codecollege.ca/ - Brad Hussey jamoasining videokurslari joylanadigan sayt
https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/ - Sora Suvaydan (Sarah Soueidan)ning HSL rang formati haqidagi maqolasi

Video yoqqan bo'lsa, kanalga obuna bo'ling va do'stlaringiz bilan ulashing :) Video bo'yicha savol va takliflarni video izohlarida qoldirishingiz mumkin.

10-mashq kodi: https://codepen.io/Muhammadjavohir/pen/rroJZJ
Hamma mashqlar kodlari: https://codepen.io/collection/AEWJkO/

Oldingi video - "FrontLoops #10-1. Apple Watch sayti. Menyu":
Mover: https://mover.uz/watch/x8hQIitm/
YouTube: https://youtu.be/kv9MSjgtlQI

Kanallarimizga obuna bo'ling.
Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq
#frontLoops @mayoquz

🔥🎬 freeCodeCamp 003 - HTMLda havola, rasm va ro'yxatlar bilan ishlash

Assalomu alaykum. Bugungi videoda freeCodeCampning navbatdagi 9 ta mashqini birga bajaramiz. Videoda sahifaga havola ⛓, rasm 🖼 va ro'yxat 📋 joylashni o'rganib olishingiz mumkin. Keyingi videoda FCCdagi "Sodda HTML" bo'limini yakunlaymiz. Undan keyingi mashqlar CSS bo'yicha bo'ladi.

‼️ ESLATMA ‼️
Faqat videonigina ko'rib, umuman mashq qilmaslik veb dasturlashni o'rganishdagi samaradorlikni ancha-muncha pasaytirib yuboradi. Shuning uchun biron mashqning ta'rifi va o'tiladigan yangi mavzu haqida ma'lumot berilganda videoni to'xtatib, mashqni mustaqil bajarishga harakat qilib ko'ring.

YouTube: https://youtu.be/LB_dvbawdE0
Mover: https://mover.uz/watch/n8FfkJtm/

Oldingi videoda aytganimizdek mashqlar matnlarini o'zbek tiliga tarjima qilishni boshladik. Imkon boricha tarjima qilishda davom etamiz. Mashqlarning o'zbek tilidagi matnlari mana bu yerda:
http://bit.ly/FCCuz_matnlar_Mayoq
Havotir olmang, bu havola hech qanaqangi spam yoki boshqa noma'qul joylarga olib bormaydi. Havolani ulashish oson bo'lishi uchungina qisqartirildi.

Matnlarni tarjima qilishda ko'maklashib yubormoqchi bo'lganlar quyidagi formada mashq havolasi va tarjima qilingan matnni qoldirishlari mumkin.
Matnlar tarjimasini qoldirish uchun forma: https://goo.gl/forms/f8gZXB3QppQB5ssb2

Video yoqqan bo'lsa, layk bosing va kanalga obuna bo'ling. Yaqinlaringiz bilan o'rtoqlashish ham esdan chiqmasin-a 😉

Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq
#freeCodeCamp #html

​​🔥🎬 freeCodeCamp 002 - HTMLda sarlavha, xatboshi va izohlar

Assalomu alaykum. Bugungi videoda freeCodeCamp.org saytidagi mashqlar sahifasi interfeysi bilan tanishamiz. Video davomida HTMLdagi sodda matn elementlari sarlavha (heading - h1, h2) va xatboshilarni (paragraph - p) o'rganib chiqamiz. Undan so'ng HTMLda izohlardan (comment) foydalanish yo'lini o'rganamiz.

YouTube: https://youtu.be/Wht99KqvaLs
Mover: https://mover.uz/watch/fJ6qUztm/

Video yoqqan bo'lsa, layk bosing va kanalga obuna bo'ling.

Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq
#freeCodeCamp

🎬 FrontLoops #10-1 - Apple Watch sayti. Menyu 🍏.

Bu videoda Apple Watch lending sahifasining menyu qismini tuzishni ko'rib chiqamiz. Videoda HTML va CSS yordamida sayt tuzishning mobile-first yondashuvi bilan tanishishingiz mumkin. Bundan tashqari videoda media so’rovlar yordamida saytni turli xil ekranlarga moslashuvchan ko’rinishga keltiramiz.

Mover: https://mover.uz/watch/x8hQIitm/
YouTube: https://youtu.be/kv9MSjgtlQI

Video yoqqan bo'lsa, kanalga obuna bo'ling va do'stlaringiz bilan ulashing :) Video bo'yicha savol va takliflarni video izohlarida qoldirishingiz mumkin.

10-mashq kodi: https://codepen.io/Muhammadjavohir/pen/rroJZJ
Hamma mashqlar kodlari: https://codepen.io/collection/AEWJkO/

Oldingi video - "#9 - Elektron karmon":
Mover: https://mover.uz/watch/LrAZUwem/
YouTube: https://youtu.be/yJhkjGzbuog

Kanallarimizga obuna bo'ling.
Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq
#frontLoops

📖 "Qisqa HTML" 4: SVGni sahifaga qanday tarzda joylash mumkin?

Bu maqolada HTML sahifalarga SVGni joylashning 4 xil usuli va ularning imkoniyatlari bilan tanishib chiqishingiz mumkin. Maqola oxirida shu sohaning ekspertlaridan bo'lgan Sora Suvaydanning blogi va HTML Academy muallifligidagi SVG haqidagi 2 ta o'quv kursiga havolalar bor. Foydali bo'ladi, degan umiddamiz.

Maqolaga havola: https://medium.com/@Muhammadjavohir/qisqa-html-4-qanday-qilib-sahifaga-svgni-joylash-mumkin-90b9d50c706e

Mayoqda nafaqat maqolalar, balki videodarslar ham qo'yib borilmoqda. HTML/CSSga qiziquvchilar bo'lsa, amaliy yondashuvdagi videolarimizni @mayoquz kanalimizga o'tib tomosha qilishlari mumkin.

#mayoq #html_shorts #tarjima

📖 "Qisqa HTML" 3: footer ichidagi section.

Bu maqolada HTML5 standartida yangi tatbiq qilingan footer va section elementlari haqida ma'lumot olishingiz mumkin. Maqolada berilgan ma'lumotlar:
- section ning vazifasi nima?
- footer ichiga nimalar joylasa bo'ladi?
- section ni ishlatishdagi qoidalar
- foydali manbalarga havolalar

Maqolaga havola: https://medium.com/@Muhammadjavohir/qisqa-html-3-footer-ichidagi-section-86b32bc887b3

Mayoqda nafaqat maqolalar, balki videodarslar ham qo'yib borilmoqda. HTML/CSSga qiziquvchilar bo'lsa, amaliy yondashuvdagi videolarimizni @mayoquz kanalimizga o'tib tomosha qilishlari mumkin.

#mayoq #html_shorts #tarjima

P.S. Maqolaga baho berib yuborasizmi? Huddi maktabdagidek 5️⃣-a'lo, 1️⃣-juda yomon 😄 Postni @mayoquz dan boshqa kanalda ko'rayotgan bo'lsangiz, https://t.me/mayoquz/37 👈 shu yerga yoki @mayoquz ga o'tib, baho qo'ysangiz bo'ladi.

​🎬 Kutib oling, yangi video!
FrontLoops #9 - Elektron karmon 💳.

Bu video shu kungacha olingan eng yaxshi videomiz, deb ayta olamiz:
- o'ziga xos chiroyli va real loyihada ishlatsa bo'ladigan dizayn 😎;
- shu kungacha chiqarilgan videolarimiz orasida eng uzoq davomiylikdagi video - naqd 1:29:38 soat 😳;
- nafaqat katta ekranda, balki planshet va mobil telefonlar ekraniga moslashuvchi dizayn 🖥📱.

Videoga qiziqtira oldikmi? Unda boshqa gap bilan vaqtingizni olmaylik. Video linklari "fstudiyu"!
Mover: https://mover.uz/watch/LrAZUwem/
YouTube: https://youtu.be/yJhkjGzbuog

Qiziqtira olmadikmi? Unda bu videoni ko'rib CSS bo'yicha o'rganishingiz mumkin bo'lgan narsalarni sanab chiqamiz:
- element fonidagi rasmni joylashtirish background-position;
- bo'yi va eni cheklangan elementlarda tashqariga toshib chiquvchi elementlar bilan ishlash - overflow;
- psevdo elementlari ota elementga nisbatan vertikal o'q bo'yicha o'rtaga keltirish;
- media so'rovlar (media query - @media) yordamida element stillarini ekran eniga qarab turli qiymatlarga o'zgartirish;
- katta ekranda yonma-yon turgan elementlarni kichik ekranda ustma-ust joylash;
- elementni ekranning pastki qismiga qotirib, "mixlab" qo'yish.
Frontend dasturlash sohasiga yangi bo'lsangiz, bundanda ko'proq narsalarni o'rganib olishingiz mumkin.

Mover: https://mover.uz/watch/LrAZUwem/
YouTube: https://youtu.be/yJhkjGzbuog

Video yoqqan bo'lsa, kanalga obuna bo'ling va do'stlaringiz bilan ulashing :) Video bo'yicha savol va takliflarni video izohlarida qoldirishingiz mumkin.

9-mashq kodi: https://codepen.io/Muhammadjavohir/pen/VBWOra
Hamma mashqlar kodlari: https://codepen.io/collection/AEWJkO/

Oldingi video - "#8 - Turizm sahifasi":
Mover: https://mover.uz/watch/DxIvblem/
YouTube: https://youtu.be/BK7OXSRNYU4

Kanallarimizga obuna bo'ling.
Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq
#frontLoops

​📖 "Qisqa HTML" 2: CSSdagi qisqartma xususiyatlar.

Bu maqolada "Nega element foniga rasm qoʻyishda qisqa background oʻrniga background-image ishlatish kerak?" savoliga javob olishingiz mumkin. Maqolada CSSdagi background, font va boshqa shu kabi qisqartirilgan CSS xususiyatlaridan foydalanishdagi qoidalar haqida to'xtalib o'tilgan. Bundan tashqari maqola oxirida HTML Academyning bepul "CSSda meros olish va kaskadlanish" mavzusidagi darslariga havola berilgan. Vaqt ajratib o'rganishga arzirli mavzu, ayniqsa, frontendga yangi bo'lganlar uchun.

Maqolaga havola: https://medium.com/@Muhammadjavohir/qisqa-html-2-cssdagi-qisqartma-xususiyatlar-f2abc400a302

Mayoqda nafaqat maqolalar, balki videodarslar ham qo'yib borilmoqda. HTML/CSSga qiziquvchilar bo'lsa, amaliy yondashuvdagi videolarimizni quyidagi havolalar orqali o'tib tomosha qilishlari mumkin.

Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

#mayoq #html_shorts #tarjima

​FrontLoops #8 - Turizm sahifasi.

Video yoqqan bo'lsa, kanalga obuna bo'ling va do'stlaringiz bilan ulashing :) Video bo'yicha savol va takliflarni video izohlarida qoldirishingiz mumkin.

Keyingi videoda shu kungacha FrontLoops dizaynlaridagi o'zimga eng yoqqan dizayn "Elektron karmon" dizaynini kodga o'tkazamiz. Bexabar qolmaslik uchun kanallarimizga obuna bo'ling 😊

Mover: https://mover.uz/watch/DxIvblem/
YouTube: https://youtu.be/BK7OXSRNYU4

8-mashq kodi: https://codepen.io/Muhammadjavohir/pen/RBpOPw
Hamma mashqlar kodlari: https://codepen.io/collection/AEWJkO/

Oldingi video - "#7 - Matnli post":
Mover: https://mover.uz/watch/IuHEZlem/
YouTube: https://youtu.be/Enx0O5Cfdpw

Kanallarimizga obuna bo'ling.
Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw

Mayoq
#frontLoops

​Assalomu alaykum. Bugungi videoga tayyormisizlar? Bugun "Turizm sahifasi" dizaynini kodga o'tkazamiz, o'tkazib yubormang-a :)

Meni xursand qilgan bir ma'lumot bilan o'rtoqlashmoqchiman. Hali 4 soatcha oldin Twitterga kirib, yangiliklarni ochsam, "FrontLoops #5 chiqarildi" deyilgan tvitga FrontLoops.io saytining muallifi Dmitriy Belyayev javob qaytaripti "Haqiqiy ilhom! Bo'shashtirma/To'xtatib qo'yma" 😎 Juda xursand bo'lib ketdim, mashqlar muallifining o'zi "davom ettiraver" deb tursaya 😊 (Rasmi pastda)

Tvitga havola: https://twitter.com/muhammadjvhr/status/1018857803744673792

Sizlar ham Mayoqni kuzatishni to'xtatib qo'ymang 😊

Telegram: https://t.me/mayoquz
Mover: https://mover.uz/channel/mayoq/
YouTube: https://www.youtube.com/channel/UCVkIqOM_hAlOPnpzWoijFJw