Kursdagi boshqa ochiq darslar

Frontend dasturlash asoslari

Kurs orqali frontend dasturlashni amaliyot asosida oʻrganing.
Boshlash

Frontend dasturchi nima ish qiladi?

Veb-saytning foydalanuvchiga koʻrinadigan qismini tayyorlash bilan frontend dasturchi shugʻullanadi. Veb-saytlarda koʻrinadigan oddiy bir tugma uchun ham mehnat qilib kod yoziladi. Bu esa frontend dasturchining ishi boʻlib, brauzer orqali ekranda koʻrinib turadigan barcha narsani tayyorlash ham uning vazifasiga kiradi. Tushunganingizdek, brauzer orqali veb-saytga kirilganda koʻrinib turgan barcha narsa frontend qism hisoblanadi.

Kurs qay tartibda oʻtiladi?

Videodarslar

Darslar video shaklida platformaga joylangan boʻlib, ularni xohlagan paytda va istalgan joyda koʻrish mumkin. Videodarslar yangilab boriladi.

Vazifalar

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

Kurs tarkibi

  • 113 ta dars
  • 1 ta loyiha qilinadi
  • Kurs davomiyligi - 12 soat
Muallif haqida
O'rganiladigan texnologiyalar
Kursda tuziladigan loyihalar
Mohirdev hamjamiyati guruhiga kirish
Kurs oxirida qanday natijani maqsad qilish mumkin?
Dasturlashni oʻrganishdagi muhim qoidalar, kerakli nuqtalar
Dars oʻtilish tartibi. Qoidalar
Veb dasturlash sohalari bilan tanishuv
Sayt tuzishdagi bosqichlar ketma-ketligi
Sayt tuzish usullari. Foydalanish tartibi
Onlayn kurs sayti uchun texnik talablarni tayyorlash, brainstorming
Onlayn kurs saytining qoralama dizaynini Balsamiqʼda tuzish
Google Chromeʼni oʻrnatish va sinxronizatsiyani yoqish
Visual Studio Codeʼni 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
Elementlarni yozish qoidasi. Matnga oid elementlar
Tuzilmaviy elementlar: html, head, body. DevTools haqida qisqacha maʼlumot
Havola (link) bilan ishlash
Boshqa HTML fayllarga link bilan ulanish
Kodni HTML Validatorʼda 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. Vazifa
Roʻyxatdan oʻrganilganlarni Akademnashr maketiga tatbiq qilish
div elementi. Guruhlash
div elementini Akademnashr maketiga tatbiq qilish
HTML5da qoʻshilgan boʻlim elementlari – header, nav, main, section, footer. Kichik vazifa
HTML5 boʻlim elementlarini Akademnashr maketiga tatbiq qilish
Sahifaga rasmlarni joylash. Rasmlar formatidagi farqlar
Papka ichidagi rasmni joylash qanday ishlaydi?
Radiusli-burchakli rasmlarni eksport qilish. Rasmga width va height berishning ahamiyati
Rasmlar hajmini optimallashtirish. TinyPNG instrumenti
Qachon rasmlar img emas, svg kodi bilan joylanadi? SVG hajmini optimallashtirish
Rastr rasmlarni retina ekran uchun moslashtirish
Squoosh instrumenti. Squoosh yordamida rasm hajmini optimallashtirish. Retina uchun 2x rasmlarni chiqarish
Picsum Photos yordamida sahifaga ixtiyoriy rasmlarni olib kelish
Placeholder.comdan 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ʻrganilgan bilimlarni tatbiq qilish
GitHub oʻzi nima?
GitHubʼda roʻyxatdan oʻtish
Kompyuterdan Gitʼni va unga bogʻlangan login-parollarni oʻchirib tashlash
Kompyuterga Gitʼni oʻrnatish. Global sozlamalarni yangi profilga moslashtirish
Git asoslari
Git asoslarini demo loyiha asosida ishlatish
Akademnashr loyihasini GitHubʼga joylash
Netlify bilan tanishuv. Akademnashr loyihasini Netlifyga joylash
CSS asoslari. CSS uchun fayl ochish, HTMLga ulash. Ranglar asosida kichik misollar
CSSda ranglarni RGB formatida berish
RGBA va shaffof rang bilan ishlash
Ranglarni HEX formatida berish
Matn yozishda koʻp foydalaniladigan stillar
CSSʼda kod ketma-ketligining ahamiyati
Elementlarga class orqali stil berish. Classʼni nomlashdagi qoidalar
CSSʼda selectorlar kuchi. Class VS element tanlovchisi
Koʻp ishlatiladigan class nomlari
Elementlarga bir nechta class berish. Matnni oʻrtaga, chap va oʻngga keltirish
Elementlarning eni va boʻyini oʻzgartirish
Rasmlarning object-fit xususiyati
Akademnashr maketiga CSSʼdan oʻtilgan mavzularni tatbiq qilish boʻyicha vazifa taʼrifi
Akademnashr maketiga CSSʼdan oʻrganilgan mavzularni qoʻshish. 1-qism
Akademnashr maketiga CSSʼdan oʻrganilgan mavzularni qoʻshish. 2-qism
Roʻyxatning stillarini oʻzgartirish. Ota elementga koʻra boshqa elementni tanlab stil berish
Akademnashr maketiga CSSʼdan oʻrganilgan mavzularni qoʻshish. 3-qism
Akademnashr maketidagi yangi kodlarni GitHubʼga yuborish va Netlifyʼga 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 CSSʼni qoʻshish boʻyicha vazifa taʼrifi
Akademnashr maketiga shirftlarga oid CSSʼni qoʻshish vazifasi yechimi
Vazifa yechimi kodini GitHubʼga yuborish
padding xususiyati
CSSʼda 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 issueʼlar 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
padding va marginni qachon ishlatish kerak?
padding va marginni qisqa usulda yozish va tatbiq qilish
margin auto qiymatining oʻziga xosligi
container nima? Qachon foydalaniladi?
box-shadow va text-shadow xususiyatlari
Barcha oʻtilgan mavzularni Akademnashr maketiga tatbiq qilish. Saralash. Final

Kurs oʻqituvchisi

Muhammadjavohir Sur'atov

Muhammadjavohir Sur'atov

O'qituvchi

Uzoq yillik tajribaga ega mutaxassis

Kursni oʻrganishni hozirdan boshlang

  • 1 yil davomida foydalanish imkoniyati
  • Videodarslar
  • Testlar
  • Loyihalar
  • Yuklab olinadigan manbalar
  • Mobil qurilma orqali kirish

Bepul

Kursni tekinga oling va hoziroq oʻrganishni boshlang.