1
00:00:03,250 --> 00:00:04,330
Hey, welcome back.

2
00:00:04,360 --> 00:00:11,890
In this video, we're going to add a description, an image, and a link to each of these apps.

3
00:00:11,920 --> 00:00:14,200
Currently, we only have the titles.

4
00:00:14,200 --> 00:00:21,460
So let's go back to our code and let's keep on adding lines inside our for loop.

5
00:00:21,460 --> 00:00:24,120
So we extracted the title.

6
00:00:24,130 --> 00:00:27,250
Now let's add the description.

7
00:00:27,380 --> 00:00:31,660
The description is in the description column.

8
00:00:32,320 --> 00:00:35,710
So all we have to do is say SD dot, right?

9
00:00:35,710 --> 00:00:38,490
So this will be normal text phones.

10
00:00:38,500 --> 00:00:41,230
Therefore we use the right method for that.

11
00:00:41,230 --> 00:00:46,990
And in this case it's going to be the description key.

12
00:00:47,020 --> 00:00:55,480
Now, if you do a type or in any of these column names and then you go to the page and reload, you're

13
00:00:55,480 --> 00:00:57,310
going to get a key error.

14
00:00:57,310 --> 00:01:05,290
So whenever you get that key error, it tells you the key that is not existing in your dataframe.

15
00:01:05,290 --> 00:01:07,180
So that's a very common error.

16
00:01:07,180 --> 00:01:14,890
So please keep that in mind and know that you have made probably most likely a typo in that error.

17
00:01:14,890 --> 00:01:16,750
So double check it with your data.

18
00:01:16,780 --> 00:01:18,490
Is it description here?

19
00:01:18,520 --> 00:01:19,780
Description there?

20
00:01:19,780 --> 00:01:20,410
Yes.

21
00:01:20,410 --> 00:01:23,260
Now it should be fine.

22
00:01:24,420 --> 00:01:24,720
Yeah.

23
00:01:24,720 --> 00:01:31,260
So there's we have there we have the descriptions for the first column and we do the same.

24
00:01:31,260 --> 00:01:35,370
I'm just going to copy that, paste it here, pretty load.

25
00:01:35,670 --> 00:01:38,100
We have the description for the second column.

26
00:01:38,430 --> 00:01:42,330
Let's add the images as to that image.

27
00:01:42,330 --> 00:01:46,200
That's the method to add an image to the web page.

28
00:01:46,200 --> 00:01:49,200
In this case, that would be a row.

29
00:01:49,350 --> 00:01:50,850
Well, image.

30
00:01:50,850 --> 00:01:56,100
So image contains the file name, so that is only the file name.

31
00:01:56,100 --> 00:02:04,470
Therefore, if you just do row image, you're not going to get the desired results actually.

32
00:02:05,070 --> 00:02:12,120
So you see we get no images because our script main that P one is located in the root directory.

33
00:02:12,120 --> 00:02:15,390
Both images are located inside the images.

34
00:02:15,420 --> 00:02:21,480
Therefore you need to add images with a slash plus that.

35
00:02:21,480 --> 00:02:30,390
So basically what I'm doing here is something like images slash plus I'm concatenating this string with

36
00:02:30,390 --> 00:02:35,610
that string, that string is going to be one that PNG for the first app.

37
00:02:36,060 --> 00:02:42,330
And so what we get is this path that's the relative path to the first image and then we're going to

38
00:02:42,330 --> 00:02:44,370
have to that PNG.

39
00:02:44,400 --> 00:02:48,900
So the loop is going to generate these strings automatically.

40
00:02:48,900 --> 00:02:55,500
So those will be the relative paths to each image and those paths are going to create an image together

41
00:02:55,500 --> 00:02:56,400
with this method.

42
00:02:56,400 --> 00:03:00,930
So they are going to create an image here on the web page.

43
00:03:02,900 --> 00:03:03,710
Reload.

44
00:03:04,970 --> 00:03:08,720
So that we have images for the second column.

45
00:03:09,720 --> 00:03:13,020
And let's add images for the first column as well.

46
00:03:14,010 --> 00:03:14,790
So there we go.

47
00:03:14,790 --> 00:03:15,560
First column.

48
00:03:15,570 --> 00:03:16,530
Second column.

49
00:03:16,770 --> 00:03:19,240
So those are the first ten rows.

50
00:03:19,260 --> 00:03:21,240
These are the second ten rows.

51
00:03:22,170 --> 00:03:26,490
Let's remove the break lines because there are too many of them.

52
00:03:26,730 --> 00:03:29,300
And lastly, let's add a link.

53
00:03:29,310 --> 00:03:34,390
The links are in the EU URL column.

54
00:03:34,410 --> 00:03:43,350
Therefore, we do s t and for links we have the right methods again, and this will have this special

55
00:03:43,350 --> 00:03:44,280
syntax.

56
00:03:44,280 --> 00:03:51,620
Instead of writing some simple text, we use this syntax square brackets and then round parentheses.

57
00:03:51,630 --> 00:04:02,400
In the square brackets you write the text which will be a link, and in the parentheses you write the

58
00:04:02,400 --> 00:04:07,890
actual link http s colon slash slash.

59
00:04:07,890 --> 00:04:11,100
For example python how dot com.

60
00:04:11,130 --> 00:04:16,709
Later on you will add the GitHub links to each of the apps.

61
00:04:16,709 --> 00:04:24,540
So for now I'm just adding some static text here and I can also get this links from that.

62
00:04:25,230 --> 00:04:27,570
That's what I'm going to do in just a minute.

63
00:04:27,570 --> 00:04:30,000
But let me show you the syntax first.

64
00:04:30,000 --> 00:04:35,820
So if I go to the web page and I refresh, that's what we get.

65
00:04:35,820 --> 00:04:36,720
So that's the text.

66
00:04:36,720 --> 00:04:41,160
If I click the text, it's going to take me to that python dot com URL.

67
00:04:41,910 --> 00:04:44,910
So source code for that source code for that.

68
00:04:44,910 --> 00:04:48,180
So each of them has the source code, right?

69
00:04:48,420 --> 00:04:50,730
So again, this is a string.

70
00:04:50,730 --> 00:04:53,400
You see it's enclosed in double code.

71
00:04:53,430 --> 00:04:57,360
Now what happens if we want to have this dynamic?

72
00:04:57,360 --> 00:05:00,290
So we want to grab that from the data.

73
00:05:00,840 --> 00:05:06,480
See, as we file, we want to get this link for each row to do that.

74
00:05:06,480 --> 00:05:09,660
Since this is a string, we can use an F string.

75
00:05:09,660 --> 00:05:17,610
So we turn this into an F string and then this value here, which we want to convert into a dynamic

76
00:05:17,610 --> 00:05:18,480
string.

77
00:05:18,480 --> 00:05:22,140
Then we delete that and we write curly brackets.

78
00:05:22,140 --> 00:05:26,730
So note that curly brackets are inside those around parentheses.

79
00:05:26,730 --> 00:05:34,380
So in currently brackets, now we have this variable which is going to be ru, u, r, l, but now since

80
00:05:34,380 --> 00:05:41,970
we have double quotes and the outer edge of the string here, we want to use single quotes.

81
00:05:42,780 --> 00:05:47,100
So that's the same syntax as this one in here, you see.

82
00:05:47,100 --> 00:05:50,910
So this would be equal to each URL of the abs.

83
00:05:50,910 --> 00:05:58,650
And so the curly brackets are part of the f string syntax and these square brackets are part of the

84
00:05:58,650 --> 00:06:03,780
string lit links syntax and so are the round parentheses.

85
00:06:03,780 --> 00:06:06,420
They are also part of the string syntax.

86
00:06:06,420 --> 00:06:08,130
So there's quite a mixture there.

87
00:06:08,130 --> 00:06:12,240
So make sure that you're following the syntax exactly as you see in here.

88
00:06:12,240 --> 00:06:16,680
With that, I'll go to the web page refresh.

89
00:06:18,350 --> 00:06:21,560
And now the source code links are still there.

90
00:06:21,980 --> 00:06:29,810
So each of them now connects to the link which is listed in here for each app.

91
00:06:29,870 --> 00:06:35,240
It happens to be the same Python hub, but whenever you change that in this data, the web page will

92
00:06:35,240 --> 00:06:36,950
change accordingly.

93
00:06:39,030 --> 00:06:39,200
Yeah.

94
00:06:39,240 --> 00:06:40,630
So let's do that.

95
00:06:40,650 --> 00:06:42,630
Copy and paste it in here.

96
00:06:42,900 --> 00:06:45,660
That's more or less the page.

97
00:06:45,690 --> 00:06:47,400
Now, what?

98
00:06:47,400 --> 00:06:49,170
If you want to have some space?

99
00:06:49,170 --> 00:06:51,420
More space between the columns?

100
00:06:51,570 --> 00:06:53,100
How can we do that?

101
00:06:54,640 --> 00:06:56,280
Yeah, let me show that to you.

102
00:06:56,310 --> 00:06:57,420
How we can do that.

103
00:06:57,780 --> 00:07:03,420
So the trick here is to create a third column here in this area.

104
00:07:03,420 --> 00:07:06,280
So we have the first column with the first ten apps.

105
00:07:06,300 --> 00:07:10,140
We have an empty column with nothing, with no content.

106
00:07:10,140 --> 00:07:11,620
And then we have the third column.

107
00:07:11,640 --> 00:07:17,190
So to do that, you want to add a third variable here between these two columns.

108
00:07:18,180 --> 00:07:19,980
You can name this empty call.

109
00:07:19,980 --> 00:07:21,640
For example, make a comma.

110
00:07:21,660 --> 00:07:24,660
So one variable, two variables, three variables.

111
00:07:24,660 --> 00:07:29,130
And then here, instead of passing an integer, we pass a list.

112
00:07:29,130 --> 00:07:35,230
And in the list we pass three numbers 1.50.5 and 1.5.

113
00:07:35,250 --> 00:07:43,920
So these are the ratio dimensions of these columns, which means that the first column will be three

114
00:07:43,920 --> 00:07:47,100
times wider than the middle column.

115
00:07:47,100 --> 00:07:51,300
And also this column will be the same width with the third column.

116
00:07:51,360 --> 00:07:52,980
Now, that's all you have to do.

117
00:07:53,070 --> 00:07:59,520
So since we are not adding anything to empty call, then you don't need to create another with context

118
00:07:59,520 --> 00:08:00,210
manager.

119
00:08:00,360 --> 00:08:07,650
So with that, you go here, refresh and you should see more space in between the columns.

120
00:08:09,090 --> 00:08:17,880
So if we resize the window, making it smaller, you also see that these this content is responsive,

121
00:08:18,030 --> 00:08:24,270
which is great for mobile devices, and that's the final code for this video.

122
00:08:24,840 --> 00:08:27,300
And lastly, let's commit the changes.

123
00:08:27,300 --> 00:08:32,429
So this is the 22 and what did we do?

124
00:08:33,360 --> 00:08:40,500
We added add description, image and links.

125
00:08:40,799 --> 00:08:45,060
So app description, image and links commit.

126
00:08:45,330 --> 00:08:48,000
And yeah, that was for this video.

127
00:08:48,030 --> 00:08:49,020
So thanks.

128
00:08:49,020 --> 00:08:49,570
See you later.