Up next in 10
Front End Developer RoadMap - for Jobs in 2024
134 views
May 22, 2024
In the video "Front End Developer RoadMap - for Jobs in 2024," viewers are guided through a comprehensive roadmap outlining the skills and technologies aspiring front-end developers should master to prepare for job opportunities in 2024. The content covers foundational topics such as HTML, CSS, and JavaScript, as well as more advanced concepts like frameworks (e.g., React, Angular, Vue.js), responsive design, and progressive web apps. Additionally, the video discusses industry trends, best practices, and tools that front-end developers should be familiar with to stay competitive in the job market.
View Video Transcript
0:00
Hi everyone and welcome to अपना college राज�
0:01
डिटेल में डिसकॉस करने वाले हैं कि कैसे 2024 के अंदर we can become a front-end
0:06
web developer. अब जब भी हम front-end development की बात करते हैं, it basically
0:09
means कि हम website का वो हिस्सा डिवेलप करने वाले हैं, जिसे user
0:14
या तो directly देख सकता है, या फिर जिसके साथ directly interact कर सकता है. for example अगर अभी इस video को हम YouTube के ऊपर देख रहे है�
0:20
तो इस video को हम like कर सकते हैं इस पर जाकर comment कर सकते हैं ये सारे के सारे वो parts हैं जिसे एक front-end developer ने implement किया ह�
0:27
तो एक front-end developer क्या करता है हमारी website का basic structure तैयार करता ह�
0:31
उसके अंदर styling को implement करता है साथ के साथ websites को responsive and
0:35
user के हिसाब से functional भी बनाता है websites में responsiveness कहने का मतलब ह�
0:39
कि हमारी जो web app है वो different devices जैसे phone हो गया, tab हो गया
0:43
laptops हो गया, सब के उपर ठीक दिखनी चाहिए अब जब भी हम front end
0:47
development की बात करते हैं, आज की date में market के अंदर बहुत सारे tools and technologies available है�
0:52
लेकिन आज भी अगर हम किसी भी अच्छे experience developer से जाके पूछेंगे कि front-end development की शुरुवात कैसे करे�
0:58
तो वो हमें तीन main technologies बताएंगे which are HTML, CSS and
1:02
JavaScript ये तीनों pillars होते हैं front-end development के and as a good student या as a future good developer हमने सबस�
1:09
पहले इनी को सीखने की शुरुआत करनी चाहिए एक बार इनकी fundamental knowledge हमारे पास अच्छी हो गए तो उसके बाद ह�
1:15
जाकर और different different tools या जो भी हमारी latest libraries होंगी latest हमारे frameworks होंगे उन्हें ह�
1:21
जाकर सीख सकते हैं तो आज के roadmap के अंदर इनको तो हम detail में discuss करेंगे ही साथ के साथ ये भ�
1:25
बात करेंगे कि और हमें कौन से frameworks and libraries को सीखने की जरूरत ह�
1:29
to become job ready in 2024 अब technologies के बारे में बात करने स�
1:33
पहले दो important points सबसे पहला HTML, CSS and JavaScript तीनों हमारे pillars हैं और तीनों को हम अच्छे स�
1:39
सीखने वाले हैं, लेकिन अच्छे से सीखने का मतलब ये बिलकुल नहीं होता, कि तीनों को हम 100% जाकर सीख रहे होंगे, क्योंकि coding के अंदर there is nothing like 100%
1:48
इसका basic मतलब यह है कि तीनों की हम उतनी enough knowledge ले लेंगे
1:52
कि जितने भी important concepts हैं, जो interviews के अंदर पूछे जाते हैं, या जिनको हम regularly अपने projects के अंद�
1:58
या websites को build करते time use कर रहे होंगे उनकी हमारे पास अच्छी खासी understanding होग�
2:02
हम खुद से बैठकर projects बना पाएंगे तो हम किसी भी technology, किसी भी coding language
2:07
programming language को end to end नहीं सीखते हम हमेशा उसके important parts को cover करते है�
2:11
and second point यह कि बहुत सारी different different tools and technologies
2:15
available है front-end development के अंदर, तो इसी लिए हर company अलग tools
2:20
अलग frameworks and अलग libraries use करते हैं, तो हो सकता है आप किसी front-end developer को देखें
2:24
जो react.js कर रहा हो, कोई दूसरा front-end developer हो, जो angular के ऊपर काम कर रहा हो
2:28
कोई और front-end developer हो, जो view.js के अंदर coding कर रहे हो, तो इस तरीके स�
2:32
हर company की अलग-अलग requirement होती है, बहुत सारी different technologies हैं
2:37
जिनसे same काम किया जा सकता है, पर आज के roadmap के अंदर हम majority
2:40
उन technologies को discuss करेंगे, जिनके अंदर job opportunities सबसे जादा हैं
2:45
और साथ के साथ जिनके अंदर सीखने के लिए resources काफी जादा हैं, ताकि हम as a fresher तैयार हो पाएं skill के अंदर जाने के लि�
2:51
and हमें minimum hindrance को face करना पड़े अब roadmap के अंदर सबसे पहली चीज़ जो मैं आपको advice करूँग�
2:57
वो है to download a code editor हमारे पास चाहे laptop है, चाहे हमारे पास computer ह�
3:01
हमें पहले code editor को download कर लेना चाहिए code editor is basically like a digital notebook
3:07
जिसके अंदर हम अपना सारा code लिख पाएंगे किसी भी web app को बनाने के लिए अब market के अंदर बहुत सारे different tools available है�
3:13
पर मेरी advice आपको यह है कि you start with visual studio code visual studio code freely available है, Microsoft ने बनाया हुआ ह�
3:18
तो it is trusted by most of the developers in the tech industry जो वो अपनी day to day coding कर रहे होते है�
3:24
तो एक बार हमने इसे download कर लिया, तो multiple languages का code हम जाकर इसके अंदर लिख सकते हैं
3:29
तो सबसे पहले तो हम इसे download कर रहे होंगे, उसके बाद सबसे पहले हम जिस चीज को सीख रहे होंगे
3:33
that will be HTML, HTML यानि Hypertext Markup Language, HTML को use किया जाता है
3:38
website के structure को build करने के लिए, जैसे for example हम website को अपने घर की तरह imagine कर सकते है�
3:44
घर बनाने से पहले सबसे पहले उसको blueprint बनता है blueprint के हिसाब से basic धाचा यानि basic structure prepare होता ह�
3:50
that is what HTML does for our websites यानि जो हमारी website का basic structure होता ह�
3:55
कौन सा element कहां पर होना चाहिए हर different element के हिसाब से हम different different tags को HTML के अंदर सीख रहे होते है�
4:01
HTML resources available in fact college one shot complete HTML cover technologies learning time learning time variable student already programming language coding HTML HTML command
4:24
लाने में आपको कुछ घंटे ही लगें या maximum एक दिन लगेगा पर वहीं प�
4:28
दूसरी तरफ अगर कोई ऐसा student है जो first time programming की शुरुवात कर रहे हैं, first time कोई code लिखने वाले हैं, तो हो सकता है उन्हें 3-4 दिन भी लग जाएं HTML को करने के लिए, तो it all depends कि हम कितने experienced हैं हमारा, अभी क्या skill level है, और क्या हमने पहले programming की है या नहीं की है, also learning time इस पर भी काफी �
4:58
उसके बाद हमें decide करना पड़ता है कि हमारा furniture कहाँ पर रखा जाएगा, किस layout में रखा जाएगा, हमारी दिवारों का color क्या होने वाला है
5:04
तो इस तरीके के सारे styling based decisions are part of CSS. CSS का काम होता है एक website को styling देना, उसके अंदर layout add करना
5:12
हमारा font size हो गया या font styles हो गया सारी चीज़ों को control करते है�
5:16
हम with CSS and साथ के साथ responsiveness को भी हम CSS के थूँ implement करते है�
5:21
अब CSS को सीखने के लिए भी हमने अपना college के उपर एक one shot बनाया हुआ ह�
5:25
जिसके अंदर हमने end to end CSS को cover किया हुआ है हम चाहें तो वहां से जाकर भी सीख सकते है�
5:30
अब वैसे तो majority of the times market के अंदर जब भी हम tech companies को देखेंग�
5:34
maximum companies के अंदर vanilla CSS use होती है यानि pure जिस CSS को हम सीख रहे होते है�
5:40
direct CSS का ही code लिखा जाता है लेकिन कई companies के अंदर कई बा�
5:44
CSS के libraries या frameworks भी use किये जाते हैं अब एक बार हमने vanilla CSS के ऊपर एक strong command ले ली तो
5:50
उसके बाद जाकर हम किसी भी library या framework को सीख सकते हैं, इसके अंदर सबसे जादा popular जो दो options हैं
5:56
उनमें से सबसे पहला है bootstrap, bootstrap is a CSS based library
6:00
जिसके अंदर हमें predefined components मिलते हैं, यानि काफी जादा ऐसी CSS होती है
6:04
जिसे हमें बार-बार खुद नहीं लिखना पड़ता, ऐसे components bootstrap के अंदर already हैं
6:08
जिनने हम सिर्फ pick करके अपनी website के अंदर paste कर सकते हैं, तो हम चाहें तो जाकर bootstrap को सीख सकते हैं, नहीं तो second popular option हमारे पास होता है
6:16
tailwind CSS का, जिसके अंदर हमें utility classes मिल रही होती हैं
6:19
अब utility classes क्या होते हैं, predefined components क्या हो सकते हैं, हो सकता है ये नाम हमें अभी confuse कर रहे हो, पर एक बार हम technologies को सीखना start करेंगे, तो इन मेंसे बहुत सारी ऐसी terms हैं, जो हमारे लिए common हो जाएगे, और उनके मतलब भी हमें और अच्छे से समझ में आने start हो जाएगे, अब bootstrap and tailwind दो�
6:49
frameworks को ना पूछ रही हो, वहीं कुछ companies हो सकता है, they are asking for one of the
6:53
frameworks, but जब हमने already किसी एक framework या किसी एक library के ऊपर का�
6:57
किया होता है, तो हमें confidence मिलता है किसी नई चीज को और additionally जाकर सीखने क�
7:01
तो अगर आपके पास time है, तो आप इन दोनों में से किसी भी एक को pick कर सकते हैं and you can start learning it
7:06
Third technology जैसे हम चीखने वाले हैं that is JavaScript. JavaScript का basic काम होता है हमारी website के अंद�
7:11
जान डालने का, यानि to add functionality to our website. जैसे हमने घर का example लिया था तो घर में switch को on and off
7:17
करने से कहीं पर पंखा चल रहा है, कहीं पर lamp जल रहा है, तो ये सारी की सारी functional चीज़ें है�
7:21
जो हमारे घर में जान डाल दिये हैं वैसे ही website के अंदर कौन से button को click करने स�
7:25
क्या action perform होगा कौन से form को submit करने से क्या action perform होग�
7:29
ये सारी की सारी जो different चीज़ें हैं ये हम javascript से control करते है�
7:33
अब जावास्क्रिप्प को सीखने के लिए हम शुरुआत करते हैं fundamental जावास्क्रिप्प से, जिसमें हम programming के core concepts को सीख रहे होंगे, जिसमें हमारे arrays आ जाएंगे, strings आ जाएंगे, different different methods आ जाएंगे, loops आ जाएंगे, उसके बाद finally हम DOM manipulation सीखेंगे जावास्क्रिप्प के अंदर �
8:03
day to day deal करना अब जावास्क्रिप्ट का भी हमने एक प्रॉपर वन शॉट बनाया हुआ है जिसे आप जाकर देख सकते है�
8:08
टू लॉन जावास्क्रिप्ट एंड टू एंड एंड इसी से वन शॉट को अगर आपको सीरीज की फॉर्म में देखना है तो शद्ध�
8:14
चैनल के ऊपर same आपको series भी मिल जाएगी जहां से जाकर हम JavaScript को पढ़ सकते है�
8:18
अब जितने भी students ऐसे हैं यहाँ पर जो शायद first time अपनी coding journey की शुरुआत करेंग�
8:23
तो मैं आपको बता दूं कि web development के अंदर HTML and CSS
8:26
आपको काफी असान लगेगा पर first time JavaScript के अंदर क्योंकि हम पहली बार programming सीख रहे होते हैं
8:32
logic JavaScript beginners quit exactly JavaScript concepts
8:46
जो हमें नए लगेंगे, जो हमें difficult लगेंगे, जो हमें सीखने में extra time लग रहा होग�
8:51
and that is absolutely normal क्योंकि first time हम इन concepts को सीखेंग�
8:56
तब ही हमारा logic build होना start होगा तो यहाँ पर JavaScript सीखने टाइम चीजों को quit नहीं करना है अगर हमें कुछ difficult लगे त�
9:03
चलते चले जाना है और इस process के ऊपर trust करना है क्योंकि एक बार जब हम सारे concepts को सीख लेंग�
9:08
तो हमारी understanding बहुत जादा deep होने वाली है तो एक बार हमने तीनों pillars को cover कर लिय�
9:13
उसके बाद हम HTML को यूज़ करके, CSS को यूज़ करके, JavaScript को यूज़ करके different different projects को बनाना start कर सकते हैं, अब जब भी हम projects को बनाएंगे, तो यहाँ पर best time होता है जब हमने एक दो project बना लिए, तो अग finally time आ गया to learn about version control system, version control system basically हमारे project के अंदर, या जो भी हम build कर रहे हैं, हमारी web app �
9:43
बेसिकली हम जब भी एक बड़ा प्रोजेक्ट बिल्ड करते हैं उसके अंदर कैसे हम अपनी चेंजेस को ट्रैक कर सकते है�
9:49
या जब हम multiple लोगों के साथ एक company में जाके team में काम कर रहे होते है�
9:52
तो कैसे उनके साथ हम collaborate कर सकते हैं ये सारी की सारी चीज़े हमें Git and GitHub सिखा रहे होते हैं
9:58
तो Git and GitHub को अगर हम सीखना चाहते हैं, तो उसका भी हमने एक one shot बनाया हुआ है, आप वहाँ से जाकर चाहें तो सीख सकते हैं
10:04
नहीं तो जाकर online आपको कोई भी resource अगर अच्छा लग रहा है, जिससे हमें अच्छे से समझ में आ रहे हैं, हम वहां से जाकर भी सीख सकते हैं
10:10
अब projects की जब हम बात कर रहे हैं, तो starting project हो सकता है कि हम थोड़े से simple बना रहे हूँ
10:14
और उन्हें हम deploy भी नहीं कर रहे हूँ, पर कोशिश करने हैं कि एक बार हमें थोड़ी आदित हो गई
10:36
के अंदर हम सीख रहे होंगे, those are going to be package managers. कई सारे different different package managers available होते हैं
10:42
majority जो इन में से use होते हैं, एक होता है हमारे पास NPM, और एक होता है हमारे पास ज्ञान
10:47
I would recommend you to start with NPM, क्योंकि कई बार हो सकता है, students बाद में जाके back-end development सीख रहे हो
10:52
तो वहाँ पे npm हमें काफी ज़ादा help करता है अगर हम node.js या express.js के साथ जा रहे होते हैं त�
10:57
तो basically हम npm के बारे में सीख सकते हैं कि किस तरीके से हम packages को install करते है�
11:01
कैसे हम different different packages को use करते हैं अब अभी तक हम जितनी भी javascript लिखते आए�
11:06
ये सारी की सारी vanilla javascript थी यानि plain javascript जिसके अंदर हमने कोई external framework या library को use नहीं किय�
11:13
बट अब finally time आ गया कि इतनी चीज़ें अगर आपने cover कर लिया ह�
11:16
तो अब हम एक library या framework को use करना start कर सकते हैं basically अगर कोई भी website है तो जितनी भी technologies अभी तक हमने सीखी ह�
11:23
उसके अंदर उन websites का frontend बिलकुल बन सकता है लेकिन libraries या frameworks को हम इसलिए use करते है�
11:30
ताकि सबसे पहला तो हम अपनी code की reusability बढ़ा पाएं इसस�
11:33
basically एक developer का development experience increase होता है और दूसरा हम अपनी code की performance क�
11:39
increase कर पाएं अब इसके अंदर हमारे पास काफी सारे popular options है, जैसे react हो गया, angular हो गया, view हो गया, and
11:45
और भी different, पर इसमें मैं आपको personally advise करूँगी that we should start
11:48
with react.js, क्योंकि react.js के अंदर market opportunities बहुत सारी हैं, there
11:53
are a lot of companies which are using react.js for their front-end development, त�
11:57
हम react.js के साथ start करेंगे, इसमें हम शुरुवात कर सकते हैं कि कैस�
12:00
class components है, functional components के ऊपर shift हुए, functional components काम कैसे करते हैं, state management कैसे काम करती है, hooks कैसे काम करते हैं, props कैसे काम करते हैं
12:09
हम functions को कैसे props की तरह pass कर सकते हैं, इस तरीके की different different concepts को हम react के अंदर जाके सीख रहे होंगे, हमारे hooks के अंदर custom hooks कैसे होते हैं
12:17
या बाद में जाकर हम Redux Toolkit को कैसे use करते हैं ये सारे different concepts को हम सीख रहे होंगे over the next few months
12:23
अब React के अंदर project building की अगर बात करें तो हमारे पास दो तरीके है�
12:27
या तो हम React को use करके अब और नई projects बना सकते हैं या फिर जिन projects को हमने vanilla technologies के साथ लिखा थ�
12:34
उन्हीं सब को हम react से जाकर हम implement कर सकते हैं ताकि अब हमें difference समझ में आए कि कैसे हम plain javascript का code किस तरीके से लिख रहे थे और कैसे अब react के अधर एक different तरीके से हम अपनी same code को लिख सकते है�
12:46
journey next step react use projects finally deploy projects maximum tutorial course but finally 4 projects
13:02
technology के अंदर, तो हमेशा कोशिश करनी चाहिए कि last के 1-2 projects ह�
13:06
अपनी creativity से बनाएं, क्योंकि at the end हम जो creative projects
13:11
खुद सोच कर बनाते हैं, खुद किसी practical problem को solve करने के लि�
13:15
technology को use करते हैं, वही चीज हमारे resume के अंदर हमें highlight
13:18
कराने में help कर रही होती है, तो वो चीज जरूर जाकर कर रही है, और उसके बा�
13:22
as a fresher, as an entry level software engineer, as an entry level
13:27
front-end web developer, we are finally ready to start applying for companies
13:31
यानि next जो step आता है, वो companies के अंदर apply करने का आता है, जिसमें हम LinkedIn जैसे platforms को use कर सकते हैं
13:37
कैसे इन platforms को use करते हैं job applications के लिए, उसके बारे में भी हमने dedicated video बनाया हुआ है
13:42
हम उससे भी जाकर देख सकते हैं. अब यह जो पूरा process है इसे हो सकता है कोई student 5 महीने के अंदर कर ले कोई हो सकता है 8 महीने ले कोई हो सकता है 12 महीने ल�
13:49
बट यह सारा depend करता है कि हमारे पास already programming का कितना experience है साथ के साथ हम daily कितने number of hours coding को programming को dedicate कर रहे होते है�
13:58
अब ये तो हो गई वो सारी technologies जो हमें fresher level के लिए सीखनी होती है�
14:02
पर अगर आप इससे भी आगे बढ़के और technologies को सीखना जाते है�
14:05
तो उसके लिए मैं तीन चीज़ें आपको recommend करूँगी सीखने के लिए इन में से सबसे पहला है SAS which is a CSS pre-processor
14:11
जब भी हम companies के अंदर जाके बड़ी-बड़ी websites के उपर, बड़े-बड़े projects
14:15
के उपर काम कर रहे होते हैं, तो वहाँ पर बहुत सारी styling हमें लिखनी बढ़ती ह�
14:19
जिसे manage करने के लिए, अच्छे से लिखने के लिए हम SAS को use कर सकते हैं instead of
14:23
plain vanilla CSS. अब जैसे SAS हो गया है या इसके बाद वाली जो technologies हैं, ये completely optional हैं
14:28
यानि हमारी खुद की understanding के लिए हम इने जाकर सीख सकते हैं, या अगर हमारे पास extra time है
14:33
तो हम इने जाकर सीख सकते हैं. बिल्कुल कोई guarantee नहीं है कि जिस company के अंदर हम apply करेंगे
14:38
वो इन technologies को पूछ रही होगी क्या companies generally fresher level स�
14:42
सिर्फ fundamentals expect करते हैं तो इन technologies को जाकर अगर हमारे पास extra time ह�
14:46
अगर हम already अपने fundamentals cover कर चुके हैं तो हमें फिर जाकर इनने definitely सीखना चाहि�
14:51
तो SAS के बाद second चीज जिसे हम जाकर सीख सकते हैं that is testing जब भी हम अपना normal code लिखते है�
14:56
उसके अंदर as such हम अपनी manual testing ही कर रहे होते हैं, यानि कुछ data
15:00
डाल कर देख लेंगे, चीज़ें work कर रही हैं, ठीक work कर रही हैं, तो it's okay, but companies के अंद�
15:04
जब भी हम जाकर code लिखते हैं, हमें अपने test लिखने पड़ते हैं, हर एक single component
15:24
to end testing के लिए use कर सकते हैं and third technology जिसे हम जाकर सीख सकते है�
15:28
that is TypeScript, TypeScript is basically a static subset of JavaScript यानि जो सारी चीज़�
15:34
हम JavaScript से कर सकते थे वही सारी चीज़े हम TypeScript से ही करते है�
15:38
बस TypeScript क्या है थोड़ी सी type safe है यानि इसके अंदर type आ गया है हमार�
15:43
different different variables and different different data के अंदर तो as a next step हम जाक�
15:47
TypeScript भी सीख सकते हैं और जो सारी चीज़ें हमने JavaScript से की थी उन्ह�
15:51
सारी चीज़ों को हम बैट कर TypeScript से कर सकते हैं और इसके अलावा काफी सारे developers ऐस�
15:55
भी होते हैं जो अपनी journey की शुरुवात तो Frontend Development से करते हैं और बाद में जाक�
15:59
Fullstack Development पर shift हो जाते हैं यानि हम बाद में जाके back-end को भी सीख सकते हैं, back-end के tools and technologies को सीख सकते हैं
16:05
databases को जाकर सीख सकते हैं, जैसे SQL हो गया, no SQL हो गया, और उसके बाद हम अपनी full-stack journey की भी शुरुवात कर सकते हैं
16:11
तो I hope कि आज के हमारे इस session से हमें clear हुआ होगा कि हमारी front end development की journey किस तरही के दिखती है उसके अंदर हमें कौन-कौन से different tools and technologies हैं जिनको हम जाकर सीख सकते हैं जिनने हम जाकर explore कर सकते हैं और एक बार हम job ready हो गए तो उसके बाद additionally कौन सी चीज़ें हैं जो हम जाकर सीख सकते है�
16:41
वर्जेट क्या है उसका रोल क्या है हमारी लोकेशन क्या है वर्क लोकेशन हमारा पैकेज बहुत ज्यादा वेरी कर सकत�
16:47
है देख आज टूडल जिनके अच्छे पैकेज जैसे 20 एलपी हो गया थोड़ी एलपी हो गया 40 एलपी तक के पैकेज इ�
16:53
लेकर जाते हैं इस डोमेन में आज स्टार्टिंग पैकेज तो कोई भी लिमिट नहीं है बस डिपेंड करता है कि हम कितन�
16:58
स्किल हैं इस पॉटिकलर डोमेन के अंदर तो आज का जो वीडियो है आपकी फ्रंट एंड डेवलपमेंट जर्नी के अंदर आपक�
17:03
कर रहा होगा इसके अलावा अगर similar roadmaps आपको back-end development के लिए चाहि�
17:07
full-stack development के लिए चाहिए या किसी और domain के लिए चाहिए तो उसके बारे में आप मुझ�
17:11
नीचे comment करके बता सकते हैं आज के लिए इतना ही मिलते हैं next video में till then keep learning
17:15
and keep exploring
#Education
#Jobs
#Programming