HTML - 2023

Ushbu video darslik HTML dan bilishingiz kerak bo'lgan barcha mavzularni o'z ichiga olgan. Video darslik tayorlashda MDN, W3School va bazi YouTube sahifalaridan foydalanilgan.

Quyidagi kontentlar shariy hukumda egalik huquqi bo'lgani uchun, bu materiallardan istalgan ko'rinishda foydalanish uchun Webbrain Academy hamda Sardorbek Muhtorov dan ruhsat olish va telegram kanallarini belgilab ketish shart bo'ladi.

Darslikni foydali deb bilsangiz yaqinlaringizga ulashing. To'liq kontent video ko'rinishida YouTube sahifamizga joylangan. Obuna bo'lishingiz ham biz uchun keyingi ishlarda katta turtki bo'ladi.

Videoni to'liq sotib olish uchun: https://teletype.in/@webbrain_ceo/video_darsliklar

Hurmat bilan Sardorbek Muhtorov.

1 - dars | Bu qanday darslik? | YouTube Link — Darslik haqida umumiy malumotlar
— Darslik kimlar uchun
— Darslik davomida nimalar o'rganasiz.

2 - dars | Dasturlashga kirish | Dasturchining yo'l xaritasi | YouTube Link — Ushbu darslik haqida umumiy malumot!
— Ustoz kim? Qanday tajribasi bor?
— Dasturlash nima?
— Dasturchi kim?
— Frontend, backend, mobile, designerlar kimlar va ularning vazifalari!
— Dasturlashdagi qiyinchiliklar...
— Jarimalar haqida
— Dars qilishdagi xatolar
— Diplom kerakmi?
— Soft skillar / sms yozish qoidalari.
— Foydali linklar

3 - dars | HTML nima | Nazariy | YouTube Link — HTML nima?
— HTML, CSS, JS va ReactJS nima va ularning ishlatilish o'rni.
— HTML o'rganib ishga kirsa bo'ladimi?

4 - dars | VS Code o'rnatish | YouTube Link — VS code nima?
— File yaratish
— Eski versiyadagi computerlar uchun VS Code
— VS Code sidebar vazifalari.
— HTML uchun kerakli extensions
— Code formatter settings
— Shortcuts

5 - dars | Birinchi dasturni yozish | Tags | YouTube Link
— yozilgan codelarni browserda ko'rish
— VS codeda auto save va uning ishlatilish o'rinlari
— Live server
— Tag nima?
— root tagi.
— configuration tag
— browser tag
— Heading tagi
— Paragraph tagi

6 - dars | Formatting tags | YouTube Link — Shoirlar uchun tag
— <b> va <strong>
— <i> va <em>
— <marker>
— <del va <ins>
— <sub> va <sup>
— <q> va <blockquote>

7 - dars | File path | YouTube Link — Real project qanaqa ko'rinishda bo'ladi
— file va papkalar bilan ishlash
— terminal bilan ishlash
— windows va mac dagi farqlar.

8 - dars | Link | Attribute | YouTube Link — Link nima?
— Attribute nima?
— href attribute va ularning qiymatlari
— target attribute va vazifalari
— malumot tortib olish / download
— tooltip

9 - dars | style attribute | style tag | YouTube Link — style nima?
— ingliz tilini dasturlashdagi o'rni.
— background-color va color
— border va px tushunchalari
— padding
— border-collapse
— visibility
— display: flex / none
— opacity
— style tag

10 - dars | CSS Selectors in HTML | YouTube Link — ID selector
— Class selector
— id vs class

11 - dars | Image | YouTube Link — img attributes - src / alt
— img width and height
— image link
— image map / usemap
— area / shape / coord
— responsive images
— picture / source / media query

12 - dars | Table | YouTube Link — Table nima?
— Table qanchalik muhim? real projectdagi ko'rinishi.
— table border / border-collapse: collapse
— table, tr, td, th.
— Table sizing.
— colspan / rowspan
— Column grouping

13 - dars | Lists | YouTube Link — list nima?
— ordered list
— unordered list
— description list
— nested list
— ordered list style
— unordered list style
— list-style-type / css orqali type o'zgartirish

14 - dars | Block | Inline | YouTube Link — block tagi nima?
— inline tagi nima?
— inline vs block taglarining farqarli.

15 - dars | Media | YouTube Link — video tagi nima vazifa bajaradi?
— nega autoplay attr ishlamaydi? Izoh.
— video ustiga cover(obloshka) qo'yish
— audio tagi va attributelari.

16 - dars | Iframe | YouTube Link — iframe nima va nima maqsadda ishlatiladi?
— boshqa websitelarni o'zingizda ishlatish.
— YouTube videolarini html da chiqarish.

17 - dars | JavaScript in HTML | YouTube Link Eslatma! Ushbu mavzuni tushunishga qiynalsangiz keyingi darslikka o'tishingiz mumkin. Bu mavzu JS darslarida batafsil tushuntiriladi. — javascript nima vazifa bajaradi?
— script tagi haqida
— console.log nima?
— document nima?
— queryselector use case.
— javascript orqali style berish
— onclick / onmousemove
— function

18 - dars | Forms | YouTube Link — form tagi va attributelari
— form inputs va ularning typelar....
— placeholder
— autocomplete
— select / option / default select
— fieldset / legend
— input with datalist / list

19 - dars | Semantic tags | YouTube Link — nega semantic taglardan foydalanish kerak?
— nav, main, aside, footer, header
— details, time, summery, section, article

20 - dars | Entities | YouTube Link — Binary number theory
— ASCII Table
— ISO-8859
— UTF-8
— Charset
— Symbols

21 - dars | SVG | YouTube Link — SVG nima?
— line / x1 y2, x2 y2
— circle / radius / not allowed icon yasash
— rectangle / width, height /
— ellipsis / rx, ry...
— polygon / points
— grouping svg

22 - dars | Canvas | YouTube Link — Canvas nima?
— line / querySelector / 2d context
— circle / arc
— text / fillText / font

BONUS
Interview savollari va amaliy mashqlar: https://t.me/html_homework