CSS - 2023 — Teletype

Ushbu video darslik CSS da bilishingiz kerak bo'lgan barcha mavzularni o'z ichiga olgan. Video darslik tayorlashda MDN, W3School va css-tricks websitelaridan foydalanilgan. Video darsning umumiy davomiyligi 867.31 minutni tashkil etadi.

Quyidagi kontentlar shariy hukumda egalik huquqi bo'lgani uchun, bu materiallardan istalgan ko'rinishda foydalanish uchun Webbrain Academy hamda Sardorbek Muhtorov 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.

BASICS

1 - dars | CSS'ga kirish | dars jarayoni va ketma-ketlik haqida | YouTube Link — CSS'ni Webbrain bilan o'rganishingiz sababi.
— Ushbu darslikni qolgan darsliklardan farqi.

2 - dars | CSS nima? | YouTube Link — HTML, CSS, JavaScript vazifalari
— CSS'ning basic va advanced mavzulari haqida.
— Dasturchilar css o'ringa kutubhonalar ishlatish sabablari.
— CSS o'rganish uchun nimalar talab qilinadi?
— CSS versiyalari haqida.
— Vazifalar qay tartibda beriladi.

3 - dars | HTML va CSS ni bog'lash | YouTube Link — Inline style
— Internal style
— External style

4 - dars | CSS'da terminal bilan ishlash | YouTube Link — CMD va Terminal nima?
— Nega terminal o'rganishimiz kerak?!
— Termianl orqali malumotlar manziliga o'tish

5 - dars | Selectorlar | YouTube Link — Selectorlar nima maqsadda ishlatiladi?
— HTML taglar orqali malumotlarni chaqirish
— ID attrabute orqali malumotlarni chaqirish
— class attrabute orqali malumotlarni chaqirish
— selector priority(bajarilish tartibi)
— Inner elements selector
— All elements selector

6 - dars | Colors | YouTube Link — Color by names
— Color by RGB
— Color by RGBA
— Color by HEX(...)
— Color by HUE(...)
— developer tools(inspect) bilan ishlash

7 - dars | Background | YouTube Link — background-color
— background-image
— background-size
— background-cover
— background-position
— background-attachment
— background shorthand

8 - dars | Border | YouTube Link — border nima?
— border-style
— border-width
— px - tushunchasi
— border-color
— border-radius
— border-radius properties
— Soft Skills

9 - dars | margin | padding | YouTube Link — padding / margin shorthand
— padding / margin-left
— padding / margin-right
— padding / margin-top
— padding / margin-bottom
— padding / margin value - 1val / 2val / 4val
— margin va padding ishlatishdagi farqlari - padding va marginni border bilan ishlatish farqi
- icon click dagi farqlari
- button bn ishlatilish farqlari

10 - dars | width | height | YouTube Link — width'ni responsive website'larda ishlatilish o'rni
— width / min va max
— height / min va max
— width box examples / inherit — calc function

11 - dars | Navbar project | YouTube Link — Menu bar yasash — display
— center by padding
— highlited button
— margin vs padding farqlari

12 - dars | Outline | YouTube Link — Style — Color
— Width
— Offset

13 - dars | Text | Shadow | YouTube Link
— Text Alignment
— RTL
— Vertical Alignment
— Decoration
— Spacing
— Shadow

14 - dars | Fonts | Google Fonts | YouTube Link — Size
— Family
— Web Safe Fonts
— Fallbacks
— Google Fonts
- link
- import
— Homework

15 - dars | Landing(asosiy) sahifa Project | Boshlang'ichlar uchun | YouTube Link — Margin va Padding bilan ishlash
— div containeri bilan ishlash
— Rasm bilan ishlash
— footer yasash

16 - dars | Flexbox 1/3 | YouTube Link — Flexboxni bilmaslik css ni bilmaslik degani!
— Flexboxga kirish(basic) qisimlari
— child parent attrabutes.
— flex - number
— flex-direction - column / row
— flex-flow -shorthand
— justify-content / align-items / align-content -
— margin vs gap

17 - dars | Flexbox Project Basics | Boshlangichlar uchun | YouTube Link — Porjectni boshlashdan oldin nimalarga etibor berish kerak?
— Strukturaga ajratish master class
— Responsive web haqida umumiy tushuncha
— Figma Topshiriq explanation.

18 - dars | Icons | Siz o'ylagandanda murakkabroq | YouTube link — Icons nima va qayerda ishlatiladi?
— fontawesome
— fontawesome register
— fontawesome icons list
— Coloring and Resizing
— rotate va flip
— border
— fa-stack / overlay the icons
— glyphicon

19 - dars | List | YouTube Link — List style
— replace shapes with image
— positioning.
— Homework.

ADVANCED

20 - dars | Table | YouTube Link — Table width
— Table border to'g'ri berish.
— Kichik table project
— Homework.

21 - dars | Display | YouTube Link — none
— inline
— block
— inline-block

22 - dars | Float | YouTube Link — float qachon ishlatiladi?
— flexbox vs float
— left / right

23 - dars | Overflow | YouTube Link — overflow hidden
— scroll by x, y

24 - dars | Qo'shimcha dars | Figma | YouTube Link — Figma bilan ishlash
— Card yasash
— Optimal yo'l qidirish
— 21~23- darslar uchun vazifa.

25 - dars | Table yasashdagi kichik lifehack | YouTube Link — Uyga vazifani birgalikda tayorlash.
— Table structurasini tuzish
— div qachon ishlatish bo'yicha

26 - dars | Display | z-index | YouTube Link — Static
— CSS ni yaxshi bilish js va reactda katta yordam beradi
— Projectni sekin ishlashiga nima sabab bo'ladi?
— relative / absolute bn ishlatilishi / general case
— Absolute / top, left, right, bottom
— Fixed / sms example
— Sticky / navbar example
— z-index haqida
— Homework tushuntirish

27 - dars | Position mini input Project | YouTube Link — input with icon
— with position / without position
— input placeholder adjustment

28 - dara | Combinators | YouTube Link — decendent
— children
— General siblings
— and

29 - dars | Sticky table | Uyga vazifa | YouTube Link — O'tilgan mavzular bo'yicha savol javob
— 26-darsdagi vazifa, Tableni sticky qilish
— scrollable table yasash
— sticky table header
— sticky table sidebar

30 - dars | Pseudo classes | YouTube Link — Link / active / hover / visited / unvisited
— input pseudo classes
— button pseudo classes
— form elements
— General taga 11+ pseudo classes
— root pseudo clasini ikki holatda ishlatilishi
— css'da variable yasash va sabablari.

31 - dars | Pseudo elements | ::before | ::after | YouTube Link — savol javob
— Pseudo element va class farqi
— first-line / first-letter
— marker / selection
— Before / After
— Tooltip yasash mini project
— CARD yasash mini project
— inset

32 - dars | Custom Attribute selectors | YouTube Link — Selectos
— Containing selector
— exact selector
— Starts with selector
— Ends with selector
— Telefon sorting algo mini project

33 - dars | Units | YouTube Link
— px - pixel
— vw - view width
— vh - view height
— em - element size
— rem - root element size

34 - dars | Gradient Colors | YouTube Link — Yomon story (
— Linear gradient / values / directions
— Gradient Apple background yasash
— Repeating color
— Radial gradient
— Conic gradient
— Conic vs Radial
— Conic from / at
— Awesome project / homework

35 - dars | Text Effect | YouTube Link — Text shadow
— Box shadow
— Text overflow
— writing mode
— Word wrap

EXPERT

36 - dars | Transform | YouTube Link — translate in general case
— translate with position
— rotate
— transform with multiple value
— border-radius'ni to'g'ri ishlatish
— cursor pointer
— Real button yasash mini project
— Scale / scaleX / scaleY
— Skew / skewX / skewY
— matrix

37 - dars | Transition | YouTube Link — transition - shorthand
— transition delay
— transition duration
— transition property
— timing function
— cubic-bezier

38 - dars | Animation - 1 | YouTube Link — Transition bilan animation farqi.
— Animatable css attributes
— darsga kech qolgan studentlarning tayoq yeyishi haqida ))
— animation with percentage unit
— animation from{}, to{}
— animation percentage timing
— BOX movement mini project
— left, right positionni to'g'ri ishlatish haqida
— Override attributes

39 - dars | Animated Gradient background | Mini Project | YouTube Link — background-image animation bo'ladimi?
— videoni to'liq tushunish uchun var(30-dars) mavzusini ko'ring.
— @property - new feature
— updating root variable

40 - dars | Menu Bar Animation | 2 Mini Project | YouTube Link — Position ishlatilgan.
— Animation ishlatilgan
— Menu bar animation to cancel bar
— Menu bar animation to arrow

41 - dars | Tooltip ◄ ▲ ▼ ► belgilari | YouTube Link — border attributining siz bilmagan hususiyatlari.
— tooltip yasash
— border-color'ning 4ta qiymati

42 - dars | Image Effects | YouTube Link — webkit-box-reflection
— object-fit: fill / contain / contain / cover / scale-down
— object-position: X%, Y%
— image filter'ning 10 xil ko'rinishi

43 - dars | Column | element resize | Box sizing | YouTube Link — column-count
— coulmn-gap
— column-rule-style
— column-span
— resize
— homework explanation

44 - dars | Flexbox -2 | YouTube Link — flexbox - 1 / takrorlash
— ordering child elements
— shrinking elements
— growing elements
— basis
— overriding align-items

45 - dars | Grid - 1 | Basics | YouTube Link — offline'da o'qish qanchalik qiyinligini real ko'rinishi ))
— flexbox vs grid
— gap / column, row gap
— grid template columns / rows
— fraction / auto / px
— auto rows
— justify-content
— align-content
— grid-area
— grid-column-end / start

46 - dars | Grid - 2 | Advanced | Layout mini project | YouTube Link
— grid template areas / advanced
— navbar / sidebar / body / footer layout with areas
— free space with area

47 - dars| Grid - 3 | Uzum market card and layout project | YouTube Link — uzum market product view
— repeating the same card
— minmax the dimensions
— auto-fill / auto-fit

48 - dars| Grid - 4 | Image Gallery Project | YouTube Link — Image gallery project
— grid-column with span value
— grid auto flow
— scrimba platformasi

49 - dars | RWD - 1 | Mini Project | YouTube Link — what is RWD?
— what is media query ?
— flexbox as RWD
— width'ning RWD dagi o'rni
— flexbox va gridning real ishlatilishidagi farqi.
— responsive grid layout yasash
— media print
— orientation / portrait

50 - dars | RWD Project | YouTube Link — Landing page yasash
— navbar yasash
— medai querydan foydalanish
— media queryda range belgilashning yangi usuli

BONUS Project | Coming soon... 1 - project | flexbox
2 - project | parallax
3 - project |

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