Day - 28 | 🎨 Final CSS Project Class | Complete Portfolio Website Using HTML & CSS

Name: Day - 28 | 🎨 Final CSS Project Class | Complete Portfolio Website Using HTML & CSS
Uploaded: 2026-01-06T08:29:46+00:00
Duration: 55 min 41 s
Channel: skillwaala

skillwaala

2 days ago

🎨 Final CSS Project Class | Complete Portfolio Website Using HTML & CSS

👨‍💻 What You’ll Learn in This Class:
✅ Full Portfolio Website Design – Navbar, Hero, About, Skills, Projects & Contact Section
✅ Using all CSS concepts – Flexbox, Grid, & Media Queries
✅ Building a modern responsive layout without frameworks
✅ Adding hover effects, smooth buttons, and neat typography

Category

📚

Learning

Transcript

Display full video transcript

00:00कि कि कि कि रवाइस गुड़ इवरीबन गुड़ इवनिंग सेबूर यूजी गेमिंग अलका रभी सिबूर डिपिका आरेस्टी सौरव वरुन

00:18सिबुल करें सर आपका न्यूएर्ट टेक कैसे गए बिल्कुल अच्छे गए न्यूएर्ट किया सब कुछ अच्छा था इंजॉय भी किया कहीं गूमने भी गए थे सर ठीक हैं गुड़ इवनिंग हैपी न्यूएर दिपिका हैपी न्यूएर एवरीबन नया साल आ चुका है

00:48पर सिबूर करें कि सर मैंने 27 देसंबर को इस्किलवाला के लिए ट्वीटर में ट्वीट किया है अपको विशाल सिंग संदे पसमें संनि मैं स hybrid cumplू असनिक हल आगा अ

01:13अलागे अंदर हसीन केरे सर्फ डीसी ए हम GSA कर सकते क्या है

01:18GSA DSA से बोल लोगे आप

01:20DSA JavaScript से भी कर सकते

01:23कुई दिक्कत नहीं है

01:24JavaScript के साथ भी GSA कर सकते

01:26सिबूल गरेगे आपको बताने के लिए कहा था सर को

01:36ठीक है

01:38तो अपन जो अपनी प्रिवेस क्लास अपन जहां तक अपने देखा था उसी के अपन आगे डिसकस करते हैं

01:56क्या चीज देखिए अपन अपने प्रोजेक्ट बना रेतें CSS वाला प्रोजेक्ट ताकि सारी प्रोपर्टीज एक बार रिवाइज हुजा है

02:03इसलिए अपन छोटा सा प्रोजेक्ट बना रेते अपने CSS के अंदर तो वही देखते हैं पना आगे

02:09अपना जाते अपने VS Code के उपर और ठीक है एक बार सब रैस्पॉंस कर देना कि स्क्रीन विजीबल है और

02:25मेरी VSP के लिए रहें चीक है तो यह अपन यह प्रोजेक्ट अपन कुछ बना रहे थे

02:33सीको मैं यहां पर एक बार के लिए रन कर लेता हूं और देख लेते हैं कहां तक कितना क्या बन गया था तो यह अपने इसकी एक नववार बनाई थी और अपने अपना

02:43अपने अपना हीरो सेक्शन यहां पर क्रियेट कराता है इसके बाद नेक्स सेक्शन अपन यहां पर क्रियेट करते हैं अपने पास होम है अब आउट है स्किल्स है प्रोजेक्ट से कॉंटेक्ट है यह सारे सेक्शन बनाते हैं तो नेक्स सेक्शन में यहां पर बनाता हूं �

03:13ले लेते हैं और उसके बाद बेंसे हुआई लेते हैं लिए श्क्रेंपने पाण यहां और अपने फॉंट और सम्मिपर हमागें आ जाते हैं

03:41पूंटोसम पर आ जाओ और यहां बढ़ा के आइकन्स चेक कर लो इस बार

03:45ठीक है

03:52सिबूल करेगी सर कुछ अच्छा और यूनिक प्रोजेक्ट बनाएं

03:57देखो यह अपन CSS पढ़ रहे हैं

03:59इसलिए में कुछ भी ऐसा यूनिक चीज यहां पर यूज नहीं देगा

04:02बेसिक सा प्रोजेक्ट अपन बना रहे हैं ताकि सारी प्रोपर्टीज आपको रीकॉल हो जाएं

04:06इसलिए अपन यह अपना पूर्ट फूल्यू प्रोजेक्ट यहां पर बना रहे है छूटा सा

04:10इसलिए पर इसमें प्रोजेक्ट बना रहे हैं ताकि ज्यादा टाइम इसमें इसमें गण्यूल ना हो

04:27तो यहां पर आजाओ और यहां पर आके अपने आइकन के उपर आजाते हैं और आइकन पर यूजर का आइकन ले लेता हूं

04:39मैं यहां पर यूजर सर्च कर लेते हैं और फ्री वाले आइकन्स अपने यहां पर देख लेते हैं मैं रहता हूं फ्री वाले क्या क्या इकन्स है जैसे यह यूजर वाला आइकन है इसको मैं को यूज करना है इसको मैंने कॉपी कर लिया और कॉपी करके अपने आपने आइ

05:09वाला section अपन यहाँ पर बनाना चाहते हैं, यहाँ पर आके check करो, तो यहाँ पर अपने पास about me का अपना section यहाँ पर की टुख लारा है, इस about me वाले को अपन यहाँ पर styling कर लेते हैं, जल्दी से, जो अपना about me है, ठीक है, फिर उसके बाद एक इक चीज़े अपन कर लेते है

05:39क्या अपन ने दिये इसको यहाँ पर, class ठीक है, यह पन उसक्यूर ली लगाई थी, और यहाँ पर आजाओ, अपन जो अपना about वाला है, उसको बन देख लेते हैं, तो

05:59मैं सारे section ही आप टार्गेट कर देता हूँ, सारे section ही टार्गेट कर रहा हूँ, क्योंकि सब में ही मैं कर देता हूँ, कि text को तो आप align कर गे हैं, आपर center कर देना, और दूसरा आप padding लगा देना, हर section के अंदर, और वो कितनी लगाऊँगे, 80 pixel की top button से कह रहा हूँ, और मैं

06:29अब about me के अंदर अपने पास यहां पर क्या है, अपना s2 tag है और अपने पास paragraph tag है, जो अपने लिया है, और एस तो और पर लिया है, इसको मैं target कर देता हूँ, dot about उसके अंदर, जो यहां बगाई यहां पर बॉटम से, ठीक है, और वो मैं यहां पर लगाता हूँ, 20 pixel की जै

06:59उसके बाद अपने पास अपना paragraph टैग है तो मैं यहाँ पर करता हूँ

07:03.about उसके अंदर जो paragraph टैग है उसको मैंने यहाँ पर target किया

07:08और उसको अपन यहाँ पर color दे देते हैं और color अपन यह वाला दे देते हैं ठीक है

07:14और maximum width में यहाँ पर इसके set कर देता हूँ जो अपना paragraph टैग अपन यहाँ पर ले रहे हैं

07:20maximum width में यहाँ पर set करना हूँ ताकि वह से साब से responsive है जैसे 700 pixels अपन दे देते हैं

07:25और margin मैं यहाँ पर इसको देता हूँ टॉप और button से तो zero रख लेना और left और right से अपन यहाँ पर करते है

07:32photo यहाँ पर margin अपनी generate रहनी चीए इतना सा काम मैं यहाँ पर करूँ इस about me वाले section के उपर

07:40ठीक है तो यह अपना about me वाले section यहाँ पर अपना create हो गया

07:45perfect

07:48ठीक है उसके बाद अपन next section अपना यहाँ पर बनाते है यह तो अपना about me वाले section हो गया next अपन यहाँ पर बना लेते है अपना

08:05skills वाले section ठीक है बिसी बिसी बना लेते है फिर उसके बाद थोड़ा सा और चेंजिंग करेंगे अपने इसके अंदर

08:11यहाँ पर आजाओ और यहाँ पर आके अपन अपना एक और section में आते है जिसको यहाँ पर करते है अपना

08:19skills वाला section रहेगा मैं यहाँ पर करता हूँ अपना section ठीक है और उसके अंदर अपन यहाँ पर इसको

08:29इसको आईडी और class भी दे देता हूँ और आईडी में यहाँ पर कहता हूँ skills ठीक है और यहाँ पर अपने अपनी class उसमें भी मैं आपर कहता हूँ

08:39skills class अपन टारगेट करेंगे है आईडी यहाँ पर अपने यहाँ पर नेववार को इसको लगाएंगे है ठीक है यहाँ पर मैं एक

08:46h2 tag ले लेता हूँ और उसमें मैं यहाँ पर कहता हूँ my skills ठीक है my skills करके अपन यहाँ पर कहते है और फिर उसके बाद

08:56इससे सब्सक्राइब करूद करें संधोर।

09:09है कि लान कार यह अपने सक्षाइब कर रहं हैं अब इसके अंदर अपने को

09:36करने हैं अपने को यहां पर अपने कार्ड बनाना है तो मैं यहां पर कह देता हूं एक क्लास ले लेता हूं जिसको मैं आपर कहता हूं

09:43स्किल कंटेनर ठीक है इसके अंदर अपन यहाँ पर अपने कार्ड बना देते हैं तो मैं यहाँ पर एक कार्ड बनाता हूं इसके अंदर अपने को क्या करना है एक तो अपन यहाँ पर

10:01इसके अंदर ही दिखा देते हैं जैसे मैं यहाँ पर कह देता हूं स्टी एमल ठीक है ऐसे ही सेम अपन जितनी भी स्किल्स दिखाना जाते हैं वह पर यहाँ पर को बिश्च करते बिचलते हैं दूसरा मैं आपर दिखा दूँँगा अपना CSS तीसरा अपन जावास्क्रिप्ट

10:31के अपनी में लिख दो उसको या दो और इस को पर यहाँ पर कहते हैं अपना HTML ठीक है उसके अलावा यहाँ पर कहते अपना जावा स्क्रिप्ट और यहाँ पर मैं कहते हुँआ अपना रियक्ट

10:48तो प्र खत एफिता और यहां पर अपन कहथने है पना नुर्घीस और यहां पर कह

11:07कि इतना सा काम पने कर दिया सब कि तो यहां पर एकन लगा दो सबॉट है यहां पर

11:17कर लो पहले आपको चीए HTML तो मैंने यहां पर है इसको मैं यहां पर लगा देता हूँ इसके पहले मैंने

11:28HTML का लगा दिया दूसरा नियुक्त किसका CSS का तो यहां पर आपके सर्च कर लेते हैं अपना CSS का चाहसा देख लो यह

11:38CSS3 का इसको मैं यहाप पर लगा तो अपनी CSS पर है ठीक है फिर चीए JavaScript का तो यहाँ पर आके सर्च कर लो अपनी JavaScript

11:47जावाए स्क्रिप्ट का नहीं आगा रहे कि जीएस करके कर लो जीएस करके करोगी तो आजायगा यह रहागा इसको कॉपी कर लो यहाँ पर यह CSS यहाँ जावाए स्क्रिप्ट का लगा तो

12:16है उसके बाद next लेते है इपना react का यह आंप conMusic यह रहा रियक्ट का का यह लेक्ट का चीक है इसको कॉपी कर लो और अधार यह रहाए द लगा ना यह सको रिधा कर्का का कि को लीएस अख्यकण नगा

12:42यहां पर नूर जियास का लगा दो मोंगो डीबी का लेना है तो मोंगो डीबी का लेना है आपड़

12:54नहीं आ रहा डीबी करके सर्च कर लो

13:04डेटाबेस यह ले रूए चीकह? इस डेटाबेस को ले रहे हैं और यहां

13:16पर आके इसको में आतो बस परफेक्ट तो अपने पास इस तरीकिद ऐ आ रहा है

13:22MySkills, HTML, CSS, JavaScript, React, Node

13:25और MongoDB

13:26ठीक है

13:26इस तरीके जबने पास यहां पर यह आ रहा है

13:29अब अपने को क्या करना है

13:31इशा करेगी

13:41सर वीएस कोड़ शो नहीं हो रहा है

13:42किसी कोड़ वीएस कोड़ स्क्रीन शो हो रही है

13:44एक बार जल्दी से

13:46कमेंट करके बताओ इस चीचकी की इशू आ रहा है या नहीं आ रहा

13:51इस क्रीम वीजीबल है और वाइस के लिए रहे

13:56बताओ

14:11सिभल करते सर नेवबार और बाड़ी का बैगराउंड कलर तो सीम सीम लग रहा है

14:14नेवबार की सेक्षन अच्छे से नहीं दिख रहा है येस बिल्कुल अपन इसको सही करेंगे

14:17चीचे अब देखो यहां पर अपन इसको जल्दी से करते हैं

14:26स्किल्स वाले को जल्दी से बनाते हैं जो अपना स्किल्स वाला अपने बनाये हैं यहां पर सेक्षन इस स्किल्स वाले सेक्षन को अपन यहां पर कम्प्लीट बनाते हैं धीर धीर एक सेक्षन बनाते हैं जो भी दिक्कत है वो अपन एक साथ ख़़र कर लेंगे

14:36मैं यहांपास निया पर ब village करेंगे कि इसी क्लास मेंया पर इसको

14:54तो इसके उपर मैं लगा देता अपना display, flags मैंने लगा दिया, ठीक है, और अपना flags भ्रैब भी लगा देते हैं, जिसमें मैं यहाँ पर इसको कह देता हूं, grab कर देना, ठीक है, justify content और मैं यहाँ पर कह देता हूं, center में, बस यह तीन properties मैंने लगाई और आके चेक करते हैं, तो

15:24अब अपने पास जो अपना container है इसको थोड़ा सा और अपन जो यह तो container बन गया अब अपने पास container के अंदर जो container बना रखे ये वाले इनको card की जैसे अपने को बनाना है तो मैं यहापर क्या बुलूँगा कि dot skill जो अपने पास है उसको मैं यहापर target कर रहा हूँ उसको एक background

15:54मैं यहाँ पर इसको पैडिंग देता हूं by 12 Deus से और 25 नियुट

16:03जुसे बोदर रीचिन तक यि तक एक पने पास कीरी तर Magic Go線

16:18अपना कंटेनर है इसको मैं मार्जिन असाइन कर देता हूं मार्जिन टॉप बोलता हूं और टॉप से पने देज़ जाए 20 पिक सर ठीक है और जो अपने पास है अपना स्किल वाला रहा है उसको भी अपन यहाँ पर मार्जिन देदेंगे एक बाड ट्रैक करो तो यहाँ पर �

16:48मार्जिन ठीक है राइड से क्योंकि अपने कोई स्पेस देना है और वूम है यहाँ पर इट पिक्सल की देख करता हूं कि ज्यादा नहीं देंगे पर कमी देंगे तो तो इस तरीकित अपने पास क्या रहा है उसके अलावा जो अपने पास यह आइकन्स आ रहे है इसका कलर

17:18अपने पर करते है जैसे एक कलर में आपके देता हूं F

17:28कि ऐड़े आप 24 छीफिच के यह यह यह दो वाला तो यह देता है यह पने पास ही हा रहा है पर रफेक्ट अब यह जो अपने पास सकिल वाला गंटेनर है इस सकिल वाले अपने उपर

17:46करना है अपने को डानप यह लागा रहा हूं कि आप ask कर ना और किस डारेक्षिन में य उपर इसको करना चाहता हूं ढेक

18:07तो अपने पास इस्कील है क्या लगाना पड़ेगा और अपने को एक लुओ elephant

18:20ना सा काम मैंने है पर करदा जब में करसल लेकि जाऊंगा तो मेरे पास इस तरीके से ये आने चाहिए है कि यहां पर अलका-alokाई में यहा 흡D

18:27वो अपने ट्रांजिक्शन यहां पर निखाई दी रहा है ठीक है थोड़ अब चीप अब दूर चीन्ज पर कर दो काई से मैं यहांपर

18:34कि बैग्राउंड कलर जो है वो आप यहां पर कर देना इसका जैसे यह वाला देते हैं ठीक है यह वाला बैग्राउंड कलर आप इस पर कर देना तो देखो सब पर बैग्राउंड कलर यहां पर चेंज हो रहा है ठीक है सब पर बैग्राउंड कलर चेंज हो रहा है इसी के साथ

19:04तो यह इस तहरी के इस तहरी के इसा की ज्बिश्य आपने आइकने ख़े तो झिंद हो थी tomorrow उग्शान कुर।

19:34ठीक है तो यह अपने पास क्या बन गया अपने जो अपने को यहां पर अपने इस्किल्स वाला जो अपन दिखा रहे हैं वो अपने पास यहां पर क्रीट हो गएगे अब इसके बाद नेक्स्ट अपने पास क्या रहा है अब आउट बन गया इस्किल्स बन गया प्रोजेक्ट

20:04से भी test हूं जाइन डास करके कम दिपक्तल Diटे कव मेरा देता हूं जांड है जांड है डॉद

20:28तो प्राइकन यहां से अपने आइकन से उस्पेस अप्पर यह रहे हैं अपना इकन तो इसकी

20:34पर भी आइकन लगा देखें यहां पर आता हूं प्रोजेक्ट के लिए बन अपना आइकन देखें तो प्रोजेक्ट

20:43कि अधिक है ठीक है

20:49कि यह तो डाइग्राम का आइकन देखो

20:59कि अधि

21:04कि अट इसक गडिए हैं यह ने लेता है यहां पर आ मांइकन

21:16कि अपने पास किसक्ट आएगा अपना प्रोजेक्ट वाला सेक्ट यहां

21:25वाला section अपने पास यहां पर आ रहा है

21:26अब यहां पर जल्दी से इसको create कर लो

21:29यह पने यहां पर अपना

21:31h2 tag लिया है

21:32उस h2 tag के बाद अपन यहां पर क्या करेंगे

21:35अपने project की यहां पर

21:37अपन दिखाने वाले हैं

21:38कि क्या-क्या project है तो मैं यहां पर

21:41एक container बना लेता हूँ जिसको

21:42मैं यहां पर कहता हूँ project

21:44container ठीक है

21:48और project container के अंदर अपन यहां पर

21:50क्या बनाने वाले है अपने project की

21:52card बनाने वाले है तो मैं यहां पर कहता हूँ

21:54project

21:55card ठीक है

21:58और इस project card के अंदर

22:00अपन यहां पर क्या बनाने वाले है

22:02अपना एक S3 tag ले लेते हैं जिसके अंदर मैं यहाँ पर बदाता हूं कि मेरा जो प्रोजेक्ट है वो किसका है मैं यहाँ पर कहता हूं

22:08Portfolio

22:11Site

22:13अभी के लिए मैं यह सिर्फ एकी प्रोजेक्ट यहाँ पके रहा हूं और इसमें एक paragraph tag में यहाँ पर ले लेता हूं

22:19और उस paragraph tag के अंदर अपन लिख देता है जैसे lorem करके

22:2310 का content यह तो पहला मैं यहाँ पर लिया ऐसे ही मैं कोई हाँ पर कितने card लेने पड़ेंगे

22:34अपन ले ले दे हैं अपर अभी के लिए कुछ भी ले लो जैसे मैं तीन card ले लेता हूं अभी के लिए copy paste कर देता हूं मैं तो second card और यह थार का ठीक है

22:43पहला आपन यहाँ पर क्या बता रहे है अपना portfolio website दूसरा में यहाँ पर कहता हूं e-commerce website ठीक है

22:49project दूसरा में यहाँ पर कहता हूं e-commerce का है

22:52e-commerce website और तीसरा अपन यहाँ पर कहता है अपना

23:00chat

23:05chat ठीक है इनके लिए icons भी लगा देते हैं चलो अपने एक काम करते हैं

23:11सब card के अंदर icons लगया है यहाँ पर इस तरीकी सारा है अपने पहला क्या दिया portfolio ठीक है

23:17तो portfolio के लिए मैं यहाँ पर क्या ब्रफिल्वाज अपना icon ले लेते हैं

23:25portfolio यह लो यूजर वाला चीक है

23:33या फिर यह ले लो यह बी अच्छा लगा रहा है या फिर यह ले लो यह भी अच्छा लगा है

23:39यह portfolio की लिए है तो इस extra de Leg के पेले ही मैं लगा रहा दाए

23:43अपना आइकन फिर उसके बाद e-commerce के लिए है तो e-commerce के लिए भी एक आइकन ले लेते हैं यहाँ पर ठीक है वो मैं आपर करता हूँ

23:53तो यह रहाँ अपने पास के है अपने यहाँ लगा लेते हो फिर ऊसके अलावा अपने पास पर लेते हैं और अपने बास Она को भी यह लहाँ है अपने पासts Currently यह यहाँ ले लेते हैं अपने बासging अपर इस तरीके सा आधे

24:23अब अपने को सिर्फ इनको containers में convert करना है

24:26तो जल्दी से अपने इनको containers में convert कर देते हैं

24:28अपने को CSS लिखनी है

24:30मतलब जो मैंने यहाँ पर project का जो container बनाया है

24:33उसके उपर बस अपने को यहाँ पर अपनी CSS लगानी है

24:37अब देखो यहाँ तक तो मैं flags यूज कर दा लेकिन

24:40अब मैं यहाँ पर यूज करूँगा

24:42इन cards को arrange करने के लिए यहाँ पर अपना grid

24:47ग्रिड के थुरू मैं यहाँ पर इसको sign करूँगा

24:50देखो कैसे यहाँ पर आ जाओ

24:52और मैं यहाँ पर कहता हूँ उपने पास जो अपना project container अपने यहाँ पर बनाया था

25:00उसको मैंने यहाँ पर target करा और उसके उपर अपने लगा दिया अपना display और display पर मैं लगा देखा हूँ grid

25:06अब मैं यहाँ पर grid template columns है उसके उपर अपना function लगाएंगे अपन repeat वाला

25:13अब repeat वाले function के अंदर मैं यहाँ पर क्या करूँगा

25:16कि मैं को यहाँ पर repeat वाले जो function है उसके अंदर मैं को कितने यहाँ पर create करने है वो अपन यहाँ पर pass कर देंगे

25:25कितने अपने वाले जो कहाँ यहाँ आपने create करने है और कितने pixel का यहाँ पर create करना जाते है वो मैं यहाँ पर pass करूँछा हूँ

25:34जिसे मैं पहला तो मैंने यहाँ पर लगया अपना autofit है

25:37के अंदर में यहां पर क्या दे रहा है उपना ओडो फिट महां पर पास करहें है तुट

25:56तो यहां पर यहां पर पास कर रहे हैं पहला मैंने पास करा मैंने पास करा ग्रेट टेंपलेट कॉलम्स ठीक है और उसमें मैंने बुला ओटो फिट रहना चाहिए

26:17मैंने पर पास कर दिया फन अब यहां पर पास कर रहा है उसके अलावा अपन जो ना प्रॉजक्ट कंटीनर लिए उसीप मैं आपर गप लगाता हूं सबकी बीच में चैसे मैं आपर 28

26:33यहाप क्रेकर करें होगा

26:40है आपके इसको बोलो सैक्शन को कर एक तर्वेट करता है यहाँ निए यहां आपर

26:57मार्जिन लगा रहा है तो वो सब पर अप्लाइब हो जाना इची है तो सही आ जाएगा हुआ ठीक है तो इस तरीकी से अपने पास यहां पर आ रहा है प्रोजेक्ट और पूट्फूल यू और यह चैट एप ठीक है परफेक्ट अब देखो यहां पर आते हैं मैं इसको मार्�

27:27इसे यहां सब्सक्राइब कर रहे हैं उसको मैं आपर एक बैगराउंड कलर देता हूं ठीक है जैसे अर्जिबी ए और वो में आपर 255 फस्ट वैल्यूद मैंग जीम्मीमम फेarl धिर ग्या, तीक है तीनो व्यल्यू मैंग आपर यहां पर पास कर रहा हुँ हूँ ठ, टीक

27:44तीनो वेल्यू, मैग्जिम पर आपर पास कर रहे हैं, फोर्थ अपने पास क्या होता अपना ओपेसिटी वो तो में 0.0 यहां पर अपन देते हैं, 0.5 इस काड के लिए, जो अपने पास अपना काड के लिए रोग गया है, उसके लिए मैंने यहां पर पास कर दी है, ठीक है, �

28:14पर इसको 50 pixel की यहाँ पर पास कर देता हूँ, 50 pixel की water radius अपने पास हो गई है, फिर उसके बाद next अपने को यहाँ पर क्या करना है है, यह अपने पास water radius लग गई इस पर सारे चीजी हो गई, water पर create कर देता है, मैं कहता हूँ water भी बना देना, ठीक है, 1 pixel की solid और color आप यही दे�

28:44अबी के लिए, तो बादर भूरी से अपने को create हो टीव लिए कि उसके पर, तो मैंने यहाँ पर क्या किया, इस तरीके से यह पास करा है, अब देखो जैसे आप स्कॉल कर रहे हो तो इस तरीके से आपको यह दिखाई दे रहा है, आपकी जो नए उबार है, उसमें आपने backdrop

29:14अब देखो जैसे आप स्कॉल करोगे तो वो जो आपका पीछे का जो content है तो उसके पीछे blur हो के आ रहा है, चीक है, content जो है, वो blur हो के आ रहा है, इस पूरे इसके पीछे, चीक है, तो यह अपने यहाँ पर create करा, अपने इसके icons को भी target कर लेते हैं जलनी से, मैं यहाँ पर

29:44ज़िची मैं पर चैंज कर देता हूं, जैसे मैं आपकागे आप � Apostles, और Link और अपने पास अपने आइकन्स है, वो इस तरीगी से आपने यहाँ आपर दिखा़े देने हैं, चीक है, तो यह अपने पास और चैंज कर सकते हो, इस तरीगी से ना दिखागे, जैसे का लर वाल

30:14तो यह अपने पास क्या हुआ आपने

30:22अपने पास प当े पमें

30:39निक्स्क जबतें

30:40है किया है नेक्स्ट अपने पास अपना कॉंटयक्ट वाला स्पिन भी एह तो फनी act मौन कम उखले है जल्दी

30:52और यहां तक चीज तो इनॉम कि आप सभी को क्लिए है एक

31:00नेक्स अपने बनाते हैं अपने कॉंटेक्ट वाला सेक्शन तो यह तो अपने पास कौन सा सेक्शन होगा है अपने प्रोजेक्ट वाला ठीक है यहाँ पर लिग भी दो यह कौन सा सेक्शन है अपना प्रोजेक्ट प्रोजेक्ट ठीक है फिर उसके बाद नेक्स अपन यहाँ

31:30सब्सक्угार्वाइड भाकोफ।

31:34और class भी मैं यहाँ पर इसको कहा देता हूँ contact, ठीक है?

31:39Class और ID सीम देते हैं, उसके अलावा एक tag मैंने यहाँ पर लिया और उसके अंदर कहा देता है contact me

31:48ठीक है? उसके अलावा अपन यहाँ पर अपना form बना लेते हैं, जिसमें अपना contact वाला form बनाना चाहते हैं

31:56तो मैंने अबर फॉर्म को मैं और इस प्रेफ स्नी टंट लैता हो फिर वर कर यक फार

32:04डियकली हम ऊपने पहला और यहां पर गद रहते रहे हो ला-ने कैने स मैं आण्यूवरर अटीक

32:17और उसके बाद आपने यहां पर उससे टासो सिया ले लेते हैं गclamation भी स्पूल डड़ और उसके से बाद आंपने यहां पर कहते हैं एप्ले प्लाइश हो अर्प टासो

32:47तियुकर योवर मेसेज़ फिर उसके अलावा अपन यहाँ पर अपना एक बटन ले ले

33:00कि मेसेज टाने इतना सा वह और यहाँ पर बनाना चाहते है एक

33:07form क्यास है चीए नेम इमैल कॉंटेक्ट और भी मेसेज हैं अपना

33:14कि अपन जो अपना यहां पर कॉंटेक्ट लिख रहे हैं उसके लिए भी अपन यहां पर कहते हैं कॉंटेक्ट

33:19करके लिए यहां पर और यहां पर और यह रहा

33:43कुंछ इस तरीके से इसको यहां से कॉपि करो और यहां पर इसे को लगा दो घ्राइए यहां पर यहां

34:05तो आपने क्या नाम दिया है यहां पर इसको कॉंटेक्ट करके अपने यहां पर क्या

34:10दी अपनी क्लास यहां पर अपने दी है ठीक है यह कॉंटेक्ट करके अपने यहां पर इसको प्लास दे दी

34:25ठीक है अपने इसको टार्गेट कर लगता है

34:36तो यहां पर आ जाओ यहां पर आ जाओ यहां पर आ जाओ यहां पर आ जाओ

34:44मैं कहा देता हूं कॉंटेक्ट और कॉंटेक्ट के अंदर अपना जो फॉर्म है उसको मैं यहां पर टार्गेट कर लेता हूं

34:51मैं कहाता हूं डिस्प्ट्टले आप लगा देना और लगाता हूं उसके अंदर यहां पर घरते है कि आप इसको

35:02कॉलम भाइससरी चरदे और गर में यहां पर लगाते हूं सबकी बीच में जैसे

35:08यहां रहा यह डिखाँ में आपट

35:11प्रक लिए संटर में लाने के लिए पन्हेंपर क्या करेंगे

35:30को स्टीब क्लगा तो मैंने जब्सक्राय कोंटेंट और यहाँ पर लगा दिया मेरे सेंटर में लिड़ाना चाहिब

35:37कि यहां पर आइटम भी लगाओ और उसमें अपन क्या देदे अपना सेंटर देदें जिस्टिफाइए कॉंटेंट और आइटम सेंटर इस्ट्रक्चर भी गड़ीगा एक काम करते हैं इसको तो हटाओ मैं यहां पर क्या करता हूं इसको मार्जिन दे देदा

36:07अब इसको मार्जिन 30 पिक्सल की टौप बोटम से दे रहाँ और बाकी यहां पर लेप्राइट से ओटो कर देता है तो यहां पर सेंटर में जाएगा ओम ठीक है यह मैंने यहां पर मार्जिन दी और यह अपने सैट कर दिया और यह सारी चीशे है तो इसके अंदर को क्या करना

36:37और यह जैसे में यहाँ पर पैडिंग देदी 12-pixels की पैडिंग अपने आपर दे रहते हैं और में आपर देथ हूं जो इनिशिल बॉर्डर को क्या करों नन करों और जो आउटलाइन आती है

37:04चिक आपने पास अपना बटन को टर्ट म सब्सके अंदर बटन है

37:33उसको मैंने पर टाऱ्йत किया और एक बाइग्राउट उसको देते हैं और ब्रदर उसको देता हूं

37:58प्रेडियों से पनगा देते हैं 28 पिक्सल की ठीक है और मैं फून ट्विट्ट ही हाँ पर पास कर देता हूं उसको मैं आप अगया हम गूल कर देना ठीक है और जो करसर है वो यहाँ पर क्या देना चीए पॉइंट राजाना चीए यह पन उस बटन के लिए कर रहे हैं तो अ�

38:28बटन है उसके ऊपर अगर में होवर करो तब मेरे को इसका बैगऌन कलर क्या करना है और इंज करना है तो के चलीट

38:39पर यहां पर यहां पर आओ ठीक है इतना असा गाम अपन कर लिए तो अपने पास तरीके से अपना

38:52पर्फेक्ट कोई दिकत नहीं है तो यह तो यह तो पने यहां पर अपने सारे सेक्शन क्रिएट कर लिए

39:07अपने पर यहां पर यहां पर यहां पर आओ और इसको जैसे में यहां पर चेंज करके 42 कर रहे हूं और यहां पर अपन इसको 0.8 ही रहना रहते हैं

39:36अब ही लिए थोड़ा सा कलर चेंज हुज जाएगा इसका अच्छी के नहीं लग रहा है यूनिक थोड़ा सा इसको लाइट कर दो फिर रहां पर्फेक्ट

40:06यह जितने भी आइकन से उनको भी थोड़ा साब कस्टमाइज कर सकते हो और करना चाहुत हो जैसे

40:10कि फूटर एवड़ा इसके इंदर फूटर बनाओ फूटर नहीं बनाया एंपने फूटर बना लुए फूटर को चोटा सा कॉनल बना राएक जाधा दिमाग नहीं लगा इए फूटर के इंदर टीके मैं यहां पर करें तो

40:22ले ले लेता हूं कि यह अपने पात अपना पूटर रहने वाद है तो मैं आपर फूटर टैग ही ले ले लेता हूं और उस प्रटेग के अंदर पना प्रट टैग यह पना पर करे ले लेता हूं

40:40और यहां पर कहते हैं और यहां पर कहते हैं अधिवान शूसर और यहां पर कहते हैं

40:54इस टीमल और एंड शी एलस इतना सा कहते हैं तो यह अपने पास यहां पर आजाएगा परफेक्ट इसको थोड़ा सा कस्टमाइज कर लो सीम वैसा ही दिखा देते हैं जैसी अपनी नहीं वार है वैसे ही मैं यहां पर अपनी फूट्रों को बता देता हूं तो इसको टार्गे

41:24और टेक्स्ट को आप यहां पर लाइन करके सेंटर कर देना उसके अलावा जो बैग्राउंड कलर है वो अपनी यहां पर कौन सा देंगे यह वाला देता हूं मैं चलू ठीक है चेक करो कैसा लग रहा है वो तो सहीम होगा हूँ देदी अपने नेवबार वाला देदो यहां

41:54हूँ हुआ मतली कि लगगा देते हैं मैं घरिंग लगाई और पैडिंग अपने आपर इसका यह जाए सीफ्टीन पिक्सेल की लगा देना ठीक है कलर आप यहां पर यह बदा कर देना चीग होगय और wolf म Life वूरी सी आपने यहां सबकिते हैं जीरो पॉंट सा आयंग अथन आ

42:24के लगाया है पर डॉट फूटर अटाओ अनली फूटर नॉट नॉट नॉट

42:28मार्जिन टॉप लगा दो इसके पर हैं वन पिक्सल सॉलेट और कलर अपन दे दे इसके पर ये वाला

42:45वाइट कलर कर दो

42:49यह क्या कर दो यार बॉटर बनाने है अपने को बॉटर बनाओ वन पिक्सल की सॉलेट और कलर वाट

43:09टॉटर टॉप देनी है लेकिन ओनली टॉप ना की और डायरेक्शन ओनली टॉप की बॉटर यहां पर आप दे दो इसको भी आप दे सकते हो बॉटर

43:24नेवार नेवार नेवार नेवार नेवार इसको मैं दे देता हूं यहां पर ओडर बॉटम वन पिक्सल सॉलिड और वाइट करेंगी तो यह अपने पास अपना पीसिक सा पोर्टफोलियो पर नहीं आपर बनाया

43:51इसमें थोड़े बहुत चेंजेस कर लो यहां पर वड़ पर ही सब्चीज चली घी है ओम अबाउट करने चीजह जब में हूंपर क्लिक करूं आउट पर क्लिक करूं तो वह तो अपने इंटर्नल लिंकिंग जो है वो अपने करनी पड़ेगी आफ़वार के अंदर चीक है �

44:21चीशेर और ओर यह कहां पयाना च्छेँए आपना अबहाउट वैला तुम्हें अग्षन पर dar ऊ-गिव किस्ति किन won't be the

44:34यह पने पास किया है अपना प्रॉचेक्स तो यहाँ पर आयड़ि दे थे पर ने पास अपनी अपनी

44:40पर्ॉजेक्स चीए है और यह अपने पास गवना कॉंटेक्ट तो इसकी ऐडी कॉंटेक्ट अपन यहाँ पर पास करता है

44:48पर्फेक्ट यहां पर आगे चख कर लो हूं अब आउट स्किल प्रोजेक्ट कॉंटेक्ट इस तरीके से अपने पास यहां पर यह बना रहन हो रहा है

45:02अब अब अब अब आगे अब अब अब अब एक रेस्पोंसिव करो अब इसको अब फिर से आओ इंस्पेक्ट करो चीक है मैं यहां पर इसको चेंज करता हूं पर फेक्ट और चेंज करो

45:32कि यहां पर देंगे वादस में जादा आ रहा है इसको चेंज करते हैं और यह बनाने कि यहां पर यह जो है यह भी घट ही

45:58लिखता हूँ एट्रेट मीडिया चीक है और अपनी यहां पर अपनी

46:03मेंगजिब विड्ट यहां परthis न पर पस कर देते हैं और वह मैं यहां पर

46:07पास करता हूँ इलोरां शेंट-ईड डिसीड़ क्या क्या चाहते हैं तु मैं

46:13यहां पर डैक्शन हो रहा है फ्लडांट एक है यहां पर द्रेक डैक्षन हे वह तो यहां पर अवरेन के वह राइन और इसकी जो थे टेटी

46:41पेड़ाएं का लगा देना और पेडिंग भी आप एहां पर लगा देना जैसे 15 या पिर 16 पिक्सल की पाड़ा जाएे

46:52तो यहाँ पर इस तरीके से जैसे से नीचे जाएगा तो वह अपनी नयो पर इस तरीके से लिए जो कहँए जा जाए है ठीक है

46:58उसके अलावा जो अपना hero के अंदर section के अंदर ही अगर अपने इसको उपन करते है अपने पास due है

47:15और इसके अंद अपनी पास h1 tag है

47:18इसकी phone size अपने क्या दे रखी है three और एम कर रखी है

47:22Cette phone size मैं कमीकर लेता हूँ टो मैं यहाँ पर करता हूँ

47:25कि जो अपने पास अपना hero content है उसमें जो h1 tag है उसकी मैं यहाँ पर phone size क्या कर देता हूँ

47:35यहाँ पर आगे check करो तो उसकी phone size कम हो गई है उसके अलावा देको यहाँ पर जो section है वो padding ज्यादा ले रहे हैं अपने पास top और bottom से तो अपने काम करते हैं अपने section करके target किया था तो मैं यहाँ पर कहता हूँ कि जो section करके जिसको target किया है उसी को मैं हाँ पर padding पास कर देता ह

48:05अपने section को पैडिंग की तीरी चेक करो section को अगर आप देखोगे तो अपने दे रखिए 80 और 60 पिक्सल उसको मैं यहाँ पर कम कर रहे हैं तो अपने पास कुछ इस तरीके से अपने को यहाँ पर ही दिखाए देगा ठीक है अगर अपने इस से उपर डिवाइड में जा रहे

48:35इस तरीके से ठीक है तो यह अपना चूटा सा एक प्रोजेक्ट है यहाँ तक की चीज के लिए है तो एक बार कमेंट करके बताओ यह सर यहाँ तक की चीज के लिए है कोई डाउट नहीं है किसी को

49:05जो आपका गिटब का यूरल में आपको दे रहा है उसी के अंदर आपको यह कोड भी मिल जाएगा जो पर ने अभी कोड लिखा है वो पूरा कम्प्लीट

49:31सिभूल करेगी सर कॉंटेक्ट सेक्शन में कोई बैगराउंड कलर होता तो अच्छा होता

49:39चीज के लिए

49:47सिभाक्षी करेगी सर ने वबार को स्चिल कैसे रखना है प्लीज बताओ

49:56स्चिल मतलब

49:57स्चिल मतलब क्या होता है स्चिल

50:02मतलब कैसे स्चिल करना चाते हो यह बताओ

50:05क्या करना चाते हो ने वबार के साथ

50:09चीज करेगी यह सर दिस इस क्लियर बटा है वन किशन वट इस ले आउट शिप्ट ले आउट शिप्ट नांसे के लिए ले ले आउट शिप्ट मतलब जो भी आप

50:39इस वहाता है तो उसको ले आउट शिप्ट कहते हैं जैसे मालो आपने कुछ भी कंटेनर्स बनाया बटन बनाया इमीजिस बनाई ओटमेटिकली इदर उदर शिप्ट हो रही है वो सही से अरेज़ नहीं हो रही है अचानक से आपका पेज हिल रहा है ठीक है पेज चेंज हो

51:09वो अपने उसके पोजीशन फिक्स लगा रहा है कि इसलिए उसकी नवबार पोजीशन के उपर ही है अपने पास

51:15इशा करें कि सर मुझे मौन की ओफलाइन इंटर्शिप मिल गई बहुत अच्छी बात ही तो बदा ही हो

51:23सिभू करें सार एक डाउट है कि जो नवबार है उसमें यूवल का used क्यों किया जाता है

51:29all भी तो use हो सकता है all भी use कर सकते है Import list भी कर सकते हो

51:34unorder भी कर सकते हैं कुई हपन यहाँ पर उसका list style type अमेशा change कर लिते हैं

51:38तो आप OOL यू L दूंहें कर सकते हूं कोई रिक्कत में है

51:47अग makes up

51:52मैं ज़ाद देखता हूं यूल का ही यूज होता है हाँ ज़ादर यूर्य यूज

51:56करते हैं O is कर सकते हैं कोई वह नहीं है इस में की डूर याज यूर

52:03करता है

52:08अटनेंस के पॉइंट वन के अंदर आपको मेंशन करना है प्रोजेक्ट प्रोजेक्ट ग्लास यह अटनेंस का पॉइंट वन है अटनेंस के पॉइंट वन के अंदर आपको क्या मेंशन करना है प्रोजेक्ट ग्लास

52:24ठीक है इशा करें उन्होंने कहा कि अन्पैड है और वो स्क्रेस से सिखाएंगे तो बहुत अच्छी बात है

52:38सीखो सीखनी के टाइम ही है इशा करें मैं तो जौब के लिए गई थी

52:42अगर वो आपको प्रोजेक्ट पे काम करा रहे सब कुछी बात है तो बहुत अच्छी बात है

52:53ठीक है

53:06अटेंडेंस का पॉइंट टू मैं आपको अज़ात हूं अटेंडेंस के पॉइंट टू के अंदर आपको क्या फिल करना है

53:11अटेंडेंस के पॉइंट टू के अंदर आपको लिखना है इस किल वाला

53:14यह आज की अटेंडेंस के पॉइंट वन और पॉइंट टू है जो आपको फिल करना है

53:20सब्सक्राइब कोई परेग्राफ या कुछ स्पेसिंग कैसे दिया जाता है

53:26Spacing के लिए अपन margin padding यूज लेते हैं

53:28paragraph के अगर paragraph में जैसे

53:31एक-एक word के बीच में स्फिसिंग करना है

53:33तो word spacing आता है

53:34जो positive negative दोनों value पे चलता है

53:36ठीक है, depend करता है अपन क्या use कर रहे

53:39क्या करना चाहते हैं

53:40ठीक है, तो यह attendance के point 1 और point 2 है

53:43जो आपको fill करने है

53:44विश्वीजीत करें कि सर जावा स्क्रिप्ट कब स्टार्ट होगी

53:51जावा स्क्रिप्ट अपनी स्टार्ट होगी

53:53जैसे ही अपना बूट सेफ कंप्लीट होगा

53:57उसके बाद अपनी जावा स्क्रिप्ट स्टार्ट होने वाली है

54:00ठीक है जैसे ही अपना

54:03boot setup complete होगा अपनी java scriptus

54:06टाक हो जाएगी

54:06sir com क्या होता है

54:16यो com

54:17subject के अलग-अलग इसका

54:19meaning निकलता है

54:21किस चीज के लिए पूछ रहा है

54:22जैसे skillwala.com

54:26ठीक है

54:27अभी आप joho.com

54:30ये भी होता है

54:31facebook.com, google.com

54:34domain name होता है extension

54:37वो भी होता है

54:38इसके लागव

54:55component object model भी होता है

54:57लेकिन वैसे तो

54:58अगर पूछा है तो वो

54:59extension ही होता है

55:00आपका जो

55:01अपने domain का name होता है

55:03उसका last का extension

55:04ठीक है

55:06ठीक है जलो आज की class इतने ही मिलते है

55:10फिर अपने next class के अंदर

55:11आगे की चीज़े discuss करने के लिए

55:13I hope की यहां तक का काम आप complete करोगे

55:16और next class में अपन डिसकस करने वाले है अपने bootstrap के उपर

55:19ठीक है तो अपन bootstrap पे discuss करेंगे

55:22उसमें भी मैं आपको कुछ assignments देने वाला हूँ

55:24तो कल से अपन डिसकस करेंगे अपने bootstrap के उपर

55:27यहां तक की चीज़े complete cover करना

55:29ठीक है bootstrap के बाद अपने जावा script करेंगे

55:32क्योंकि वहीं से आपकी mean journey स्टार्ट होने वाली है

55:35ठीक है

55:37ओके thank you so much guys good night everyone

55:39bye bye everyone

Be the first to comment

Add your comment

Day - 28 | 🎨 Final CSS Project Class | Complete Portfolio Website Using HTML & CSS

Category

Transcript

Be the first to comment

Recommended