PricingLoginStart free
Frontend Academy logo
HTMLशुरुआतीवेबस्तर A1 → C222 भाषाएँ

Frontend Academy

फ़्रंटएंड डेवलपमेंट अकादमी के साथ आकर्षक और उत्तरदायी वेबसाइटें विकसित कीजिए।. CoddyKit का सीखने का मार्ग, जिसमें 41 छोटे पाठ्यक्रम और 163 संवादात्मक पाठ हैं, साथ ही 24/7 एआई शिक्षक भी आपके साथ है।

पाठ्यक्रम
41
पाठ
163
संवादात्मक चरण
2,186
शुरुआत निःशुल्क
पाठ्यक्रम 1
GET IT ONGoogle PlayDownload on theApp Store
पाठ्यक्रम

इस मार्ग में 41 पाठ्यक्रम

सीखने के क्रम में Frontend Academy मार्ग के सभी पाठ्यक्रम। पहला मुफ़्त है।

1

A13 पाठमुफ़्त

समझें कि फ्रंटएंड डेवलपर वास्तव में क्या करते हैं, यह सबसे अधिक मांग वाले और रचनात्मक तकनीकी करियर में से एक क्यों है और HTML, CSS तथा JavaScript साथ मिलकर कैसे काम करते हैं।

  1. 1फ़्रंटएंड डेवलपमेंट क्या है
  2. 2फ़्रंटएंड की तकनीकी तिकड़ी
  3. 3फ़्रंटएंड डेवलपर के रूप में आपका भविष्य
निःशुल्क सीखना शुरू करें
2

A14 पाठPRO

वेब की नींव समझें: ब्राउज़र पृष्ठों का अनुरोध कैसे करते हैं, DNS क्या करता है, HTTP कैसे काम करता है और URL टाइप करने पर क्या होता है। अंत तक आप यह स्पष्ट रूप से जान जाएँगे कि एक भी पिक्सेल दिखाई देन…

  1. 1ब्राउज़र DNS और HTTP: अनुरोध का जीवनचक्र
  2. 2HTML, CSS और JavaScript: हर लेयर का काम
  3. 3पृष्ठ कैसे रेंडर होता है: DOM, CSSOM, लेआउट और पेंट
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
3

A14 पाठPRO

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

  1. 1दस्तावेज़ संरचना: DOCTYPE html head body
  2. 2अर्थपूर्ण टैग: header nav main article footer
  3. 3पाठ, चित्र, लिंक और सूचियाँ
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
4

A14 पाठPRO

आत्मविश्वास के साथ अपने HTML को शैली दें। जानें कि Cascade और विशिष्टता कैसे काम करते हैं, रंग और टाइपोग्राफ़ी लागू करें, बॉक्स मॉडल में दक्षता प्राप्त करें और डिस्प्ले गुणों व पोज़िशनिंग से लेआउट नि…

  1. 1सिलेक्टर और कैस्केड
  2. 2रंग, टाइपोग्राफी और बॉक्स मॉडल
  3. 3Display: block, inline, flex, grid की मूल बातें
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
5

A14 पाठPRO

अपने पहले JavaScript प्रोग्राम लिखें। चर घोषित करना, प्राथमिक डेटा प्रकारों के साथ काम करना, फ़ंक्शन परिभाषित करना और शर्तों व लूप से प्रोग्राम प्रवाह नियंत्रित करना सीखें।

  1. 1वेरिएबल: let, const, var और स्कोप
  2. 2डेटा प्रकार: string, number, boolean, null, undefined
  3. 3फ़ंक्शन: घोषणाएँ, एक्सप्रेशन और ऐरो फ़ंक्शन
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
6

A14 पाठPRO

एक पेशेवर फ्रंटएंड डेवलपर की तरह काम करें। निरीक्षण और डीबगिंग के लिए Chrome DevTools में निपुण बनें, उपयोगी एक्सटेंशन के साथ VSCode कॉन्फ़िगर करें, और Prettier तथा ESLint जैसे कोड गुणवत्ता टूल सेट अ…

  1. 1Chrome DevTools: Elements, Console, Network
  2. 2VSCode: एक्सटेंशन, Emmet, शॉर्टकट
  3. 3Prettier और ESLint सेटअप
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
7

A24 पाठPRO

JavaScript में प्रकार जोड़ें और बग को ब्राउज़र तक पहुँचने से पहले पकड़ें। TypeScript की प्रकार प्रणाली सीखें, वेरिएबल और फ़ंक्शन में प्रकार-टिप्पणियाँ जोड़ें, इंटरफ़ेस परिभाषित करें, और tsconfig के स…

  1. 1TypeScript क्यों: Compile Time पर Types Bugs पकड़ते हैं
  2. 2Primitive Types, Unions और Type Aliases
  3. 3Interfaces और Object Types
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
8

A24 पाठPRO

JavaScript से अपने HTML को इंटरैक्टिव बनाएँ। तत्व चुनें, घटनाओं पर प्रतिक्रिया सुनें, सामग्री पढ़ें और बदलें तथा Document Object Model का उपयोग करके तत्वों को गतिशील रूप से बनाएँ या हटाएँ।

  1. 1querySelector और querySelectorAll
  2. 2addEventListener और Event ऑब्जेक्ट
  3. 3सामग्री बदलना: textContent, innerHTML, classList
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
9

A24 पाठPRO

ऐसे लेआउट बनाएँ जो किसी भी स्क्रीन आकार पर सही ढंग से काम करें। viewport मेटा टैग सीखें, लचीले लेआउट के लिए Flexbox और Grid का उपयोग करें, और मोबाइल-प्रथम दृष्टिकोण से मीडिया क्वेरी लिखें।

  1. 1व्यूपोर्ट मेटा टैग
  2. 2लेआउट के लिए Flexbox
  3. 3लेआउट के लिए CSS Grid
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
10

A24 पाठPRO

अपने HTML ज्ञान को और गहरा करें। ARIA विशेषताओं के साथ पूरी तरह सुलभ फ़ॉर्म बनाएँ, HTML5 के सभी input प्रकारों का उपयोग करें, अंतर्निहित सत्यापन का लाभ उठाएँ, और ऐसा मार्कअप लिखें जो सभी क्लाइंट को स…

  1. 1फ़ॉर्म नियंत्रण: input प्रकार, select, textarea
  2. 2ARIA और सुलभता: label, role, aria-*
  3. 3अर्थपूर्ण HTML5: semantic बनाम div soup
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
11

A24 पाठPRO

आधुनिक सिंटैक्स और शक्तिशाली अंतर्निर्मित विधियों के साथ अपने JavaScript कौशल को अगले स्तर तक ले जाएँ। map, filter और reduce से ऐरे में बदलाव करें, ऑब्जेक्ट को डिस्ट्रक्चर करें, डेटा को स्प्रेड करें,…

  1. 1Array Methods: map, filter, reduce, find
  2. 2Object Destructuring और Spread
  3. 3Template Literals और Optional Chaining
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
12

A24 पाठPRO

फ्रंटएंड डेवलपर के रूप में Git का प्रभावी उपयोग करें। काम सहेजने के मुख्य कमांड सीखें, फ़ीचर विकास के लिए शाखाओं को समझें, GitHub पर पुश करें, और पुल रिक्वेस्ट के माध्यम से सहयोग करें।

  1. 1git init, add, commit और status
  2. 2Branching: branch, checkout, merge
  3. 3Remote Repos: push, pull, clone
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
13

A24 पाठPRO

CSS मोशन के साथ इंटरफ़ेस में जीवंतता लाएँ। रखरखाव योग्य डिज़ाइन टोकन के लिए कस्टम प्रॉपर्टीज़ का उपयोग करें, स्थिति में बदलावों के लिए सहज संक्रमण जोड़ें, कीफ़्रेम ऐनिमेशन बनाएँ, और उपयोगकर्ताओं की म…

  1. 1CSS Custom Properties: घोषित करना और update करना
  2. 2Transitions: property, duration, timing
  3. 3@keyframes Animations
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
14

B14 पाठPRO

बुनियादी बातों से आगे बढ़कर CSS लेआउट में वास्तविक महारत हासिल करें। Flexbox के संरेखण और रैपिंग को गहराई से समझें, CSS Grid के टेम्पलेट क्षेत्रों और auto-fit का उपयोग करें, दोनों तकनीकों को मिलाएँ,…

  1. 1Flexbox गहन अध्ययन: संरेखण, रैपिंग, क्रम
  2. 2CSS Grid: template-areas, auto-fit, minmax
  3. 3Flexbox और Grid का संयोजन
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
15

B14 पाठPRO

आधुनिक JavaScript टूलचेन को समझें। ES मॉड्यूल सिंटैक्स का उपयोग करें, npm से पैकेज प्रबंधित करें, Vite के साथ तुरंत डेवलपमेंट सर्वर शुरू करें, और उन बंडलिंग अवधारणाओं को सीखें जो प्रोडक्शन बंडल को छो…

  1. 1ES Modules: import, export और dynamic import
  2. 2npm और package.json: dependencies, scripts
  3. 3Vite: dev server और build
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
16

B14 पाठPRO

TypeScript की प्रकार प्रणाली को और गहराई से समझें। पुनः उपयोग योग्य जेनेरिक फ़ंक्शन लिखें, इंटरफ़ेस बदलने के लिए यूटिलिटी प्रकारों का उपयोग करें, मैप किए गए और सशर्त प्रकार बनाएँ, और रनटाइम पर प्रकार…

  1. 1Generics: T extends और constraints
  2. 2Utility Types: Partial, Required, Pick, Omit
  3. 3Mapped Types और Conditional Types
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
17

B14 पाठPRO

अपने पहले React एप्लिकेशन बनाएँ। JSX सिंटैक्स समझें, फ़ंक्शनल कंपोनेंट से UI संयोजित करें, props से डेटा भेजें, और इंटरैक्टिव इंटरफ़ेस बनाने के लिए useState हुक से स्थानीय स्थिति प्रबंधित करें।

  1. 1JSX: Syntax और Transpilation
  2. 2Functional Components और Props
  3. 3useState Hook: State और Re-renders
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
18

B14 पाठPRO

React कंपोनेंट को बाहरी प्रणालियों के साथ समकालिक करें। useEffect के काम करने का तरीका सीखें, माउंट होने पर API से डेटा प्राप्त करें, लोड होने और त्रुटि की स्थितियाँ दिखाएँ, और AbortController के साथ…

  1. 1useEffect Basics: Dependencies और Cleanup
  2. 2Mount पर Data Fetch करना
  3. 3Loading और Error States संभालना
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
19

B14 पाठPRO

सिंगल-फ़ाइल कंपोनेंट का उपयोग करके अपने पहले Vue 3 एप्लिकेशन बनाएँ। Options API और मुख्य डायरेक्टिव सीखें, और props तथा emits से पैरेंट और चाइल्ड कंपोनेंट के बीच संवाद करना समझें।

  1. 1Vue SFC: script, template, style
  2. 2Options API: data, methods, computed
  3. 3Directives: v-if, v-for, v-bind, v-on
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
20

B14 पाठPRO

ऐसे इंटरफ़ेस बनाएँ जिनका उपयोग हर कोई कर सके। WCAG अनुरूपता के स्तर समझें, सुलभता की नींव के रूप में अर्थपूर्ण HTML का उपयोग करें, ARIA भूमिकाएँ और विशेषताएँ सही ढंग से लागू करें, और पूरी कीबोर्ड नेव…

  1. 1WCAG Levels: A, AA, AAA
  2. 2Semantic HTML: आधार
  3. 3ARIA Roles और Attributes
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
21

B24 पाठPRO

JavaScript की असमकालिक प्रोग्रामिंग को मूल स्तर से पूरी तरह सीखें। इवेंट लूप को समझें, कॉलबैक पैटर्न से Promises की ओर बढ़ें, और उचित त्रुटि प्रबंधन के साथ साफ़ async/await कोड लिखें।

  1. 1Event Loop: Call Stack, Queue, Microtasks
  2. 2Callbacks और Callback Hell
  3. 3Promises: then, catch, finally, Promise.all
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
22

B24 पाठPRO

React हुक API में पूरी तरह निपुण बनें। useContext से प्रॉप ड्रिलिंग के बिना डेटा साझा करें, useReducer से जटिल स्थिति प्रबंधित करें, useMemo और useCallback से प्रदर्शन बेहतर करें, और तर्क को कस्टम हु…

  1. 1Global State के लिए useContext
  2. 2Complex State के लिए useReducer
  3. 3Performance के लिए useMemo और useCallback
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
23

B24 पाठPRO

Composition API के साथ Vue 3 की पूरी शक्ति का उपयोग करें। प्रतिक्रियाशील स्थिति के लिए ref और reactive, व्युत्पन्न मानों और साइड इफ़ेक्ट के लिए computed और watch का उपयोग करें, और पुनः उपयोग योग्य कं…

  1. 1ref() और reactive()
  2. 2computed() और watch()
  3. 3setup() Function और script setup
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
24

B24 पाठPRO

पूरे एप्लिकेशन की स्थिति को प्रभावी ढंग से प्रबंधित करें। React के लिए Redux Toolkit, सरल विकल्प के रूप में हल्का Zustand, Vue के लिए Pinia, और यह तय करने के सिद्धांत सीखें कि वैश्विक स्थिति वास्तव म…

  1. 1Redux Toolkit: createSlice और configureStore
  2. 2Lightweight React State के लिए Zustand
  3. 3Vue के लिए Pinia: defineStore और storeToRefs
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
25

B24 पाठPRO

अपने फ्रंटएंड कोड के लिए स्वचालित परीक्षण लिखें। Jest सेट अप करें, Testing Library से React कंपोनेंट का परीक्षण करें, Vue कंपोनेंट का परीक्षण करें, और मॉड्यूल तथा API कॉल का मॉक बनाएँ ताकि परीक्षण ते…

  1. 1Jest Setup और Basic Tests
  2. 2@testing-library/react: render, userEvent
  3. 3@testing-library/vue: components mount करना
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
26

B24 पाठPRO

ऐसा CSS लिखें जो बड़े स्तर पर भी व्यवस्थित रहे। अनुमानित चयनकर्ताओं के लिए BEM नामकरण परंपरा सीखें, CSS Modules से शैलियों का दायरा सीमित करें, styled-components और Emotion से सीधे JavaScript में CSS…

  1. 1BEM Methodology: Block, Element, Modifier
  2. 2CSS Modules: Scoped Class Names
  3. 3CSS-in-JS: Styled-components और Emotion
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
27

B24 पाठPRO

अपने फ्रंटएंड को बैकएंड API से जोड़ें। सभी HTTP विधियों के लिए मूल Fetch API का उपयोग करें, इंटरसेप्टर और बेस URL के लिए Axios जोड़ें, HTTP त्रुटियों को सहजता से संभालें, और SWR या React Query से सर्…

  1. 1Fetch API: GET, POST, PUT, DELETE
  2. 2Axios: Interceptors और Base URL
  3. 3त्रुटि प्रबंधन: HTTP स्थिति कोड
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
28

B24 पाठPRO

Next.js के साथ प्रोडक्शन React एप्लिकेशन बनाएँ। Pages Router और आधुनिक App Router दोनों को समझें, Server और Client Components में अंतर करें, सही रेंडरिंग रणनीति चुनें, और सर्वरलेस API रूट जोड़ें।

  1. 1Pages Router बनाम App Router
  2. 2सर्वर कंपोनेंट और क्लाइंट कंपोनेंट
  3. 3SSG, SSR और ISR
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
29

B24 पाठPRO

Nuxt 3 के साथ पूर्ण-स्टैक Vue एप्लिकेशन बनाएँ। फ़ाइल-आधारित रूटिंग और ऑटो-इम्पोर्ट का उपयोग करके अनावश्यक प्रारंभिक कोड हटाएँ, कंपोज़ेबल से सर्वर डेटा प्राप्त करें, मॉड्यूल से कार्यक्षमता बढ़ाएँ, और…

  1. 1फ़ाइल-आधारित रूटिंग और ऑटो-इंपोर्ट
  2. 2useFetch और useAsyncData
  3. 3Nuxt मॉड्यूल: इमेज, प्रमाणीकरण, i18n
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
30

B24 पाठPRO

वेबसाइट को ऐप जैसे अनुभव में बदलें। इंस्टॉल किए जा सकने योग्य बनाने के लिए Web App Manifest लिखें, ऑफ़लाइन सहायता के लिए Service Workers पंजीकृत करें, कैशिंग रणनीतियाँ लागू करें, और पुश सूचनाएँ जोड़े…

  1. 1वेब ऐप मेनिफ़ेस्ट
  2. 2सर्विस वर्कर पंजीकरण और जीवनचक्र
  3. 3ऑफ़लाइन कैशिंग रणनीतियाँ: CacheFirst और NetworkFirst
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
31

B24 पाठPRO

रीयल-टाइम यूज़र इंटरफ़ेस बनाएँ। मूल WebSocket API का उपयोग करें, Socket.io क्लाइंट लाइब्रेरी को एकीकृत करें, एकतरफ़ा डेटा स्ट्रीम के लिए सर्वर-प्रेषित इवेंट प्राप्त करें, और आशावादी अपडेट जैसे लाइव ड…

  1. 1WebSocket API: open, message, close, error
  2. 2Socket.io क्लाइंट एकीकरण
  3. 3एकतरफ़ा स्ट्रीमिंग के लिए सर्वर-प्रेषित इवेंट
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
32

B24 पाठPRO

तेज़ी से बदलती JavaScript टूलचेन में महारत हासिल करें। प्लगइन से Vite का विस्तार करें और SSR के लिए उसका उपयोग करें, समझें कि esbuild इतनी गति कैसे प्राप्त करता है, pnpm से वर्कस्पेस प्रबंधित करें, औ…

  1. 1Vite: प्लगइन सिस्टम और SSR मोड
  2. 2esbuild: गति और सीमाएँ
  3. 3मोноरेपो के लिए pnpm वर्कस्पेस
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
33

C14 पाठPRO

अपनी साइट को तेज़ बनाएँ और सुधार को मापें। Core Web Vitals समझें, Lighthouse ऑडिट चलाएँ, वेब के लिए छवियों का अनुकूलन करें, और कोड विभाजन तथा आलसी लोडिंग से JavaScript पेलोड का आकार घटाएँ।

  1. 1Core Web Vitals: LCP, FID, CLS
  2. 2Lighthouse Audits और Scoring
  3. 3Image Optimization: lazy loading, formats, WebP
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
34

C14 पाठPRO

TypeScript को उसकी पूरी क्षमता तक ले जाएँ। टेम्पलेट लिटरल प्रकारों से प्रकार बनाएँ, React कंपोनेंट और हुक में सटीक जेनेरिक प्रकार-टिप्पणियाँ जोड़ें, असुरक्षित any के उपयोग को समाप्त करने के लिए सख्त…

  1. 1टेम्पलेट लिटरल प्रकार
  2. 2डेकोरेटर और मेटाडेटा
  3. 3React के साथ TypeScript: FC जेनेरिक हुक
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
35

C14 पाठPRO

React लाइब्रेरी के लेखकों की तरह कोड लिखें। Context पर आधारित कंपाउंड कंपोनेंट बनाएँ, साझा सरोकारों के लिए रेंडर प्रॉप्स और HOC लागू करें, Portals से ट्री के बाहर रेंडर करें, और Error Boundaries से क…

  1. 1Context के साथ कंपाउंड कंपोनेंट
  2. 2रेंडर प्रॉप्स और HOC पैटर्न
  3. 3मोडल और टूलटिप के लिए पोर्टल
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
36

C14 पाठPRO

पेशेवर एप्लिकेशन में उपयोग होने वाले Vue 3 के उन्नत पैटर्न में महारत हासिल करें। provide/inject से कंपोनेंट ट्री में तर्क साझा करें, Suspense से कंपोनेंट असमकालिक रूप से लोड करें, कस्टम डायरेक्टिव लि…

  1. 1निर्भरता इंजेक्शन के लिए provide() और inject()
  2. 2असिंक्रोनस कंपोनेंट और Suspense
  3. 3कस्टम डायरेक्टिव
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
37

C14 पाठPRO

ऐसे फ्रंटएंड एप्लिकेशन डिज़ाइन करें जो बड़ी टीमों तक आसानी से विस्तृत हो सकें। कंपोनेंट पदानुक्रम पर Atomic Design लागू करें, Turborepo मोनोरेपो से कई पैकेज प्रबंधित करें, माइक्रो-फ्रंटएंड Module Fed…

  1. 1एटॉमिक डिज़ाइन: एटम, मॉलिक्यूल, ऑर्गैनिज़्म
  2. 2Turborepo के साथ मोनोरेपो सेटअप
  3. 3माइक्रो-फ्रंटएंड: मॉड्यूल फ़ेडरेशन
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
38

C14 पाठPRO

एक साझा कंपोनेंट लाइब्रेरी बनाएँ और उसका रखरखाव करें। Storybook में कंपोनेंट का दस्तावेज़ीकरण करें, Style Dictionary से डिज़ाइन टोकन परिभाषित करें, npm पर संस्करण जारी करके प्रकाशित करें, और सिस्टम क…

  1. 1Storybook: स्टोरी, कंट्रोल और दस्तावेज़
  2. 2Style Dictionary के साथ डिज़ाइन टोकन
  3. 3npm पर वर्ज़निंग और प्रकाशन
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
39

C14 पाठPRO

अपने उपयोगकर्ताओं को वेब सुरक्षा खतरों से बचाएँ। आउटपुट एन्कोडिंग और Content Security Policy से XSS रोकें, SameSite कुकी और टोकन से CSRF से सुरक्षा करें, CSP हेडर कॉन्फ़िगर करें, और ब्राउज़र में OAut…

  1. 1XSS रोकथाम: आउटपुट एन्कोडिंग और CSP
  2. 2CSRF: SameSite कुकी और टोकन
  3. 3Content Security Policy: nonce और hash
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
40

C14 पाठPRO

अपने फ्रंटएंड की डिलीवरी स्वचालित करें। हर पुश पर कोड की जाँच, परीक्षण और बिल्ड करने के लिए GitHub Actions कार्यप्रवाह लिखें, Vercel, Netlify और Cloudflare Pages पर स्वचालित रूप से डिप्लॉय करें, CI म…

  1. 1फ्रंटएंड के लिए GitHub Actions: lint, test, build
  2. 2Vercel, Netlify और Cloudflare Pages पर डिप्लॉयमेंट
  3. 3CI में पर्यावरण वेरिएबल
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
41

C24 पाठPRO

वरिष्ठ स्तर पर कार्य करें। सिस्टम डिज़ाइन इंटरव्यू में फ्रंटएंड-केंद्रित ढाँचों के साथ दृष्टिकोण बनाएँ, स्वस्थ कोड समीक्षा संस्कृति विकसित करें, मेंटरिंग और दस्तावेज़ीकरण से कनिष्ठ इंजीनियरों को आगे…

  1. 1फ्रंटएंड सिस्टम डिज़ाइन इंटरव्यू
  2. 2कोड समीक्षा संस्कृति और PR की सर्वोत्तम प्रक्रियाएँ
  3. 3मार्गदर्शन और तकनीकी दस्तावेज़ीकरण
  4. +1 और
निःशुल्क सीखना शुरू करेंPRO से अनलॉक करें
CoddyKit PRO

इस मार्ग के सभी 41 पाठ्यक्रम और हर दूसरे मार्ग के पाठ्यक्रम अनलॉक करें

एआई शिक्षक, प्रमाणन परीक्षा और प्रमाणपत्र। वेब, iOS और Android पर काम करता है।

सभी योजनाएँ देखें
वार्षिक$29.90 / वर्षलगभग $2.49 प्रति माहएक बार भुगतान करेंआजीवन$69.99 एक बारकोई नवीनीकरण नहीं। PRO हमेशा के लिए।
पाठ्यक्रम का परिचय

आधुनिक फ्रंटएंड का पूरा दायरा विकसित करें

फ्रंटएंड विकास वह अनुशासन है जिसमें कोड को ब्राउज़र में उपयोगकर्ता द्वारा देखी और इस्तेमाल की जाने वाली हर चीज़ में बदला जाता है — HTML की संरचना, CSS की प्रस्तुति, JavaScript का व्यवहार, और वे फ्रेमवर्क तथा उपकरण जो इन्हें बड़े पैमाने पर उत्पादन परिवेश में एक साथ जोड़ते हैं। इस पाठ्यक्रम में पूरा स्टैक शामिल है: वेब किसी पृष्ठ को कैसे वितरित करता है, यहाँ से लेकर प्रकार-सुरक्षित React और Vue एप्लिकेशन लिखने, प्रदर्शन को बेहतर बनाने और CI/CD पाइपलाइन के माध्यम से परिनियोजित करने तक।

आप क्या सीखेंगे

आप HTML, CSS और JavaScript की मूलभूत बातों से शुरुआत करेंगे, फिर TypeScript, DOM और ब्राउज़र API, अनुकूलनशील डिज़ाइन तथा async प्रोग्रामिंग और मॉड्यूल सहित ES6+ पैटर्न में दक्षता हासिल करेंगे। इसके बाद आप React (हुक, उन्नत पैटर्न, Next.js SSR) और Vue 3 (Composition API, Nuxt 3 SSR), स्थिति प्रबंधन, फ्रंटएंड परीक्षण, CSS आर्किटेक्चर और WebSockets के साथ रीयल-टाइम इंटरफ़ेस सीखेंगे। पाठ्यक्रम का समापन वेब प्रदर्शन अनुकूलन, फ्रंटएंड सुरक्षा, डिज़ाइन सिस्टम और फ्रंटएंड CI/CD तथा DevOps के साथ होगा।

सीखने की राह

इकतालीस पाठ्यक्रम A1 से C2 तक के स्तरों में फैले हैं। A1 और A2 के पाठ्यक्रम नींव तैयार करते हैं — वेब कैसे काम करता है, अर्थपूर्ण मार्कअप, CSS ऐनिमेशन, Git और TypeScript का परिचय। B1 और B2 के पाठ्यक्रम पेशेवर दक्षता विकसित करते हैं: CSS लेआउट में महारत, JavaScript मॉड्यूल और बिल्ड टूल, React और Vue 3 की मूलभूत बातें, API एकीकरण, प्रगतिशील वेब ऐप्लिकेशन और Next.js तथा Nuxt 3 दोनों के साथ सर्वर-साइड रेंडरिंग। C1 के पाठ्यक्रम वरिष्ठ स्तर की आवश्यकताओं पर केंद्रित हैं: फ्रंटएंड के लिए उन्नत TypeScript, React के उन्नत पैटर्न, Vue के उन्नत पैटर्न, फ्रंटएंड आर्किटेक्चर, डिज़ाइन सिस्टम और कॉम्पोनेंट लाइब्रेरी, फ्रंटएंड सुरक्षा तथा फ्रंटएंड CI/CD और DevOps। पाठ्यक्रम C2 पर वरिष्ठ फ्रंटएंड इंजीनियरिंग के साथ समाप्त होता है, जो इन सभी विषयों को उत्पादन-स्तर के अभ्यास में समाहित करता है।

यह कैसे काम करता है

हर पाठ्यक्रम छोटे, व्यावहारिक पाठों में विभाजित है, जिन्हें आप अंतर्निर्मित कोड संपादक में रीयल-टाइम प्रतिक्रिया के साथ पूरा करते हैं। जब भी आप अटकते हैं, AI शिक्षक उपलब्ध रहता है, और हर अवधारणा को ऐसे अभ्यासों के माध्यम से मजबूत किया जाता है जो बनावटी उदाहरणों के बजाय ब्राउज़र और फ्रेमवर्क के वास्तविक व्यवहार को दर्शाते हैं।

टूल

सिर्फ़ पढ़ें नहीं, एआई के साथ अभ्यास करें

AI-संचालित टूल और सुविधाओं के साथ अपनी सीखने की गति बढ़ाएँ

AI कोड जनरेटरAI की मदद से कोड बनाएँAI से त्रुटियाँ ठीक करेंकोड की त्रुटियाँ खोजें और ठीक करेंPROAI विश्लेषणकोड का गहन विश्लेषणPROAI से बातचीतAI ट्यूटर से बातचीत करेंसुपर प्रश्न पूछेंविशेषज्ञ-स्तर के उत्तर पाएँPROपाठ बनाएँAI-संचालित पाठ निर्माताPROप्रमाणन परीक्षा शुरू करेंअपना प्रमाणपत्र प्राप्त करेंPROकोड संपादककोड लिखें और चलाएँचुनौती शुरू करेंअपने कौशल को परखें

आप कैसे सीखेंगे

  1. 01

    इंटरैक्टिव पाठ

    तुरंत प्रतिक्रिया वाले व्यावहारिक कोड लेखन अभ्यास

  2. 02

    AI ट्यूटर

    अटकने पर हमारे AI से तुरंत सहायता पाएँ

  3. 03

    अंतर्निर्मित संपादक

    सीधे अपने ब्राउज़र में कोड लिखें और चलाएँ

  4. 04

    प्रमाणपत्र

    पाठ्यक्रम पूरा करने पर प्रमाणपत्र पाएँ

खोज जारी रखें

संबंधित सीखने के मार्ग

HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML Academy logoHTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.Angular Academy logoAngular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs Academy logoSveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.Web Accessibility Academy logoWeb Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…
FAQ

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

क्या Frontend Academy पाठ्यक्रम निःशुल्क है?

हाँ। आप Frontend Academy पाठ्यक्रम निःशुल्क शुरू कर सकते हैं और इसके इंटरैक्टिव पाठ बिना किसी शुल्क के पूरे कर सकते हैं। वैकल्पिक PRO सदस्यता उन्नत एआई टूल और साझा किया जा सकने वाला प्रमाणपत्र उपलब्ध कराती है।

क्या HTML सीखने के लिए मुझे पहले से अनुभव होना चाहिए?

नहीं। पाठ्यक्रम बुनियादी सिद्धांतों से शुरू होता है और धीरे-धीरे उन्नत विषयों तक जाता है, इसलिए आप HTML का पहले से कोई अनुभव न होने पर भी शुरुआत कर सकते हैं।

CoddyKit पर मैं HTML कैसे सीखूँगा?

आप करके सीखते हैं। छोटे-छोटे इंटरैक्टिव पाठों में स्पष्ट व्याख्या के साथ ऐसा व्यावहारिक कोडिंग अभ्यास होता है जो वास्तविक समय में चलता है, और जब भी आप अटकते हैं, 24/7 एआई ट्यूटर व्यक्तिगत सहायता देता है।

क्या Frontend Academy पूरा करने पर मुझे प्रमाणपत्र मिलेगा?

हाँ। PRO शिक्षार्थी परीक्षा दे सकते हैं और Frontend Academy पाठ्यक्रम पूरा करने का ऐसा साझा किया जा सकने वाला प्रमाणपत्र प्राप्त कर सकते हैं, जिसमें सत्यापन योग्य कोड होता है।

क्या मैं अपने फ़ोन पर HTML सीख सकता हूँ?

हाँ। CoddyKit वेब पर और मूल iOS तथा एंड्रॉइड ऐप के रूप में उपलब्ध है, इसलिए आप किसी भी डिवाइस पर HTML सीख सकते हैं और आपकी प्रगति सभी डिवाइसों पर सिंक होती रहती है।

CoddyKit PRO की कीमत कितनी है?

Frontend Academy का पहला पाठ्यक्रम मुफ़्त है। CoddyKit PRO हर पाठ्यक्रम को अनलॉक करता है: $5.90 प्रति सप्ताह, $7.90 प्रति माह, $29.90 प्रति वर्ष, या बिना किसी नवीनीकरण के आजीवन पहुँच के लिए एक बार $69.99।

Frontend Academy पूरा करने में कितना समय लगता है?

Frontend Academy में 41 पाठ्यक्रम और 163 पाठ हैं। अधिकांश पाठों में लगभग 5–10 मिनट लगते हैं, इसलिए अपनी गति से पूरे मार्ग को पूरा करने में लगभग 19 घंटे का व्यावहारिक अभ्यास लगता है।

अभी Frontend Academy शुरू करें

एआई-संचालित पाठों के साथ प्रोग्रामिंग में निपुण बनने वाले हज़ारों शिक्षार्थियों से जुड़ें।

निःशुल्क सीखना शुरू करेंसभी पाठ्यक्रम देखें