All language subtitles for 2. ChatGPT to Write eCommerce Landing Page Code in HTML and CSS

af Afrikaans
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,080 --> 00:00:03,530 Hello there and welcome into this update about ChatGPT. 2 00:00:03,560 --> 00:00:11,540 So in this updated lecture, we're going to show you the new ChatGPT for default version update. 3 00:00:11,570 --> 00:00:18,170 Now for GPT 3.5 users, which means the free ChatGPT users, they won't be able to use this. 4 00:00:18,470 --> 00:00:24,920 Now, of course, this has been out there for a while, but right now is the moment for us to go and 5 00:00:24,920 --> 00:00:28,760 do some exercises about what you can do with this new feature. 6 00:00:28,760 --> 00:00:34,910 If you're a ChatGPT plus user using the GPT four, and even if you're not, quite frankly, you can 7 00:00:34,910 --> 00:00:36,970 still benefit from the from the lecture. 8 00:00:36,980 --> 00:00:40,020 Just watch it so that you can know what's happening. 9 00:00:40,040 --> 00:00:41,390 So let's get right into it. 10 00:00:41,390 --> 00:00:43,700 So here we are on ChatGPT. 11 00:00:43,730 --> 00:00:52,670 Now the first thing I would like to create is a CSS and HTML code for a page that should look like this 12 00:00:52,670 --> 00:00:54,710 page that you're looking at right here. 13 00:00:54,740 --> 00:00:56,330 Now how will I accomplish that? 14 00:00:56,330 --> 00:01:01,390 Well first thing is first we need an image of how this page looks like. 15 00:01:01,400 --> 00:01:03,440 Now the image we already have it. 16 00:01:03,440 --> 00:01:05,630 So I'm going to go over here to ChatGPT. 17 00:01:05,960 --> 00:01:07,640 So I'm here at ChatGPT. 18 00:01:08,030 --> 00:01:15,200 And here when you're clicking GPT the default version, you have access to the upload feature. 19 00:01:15,200 --> 00:01:17,410 So I can upload and I have the image. 20 00:01:17,410 --> 00:01:19,670 So I'm going to go ahead and click on upload the image. 21 00:01:19,670 --> 00:01:20,060 All right. 22 00:01:20,060 --> 00:01:23,180 So right now the image has actually been uploaded. 23 00:01:23,180 --> 00:01:27,710 So the image that I want to use for the hero to be the hero of the page, just like this particular 24 00:01:27,860 --> 00:01:29,650 Nike shoe here is the hero. 25 00:01:29,660 --> 00:01:35,240 Now of course, this is a image that I downloaded from Unsplash and it's not intended for commercial 26 00:01:35,240 --> 00:01:35,750 purposes. 27 00:01:35,750 --> 00:01:39,620 Just so I can show you what ChatGPT can do with this. 28 00:01:39,620 --> 00:01:45,080 So don't ever go and use these images for commercial purposes to create a website and to start selling 29 00:01:45,080 --> 00:01:45,590 shoes. 30 00:01:45,590 --> 00:01:47,120 This is just for demonstration. 31 00:01:47,120 --> 00:01:49,880 Okay, so I'm back to ChatGPT. 32 00:01:49,910 --> 00:01:50,300 All right. 33 00:01:50,300 --> 00:01:54,560 So right now we're going to go ahead and copy the prompt that I'm going to use. 34 00:01:54,560 --> 00:01:58,160 So it's pretty much I'm going to remove this one that I've already added. 35 00:01:58,160 --> 00:01:59,270 And this is the prompt. 36 00:01:59,270 --> 00:02:03,380 So actually the image that I'm going to use as the hero is that of this Nike. 37 00:02:03,410 --> 00:02:07,820 Now just like I said, this is only for not commercial purposes. 38 00:02:07,820 --> 00:02:09,860 This is just for educational purposes. 39 00:02:09,860 --> 00:02:15,650 Which means please don't use this for any usage other than just having fun, because this is a Nike 40 00:02:15,680 --> 00:02:20,750 photo and I couldn't begin to tell you these guys are not playing around. 41 00:02:20,750 --> 00:02:26,390 So I'm going to basically copy the link address to the photo, which you can access by going to the 42 00:02:26,390 --> 00:02:29,720 photo itself and copy image address. 43 00:02:29,750 --> 00:02:35,240 Now once you have the image address, well you can go back to ChatGPT and right here on ChatGPT. 44 00:02:35,270 --> 00:02:42,020 On this particular prompt that I'm going to share with you in Word Doc file, it will help you build 45 00:02:42,020 --> 00:02:43,970 a landing page. 46 00:02:43,970 --> 00:02:46,310 So I'm going to insert the link in there. 47 00:02:46,310 --> 00:02:50,450 And it's basically 20% discount for first time shoppers. 48 00:02:50,450 --> 00:02:51,710 That's the call to action. 49 00:02:51,710 --> 00:02:57,380 And I've basically added this picture of the landing page, which I want ChatGPT to build something 50 00:02:57,380 --> 00:02:58,370 similar to. 51 00:02:58,370 --> 00:03:02,750 And right now only thing I need to do is I need to send the message. 52 00:03:02,750 --> 00:03:06,350 So I'm going to send the message and ChatGPT is going to do the rest. 53 00:03:11,140 --> 00:03:15,570 All right, so once ChatGPT has finished writing the code, which it did. 54 00:03:15,580 --> 00:03:23,050 So here we have the code, and we should normally have it in HTML format as well as CSS and as well 55 00:03:23,050 --> 00:03:24,340 as JavaScript. 56 00:03:24,340 --> 00:03:28,930 So here as far as I can see there's only HTML format. 57 00:03:28,930 --> 00:03:29,640 But yeah. 58 00:03:29,650 --> 00:03:29,920 Okay. 59 00:03:29,920 --> 00:03:34,540 So according to ChatGPT has created a file that combines all of them, which is good. 60 00:03:34,540 --> 00:03:36,880 So we're going to copy the entire code. 61 00:03:36,880 --> 00:03:39,340 So make sure you read ChatGPT as notes. 62 00:03:39,340 --> 00:03:42,970 And we're going to paste this as a HTML code. 63 00:03:42,970 --> 00:03:44,350 And let's see how that works. 64 00:03:44,350 --> 00:03:51,730 And as you can see, not surprisingly we have built a landing page that says 2,020% discount for first 65 00:03:51,730 --> 00:03:54,770 time shoppers shoe shops, shoe shops. 66 00:03:54,770 --> 00:03:58,630 So it even gave it a name of the shop. 67 00:03:58,630 --> 00:04:03,250 And these are the pages, the home page, the About Us, the shop, the Contact Us page, the blog. 68 00:04:03,250 --> 00:04:08,770 Now, normally the page would look bigger on a website, but this is just a code interpreter. 69 00:04:08,770 --> 00:04:09,400 Code pen. 70 00:04:09,400 --> 00:04:10,090 Okay. 71 00:04:10,090 --> 00:04:15,730 And so this is how you use ChatGPT to build a landing page. 72 00:04:15,730 --> 00:04:24,400 I hope it was interesting because it is, and this is going to revolutionize the world of creating websites, 73 00:04:24,400 --> 00:04:30,910 because if you can take an image of a website just like I did, and specifically a landing page, and 74 00:04:30,910 --> 00:04:36,790 you can tell ChatGPT, go take that landing page, please, and take this image, use it as the hero. 75 00:04:36,790 --> 00:04:39,760 And here's what I want the website, the page to be. 76 00:04:39,760 --> 00:04:42,100 I want it to have a shop Now button. 77 00:04:42,100 --> 00:04:44,740 I want it to have a home page about us page a shop. 78 00:04:44,740 --> 00:04:51,640 I didn't even have to say that because it just went to the image and it basically knew that the image 79 00:04:51,640 --> 00:04:54,730 has home about us shop contact blog. 80 00:04:54,730 --> 00:05:03,400 So it just made it similar except for the only thing it did is added a 20% discount for first time shoppers. 81 00:05:03,400 --> 00:05:10,150 So pretty much I hope you you enjoyed this and go ahead and practice and show us the results by sharing 82 00:05:10,150 --> 00:05:11,380 screenshots with us. 83 00:05:11,380 --> 00:05:14,770 Now of course, I repeat, this is not a mandatory lecture. 84 00:05:14,770 --> 00:05:18,790 This is a new lecture, an updated lecture that we updated after. 85 00:05:18,790 --> 00:05:24,430 Of course, this is three months from the course being there, and so we are going to continuously update 86 00:05:24,430 --> 00:05:26,830 the lectures as we go through. 87 00:05:26,920 --> 00:05:28,600 See you in the next updates. 88 00:05:28,600 --> 00:05:31,150 There is more updates apart from this. 89 00:05:31,150 --> 00:05:36,910 Now in the announcement that we've sent, we basically updated the course by adding a couple of lectures. 90 00:05:36,910 --> 00:05:40,660 So go ahead and make sure you check those as well and wish you the best. 8649

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.