JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#HTML #CSS #Tavsif
Balandlikka nisbatan norma holatga keladi

🔗 t.me/absJavaScript

👍2⚡1❤‍🔥1🏆1🆒1

31 viewsツ, edited 17:52

margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;

#HTML #CSS #Tavsif #Margin
Margin ramka tashqarisidan boʻshliq qoʻshib beradi ahamiyat bergan boʻlsangiz barcha saytlar oʻrtada joylashgan. Ularning ramkasiga

margin-left: auto;
margin-right: auto;
}

berilgan boʻladi. Bular faqat ularga "width" berilganda ishlaydi yani ↔️ kenglik.

🔗 t.me/absJavaScript

❤‍🔥1⚡1👍1🔥1🏆1🆒1

37 viewsツ, edited 17:56

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;

#HTML #CSS #Tavsif #Padding
Padding esa ichidan
yani
padding-left: 15px; chapdan oʻngga
padding-right: 15px; oʻng tomonidan chapga
padding-top: 15px; tepasidan boshlab elemntgacha
padding-bottom: 15px; pastidan elemntgacha

🔗 t.me/absJavaScript

❤‍🔥1⚡1👍1🔥1🏆1🆒1

39 viewsツ, edited 17:58

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#HTML #CSS #Tavsif #Padding

🔗 t.me/absJavaScript

👍2⚡1❤‍🔥1🏆1🆒1

35 viewsツ, edited 06:55

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

(Foydali boʻlsa reaksiya goo)

🔗 @absJavaScript

❤‍🔥2🔥2🆒2❤1👍1🤩1

112 viewsedited 13:23

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#challenge #HTML #CSS #JS
Nima chiqdi? Comment goo…

✅ HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="orange" class="box"></div>
    <div id="green" class="box"></div>
    <div id="blue" class="box"></div>
    <div id="red" class="box"></div>
    <div id="yellow" class="box"></div>
    <script src="./app.js"></script>
</body>

</html>

✅ CSS:

body {
    display: flex;
    gap: 50px;
}

.box {
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.box:nth-child(1) {
    background-color: orange;
    border-radius: 100%;
}

.box:nth-child(2) {
    background-color: green;
    border-radius: 100%;
}

.box:nth-child(3) {
    background-color: blue;
    border-radius: 100%;
}

.box:nth-child(4) {
    background-color: red;
    border-radius: 100%;
}

.box:nth-child(5) {
    background-color: yellow;
    border-radius: 100%;
}

✅ JS:

let box = document.querySelectorAll('.box')
let body = document.querySelector('body')

for (let i = 0; i < box.length; i++) {
    box[i].addEventListener('click', function () {
        body.style.background = box[i].id
    })
}

⚡️JavaScript

💫 Hoziroq obuna bo'ling va do'stlarga ham ulashib qo'ying

✅ https://t.me/absJavaScript

👍2🆒2❤‍🔥1⚡1

76 viewsedited 10:14

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#challenge #quiz #JavaScript #HTML #CSS #JS

9 ta savoldan nechtasi toʻgʻri ?🤔

⚡️JavaScript

💫 Hoziroq obuna bo'ling va do'stlarga ham ulashib qo'ying

✅ https://t.me/absJavaScript

😁2🆒2❤‍🔥1⚡1👍1

112 viewsedited 05:47

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#challenge #snow #JavaScript #absJavaScript #HTML #CSS #JS #winter

Sinab koʻringchi nima chiqar ekan 😉.

Code 👇

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>Snow</title>
</head>
<body>

<section class="section">
<div class="section-container">
<img class="section-container-img" href="https://images.app.goo.gl/8ctwMkEr5ZurDYLR6" alt="snow-icon">
<button class="print">Print</button>
</div>
</section>

</body>
</html>

*{
margin: 0;
padding: 0;
}

.section{
padding-top: 75px;
padding-bottom: 75px;
bacground-color: #2BBFFF;
}
.section-container{
margin-left: auto;
margin-right: auto;
width: 1200px;
display: flex;
justify-content: space-between;
}
.section-container-img{
width: 100px;
height: 100px;
}
.print{
padding: 10px;
color: #000;
bacground-color: #FFF;
border-radius: 8px;
border: none;
}

let btn = document.querySelector('.print');

btn.addEventListener('click', function(){
  print();
});

☃2❤‍🔥1👍1🔥1🏆1🆒1

125 viewsedited 12:21

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#JS #CSS #HTML #absJavaScript #JavaScript #Tutorial #Foydali

Frontend dasturchi bo'lish uchun , nimalarni bilishim kerak ⁉️

Asosiysi — html , css va javascript ni bilishiz kerak.

Tekinga o'rganish uchun manbalar:

Dasturlashga kirishdan oldin , qisqacha malumot:

1⃣. https://www.youtube.com/watch?v=WXDDLyTI2Dk
2⃣. https://www.youtube.com/watch?v=KcJESju6KDs

HTML ni o'rganish uchun:

html ( boshlang'ich ) — https://www.youtube.com/watch?v=xcGtfYUfDLo&list=PLHNaMQIyrDHOZhHnc2UdQEOHrb1xM7HaF
html ( yuqori ) — https://www.youtube.com/watch?v=OdkbJgQUrZ0&list=PLXJSt32YUa4V2XJRrR2tkJTf_MPsiY32m&index=18

CSS ni o'rganish uchun:

1⃣. https://www.youtube.com/watch?v=cUz7lqCNn1A&list=PLXJSt32YUa4U3kviEXBjQ9MJud0Xi-8P8

( 9 ta darsni tugating )

2⃣. https://www.youtube.com/watch?v=Zn5uwsNdTjE&list=PLXJSt32YUa4XbOFdKE8uwCbccpD-nGaPL&index=5

( 25 ta darsni tugatish )

CSS da amalyot qilish uchun:

1⃣. https://www.youtube.com/watch?v=al4u2WER84Q
2⃣. https://www.youtube.com/watch?v=jWW18aIECWg&t=12s
3⃣. https://www.youtube.com/watch?v=hJTcMmWB888&t=2s

javascript ni o'rganish uchun:

1⃣. https://www.youtube.com/watch?v=zJuDsji3IbE&list=PLNS3PujVHR-ay0HpqbsPWccgEhJZk6K9u

(to'liq tugatish)

2⃣. https://youtu.be/CdlPHoTmZqU?si=0bnqscbKBzUOaYC3
3⃣. https://youtu.be/Q3tFsK9B6S4?si=C_vFkCNG6CI6ShHH
4⃣. https://youtu.be/lvHCgNKvODs?si=3piXfbdjmP41PUIy

⚡️JavaScript

💫 Hoziroq obuna bo'ling va do'stlarga ham ulashib qo'ying

✅ https://t.me/absJavaScript

❤‍🔥1☃1👍1🔥1🏆1🆒1

153 viewsedited 12:33

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#JavaScript #Dasturlash #WebDasturlash #Frontend #HTML #CSS #JS #Programmer #CodingLife #WebDevelopment #absJavaScript

1. JavaScript nima? Nega uni o‘rganish kerak?

ℹ️ JavaScript (JS) – bu veb-saytlar, dasturlar va hatto serverlarni yaratishda ishlatiladigan kuchli dasturlash tili.

🔴 JS Nimaga Kerak?

~~✅ Dinamik veb-sahifalar yaratish~~
~~✅ Tugmalar, animatsiyalar, modal oynalar qo‘shish~~
~~✅ Ma'lumotlarni qayta ishlash va API'lar bilan ishlash~~

🔴 Dastlabki "JS" kodingiz

Quyidagi kod ekranga "Salom, JavaScript!" deb chiqaradi:

console.log("Salom, JavaScript!");

Bu kodni browserning console oynasida yoki Node.js muhiti orqali ishlatishingiz mumkin!

❓Savol: "JavaScript" qaysi sohalarda ishlatiladi? Kommentda fikr qoldiring!

⏭ Keyingi postda "JavaScriptni qanday ishlatamiz?" yoritiladi.

🔗 @absJavaScript | #JaSc@absJavaScript

👍2🔥2❤‍🔥1⚡1

58 viewsedited 15:30

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#HTML #CSS #JS #absJavaScript

3. HTML, CSS va JavaScript –
ularning farqi nima?

ℹ️ Agar veb-dasturlashni o‘rganmoqchi bo‘lsangiz, uchta asosiy texnologiyani bilishingiz kerak:

🟠 HTML – Tuzilma (Structure)

HTML (HyperText Markup Language) – bu veb-sahifaning asosiy skeleti. U matnlar, rasmlar, tugmalar va boshqa elementlarni joylashtirish uchun ishlatiladi.

Misol:

<h1>Bu sarlavha</h1>
<p>Bu oddiy matn.</p>

🟠 CSS – Dizayn (Style)

CSS (Cascading Style Sheets) – veb-sahifalarga go‘zallik beradi. Rang, shrift, joylashuv kabi xususiyatlarni belgilaydi.

Misol:

h1 {
  color: blue;
  font-size: 24px;
}

🟠 JavaScript – Interaktivlik (Interaction)

JavaScript – bu veb-sahifaga jon beradi. Tugmalar, modal oynalar, animatsiyalar yaratish va ma’lumotlarni qayta ishlash uchun ishlatiladi.

Misol:

document.querySelector("h1").style.color = "red";

📌 HTML – skelet, CSS – bezak, JavaScript – harakat!

⏮ Oldingi postda "JavaScriptni qanday ishlatamiz?" yoritilgan.
⏭ Keyingi postda "HTML asoslari - dastlabki sahifamiz." yoritiladi.

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥2🔥2👍1

74 viewsedited 03:04

About

Blog

Apps

Platform