Up next in 10
Project 1_ Facebook Clone in Tailwind CSS_ Tailwind Tutorial #14
22 views
Feb 21, 2024
The video titled "Project 1: Facebook Clone in Tailwind CSS _ Tailwind Tutorial #14" is a tutorial aimed at web developers interested in building a Facebook clone using the Tailwind CSS framework. Tailwind CSS is a popular utility-first CSS framework that enables developers to create stylish and responsive user interfaces efficiently. In this tutorial, viewers are guided through the process of creating a Facebook clone, a project that replicates the look and feel of the Facebook website using Tailwind CSS. The video likely covers topics such as: 1. Setting up the project environment and installing Tailwind CSS. 2. Structuring the HTML markup to mimic the layout of the Facebook website. 3. Utilizing Tailwind CSS utility classes to style the various components of the Facebook clone, such as navigation bars, posts, comments, and user profiles. 4. Implementing responsive design techniques to ensure the clone looks good on different screen sizes. 5. Adding interactivity and functionality using JavaScript or a JavaScript framework like React or Vue.js. 6. Testing the Facebook clone to ensure all features are working correctly. Overall, the video provides a hands-on demonstration of how Tailwind CSS can be used to create a visually appealing and functional clone of the Facebook website, serving as both a learning resource and a practical example for developers looking to enhance their CSS skills.
View Video Transcript
0:00
सो फार जो साइट्स हम लोगों ने इस कोर्स में बनाई हैं, वो हम real world में शायद ही कभी देखेंग�
0:04
क्योंकि हमने जितने भी pages बनाए, जितने भी styles लगाए, वो सारे learning purposes के लिए लगा�
0:09
आज के इस वीडियो में मैं आप लोगों को दिखाऊँगा Facebook का login page clone बनाक�
0:14
exactly जो Facebook का home page है उसके जैसा हम लोग clone बनाएंग�
0:17
और मैं आप लोगों को from scratch using Tailwind CSS ये करके दिखाऊंग�
0:21
Facebook का ये clone बहुत अच्छी तरह से बना और exact reply का बन�
0:25
आप लोग जब इस clone को देखेंगे अपने हातों से बनाने के बाद त�
0:29
आप लोग खुद चौंग जाएंगे कि ये facebook के जैसा नहीं ये exactly facebook ही लगता ह�
0:35
बहुत easy होगा अपने दोस्तों को confuse करना कि वो facebook पर नहीं आपके tailwind clone पर ह�
0:40
और ये सारा का सारा हम लोग tailwind की utility classes से करेंगे तो चलते हैं computer screen के अंदर और start करते है�
0:46
facebook के clone को बनाना लेट्स केट स्टार्टिंग तो ये ना Facebook का लॉगिन पेज और इसको हमें करना है clone
1:02
सबसे पहले मुझे ये image को लाना होगा राइट लिख करके इसको save as करूँगा और यहाँ पर इसको save कर लूँग�
1:08
अब यार इस SVG को मैंने डाउनलोड तो कर लिया मुझे करना क्या है कि यहाँ पर folder बनाना ह�
1:13
मैं क्या करूँगा यह जो template है इसको copy करूँगा और यहाँ पर इसका नाम रख दूँगा project 1
1:17
जो कि मेरा है facebook का clone ठीक है right click करके open with code करूँगा इसको जल्दी से यहाँ प�
1:22
और open with code मैंने कर लिया अब क्या करूंगा यहां पर मैं जल्दी से screencast मोड को ऑन कर लूंगा ठीक है तो यहां पर जल्दी से मैं राइ�
1:31
क्लिक करके एक मिनट ही जो इंडिक्स और एसटीमल इसमें राइट क्लिक करके मैं जल्दी से कमांड पैलेट खोलूंगा औ�
1:38
टॉगल स्क्रीन कास मोड का शॉटकट क्या लोग शॉटकट नहीं उसकी निकास पूरा ने कवाख ठीक है वह ना चाहिए था वैस�
1:45
है क्यों नहीं टॉगल वर्ड राफ्ट भी कर दिया था कि मैं यहां पर जून करूं तो आप लोग देखने को मिल List
1:49
आएगा मजा ठीक है सबसे पहले तो मैं जो बॉडी के अंदर डाला हुआ है जब आएगा ठीक है मुझे नहीं चाहिए कु�
1:54
भी और मैं जल्दी से एनपीएम आई कर लेता हूं ठीक है एनपीएम आई नपम आई और यहां पर नोड़ वॉड्यूल्स फोल्ड�
2:03
गया है और एनपीएम राम स्टार्ट ठीक है और यहां पर यह देखते हैं कि कुछ हुआ कि नहीं हां कुछ तो हु�
2:12
खाली है तो खाली दिखेगा ना यहां पर कुछ लेता हूं और यह देखता हूं कि यार टेलबिंड का अनिकेशन काम कर रह�
2:17
आपको आपको करना है तो यह इस प्रेसिडेशन काम कर रहा है अब मुझे क्या करना है कि यहां पर यह ज�
2:22
फेसबुक इसको क्लोन करना तो सबसे बड़ा तो इस लेकर आना है और यह टेक्स लेकर आना है तो इस टेक्स को कॉपी करूंग�
2:27
और यह image भी मैं ले आऊंगा, मैंने actually यह image डाउनलोड करी है यहाँ पर, तो मैं इस image को ले कर आऊंगा यहाँ पर अंदर, ठीक है, और इसका नाम मैं fb logo कर देता हूँ, fb.svg कर देता हूँ, ठीक है, अब मैं क्या करूँगा, कि यहाँ पर plan करूँगा, अपना document, अपने document �
2:57
दिव.left और दिव.right अब एक बात मैं आप लोगों को बताना चाहता हू�
3:02
कि left और right tailwind की classes तो नहीं है लेकिन मैं left और right को इस्तेमाल इसलिए कर रहा हू�
3:08
क्योंकि मैं यहाँ पर एक अच्छा idea लेना चाहता हूँ कि कौन सा box मेरा कौन सा वाला ह�
3:13
यह मेरा left वाला box है, यह मेरा right वाला box है, ठीक है, मैंने इसका नाम रख दिया, left और right, अब left वाले box के अंदर मैं क्या डालूँगा, एक तो image डालूँगा, ठीक है, और यह मेरी fb.svg होगी, और यहाँ पर मेरा एक paragraph होगा, जिसके अंदर यह वाला text आएगा, ठीक है, बह�
3:43
इसके बाद यहाँ पर मैं एक स्पैन लगा लूंगा इसके बाद यहाँ पर एक एक चार है और इसके बाद यहाँ पर एक और बटन है ठीक है फिर फाइनली इसको भी प्लान करेंगे कि किस तरह से लेकर आना है अभी के लिए मैं क्या करता हूं जल्दी से इनपुट टाइव �
4:13
phone number, ठीक है, तो यहाँ पर देखो, email address और phone number, इसके बाद password, और इसका type जोगा, वो password होगा, तो मैं यहाँ पर password लिख दूँगा, और यहाँ पर इसका placeholder भी password है, ठीक है, placeholder भी इसका password है, ठीक है, मैंने सब कुछ ठीक से लिख दिया न, हाँ बढ़िया, यह मेरा document है, यह भी �
4:43
दिया मैं raw page को plan कर रहा हूँ अभी मैं styling वगैरा नहीं कर रहा हू�
4:46
मैं बिलकुल raw जो मेरा page है उसको plan कर रहा हूँ ठीक है और इसके बाद आप लोग देखन�
4:50
कि कितने आराम से मैं tailwind CSS की utility classes add करके इसके अंद�
4:56
styling कर दूँगा ठीक है इसके बाद एक button है फिर span है ठीक ह�
5:00
तो मैं यहाँ पर button लिखूँगा button.btn लिख रहा हूँ मैं एक classes change करूँगा obviously
5:06
और button के अंदर क्या text लिखूँगा login ठीक है इसके बाद एक चीज और करूँग�
5:13
जो मेरा facebook page है इसके अंदर title tag होगा कहा ह�
5:16
title tag title tag कहा हो तुम कहा हो तुम title कहा हो तुम यहां हो title को ऐसे ही copy कर लूँगा as it is ठीक है और इसको डाल दूँगा मैं यहाँ पर ठीक है और यह क्या कर दिया मैंने double click हाँ अब ठीक है अब facebook login और sign up बिल्कुल same title मैंने यहाँ पर डाल दिया है पता ही नहीं चल रहा है कौन सा क�
5:46
लेता हूं बड़ा भी के लिए मैं क्या करूंगा कि ऐसे रहने दूंगा अब मैं क्या करूंगा कि मैं जो रॉपेज क�
5:52
प्लान करा था उसको कंटिन्यू करूंगा तो सबसे पहले तो मैं यहां पर क्या करूंगा अपने विशेष कोड के अंदर आऊंग�
5:57
और यहाँ पर मैंने बटन बना दिया, इसके � pace मैं एक span बनाऊंगा, और span के अंदर, मैं यह text डाल दूँगा, क्या text था, forgotten password, copy करूँगा ऐसे कैसे, और डाल दूँगा यहाँ पर, ठीक है, forgotten password, और यह करने के बाद मैं क्या करूँगा, इसके बाद एक HR लगाऊंगा, एक HR, �
6:27
और इसके नीचे जो यहाँ पर लिखा हुआ है उसको मैं बाद में प्लान करूँग�
6:31
उसका रीजन यह है कि यह जो मेरा वाइट कलर का बॉक्स है इसकोu मैं पहले ठंग से लाना चाहता हू�
6:36
उसके बाद मैं ये text ले आओंगा अभी के लिए अगर मैं आप लोगों को दिखाओंगा मेरा page कुछ इस तरह से दिख रहा ह�
6:41
अब एक बहुत important बात आप लोगों को बताना चाहता हूँ जब भी आप Tailwind CSS के साथ काम करते ह�
6:45
तो आप सबसे पहले mobile first preference लेते हुए काम करते ह�
6:50
for example जब भी आप coding कर रहे हो आप सबसे पहले phone के लिए अपनी website को बनाओग�
6:55
फिर जैसे जैसे break points hit करते जाएंगे वैसे वैसे आप change करते जाओग�
6:59
अपनी classes को और वो बहुत आसान बन जाती है चीज़े अगर आप इस तरह स�
7:03
करते हो तो और ऐसा अगर आप लोग करते हो तो चीज़े बहुत आसान बन जाती है अग�
7:07
आप tailwind use नहीं भी कर रहे हो तब भी mobile first आप जब भी coding करोग�
7:11
तब आपके लिए चीज़े आसान बन जाएगी लेकिन ऐसा compulsory नहीं है कि आप लोग हमेश�
7:15
mobile first ही approach के साथ काम करो mobile first approach एक बहुत बढ़ी approach ह�
7:19
लेकिन tailwind के साथ आप लोगो यह approach लेना ही पड़ेगा आपको सबसे पहल�
7:23
अपने phone के लिए coding करनी होगी फिर जैसे जैसे आपके break point जैसे की SM, LG
7:27
यह सारे break point जैसे से hit होते जाएंगे वैसे वैसे आप change करते जाओगे अपनी site क�
7:47
est la clone facebook responsive screen
8:02
और इसको fire करूँगा, और मैं वापस से facebook.com पर आ जाओंगा इसने दोबारा मुझे m.facebook.com पर ला दिय�
8:08
मैं facebook.com पर आना चाहता हूँ ये वाले पेज़ पर ठीक है मैं इसको clone कर रहा हू�
8:12
तो मैंने यहाँ पर सारे के सारे elements डाल दियें अभी के लिए मैं जो phone वाला approach है उसक�
8:17
नहीं लूँगा मैं mobile first approach इसलिए नहीं ले रहा हूँ क्योंक�
8:21
मैं नहीं चाहता कि मैं m.facebook.com जैसे facebook को बना हूँ इसी page को मैं phone में नही�
8:27
बनाना चाहता हलागी बहुत असान होगा अगर आप लोग mobile first approach लेना चाहते हैं तो facebook
8:31
और ये दोनों चीज़ें आप डाल सकते हो इसके उपर और ये नीचे दिखेगा बट अभी के लि�
8:35
मैं इस page को पूरा का पूरा clone करना चाहता हूँ ठीक है तो क्या approach
8:39
रहेगा मेरा मैंने सारी की सारी चीज़े बना दिये है सबसे बड़े में क्या करूंगा यह जो मेरा बॉक्स है यह जो बॉक्स है मेरा इसको मैं एक मार्जिन दूंगा टॉप से ठीक है क्योंकि आप देखो टॉप से थोड़ी बहुत दूरी लेकर चल रही है तो मैं सबसे बड़े क्या करूंगा टॉप से इसको मार्जिन दूंग�
9:11
इस image को भी मैं छोटा करूंगा और इस image को छोटा करने के लिए मैं क्या करूंगा इसमें कुछ utility
9:15
classes add करूंगा मैं W60 add करता हूं इसमें और मैं W60 add करके save करूं तो यह काफी छोटा हुआ है आप लो�
9:22
सकते हो इसकी बाद आप देख सकते हैं यहां पर Facebook helps you connect यह लिख कर आ रहा ह�
9:25
मैं काम करूँगा इसको एक flex box बनाऊंगा और उसका reason यह है कि मैं इसको एक row मिलान�
9:31
चाहता हूँ आप लोग देखो अब यह row में आ गया है यह box जो मेरा left वाला था और जो right वाला थ�
9:36
वो कुछ इस तरह से आ गया है, और इसको मैं नीचे की तरफ लाना चाहता हूँ, इसलिए इसको भी मैं एक flex box बनाऊँगा
9:41
और इसको flex column कर दूँगा, तो यह करने के लिए simply मैं क्या करूँगा
9:45
यहाँ पर आऊँगा, अपने VS code में, और जो right है उसको भी एक flex बना दूँग�
9:50
ठीक है एक flex box बना दूँगा और flex column flex call करके class होती है मुझे याद भी नहीं थ�
9:56
literally कि flex column नहीं flex call होती है मैंने use कर लिया क्योंकि मेरे पा�
10:00
extension installed है तो यही beauty है tailwind CSS की कुछ रटने की ज़रूरत नहीं ह�
10:03
सारी की सारी चीज़े आपको ये जो Tailwind CSS Intellisense है और थोड़ी बहुत आप अपनी Intellisense का भी इस्तेमाल करोग�
10:10
तो भी आप लोग काफी आगे जाओगे तो मैं क्या करूँगा भी जल्दी स�
10:13
यहाँ पर मैं आ गया हूँ देखो Email Address, Password, Login, Forgotten Password, Create Account
10:19
ये चीज कुछ इस तरह से आ गई ठीक है बढ़िया अभी के लिए बहुत बढ़िया मैं इस पूरी की पूरी चीज को सेंटर में लाना चाता हू�
10:25
तो मैं क्या करूँगा जो container है उसको मैं उपस मैंने क्या कर दिया ह�
10:29
container को मैं MX auto कर दूँगा ठीक है, और MX Auto करने से यह center पर आ जाएगा, आप लोग देख सकते हो, तो अब यह कुछ इस तरह से दिखाई दे रहा है, ठीक है, अब यहाँ अगर आप लोग देखो, तो यह जो color है, यह थोड़ा सा gray हो रखा है यहाँ पर, आप देखो, यह white color है मेरे background का, लेकिन यहाँ प�
11:02
प्रेस करूंगा कभी-कभी इंटेलिजेंस दिखाता नहीं है तो मुझे कंट्रोल स्पेस करना पड़ता है और देख�
11:07
बीजी ग्रे सौ करने से यह आ गया अब यहां पर देखो अगर मैं आप लोगों को यह दिखाऊं तो यह वाइट कलर का इसमे�
11:13
background आ रहा है तो मैं क्या करूंगा यह जो मेरा राइट है इसमें मैं क्या करूंगा बीजी वाइड कर दूंगा इसक�
11:19
इसका background वाइड करूंगा तो यह कुछ इस तरह से आ गया आप लोग देख सकते हो और यहां पर भी इसका background
11:23
वाइड है ठीक है तो यहां तक तो हमने बहुत बढ़िया कर दिया ठीक है तो यह हमार�
11:27
image आ गया हमारा यहां पर यह paragraph आ गया अच्छे से यहां प�
11:31
यह जो space है इसको मुझे ठीक करना है क्योंकि आप देखो यह एक line मे�
11:35
है ठीक है तो इसको भी ठीक करेंगे अभी अब मैं यहाँ पर क्या करूँगा जो मेरा पैराग्राफ है यह जो पैराग्राफ है इसकी साइस को बढ़ाऊंगा ठीक है और यह जो स्पेस है इसको ठीक करूँगा तो साइस को बढ़ाने के लिए मैं क्या करूँगा यहाँ पर क�
12:05
ठीक है तो यहाँ पर देखो कुछ इस तरह से आ गया ठीक है यह कुछ इस तरह से आ गया लेकिन अगर आप लोग यहाँ पर देखो तो यह share with the people in your life जो है एक दूसरी life में तो इसका पतला मुझे एक width देनी पड़ेगी और width किसको देनी पड़ेगी मुझे मुझे width देनी प�
12:35
नहीं कर रही है तो इस चीज को मैं भी बाद में fix करूंगा मैं एक काम करता हूं मैंने भी इसको इतन�
12:39
कर दिया मैं यहाँ पर थोड़ी सी padding दूंगा तो यहाँ पर जो bg white इसके बाद मैं थोड़ी सी padding
12:44
दूंगा और कितनी पैड़िंग दूंगा मैं यहां पर मैं पूरे के पूरे बॉक्स में अच्छी पैड़िंग देना चाहता हूं त�
12:49
मैं क्या करूंगा इसको पी नाइन पी नाइन होता है क्या पीएट करता हूं पूरे के पूरे बॉक्स में पैड़िंग में देन�
12:56
आता हूं और यह जो मेरा फ्लैक्स बॉक्स है इसको मैं काम करता हूं आइटम सेंटर करूंगा सबसे वेले तो औ�
13:01
जस्टिफाई सेंटर भी करूंगा ठीक है और यह करने के बाद देखो इस तरह से सेंटर में आ गया पूरा ठीक है त�
13:07
इस वाले box को मुझे margin देनी है और वो margin कितनी होगी वो margin इतनी होनी चाहिए कि ये जो space है बिलकुल इसको simulate करते हुए space बन जाए ठीक है मुझे इतनी margin देनी है x-axis में left वाले box को तो मैं left वाले box को x-axis में थोड़ी बहुत margin दूंगा मैं mx14 से शुरुवात करता हूँ और mx14 �
13:37
margin दे दी, अब मुझे इस वाले box पर काम करना है, और इस वाले box पर काम करने के लिए मुझे सबसे पहले तो ये edges को round करना है, ठीक है, तो मैं क्या करूँगा, यहाँ पर rounded MD करूँगा, और देखता हूँ rounded MD करने से काफी हथ तक ये edges की round हो गई है, लेकिन मुझे MD नहीं करना ह�
14:07
मुझे लगता है कि यार LG कम है मैं Excel कर लूँगा, कोई ऐसी बात नहीं है
14:11
और बड़ा मुझे यहाँ पर जो है, एज देखने को मिल जाएगा, अभी आप लोग अगर इसको देखो
14:16
email address और phone number यह कट रहा है, phone number कट रहा है, यह पूरा नहीं दिखा रहा है
14:20
मुझे इसको थोड़ा बड़ा करना पड़ेगा और इसको बड़ा करने के लिए मुझे सबसे पहले त�
14:24
padding देनी पड़ेगी इसके अंदर और padding के साथ साथ मुझे top bottom से भी padding देनी पड़ेगी औ�
14:30
margin भी देनी पड़ेगी अगर मैं इन elements के बीच में space देना चाहता हूँ
14:34
तो मैं एक तो y-axis में margin दूँगा, और padding दूँगा, और उसी के साथ साथ इसकी height भी बढ़ाऊँगा
14:40
तो मैं एक काम करता हूँ यहाँ पर, सारे input tags में, एक class attribute तो add करता हूँ
14:45
कम से कम, ठीक है, तो मैं यहाँ पर कुछ इस तरह से class is equal to ऐसे add करता हू�
14:50
ठीक है अब मैं px 4 करता हूँ तो x axis मे�
14:53
padding जो है 4 आ जाएगी ठीक है आप देख सकते हैं यहाँ पर x axis में padding आ गई यह देख�
14:57
दूरी आ गई यहाँ पर ठीक है और ये करने के बाद मैं क्या करूँग�
15:01
इसको एक height दूँगा ठीक है तो मैं यहाँ पर कुछ इस तरह से h12 दे दूँगा औ�
15:07
जैसे मैं इसको h12 दूँगा हाँ काफी हथ तक ये बड़ा हो गया इतना ही बड़ा है लगब�
15:11
इतना ही बड़ा है, मुझे कोई जादा यहाँ पर problem लग नहीं रही है
15:15
हाँ मुझे एक problem यहाँ पर दिख रही है कि मुझे top bottom में अभी यहाँ पर margin
15:19
देनी है, तो मैं MY भी दूँगा, तो मैं MY2 दे दूँगा, ठीक है
15:22
MY2 better better width space email address phone number phone number cut 25 width equal to one fourth of the page 25
16:19
तो मैं यहाँ पर border 2 दूँगा, और border 2 लिखने के बाद मैं क्या करूँगा
16:25
border का color दूँगा, तो मैं border grey इन में से कौन सा shade दूँ
16:30
यह थोड़ा जाड़ा dark हो जाएगा, मैं 200 देकर देखता हूँ, और मुझे हलका लगेगा
16:33
मैं dark कर लूँगा, मुझे हलका लग रहा है मुझे थोड़ा हलका लग रहा ह�
16:37
और कहीं ना कहीं मुझे border 2 थोड़ा जादा लग रहा ह�
16:40
तो मैं border 1 कर लूँगा इसको ठीक है तो मैं वापस से यहाँ पर आउँगा और मैं इसको border 1 कर लूँग�
16:46
ठीक है तो जो border gray 200 मैंने दिया उसको मैं शायद change करू�
16:51
और ये border लगा नहीं ऐसा क्यों border 1 शायद मुझे border class भी यहाँ पर add करनी पड़ेग�
16:58
उसके बाद ही border लगेगा मैंने save किया और हाँ अभी border लग गय�
17:02
आप लोग देख सकते हो border यहाँ पर लग गया ठीक है और मैं rounded class भी लगाऊँग�
17:19
लेते हैं ठीक है थोड़ा सा राउंड हो जाएगा अब ऐसे मुझे लगता है कहीं ना कहीं मैंने थोड़ा कब लगा दिय�
17:28
ए डाउनड एडिटल जी करता हूं डाउनड एडिटल जी नहीं राउंड एडिटल जी ठीक है अब देखता हूं कैसा लग रहा ह�
17:34
हाँ या ठीक है अब ठीक लग रहा है ठीक है अभी बढ़िया लग रहा है यह आप देख सकते हैं यहाँ प�
17:38
यह जो इसके कॉनर से यह राउंड रिट है अब इस बटन को स्टाइल करते हैं ठीक है लॉग इन वाले बटन क�
17:44
इसमें ग्या करूँगा मैं यह बीटीएन तो मैंने वस ऐसी डाल दिया था class as equal to यह वाला attribute लाने के लि�
17:49
अब मैं आपर करूँगा क्या सबसे पहले तो इसका bg blue करूँगा ठीक ह�
17:52
bg blue कौन सा वाला करूँगा 500 करता हूँ, 500 नहीं, शायद मुझे थोड़ा dark करना पड़ जाए
17:57
600 करता हूँ, ठीक है, अगर मुझे यह भी हलका लगा, तो मैं और dark कर लूँगा, ठीक है
18:01
लेकिन मुझे अभी यह ठीक लग रहा है, ठीक है, अब इसमें padding दूँगा, obviously मैं
18:05
बट उससे भी पहले text white ठीक है अब ये देखो ये कुछ ऐसा दिख रहा है अभ�
18:10
और बढ़िया लग रहा है यार बटन बहुत बढ़िया लग रहा है ठीक है और width तो इसकी full है ही यहाँ पर ठीक ह�
18:16
अब मैं क्या करूँगा इसमें margin दूँगा टॉप बॉटम में और वो टॉप बॉटम में मार्जिन कितनी होगी वो MY2 करके देखता हूँ पहले अगर मुझे कम लग�
18:23
तो मैं और बढ़ा लोगा MY2 और�श्चित में मैं नहीं दूँगा कोई मार्जिन ठीक है MY2 सॉरी मुझे पैड़िंग देनी थ�
18:31
मार्जिन नहीं देनी थी मार्जिन भी दे देता हूँ क्योंकि यहाँ पर भी M by 2 मैंने यहाँ पर दे रखी ह�
18:36
तो मैं मार्जिन भी दे देता हूँ और यह मार्जिन मैं यहाँ भी दे दूँगा टीक है, in fact ये सारी glasses मैं copy करक�
18:41
यहाँ पर लाने वाला हूँ, अभी के लिए मुझे क्या करना है अभी के लिए मुझे padding देना है इसक�
18:46
और वो padding कितनी होगी, मैं py 3 से start करता हू�
18:49
और अगर मुझे कम लगेगी मैं इसको बढ़ा लूँगा ठीक है, PY3 से मैंने start किया, और मुझे बिल्कुल ठीक लग रहा है
18:54
PY3 मुझे बिल्कुल ठीक लग रहा है, अब मैं क्या करूँगा, इसको round करूँगा
18:58
इसके जो corners हैं, और मैं यहाँ पर क्या करूँगा, rounded laps कर दूँगा, ठीक है, rounded laps
19:04
और इसको rounded empty कर दिया मैंने आप देख सकते हैं यहाँ पर यह ऐसे हो गय�
19:08
अब एक चीज और दिखाता हूँ आप लोग को यह login जो है यह bold है ठीक है यह थोड़ा bold ह�
19:13
तो आप देखो यहाँ पर हमारा bold है तो मैं font bold class लगा दूँगा यहाँ प�
19:17
ठीक है, font bold लगा दिया, और आप देख सकते हैं, यहाँ पर यह bold हो गया
19:21
काफी है तक, इसका font size थोड़ा बड़ा है, तो मैं इसके font size को भी बड़ा कर सकता हूँ
19:26
तो मैं यहाँ पर text excel, to excel, text to excel लगा सकता हूँ
19:32
तो यह मेरा font size भी बड़ा हो जाएगा, ठीक है देखिए मेरा कोई ज्यादा ही बड़ा हो गया मुझे एक्सेल करना चाहिए इसको ठीक है टेक्स्ट एक्सेल यह देखो�
19:40
काफी तक मैंने मैच कर दिया यह शेट थोड़ा सा हल्का है ठीक है बट मैं अभी के लिए क्या करूंगा यह जो अपन�
19:46
एक्सट एक्सल क्लास ही हटा लूंगा, ठीक है, क्योंकि मुझे गई नगी लग रहा है क�
19:50
मेरा जो वर्जन है फेस्बुक को, उसमें यह अच्छा नहीं लग रहा है, यह अच्छा लग रहा है, ठीक है, अब forgotten password क�
19:54
तो मुझे सबसे पहले सेंटर पर लाना है इसके बाद इसके कलर को मुझे ब्लू करना है फिर इसके बाद मुझे इसमे�
19:59
अंडरलाइन भी लेकर आ रहा है तो बहुत सारा काम है आप करते हैं सारा का सारा काम सबसे पहले मुझे क्या करन�
20:04
text blue करना है, ठीक है, और text blue कौन सा करना है, कभी-कभ�
20:08
मुझे control space दबाना पड़ता है, ये suggestions के लिए, और इससे इसलिए होता है क्योंकि य�
20:12
VS code confused हो जाता है, पता नहीं क्यों, कभी-कभी, ठीक है
20:16
save किया, हाँ, नहीं यार, मुझे लगा ये मेरा version है, यह वाला है मेरा version ठीक है text center करूँगा text center ठीक है font size थोड़ा सा छोटा करूँगा text sm text sm करने से हाँ ठीक हो गया और इसी के साथ सब margin भी लूँगा MY3 MY2
20:39
MY2 चल रहा है हमारा sub में तो MY2 ही रखते हैं इसमें भी हाँ ठीक ह�
20:43
इसमें भी MY2 रखते हैं ठीक है और ये जो HR है इसमें भी MY2 रखेंगे ठीक ह�
20:47
तो इसमें भी मैं class रखूँगा MY2 ठीक है और हाँ बढ़िय�
20:58
अब मैं चाहता हूँ इस पर होवर करूँ मैं सबसे पहले तो कर्सर पॉइंटर ठीक है और यह काम बटन भी करना यार कर्सर पॉइंटर कर्सर पॉइंटर सारे बटन्स पर बाय दे जो क्रिएट अकाउंट वाला बटन ना इसमें मैं क्या कर रहा हूँ यह लॉग इन वाले �
21:28
pointer करना है भी ठीक है तो जैसे ही कोई अपना cursor pointer cursor ले कर जाए इस पर तो यह ऐसे होना चाहिए और hover करने पर underline ठीक है hover underline यह देखो बिल्कुल इसकी तरह ठीक है तो यह बढ़िया काफी अध तक हमने बना दिया ठीक है अभी जो create account वाला बटन है ना यह पूरा full width में नहीं है �
21:58
तो create account वाले बटन को हमें full width नहीं देनी ह�
22:01
तो यार अब हमको इस बटन को ठीक करना है और इसको मैं चुटकियों में ठीक कर दूँग�
22:05
कैसे ठीक करूँगा आप लोग भी देखो सबसे पहले तो मैं क्या करूँगा इसको इसकी जो width है उसको मैं set कर दूँग�
22:12
तो मैं यहाँ पर लिखूंगा डब्लू फिट ठीक है और डब्लू फिट करने से क्या होगा यह फिट हो जाएगा तो यहाँ पर विट्�
22:19
फिट कंटेंट मैंने यहाँ पर कर दिया है इससे क्या होगा कि यह फिट हो जाएगा अपने कंटेंट साइज पर यानी कि जितन�
22:24
और देख लेगा एक चीज और यहां पर क्रिएट अकाउंट नहीं क्रिएट न्यू अकाउंट इसको भी मैं ठीक करूंगा भी क्रिए�
22:30
न्यू अकाउंट करूंगा अब इसमें पैडिंग भी दूंगा एक्स एक्सेस में तो मैं इसको पीएक्स फोर दे दूंगा ठीक है और उस�
22:38
साथ साथ मैं इसको MX Auto भी दूँगा, ठीक है, MX Auto करने से यह सेंटर पर आ जाएगा, और अभी देखो यहाँ पर, यह नहीं यार, यह हाँ, अभी देखो यहाँ पर, यह यहाँ पर आ गया है बिल्कुल ठीक से, जैसे मैं चाहता था, वैसे के वैसे आ गया है, ठीक है, तो I hope क�
23:08
ले रहा मेरा बटन मैं जाता हूं कि हॉवर करने पर बीजी ब्लू साथ सो जाए ठीक है बीजी ब्लू साथ सो और यहा�
23:16
पर देखो हॉवर करने पर यह कुछ थोड़ा अलगी हरकत ले रहा है देख जैसे यहां पर ले रहा है यहां पर भी इतन�
23:21
ले नहीं रहा है, पस हलका सा color dark हो रहा है, यहाँ पर भी वही है, और यहाँ पर भी मैं क्या करूँगा
23:27
hover करने पर, bg green और 700, ठीक है, bg green 700, और यहाँ पर देखो, यहाँ पर भी वही है, ठीक है
23:37
I hope कि आप लोगों को मज़ा आया यहाँ पर ये वाली जो site है वो हमारी responsive नहीं ह�
23:41
उसका reason मैंने आप लोगों को बता दिया और ये site को responsive भी बनाया जा सकता ह�
23:45
responsive start responsive responsive design mobile first approach use start responsive
23:57
काफी आसानी होगी और मेरे साब से यही अच्छा approach है अगर आप mobile first जाते हो त�
24:02
अगर आप लोग सोचोगे कि यहाँ पहले मैं site बनाऊँगा और उसके बाद मैं उसक�
24:07
mobile में compatible बना लूँगा ऐसा मत सोचना ठीक है mobile first से start करन�
24:12
तब आप लोगों ज्यादा मजा आएगा ठीक है अभी यहाँ पर जो फेसबुक है यह साइस थोड़ा सा बड़ा है मेरे वाले फेसबुक का साइस जो है वो थोड़ा सा छोटा है तो यहाँ पर थोड़ा सा मैं इसको ठीक करना चाहूँगा तो यहाँ पर ठीक करने के लिए म�
24:42
यहां पर जाती है ठीक है हां काफी हद तक मैंने साइज मैच कर लिया लेकिन यहां पर थोड़ी सी मुझे एक्�
24:48
एक्सस में इस पैराग्राफ को मार्जिन देनी पड़ेगी और जहां मैंने छह दी थी वहां मैं आट दूंगा Gewa और मेर�
24:55
आपसे चीज फिक्स कर देगी इसको फिर यह जो साइज यह भी मैं थोड़े से बढ़ाना चाहता हूं तो मैं काम करूंग�
25:00
सीधे जो राइट है इसमें मैं फॉर्म साइज जो है और मैं आप फॉर्म एक्सल टेक्स्ट एक्सल है शायद टेक्स्ट एक्स�
25:08
ठीक है, text excel देके देखता हूँ, हाँ, काफियत तक बड़ा हो गया, font, ठीक है
25:12
लेकिन कुछ जादा ही बड़ा नहीं हो गया, नहीं, कुछ जादा बड़ा भी नहीं हुआ
25:16
क्योंकि यहाँ पर भी इतना ही बड़ा है, अगर आप लोग देखो तो, और create new account का भी बहुत बड़ा हो गया ह�
25:21
मुझे थोड़ा सा बड़ा लग रहा है बट अगर आप लोग यहाँ पर देखो तो यहाँ पर भी बड़ा ही ह�
25:25
ठीक है तो create new account में मैंने bold कर दिया है create new account में I guess bold नहीं ह�
25:30
अच्छा अगर मैं excel से नीचे जाओ और मैं यहाँ पर लिखूं text MD
25:36
या LG तो कैसा रहेगा text LG मुझे कहीं ना कहीं थोड़ा सा ठीक लग रहा ह�
25:43
और यह मुझे काफी बहतर लग रहा है तो यहाँ पर एक चीज हमन�
25:47
और करनी है आप देख रहे हो यहाँ पर जैसे click कर रहे हैं, हम लोग यहाँ पर blue color आ जा रहा है
25:51
तो यह जो outline है, वो मुझे यहाँ पर add करनी है, ठीक है, outline
25:55
मैंने add नहीं करी है, तो outline को किस तरह से add करूँगा, आप लोग देख ना
25:59
मैं simply क्या करूँगा, अपने code में आउँगा, और जहाँ जहाँ button है
26:19
ठीक है, 600 है यहाँ फिर, ठीक है, देखते हैं कैसा लगता है 600, यह देखो, आ गया ना बिल्कुल वैसे ही जैसे यहाँ पर है, देख रहे हो आप लोग, तो outline भी हमने यहाँ पर add कर दी है, और कहीं ना कहीं मुझे ऐसा क्यों लग रहा है कि हम कुछ miss कर रहे हैं, हाँ हम यह miss �
26:49
एमवाइट यह और तो नहीं रह गया इनमें से कहीं तो नहीं रह गया एमवाइट यह बटन में रह गया इस बटन में रह गय�
26:55
ठीक है तो इनको भी कर देते हैं ठीक है एमवाइट तो को एमवाइट थ्री ठीक है और हां देखो अब काफी अधिक बढ़िय�
27:02
मुझे काफी हद तक ठीक है यहाँ पर चिपके हुए है तो मैं वापस से मिनटी कर दूंगा मुझे बताया बहुत कंफ्यू�
27:08
कर रहा हूं और मैं एक्चुली इसके जैसा बनाने की कोशिश कर रहा हूं वैसे मुझे एमवाइट थी ज्यादा बेहतर लग रह�
27:13
लेकिन Facebook वालों को MY2 ज़्यादा अच्छा लग रहा है तो कोई बात नहीं ठीक ह�
27:17
अब एक काम और करूँगा ठीक है facebook.com slash favicon.ico ये क्या कर दिया भाई कुछ नही�
27:26
बस मैं favicon लिकर आना चाहता हूँ इनका right click करके मैं इसको save करूँग�
27:29
और अपने project 1 के अंदर डाल दूँगा, बस, कुछ इस तरह से, favicon.png, ठीक है, अभी यहाँ पर मैं क्या करूँगा, png favicon code, ठीक है, तो png में favicon लगाने का code यह रहा है, ठीक है, तो आप लोग देख सकते हुए, यहाँ पर मैं इसको copy करूँगा, और यहाँ पर लगा लू�
27:59
इसको खोलता हूँ मैं यहाँ पर मैं stack overflow के link पर जाता हू�
28:04
shortcut icon यह रहा यह वाला code should work ठीक है तो यहाँ पर href is equal to
28:10
favicon.png ठीक है मुझे कुछ इस तरह से करना है तो मैं यहाँ पर क्या करूँग�
28:15
rel is equal to icon और favicon.png favicon.png ठीक है हैं अब काम कर रहा है देख रहा आप लोग जैसे इनका फैव आइकन आ रहा है वैसे मेरा भी आ रहा है ठीक है और पत�
28:28
नहीं चल रहा है omsi वेबसाइट किसकी है देखो मैंने सब एकदम क्लोन कर दिया बस हां थोड़ा बहुत लेट मे�
28:33
पर यह चीज मुझे आप रहनी है ठीक है सबसे बड़े मैं क्या करूंगा कि इस चीज को ऐड करने के लिए मै�
28:40
पोजिशनिंग का इस्तेमाल करूंगा और कैसे करूंगा पोजिशनिंग का इस्तेमाल यह आप लोग देखना मैं सबसे बड़�
28:45
box की position को relative करूँगा, ठीक है, तो इसको मैं relative करूँगा
28:49
यहाँ पर मैं relative करूँगा, relative, ठीक है, इसके बाद मैं क्या करूँगा, कि इ�
28:54
box के अंदर ही डालूँगा, अपना ये span, ठीक है, और यहा�
28:58
लिखूँगा span.sp, ठीक है, ताकि मैं ये class is equal to बिला सकते हैं और इसकी पोजीशन में करूंगा अब सलूट ठीक है और मैं क्या करूंगा माइनस बॉट�
29:09
ए टेन करके देखता हूं और यहां पर मैं यह चीज कॉपी कर दूंगा यह चीज कॉपी कर दूंगा ठीक है यह चीज कॉप�
29:17
कर दूंगा और यहां पर देख रहा आप लोग यहां गया शायद मुझे थोड़ा सा और इसके फोन को छोटा करना चाहिए त�
29:24
मैं क्या करूंगा फॉर्म टेक्स्ट एसम करूंगा ठीक है टेक्स्ट एसम करके यह कुछ ऐसा दिख रहा है क्रिएट आप पे�
29:30
वह बोल्ड है तो यहां पर स्पैन डॉट आएगा टेक्स्ट नहीं सॉरी फॉर्म बोल्ड अ है ठीक है यह क्या कर दिया मैंन�
29:41
अब क्यों नहीं कर रही है आप कर रही है कंट्रोल एक्स कंट्रोल वी और अब देखते हैं क्रिएट पेज फॉर सेलेब्रिट�
29:50
ब्रांड और बिजनेस बिल्कुल सही से आ गए इतनों इस पेसिंग ज्यादा यहां पर मेरे में स्पेसिंग मेरे भी ठीक ह�
29:55
स्पेसिंग मैं चाहूं तो इसको बढ़ा सकता हूं कितना कर सकता हूं मैं माइनस यह माइनस नोट करना आप लो�
30:01
माइनस आप लोग ना देखो माइनस से क्या हो रहा है मैं बेसिकली देखो यह क्या ऐड कर रहा है यह नेगेटिव बॉट�
30:08
ऐड कर रहा है माइनस थ्री रेम ऐड कर रहा है यहां पर देख रहे हो तब यह नीचे की तरफ जा रहा है अब क्रिएट पेज प�
30:12
पर ये एक link है तो मैं यहाँ पर क्या करूँगा सबसे पहले तो hover करो अगर इस पर तो क्या होग�
30:18
create a page पर hover करो तो क्या होना चाहिए underline ठीक है और cursor pointer ठीक है तो इस प�
30:28
अगर आप लोग अपना cursor ले कर जाओगे तो pointer बन जाएगा, यहाँ ले कर जाओगे तो pointer नहीं बनेगा
30:32
जैसे कि, उप्स, मैं इसको दिखा रहा था, मैं यहाँ दिखाता हूँ, यहाँ पर ले कर जाओगे तो यह बन गया
30:36
यहाँ पर लेकर जाओगे तो नहीं बना ठीक है बिल्कुल ऐसे ही एकदम same to same बना दिय�
30:40
अब एक चीज और note करने लाइक है कि मैंने font यूज़ नहीं करी है font वही है जो tailwind by default देता ह�
30:46
अगर यह कोई और font होती तो शार मुझे font भी लानी पड़ती ठीक है तो ये भी note करने वाली एक बात है ठीक ह�
30:51
तो ये चीज हमने यहाँ पर देख ले अब एक चीज और जो की जा सकती ह�
30:55
वो ये है कि जहाँ मैंने width 1 by 3 करी ह�
30:59
वहाँ पर मैं width को थोड़ा और change करके जो है कुछ ऐसा बना सकता हू�
31:03
कि ये बिल्कुल life तक यहाँ पर share पर कटके life पर आ जाए ठीक ह�
31:07
लेकिन वो मैं नहीं कर रहा हूँ भी ठीक है अभी के लिए मेरे जापसे भी बिल्कुल ठीक है तो I hope कि आप लोग को यह पसंद आय�
31:13
Facebook का clone आने वाले वीडियोस में और अच्छे अच्छे projects बनाएंग�
31:16
आप लोग tailwind की playlist को जरूर access कर लेना अगर आप लोगों नहीं करी ह�
31:21
अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
31:24
सारा का सारा source code get up पर उपलब्द करा दूँगा link भी दे दूँगा आप लोगों को description मे�
31:29
and I will see you next time कर द�
#Photo & Video Sharing
#Programming
#Skins
# Themes & Wallpapers
#Social Networks