HTML&CSS o’quv reja
Elshod Adamov1-bob: HTML asoslari
HTML
- HTML nima? Teg. Atribut.
- HTML-hujjat tarkibi.
- Teglar bilan tanishuv:
<html>,<head>,<body>.
Matn elementlar va havolalar
- Sarlavha
<h1><h6>. - paragraf
<p>. - Matnlarni ajratish:
<em>,<strong>,<u>,<i>va hokazo. - Havola
<a>va atributhref,target.
Ro’yhat, tasvir va media
- Raqamli
<ol>va belgili<ul>ro’yhat. - Ro’yhat elementlari
<li>. - Rasm tegi
<img>и atributlarsrc,alt. - Video va audio taglar
<video>,<audio>.
Jadval
- Jadval atributlari
- asosiy taglar
tbodytheadtfoot - qator tag
tr - yacheyka taglar
tdth
Form
formtegi va atributlari- asosiy form elementlari
inputselecttextareabutton - guruhlash taglari
fieldsetlegend - ro’yhat elementi
datalist - form elementlari atributlari
Vazifa.
2-bob: CSS asoslari
CSS kirish
- CSS haqida.
- Boglash usullari: inline, internal, external
Asosiy CSS selektorlari va uni xususiyatlari
- Selektor turlari: element, class, id
- Asosiy xususiyatlar: matn va fon rangi (
color,background-color), o’lchamlar (width,height).
Blok modeli va joylashuv
- Box model:
margin,padding,border. - Joylashuv:
static,relative,absolute,fixed.
3-bob: HTML&CSS advanced
HTML semantik elementar
<header>,<nav>,<main>,<section>,<article>,<footer>.- Accesbility va SEO.
Transformatsiya, animatsiyva va mediaso’rov
transform,transition,animation.- Adaptiv dizayn va media so’rovlar
Grid va Flexbox
- Flexbox.
- Asosiy xususiyatlar:
display: flex,flex-direction,justify-content,align-items. - Grid.
4-Bob: CSS expert
Grid va Flexbox (davomi)
- CSS Grid asosiy xususiyatlari:
grid-template-columns,grid-template-rows,grid-gap.
Adaptiv va moslashuvchan dizayn
- Adaptiv maketlarni shakllantirish.
- Har hil qurilmalar uchun mediaso’rovlardan foydalanish.
Amaliyot: Landing Page
5-bob: Advanced mavzular
CSS preprosessor va Git
- Sass/SCSS.
- Git.
Optimallashtirish va samaradorlik
- CSS optimizatsiya qilish tomonlari.
- Minify va kesh.
BEM metodoligyasi
- BEM haqida va undan foydalansih.
- BEM bo’yicha CSS class nomlanish va strukturasi
6-bob: Mustahkamlash
Mustahkamlash loyiha: Blog website
SEO
- SEO asoslari.
- URL strukturasi, sarlavhalar, meta-teglar.
Yakuniy loyiha: Dashboard.
Kurs ishi. Individual