Up next in 10
Designing Mugs, Sticker & Hoodies page for Codeswear.com _ NextJs Tutorial for Beginners #38
1K views
Feb 13, 2024
In the video "Designing Mugs, Sticker & Hoodies Page for Codeswear.com _ NextJs Tutorial for Beginners #38," beginner developers are provided with a comprehensive tutorial on designing product pages for mugs, stickers, and hoodies within the Codeswear.com e-commerce website, using the Next.js framework. The tutorial covers various aspects of designing these specific product pages, including structuring the layout, incorporating product images and descriptions, implementing filtering or sorting options, and ensuring responsiveness across different devices. By following the step-by-step instructions in this tutorial, beginners can gain valuable insights and practical skills in creating engaging and user-friendly product pages for their e-commerce projects using Next.js.
View Video Transcript
0:00
हमने जो टीशर्ट पेज बनाया वो आधार था हमारे प्रड़ट पेज क��
0:04
यानि कि अगर हम लोग बनाएंगे मग्स का पेज हम लोग बनाएंगे अगर मानलोग हुडीज का पे��
0:09
हम लोग बनाएंगे स्टीकर्स का पेज वाच्चेस का पेज किसी भी दूसरी चीज का पेज अगर इस E-commerce स्टोर में हम लोग बनाएंग��
0:14
तो इसी बेस डिजाइन को इस्तिमाल करेंगे इससे दो फाइदे होंगे एक तो हमें बार-बार डिजाइन नहीं करना पढ़ेगा तो मेहनत बचेग��
0:20
और एक दूसरा फाइदा बता है क्या होगा दूसरा फाइदा यह होगा कि हमारे पेजेस के क्रोस कसिस्टेंसी बनी रहेग��
0:26
तो यह जो कसिस्टेंसी बनी रहेगी पेजेस के क्रोस यह एक बहुती अच्छी अपीलिंग फीलिंग देता ह��
0:32
कोई भी आपकी वेबसाइट को विजिट करता है तो जरह सोचो कि आपका जो होमपेज मालो रेड कलर में है और उसके बाद अचारक स��
0:38
जो आपका कलर थीम था वो चेंज हो गया एक परॉडर पेज़पे कोई उजर आता ह��
0:42
ऐसा हारडली आप लोग को देखने को मिलेगा किसी वेबसाइट में तो यही पर हम लोग बनाने वाले है��
0:46
मग्स का पेज़, हुडीज का पेज़ या अधि फ्यूचर में कोई भी प्राड़ड अगर इंटोडिॉस करेग��
0:51
तो इसका पेज़ हम लोग बनाएंगे चलते हैं कुम्प्यूटर स्क्रीन में और इस चीज को स्टार्ट करते है��
0:56
जिस तरह से टीशन का पेज़ हमने बनाया था उस तरह से हम लोग मग्स, हुडीज और स्टीकरस का पेज़ भी बनाने वाले है��
1:12
आपको बहुत सिंपल आपको कॉपी करेंगा पूरी चीज को कॉपी कर लिए है��
1:16
अब मैं क्या करूँगा यही चीज मैं लेकर जाओंगा अपने मग्स वाले पेज़ में और आप भी कॉपी करेंगा यह तो बुला कॉपी पेस्ट ह��
1:24
इसको मैं फर्मेंट डॉक्यूमेंट कर दूँगा तो हाँ भी कॉपी पेस्ट ही है ठीक ह��
1:28
जब है कॉपी पेस्ट यह कॉपी पेस्ट ही मागता है ठीक है न मैंने कहा से कॉपी किया सेक्षें कॉपी किय��
1:34
जो मगस है इसके अंदर पेस्ट कर देने का सेव करने का और यह एरर थ्रो कर रहा ह��
1:40
तो इस एरर थ्रो अब क्योंकि यह एरर थ्रो कर रहा है इसलिए हम क्या करेंगे कि लिंक को इंपोर्ट कर लेंग��
1:50
और यही काम स्टीकर्स के लिए भी करेंगे रहे है बबुआ स्टीकर्स के लिए स्टीकर्स का पेजी नहीं मना यार बनाया था नहीं हुडीज का बनाया था स्टीकर्स का नहीं बनाया था शायद स्टीकर्स का भी बना लेंगे ठीक है वही बात ह��
2:01
तो यहाँ पर मैंने किया इसको पेस्ट और इसको यहाँ पर सेक्शन को कॉपी कर लेंगे और यहाँ पर मैं इसको करूँगा पेस्ट ठीक है आप भोगे यार यह सेम चीज क्यों पोस्ट कर रहे हो हुडीज में स्टीकर्स में मतलब सेम सेम नहीं हो जाएगा सेम सेम हो ��
2:31
प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्रस्ट प्��
3:01
यह देखो यहापर यह जो टीशर्ट्स हैं बहुत सारी सॉरी हुडीज हैं इनमें से कोई भी एक हुडी की इमेज ले रो ठीक है ओपरे में जो निउ टाब करूंग��
3:07
और इसको कॉपी करूंगा और यहापर जो है इसको रिपलेस करदूंगा इस वाली इमेज को ठीक ह��
3:13
जो M.Media. यह चीज हमने लगाई हुई है जेपीजी वाली इसको राइट लिख करके चेंज वाला फ्रेम्स करके ऐसे कर देंगे ठीक ह��
3:22
देखते हैं क्या हुआ हाँ ठीक है अब देखो हुडीज में क्या हुआ कि यह आ गए टीशर्ट में टीशर्ट देख रहे हैं हुडीज में हुडीज आ ग��
3:29
स्टीकर्स में जो है कुछ नहीं आ या अभी तक मग्स में यह आ रहा है ठीक है तो मैं आपर मग लिखता हूँ ठीक है मग्��
3:35
अरे यह कैसे मज़ाक है अरे यह कैसे मज़ाक है पता नहीं क्यों हो रहा था इससा मलो work hard dream big never give up नहीं यह वाला मग नहीं यह वाला मग ठीक है तो इस तरह के मग्स यह वाला ले लेते है ठीक है इसकी image बस मैं लेना चाहता हूँ open image in new tab copy और यह जो मग्स वाला page है इसके ��
4:05
वाला settings के अंदर शायद एक चीज ओती है जिससे कि आप सारे pages पर word wrap कर सकते ह��
4:10
settings word wrap ठीक है word wrap को on करो भाई word wrap को on रखना है ठीक है ताकि यार pages अच्छे से दिखे��
4:19
कि क्या चीज कब क्या बन रही है ठीक है यह वाले में word wrap on है ठीक है इसको जरह बड़ा कर लेता हू��
4:25
मग्स वाले page में यह जो image है इसको मैं right click करके change all occurrences करूँगा और मैं इसक��
4:32
change कर दूँगा अपनी मग की image में ठीक है तो अबी मगस हम दिखाये आपको तो यह देखा रहे हैं थोड़े अजीब स��
4:38
खिच से नहीं गया इनका aspect ratio खराब नहीं हो गया मगस का हो तो गया यार ठीक है तो ऐसा क्यों हो रहा है तो समझ��
4:45
तो मैं ज़राद देखता हूँ यार कि ऐसा क्यों हो रहा है फोन में ही बिलकुल सही काम कर रहे हैं लेकिन यहाँ पर aspect ratio उनका थोड़ा मुझे खराब से लग रहा है ठीक है तो इस aspect ratio को ठीक करने के लिए हमें कुछ न कुछ करना पड़ेगा तो यह जो image है हमारी जो की ��
5:15
36 वी एच की हाइट या से हटा दिये और अगर हम ऐसा करें तो ये शायद ठीक हो जा रहा है ठीक है तो अगर मैं इसको ऐसे कर दो तो ये दुबारा से खिच गया टूमे काम करूँगा देखो मैं क्या करूँगा इसको न निकाल लूँगा बाहर इसको मैं निकाल सकता ह��
5:45
प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्ट प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्��
6:15
प्रश्ट प्रश्ट प्रश्ट प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्रश्च प्��
6:45
तो ये चीज है मैं राइट ले करके चेंज आल अक्रेंज करूँग��
6:49
डबल बैक स्पेस और यहाँ पर आप लोग देख सकते हो डिलोड करूँगा अगर तो ये कुछ इस तरह से आ रहा है ठीक ह��
6:56
तो वर्क हार्ड ड्रीम बेग नेवर गेव अब बड़िया बड़िया बड़िया बड़िया बड़िया बड़िया सब सही दिख रहा ह��
7:02
अब जल्दी से कसन पूरी कर देता हूँ और स्टीकर्स पेज भी बना देता हूँ तो ऐसा करने के लिए मैं सिम्प्ली क्या करूँगा मैं यहाँ पर जाओंगा और पेजेस के अंदर एक नएया पेज बनाओंग��
7:12
स्टीकर्स.js का और मैं सिम्प्ली करूँगा क्या कि जो मेरा मग्स वाला पेज है न इसको गॉबी पेस्ट करूँग��
7:18
और जहां मैंने मग्स एक्सपूर्ट किया हुआ रैट लिए करके चेंज आल अकरेंस्स करूँगा इसको स्टीकर्स कर दूँग��
7:26
और यहां पर और क्या करना पड़ेगा मुझे और यह इतनी सारी लाइने देखने को मिल रही है मुझ��
7:31
यहां पर मैं क्या करूँगा कि जो मेरा स्टीकर्स वाला पेज है न यह जो स्टीकर्स वाला पेज है इसमें इमेज मैं स्टीकर रख दूँग��
7:39
ठीक है तो मैं आपर स्टीकर रख देता हूँ ठीक है स्टीकर मैंने लिख दिया यहां पर और कोई स्टीकर मुझे अच्छा सा दिख जाये बस यह दिख गया मेरे को और मैं इसको ले लूगा ठीक ह��
7:50
नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नहीं नही��
8:20
आ रहा होगा ठीक है मुझे बता ना या नीचे कोमेंट सेड्श में की यार मजा आ रहा है स्टोर को बनाने में और फुटर वगाएरा मैंने आपको जैसे की बदाया था फुटर का टेक्स वगाएरा मैं चेंज कर दूँगा ये सारा और ताकि आपलोग को अच्छा दि��
8:50
अपने काट काम नहीं करती है काट स्टेट वनानी पड़ेगी क्लिक करने पर कुछ ना कुछ काट खुल कर आए ऐसा हम लोग उमीद करेंगे अपने कोडस वेस्टोर से तो आप लोग को मजा आ रहा होगा अब इस वीडियो में इतना है गईज आपको बहुत बहुत बह��
9:20
आपको बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बह��
#Apparel
#Fashion Designers & Collections
#Online Goodies
#Other
#Retail Trade
#Skins
# Themes & Wallpapers