Amaliyot — CSS bilimlarini mustahkamlash

DarslarWeb dasturlash

Amaliyot — CSS bilimlarini mustahkamlash

15 ta darsda o'rganilgan barcha bilimni 3 ta haqiqiy mini-loyihada amalda sinab ko'ramiz.

90 daqiqa
CSS Advanced — Dars 15

Amaliyot darsi

Endi bilim yetarli. Bugun biz uchta haqiqiy loyiha bilan bilimni qo'llamizga «biriktiramiz».

practiceprojectportfolioship

Bugungi loyihalar

5 ta mavzu
  1. 01Nimani takrorlaymiz — xaritasini ko'rish
  2. 02Loyiha 1 — Profil karta
  3. 03Loyiha 2 — Narx kartalari (pricing)
  4. 04Loyiha 3 — Shaxsiy Landing Page
  5. 05Yakuniy test

Nimani takrorlaymiz?

Ranglar & matn

color, font-family, Google Fonts, text-shadow.

Box model

margin, padding, border, border-radius.

Joylashuv

Flexbox, Grid, position, float.

Effektlar

box-shadow, gradient, transform, transition.

Animatsiya

@keyframes, animation, hover.

Semantik HTML

header, main, article, section, aside.

Loyiha 1 — Profil karta

Avatar, ism, kasb, 3 ta tugma va ijtimoiy tarmoq iconkalaridan iborat chiroyli karta. Flexbox + shadow + hover.

Profil karta — qolip
Natijajonli

Loyiha 2 — Narx kartalari

3 ta tarif (pricing) kartasi — eng mashhur «middle» tarif ko'tarilgan. Grid + shadow + hover.

Pricing bo'limi — qolip
Natijajonli

Loyiha 3 — Shaxsiy Landing Page

Eng katta topshiriq: o'zingiz haqingizdagi bitta sahifalik sayt. Semantik HTML5 + gradient hero + 3 ustunli grid + animatsiya + forma.

Landing Page — to'liq qolip
Natijajonli

Yakuniy test

0 / 6

1.Saytni sarlavha + menyu qismi uchun qaysi teg to'g'ri?

2.Elementni tekis o'rtaga olib chiqadigan eng zamonaviy usul?

3.Responsiv grid uchun sehrli qator?

4.Tugmaga silliq hover animatsiya berish uchun qaysi xususiyat kerak?

5.Google Fonts'ni ulashning eng tez usuli?

6.Saytga chuqurlik (soya) berish uchun nima ishlatamiz?

Yakuniy mustaqil ish

0 / 7