Assalomu alaykum. Kechagi video Sublime Textda ba'zi amallar bilan samaradorlikni oshirishni ko'rdik. E'tibor bergan bo'lsangiz, ko'p qismlarda qisqa yozuv bilan kattaroq kod yozayotgan edik. Misol uchun .feature kodimiz <div class="feature"></div><!-- /.feature--> ko'rinishiga kelayotgan edi. Aynan shunday kod yozish tartibi haqida savollaringiz bormidi?

Unday bo'lsa, tajribali dasturlovchi Alisher aka Mahmudovning yangi videolarini ko'rib chiqishni tavsiya qila olamiz. Video o'zbek tilida. Unda Sublime Textdagi Emmet paketi bilan ishlash ko'rsatilgan. Videodan o'rgangan narsalaringiz kelajakda ko'p vaqt tejashingizga xizmat qiladi, degan umiddamiz.

Videoga havola: https://www.youtube.com/watch?v=HdkVCPIqFAY

Alisher akaning YouTubedagi kanallarida bundan boshqa o'zbek tilidagi videodarslar ham bor. Ular yordamida HTML va CSS bilash ishlash va hatto bir saytni boshidan oxirigacha tuzilishini o'rganib chiqishingiz mumkin.

Alisher akaning YouTube kanallari: https://www.youtube.com/channel/UC8st6HmY7EpgR7BaQnMvutQ

​​Assalomu alaykum. Shu kunlarda o'quv markazidagi guruhimiz bilan Bootstrap kutubxonasini o'rganib chiqyapmiz. O'quvchilarga biroz qulaylik bo'lsin, deb, Bootstrapdagi komponentlar haqidagi kichik qo'llanma tuzmoqchi edik. Hali oxiriga yetmadiku, lekin siz ham bir ko'rib, baho bering, demoqchi edik. Nima deysiz, shu ko'rinishdagi qo'llanma foydali bo'larmikin?

Bootstrap qo'llanmasi haqidagi fikrlaringizni quyida izohlarda qoldirishingiz mumkin. Sizlarning fikringiz yordamida qo'llanmani yanada takomillashtirishimiz mumkin bo'ladi. Nima uchun foydali yoki foydasiz bo'lishi haqidagi fikrlaringizni ham kutib qolamiz.

Assalomu alaykum, yaxshilar. Bugun, Xudo xohlasa, freeCodeCamp turkumidagi 2 ta yangi videoni chiqaramiz. Birinchi videoda Sodda HTML qismidagi mashqlarni tugallasak, 2-videoda bir nechta sodda CSS xususiyatlari bilan tanishamiz. Videolarda aynan nimalar ko'rsatilgani videolarga oid postlarda sanab o'tiladi. Videolar foydali bo'ladi, degan umiddamiz. Ha, aytgancha, veb dasturlash sohasini endi o'rganishni boshlayotgan tanishlaringiz bo'lsa, kanalimizni ham bir eslatib o'ting-a 😊

Esimdan chiqay depti: freeCodeCampdagi mashqlar matni tarjimasi bilan ko'maklashmoqchi bo'lganlar bo'lsa, mana bu formada tarjimalarni qoldirishlari mumkin:
https://goo.gl/forms/f8gZXB3QppQB5ssb2

#freeCodeCamp #anons

​​🔥🎬 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

​​🔥🎬 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

Assalomu alaykum. Kanalimiz logotipi Googledan qidirib, oʻzgartirishsiz joylashtirilgan bir rasm edi. Shu bugun Dilshod ismli obunachimiz (@Aristocrat55) logotip uchun oʻzlari tuzgan rasmni taklif qildilar. Hozirgisidan yaxshiroq koʻrinishda, deb oʻylayman. Qalay, yaxshi ekanmi?

P.S. Boshqalar ham kanal faoliyatiga oʻz hissalarini qoʻshishlari mumkin. Buning bir yoʻli - freeCodeCamp saytidagi mashqlar matnini oʻzbek tiliga tarjima qilish. Tarjima matnlarini mana bu havola orqali qoldirishingiz mumkin:
https://goo.gl/forms/f8gZXB3QppQB5ssb2

Oldindan katta rahmat 😃

Assalomu alaykum. Bugun soat 21:30 da #frontLoops turkumidagi navbatdagi video chiqariladi. Xudo xohlasa, sizlarga yoqadi, degan umiddamiz ☺️

​​🍏🎬 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

Assalomu alaykum. Salomatmisizlar? Birmuncha vaqt oldin Bootstrap 4 kutubxonasidagi komponentlar haqida kichik qo'llanmani chiqargan edik. O'sha qo'llanmaga oz-moz yangi ma'lumot kiritildi. Hozirgi holatida Bootstrapdagi 15 ta komponent haqida ma'lumot olishingiz mumkin. Bir ko'rib baho bering ☺️

Ha, aytgancha, kechagi video foydali bo'ldimi? Sababini bilmadimu, Telegramdagi postni 500 dan ortiq foydalanuvchi ko'rgan bo'lsa-da, negadir videoning ko'rishlar soni atigi 16 ta bo'libdi. Kamchiliklarimiz bo'lsa, iltimos, @Muhammadjavohirbek profiliga yozib yuboring 😊 Biron takliflaringiz bo'lsa ham tortinmay yozavering.

@mayoquz #bootstrap

Bootstrap komponentlari haqida kichik qo'llanma.

@mayoquz

​​Assalomu alaykum. Hormanglar, charchash yo'qmi?

Ozgina ish jarayonim haqida yozmoqchi edim. O'quv markazidagi o'quvchilarimiz bilan JavaScript tiliga oid bosqichga keldik. JavaScriptni o'rganish davomida kirim-chiqim ilovasini tuzmoqchimiz. Bu ilovani o'quvchilarni zo'riqtirmaslik uchun ham nisbatan sodda, ham portfolioga qo'shsa bo'ladigan darajada chiroyli ko'rinishda bo'lishini rejalagan edik. Shunga mana hozir internetdagi turli dizaynlarni ko'rib chiqib, yoqqan qismlarini saqlab oldik. Shularga qarab Balsamiq Cloud veb dasturida prototip tuzamiz va prototip asosida Adobe XD dasturida ilovaning tayyor dizayni chizib chiqiladi. Quyidagi rasmda qanday dizayn va aynan nima uchun qiziqtirganini (sariq kartochkada yozilgan) ko'rishingiz mumkin.

Ozgina qo'shimcha ma'lumot: odatda biron yangi loyihani tuzishni boshlaganda shu yo'lni tutgan yaxshi, ya'ni low-fidelity prototype - (past sifatli prototip) nisbatan kam detallar berilgan ko'rinishi tuziladi. Bu dizaynda nima element kerak, ular qayerda joylashishi ko'rsatiladi. Dizaynning skeleti qanday bo'lishi aniq bo'lgandan keyingina unga "mehr berish" - ranglar, shriftlarni o'zgartirish, chiroyli ko'rinishga keltirish bosqichiga o'tish mumkin bo'ladi. Agar loyihaning boshidan yuqori sifatli prototip tuzilsa, uni tahrirlash ko'p vaqt va kuch talab qiladi.

Izohlar qismida fikr va savollaringizni kutib qolamiz. Ma'lumot foydali bo'ldimi?

#jarayon @mayoquz

​​🔥🎬 freeCodeCamp 006 - padding, margin, atribut tanlovchisi va CSSdagi o'lchov birliklar.

Assalomu alaykum. Ushbu videoda navbatdagi 9 ta mashqni birga bajarib ko'ramiz. Videoda quyidagi mavzularni o'rganib chiqishingiz mumkin:
📌 elementlar ichki va tashqi hoshiyasini (padding va margin) o'zgartirish
📌 turli tomondan turli qiymatdagi padding va margin tatbiq qilish
📌 qisqa padding va margin xususiyatlari yordamida turli tomondagi hoshiyalarni bir buyruqda o'zgartirish
📌 CSSdagi atribut tanlovchisi (attribute selector) bilan ishlash
📌 CSSdagi o'lchov birliklari bilan tanishish

‼️ 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/wA2Jx1dZy7I
Mover: https://mover.uz/watch/g9TyUVtm

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