"Frontend dasturlash asoslari" kursi o'quv rejasi

Kirish

• ✅ Kurs haqida ma'lumot. Intro
• ✅ O'zim haqimda ma'lumot
• ✅ Kursda o'rgatiladigan texnologiyalar va ularning vazifalari. Texnologiyalarni o'rganish uchun ketadigan vaqt.
• ✅ Qanday loyihalar tuzamiz?
• ✅ Kurs oxirida nima bilan chiqish mumkin?
• ✅ O'quvchilarga tavsiyalar, maslahatlar
• ✅ Qoidalar, dars o'tish tartibi
• ✅ Saralash qaysi formatda bo'ladi?

Veb dasturlash bilan tanishuv

• ✅ Veb dasturlash sohalari haqida ma'lumot
• ✅ Sayt tuzilishidagi bosqichlar ketma-ketligi va ahamiyati
• ✅ Sayt tuzish usullari va qachon qaysi birini ishlatish kerak va biz qaysi usulni o'rganamiz?
• Verstka jarayoni haqida ma'lumot - demo - mini saytning tuzilishi jarayoni (uzunroq video)

Ish boshi

• Dasturlash muhitini sozlash - brauzer, kod muharriri, sozlamalar va qo'shimcha dasturlar
• Loyihaning fayl va papkalarini to'g'ri tartiblash
• Matnga oid asosiy elementlar
• Tuzilmaviy elementlar (head, body...)
• Havola (link) bilan ishlash asoslari - internetdagi biron sahifaga link joylash
• Papkadagi boshqa sahifaga o'tadigan link joylash
• Sahifani yangi tabda ochish
• HTML kodni tekshirish mumkinmi? Brauzerlar kechiruvchanligi
• Loyihani arxivlab yuborish
• Verstka sohasining eng yaxshi va yomon tomoni
• Figma bilan tanishuv

Amaliyot

• Insure va Bookmark formatidagi maketlarning boshlang'ich HTML kodini yozish
• O'quvchilar ishlarini tahlil qilish

• HTMLdagi bo'limlarga bo'lish uchun ishlatiladigan elementlar (main, section, article va boshqalar)
• HTML bo'lim elementlarning N24 kabi sayt dizayni asosida tahlili
• Amaliyot - bo'lim elementlaridan to'g'ri foydalana olish

• Saytga rasm joylash asoslari
• Rasmlar formatlari bilan tanishuv va qachon qaysi formatdan foydalanish kerak?
• Rasmlarni Figma maketdan eksport qilish
• Rasmlar hajmini optimallashtirish
• Retina ekranlar uchun moslashtirilgan rasm joylash
• Ixtiyoriy matn va rasm generatsiya qilish - Picsum.photos va Lorem ipsum

• Mustaqil ishlar tahlili (Insure, Bookmark va N24 bo'yicha ishlar)
• Elementlarni guruhlashda yaqinlik teoriyasidan foydalanish

• GitHub bilan tanishuv
• GitHubda profil ochish
• Kompyuterga Gitni o'rnatish va profilni sozlash
• GitHubda repo ochish va uni kompyuterdagi loyiha bilan ulash
• GitHub repodagi ishlarni Netlifyga joylash

• CSSda ranglar bilan ishlash
• CSSda matnga oid stillar
• Elementlarga to'g'ri class nomi berish
• Elementlar eni va bo'yini o'zgartirish
• Rasmlar uchun object-fit xususiyatini qo'llash

• Shriftlar bilan ishlash asoslari va shriftlar kategoriyalari
• Google Fontsdan bitta shriftni ulab ishlatish
• Google Fontsdan bir nechta shriftni ulab ishlatish

• Flexbox bilan tanishuv
• flex-wrap, justify-content, align-items xususiyatlaridan foydalanish

• Psevdoklasslar bilan tanishuv - :hover, :active, :focus
• Transition xususiyatini psevdoklasslar bilan birga ishlatish
• outline xususiyatining ahamiyati
• opacity va shaffof ranglar
• border xususiyati bilan ishlash
• padding xususiyati bilan ishlash
• border-radius xususiyati bilan ishlash
• inline va block elementlarining farqlari va display: inline-block; dan foydalanish

Amaliyot

• Insure, Bookmark, N24 bosh sahifasi va Executive study maketlarini o'tilgan mavzular asosida tuzib chiqish
• Code review nima?
• GitHub repoda Code review qilish va tavsiyalar
• Amaliyotdan keyingi tahlil

• NormalizeCSS va uni ishlatishdan nima naf?
• margin xususiyati bilan ishlash
• margin xususiyatini ishlatish bo'yicha tavsiyalar
• box-sizing xususiyati bilan ishlash
• Qachon padding va qachon margin ishlatilishi kerak?
• padding va margin xususiyatlarini yozishning qisqa usuli
• margin da auto qiymatidan foydalanish
• .container elementi nima va uni to'g'ri ishlata olish

Shu yerda onlayn kursning bepul qismi tugaydi va o'qishni davom ettirmoqchi bo'lganlar saralash vazifasini topshirishlari kerak bo'ladi.

Amaliyot

• Oldingi tuzilgan loyihalarni optimallashtirish, to'ldirish
• Code review
• VS Codedagi foydali kengaytmalarni o'rnatish va ishlatish
• box-shadow va text-shadow xususiyatlari bilan ishlash
• Manfiy qiymatli margin bilan ishlash (чё так можно было misolida)

• CSSda DRY prinsipidan foydalanish
• flex-direction, flex-grow va flex-shrink xususiyatlari bilan tanishuv
• Sticky footer tuzish
• order xususiyati bilan tanishuv

• Elementlarga bitta fon rasmini tatbiq qilish
• Psevdoelementlar yordamida sahifaga CSSdan turib yangi element qo'shish
• Qachon img va qachon psevdoelement fon rasmidan foydalanish kerak?

Amaliyot

• Barcha ko'rib chiqilgan maketlarni to'ldirish, optimallashtirish

• Shriftlarni @font-face yordamida ulash
• Loyihalarga Google Fonts orqali ulangan shriftlarni @font-face bilan ulash
• CoffeeRoasters maketiga o'xshash stildagi maketning bir qismini tuzish
• Shortly maketiga o'xshash stildagi maketni tuzish

• Form bilan tanishuv. Sodda form elementlarini ishlatish
• Gradient fon rasmi joylash
• Matnga gradientli rang berish
• Intro sahifasi dizayniga o'xshash maketda mashq qilish
• Formning boshqa elementlari: select, checkbox, radio, fieldset, legend, datalist

• Kodni prefikslash nega kerak?
• Kodni minifikatsiya qilish
• CSSda custom propertyni ishlatish
• Amaliyot

• Fonga bir nechta rasm joylash
• CSSdagi specificity o'zi nima va uni bilishning foydalari
• Agile Scrum nima?
• Flex bilan ishlashni takrorlash (Pricing component va Countries maketlariga mos dizayndagi sahifalarni tuzish)

• CSS transform xususiyati: translate, scale, rotate, skew, transform-origin, perspective
• Oyna ochilishi effekti transform yordamida

• Saytni tungi rejim ko'rinishiga o'tkazish (dark mode) - CSS stillarni tayyorlash
• JavaScriptga kirish. O'zgaruvchilar.
• JavaScriptda sahifadagi elementni topish
• JavaScriptda tugma bosilishiga reaksiya bildirish
• JavaScriptda elementlarning klasslarini boshqarish

Amaliyot

• Job Listings maketi dizayniga mos ko'rinishdagi sahifani tuzish
• Oldingi tuzilgan loyihalarni to'ldirish, optimallashtirish

• CSSdagi noodatiy tanlovchilar (:valid, :invalid, :checked, [disabled], +, ~)
• Checkbox va radio form elementlariga xos stillar berish
• Mashqlar

Amaliyot

• Apple Watch nomli maketga mos dizayndagi sahifani tuzish
• Barcha oldingi loyihalar tahlili
• To'lov usulini tanlash va maqolalar ro'yxati maketlarini tuzish

• position xususiyati bilan tanishuv
• static joylashtirish
• relative joylashtirish
• absolute joylashtirish
• z-index xususiyati
• Relative va absolute bo'yicha mashqlar
• Form va position bo'yicha Loop 2-1 va 2-2-mashqlar

• fixed joylashtirish
• z-index xususiyati ichma-ich ishlatilgandagi holati
• CSSda uchburchak yasash
• Turli overlay effektlarini CSS transform va position yordamida tuzish
• Dropdown menu tuzish

• CSS Фичи turkumidagi videolari bo'yicha savol-javob, tahlil
• Link va buttonning turli effektlarini tuzish
• Sahifa bo'limiga o'tadigan link tuzish
• iframe elementidan video va xarita joylash uchun foydalanish

• Snippet tuzish
• Loyihalarning boshlang'ich holati uchun template repo tuzish
• modal elementini tuzish
• CSS animatsiya asoslari

Telegram kanal - Mayoq