DEV Community: Miss_code_creaker

JavaScript nima?

Miss_code_creaker — Tue, 17 Jun 2025 05:54:07 +0000

JavaScript — 1995-yilda Brendan Eich tomonidan Netscape kompaniyasida yaratilgan dasturlash tilidir. U dastlab "Mocha" nomi bilan tanilgan, ammo bu nom bilan til mashhurlikka erisha olmagan. Shundan so‘ng nomi "LiveScript" deb o‘zgartiriladi, ammo baribir keng ommaga yoqmaydi.

Oradan ko‘p o‘tmay, Netscape kompaniyasi Sun Microsystems bilan hamkorlikda til nomini JavaScript deb o‘zgartiradi. Nega aynan shunday nom? Chunki o‘sha paytda Java dasturlash tili juda mashhur edi. Shu sababli yangi tilga “Java” bilan bog‘liq nom berish marketing jihatdan foydali deb topilgan. Natijada, Java bilan umuman aloqasi bo‘lmagan bo‘lsa-da, “JavaScript” nomi ommalashib ketdi.

JavaScript nomi bilan bu til 1996-yilda Netscape Navigator 2 brauzeri orqali ommaga taqdim etiladi va tezda mashhur bo‘lib ketadi.

JavaScript’ni o‘rganish osonmi?
Ha, JavaScript’ni o‘rganish nisbatan oson, ayniqsa boshqa dasturlash tillariga qaraganda. Lekin u ham o‘ziga xos murakkabliklarga ega. Asosiy tushunchalarni o‘zlashtirib olsangiz, keyingi bosqichlar ancha yengil kechadi.

Kutubxona (Library) va Framework nima?
Keling, sodda misol bilan tushuntiramiz:

Tasavvur qiling, sizda bir uzumzor bor va 10 metr narida ariq oqib turibdi. Siz bog‘ingizni sug‘ormoqchisiz:

Agar siz qo‘lingiz bilan suv olib sug‘orsangiz, bu oddiy JavaScript.

Agar paqir (chelak) ishlatsangiz — bu kutubxona (library) hisoblanadi.

Agar esa siz motorli shlang o‘rnatib, avtomatik sug‘orsangiz — bu framework bo‘ladi.

Ya’ni kutubxona — bu sizga yordam beradigan kichikroq vosita,
Framework esa — sizga ko‘p ishlarni avtomatik bajartiradigan yirik tuzilma.

JavaScriptda mashhur kutubxonalar va frameworklar
Kutubxonalar:
– jQuery
– Axios
– Chart.js

Frameworklar:
– React
– Angular
– Vue.js
– Next.js
– Node.js (backend uchun)

JavaScript nega mashhur?
JavaScript dastlab faqat frontend — ya’ni brauzerda ishlaydigan kodlar uchun mo‘ljallangan edi.
Lekin hozirda u Node.js yordamida backend (server tomoni)da ham ishlatilmoqda.
Bu esa JavaScript’ni to‘liq universal tilga aylantirdi.

2024-yilgi statistikaga ko‘ra, JavaScript hali ham dunyo bo‘yicha eng ko‘p ishlatiladigan dasturlash tili bo‘lib turibdi — 67.8% dasturchilar undan foydalanadi (StackOverflow Developer Survey 2023).

JavaScript — hozirgi web-dasturlash dunyosining yuragi.
U oddiydan murakkabgacha bo‘lgan ilovalarni yaratishda eng ko‘p qo‘llaniladi.
Uni o‘rganish orqali siz frontend, backend va hatto mobil ilovalar yaratishga ham qadam qo‘yishingiz mumkin.

🎉 1 yillik saboq va yangi boshlanish

Miss_code_creaker — Mon, 16 Jun 2025 05:54:37 +0000

Hademay, bu platformada — ya’ni Dev.to da ro‘yxatdan o‘tganimga va dasturlashga kirib kelganimga 1 yil to‘ladi.
Bu vaqt ichida ko‘p narsa o‘rganildi, ba’zilarini yozdim, ba’zilarini ichimda saqladim. Ammo shu yerda maqola yozishni maslahat bergan ustozimga alohida minnatdorchilik bildiraman: yozgan bilimlarim miyyamda uzoqroq turibdi.

Orada yozishdan tanaffus qilib qo‘ydim. Albatta, bu tanaffus natijasiz bo‘lmadi — bilimlarim ozgina orqaga ketdi. Lekin endi yana yozishni boshlamoqchiman.

Postlarim asosan dasturlash haqidagi tajriba, tushuncha va amaliy misollar asosida bo‘ladi. Ha, bu yerda aksariyat postlar ingliz tilida yoziladi, lekin men o‘zbek tilida yozishni ham davom ettirmoqchiman. Chunki dasturlashni o‘rganmoqchi bo‘lgan haqiqiy o‘zbek o‘quvchilar ham bu postlardan foydalanishini istayman.

Kim o‘qiydi — bu muhim emas. Muhimi:

Bu postlar menga ham, men kabi haqiqiy o‘rganishni istagan do‘stlarimizga ham foydali bo‘lsin.
O‘rganishni tezlashtirsin. Amaliyotda esa ishni osonlashtirsin.

Agar siz ham hali yo‘l boshidasiz, lekin niyatingiz qat’iy bo‘lsa — siz yolg‘iz emassiz.
Yozamiz. O‘rganamiz. Ulashamiz. 💻✨

task

Miss_code_creaker — Sat, 05 Oct 2024 08:13:36 +0000

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task-1</title>
    <link rel="stylesheet" href="./style/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <nav class="navbar-container">
        <div class="nav-left">
          <img src="./images/icon/najot-ta'lim logo.svg" alt="logo" />
        </div>
        <div class="nav-right">
          <ul class="nav-links">
            <li><a href="#">Kurslar</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
          <button class="nav-btn">Kirish</button>
        </div>
      </nav>

      <section class="hero container">
        <div class="text">
          <h1>
            Kasblarni <br />
            <strong>“Najot Ta’lim”</strong>da <br />
            o‘rganing
          </h1>
          <h4>
            O‘zingizga qulay vaqtda, joyda va uslubda <br />zamonaviy kasblarni
            o‘rganing.
          </h4>
          <button>Kurslarni ko‘rish</button>
        </div>

        <div class="photo-container">
          <img src="./images/Students male.png" alt="students" />
          <div class="background"></div>
        </div>
      </section>
    </header>

    <!-------------main section----------->
    <main>
      <section id="about">

        <div class="about-top">

          <h2>Bizning afzalliklarimiz</h2>
        </div>

        <div class="about-wrapper">
          <div class="about-card">
            <div class="content">
              <img src="./images/icon/icon1.svg" alt="icon" />
              <div class="about-text">
                <h4>Onlayn akademiya</h4>
                <p>
                  «Najot Ta’lim» digital academy — bu zamonaviy kasblar
                  o‘qitiladigan onlayn 
                  akademiya. Qayerda bo‘lishingizdan qat’i nazar: uydami yo
                  mehmonda, 
                  daladami yo safarda — o‘zingizga qulay tarzda va vaqtda bilim
                  olishingiz 
                  mumkin, internet va noutbuk bo‘lsa bas.
                </p>
              </div>
            </div>
          </div>
            <div class="about-card">
              <div class="content">
                <img src="./images/icon/icon3.svg" alt="icon" />
                <div class="about-text">
                  <h4>O‘z ishining ustalari</h4>
                  <p>
                    Darslar katta tajribaga ega malakali mutaxassislar tomonidan
                    tayyorlangan. O‘z ishining ustalaridan yanada ishonchli
                    bilim va tajribaga ega bo’lasiz
                  </p>
                </div>
              </div>
            </div>
              <div class="about-card">
                <div class="content">
                  <img src="./images/icon/icon2.svg" alt="icon" />
                  <div class="about-text">
                    <h4>Shunchaki kurs emas</h4>
                    <p>
                      Har bir o‘quv kursi shunday ishlab chiqilganki, ularni
                      muvaffaqiyatli 
                      yakunlab, siz zamonaviy kasb egasiga aylanishingiz va shu sohada
                      o‘z 
                      faoliyatingizni boshlashingiz mumkin. Hammasi o‘z qo‘lingizda.
                    </p>
                  </div>
                </div>
              </div>

                <div class="about-card">
                  <div class="content">
                    <img src="./images/icon/icon4.svg" alt="icon" />
                    <div class="about-text">
                      <h4>Interaktiv darslar</h4>
                      <p>
                        Darslarni o‘zlashtirish davrida sizda savollar tug‘ilishi tabiiy
                        holat. Mentorlarga murojaat qilishingiz, o’zgizni
                        qiziqtirgan savollarizga javob olishingiz va tavsiyalar
                        olishingiz mumkin
                      </p>
                    </div>
                  </div>
                </div>
              </div>


          <div class="icon-container">
            <span class="icon-text">Ko‘proq</span>
             <img src="./images/icon/ko'proq icon.png" alt="icon" />
          </div>
        </div>
      </section>



      <section id="process">
        <div class="container">
          <div class="wrapper">
            <div class="left">
              <h1>Yo‘nalishlar bo‘yicha kurslar</h1>
              <p>Zamonaviy sohalardan birini o‘rganing va talabgir kasb egasi bo‘ling!</p>
            </div>
          </div>
        </div>

        <div class="process_wrapper">
          <div class="process_card">
            <div class="content">
              <strong>Foundation dasturlash</strong>
              <p>Akbarshox Sattorov</p>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <strong>Grafik dizayn bootcamp</strong>
              <p>Dilshodbek Ismoilov</p>
            </div>
          </div>


          <div class="process_card">
            <div class="content">
              <strong>.NET asoslari</strong>
              <p>Farxod Dadajanov</p>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <strong>DevOps asoslari</strong>
              <p>Azimjon</p>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <strong>Foundation dizayn</strong>
              <p>Dilshodbek Ismoilov</p>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <strong>Kopirayting</strong>
              <p>Abduazim Rustamxo’jayev</p>
            </div>
          </div>


          <div class="process_card">
            <div class="content">
              <strong>Java asoslari</strong>
              <p>Shaxriyor Ergashev</p>
            </div>
          </div>


          <div class="process_card">
            <div class="content">
              <strong>Moushn dizayn</strong>
              <p>Shavkat Abduxalilov</p>
            </div>
          </div>
        </div>

          <div class="icon-container">
          <span>Barcha kurslarni ko‘rish</span>
          </div>
        </div>
    </section>

<!-- ----- Task - 2--------- -->

      <section id="work">

      <div class="work-container">
        <div class="wrapper">
          <div class="left">
            <h1>Bitiruvchilarimizning ish joylari:</h1>
            <p>Eng yaxshi bitiruvchilarimiz nufuzli tashkilot va kompaniyalarda faoliyat yuritadi. Zamonaviy kasb egalariga doim va har yerda talab yuqori bo‘ladi.</p>
          </div>
        </div>
      </div>


      <div class="work_wrapper">

        <div class="work_card">
          <img src="./images/icon-02/Epam01.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/itechart02.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/humo03.png" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/agrobank04.png" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Davr bank05.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Texnomart06.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Soliq07.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/uzcard08.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/my-taxi09.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Mfactor10.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Jafton11.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Fido.studio12.png" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Osmandagi bolalar13.png" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Islom.uz14.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Cnew15.svg" alt="logo">
        </div>
      </div>
    </section>


      <section id="comment">
        <div class="container">
          <div class="wrapper">
            <div class="left">
              <h1>Bitiruvchilarimizdan izohlar</h1>
              <p>Oʻquv kurslarimiz, ustozlar, qoʻlga kiritilgan bilim va koʻnikmalar, olingan natijalar haqida bitiruvchilarimizdan eshiting hamda ulardan kerakli tavsiyalar oling.</p>
            </div>
          </div>
        </div>

        <div class="comment container">
          <div class="comment_card">
            <button class="video_play">
              <img src="./images/icon-02/icon-pause.svg" alt="icon">
              <p>Video ko’rish</p>
            </button>
            <div class="text">
              <ul>
                <li>20.09.2022</li>
                <li>Grafik dizayner</li>
                <li>Sardor Abrorov</li>
              </ul>
            </div>
          </div>

          <div class="comment_card_play">
            <button class="video_play">
              <img src="./images/icon-02/icon-play.svg" alt="icon">
              <p>Video ko’rish</p>
            </button>
            <div class="text">
              <ul>
                <li>20.09.2022</li>
                <li>Grafik dizayner</li>
                <li>Maqsud Azimov</li>
              </ul>
            </div>
          </div>

          <div class="comment_card">
            <button class="video_play">
              <img src="./images/icon-02/icon-pause.svg" alt="icon">
              <p>Video ko’rish</p>
            </button>
            <div class="text">
              <ul>
                <li>20.09.2022</li>
                <li>Grafik dizayner</li>
                <li>Sardor Abrorov</li>
              </ul>
            </div>
          </div>

          <div class="comment_card">
            <button class="video_play">
              <img src="./images/icon-02/icon-pause.svg" alt="icon">
              <p>Video ko’rish</p>
            </button>
            <div class="text">
              <ul>
                <li>20.09.2022</li>
                <li>Grafik dizayner</li>
                <li>Sardor Abrorov</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="send">
          <img src="./images/icon-02/back_btn01.svg" alt="back">
          <p>1/4</p>
          <img src="./images/icon-02/btn02.svg" alt="send">
        </div>
      </section>


      <section class="block-f container">

        <div class="block-f_img">
          <img src="./images/Mask group.png" alt="mask group">
        </div>
        <div class="block-f_form">
          <h2>Yordam kerakmi?</h2>
          <p> <strong>FAQ</strong> boʻlimi ham sizga yordam bera olmadimi? Telefon raqamingizni yozib qoldiring, biz sizga qoʻngʻiroq qilamiz va birorta ham savolingiz javobsiz qolmasligiga harakat qilamiz.</p>
          <p>Ismingizni kiriting</p>
          <form>
            <input type="Alex(a)">
          </form>
          <p>Telefon raqamingizni kiriting</p>
          <form action="">
            <input type="text">
          </form>
          <h4>"So‘rov yuborish" tugmasini bosish orqali <strong>Platformadan foydalanish qoidalari</strong>ga rozilik bildirasiz.</h4>
          <button>So‘rov yuborish</button>
        </div>
      </section>
    </main>
  </body>
</html>

.

Miss_code_creaker — Sat, 05 Oct 2024 08:08:43 +0000

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Finsweet Agency</title>
    <!-- ------Favicon ico------- -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./public/images/favicon_io/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./public/images/favicon_io/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="./public/images/favicon_io/favicon-16x16.png"
    />
    <link rel="manifest" href="./public/images/favicon_io/site.webmanifest" />

    <!-- ---- Poppins font ----- -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />

    <!-- -------------main css-------------- -->
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!--------- header section start---------->
    <header>
      <div class="container">
        <nav>
          <a href="#">
            <img class="logo" src="./public/icons/logo.svg" alt="logo" />
          </a>

          <ul class="list">
            <li class="list-item">
              <a href="#" class="aktive-link">Home</a>
            </li>
            <li class="list-item">
              <a href="#">Service</a>
            </li>
            <li class="list-item">
              <a href="#">Company</a>
            </li>
            <li class="list-item">
              <a href="#">Careeer</a>
            </li>
            <li class="list-item">
              <a href="#">Blog</a>
            </li>
            <li class="list-item">
              <a href="#">Contact us</a>
            </li>
            <li class="list-item">
              <a href="#">Clone project</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <!--------- header section end------------>

    <!----------- main section start---------->
    <main>
      <section id="intro">
        <div class="container">
          <div class="wrapper">
            <div class="wrapper_left">
              <h1>
                Transform Your Idea <br />Into Reality with <br />Finsweet
              </h1>
              <p>
                The entire Finsweet team knows what's good with Webflow and
                <br />you can too with 1 week and a good attitude.
              </p>

              <button>Request Quote</button>
            </div>
            <div class="wrapper_right">
              <img src="./public/images/intro_image.jpg" alt="image" />
            </div>
          </div>
        </div>
      </section>
    </main>
    <!----------- main section end------------>

    <!------------About section start-------->
    <section id="about">
      <div class="container">
        <div class="about_header">
          <div class="left">
            <p>ABOUT US</p>
            <h1>
              The company leads entire <br />
              webdesign process from <br />concept to delivery.
            </h1>
          </div>

          <div class="rihgt">
            <h1>The Era Of Technology.</h1>
            <p>
              Through True Rich Attended does no end it his mother since real
              had
              <br />
              half every him case in packages enquire we up ecstatic unsatiable
              <br />saw his giving Remain expense you position concluded.
            </p>
          </div>
        </div>
        <div class="about_gallery">
          <img src="../public/images/About Bottom.jpg" alt="about bottom" />
        </div>
      </div>
    </section>
    <!-----------About section end----------->

    <!----------Expertise Section start----------->

    <section id="expertise">
      <div class="container">
        <div class="wrapper">
          <div class="left">
            <p><span class="expertise_title">Our expertise</span></p>
            <h1>
              We want to get local <br />identification in every <br />corner of
              the world in this <br />
              era of global citizenship
            </h1>
            <p>
              Through True Rich Attended does no end it his mother since real
              had half <br> every him case in packages enquire we up ecstatic
              unsatiable saw his giving <br>Remain expense you position concluded.
            </p>
          </div>
        </div>
  <div class="right">
        <div class="expertise_card">
          <div class="content">
            <img src="./public/icons/rocketicon.svg" alt="light" />
            <div class="text">
              <strong>On Time Delivery</strong>
              <p>
                Through True Rich Attended does no end it <br> his mother since real had half every him.
              </p>
        </div>
      </div>

      <div class="expertise_card">
        <div class="content">
          <img src="./public/icons/Home.svg" alt="light" />
          <div class="text">
            <strong>Best Quality</strong>
            <p>
              Through True Rich Attended does no end it <br>his mother since real had half every him.
            </p>
      </div>
    </div>

    <div class="expertise_card">
      <div class="content">
        <img src="./public/icons/expertise.svg" alt="light" />
        <div class="text">
          <strong>Support Assist</strong>
          <p>
            Through True Rich Attended does no end it <br> his mother since real had half every him.
          </p>
    </div>
  </div>
</div>
    </section>

    <!----------Expertise Section end----------->

    <!---------Process section start---------->
    <section id="process">
      <div class="container">
        <div class="wrapper">
          <div class="left">
            <p class="process_title">Our Process</p>
            <h1>The process we are working With Our client Worldwide</h1>
            <p>
              Through True Rich Attended does no end it his mother since real
              had half every <br />
              him case in packages enquire we up ecstatic unsatiable.
            </p>
          </div>
          <img src="./public/icons/Shape.svg" alt="shape" class="right" />
        </div>

        <div class="process_wrapper">
          <div class="process_card">
            <div class="content">
              <img src="./public/icons/lighticon.svg" alt="light" />
              <div class="text">
                <strong>Discover</strong>
                <p>
                  We aim to attain the greatest satisfaction for our clients and
                  be one of the prominent.
                </p>
              </div>
              <h2>01</h2>
            </div>
            <img src="./public/icons/line_shape.svg" alt="line" />
          </div>

          <div class="process_card">
            <div class="content">
              <img src="./public/icons/writeicon.svg" alt="light" />
              <div class="text">
                <strong>Designing</strong>
                <p>
                  We aim to attain the greatest satisfaction for our clients and
                  be one of the prominent.
                </p>
              </div>
              <h2>02</h2>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <img src="./public/icons/codeIcon.svg" alt="light" />
              <div class="text">
                <strong>Development</strong>
                <p>
                  We aim to attain the greatest satisfaction for our clients and
                  be one of the prominent.
                </p>
              </div>
              <h2>03</h2>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <img src="./public/icons/brainIcon.svg" alt="light" />
              <div class="text">
                <strong>Testing</strong>
                <p>
                  We aim to attain the greatest satisfaction for our clients and
                  be one of the prominent.
                </p>
              </div>
              <h2>04</h2>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <img src="./public/icons/rocketicon.svg" alt="light" />
              <div class="text">
                <strong>Testing</strong>
                <p>
                  We aim to attain the greatest satisfaction for our clients and
                  be one of the prominent.
                </p>
              </div>
              <h2>05</h2>
            </div>
          </div>

          <div class="process_card">
            <img src="./public/icons/line_shape.svg" alt="line" />
            <div class="content">
              <img src="./public/icons/settingicon.svg" alt="light" />
              <div class="text">
                <strong>Testing</strong>
                <p>
                  We aim to attain the greatest satisfaction for our clients and
                  be one of the prominent.
                </p>
              </div>
              <h2>06</h2>
            </div>
          </div>
          <!--------Process section end------------>
        </div>
      </div>
    </section>
  </body>
</html>

CSS Grid

Miss_code_creaker — Fri, 06 Sep 2024 14:35:31 +0000

●CSS Grid - to'rga (сетка) asoslangan layout bo'lib, float yoki position xossalari yordamisiz qatorlar va ustunlar yordamida veb sahifada layout yaratishda yordam beradi. Boshqacha qilib aytganda, veb sahifadagi elementlarni joylashtirish uchun xizmat qiladi. CSS Grid 2 asosiy elementlardan tashkil topgan: grid container va grid item.

Grid container - display xossasi uchun grid yoki inline-grid qiymatiga ega bo'ladi.

Grid items - veb sahifamizdagi grid container ota-onaga ega bo'lgan elementlar.

●"Grid container"ning ikki asosiy xossasi mavjud: •grid-template-columns -container ichidagi ustunlar soni va uni uzunligini belgilashda ishlatiladi.
•grid-template-rows - container ichidagi qatorlar balandligini belgilashda ishlatiladi

●"Grid item"ga tegishli xossalar yordamida elementni bir necha ustun va qatorlarni egallashini ko'rsatib o'tishimiz mumkin. Uning asosiy ikki xossasi mavjud:
•grid column - element nechta ustunni o'z ichiga olishini belgilab beradi.
•grid-row -element nechta qatorni o'z ichiga olishini belgilab beradi.

5-qism (oxirgi) Flexbox: flex-basis, flex va Align self

Miss_code_creaker — Fri, 06 Sep 2024 11:42:25 +0000

●Flex basis - flex item uchun boshlang'ich o'lchovni belgilab beradi.
●Flex - flex grow, flex-shrink va flex-basis uchun qisqartma (shorthand) hisoblanadi.
●Align self - flex container ichidagi ko'rsatilgan "flex item"ni joylashuvini belgilab beradi. Boshqacha qilib aytganda flex item uchun Align items xossasi hisoblanadi.
Qiymatlari:

•auto - elementimiz ota-onasining (parent) align-items xossasini meros qilib oladi

•stretch - elementimiz "flex container"ni to'ldirish uchun cho'ziladi.

•center - elementimiz kesuvchi o'qning markazida joylashadi.

•flex-start - elementimiz kesuvchi o'qning boshida joylashadi.

•flex-end - elementimiz kesuvchi o'qning oxirida joylashadi.

4-qism Flebox: order, flex-grow va flex-shrink

Miss_code_creaker — Fri, 06 Sep 2024 11:39:06 +0000

●Order - flex container ichida flex items odatiy oqimga (flow) ko'ra joylashadi, ya'ni html kodda birinchi yozilgan flex item veb sahifasida ham birinchi keladi, lekin order xossasi bu oqimni o'zgartirishi mumkin va flex items ketma-ketligini belgilab beradi.

●Flex grow - "flex item"ni kerak payti o'z o'lchovini qanday oshirishini belgilab beradi. U son ko'rinishidagi qiymat qabul qilib, bo'sh qolgan joyni qancha qismini egallashni ko'rsatib beradi. Default qiymati 0 hisoblanadi.

●Flex shrink - "flex item"ni kerak payti o'z o'lchovini qanday kichraytirishni belgilab beradi. U son ko'rinishidagi qiymat qabul qilib, joy qolmayotgan payti element qanday suratda kichrayishini belgilab beradi. Default qiymati 1 hisoblanadi.

3-qism Flexbox: align-items va align-content

Miss_code_creaker — Fri, 06 Sep 2024 11:38:05 +0000

●Align items - kesuvchi o'qi (cross axis) bo'ylab elementlarni joylashuvini belgilaydi.

Qiymatlari:

•stretch - elementlarimiz "flex container"ni to'ldirish uchun cho'ziladi.

•center - elementlarimiz kesuvchi o'qning markazida joylashadi.

•flex-start - elementlarimiz kesuvchi o'qning boshida joylashadi.

•flex-end - elementlarimiz kesuvchi o'qning oxirida joylashadi.

●Align content - kesuvchi o'q (cross axis) bo'ylab flex container liniyalarni joylashuvini belgilaydi va qo'shimcha bo'sh joyni taqsimlashga yordam beradi.

Qiymatlari:

•stretch - flex liniyalarimiz containerni to'ldirish uchun cho'ziladi.

•flex-start - flex liniyalarimiz container boshida joylashadi.

•flex-end - flex liniyalarimiz container oxirida joylashadi.

•center - flex liniyalarimiz container markazida joylashadi.

•space-between - flex liniyalarimiz container bo'yicha teng taqsimlanadi. Birinchi flex liniyamiz container boshida, oxirgi flex liniyamiz esa container oxirida joylashadi.

•space-around - flex liniyalarimiz container bo'yicha teng taqsimlanadi va har bir liniya atrofida teng masofa bo'ladi. Faqatgina birinchi, oxirgi liniya va container chegarali orasidagi masofa boshqa masofalardan farq qiladi.

•space-evenly - flex liniyalarimiz container bo'yicha teng taqsimlanadi va har bir flex liniya atrofida teng masofa bo'ladi.

2-qism Flexbox: flex-direction, flex-wrap, flex-flow va justify-content

Miss_code_creaker — Thu, 05 Sep 2024 17:28:15 +0000

●Flex direction - asosiy o'qning yo'nalishini belgilab beradi va flex items shu o'qga nisbatan joylashganligi uchun, ularning ham yo'nalishi belgilanadi.

Qiymatlari:

•row - elementlarimiz chapdan o'ngga qarab joylashadi.

•row-reverse - elementlarimiz o'ngdan chapga qarab joylashadi.

•column - elementlarimiz tepadan pastga qarab joylashadi.

•column-reverse - elementlarimiz pastdan telaga qarab joylashadi

●Flex wrap - odatda flex elementlarimiz bitta liniyada joylashadi lekin flex wrap yordamida bu holatni o'zgartirish mumkin.

Qiymatlari:

•nowrap - hamma flex elementlar bitta liniyada joylashadi.

•wrap - elementlar tepadan pastga bir necha liniyaga bo'linib joylashadi.

•wrap-reverse - elementlar pastdan tepaga bir necha liniyaga bo'linib joylashadi.

●Flex flow - flex-direction va flex-wrap xossalari uchun qisqartma hisoblanadi.

●Justify content - asosiy o'qi bo'ylab elementlarni joylashuvini belgilaydi va qo'shimcha bo'sh joyni taqsimlashga yordam beradi.

Qiymatlari:

•flex-start - elementlarimiz flex container boshida joylashadi.

•flex-end - elementlarimiz flex container oxirida joylashadi.

•center - elementlarimiz flex container markazida joylashadi

•space-between - elementlarimiz flex container bo'yicha teng taqsimlanadi. Birinchi elementimiz container boshida, oxirgi elementimiz esa container oxirida joylashadi.

•space-around - elementlarimiz flex container bo'yicha teng taqsimlanadi va har bir element atrofida teng masofa bo'ladi. Faqatgina birinchi, oxirigi element va container chegarali orasidagi masofa boshqa masofadan farq qiladi.

•space-evenly - elementlarimiz flex container bo'yicha teng taqsimlanadi va har bir element atrofida teng masofa bo'ladi.

1-qism Flexbox: asoslari va terminlari

Miss_code_creaker — Thu, 05 Sep 2024 12:08:40 +0000

Flexbox - float yoki position xossalari yordamisiz veb sahifada moslashuvchan (flexible) layout(bu html sahifasida elementlarni joylashuvi) yaratishda yordam beradi. Boshqacha qilib aytganda, veb sahifadagi elementlarni joylashtirish uchun xizmat qiladi. Flexbox 2 asosiy elementlardan tashkil topgan:

1.Flex container - display xossasi uchun flex qiymatiga ega bo'lgan elementga aytiladi.

2.Flex items - veb sahifamizdagi flex container ota-onaga ega bo'lgan elementlar.

Asosiy o'q (main axis) - flex modelning asosiy o'qi hisoblanadi va elementlarimiz shu o'qga nisbatan joylashadi. Gorizontal ko'rinishdan vertikal ko'rinishga ham o'tkazsa bo'ladi.

Asosiy boshi/tugashi(main start/end)-flex elementlarimiz asosiy boshi va tugashi orasida joylashadi.

Asosiy uzunligi (main size) - asosiy o'qga qarab flex elementlarimizning kengligi yoki balandligi asosiy uzunlik hisoblanadi. Asosiy o'qning o'lchoviga qarab kenglik yoki balandlik asosiy o'qning uzunligi etib belgilaydi.

Kesuvchi boshi/tugashi (cross start/end) - flex liniyalarimiz kesuvchi boshi va tugashi orasida joylashadi.

Kesuvchi o'q (cross axis) - asosiy o'qga perpendikulyar o'q hisoblanadi. Uning yo'nalishi asosiy o'qning yo'nalishiga bog'liq bo'ladi.

Kesuvchi uzunligi (cross size) - kesuvchi o'qga qarab flex elementning kengligi yoki balandligi kesuvchi uzunlik hisoblanadi. Kesuvchi o'qning o'lchoviga qarab kenglik yoki balandlik kesuvchi uzunligi etib belgilanadi.

Flexbox uchun ishlatilinadigan CSS xossalarimiz 2 guruhga bo'linadi:flex container va flex items xossalari

● Flex container
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

● Flex items
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

HTML hujjatda CSS ishlatishni 3 usuli mavjud

Miss_code_creaker — Tue, 03 Sep 2024 10:00:34 +0000

1.Satrli stillar (Inline styles)

HTML
     <body>
          <h1 style="color: red;">Sarlavha</h1>
          <a href="https://google.com" style="color: green;">Googlega o'tish</a>
     </body>

2.Ichki stillar (Internal styles)

<head>
     <style>
         .heading {
            color:red;
           }
          .Link {
            color: green;
          }
        </style>
      </head>
   <body>
         <h1 class ="heading">Sarlavha</h1>
         <a href="https://google.com" class="Link">Googlega o'tish</a>
   </body>

3.Tashqi stillar (External styles)

index.html
    <head>
        <Link rel="stylesheet" href=./css/styles.css">
    </head>
    <body>
         <h1 class="heading">Sarlavha</h1>
         <a href="https://google.com" class="Link">Googlega o'tish</a>
     </body>

  styles.css
   .heading {
     color: red;
    }
   .Link {
     color: green;
    }

CSS va uning versiyalari.

Miss_code_creaker — Tue, 03 Sep 2024 09:55:03 +0000

-CSS nima
-Versiyalari

CSS nima?
CSS (Cascading Style Sheets) bu- Kaskadlangan stillar jadvali
Kaskadlangan nima ekanligini keyingi darslarda ko'rib tushunib boramiz. Stillar jadvali deb atalishi esa CSS yordamida ma'lum bir stillarni ketma ketligini yozib o'tamiz, stillar to'plami yoki stillar jadvali deb ham ataladi. ummuman olganda CSS ni asosiy vazifasi HTML yordamida yaratgan strukturamizga stil berish hisoblanadi. HTML da dasturlash kursini oxirida biz kichik loyiha yaratgandik va oxirida ko'rdikki biz faqat HTML ni o'zi bilan ham veb sayt yaratishimiz mumkin ekan, lekin veb saytimiz unchalik chiroyli ko'rinishga kelmaydi va qulay ko'rinishga kelmaydi. CSS ni asosiy vazifasi esa shu veb saytni chiroyliroq ko'rinishga olib kelish. HTML da yozgan elementlarga CSS yordamida stil berib uni chiroyliroq va qulayroq ko'rinishga olib kelamiz.

Versiyalari:
Qo'shimcha ma'lumot

1.CSS 1-1996 yil, dekabr oyi o'rtalari
2.CSS 2- 1998 yil, may oyi
3.CSS 3- 1999 yil, iyun oyi

Hozirgi kunda faqat CSS ning faqat 3 chi versiyasidan foydalaniladi. Keyinchalik esa bular modullarga bo'lib tashlandi.