HTML और CSS शुरुआती कोर्स नोट्स

कोर्स अवलोकन

• 5 परियोजनाओं को बनाकर और तैनात करके HTML और CSS सीखें।
• 75 से अधिक कोडिंग चुनौतियों को हल करें।
• प्रशिक्षक: पियरे बर्गन, स्क्रिम्बा के सह-संस्थापक।

कोर्स रूपरेखा

• परिचय: HTML और CSS का उपयोग करके सुंदर वेबसाइट बनाने पर एक इंटरैक्टिव स्क्रिम्बा कोर्स में आपका स्वागत है।
• व्यावहारिक दृष्टिकोण: चुनौतियों को कोर्स में एकीकृत करके सीखना।
• औजार सेटअप: चुनौतियों को हल करने के लिए गिटहब रेपॉजिटरी और एक स्थानीय डेवलपमेंट वातावरण सेटअप प्रदान किया गया है।

प्रमुख विषय शामिल

बेसिक HTML और CSS अवधारणाएं

1. HTML: वेबपेज की संरचना; हेडिंग्स, पैराग्राफ़, छवियाँ आदि जैसे तत्व।
2. CSS: तत्वों को स्टाइल करना; रंग, फ़ॉन्ट-आकार, मार्जिन, पैडिंग आदि जैसी संपत्तियाँ।
3. HTML टैग्स: <h1>, <p>, <img>, आदि।
4. CSS सिंटैक्स: चयनकर्ता, संपत्तियाँ, मान, और संक्षिप्त संपत्तियाँ।

उन्नत HTML और CSS तकनीकें

1. फ्लेक्सबॉक्स: तत्वों को व्यवस्थित करने के लिए लेआउट मॉडल; display, flex-direction, justify-content, align-items जैसी संपत्तियाँ।
2. पृष्ठभूमि छवियां: background-image, background-size संपत्तियों के साथ स्थिर और एनिमेटेड छवियों का उपयोग।
3. गूगल फ़ॉन्ट्स: वेब परियोजनाओं में कस्टम फ़ॉन्ट्स आयात करना और उपयोग करना।
4. स्पैन टैग: टेक्स्ट के भागों को स्टाइल करने के लिए इनलाइन तत्व; कक्षाओं के साथ उपयोग किया जाता है।
5. आईडी बनाम क्लास: कब आईडी (अद्वितीय तत्व) बनाम क्लास (पुन: प्रयोज्य शैलियाँ) का उपयोग करना है।
6. टेक्स्ट शैडोज़: टेक्स्ट की बेहतर पठनीयता के लिए छाया जोड़ना।

परियोजनाएं और व्यावहारिक अनुप्रयोग

1. Google.com क्लोन: HTML और CSS का उपयोग करके गूगल के होमपेज की प्रतिकृति बनाना।
2. व्यवसाय कार्ड: HTML और CSS के साथ व्यक्तिगत व्यवसाय कार्ड बनाना, जिसमें छवियाँ और टेक्स्ट की स्टाइलिंग शामिल है।
3. स्पेस अन्वेषण साइट: पृष्ठभूमि छवियों, फ्लेक्सबॉक्स और कस्टम फ़ॉन्ट्स के साथ एक थीमैटिक साइट बनाना।
4. जन्मदिन उपहार साइट: होवर इफेक्ट्स, पृष्ठभूमि छवियों, और कई सेक्शन्स के साथ एक इंटरैक्टिव साइट।
5. एकल परियोजना: सभी सीखे गए अवधारणाओं का उपयोग करके अपने गृहनगर के लिए एक होमपेज बनाना।

उपकरण और तैनाती

1. गिटहब: संस्करण नियंत्रण और सहयोग; रेपॉजिटरी बनाना और कोड में परिवर्तन प्रबंध करना।
2. नेटलिफाई: वेबसाइटों की तैनाती; निरंतर तैनाती के लिए गिटहब के साथ एकीकरण।
3. वीएस कोड: स्थानीय डेवलपमेंट वातावरण सेटअप; कोड फाइलों का संपादन और प्रबंधन।
4. गिटहब डेस्कटॉप: स्थानीय रूप से गिट रेपॉजिटरी प्रबंधित करने के लिए जीयूआई; गिटहब पर परिवर्तन पुश करना।
5. फिग्मा: परियोजना डिज़ाइन और संपत्ति प्राप्त करने के लिए डिज़ाइन टूल।

कोर्स पूर्णता और अगले कदम

• परियोजना तैनाती: अंतिम परियोजनाओं को समुदाय और सामाजिक मंचों पर साझा करने के लिए प्रोत्साहित किया जाता है।
• आगे की शिक्षा: HTML और CSS कौशल को पूरक करने के लिए जावास्क्रिप्ट सीखने की सिफारिश की जाती है।
• कैरियर पथ: स्क्रिम्बा पर फ्रंटेंड डेवलपर कैरियर पथ का पालन करने का विकल्प।

महत्वपूर्ण अवधारणाएं और शब्दावली

• HTML संरचना: टैग्स, विशेषताएँ, नेस्टिंग, डॉक्युमेंट ट्री, आदि।
• CSS संपत्तियाँ: रंग, फ़ॉन्ट, मार्जिन, पैडिंग, बॉर्डर, फ्लेक्सबॉक्स, आदि।
• रेस्पॉन्सिव डिज़ाइन: उत्तरदायी लेआउट बनाने के लिए फ्लेक्सबॉक्स और मीडिया क्वेरीज़ का उपयोग करना।
• संस्करण नियंत्रण: बुनियादी गिट कमांड्स, परिवर्तन प्रतिपादन, पुश/पुल ऑपरेशन।
• वेब तैनाती: नेटलिफाई जैसे होस्टिंग प्लेटफॉर्म का उपयोग करके वेब परियोजनाओं को इंटरनेट पर तैनात करने की प्रक्रिया।
• डिज़ाइन टूल्स: डिज़ाइन फ़ाइलों का उपयोग करने और उनपर काम करने के लिए फिग्मा का उपयोग करना।

प्रमुख निष्कर्ष

• वास्तविक दुनिया की परियोजनाओं को बनाकर HTML और CSS सीखने के लिए व्यावहारिक, हाथ से सीखने का दृष्टिकोण।
• HTML और CSS का उपयोग करके वेब पेजों को संरचित और शैलीबद्ध करने के तरीके की समझ।
• सहयोग और तैनाती के लिए आवश्यक वेब विकास उपकरण और प्लेटफार्मों का उपयोग करने में प्रवीणता।
• वेब विकास में आगे की शिक्षा, विशेष रूप से जावास्क्रिप्ट के लिए तैयारी।