1.3 Typography, ranglar, shriftlar va fon bilan ishlash
1.3 Typography, ranglar, shriftlar va fon bilan ishlash
Mentor: Azizbek Alimov (TBC Bank (6+ yil tajriba))
Full HD 1080p • O'zbek tilida • 16:401.3 Typography, ranglar, shriftlar va fon bilan ishlash
Zamonaviy frontend dasturchining asosiy ish quroli bo'lgan Visual Studio Code muharririni professional darajada sozlash, Live Server kengaytmasi orqali sahifani avtomatik yangilash va Emmet yordamida kod yozish tezligini 5 baravarga oshirish sirlari.
Darsdan olinadigan amaliy ko'nikmalar:
- VS Code muharririni to'g'ri o'rnatish va moslash
- Live Server plaginini o'rnatib brauzer bilan sinxronlash
- Emmet qisqartmalari orqali bir necha soniyada HTML skeletini generatsiya qilish
- Foydali plaginlar: Prettier, Auto Rename Tag, Material Icon Theme
1. Nega aynan VS Code?
Visual Studio Code (Microsoft tomonidan ishlab chiqilgan) bugungi kunda dunyodagi eng ommabop bepul kod muharriridir. U tez ishlaydi, bepul va minglab foydali plaginlarga ega.
Frontend dasturchi sifatida kuniga minglab qator kod yozasiz, shuning uchun muhitni to'g'ri sozlash ish unumdorligingizni oshiradi.
2. Live Server plagini
Oddiy holatda HTML faylni o'zgartirgach, brauzerga o'tib har safar F5 (yangilash) tugmasini bosishga to'g'ri keladi.
Live Server plagini o'rnatilgach, kodni saqlashingiz bilan (Ctrl+S / Cmd+S) brauzer avtomatik ravishda yangilanadi va o'zgarishlar darhol ko'rinadi.
3. Emmet — Kod yozish tezligini oshirish
Emmet — bu HTML va CSS kodlarini qisqartmalar orqali bir lahzada yozish imkonini beruvchi texnologiya bo'lib, VS Code ichiga avtomatik o'rnatilgan.
Masalan, bo'sh faylda faqat bitta `!` (undov) belgisini yozib `Tab` yoki `Enter` ni bossangiz, butun boshli HTML5 hujjati skeleti tayyor bo'ladi!
- ! -> HTML5 to'liq skeletini yaratish
- p*3 -> 3 ta paragraf ketma-ket chiqarish
- div.card -> <div class='card'></div> yaratish
- h1#title -> <h1 id='title'></h1> yaratish
- ul>li*4 -> ul ichida 4 ta li elementini hosil qilish