मैं वेब विकास कैसे सीख सकता हूं?


22

मुझे वेब विकास सीखने में बहुत दिलचस्पी है और कुछ साल पहले W3Schools से HTML और CSS के बारे में कुछ बुनियादी बातें सीखी हैं, लेकिन मैंने कभी यह नहीं सीखा कि ऐसी वेबसाइटें कैसे विकसित की जाएं जो आज के मानकों तक की हैं, यानी बिना तालिका के उपयोग के मुक्त-प्रवाह वाली साइटें साइट के डिजाइन को नियंत्रित करने के लिए।

कुछ अच्छे संसाधन क्या हैं जिनसे मैं शुरू कर सकता हूं?


4
मेरा सुझाव है कि W3Schools को एक शिक्षण उपकरण के रूप में टालें। आप यहाँ क्यों पढ़ सकते हैं: meta.stackexchange.com/questions/87678/…
aslum

1
मेरा सुझाव है कि यदि w3schools आपके लिए काम करता है तो आप इसका उपयोग करते हैं। हाँ एक मौका है कुछ एक्यूरेट नहीं है, कोई भी इसका परफेक्ट नहीं है। मैंने उन्हें कुछ पृष्ठों पर कुछ समस्याएँ बताई हैं जहाँ मुझे एक त्रुटि का पता चला है। बहुत सारे लोगों ने इस साइट पर मेरे आदिम अंग्रेजी कौशल को सही किया है। मैं भी कुछ साल पहले w3C ही जब एक नया मसौदा शुरू किया गया था कुछ साल पहले एक liiitle बिट में भाग लिया है। किसी साइट को "बैन" करने की कोशिश में कोई पॉंट नहीं है, लेकिन इसे सुधारने के लिए।
राफेल

जवाबों:


12

सीएसएस ज़ेन गार्डन

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

पुस्तकें

जब किताबों से सीखने की बात आती है तो यह बहुत अच्छी शुरुआत सीएसएस: द मिसिंग मैनुअल जैसी लगती है ।

इंटरनेट

मैंने पढ़ा स्मैशिंग पत्रिका इंटरनेट कि उदाहरण के एक बहुत प्रदान करता है और दृष्टिकोण पर। यह डिजाइन व्यवसाय से वेब डिजाइन और एक जैसे महान दृष्टिकोणों तक लेखों को फैलाता है।


25

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

मैंने वेब विकास सीखने में रुचि रखने वाले लोगों के लिए कुछ अन्य सिफारिशें भी लिखी हैं , जिन्हें आपको शुरू करने से पहले पढ़ना चाहिए।

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


मुफ्त में वेब विकास की मूल बातें सीखने के लिए बहुत अच्छी जगहें हैं। यहां से शुरू करें, लेकिन उन चीजों के साथ खेलने के लिए जिन्हें वे सीधे नहीं सिखाते हैं, उनके साथ शाखा करें। कुछ के माध्यम से जाने के बाद, खरोंच से अपने दम पर अन्य साइटों / परियोजनाओं को बनाने का प्रयास करें। ऐसा करने से अवधारणाओं को सुदृढ़ किया जाएगा, आपको कार्यान्वयन विवरण पढ़ाया जाएगा, और संभवत: आपको अतिरिक्त चीजें भी सिखाई जाएंगी। आप केवल एक अच्छा डेवलपर या डिज़ाइनर नहीं बन सकते हैं केवल पढ़ने से, आपको बनाना होगा !

मैंने वेब विकास सीखने वाले डिजाइनरों के लिए एक क्रैश कोर्स बनाया

इसकी जांच - पड़ताल करें! वे एक डिज़ाइन आधारित ऑडियंस के लिए तैयार हैं, लेकिन सीखने वाले किसी पर भी लागू होते हैं। वे स्लाइड / पोस्ट / वीडियो में मूल बातें सिखाते हैं और फिर वास्तविक दुनिया के सामने के अंत के विकास को सिखाने के लिए प्रत्येक के अंत में एक छोटी सी परियोजना सौंपते हैं।


अन्य अच्छी ट्यूटोरियल वेबसाइटें

  • CodeAcademy - कई भाषाओं के सामान्य ज्ञान की मूल बातें।
  • मोज़िला की "लर्निंग द वेब" श्रृंखला - यह शुरुआती स्तर पर शुरू होती है और आपको कुछ और जटिल विषयों में मार्गदर्शन कर सकती है। महान संसाधन, मैं इसकी अत्यधिक अनुशंसा करता हूं।
  • उदारण - सामान्य वेब विकास वर्ग।
  • Tuts + - अधिक विशिष्ट विषयों पर ट्यूटोरियल।
  • खानअकेडमी - मैंने इसे व्यक्तिगत रूप से उपयोग नहीं किया है, लेकिन यह हर दिन बेहतर हो रहा है।

W3Schools का उपयोग न करें , यह आम तौर पर पुराना है और बहुत त्रुटि वाला है। इसके बजाय, जब आप किसी विशिष्ट चीज़ की तलाश कर रहे हों, तो नीचे दी गई डॉक्यूमेंट साइटों में से एक को सीखने के लिए ऊपर की तरह एक ट्यूटोरियल वेबसाइट का उपयोग करें।


प्रलेखन

संपत्तियों, पुस्तकालयों के लिए प्रलेखन को देखते हुए, और यह एक अच्छा वेब डेवलपर बनने के लिए महत्वपूर्ण है। निम्नलिखित उन सर्वोत्तम डॉक्स में से हैं जिनका आप उपयोग कर सकते हैं:

  • W3.org - वेब ब्राउज़र द्वारा कार्यान्वित सबसे अधिक चीजों के लिए आधिकारिक दस्तावेज। इन डॉक्स को पढ़ना सीखना बहुत महत्वपूर्ण है! यह किसी भी तरह से W3Schools से संबद्ध नहीं है।
  • मोज़िला डॉक्स - फ़ायरफ़ॉक्स के रचनाकारों से एक बहुत विश्वसनीय 3 पार्टी संसाधन जो आज तक रहता है।
  • WHATWG.org - W3 के लिए ओपन सोर्स प्रतियोगी का एक प्रकार; कुछ ब्राउज़र W3 में कई बार यहाँ से कुछ सुझावों को लागू करते हैं।
  • DevDocs - आधिकारिक नहीं है, लेकिन एक साइट पर बहुत सारी भाषाएं डॉक्स हैं। काफी सुविधाजनक।

उपयोगी फ़ीड्स

  • WebPlatformDaily - हर दिन अपडेट की जाने वाली वेब (सप्ताहांत को छोड़कर) से संबंधित समाचारों की एक सूची।
  • साइटप्वाइंट - विभिन्न चीजों पर वास्तव में उपयोगी लेख।
  • WebDesignerDepot - स्पैम के पक्ष में हो सकते हैं, लेकिन उनके अधिकांश वास्तविक लेख अच्छे हैं।
  • मुंहतोड़ पत्रिका - अधिक उन्नत विषय, लेकिन ज्यादातर सभी अच्छे पढ़ते हैं।
  • सूची सूची - ब्लॉग रूप में थोड़ा अधिक उन्नत ज्ञान।

संपादकों

छोटे प्रोजेक्ट / कोड के साथ खेलना

  • JSFiddle - थोड़ा प्रोजेक्ट बनाएं और उन पर नज़र रखें।
  • कोडपेन - दूसरे लोगों के कोड डूडल को देखें और दूसरों को देखने के लिए अपना खुद का सबमिट करें।

पूर्ण पाठ संपादक


अन्य उपयोगी वेबसाइट

  • मेरे संसाधन पृष्ठ - मेरे द्वारा संकलित संसाधनों की एक सूची, एक वेब ब्राउज़र में भिन्न करने के लिए अलग-अलग तरीकों के विश्लेषण के लिए एक इंट्रो के लिए उत्तरदायी डिजाइन से लेकर है।
  • फ्रंट-एंड डेवलपर हैंडबुक - फ्रंट-एंड विषयों की एक विस्तृत श्रृंखला को कवर करने वाले पदों का अधिक विविध लेकिन सहायक संग्रह।
  • WebFieldManual - सहायक संसाधनों का एक बड़ा संग्रह।
  • StackOverflow - यदि आपके पास एक विशिष्ट प्रोग्रामिंग से संबंधित प्रश्न है, तो StackOverflow आपकी सहायता प्राप्त करने के लिए बेजोड़ है।
  • LearnLayout - CSS में लेआउट करने के बारे में कुछ मूल बातें जानें।
  • वेब डिज़ाइन में पोजिशनिंग - मेरे क्रैश कोर्स का हिस्सा जो शायद सबसे उपयोगी है।
  • 30 सीएसएस चयनकर्ताओं को आपको पता होना चाहिए - उन्हें जानें और बाद में समय बचाएं। आपके सीएसएस चयनकर्ता ज्ञान का परीक्षण करने के लिए एक शांत सा गेम भी है ।
  • सीड्रॉप सीएसएस संदर्भ - एक संक्षिप्त और सहायक संदर्भ पृष्ठ।
  • CodeMentor और थिंकफुल - वे साइटें जहाँ आप 1 पर 1 मेंट होने का भुगतान कर सकते हैं।

वेब डेवलपर और डिजाइनर के निजी ब्लॉगों को देखें जो आपको पसंद हैं। उनके पास अक्सर महान, महान सामग्री होती है।

मैंने UI डिज़ाइन में एक इंट्रो भी लिखा है जो बहुत उपयोगी हो सकता है। मैंने इसमें कुछ अतिरिक्त महान संसाधन जोड़े।


मैं पर्याप्त तनाव नहीं कर सकता, सीखने का सबसे अच्छा तरीका उन चीजों का निर्माण करना है जो आपकी सीमाओं को धक्का देते हैं और लगातार ऐसा करते हैं

मददगार वेब संबंधित साइटों की एक और भी बड़ी (और शायद भारी) सूची के लिए, WebDesignRepo चेकआउट करें !


1
मैं Lynda.com जोड़ूंगा। जहां तक ​​संपादकों की बात है अगर आप मैक पर हैं तो आपको BBEdit प्राप्त करना चाहिए या मुफ्त संस्करण टेक्स्टमेट का उपयोग करना चाहिए।
DᴀʀᴛʜVᴀᴅᴇʀ

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

@ जेनडॉए 1337 जो आप से पूछते हैं पर निर्भर करता है। कई बार एक रूपरेखा सीखना आसान होता है और एक तेज तैनाती के लिए सहायता करता है। इसके अलावा, एक फ्रेमवर्क की मूल बातें सीखने के बाद, आप वापस आ सकते हैं और ओवरटाइम को मोड़ सकते हैं क्योंकि आपको यह समझना चाहिए कि क्या रूपरेखा अच्छी तरह से अपनाई गई है और बेहतर विकल्प मौजूद हैं।
DᴀʀᴛʜVᴀᴅᴇʀ

@Darth_Vader यही कारण है कि मैंने कहा कि यह मेरी सलाह थी;) मेरा व्यक्तिगत अनुभव है कि लोग आम तौर पर वापस नहीं जाते हैं और मूल बातें सीखते हैं, उन्हें कुछ हिस्सों में ज्ञान की कमी के साथ छोड़ देते हैं।
ग्रीष्मकालीन

4

वेब डिज़ाइन (लेआउट समाधान, प्रयोज्य, ग्राफिक्स और तकनीकी समाधान) के बारे में सीखने के लिए मेरे लिए सबसे अच्छी जगहें हैं:

उन वेबसाइट पर लेख लिखने वाले लोगों की सभी वेबसाइट देखें:

24ways.org के अलावा एक सूची

या सूची डिजाइन के बारे में कुछ और अधिक तकनीकी, और अस्थायी http://css.maxdesign.com.au/index.htm

आपको यह जानना होगा कि वेब मानक क्या हैं। आधिकारिक स्रोत यह है: वर्ल्ड वाइड वेब कंसोर्टियम (w3c) यह वहां से सीखने के लिए थोड़ा मुश्किल है क्योंकि यह अत्यधिक तकनीकी है, लेकिन जब आप वेब पर काम करना चाहते हैं तो यह जानना चाहते हैं कि यह जानना अच्छा है। मानकों के बारे में। सबसे उपयोगी चीज यह आपके HTML कोड का सत्यापनकर्ता है।

एक सबसे अच्छा तरीका यह है कि अच्छी वेबसाइटों के स्रोत कोड पर एक अच्छी नज़र डालें, और स्वाभाविक रूप से उन चीजों के अनुपात को संरेखित करें जैसे कि गुर सीखने के लिए: http://www.cssbeauty.com/

और अच्छे वेब डिज़ाइनरों की वेबसाइट देखें और वे क्या कर रहे हैं:

जेसन सांता मारिया
डस्टिन कर्टिस
जोशुआ डेविस
डेविड डीसंद्रो
http://www.thinkingforaliving.org/
आदि ...

और मेरे स्वादिष्ट बुकमार्क (चीजों की एक किस्म है, आपको उनके माध्यम से खुदाई करनी है और आपको जो कुछ भी ज़रूरत नहीं है उसे स्किम करना होगा) http://www.delicious.com/Littlemad/webdesign


3

इससे पहले कि आप उन सभी रूपरेखाओं को सीखना शुरू करें ...

मैं आपका ध्यान वेब डिज़ाइन के डिज़ाइन भाग की ओर पुनर्निर्देशित करना चाहता हूँ ।

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

इसीलिए मैं आपको सलाह दूंगा कि आप डिजाइन की मूल बातें सीखें और अपने दम पर लागू करने की कोशिश करें।

आप अपने दम पर (सुंदर) वेबसाइट कैसे बनाते हैं?

अब यह एक पुस्तक के लायक सवाल है, लेकिन यहाँ कुछ संकेत हैं:

  1. डिजाइन के मूल सिद्धांतों के बारे में पढ़ें । वेब डिज़ाइन में यह 7-स्टेप प्राइमर आपको आरंभ करने में मदद करनी चाहिए। साथ ही, स्मैशिंग मैगज़ीन पर लेखों की यह श्रृंखला
  2. अन्य लोगों के डिजाइनों का निरीक्षण करें । बुनियादी सिद्धांतों का उन्होंने क्या उपयोग किया और कैसे? लेकिन केवल निरीक्षण न करें , अपनी टिप्पणियों पर ध्यान दें
  3. व्यापार लक्ष्य को ध्यान में रखकर डिजाइन करें । एक वेब डिज़ाइन एक व्यवसाय को अपने लक्ष्य को महसूस करने और उपयोगकर्ता को अपना लक्ष्य प्राप्त करने में मदद करने के लिए मौजूद है । जब 2 लक्ष्य जुटते हैं, तो हर कोई खुश होता है। तो, वह लक्ष्य हमेशा आपका शुरुआती बिंदु होना चाहिए। आपको प्रत्येक डिज़ाइन निर्णय को आधार बनाना चाहिए जो आप इस लक्ष्य पर बनाते हैं - फ़ॉन्ट विकल्प, रंग विकल्प, लेआउट, आदि।
  4. सुनिश्चित करें कि आपके पूरे डिजाइन में सामंजस्य है। सामान्य तौर पर, इसका मतलब है कि आप जो संदेश भेजना चाहते हैं, उसके बीच सामंजस्य, रंग, फ़ॉन्ट, वेबसाइट और ब्रांड का मिजाज। अपने आकार के निर्णयों को निर्देशित करने के लिए एक मॉड्यूलर पैमाने का उपयोग करके अपने डिजाइनों में सामंजस्य स्थापित करना शुरू करें। यह लघु-श्रृंखला सद्भाव और मॉड्यूलर पैमाने का उपयोग करने के बारे में अधिक बताती है।
  5. टाइपोग्राफी के लिए यह अद्भुत परिचय पढ़ें : बटरिक की प्रैक्टिकल टाइपोग्राफी या, कम से कम, इसका सारांश

खरोंच से डिजाइन करने की कोशिश करें

अब, जब आप इन सभी चीजों के बारे में पढ़ रहे हैं और आप HTML और CSS जानते हैं, तो आप अपना खुद का बहुत ही सरल डिजाइन कर पाएंगे।

काले और सफेद रंग में, केवल पाठ के साथ एक ही पृष्ठ को डिज़ाइन करने का प्रयास करें

सिर्फ पाठ क्यों? क्योंकि वेब पर संदेश भेजने के लिए पाठ अब तक का सबसे अधिक इस्तेमाल किया जाने वाला माध्यम है। इसलिए, यह आपके लिए एक वेब डिजाइनर के रूप में मौलिक है, जो पाठ को अच्छा बनाने में सक्षम हो और पढ़ने के लिए एक खुशी हो।

काले और सफेद क्यों? क्योंकि रंग चुनना अभी तक एक और जानवर है। छोटे कदम उठाने से आप अपने द्वारा की जा रही प्रगति के बारे में खुश महसूस करेंगे और आपको जल्दी सीखने में मदद मिलेगी।

आपके द्वारा सीखे गए मूल डिजाइन सिद्धांतों को लागू करें + अन्य लोगों के डिजाइनों की टिप्पणियों का उपयोग करें + उस पृष्ठ के लक्ष्य के बारे में सोचें + पाठ का आकार एक मॉड्यूलर पैमाने का उपयोग करके।


"मैं वेब डिज़ाइन के डिज़ाइन भाग की ओर आपका ध्यान आकर्षित करना चाहता हूं" ओह माय गॉड, इस सेंटी में कितना ज्ञान है! इसके लिए इस साइट पर पर्याप्त खुश चेहरे नहीं हैं: ओ)
राफेल

1

सीखने का सबसे अच्छा तरीका चीजें बना रहा है ताकि खुद को एक वेबसाइट बना सकें।

मानकों को पढ़ें , एलिस्टापार्ट , टट्सप्लस

यदि आपको SitePoint के HTML - स्वप्नलोक: सीडिंग के बिना टेबल्स के बिना डिजाइनिंग पर एक पुस्तक देखने की आवश्यकता है ।

Csszengarden और W3Schools के बारे में कुछ विचार ।


अवधारणाओं की तरह लगता है, लेकिन लगता है कि क्या चाहता है शब्दार्थ है और वास्तव में कदम से कदम सरल है।
dkuntz2

0

ईमानदारी से, मैं वर्डप्रेस साइटों को विकसित करने का तरीका सीखकर शुरू करूंगा। हां, मैं HTML, CSS, PHP, ... का उपयोग करके एक साइट को कोड कर सकता हूं, लेकिन मैं एक वर्डप्रेस साइट को तेजी से एक साथ रख सकता हूं और फिर आवश्यकतानुसार मुझे अनुकूलित कर सकता हूं।

अगर आप आज के मानकों को सीखना शुरू करना चाहते हैं तो मैं http://nettuts.com/ की सलाह दूंगा । प्रीमियम सदस्यता प्राप्त करने और कुछ महान ट्यूटोरियल तक पहुंच प्राप्त करना भी फायदेमंद होगा। अगर PSD से HTML में जा रहे हैं तो कुछ ऐसा है जिसमें आप रुचि रखते हैं, वे इसे कवर करते हैं।

Nettuts Envato का हिस्सा है। Envato में कई ट्यूटोरियल साइट हैं जो वेब डेवलपमेंट, वर्डप्रेस, वैक्टर, फोटो और वीडियो एडिटिंग और बहुत कुछ कवर करती हैं। यह एक शानदार जगह है।

बस मेरे 2 सेंट।


2
"ईमानदारी से, मैं वर्डप्रेस साइटों को विकसित करना सीखना शुरू करूंगा। हां, मैं HTML, CSS, PHP ... का उपयोग करके साइट को कोड कर सकता हूं" वर्डप्रेस साइट विकसित करने के लिए आपको CSS और HTML दोनों के साथ काम करना होगा, निश्चित रूप से?
e100

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

-3

वेब डिज़ाइन पर फ़ोटोशॉप के शुरुआती लोगों के लिए, मैं इस साइट की सिफारिश करूंगा http://psdvibe.com/


-3

ट्यूटोरियल के टन के साथ वेबसाइटों की एक बहुत हैं। हालांकि, वेबसाइड सीखने का सबसे अच्छा प्लेटफॉर्म http://teamtreehouse.com/ है । आशा करता हूँ की ये काम करेगा! Nik


2
जब तक यह सैद्धांतिक रूप से सवाल का जवाब दे सकता है, यह बेहतर होगा यदि आप कुछ शब्दों को शामिल कर सकते हैं कि यह विशेष साइट दूसरों की तुलना में बेहतर क्यों है ...
Farray
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.