1-modul · Kirish

1.1-dars — Kursni qanday o'tish kerak

Xush kelibsiz! Ushbu darsda biz sizga bu kurs qanday tuzilganini, mashg'ulotlar uchun nima kerak bo'lishini va har bir darsdan maksimal foyda olishni qanday o'rganishni aytib beramiz. Hech qanday kod yo'q — faqat tayyorgarlik.

👋

Salom, bo'lajak veb-dasturchi!

Tabriklayman: siz o'z veb-saytlaringizni yaratishni o'rganish yo'lida birinchi qadamni qo'ydingiz. Ushbu kurs ilgari hech qachon kod yozmagan odamlar uchun maxsus yaratilgan. Mutlaqo hech qachon. Agar siz HTML CSS'dan nimasi bilan farq qilishini, brauzer serverdan nimasi bilan farqlanishini bilmasangiz — siz to'g'ri manzilga keldingiz.

Biz juda sekin va juda batafsil harakatlanamiz. Har bir dars aynan bitta kichik mavzuni tushuntiradi. Ortiqcha gap yo'q, murakkab atamalar yo'q. Siz shunchaki o'qib qolmaysiz — o'z qo'lingiz bilan kod yozasiz va natijani darhol brauzerda ko'rasiz. Haqiqiy dasturchilar aynan shunday o'rganadi.

Kurs 7 modul va 24 darsdan iborat. Siz ularni tartib bilan, oddiydan murakkabga qarab o'tasiz. Bir darsda o'rganganingizning barchasi keyingisida kerak bo'ladi. Shuning uchun oldinga sakramang — ketma-ket boring.

🎯

Kursdan so'ng nimaga erishasiz

Kurs oxiriga kelib siz o'zingizning birinchi veb-sahifangizni noldan yarata olasiz. Shunchaki konstruktorda bir necha tugmani bosish emas, balki matn muharririda kod yozib, sahifani brauzerda ochib, o'z ishingiz natijasini ko'rish. Bu oddiy eshitiladi, lekin boshlovchi uchun bu ulkan yutuq.

Mana, siz aniq nimalarni qila olasiz:

✅

HTML kod yozish. Siz sarlavhalar, abzatslar, ro'yxatlar, havolalar, rasmlar, jadvallar va formalar yaratishni o'rganasiz. Oddiy veb-sahifa uchun kerak bo'lgan hamma narsa.

✅

CSS orqali stillar qo'shish. Siz ranglarni, shriftlarni, bo'shliqlarni, o'lchamlarni va sahifadagi elementlar joylashuvini qanday o'zgartirishni bilib olasiz.

✅

Moslashuvchan (adaptiv) maketlar yaratish. Sahifalaringiz kompyuterda ham, telefonda ham, planshetda ham chiroyli ko'rinadi.

✅

Vositalardan foydalanish. VS Code, brauzerdagi DevTools, Git — bularning barchasi sizning ish vositalaringizga aylanadi.

✅

Yakuniy loyihani yaratish. Kurs oxirida siz portfolioga qo'shishingiz mumkin bo'lgan to'liq qiymatli saytni yaratasiz.

💻

Sizga nima kerak bo'ladi

🌐 Brauzer

Brauzer — bu saytlarni ko'radigan dastur. Chrome, Firefox, Safari, Edge — bularning barchasi brauzerlar. Darslarimiz uchun biz Google Chromeni tavsiya qilamiz. U bepul, eng ommabop va unda dasturchi uchun ajoyib vositalar mavjud. Yuklab olish uchun: https://www.google.com/chrome/. Agar sizda allaqachon Chrome o'rnatilgan bo'lsa — ajoyib, hech narsani o'zgartirish shart emas. Har qanday zamonaviy brauzer mos keladi, biz misollarda shunchaki Chrome'dan foydalanamiz.

📝 Matn muharriri

Kod maxsus dasturlarda — matn muharrirlarida yoziladi. Hatto oddiy Bloknot (Windows) yoki TextEdit (Mac) dasturida ham yozish mumkin, lekin bu juda noqulay. Biz VS Code (Visual Studio Code) dasturidan foydalanamiz — bu bepul, kuchli va juda ommabop kod muharriri. Yuklab olish: https://code.visualstudio.com/. Agar hali qilmagan bo'lsangiz, uni hozirning o'zida o'rnating. Qo'rqmang — biz unda ishlashni birga o'rganamiz.

📁 Loyihalar uchun papka

Kompyuteringizda barcha darslar uchun alohida papka yarating. Masalan, ish stolida html-css-course nomli papka. Uning ichida har bir dars uchun fayllar yaratasiz. Bu ishlaringizni yo'qotmaslikka yordam beradi. Maslahat: kurs papkasi ichida har bir dars uchun alohida papkalar yarating: lesson-1-1, lesson-1-2 va hokazo.

Hozircha sizga boshqa hech narsa kerak emas. Hech qanday murakkab dasturlar, serverlar yoki ma'lumotlar bazalari kerak emas. Faqat brauzer, kod muharriri va o'rganish istagingiz. Qolgan hamma narsani kurs davomida o'rnatib, sozlab olamiz.

🔍

HTML fayllarni qanday yaratish va ochish kerak

Bu boshlash uchun eng muhim ko'nikma. Ushbu harakatlar tartibini yodda saqlang, u har bir darsda takrorlanadi:

1️⃣

VS Code'ni oching. Yangi fayl yarating: File → New File (yoki Ctrl+N / Cmd+N bosing).

2️⃣

HTML kod yozing. Masalan: <h1>Salom, dunyo!</h1>. Bu nimani anglatishi hozircha muhim emas — tez orada bilib olasiz.

3️⃣

Faylni saqlang. File → Save As... (Ctrl+S / Cmd+S). Uni index.html deb nomlang. Muhim! Kengaytma .html bo'lishi kerak, .txt emas. VS Code'da fayl turi sifatida «HTML»ni tanlang.

4️⃣

Brauzerda oching. Faylni papkada toping, unga sichqonchaning o'ng tugmasini bosing va «Ochish usuli» → Chrome'ni tanlang. Yoki shunchaki faylni brauzer oynasiga sudrab olib boring.

5️⃣

Tayyor! Siz o'z sahifangizni brauzerda ko'rasiz. Agar kodni o'zgartirib, faylni saqlasangiz, sahifani yangilang (F5 yoki Ctrl+R / Cmd+R) — o'zgarishlar paydo bo'ladi.

💡 .html kengaytmasi haqida muhim

Kompyuter fayl turini uning kengaytmasi — nuqtadan keyingi qismi bo'yicha aniqlaydi. index.html fayli — bu HTML fayl. Agar uni index.txt sifatida saqlasangiz, brauzer kodingizni veb-sahifa sifatida emas, balki oddiy matn sifatida ko'rsatadi. Har doim kengaytmani tekshiring! VS Code'da saqlashda «HTML» turini tanlasangiz, kengaytma avtomatik qo'shiladi.

Hozir sinab ko'ring: fayl yarating, <h1>Mening birinchi sahifam</h1> deb yozing, test.html nomi bilan saqlang va brauzerda oching. Siz «Mening birinchi sahifam» matnini yirik harflar bilan ko'rasiz. Tabriklayman — bu sizning birinchi veb-sahifangiz! Siz hozirgina veb-dasturchi bo'ldingiz (deyarli).

HTML · Eng oddiy sahifa namunasi

<h1>Mening birinchi veb-sahifam!</h1>

Ha, hammasi shu! Bor-yo'g'i bitta qator. Brauzer <h1> — bu sarlavha ekanini tushunadi va matnni yirik va qalin qilib ko'rsatadi. Agar hozircha bu qanday ishlashi tushunarsiz bo'lsa, xavotir olmang. Keyingi darslarda hammasini bo'laklab tahlil qilamiz.

📖

Har bir dars qanday tuzilgan

Kursning barcha darslari bir xil andozaga ko'ra qurilgan. Bu maxsus, sizga yo'nalishni topish osonroq bo'lishi uchun qilingan. Mana har bir darsda nimalarni topasiz:

📘

Tushuntirishlar bilan nazariya. Biz aynan bitta mavzuni olamiz (masalan, «h1 tegi») va uni sodda so'zlar bilan tushuntiramiz. Hech qanday murakkab atamalar yo'q. Har bir yangi atama tushuntirish va misol bilan kiritiladi.

💻

Kod misollari. Har bir tushuntirishdan keyin nusxa ko'chirib ishga tushirsa bo'ladigan kod misoli keladi. Misollar <pre><code> ko'rinishida bezatilgan — shunday qilib ularni oddiy matndan ajratish oson.

✏️

Amaliy topshiriq. Dars oxirida mustaqil bajarilishi kerak bo'lgan topshiriq bo'ladi. Uni o'tkazib yubormang! Aynan amaliyot bilimni ko'nikmaga aylantiradi. Topshiriq har doim dars mavzusiga asoslanadi.

📌

Nimani yodda saqlash kerak. Dars asosiy fikrlarining qisqacha ro'yxati — o'qib bo'lgandan keyin xotirada qolishi kerak bo'lgan narsa.

🧠

Muvaffaqiyatli o'rganish uchun beshta maslahat

⌨️ 1. Kodni o'z qo'lingiz bilan yozing

Boshlovchilarning eng katta xatosi — misollarni o'qib, «hammasini tushundim» deb o'ylash. Tushunish faqat barmoqlar orqali keladi. Har doim kodni mustaqil teriing. Nusxa ko'chirmang, joylashtirmang. Har bir belgi, har bir qavs siz tomoningizdan bosilishi kerak. Barmoq mushaklari sintaksisni, miya esa mantiqni yodlab oladi. Boshida sekin va xatolar bilan bo'ladi — bu normal! Xatolar — eng yaxshi ustoz.

🔄 2. Tajriba o'tkazing

Misol ishlagandan keyin, nimanidir o'zgartiring. Boshqa matn yozing. Yana bitta sarlavha qo'shing. Yopuvchi tegni olib tashlang va nima bo'lishini ko'ring. Kodni buzing va uni tuzating. «Buzib qo'yish» qo'rquvi — o'rganishning asosiy dushmani. Buzilgan koddan ham yomonrog'i — kodning umuman yo'qligi. Jasorat bilan tajriba o'tkazing — siz hech narsani buzmaysiz.

⏰ 3. Muntazamlik intensivlikdan muhimroq

Haftada bir marta 5 soatdan ko'ra, har kuni 30 daqiqadan mashg'ulot qilgan yaxshiroq. Miyaga ma'lumotni «hazm qilish» uchun vaqt kerak. Uxlaganingizda miyangiz yangi neyron bog'lanishlarni mustahkamlaydi. Qisqa, lekin muntazam mashg'ulotlar kamdan-kam va charchoq keltiruvchi marafonlarga qaraganda yaxshiroq natija beradi. Telefoningizda eslatma qo'ying: har kuni bir xil vaqtda — darsga 30 daqiqa.

📝 4. Yozib boring

Daftar tuting (jismoniy yoki telefonda) va yangi atamalarni o'z so'zlaringiz bilan yozib boring. Masalan: «Teg — bu brauzerga elementni qanday ko'rsatishni aytadigan buyruq». Siz o'z so'zlaringiz bilan ta'riflaganingizda, ma'lumot oddiy o'qishga qaraganda ancha yaxshi o'zlashtiriladi. Bir haftadan keyin yozuvlaringizga qaytib, qayta o'qing — bu bilimni mustahkamlaydi.

❓ 5. Bilmaslikdan qo'rqmang

Siz hamma narsani bilishga va eslab qolishga majbur emassiz. Hatto tajribali dasturchilar ham doimo internetdan qidiradi va hujjatlar bilan tekshiradi. Agar nimadir tushunarsiz bo'lsa — bo'limni yana bir marta qayta o'qing. Agar baribir tushunarsiz bo'lsa — savolni yozib qo'ying va amaliyotdan keyin unga qaytib keling. Ko'pincha javob siz ishni boshlaganingizda keladi. Va eslang: har bir mutaxassis bir vaqtlar teg nima ekanini bilmagan boshlovchi bo'lgan.

🔧

VS Code o'rnatish: bosqichma-bosqich ko'rsatma

Agar sizda hali VS Code bo'lmasa, keling, uni hozirning o'zida o'rnatamiz. Bu 5 daqiqa vaqt oladi.

1️⃣

Brauzeringizda https://code.visualstudio.com/ saytini oching.

2️⃣

Katta ko'k «Download for...» tugmasini bosing (sayt operatsion tizimingizni o'zi aniqlaydi).

3️⃣

Yuklab olingan o'rnatuvchini ishga tushiring va ko'rsatmalarga amal qiling. Windows'da shunchaki «Keyingi»ni bosaverin, Mac'da VS Code'ni «Programs» papkasiga sudrab olib boring.

4️⃣

O'rnatgandan keyin VS Code'ni oching. Siz kutib olish ekranini ko'rasiz. Bu bizning asosiy vositamiz.

💡 Foydali sozlama: avtosaqlash

VS Code'da avtomatik saqlash funksiyasi bor. Uni yoqing: File → Auto Save. Shundan keyin fayllar har o'zgarishda avtomatik saqlanadi. Bu juda qulay: kodni o'zgartirasiz, brauzerga o'tasiz, F5'ni bosasiz — va yangilangan sahifani ko'rasiz. Hech qanday ortiqcha harakat kerak emas.

🔗

Foydali havolalar

Mana, butun kurs davomida va undan keyin ham sizga foydali bo'ladigan bir nechta resurslar. Ularni hozir o'rganishga urinmang — shunchaki bu sahifani saqlab qo'ying, keyin qaytib kelish uchun.

MDN Web Docs

HTML, CSS va JavaScript bo'yicha eng to'liq hujjatlar. Misollar, tushuntirishlar va havolalar bilan. https://developer.mozilla.org/ru/

W3Schools

Ancha sodda va ko'rgazmali qo'llanma. Saytning o'zida misollarni tahrirlab, natijani ko'rish mumkin. https://www.w3schools.com/

CodePen

HTML, CSS va JavaScript uchun onlayn qumloq (sandbox). Brauzerda kod yozasiz — natijani darhol ko'rasiz. Tajriba o'tkazish uchun qulay. https://codepen.io/

Google Chrome

Biz foydalanadigan brauzer. https://www.google.com/chrome/

VS Code

Bizning kod muharrimiz. https://code.visualstudio.com/

Can I Use

HTML/CSS'ning muayyan imkoniyati turli brauzerlarda qo'llab-quvvatlanadimi, shuni tekshiradi. https://caniuse.com/

❤️

Nimadan qo'rqmaslik kerak

😨 «Menda chiqmaydi, men gumanitar odamman»

HTML va CSS — dasturlash tillari emas, balki razmetka (belgilash) tillari. Unda murakkab matematika, algoritmlar yoki mantiqiy konstruksiyalar yo'q. Bu bilan istalgan kasb egalari uddalaydi: dizaynerlar, jurnalistlar, o'qituvchilar, buxgalterlar. Agar siz o'qiy va tera olsangiz — uddalaysiz.

😨 «Men yangi narsa o'rganish uchun juda keksaman»

Yosh ahamiyatsiz. Ko'plab muvaffaqiyatli veb-dasturchilar 30, 40, hatto 50 yoshdan keyin boshlashgan. Motivatsiya va mashg'ulotlar muntazamligi ancha muhimroq. Sizning hayotiy tajribangiz va intizomingiz — bu sizning kamchiligingiz emas, balki afzalligingiz.

😨 «Ingliz tili xalaqit beryapti»

HTML va CSS uchun asosiy ingliz so'zlarini bilish kifoya (header — sarlavha, paragraph — abzats, image — rasm, color — rang). Deyarli barcha teglar ingliz so'zlarining qisqartmasi. Siz ularni jarayon davomida o'rganasiz. Bizning kursimiz o'zbek tilida bo'lgani uchun til to'sig'i muammo emas. Asosiy atamalarni biz tarjima qilib, tushuntirib boramiz.

😨 «Men sur'atga ulgurmayapman»

Siz o'z sur'atingizda o'rganasiz. Hech qanday muddat, hech qanday imtihon yo'q. Agar dars murakkab bo'lsa — uni ikki kunda o'ting. Agar oson bo'lsa — bir kunda. Eng muhimi — 2-3 kundan uzoq tanaffus qilmang. Muntazamlik tezlikdan muhimroq.

🚀

Yo'l-yo'riq

Siz hozirgina kirish darsini o'qib chiqdingiz. Unda kod yo'q, lekin u sizning ta'limingiz uchun poydevor qo'yadi. Iltimos, keyingi darsdan oldin quyidagi qadamlarni bajaring:

⬜

Agar hali qilmagan bo'lsangiz, Chrome brauzerini o'rnating.

⬜

Agar hali qilmagan bo'lsangiz, VS Code'ni o'rnating.

⬜

Barcha darslar uchun html-css-course papkasini yarating.

⬜

<h1>Salom!</h1> matni bilan test.html faylini yaratib ko'ring va uni brauzerda oching.

Keyingi darsda biz veb-dasturlash nima, internet qanday ishlaydi va umuman HTML nima ekanini bilib olamiz. Qiziqarli bo'ladi! Ko'rishguncha.