Web Development - HTML, CSS & JavaScript
Learn to code and become a Web Developer with HTML, CSS, JavaScript , Reactjs, Wordpress, PHP, Mern & Nodejs knowledge Managed by: @love_data
Ko'proq ko'rsatish๐ Telegram kanali Web Development - HTML, CSS & JavaScript analitikasi
Web Development - HTML, CSS & JavaScript (@javascript_courses) Ingliz til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 54 728 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 2 423-o'rinni va Hindiston mintaqasida 6 810-o'rinni egallagan.
๐ Auditoriya koโrsatkichlari va dinamika
ะฝะตะฒัะดะพะผะพ sanasidan buyon loyiha tez oโsib, 54 728 obunachiga ega boโldi.
05 Iyun, 2026 dagi oxirgi maโlumotlarga koโra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni 250 ga, soโnggi 24 soatda esa 24 ga oโzgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya oโrtacha 3.66% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 1.42% ini tashkil etuvchi reaksiyalarni toโplaydi.
- Post qamrovi: Har bir post oโrtacha 2 004 marta koโriladi; birinchi sutkada odatda 776 ta koโrish yigโiladi.
- Reaksiyalar va oโzaro taโsir: Auditoriya faol: har bir postga oโrtacha 5 ta reaksiya keladi.
- Tematik yoโnalishlar: Kontent javascript, css, object, html, array kabi asosiy mavzularga jamlangan.
๐ Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida taโriflaydi:
โLearn to code and become a Web Developer with HTML, CSS, JavaScript , Reactjs, Wordpress, PHP, Mern & Nodejs knowledge
Managed by: @love_dataโ
Yuqori yangilanish chastotasi (oxirgi maโlumot 06 Iyun, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli boโlib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim taโsir nuqtasiga aylantirishini koโrsatadi.
function Welcome() {
return <h1>Hello, React!</h1>;
}
๐ง Props โ Pass data to components
function Greet(props) {
return <h2>Hello, {props.name}!</h2>;
}
<Greet name="Riya" />
๐ก State โ Store and manage data in a component
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Add</button>
</>
);
}
3๏ธโฃ Hooks
useState โ Manage local state
useEffect โ Run side effects (like API calls, DOM updates)
import { useEffect } from 'react';
useEffect(() => {
console.log("Component mounted");
}, []);
4๏ธโฃ JSX
JSX lets you write HTML inside JS.
const element = <h1>Hello World</h1>;
5๏ธโฃ Conditional Rendering
{isLoggedIn ? <Dashboard /> : <Login />}
6๏ธโฃ Lists and Keys
const items = ["Apple", "Banana"];
items.map((item, index) => <li key={index}>{item}</li>);
7๏ธโฃ Event Handling
<button onClick={handleClick}>Click Me</button>
8๏ธโฃ Form Handling
<input value={name} onChange={(e) => setName(e.target.value)} />
9๏ธโฃ React Router (Bonus)
To handle multiple pages
npm install react-router-dom
import { BrowserRouter, Route, Routes } from 'react-router-dom';
๐ Practice Tasks
โ
Build a counter
โ
Make a TODO app using state
โ
Fetch and display API data
โ
Try routing between 2 pages
๐ฌ Tap โค๏ธ for more<form id="form">
<input type="text" id="username">
<button>Submit</button>
</form>
JavaScript
const form = document.getElementById("form");
form.addEventListener("submit", (e) => {
const username = document.getElementById("username").value;
if (username === "") {
e.preventDefault();
alert("Username is required");
}
});
โ๏ธ Stops submission if empty
๐ง Email Validation Example
Check using pattern.
const email = document.getElementById("email").value;
if (!email.includes("@")) {
alert("Enter valid email");
}
Real projects use regular expressions.
๐ Password Length Validation
if (password.length < 6) {
alert("Password must be at least 6 characters");
}
๐จ Show Error Message in UI (Better Practice)
HTML
<input type="text" id="username">
<p id="error"></p>
JavaScript
if (username === "") {
error.textContent = "Username required";
}
โ๏ธ Better than alert
โ๏ธ User-friendly
โ ๏ธ Common Beginner Mistakes
โข Forgetting preventDefault()
โข Using only alerts
โข No user feedback
โข Weak validation rules
โ
Best Practices
โข Validate on both client and server
โข Show clear error messages
โข Use simple rules first
โข Give instant feedback
๐งช Mini Practice Task
โข Validate username is not empty
โข Check email contains @
โข Ensure password length โฅ 6
โข Show error message on screen
โ
Mini Practice Task Solution โ Try it yourself first
This solution covers all 4 tasks:
โ Username not empty
โ Email contains @
โ Password length โฅ 6
โ Show error message on screen
๐ HTML
<form id="form">
<input type="text" id="username" placeholder="Enter username">
<input type="text" id="email" placeholder="Enter email">
<input type="password" id="password" placeholder="Enter password">
<p id="error" style="color: red;"></p>
<button type="submit">Submit</button>
</form>
โก JavaScript
const form = document.getElementById("form");
const error = document.getElementById("error");
form.addEventListener("submit", (e) => {
const username = document.getElementById("username").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value.trim();
error.textContent = ""; // clear previous errors
// Username validation
if (username === "") {
e.preventDefault();
error.textContent = "Username is required";
return;
}
// Email validation
if (!email.includes("@")) {
e.preventDefault();
error.textContent = "Enter a valid email";
return;
}
// Password validation
if (password.length < 6) {
e.preventDefault();
error.textContent = "Password must be at least 6 characters";
return;
}
});
โ
What this code does
โข Stops form submission if input is invalid
โข Shows error message on screen
โข Validates step by step
โข Clears old errors automatically
๐ง Key Learning
โข Use preventDefault() to stop submission
โข Use .trim() to remove extra spaces
โข Show errors in UI instead of alerts
โข Validate fields one by one
Double Tap โฅ๏ธ For More
Endi mavjud! Telegram Tadqiqoti 2025 โ yilning asosiy insaytlari 
