HTML, CSS और JS ऑनलाइन चलाएँ

HTML, CSS और JavaScript के साथ संपूर्ण वेब पेज लिखें - सभी एक संपादक में।

परिचय

आधुनिक वेब पेज तीन मुख्य प्रौद्योगिकियों के साथ बनाए गए हैं: संरचना के लिए HTML, स्टाइल के लिए सीएसएस, और इंटरैक्टिविटी के लिए जावास्क्रिप्ट। हमारा ऑनलाइन कोड रनर एक ही संपादक में इन तीनों का समर्थन करता है - एक संपूर्ण वेब पेज लिखें और इसे तुरंत प्रस्तुत होते हुए देखें।

HTML, CSS और JS को एक साथ कैसे लिखें

हमारे HTML कोड रनर में, आप एक संपूर्ण HTML दस्तावेज़ लिखते हैं जिसमें CSS और JavaScript इनलाइन शामिल होते हैं। यहां बताया गया है कि वे एक साथ कैसे काम करते हैं:

  • HTML — अपने पृष्ठ की संरचना और सामग्री को परिभाषित करें
  • सीएसएस - <कोड क्लास='नो-ट्रांसलेट'><स्टाइल> टैग का उपयोग करके <कोड क्लास='नो-ट्रांसलेट'><हेड> में शैलियाँ जोड़ें।
  • जावास्क्रिप्ट -

उदाहरण: संयुक्त HTML, CSS और JavaScript

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 2rem; }
    button { padding: 0.8rem 2rem; font-size: 1.1rem; cursor: pointer; }
    #counter { font-size: 3rem; margin: 1rem; color: #6C5CE7; }
  </style>
</head>
<body>
  <h1>Click Counter</h1>
  <div id="counter">0</div>
  <button onclick="count()">Click Me</button>
  <script>
    let n = 0;
    function count() {
      n++;
      document.getElementById('counter').textContent = n;
    }
  </script>
</body>
</html>

आप क्या बना सकते हैं

  • सत्यापन के साथ इंटरैक्टिव प्रपत्र
  • एनिमेटेड लैंडिंग पृष्ठ
  • डेटा विज़ुअलाइज़ेशन डैशबोर्ड
  • गेम प्रोटोटाइप
  • सीएसएस कला और एनिमेशन
  • एपीआई-कनेक्टेड एप्लिकेशन (बाहरी डेटा प्राप्त करें)

बहु-भाषा कोड के लिए युक्तियाँ

  • FOUC (अनस्टाइल्ड सामग्री का फ्लैश) से बचने के लिए में CSS डालें
  • जावास्क्रिप्ट को के अंत में रखें या defer का उपयोग करें
  • जावास्क्रिप्ट त्रुटियों को डीबग करने के लिए कंसोल आउटपुट पैनल का उपयोग करें
  • अपनी ब्राउज़र विंडो का आकार बदलकर प्रतिक्रियाशील डिज़ाइन का परीक्षण करें

अक्सर पूछे जाने वाले प्रश्नों

हाँ। सीडीएन से बाहरी संसाधनों को लोड करने के लिए सीएसएस के लिए लिंक टैग और स्रोत विशेषताओं वाले स्क्रिप्ट टैग का उपयोग करें।

हाँ। अपने HTML हेड सेक्शन में बूटस्ट्रैप सीडीएन लिंक शामिल करें और सभी बूटस्ट्रैप कक्षाएं पूर्वावलोकन में काम करेंगी।

हाँ। jQuery CDN स्क्रिप्ट टैग शामिल करें और आप अपने कोड में jQuery सिंटैक्स का उपयोग कर सकते हैं।

संबंधित संसाधन