Kursdagi boshqa ochiq darslar

Frontend dasturlash asoslari

Ushbu kursimizda siz frontend dasturlashni amaliy ko'rinishda noldan sayt tuzib o'rganishingiz mumkin..
Boshlash

Kursdagi ochiq videolarni, hech qanday to’lovlarsiz ko’rib, tanishib chiqishingiz mumkin.

Frontend dasturchi nima qiladi?

Front-End dasturchi veb-saytning foydalanuvchiga ko’rinadigan qismini tayyorlash bilan shug’ullanadi. Masalan siz veb-saytlarda ko’radigan oddiygina tugma uchun ham Front-End dasturlovchi mehnat qilib kod yozadi. Ya’ni siz brauzer orqali ekranda ko’rib turadigan barcha narsani tayyorlash Front-End dasturchining vazifasi va mana shu tayyorlangan ishlarning jamlanmasi veb-saytning Front-End qismi deyiladi. Yanada soddaroq tushuntiradigan bo’lsam siz veb-sayt nomini brauzerga yozib, veb-saytga kirganingizda sizga ko’rinib turgan qismi Front-End qismi hisoblanadi.

Kurs qanday tartibda o'tiladi?

Videodarslar

Darslar video shaklda platformaga joylangan bo'lib, ularni xohlagan payt, istalgan joyda ko'rishingiz mumkin. Videodarslar yangilanib boriladi.

Vazifalar

Modul oxirida test topshiriqlari berilgan. Testdan muvaffaqiyatli o'tgan o'quvchilargina keyingi moduldagi darslarga kirish imkoniga ega bo'ladi.

Kurs tarkibi

  • 112 ta dars
  • 12 soat kurs davomiyligi
Muallif haqida
O'rganiladigan texnologiyalar
Kursda tuziladigan loyihalar
Kurs oxirida qanday natijani maqsad qilish mumkin?
Dasturlashni o'rganishdagi ustun qoidalar, muhim nuqtalar
Darslar o'tilishi tartibi va qoidalar
Veb dasturlash sohalari bilan tanishuv
Sayt tuzilishidagi bosqichlar ketma-ketligi
Sayt tuzish usullari va qachon qay biridan foydalanish kerak?
Onlayn kurs sayti uchun texnik talablarni tayyorlash, brainstorming
Onlayn kurs sayti qoralama dizaynini Balsamiqda tuzish
Google Chromeni o'rnatish va undagi sinxronizatsiyani yoqish
Visual Studio Codeni o'rnatish va sozlash. Muhim dasturlarni taskbarga qotirib qo'yish
Skrinshot olish uchun Lightshot dasturini o'rnatish va ishlatish
Loyihaning fayl va papkalarini to'g'ri tartiblash. Live Server kengaytmasini o'rnatish
Elementlar yozilishi qoidasi. Matnga oid elementlar
Tuzilmaviy elementlar. html, head, body. DevTools haqida ozgina ma'lumot
Havola (link) bilan ishlash
Boshqa HTML fayllarga link bilan ulanish
Kodni HTML Validatorda tekshirish
Loyihani arxivlab (zip) yuborish
Verstka sohasining eng yaxshi va eng yomon tomoni
Figma bilan tanishuv.
Akademnashr saytini tuzish bo'yicha yuborilgan ishlarni tahlil qilish
Akademnashr saytini tuzish vazifasi yechimi. Kod yozishdagi samaradorlikni oshirish bo'yicha tavsiyalar
hr va br elementlari
Ro'yxatlar bilan ishlash va vazifa
Ro'yxatlardan o'rganganlarimizni Akademnashr maketiga tatbiq qilish
div elementi va guruhlash
div elementini Akademnashr maketiga tatbiq qilish
HTML5da qo'shilgan bo'lim elementlari - header, nav, main, section, footer va kichik vazifa
HTML5 bo'lim elementlarini Akademnashr maketiga tatbiq qilish
Sahifaga rasmlarni joylash. Rasmlar formatlari farqlari
Papka ichidagi rasmni joylash o'zi qanday ishlaydi
Radiusli burchakli rasmlarni eksport qilish va rasmga width va height berishning ahamiyati
Rasmlar hajmini optimallashtirish. TinyPNG instrumenti
Qachon rasmlarni img emas, svg kodi bilan joylanadi? SVG hajmini optimallashtirish.
Rastr rasmlarni retina ekran uchun moslashtirish
Squoosh instrumenti. Squoosh yordamida rasm hajmini optimallashtirish va retina uchun 2x rasmlarni chiqarish
Picsum Photos yordamida sahifaga ixtiyoriy rasmlarni olib kelish
Placeholder.com dan ixtiyoriy rasmlarni olib kelish
Ixtiyoriy sondagi so'zlardan iborat vaqtinchalik matn generatsiya qilish
Ixtiyoriy sondagi so'zlardan iborat vaqtinchalik matn generatsiya qilish
Akademnashr maketiga rasmlar bo'limida o'rgangan bilimlarni tatbiq qilish
GitHub o'zi nima
GitHubda ro'yxatdan o'tish
Kompyuterdan Gitni va unga bog'langan login-parollarni o'chirib tashlash
Kompyuterga Gitni o'rnatish va undagi global sozlamalarni yangi profilga moslashtirish
Git asoslari
Git asoslarini demo loyiha asosida ishlatish
Akademnashr loyihasini GitHubga joylash
Netlify bilan tanishuv. Akademnashr loyihasini Netlifyga joylash
CSS asoslari. CSS uchun fayl ochib uni HTMLga ulash va ranglar asosidagi kichik misollar
CSSda ranglarni RGB formatida berish
RGBA va shaffof rang bilan ishlash
Ranglarni HEX formatida berish
Matnga oid ko'p ishlatiladigan stillar
CSSda kod ketma ketligining ahamiyati
Elementlarga class orqali stil berish, classni nomlashdagi qoidalar
CSSda selectorlar kuchi. class VS element tanlovchisi
Ko'p ishlatiladigan class nomlari
Elementlarga bir nechta class berish Matnni chap, o'rta va o'ngga keltirish
Elementlarning eni va bo'yini o'zgartirish
Rasmlarning object-fit xususiyati
Akademnashr maketiga CSSdan o'tilgan mavzularni tatbiq qilish bo'yicha vazifa ta'rifi
Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 1-qism
Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 2-qism
Ro'yxatning stillarini o'zgartirish va ota elementga ko'ra boshqa elementni tanlab stil berish
Akademnashr maketiga CSSdan o'rganilgan mavzularni qo'shish. 3-qism
Akademnashr maketidagi yangi kodlarni GitHubga yuborish va Netlifyga joylash
Shriftlar bilan ishlash. font-family va shriftlar turkumlari
Shriftlar bilan ishlash. font-family va shriftlar turkumlari
Google Fontsdagi shriftlardan foydalanish
Google Fontsdagi bir nechta shriftni loyihaga ulash
Matnga oid global stillarni bodyga berish haqida
Matnga oid global stillarni bodyga berish haqida
Akademnashr maketiga shriftlarga oid CSSni qo'shish bo'yicha vazifa ta'rifi
Akademnashr maketiga shirftlarga oid CSSni qo'shish vazifasi yechimi
Vazifa yechimi kodini GitHubga yuborish
padding xususiyati
CSSda psevdoklasslar bilan tanishuv - hover, active, focus va visited
CSS transition
outline xususiyati
opacity xususiyati. opacity VS shaffof rang
Akademnashr maketiga hover va active holatlar stillarini qo'shish. SVG rangini o'zgartirish
border xususiyati
Akademnashr maketi outline stillarini o'zgartirish
border-radius xususiyati
display inline va block farqlari. display inline-block bilan tanishuv
Akademnashr maketiga padding, border va border-radius xususiyatlarini tatbiq qilish
Code Review va GitHub repodagi issuelar haqida
NormalizeCSS haqida
margin xususiyati bilan tanishuv
Akademnashr maketiga NormalizeCSS va marginni tatbiq qilish. :last-child psevdoklassi
Rasmlar tagidagi bo'shliqni olib tashlash va Akademnashr maketiga o'zgartirish kiritish
margin collapse hodisasi haqida
marginni qaysi tomondan berish kerak
Box model va box-sizing tabiiy qiymati haqida
box-sizing tabiiy qiymatidagi noqulaylik va uni to'g'rilash
Qachon padding va qachon margin ishlatish kerak?
padding va marginni qisqa usulda yozib tatbiq qilish
margin auto qiymatining o'ziga xosligi
container nima va qachon ishlatiladi?
box-shadow va text-shadow xususiyatlari
Barcha o'rganilgan mavzularni Akademnashr maketiga tatbiq qilish. Saralash final

Kursni tugatib
sertifikatga ega bo'lasiz

test
Sertifikatni tekshirish
Sertifikat

Kurs o'qituvchisi

Muhammadjavohir Sur'atov

Muhammadjavohir Sur'atov

O'qituvchi

Uzoq yillik tajribaga ega mutaxassis

Bu kursni o’rganishni hoziroq boshlang

  • Bir umrlik foydalanish imkoniyati
  • Video darslar
  • Testlar
  • Loyihalar
  • Yuklab olinadigan manbaalar
  • Mobil qurilma orqali kirish

Bepul

Kursni bepulga oling va hoziroq o'rganishni boshlang.