WebDevClub - WIUT

Assalomu alaykum. Hormanglar. Gapni qisqa qilib jQueryda onlayn doʻkon tuzish boʻyicha navbatdagi 2 videoni ommaga chiqaryapmiz. Bu videolarda nisbatan murakkabroq koʻrinishdagi onlayn doʻkonni tuzishda davom etamiz. Quyidagi havolalar boʻyicha koʻrishingiz mumkin.

4-qism
YouTube: https://youtu.be/il5z-e3XfLM
Mover: https://mover.uz/watch/eUoBpGtm/

5-qism
YouTube: https://youtu.be/_gHcIAshBTI Mover: https://mover.uz/watch/2pAP3ftm/

Yaqinlarga ulashish esdan chiqmasina :)

Mayoq
@mayoquz
#jquery #online_shop #html #css #bootstrap

YouTube

jQuery online shop 4

*🌐*🛒 jQuery online shop 2 - 1-talqinni to'liq tuzib chiqishAssalomu alaykum. Bugungi videoda bitta-bittadan mahsulotlarni tanlab, sotib olish imkoniyati bo'lgan onlayn do'konni tuzib chiqamiz. O'rganishingiz mumkin bo'lgan mavzular:
✅ Bootstrap 4 yordamida mini onlayn do'kon ko'rinishini tuzish
✅ elementlarga BEM uslubi asosida nom berish
✅ HTML elementlariga data\- yordamida yangi xususiyatlar (attribute) qo'shish
✅ rasmlarni LoremPicsum.com saytidan to'g'ridan-to'g'ri saytimizga joylash
✅ jQuery yordamida elementlar class larini o'zgartirish
✅ jQuery yordamida sahifadagi elementlarni topish, ularning xususiyat va matnlarini o'zgartirish
✅ sahifadan yuz beradigan hodisa ro'y berganda (masalan, biron elementni bosish - click) biron amalni bajarish
✅ JavaScriptdagi if shart operatorlari bilan ishlash
✅** ma'lumot kiritiladigan maydonlar (input) qiymatini olish

Video yoqqan bo'lsa, layk bosing va kanallarimizga obuna bo'lishni unutmang.

Videoga havolalar
YouTube: https://youtu.be/WiLu3oynbNQ
Mover: https://mover.uz/watch/8YtZkGtm/

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

Mayoq @mayoquz
#jquery #online_shop #html #css #bootstrap

YouTube

jQuery online shop 2

Assalomu alaykum. Bugun deyarli 10 daqiqalik kodni tayyorlash videosini ko'rib chiqishingiz mumkin. Ertaga 21:30 da 1-turdagi onlayn do'kon tuzishning 1-videosi chiqariladi.

Videoga havolalar
YouTube: https://youtu.be/Gai4qaPwcvo
Mover: https://mover.uz/watch/BnyZhGtm/

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
#jquery #online_shop #css

YouTube

jQuery online shop 1

​​*🔥*🎬 freeCodeCamp 007 - Kaskadlanish, tanlovchilar ahamiyati, ranglar bilan ishlash va CSS o’zgaruvchilarAssalomu 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

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

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

https://medium.freecodecamp.org/database-design-full-course-43233664125b
A course about database design. Will be quite handy for DBSD module and for future developer career

freeCodeCamp.org

Database Design Full Course

by Caleb Curry Database Design Full Course Photo by Eugene Lim [https://unsplash.com/photos/LG3mnOs359g?utm\_source=unsplash&utm\_medium=referral&utm\_content=creditCopyText] on Unsplash [https://unsplash.com/search/photos/design?utm\_source=unsplash&utm\_…

​​*🔥*🎬 freeCodeCamp 005 - Ranglar, shriftlar, element o'lchami va chegaralar bilan ishlashAssalomu 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 elementlarAssalomu 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