Hey, welcome back.
In this video, we're going to add a description, an image, and a link to each of these apps.
Currently, we only have the titles.
So let's go back to our code and let's keep on adding lines inside our for loop.
So we extracted the title.
Now let's add the description.
The description is in the description column.
So all we have to do is say SD dot, right?
So this will be normal text phones.
Therefore we use the right method for that.
And in this case it's going to be the description key.
Now, if you do a type or in any of these column names and then you go to the page and reload, you're
going to get a key error.
So whenever you get that key error, it tells you the key that is not existing in your dataframe.
So that's a very common error.
So please keep that in mind and know that you have made probably most likely a typo in that error.
So double check it with your data.
Is it description here?
Description there?
Yes.
Now it should be fine.
Yeah.
So there's we have there we have the descriptions for the first column and we do the same.
I'm just going to copy that, paste it here, pretty load.
We have the description for the second column.
Let's add the images as to that image.
That's the method to add an image to the web page.
In this case, that would be a row.
Well, image.
So image contains the file name, so that is only the file name.
Therefore, if you just do row image, you're not going to get the desired results actually.
So you see we get no images because our script main that P one is located in the root directory.
Both images are located inside the images.
Therefore you need to add images with a slash plus that.
So basically what I'm doing here is something like images slash plus I'm concatenating this string with
that string, that string is going to be one that PNG for the first app.
And so what we get is this path that's the relative path to the first image and then we're going to
have to that PNG.
So the loop is going to generate these strings automatically.
So those will be the relative paths to each image and those paths are going to create an image together
with this method.
So they are going to create an image here on the web page.
Reload.
So that we have images for the second column.
And let's add images for the first column as well.
So there we go.
First column.
Second column.
So those are the first ten rows.
These are the second ten rows.
Let's remove the break lines because there are too many of them.
And lastly, let's add a link.
The links are in the EU URL column.
Therefore, we do s t and for links we have the right methods again, and this will have this special
syntax.
Instead of writing some simple text, we use this syntax square brackets and then round parentheses.
In the square brackets you write the text which will be a link, and in the parentheses you write the
actual link http s colon slash slash.
For example python how dot com.
Later on you will add the GitHub links to each of the apps.
So for now I'm just adding some static text here and I can also get this links from that.
That's what I'm going to do in just a minute.
But let me show you the syntax first.
So if I go to the web page and I refresh, that's what we get.
So that's the text.
If I click the text, it's going to take me to that python dot com URL.
So source code for that source code for that.
So each of them has the source code, right?
So again, this is a string.
You see it's enclosed in double code.
Now what happens if we want to have this dynamic?
So we want to grab that from the data.
See, as we file, we want to get this link for each row to do that.
Since this is a string, we can use an F string.
So we turn this into an F string and then this value here, which we want to convert into a dynamic
string.
Then we delete that and we write curly brackets.
So note that curly brackets are inside those around parentheses.
So in currently brackets, now we have this variable which is going to be ru, u, r, l, but now since
we have double quotes and the outer edge of the string here, we want to use single quotes.
So that's the same syntax as this one in here, you see.
So this would be equal to each URL of the abs.
And so the curly brackets are part of the f string syntax and these square brackets are part of the
string lit links syntax and so are the round parentheses.
They are also part of the string syntax.
So there's quite a mixture there.
So make sure that you're following the syntax exactly as you see in here.
With that, I'll go to the web page refresh.
And now the source code links are still there.
So each of them now connects to the link which is listed in here for each app.
It happens to be the same Python hub, but whenever you change that in this data, the web page will
change accordingly.
Yeah.
So let's do that.
Copy and paste it in here.
That's more or less the page.
Now, what?
If you want to have some space?
More space between the columns?
How can we do that?
Yeah, let me show that to you.
How we can do that.
So the trick here is to create a third column here in this area.
So we have the first column with the first ten apps.
We have an empty column with nothing, with no content.
And then we have the third column.
So to do that, you want to add a third variable here between these two columns.
You can name this empty call.
For example, make a comma.
So one variable, two variables, three variables.
And then here, instead of passing an integer, we pass a list.
And in the list we pass three numbers 1.50.5 and 1.5.
So these are the ratio dimensions of these columns, which means that the first column will be three
times wider than the middle column.
And also this column will be the same width with the third column.
Now, that's all you have to do.
So since we are not adding anything to empty call, then you don't need to create another with context
manager.
So with that, you go here, refresh and you should see more space in between the columns.
So if we resize the window, making it smaller, you also see that these this content is responsive,
which is great for mobile devices, and that's the final code for this video.
And lastly, let's commit the changes.
So this is the 22 and what did we do?
We added add description, image and links.
So app description, image and links commit.
And yeah, that was for this video.
So thanks.
See you later.