HTML&CSS o’quv reja

HTML&CSS o’quv reja

Elshod Adamov

1-bob: HTML asoslari

HTML

  1. HTML nima? Teg. Atribut.
  2. HTML-hujjat tarkibi.
  3. Teglar bilan tanishuv: <html>, <head>, <body>.

Matn elementlar va havolalar

  1. Sarlavha <h1><h6>.
  2. paragraf <p>.
  3. Matnlarni ajratish: <em>, <strong>, <u>, <i> va hokazo.
  4. Havola <a> va atribut href, target.

Ro’yhat, tasvir va media

  1. Raqamli <ol> va belgili <ul> ro’yhat.
  2. Ro’yhat elementlari <li>.
  3. Rasm tegi <img> и atributlar src, alt.
  4. Video va audio taglar <video>, <audio>.

Jadval

  1. Jadval atributlari
  2. asosiy taglar tbody thead tfoot
  3. qator tag tr
  4. yacheyka taglar td th

Form

  1. form tegi va atributlari
  2. asosiy form elementlari input select textarea button
  3. guruhlash taglari fieldset legend
  4. ro’yhat elementi datalist
  5. form elementlari atributlari

Vazifa.

2-bob: CSS asoslari

CSS kirish

  1. CSS haqida.
  2. Boglash usullari: inline, internal, external

Asosiy CSS selektorlari va uni xususiyatlari

  1. Selektor turlari: element, class, id
  2. Asosiy xususiyatlar: matn va fon rangi (color, background-color), o’lchamlar (width, height).

Blok modeli va joylashuv

  1. Box model: margin, padding, border.
  2. Joylashuv: static, relative, absolute, fixed.

3-bob: HTML&CSS advanced

HTML semantik elementar

  1. <header>, <nav>, <main>, <section>, <article>, <footer>.
  2. Accesbility va SEO.

Transformatsiya, animatsiyva va mediaso’rov

  1. transform, transition, animation.
  2. Adaptiv dizayn va media so’rovlar

Grid va Flexbox

  1. Flexbox.
  2. Asosiy xususiyatlar: display: flex, flex-direction, justify-content, align-items.
  3. Grid.

4-Bob: CSS expert

Grid va Flexbox (davomi)

  1. CSS Grid asosiy xususiyatlari: grid-template-columns, grid-template-rows, grid-gap.

Adaptiv va moslashuvchan dizayn

  1. Adaptiv maketlarni shakllantirish.
  2. Har hil qurilmalar uchun mediaso’rovlardan foydalanish.

Amaliyot: Landing Page

5-bob: Advanced mavzular

CSS preprosessor va Git

  1. Sass/SCSS.
  2. Git.

Optimallashtirish va samaradorlik

  1. CSS optimizatsiya qilish tomonlari.
  2. Minify va kesh.

BEM metodoligyasi

  1. BEM haqida va undan foydalansih.
  2. BEM bo’yicha CSS class nomlanish va strukturasi

6-bob: Mustahkamlash

Mustahkamlash loyiha: Blog website

SEO

  1. SEO asoslari.
  2. URL strukturasi, sarlavhalar, meta-teglar.

Yakuniy loyiha: Dashboard.

Kurs ishi. Individual


Report Page