Advertisement
  1. Code
  2. HTML & CSS

बिगिनर के लिए 30 HTML की बेस्ट प्रैक्टिस

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Nettuts+ चलने का सबसे कठिन पहलू बहुत सारे कौशल स्तरों के लिए जिम्मेदार है। अगर हम बहुत अधिक उन्नत ट्यूटोरियल्स पोस्ट करते हैं, तो हमारे बिगिनर ऑडियंस का लाभ नहीं होगा। वही विपरीत के लिए सही है। हम अपनी पूरी कोशिश करते हैं, लेकिन अगर आप महसूस करते हैं कि आपको उपेक्षित किया जा रहा है। यह साइट आपके लिए है, इसलिए बोलो! यह कह कर, आज के ट्यूटोरियल विशेष रूप से उन लोगों के लिए हैं जो वेब डेवलपमेंट में डाइविंग कर रहे हैं। यदि आपके पास एक वर्ष का अनुभव है या कम है, तो उम्मीद है कि यहां सूचीबद्ध कुछ टिप्स आपको बेहतर, तेज बनने में मदद करेंगे!

आगे की हलचल के बिना, चलो अपने मार्कअप बनाने के दौरान निरीक्षण करने के लिए 30 सर्वोत्तम प्रैक्टिसेज की समीक्षा करें।


1: हमेशा अपने टैग बंद करें

पुराने दिनों में, ऐसी चीजे देखना असामान्य नहीं था:

ध्यान दें कि रैपिंग UL/OL टैग कैसे छोड़ा गया था। इसके अतिरिक्त, कई ने बंद LI टैग भी छोड़ने का विकल्प चुना। आज के मानकों के अनुसार, यह केवल बुरा व्यवहार है और 100% इससे बचा जाना चाहिए। हमेशा, हमेशा अपने टैग बंद करें। अन्यथा, आपको हर मोड़ पर वेलिडेशन और गड़बड़ी के मुद्दों का सामना करना होगा।

बेहतर


2: सही डॉकटाइप को डिक्लेअर करें

Declare doctype

जब मैं छोटा था, मैंने CSS फ़ोरम्स में काफी कुछ भाग लिया। जब भी किसी यूजर के पास कोई समस्या होती है, तो इससे पहले कि हम उनकी स्थिति को देख सकें, वे पहले दो चीजों को करने के लिए गए।

  1. CSS फ़ाइल वैलिडेट करें। किसी भी आवश्यक एरर को ठीक करें।
  2. एक doctype जोड़ें

"DOCTYPE पेज के शीर्ष पर ओपनिंग HTML टैग से पहले लगाया जाता है और ब्राउज़र को बताता है कि पेज में HTML, XHTML, या दोनों का मिश्रण है, ताकि यह सही ढंग से मार्कअप की व्याख्या कर सके।"

नई वेबसाइट बनाने के दौरान हम में से अधिकांश चार अलग-अलग doctype के बीच चयन करते हैं।

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

वर्तमान में यहां सही चुनाव के बारे में एक बड़ी बहस चल रही है। एक बिंदु पर, इसे XHTML strict संस्करण का उपयोग करने के लिए सबसे अच्छा अभ्यास माना जाता था। हालांकि, कुछ शोध के बाद, यह महसूस किया गया था कि अधिकांश ब्राउज़रों ने इसे पुनः परिभाषित करते हुए नियमित HTML पर वापस लौटाया है। इस कारण से, कई ने इसके बजाय HTML 4.01 strict का उपयोग करने के लिए चुना है। जमीनी स्तर यह है कि इनमें से कोई भी आपको चेक में रखेगा। कुछ शोध करें और अपना मन बनाएं।


3: कभी भी इनलाइन स्टाइल का उपयोग न करें

जब आप अपने मार्कअप पर काम करने में कठोर हो जाते हैं, तो कभी-कभी यह आसान मार्ग लेने और थोड़ा स्टाइल में घुसने के लिए आकर्षक हो सकता है।

ज़रूर - यह बहुत हानिरहित दिखता है। हालांकि, यह आपके कोडिंग प्रथाओं में एक एरर को इंगित करता है।

    जब आपका मार्कअप बनाते हैं, तब भी स्टाइल के बारे में सोच भी नहीं सकते। पेज पूरी तरह से कोडित हो जाने के बाद आप स्टाइल को जोड़ना शुरू करते हैं।

यह Ghostbusters में धाराओं को पार करने की तरह है। यह सिर्फ एक अच्छा विचार नहीं है।
-क्रिस कोयियर (पूरी तरह से असंबंधित किसी चीज़ के संदर्भ में।)

इसके बजाय, अपने मार्कअप को समाप्त करें, और फिर संदर्भ करें कि आपके बाहरी स्टाइलशीट से P टैग।

बेहतर


4: हेड टैग के अंदर सभी बाहरी CSS फ़ाइलें रखें

तकनीकी रूप से, आप कहीं भी स्टाइलशीट रख सकते हैं। हालांकि, HTML स्पेसिफिकेशन यह अनुशंसा करता है कि उन्हें डॉक्यूमेंट हेड टैग के अंदर रखा जाना चाहिए। प्राथमिक लाभ यह है कि आपके पेजेज को तेजी से लोड हो जाएगा।

Yahoo! पर प्रदर्शन की शोध करते समय, हमने पाया कि डॉक्यूमेंट हेड को चलती स्टाइलशीट पेज को तेजी से लोड हो रहा है। इसका कारण यह है कि हेड में स्टाइलशीट डालने से पेज को क्रमशः रेंडर करने की अनुमति मिलती है।
- ySlow टीम


5: नीचे जावास्क्रिप्ट फाइल रखने पर विचार करें

Place JS at bottom

याद रखें - प्राथमिक लक्ष्य यूजर के लिए जितनी जल्दी हो सके पेज लोड करना है। जब कोई स्क्रिप्ट लोड हो रहा है, ब्राउज़र तब तक जारी नहीं रख सकता जब तक कि पूरी फाइल लोड नहीं हुई हो। इस प्रकार, यूजर को किसी भी प्रगति पर ध्यान देने से पहले इंतजार करना होगा।

यदि आपके पास JS फाइलें हैं जिनकी एकमात्र उद्देश्य कार्यक्षमता जोड़ना है - उदाहरण के लिए, बटन क्लिक करने के बाद - आगे बढ़ें और उन फ़ाइलों को नीचे स्थित करें, क्लोजिंग बॉडी टैग के ठीक पहले। यह बिल्कुल एक सर्वोत्तम अभ्यास है।

बेहतर


6: कभी भी इनलाइन जावास्क्रिप्ट का उपयोग न करें यह 1996 नहीं है!

एक अन्य सामान्य अभ्यास साल पहले JS के कमांड्स को सीधे टैगों में रखा गया था। सरल इमेज गैलरीज के साथ यह बहुत आम था। अनिवार्य रूप से, टैग पर एक "onclick" एट्रिब्यूट जोड़ा गया था। वैल्यू कुछ JS प्रोसीजर के बराबर होगा। कहने की जरूरत नहीं है, आपको ऐसा कभी नहीं करना चाहिए। इसके बजाय, इस कोड को एक बाहरी JS फ़ाइल में स्थानांतरित करें और "addEventListener/attachEvent" का उपयोग करें, अपने वांछित इवेंट के लिए "listen"। या, यदि jQuery की तरह एक फ्रेमवर्क का उपयोग करना है, तो बस "click" मेथड का उपयोग करें।


7: लगातार वैलिडेट करें

validate continuously

मैंने हाल ही में ब्लॉग इस बारे में लिखा है कि वेलिडेशन का विचार उन लोगों द्वारा पूरी तरह से गलत तरीके से प्रयोग किए गए हैं जो पूरी तरह से इसके उद्देश्य को समझ नहीं पाते हैं। जैसा कि मैंने इस आर्टिकल में उल्लेख किया है, "validation आपके लिए काम करना चाहिए, खिलाफ नहीं।"

हालांकि, खासकर जब पहली बार शुरू कर रहे हो, तो मैं अत्यधिक सुझाव देता हूं कि आप वेब डेवलपर टूलबार डाउनलोड करें और "Validate HTML" और "Validate CSS" विकल्प का लगातार उपयोग करें। हांलांकि CSS सीखने के लिए कुछ आसान भाषा है, पर यह भी आपको अपने बालों को नोचने पर मजबूर कर सकती हैं। जैसा कि आप पाएंगे, कई बार, यह आपका shabby markup है जिससे पेज पर उस अजीब वाइटस्पेस का इशू हो रहा है। वैलिडेट करें, वैलिडेट करें, वैलिडेट करें।


8: फायरबग डाउनलोड करें

download firebug

मैं यह पर्याप्त रेकमेंड नहीं कर सकता। फायरबग, संदेह के बिना, वेबसाइट बनाने के दौरान आप कभी भी इस बेहतरीन प्लगइन का उपयोग करेंगे। न केवल यह अविश्वसनीय जावास्क्रिप्ट डीबगिंग प्रदान करता है, लेकिन आप यह भी सीखेंगे कि किस एलिमेंट को वह अतिरिक्त पैडिंग मिल रहा है जिससे आप अनजान थे। डाउनलोड करो!


9: फायरबग का उपयोग करें!

use firebug

मेरे अनुभवों से, कई यूज़र्स केवल लगभग 20% फायरबग क्षमताओं का लाभ उठाते हैं। आप वास्तव में खुद को एक निर्वासन कर रहे हैं। कुछ घंटे ले लो और वेब पर प्रत्येक योग्य ट्यूटोरियल के लिए scour करें जो आप इस विषय पर पा सकते हैं।

रिसोर्सेज


10: अपने टैग नामों को लोअरकेस रखें

तकनीकी रूप से, आप अपने टैग नामों को कैपिटल कर सकते हैं।

ये कहने के बाद, कृपया मत करो। यह कोई उद्देश्य नहीं है और मेरी आँखों को दर्द पहुँचाता है - इस बात का जिक्र नहीं कि यह मुझे माइक्रोसॉफ्ट वर्ड के html फ़ंक्शन की याद दिलाता है!

बेहतर


11: H1 - H6 टैग का उपयोग करें

बेशक, यह ऐसा कुछ है जिसे मैं स्लैक करता हूं। इनमें से सभी छह टैग का उपयोग करना सबसे अच्छा अभ्यास है। अगर मैं ईमानदारी से कहूं, तो मैं आमतौर पर केवल शीर्ष चार को अप्लाई करता हूं; लेकिन मैं उस पर काम कर रहा हूँ! :) सिमेंटिक और SEO के कारणों के लिए, जब उचित हो तो H6 के साथ उस P टैग को बदलने के लिए स्वयं को मजबूर करें।


12: यदि कोई ब्लॉग बनाना है, तो आर्टिकल टाइटल के लिए H1 सेव करें

h1 saved for title of article.

बस आज सुबह, Twitter पर, मैंने अपने फॉलोवर्स से पूछा कि क्या उन्हें लगता है कि यह H1 टैग को logo के रूप में रखना सबसे स्मार्ट है या इसके बजाय इसका इस्तेमाल आर्टिकल के शीर्षक के रूप में करें। लगभग 80% लौटे ट्वीट्स बाद वाले मेथड के पक्ष में थीं।

किसी भी चीज़ के साथ, यह निर्धारित करें कि आपकी वेबसाइट के लिए सबसे अच्छा क्या है। हालांकि, अगर कोई ब्लॉग बनाना है, तो मैं सुझाऊंगा कि आप अपने लेख के शीर्षक के लिए अपने H1 टैग को बचाएंगेI SEO प्रयोजनों के लिए, यह एक बेहतर अभ्यास है - मेरी राय में।


13: डाउनलोड करें ySlow


download yslow

विशेष रूप से पिछले कुछ वर्षों में, याहू टीम हमारे क्षेत्र में कुछ बहुत अच्छा काम कर रही है। बहुत समय पहले नहीं, उन्होंने फायरबग का एक एक्सटेंशन ySlow नामक बनाया। एक्टिवेट होने पर, यह दी गयी वेबसाइट का विश्लेषण करेगा और उन प्रकार के "रिपोर्ट कार्ड" वापस करेगा जो उन क्षेत्रों का विवरण देता है जहां आपकी साइट में सुधार की आवश्यकता होती है। यह थोड़ा कठोर हो सकता है, लेकिन यह सब बहुत अच्छे के लिए है। मैं इसकी पुरजोर सलाह देता हूँ।


14: Unordered List के साथ नेविगेशन व्रैप करें

Wrap navigation with unordered lists

प्रत्येक वेबसाइट पर किसी प्रकार का नेविगेशन अनुभाग होता है। आप निश्चित रूप से इसकी फोर्मेटिंग से बच सकते हैं:

मैं आपको इस मेथड का इस्तेमाल नहीं करने के लिए प्रोत्साहित करता हूं, सिमेंटिक कारणों के लिए। आपका काम सबसे अच्छा संभव कोड लिखना है जिसमे आप सक्षम हैं।

हम एक Unordered List के अलावा किसी अन्य चीज़ के साथ नेविगेशन लिंक की LIST क्यों तैयार करेंगे?

UL टैग का उद्देश्य आइटम्स की एक लिस्ट को शामिल करना है।

बेहतर


15: जानें कैसे IE लक्षित करें

आप निस्संदेह अपने आप को किसी पॉइंट या अन्य के दौरान IE पर चिल्लाएंगे। यह वास्तव में कम्युनिटी के लिए एक बॉन्डिंग अनुभव बन गया है। जब मैं Twitter पर पढ़ता हूं कि मेरे एक दोस्त IE की फोर्सेज से जूझ रहा है, तो मैं सिर्फ मुस्कुराता हूं और सोचता हूं, "मुझे पता है कि आप कैसा महसूस करते हैं, दोस्त।"

पहला चरण, एक बार जब आप अपनी प्राथमिक CSS फ़ाइल पूरी कर लें, तो एक अनूठी "ie.css" फ़ाइल बनाइए। फिर आप केवल निम्न कोड का उपयोग कर इसे IE के लिए संदर्भ कर सकते हैं।

यह कोड कहता है, "यदि यूजर का ब्राउज़र इंटरनेट एक्सप्लोरर 6 या उससे कम है, तो यह स्टाइलशीट आयात करें। अन्यथा, कुछ भी नहीं करें।" अगर आपको IE 7 के लिए भी क्षतिपूर्ति की आवश्यकता है, तो "lt" को "lte" (कम या बराबर) की जगह ले लीजिए।


16: एक महान कोड एडिटर चुनें

choose a great code editor

चाहे आप Windows या Mac पर हों, आपके पास शानदार कोड एडिटर हैं जो आपके लिए शानदार काम करेंगे। निजी तौर पर, मेरे पास एक Mac और PC है जो मैं अपने पूरे दिन उपयोग कर रहा हूं। नतीजतन, मैंने क्या उपलब्ध है का एक बहुत अच्छा ज्ञान विकसित किया है। क्रम में मेरे शीर्ष विकल्प/सिफारिशें हैं:

Mac Lovers

PC Lovers


17: वेबसाइट पूरी हो जाने के बाद, कंप्रेस करें!

Compress

अपनी CSS और जावास्क्रिप्ट फाइलों को ज़िप करके, आप प्रत्येक फ़ाइल का आकार 25% या उससे अधिक घटा सकते हैं। कृपया डेवलपमेंट के दौरान अभी भी ऐसा करने पर परेशान न हो। हालांकि, एक बार साइट अधिक या कम, पूर्ण होती है, कुछ बैंडविड्थ को बचाने के लिए कुछ ऑनलाइन कंप्रेस प्रोग्राम्स का उपयोग करता है।

Javascript Compression Services

CSS Compression Services


18: कट, कट, कट

cut cut cut

मेरी पहली वेबसाइट पर वापस देख रहे हैं, मुझे डिवाइटिस का एक गंभीर मामला होगा। आपकी नेचुरल इंस्टिंक्ट एक div के साथ प्रत्येक पैराग्राफ को सुरक्षित रूप से व्रैप कर लेना है, और फिर इसे अच्छे उपाय के लिए एक और div के साथ व्रैप करो। जैसा कि आप जल्दी से सीख लेंगे, यह अत्यधिक अक्षम है।

एक बार जब आप अपना मार्कअप पूरा कर लें, तो इसे दो बार से ऊपर जाएं और पेज पर एलिमेंट्स की संख्या कम करने के तरीके ढूंढें। क्या उस UL को वास्तव में अपनी रैपिंग की जरूरत है? मुझे नहीं लगता।

जैसे कि लिखने की के "कट, कट, कट" है, वही आपके मार्कअप के लिए सही है।


19: सभी इमेज को रिक्वायर्ड "Alt" ऐट्रिब्यूट्स

इमेज टैग के भीतर alt एट्रिब्यूट्स की आवश्यकता को अनदेखा करना आसान है। फिर भी, एक्सेसिबिलिटी और वेलिडेशन के कारणों के लिए यह बहुत महत्वपूर्ण है, कि आप इन सेक्शंस को भरने के लिए अतिरिक्त समय लेते हैं।

खराब

बेहतर


20: देर से रहो

मुझे बहुत संदेह है कि मैं केवल एक ही हूँ, जो सीखने के एक बिंदु पर, ऊपर देखता है और महसूस करता है कि मैं एक पिच-अंधेरे कमरे में अच्छी तरह से जल्दी, सुबह जल्दी में था। यदि आपने खुद को ऐसी ही स्थिति में पाया है, तो बाकी का आश्वासन दिया कि आपने सही क्षेत्र चुना है।

आश्चर्यजनक "AHHA" पल, मेरे लिए कम से कम, रात में देर हो जाती है। यह तब मामला था जब मैंने पहली बार समझना शुरू कर दिया था कि जावास्क्रिप्ट बंद कैसे हुआ था। यह एक महान भावना है कि आपको अनुभव करने की आवश्यकता है, अगर आपके पास पहले से नहीं है।


21: सोर्स देखें

view source

अपने नायकों की कॉपी बनाने के बजाय HTML सीखने का बेहतर तरीका क्या है? शुरू में, हम सभी copiers रहे हैं! फिर धीरे-धीरे, आप अपनी खुद के स्टाइल/मेथड्स को विकसित करना शुरू करते हैं। तो उन लोगों की वेबसाइटों पर जाएं जिनके बारे में आप सम्मान करते हैं। उन्होंने इस और उस खंड को कैसे कोड दिया? जानें और उनसे कॉपी करें। हम सबने किया, और आपको भी करना चाहिए। (डिजाइन चोरी न करें, बस कोडिंग स्टाइल से सीखिए।)

किसी भी कूल जावास्क्रिप्ट इफ़ेक्ट को नोटिस किया जिसे आप जानना चाहते हैं? ऐसा लगता है कि वह इफ़ेक्ट को पूरा करने के लिए एक प्लगइन का उपयोग कर रहे है। सोर्स देखें और स्क्रिप्ट के नाम के लिए हेड टैग खोजें। फिर इसे Google करें और अपनी साइट पर इम्प्लीमेंट करें! वाह।


22: सभी एलिमेंट्स को स्टाइल करें

ग्राहकों के लिए डिजाइन करते समय यह सबसे अच्छा अभ्यास विशेष रूप से सच है। सिर्फ इसलिए कि आपने blockquote का उपयोग नहीं किया है इसका मतलब यह नहीं है कि ग्राहक नहीं करेगा। कभी भी ordered list का उपयोग न करें? इसका मतलब यह नहीं है कि वह नहीं होगा! अपने आप एक सर्विस करें और विशेष रूप से एक विशेष पेज बनाएं जिससे कि प्रत्येक एलिमेंट का स्टाइल दिखाया जा सके: ul, ol, p, h1-h6, blockquotes आदि।


23: ट्विटर का उपयोग करें

Use Twitter

हाल ही में, मैं ट्विटर पर कोई संदर्भ सुनकर टीवी को चालू नहीं कर सकता; यह सचमुच अप्रिय हो गया है। मेरे पास लैरी किंग की बात सुनने की इच्छा नहीं है, जो अपने ट्विटर अकाउंट का विज्ञापन करता है - जिसे हम सभी जानते हैं कि वह मैन्युअल रूप से अद्यतन नहीं करता है। सहायक के लिए Yay! इसके अलावा, कितने माताओं ने ओपरा के अनुमोदन के बाद खातों के लिए साइन अप किया? हम केवल उस दिन के लिए लंबे समय तक कर सकते हैं जब हम में से कुछ ही थे जो सेवा के बारे में जानते थे और इसकी "पानी की कूलर" क्षमता।

प्रारंभ में, ट्विटर के पीछे का विचार "आप क्या कर रहे थे" पोस्ट करना था। यद्यपि यह अभी भी थोड़ी सी हद तक सही है, यह हमारे उद्योग में एक नेटवर्किंग उपकरण अधिक हो गया है। अगर एक वेब डेव लेखक जो मुझे प्रशंसा करता है कि वह किसी लेख के लिंक को पोस्ट करता है, तो उसे अच्छा लगता है कि मैं इसे अच्छी तरह से जांचने जा रहा हूं - और आपको भी चाहिए! यही कारण है कि Digg जैसी साइटें अधिक से अधिक नर्वस हो रही हैं।

Twitter Snippet

यदि आप अभी साइन अप करते हैं, तो हमें फॉलो करना भूल जाएं: NETTUTS


24: फ़ोटोशॉप सीखें

Learn Photoshop

Nettuts+ पर एक हालिया कमेंटर ने Psdtuts+ से कुछ सिफारिशें पोस्ट करने के लिए हम पर हमला किया। उन्होंने तर्क दिया कि फ़ोटोशॉप ट्यूटोरियल का कोई वेब डेवलपमेंट ब्लॉग नहीं है। मुझे उसके बारे में निश्चित नहीं है, लेकिन फ़ोटोशॉप मेरे कंप्यूटर पर बहुत अधिक 24/7 है।

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

  1. Psdtuts+ पर वीडियो अनुभाग पर जाएं
  2. Lynda.com के लिए एक महीने की सदस्यता के लिए साइन अप करने के लिए 25 डॉलर से अधिक कांटा होगा। प्रत्येक वीडियो को आप देख सकते हैं।
  3. "आप फ़ोटोशॉप पर टिकें" श्रृंखला का आनंद लें।
  4. जितने भी आप कर सकते हैं उतने PS कीबोर्ड शॉर्टकट को याद करने के लिए कुछ घंटों का समय लें।

25: प्रत्येक HTML टैग को सीखें

सचमुच दर्जनों HTML टैग हैं जो आपके सामने हर दिन नहीं आएंगे। फिर भी, इसका मतलब यह नहीं है कि आपको उन्हें सीखना नहीं चाहिए! क्या आप "abbr" टैग से परिचित हैं? "cite" के बारे में क्या? इन दो अकेले आपके tool-chest में एक स्थान के योग्य हैं। उन सभी को जानें!

वैसे, यदि आप ऊपर सूचीबद्ध दो से अपरिचित हैं:

  • abbr वो करता है जिसकी आप उम्मीद करते हैं। यह एक abbreviation को संदर्भित करता है। "Blvd" को टैग में लपेटा जा सकता है क्योंकि यह "boulevard" का संक्षिप्त नाम है।
  • cite कुछ काम के शीर्षक के संदर्भ में प्रयोग किया जाता है। उदाहरण के लिए, यदि आप इस लेख को अपने ब्लॉग पर संदर्भ देते हैं, तो आप एक टैग के भीतर "30 HTML Best Practices for Beginners" डाल सकते हैं। ध्यान दें कि इसका रिफरेन्स किसी लेखक के संदर्भ में नहीं किया जाना चाहिए। यह एक आम धारणा है।

26: कम्युनिटी में हिस्सा लेना

जैसे ही हमारी तरह की साइट वेब डेवलपर के ज्ञान को आगे बढ़ाने में बहुत योगदान देती है, आपको भी करना चाहिए! अंत में पता चला कि कैसे अपने एलिमेंट को सही ढंग से float करने करें? दूसरों को सिखाने के लिए पोस्ट करने वाला एक ब्लॉग बनाएं। हमेशा आपके साथ कम अनुभव वाले लोग होंगे। न केवल आप समुदाय में योगदान करेंगे, लेकिन आपको खुद को भी सिखाना होगा। कभी ध्यान दें कि जब तक आपको इसे सिखाने के लिए मजबूर नहीं किया जाता तब तक आप वास्तव में कुछ समझ नहीं पाते हैं?


27: एक CSS रीसेट का प्रयोग करें

यह एक ऐसा क्षेत्र है जिसे मौत पर बहस किया गया है। CSS रीसेट: का उपयोग करें या नहीं; यह सवाल है। अगर मैं अपनी खुद की निजी सलाह देना चाहता हूं, तो मैं 100% सिफारिश करता हूं कि आप अपनी खुद की रीसेट फाइल बनाएं। एरिक मेयर की तरह एक लोकप्रिय ऐप डाउनलोड करके शुरू करें, और फिर धीरे-धीरे, जैसा कि आप अधिक सीखते हैं, इसे अपने आप में संशोधित करना शुरू करते हैं। यदि आप ऐसा नहीं करते हैं, तो आप सच में नहीं समझ पाएंगे कि आपकी सूची आइटम उस अतिरिक्त पैडिंग को क्यों प्राप्त कर रहे हैं, जब आपने इसे अपने CSS फ़ाइल में कहीं भी निर्दिष्ट नहीं किया। खुद को क्रोध से बचाओ और सब कुछ रीसेट करें! यह आपको शुरू करना चाहिए।

28: Line 'em Up!


Line em up

आम तौर पर बोलना, आपको अपने एलिमेंट्स को यथासंभव सर्वोत्तम लाइन बनाने का प्रयास करना चाहिए। आप पसंदीदा डिजाइनों पर एक नज़र डालें। क्या आपने देखा कि प्रत्येक हैडिंग, आइकन, पैराग्राफ, और logo लाइन्स पर कुछ और के साथ कैसे हैं? ऐसा नहीं करना बिगिनर के सबसे बड़े संकेतों में से एक है। इसके बारे में सोचें: अगर मैं पूछता हूं कि आपने उस स्थान पर एक एलिमेंट क्यों रखा है, तो मुझे सही कारण बताएं।


29: एक PSD को स्लाइस करें

Slice a PSD

ठीक है, तो आपने HTML, CSS, और फ़ोटोशॉप का ठोस समझ हासिल कर लिया है। अगला कदम अपने पहले PSD को एक कार्यशील वेबसाइट में परिवर्तित करना है। चिंता न करें; यह मुश्किल नहीं है जितना आप सोच रहे हैं। मैं अपने कौशल को परीक्षण के लिए रखने का एक बेहतर तरीका नहीं सोच सकता। यदि आपको सहायता की आवश्यकता है, तो इन गहन वीडियो ट्यूटोरियल्स की समीक्षा करें जो आपको दिखाता है कि काम कैसे पूरा किया जाए।


30: एक फ्रेमवर्क का प्रयोग न करें ... फिर भी

फ़्रेमवर्क, चाहे वे जावास्क्रिप्ट या CSS के लिए शानदार हों; लेकिन पहली बार शुरू करने पर कृपया उनका उपयोग न करें। यद्यपि यह तर्क दिया जा सकता है कि jQuery और जावास्क्रिप्ट को एक साथ सीखा जा सकता है, ऐसा CSS के लिए नहीं किया जा सकता है। मैंने व्यक्तिगत रूप से 960 CSS फ्रेमवर्क को बढ़ावा दिया है, और इसे अक्सर उपयोग किया है। अगर आप अभी भी CSS सीखने की प्रक्रिया में हैं - पहले वर्ष का मतलब है - अगर आप उनमे से एक का उपयोग करते हैं तो आप केवल खुद को और अधिक भ्रमित कर देंगे।

CSS फ़्रेमवर्क्स अनुभवी डेवलपर्स के लिए हैं जो खुद का थोड़ा समय बचाना चाहते हैं। वे बिगिनर के लिए नहीं हैं।

  • ट्विटर पर हमें फॉलो करें, या अधिक दैनिक वेब डेवलपमेंट tuts और लेख के लिए NETTUTS RSS Feed की सदस्यता लें।


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.