Frontend Dasturlash Qo'llanmasi

HTML — sahifa skeleti

HTML (HyperText Markup Language) — veb-sahifaning tuzilmasini belgilaydi. Xuddi binoning g'isht-poydevori kabi.

Birinchi HTML fayl Boshlang'ich ▼

Har bir HTML fayl bir xil tuzilmadan boshlanadi. Bu sahifaning "skeleti" hisoblanadi.

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Mening sahifam</title>
  </head>
  <body>
    <h1>Salom dunyo!</h1>
    <p>Bu mening birinchi sahifam.</p>
  </body>
</html>

NATIJA

Salom dunyo!

Bu mening birinchi sahifam.

💡 Eslab qoling: Teglar juft bo'ladi — ochiladi va yopiladi. <h1> ochiladi, </h1> yopiladi.

Asosiy teglar Boshlang'ich ▼

HTML'da ko'p xil teglar bor. Eng ko'p ishlatiladigan teglar bilan tanishamiz.

<!-- Sarlavhalar -->
<h1>Eng katta sarlavha</h1>
<h2>Kichikroq sarlavha</h2>
<h3>Yanada kichik</h3>

<!-- Matn -->
<p>Oddiy paragraf matni.</p>
<strong>Qalin matn</strong>
<em>Qiyshiq matn</em>

<!-- Havola va rasm -->
<a href="https://google.com">Google</a>
<img src="rasm.jpg" alt="Rasm tavsifi">

<!-- Ro'yxat -->
<ul>
  <li>Birinchi element</li>
  <li>Ikkinchi element</li>
</ul>

<!-- Tartibli ro'yxat -->
<ol>
  <li>HTML o'rganish</li>
  <li>CSS o'rganish</li>
  <li>JS o'rganish</li>
</ol>

💡 <img> va <br> teglari yopilmaydi — ular "yolg'iz" teglar.

div va semantik teglar Boshlang'ich ▼

<div> — blok konteyner. Elementlarni guruhlash uchun ishlatiladi. Semantik teglar esa ma'no beradi.

<!-- div — universal konteyner -->
<div class="quti">
  <p>Ichidagi matn</p>
</div>

<!-- Semantik teglar (ma'noli) -->
<header>Sayt boshi (logo, menyu)</header>
<nav>Navigatsiya menyusi</nav>
<main>Asosiy kontent</main>
<section>Bo'lim</section>
<article>Maqola yoki post</article>
<footer>Sayt pastki qismi</footer>

💡 class atributi orqali CSS da teg ga stil berasiz. Bir xil classdagi barcha elementlarga bir xil stil beriladi.

Formalar — input, button Boshlang'ich ▼

Formalar foydalanuvchidan ma'lumot olish uchun ishlatiladi — login, ro'yxatdan o'tish, izlash.

<form>
  <!-- Matn kiritish -->
  <label>Ism:</label>
  <input type="text" placeholder="Ismingiz">

  <!-- Email -->
  <input type="email" placeholder="Email">

  <!-- Parol -->
  <input type="password" placeholder="Parol">

  <!-- Tugma -->
  <button type="submit">Yuborish</button>
</form>

CSS — ko'rinish va bezak

CSS (Cascading Style Sheets) — HTML elementlarga rang, o'lcham, joylashuv beradi. Kiyim kabi!

CSS yozish usullari Boshlang'ich ▼

CSS'ni 3 xil usulda yozsa bo'ladi. Eng yaxshi usul — alohida .css fayl.

/* 1. Alohida fayl (ENG YAXSHI) */
/* style.css faylida yozing */
h1 {
  color: blue;
  font-size: 32px;
}

/* HTML da ulash: */
<link rel="stylesheet" href="style.css">

/* 2. style tegi ichida (oddiy) */
<style>
  p { color: red; }
</style>

/* 3. To'g'ridan-to'g'ri (kam ishlating) */
<p style="color: green;">Yashil matn</p>

Selektorlar — nimaga stil berish Boshlang'ich ▼

Selektor — qaysi HTML elementga stil berish kerakligini ko'rsatadi.

/* Teg selektori — barcha h1 lar */
h1 { color: navy; }

/* Class selektori — class="kartochka" */
.kartochka { background: #fff; }

/* ID selektori — id="bosh" */
#bosh { font-size: 24px; }

/* Bir nechta selektor */
h1, h2, h3 { font-weight: bold; }

/* Ichki element */
.karta p { color: #666; }

💡 Class selektori (.) eng ko'p ishlatiladi. ID (#) faqat bir marta ishlatiladigan elementlar uchun.

Rang, shrift, o'lcham Boshlang'ich ▼

Eng ko'p ishlatiladigan CSS xususiyatlari.

.karta {
  /* Ranglar */
  color: #333333;           /* matn rangi */
  background-color: #f5f5f5; /* fon rangi */

  /* Shrift */
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;

  /* O'lcham */
  width: 300px;
  height: 200px;

  /* Bo'shliq */
  padding: 20px;    /* ichki bo'shliq */
  margin: 10px;     /* tashqi bo'shliq */

  /* Chegara */
  border: 1px solid #ccc;
  border-radius: 8px;  /* yumaloq burchak */
}

NATIJA

Bu karta style bilan

Flexbox — joylashuv Boshlang'ich ▼

Flexbox elementlarni gorizontal yoki vertikal joylashtirishning eng qulay usuli.

.konteyner {
  display: flex;
  gap: 16px;               /* elementlar oraliq */
  justify-content: center;  /* gorizontal markaz */
  align-items: center;     /* vertikal markaz */
  flex-wrap: wrap;          /* qatorga o'tish */
}

.quti {
  flex: 1;               /* teng kenglik */
  background: #4f46e5;
  color: white;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}

NATIJA

Quti 1

Quti 2

Quti 3

Hover va tranzitsiya effektlari Boshlang'ich ▼

Sichqoncha ustiga kelganda o'zgarish — tugmalar, kartalar uchun juda foydali.

.tugma {
  background: #4f46e5;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s; /* silliq o'tish */
}

.tugma:hover {  /* ustiga kelganda */
  background: #3730a3;
  transform: scale(1.05); /* biroz kattalashtir */
}

SINAB KO'RING

JavaScript — harakat va mantiq

JavaScript sahifani "tirik" qiladi. Tugma bosilganda nima bo'lishini, ma'lumotlarni JS hal qiladi.

O'zgaruvchilar va ma'lumot turlari Boshlang'ich ▼

O'zgaruvchi — ma'lumotni saqlash uchun idish. let o'zgaradi, const o'zgarmaydi.

// Matn (String)
let ism = "Alisher";
let shahar = 'Toshkent';

// Son (Number)
let yosh = 20;
let narx = 150000.50;

// Mantiqiy (Boolean)
let talaba = true;
let ishchi = false;

// O'zgarmas
const PI = 3.14159;

// Konsolga chiqarish (F12 → Console)
console.log(ism);    // Alisher
console.log(yosh);   // 20
console.log(talaba); // true

💡 Brauzerda F12 bosing → Console tabiga o'ting — JS kodini sinab ko'ring!

Shartlar — if / else Boshlang'ich ▼

Shart bo'yicha turli kod ishga tushirish — dasturlashning asosi.

let ball = 75;

if (ball >= 90) {
  console.log("A'lo!");
} else if (ball >= 70) {
  console.log("Yaxshi");   // bu chiqadi
} else if (ball >= 55) {
  console.log("Qoniqarli");
} else {
  console.log("Qayta o'qing");
}

// Taqqoslash operatorlari:
// ===  teng
// !==  teng emas
// >    katta
// <    kichik
// >=   katta yoki teng

Sikllar — for, while Boshlang'ich ▼

Bir necha marta takrorlanadigan ishlar uchun sikl ishlatiladi.

// for sikli
for (let i = 1; i <= 5; i++) {
  console.log(i); // 1, 2, 3, 4, 5
}

// Massiv (ro'yxat) ustida
let mevalar = ["olma", "nok", "uzum"];

for (let meva of mevalar) {
  console.log(meva); // olma, nok, uzum
}

// while sikli
let son = 0;
while (son < 3) {
  console.log(son);
  son++;
}

Funksiyalar Boshlang'ich ▼

Funksiya — bir necha marta ishlatiladigan kod bloki. Bir marta yoz, ko'p marta chaqir.

// Funksiya yaratish
function salomlash(ism) {
  return "Salom, " + ism + "!";
}

// Chaqirish
let javob = salomlash("Dilnoza");
console.log(javob); // Salom, Dilnoza!

// Arrow funksiya (qisqaroq yozuv)
const kvadrat = (n) => n * n;

console.log(kvadrat(5));  // 25
console.log(kvadrat(10)); // 100

DOM — HTML boshqarish Boshlang'ich ▼

DOM orqali JS HTML elementlarni topib, o'zgartira oladi. Bu frontendning yuragi!

// Element topish
let sarlavha = document.getElementById("bosh");
let tugmalar = document.querySelectorAll(".tugma");

// Matnni o'zgartirish
sarlavha.textContent = "Yangi sarlavha!";

// Stilni o'zgartirish
sarlavha.style.color = "red";
sarlavha.style.fontSize = "28px";

// Class qo'shish / olib tashlash
sarlavha.classList.add("faol");
sarlavha.classList.remove("yashirin");

// Hodisa (tugma bosilganda)
let btn = document.getElementById("tugma");
btn.addEventListener("click", function() {
  console.log("Tugma bosildi!");
});

INTERAKTIV SINOV

Eski matn

Kichik loyiha — Kalkulyator

HTML + CSS + JS uchala texnologiyani birlashtirgan to'liq misol. Har bir qismni tushunishga harakat qiling.

★

To'liq loyiha kodi va jonli demo ▼

<!-- HTML -->
<div class="kalkulator">
  <h2>Hisoblash</h2>
  <input type="number" id="son1" placeholder="1-son">
  <input type="number" id="son2" placeholder="2-son">
  <div class="tugmalar">
    <button onclick="hisobla('+')">+</button>
    <button onclick="hisobla('-')">−</button>
    <button onclick="hisobla('*')">×</button>
    <button onclick="hisobla('/')">÷</button>
  </div>
  <p id="natija"></p>
</div>

/* CSS */
.kalkulator {
  max-width: 300px; padding: 24px;
  border: 1px solid #e0e0e0; border-radius: 12px;
}
input { width: 100%; padding: 10px; margin: 8px 0; }
.tugmalar { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }

// JavaScript
function hisobla(amal) {
  let a = Number(document.getElementById("son1").value);
  let b = Number(document.getElementById("son2").value);
  let jami;
  if (amal === '+') jami = a + b;
  else if (amal === '-') jami = a - b;
  else if (amal === '*') jami = a * b;
  else if (amal === '/') jami = b !== 0 ? a / b : "0 ga bo'lmaydi";
  document.getElementById("natija").textContent = "= " + jami;
}

JONLI DEMO

Hisoblash

Keyingi o'rganish yo'li

📦

Git & GitHub

Kodingizni saqlash va ulashish

⚛️

React.js

Murakkab UI uchun kutubxona

🗄️

Backend

Node.js, server, DB