Hi.
In this video, I'll show you my solution to the exercise which I handed you in the previous video.
So the exercise was to build this web page.
And so let me show you now my project in Power Charm.
This is what I have here.
I have this directory with images.
So that's each image of these members of the company.
And you got these files in the previous video, and then I have a dot dot file.
That's also a file you got in the lecture resources in the previous video.
And then I have these topics that C, Z, we don't need this right now.
We'll need it tomorrow so we can close that.
And that's my main that's P file where I wrote the code.
So this is what I'll explain.
You know what I did?
So I imported string lit and pandas.
I set the page configuration, so I set the layout to white so that we can have the content expands
wider than normal.
Otherwise the contents would be more narrow.
And then I added a header which corresponds to that.
I added this text using a write method.
So this is a multi-line string and it's fine if you just use your enter key to split the line so that
they don't get too long on the editor here on Power Charm.
So that's a text which corresponds to that text.
And finally, that's a subheading, our team, which corresponds to that.
So let me place this in here and that's page in there.
So it's easier for you and me.
Next.
I prepared these three columns because we're going to have three columns here on the Web page.
And then I read the data that sees me file.
Now, here I want to stop and explain this.
So I didn't use a SIP argument because the SIP argument is, by default, set to a comma.
Therefore, I didn't use that because the data are divided by commas.
You see.
So that's how I read the data.
So there I have a pandas dataframe object.
Now, when I access the first column, I iterate over the first four rows of the data frame.
So since we have 12 rows, so that's 12 rows, that's only the header.
So the header is not actual data.
So since we have 12 rows and three columns, that means we're going to access rows 4x4.
So 12 divided by three makes four.
And so I added the sub header.
That's the code for that.
So I built an app string to construct this name.
You see that?
Here is where I access the first name from the first name column, and I applied the title method,
which is a string method.
So each name of the members will be capitalized.
You could also use the capitalized method instead of title.
That would also be fine.
So we have here the name a space and then the last name.
So name a space and the last name.
That's how we use the F string in this case.
Then I wrote the role using the right methods.
So we have this normal text here, and then I rendered an image using that image method.
Then we have the second column.
The only difference here with the first column is that we iterate over rows 4 to 7.
So eight is not included in the slides.
So this is going to give us rows with index four, five, six and seven.
So that is four rows.
And then we have the third column here.
We access rows eight, nine, ten, 11.
So those rose.
That means that's zero within the zero 1 to 3.
So those are the first four rose.
Then we have the next four rose in here and the last four rose.
Each of those rose will be rendered in a separate column here on the web page.
So that's my final code.
You can also find the code attached in the lecture resources.
So if you have a problem with your code, you can just copy paste my code on your computer and try to
compare the two files.
So in part charm you can compare to files.
For example, if I have another main to that P file in here and let's paste some content in main that
P and if I change this 8 to 9, I can select these two files right click and go here to compare files
or control D and this will show you to the two files side by side and you'll see this path.
It's pointing you where you have differences.
And it's highlights the difference.
So you know that eight and nine are different.
I hope that is helpful.
And let me delete Maine that we.
And yeah, that's the codes.
I know for sure that the code was different from yours, but that's nothing to worry about between two
programmers.
Never.
Is the code the same for building the same thing?
So I hope that building something from scratch on your own has helped you learn the concepts better.
I'm sure it does.
And I'll see you in the next videos.
Thanks a lot.