fbpx

Frontend Praktikum

Uncategorized
Istaklar ro'yxati Ulashish
Share Course
Page Link
Share On Social Media

Kurs haqida tanishish

“HTML, CSSni ham kursda o’rganilar ekanmi? Ana, YouTubeda tekin video tiqilib yotibdi. O’shalardan bir nechtasini 2 haftada ko’rib chiqsang, shuning o’zi yetadi. Pul ketkazib o’tirma bunaqa narsalarga”. Shu kabi fikrlarni eshitganmisiz? Men eshitganman va bu fikrlarga mutlaqo qo’shilmayman.

Har qanday instrument yoki texnologiyaning to’g’ri, optimal ishlatilish usuli, qoidalari bo’ladi. Noto’g’ri usul bilan ham ularni ishlata olish mumkin. Lekin, bu usulda instrumentlarning bor potensialidan foydalana olmaslik yoki dastlab ko’z ilg’amaydigan tomonlarini o’rganmaganlik tufayli “qosh qo’yaman deb ko’z chiqarish” mumkin. HTML va CSS qaysidir darajada shu kabi xatolarni kechiruvchan ekanligi fundamental qoidalarni o’rganish kerak emasligini bildirmaydi.

Aytgancha, yana bir holat: deylik, Bootstrap kutubxonasidan foydalanyapsiz. Maketning dokumentatsiyada yaqqol misol bilan ko’rsatilmagan biron noqulay nuqtasiga kelib to’xtab qoldingiz. HTML va CSS asoslarini yaxshi bilmaslik bu holatda Bootstrapga tobe bo’lib qolish va mustaqil maxsus kod yoza olmaslikka, bu o’z o’rnida loyihaning bitirilishi kechikishiga olib keladi.

U ham mayli. O’zim ko’p ko’rgan holatim – internetda HTML va CSS asoslarini o’rgangandan so’ng ularni real maketlarda to’g’ri ishlata olmaslik yoki maketlar bilan ishlayotganda optimal bo’lmagan usulda kod yozish.

Shu holatlarga yechim sifatida, bu kursda HTML, CSS, Sass, Bootstrap va JavaScriptning DOMga oid fundamental imkoniyatlarini o’rganish mumkin bo’ladi.

Kurs oxirida qanday natija bilan chiqaman?

Kursda darslardagi mashqlar va uy ishlari uchun kichik loyihalar beriladi. Kursni muvaffaqiyatli tugatgan o’quvchilar verstalshik lavozimida ishlay oladigan darajaga chiqa olishlari mumkin. Katta loyihalardan quyidagilarni tuzishlari mumkin (hozirgi rejaga ko’ra holat, o’zgarishi mumkin):

  • Lending sahifa – kamida 6 ta
  • Ko’p sahifali sayt – kamida 4 ta
  • Internet do’kon sayti – 2 ta
  • Telegram desktop dasturi interfeysi Bootstrap yordamida

Bular bilan birga o’quvchilar o’zlarining portfoliolarini tayyorlashlari va uning yordamida turli kompaniyalarga ishga kirishga harakat qilishlari mumkin.

Ko'proq ko'rish

Nimalarni o'rganasiz?

  • HTML – semantik HTML kod yozish, HTML kodni tekshiruvdan o’tkazish va undagi kodni to’g’ri tartiblash.
  • CSS – saytga to’g’ri va qulay usulda bezaklar berish, sahifa tuzilmasini turli miqdordagi ma’lumotga va turli xil ekranlarga moslashadigan qilish. Animatsiyalar va boshqa qiziqarli va kundalik hayotda qo’l keladigan CSS imkoniyatlari.
  • Git va GitHub – loyihani tartibli tarzda tuzish, talqinlar bilan erkin ishlay olish, kodni GitHubda saqlash va loyihalarni ommaga Netlify va GitHub Pages xizmatlari orqali ko’rsatish.
  • BEM nomlash usuli – HTML elementlarini mustaqil bloklarga ajrata olish va CSSda shu bloklarning stillarini bir-biriga tobe bo’lmagan holda to’g’ri usulda yoza olish.
  • JavaScript asoslari va DOM bilan ishlash – saytdagi turli xil sodda va kundalik verstkada qo’l keladigan amallarni bajarish: hodisalar bilan ishlash, elementlarga sodda o’zgartirishlar kiritish va shunga o’xshash amallar.
  • Sass – CSS kodni tartibli ko’rinishga keltirish, kamroq kod yoza olish. Katta loyihalarda qadri bilinadi. Umuman olganda har qanday loyihada foydali bo’la oladi.
  • Bootstrap – eng mashhur va “dejurniy” frontend UI kutubxonasi. Avvaliga uning 4-talqinining imkoniyatlari va davomida yangi 5-talqindagi uslub va yangiliklarni bilan ishlash.
  • Verstalshik mutaxassisligi bo’yicha ishga kirish uchun tavsiyalar.

Course Content

Eslatma. Ommaviy Ofertani o’qing!
Ommaviy ofertani o'qib chiqing.

  • Ommaviy oferta bilan tanishib chiqing
    00:00

9-bo’lim. Amaliyot. «AnsorMed» loyihasi

10-bo’lim. VS Code uchun qo’shimcha kengaytmalar

11-bo’lim. Manfiy qiymatli margin va flexbox davomi

12-bo’lim. N24 sayti amaliyot va form elementlari bilan ishlash

13-bo’lim. Fonga rasm joylash, kontent va bezak rasmlar, flexga xos muhim masala. Psevdoelementlar

14-bo’lim. Qolip repozitoriya va «Articles» maketi amaliyoti

15-bo’lim. CSS counter va @font-face

16-bo’lim. Form elementlari davomi

17-bo’lim. N24 amaliyoti. Site-footer, news-list va kontakt sahifasi. Kamchiliklarni to’g’rilash

18-bo’lim. CSSda prefikslash va minifikatsiya

19-bo’lim. CSSda custom property

20-bo’lim. «Apple Watch» loyihasi amaliyoti

21-bo’lim. «Intro form» loyihasi amaliyoti

22-bo’lim. «CoffeeRoasters» maketi amaliyoti

23-bo’lim. Fonga bir nechta rasm joylash va CSSda gradient rang bilan ishlash

24-bo’lim. «Dark mode»li sayt tuzish va JavaScript DOM bilan ishlash asoslari

25-bo’lim. CSS transform

26-bo’lim. «Countries» loyihasi amaliyoti

27-bo’lim. CSSdagi noodatiy tanlovchilar. Checkbox va radioga o’ziga xos stil berish

28-bo’lim. CSS position xususiyati va u bo’yicha mashqlar

29-bo’lim. «Job Listings» loyihasi amaliyoti

30-bo’lim. N24 maketi modali va JSdan qo’shimcha mavzular

31-bo’lim. BEM

32-bo’lim. Loyihalar tuzilishi vaqtini to’g’ri tahmin qilish va samaradorlikni oshirish uchun snippetlar

33-bo’lim. «Shortly» loyihasi amaliyoti va PerfectPixel instrumenti

34-bo’lim. «Bookmark» loyihasi amaliyoti. 1-qism

35-bo’lim. JavaScript. Takrorlash
Shu paytgacha o'tilgan JavaScriptga oid bilimlarimizni mustahkamlaymiz.

36-bo’lim. «Bookmark» loyihasi amaliyoti. 2-qism

37-bo’lim. «Easybank» loyihasi amaliyoti

38-bo’lim. «E-commerce product page» loyihasi amaliyoti

39-bo’lim. Boshqa HTML va CSS imkoniyatlari

40-bo’lim. GitHub va Portfolio. Bajarilgan ishlarni ommaga taqdim qilish.

41-bo’lim. Gitni Terminalda boshqarish va jamoaviy ishlash

42-bo’lim. «MyTeam» loyihasini jamoa bilan tuzish

Student Ratings & Reviews

No Review Yet
No Review Yet