History

softchris 04881ec984 🌐 Update translations via Co-op Translator		10 months ago
..
README.md	🌐 Update translations via Co-op Translator	10 months ago
assignment.md	🌐 Update translations via Co-op Translator	11 months ago

README.md

टेरॅरियम प्रोजेक्ट भाग 2: CSS ची ओळख

स्केच नोट Tomomi Imura यांच्याकडून

प्री-लेक्चर क्विझ

ओळख

CSS, म्हणजेच Cascading Style Sheets, वेब विकासातील एक महत्त्वाचा प्रश्न सोडवते: तुमची वेबसाइट आकर्षक कशी बनवायची. तुमच्या अ‍ॅप्सला स्टाइलिंग केल्याने ते अधिक वापरण्यायोग्य आणि आकर्षक दिसतात; तुम्ही CSS चा वापर करून Responsive Web Design (RWD) देखील तयार करू शकता - ज्यामुळे तुमचे अ‍ॅप्स कोणत्याही स्क्रीन आकारावर चांगले दिसतील. CSS फक्त तुमचा अ‍ॅप आकर्षक बनवण्यासाठी नाही; त्याच्या स्पेसिफिकेशनमध्ये अ‍ॅनिमेशन आणि ट्रान्सफॉर्म्स समाविष्ट आहेत जे तुमच्या अ‍ॅप्ससाठी प्रगत संवाद सक्षम करू शकतात. CSS वर्किंग ग्रुप सध्याच्या CSS स्पेसिफिकेशन्सचे देखरेख करण्यास मदत करते; तुम्ही त्यांचे काम World Wide Web Consortium च्या साइटवर फॉलो करू शकता.

लक्षात ठेवा, CSS ही एक भाषा आहे जी विकसित होते, जसे की वेबवरील सर्व काही, आणि सर्व ब्राउझर नवीन स्पेसिफिकेशनचे समर्थन करत नाहीत. CanIUse.com चा सल्ला घेऊन तुमच्या अंमलबजावणीची नेहमीच तपासणी करा.

या धड्यात, आपण आपल्या ऑनलाइन टेरॅरियमला स्टाइल्स जोडणार आहोत आणि CSS च्या अनेक संकल्पनांबद्दल अधिक जाणून घेणार आहोत: कॅस्केड, वारसा, आणि सिलेक्टर्सचा वापर, पोझिशनिंग, आणि CSS चा वापर करून लेआउट्स तयार करणे. या प्रक्रियेत आपण टेरॅरियमचे लेआउट तयार करू आणि प्रत्यक्ष टेरॅरियम तयार करू.

पूर्वतयारी

तुमचे टेरॅरियम तयार करण्यासाठी HTML तयार केलेले असावे आणि ते स्टाइल करण्यासाठी तयार असावे.

व्हिडिओ पहा

कार्य

तुमच्या टेरॅरियम फोल्डरमध्ये, style.css नावाची नवीन फाइल तयार करा. ती फाइल <head> सेक्शनमध्ये इम्पोर्ट करा:

<link rel="stylesheet" href="./style.css" />

कॅस्केड

Cascading Style Sheets मध्ये 'कॅस्केड' ही कल्पना समाविष्ट आहे ज्यामुळे स्टाइल लागू करण्याची प्राथमिकता मार्गदर्शित होते. वेबसाइट लेखकाने सेट केलेल्या स्टाइल्स ब्राउझरने सेट केलेल्या स्टाइल्सपेक्षा प्राधान्य घेतात. 'इनलाइन' सेट केलेल्या स्टाइल्स बाह्य स्टाइल शीटमध्ये सेट केलेल्या स्टाइल्सपेक्षा प्राधान्य घेतात.

कार्य

तुमच्या <h1> टॅगमध्ये "color: red" इनलाइन स्टाइल जोडा:

<h1 style="color: red">My Terrarium</h1>

त्यानंतर, तुमच्या style.css फाइलमध्ये खालील कोड जोडा:

h1 {
 color: blue;
}

✅ तुमच्या वेब अ‍ॅपमध्ये कोणता रंग दिसतो? का? तुम्ही स्टाइल्स ओव्हरराइड करण्याचा मार्ग शोधू शकता का? तुम्ही हे कधी कराल, किंवा का नाही?

वारसा

स्टाइल्स पूर्वज स्टाइल्सकडून वंशजाकडे वारसा म्हणून जातात, ज्यामुळे नेस्टेड घटक त्यांच्या पालकांचे स्टाइल्स वारसा म्हणून घेतात.

कार्य

बॉडीचा फॉन्ट दिलेल्या फॉन्टमध्ये सेट करा आणि नेस्टेड घटकाचा फॉन्ट तपासा:

body {
	font-family: helvetica, arial, sans-serif;
}

तुमच्या ब्राउझरच्या 'Elements' टॅबमध्ये जा आणि H1 चा फॉन्ट पाहा. तो ब्राउझरमध्ये नमूद केल्याप्रमाणे बॉडीकडून त्याचा फॉन्ट वारसा म्हणून घेतो:

✅ तुम्ही नेस्टेड स्टाइलला वेगळी प्रॉपर्टी वारसा म्हणून घेऊ शकता का?

CSS सिलेक्टर्स

टॅग्स

आत्तापर्यंत, तुमच्या style.css फाइलमध्ये फक्त काही टॅग्स स्टाइल केले आहेत, आणि अ‍ॅप विचित्र दिसत आहे:

body {
	font-family: helvetica, arial, sans-serif;
}

h1 {
	color: #3a241d;
	text-align: center;
}

टॅगला स्टाइल करण्याचा हा मार्ग तुम्हाला अद्वितीय घटकांवर नियंत्रण देतो, परंतु तुम्हाला तुमच्या टेरॅरियममधील अनेक वनस्पतींच्या स्टाइल्सवर नियंत्रण ठेवण्याची आवश्यकता आहे. असे करण्यासाठी, तुम्हाला CSS सिलेक्टर्सचा उपयोग करावा लागेल.

आयडीज

डाव्या आणि उजव्या कंटेनर्सचे लेआउट स्टाइल करा. मार्कअपमध्ये फक्त एक डावा कंटेनर आणि एक उजवा कंटेनर असल्याने, त्यांना आयडी दिले जातात. त्यांना स्टाइल करण्यासाठी, # वापरा:

#left-container {
	background-color: #eee;
	width: 15%;
	left: 0px;
	top: 0px;
	position: absolute;
	height: 100%;
	padding: 10px;
}

#right-container {
	background-color: #eee;
	width: 15%;
	right: 0px;
	top: 0px;
	position: absolute;
	height: 100%;
	padding: 10px;
}

येथे, तुम्ही या कंटेनर्सना स्क्रीनच्या अगदी डाव्या आणि उजव्या बाजूला ठेवले आहे, आणि त्यांची रुंदी टक्केवारीने सेट केली आहे जेणेकरून ते लहान मोबाइल स्क्रीनसाठी स्केल करू शकतील.

✅ हा कोड बराच वेळा पुनरावृत्त होतो, त्यामुळे तो "DRY" (Don't Repeat Yourself) नाही; तुम्ही आयडी आणि क्लाससह या आयडीजना स्टाइल करण्याचा चांगला मार्ग शोधू शकता का? तुम्हाला मार्कअप बदलण्याची आणि CSS पुन्हा तयार करण्याची आवश्यकता असेल:

<div id="left-container" class="container"></div>

क्लासेस

वरील उदाहरणात, तुम्ही स्क्रीनवरील दोन अद्वितीय घटकांना स्टाइल केले. जर तुम्हाला स्क्रीनवरील अनेक घटकांवर स्टाइल्स लागू करायचे असतील, तर तुम्ही CSS क्लासेस वापरू शकता. डाव्या आणि उजव्या कंटेनर्समधील वनस्पतींचे लेआउट करण्यासाठी हे करा.

लक्षात घ्या की HTML मार्कअपमधील प्रत्येक वनस्पतीमध्ये आयडीज आणि क्लासेसचा एकत्रित वापर आहे. येथे आयडीजचा वापर नंतर टेरॅरियम वनस्पतींच्या प्लेसमेंटमध्ये फेरफार करण्यासाठी तुम्ही जोडलेल्या जावास्क्रिप्टद्वारे केला जातो. तथापि, क्लासेस सर्व वनस्पतींना दिलेली एक विशिष्ट स्टाइल देतात.

<div class="plant-holder">
	<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.mr.png" />
</div>

तुमच्या style.css फाइलमध्ये खालील कोड जोडा:

.plant-holder {
	position: relative;
	height: 13%;
	left: -10px;
}

.plant {
	position: absolute;
	max-width: 150%;
	max-height: 150%;
	z-index: 2;
}

या स्निपेटमध्ये महत्त्वाचे म्हणजे रिलेटिव्ह आणि अ‍ॅब्सोल्यूट पोझिशनिंगचा मिश्रण, ज्याबद्दल आपण पुढील विभागात चर्चा करू. उंची टक्केवारीने हाताळण्याचा मार्ग पहा:

तुम्ही प्लांट होल्डरची उंची 13% सेट केली आहे, एक चांगला आकडा जो सुनिश्चित करतो की सर्व वनस्पती प्रत्येक उभ्या कंटेनरमध्ये स्क्रोलिंगची आवश्यकता न ठेवता प्रदर्शित केल्या जातात.

तुम्ही प्लांट होल्डरला डावीकडे हलवले आहे जेणेकरून वनस्पती त्यांच्या कंटेनरमध्ये अधिक केंद्रित असतील. प्रतिमांमध्ये मोठ्या प्रमाणात पारदर्शक पार्श्वभूमी आहे ज्यामुळे त्यांना अधिक ड्रॅग करण्यायोग्य बनवले जाते, त्यामुळे स्क्रीनवर चांगले बसण्यासाठी त्यांना डावीकडे ढकलले पाहिजे.

त्यानंतर, वनस्पतीला 150% ची जास्तीत जास्त रुंदी दिली जाते. यामुळे ब्राउझर स्केल डाउन झाल्यामुळे ते स्केल डाउन होऊ शकते. तुमचा ब्राउझर रीसाइज करून पहा; वनस्पती त्यांच्या कंटेनर्समध्ये राहतात परंतु फिट होण्यासाठी स्केल डाउन होतात.

तसेच उल्लेखनीय म्हणजे z-index चा वापर, जो घटकाची सापेक्ष उंची नियंत्रित करतो (जेणेकरून वनस्पती कंटेनरवर बसतात आणि टेरॅरियममध्ये बसल्यासारखे दिसतात).

✅ तुम्हाला प्लांट होल्डर आणि प्लांट CSS सिलेक्टर दोन्ही का आवश्यक आहेत?

CSS पोझिशनिंग

पोझिशन प्रॉपर्टीज (जसे की स्टॅटिक, रिलेटिव्ह, फिक्स्ड, अ‍ॅब्सोल्यूट, आणि स्टिकी पोझिशन्स) मिक्स करणे थोडे कठीण असू शकते, परंतु योग्य प्रकारे केल्यास ते तुमच्या पृष्ठांवरील घटकांवर चांगले नियंत्रण देते.

अ‍ॅब्सोल्यूट पोझिशन केलेले घटक त्यांच्या जवळच्या पोझिशन केलेल्या पूर्वजांच्या संदर्भात पोझिशन केले जातात, आणि जर असे काही नसेल, तर ते डॉक्युमेंट बॉडीनुसार पोझिशन केले जाते.

रिलेटिव्ह पोझिशन केलेले घटक त्यांच्या सुरुवातीच्या पोझिशनपासून त्याच्या प्लेसमेंटला समायोजित करण्यासाठी CSS च्या निर्देशांवर आधारित पोझिशन केले जातात.

आमच्या नमुन्यात, plant-holder हा एक रिलेटिव्ह-पोझिशन केलेला घटक आहे जो अ‍ॅब्सोल्यूट-पोझिशन केलेल्या कंटेनरमध्ये पोझिशन केलेला आहे. परिणामी वर्तन असे आहे की साइड बार कंटेनर्स डावीकडे आणि उजवीकडे पिन केले जातात, आणि प्लांट-होल्डर नेस्टेड असतो, साइड बारमध्ये समायोजित होतो, वनस्पतींना उभ्या रांगेत ठेवण्यासाठी जागा देतो.

plant स्वतः अ‍ॅब्सोल्यूट पोझिशनिंगसह आहे, जेणेकरून ते ड्रॅग करण्यायोग्य बनवता येईल, जसे तुम्ही पुढील धड्यात शोधाल.

✅ साइड कंटेनर्स आणि प्लांट-होल्डरच्या पोझिशनिंग प्रकार स्विच करण्याचा प्रयत्न करा. काय होते?

CSS लेआउट्स

आता तुम्ही जे शिकलात ते वापरून CSS चा वापर करून टेरॅरियम स्वतः तयार कराल!

प्रथम, .terrarium डिव्ह चिल्ड्रनला CSS चा वापर करून गोलसर आयत म्हणून स्टाइल करा:

.jar-walls {
	height: 80%;
	width: 60%;
	background: #d1e1df;
	border-radius: 1rem;
	position: absolute;
	bottom: 0.5%;
	left: 20%;
	opacity: 0.5;
	z-index: 1;
}

.jar-top {
	width: 50%;
	height: 5%;
	background: #d1e1df;
	position: absolute;
	bottom: 80.5%;
	left: 25%;
	opacity: 0.7;
	z-index: 1;
}

.jar-bottom {
	width: 50%;
	height: 1%;
	background: #d1e1df;
	position: absolute;
	bottom: 0%;
	left: 25%;
	opacity: 0.7;
}

.dirt {
	width: 60%;
	height: 5%;
	background: #3a241d;
	position: absolute;
	border-radius: 0 0 1rem 1rem;
	bottom: 1%;
	left: 20%;
	opacity: 0.7;
	z-index: -1;
}

येथे टक्केवारीचा वापर लक्षात घ्या. जर तुम्ही तुमचा ब्राउझर स्केल डाउन केला, तर तुम्ही पाहू शकता की जार देखील स्केल होतो. तसेच जार घटकांसाठी रुंदी आणि उंची टक्केवारी आणि प्रत्येक घटक कसे पूर्णपणे केंद्रित केले जाते आणि व्ह्यूपोर्टच्या तळाशी पिन केले जाते ते पहा.

आम्ही rem चा वापर करून बॉर्डर-रेडियस सेट केला आहे, जो फॉन्ट-सापेक्ष लांबी आहे. या प्रकारच्या सापेक्ष मोजमापाबद्दल अधिक वाचा CSS स्पेसिफिकेशन मध्ये.

✅ जारचे रंग आणि अपारदर्शकता बदलण्याचा प्रयत्न करा आणि मातीच्या रंगांशी तुलना करा. काय होते? का?

GitHub Copilot Agent चॅलेंज 🚀

खालील चॅलेंज पूर्ण करण्यासाठी Agent मोड वापरा:

वर्णन: टेरॅरियममधील वनस्पतींना सौम्य वाऱ्याच्या प्रभावासारखे हलवणारी CSS अ‍ॅनिमेशन तयार करा. CSS अ‍ॅनिमेशन, ट्रान्सफॉर्म्स, आणि कीफ्रेम्सचा सराव करताना तुमच्या टेरॅरियमची दृश्यात्मक आकर्षकता वाढवण्यासाठी हे उपयुक्त ठरेल.

प्रॉम्प्ट: टेरॅरियममधील वनस्पतींना सौम्यपणे डावीकडे आणि उजवीकडे हलवणारी CSS कीफ्रेम अ‍ॅनिमेशन जोडा. प्रत्येक वनस्पतीला थोडेसे (2-3 डिग्री) डावीकडे आणि उजवीकडे फिरवणारी अ‍ॅनिमेशन तयार करा, ज्याचा कालावधी 3-4 सेकंद असेल, आणि ती .plant क्लासला लागू करा. अ‍ॅनिमेशन अनंत वेळा लूप होईल आणि नैसर्गिक हालचालीसाठी ईझिंग फंक्शन असेल याची खात्री करा.

🚀चॅलेंज

जारच्या डाव्या तळाच्या भागात 'बबल' चमक जोडा ज्यामुळे ते अधिक काचेसारखे दिसेल. तुम्ही .jar-glossy-long आणि .jar-glossy-short स्टाइल करून परावर्तित चमक तयार कराल. हे असे दिसेल:

पोस्ट-लेक्चर क्विझ पूर्ण करण्यासाठी, हा Learn मॉड्यूल पहा: तुमच्या HTML अ‍ॅपला CSS सह स्टाइल करा

पोस्ट-लेक्चर क्विझ

पुनरावलोकन आणि स्व-अभ्यास

CSS वरवर सोपे वाटते, परंतु सर्व ब्राउझर आणि सर्व स्क्रीन आकारांसाठी अ‍ॅप परिपूर्णपणे स्टाइल करण्याचा प्रयत्न करताना अनेक आव्हाने येतात. CSS-Grid आणि Flexbox हे टूल्स आहेत जे काम थोडे अधिक संरचित आणि अधिक विश्वासार्ह बनवण्यासाठी विकसित केले गेले आहेत. Flexbox Froggy आणि Grid Garden खेळून या टूल्सबद्दल अधिक जाणून घ्या.

असाइनमेंट

CSS Refactoring

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.