1 00:00:00,910 --> 00:00:01,410 Hi. 2 00:00:01,420 --> 00:00:07,689 In this video, I'll show you my solution to the exercise which I handed you in the previous video. 3 00:00:08,170 --> 00:00:11,620 So the exercise was to build this web page. 4 00:00:12,160 --> 00:00:15,960 And so let me show you now my project in Power Charm. 5 00:00:16,180 --> 00:00:17,350 This is what I have here. 6 00:00:17,350 --> 00:00:19,690 I have this directory with images. 7 00:00:19,690 --> 00:00:24,280 So that's each image of these members of the company. 8 00:00:24,370 --> 00:00:31,420 And you got these files in the previous video, and then I have a dot dot file. 9 00:00:31,420 --> 00:00:35,680 That's also a file you got in the lecture resources in the previous video. 10 00:00:36,280 --> 00:00:42,670 And then I have these topics that C, Z, we don't need this right now. 11 00:00:42,670 --> 00:00:45,610 We'll need it tomorrow so we can close that. 12 00:00:45,610 --> 00:00:48,640 And that's my main that's P file where I wrote the code. 13 00:00:48,640 --> 00:00:50,170 So this is what I'll explain. 14 00:00:50,170 --> 00:00:52,120 You know what I did? 15 00:00:52,120 --> 00:00:55,570 So I imported string lit and pandas. 16 00:00:55,570 --> 00:01:05,200 I set the page configuration, so I set the layout to white so that we can have the content expands 17 00:01:05,200 --> 00:01:07,540 wider than normal. 18 00:01:07,540 --> 00:01:10,690 Otherwise the contents would be more narrow. 19 00:01:11,650 --> 00:01:15,730 And then I added a header which corresponds to that. 20 00:01:16,540 --> 00:01:20,530 I added this text using a write method. 21 00:01:20,980 --> 00:01:30,040 So this is a multi-line string and it's fine if you just use your enter key to split the line so that 22 00:01:30,040 --> 00:01:34,510 they don't get too long on the editor here on Power Charm. 23 00:01:35,590 --> 00:01:38,620 So that's a text which corresponds to that text. 24 00:01:40,220 --> 00:01:44,660 And finally, that's a subheading, our team, which corresponds to that. 25 00:01:45,950 --> 00:01:51,770 So let me place this in here and that's page in there. 26 00:01:52,490 --> 00:01:54,620 So it's easier for you and me. 27 00:02:01,830 --> 00:02:02,400 Next. 28 00:02:02,400 --> 00:02:08,550 I prepared these three columns because we're going to have three columns here on the Web page. 29 00:02:08,550 --> 00:02:11,910 And then I read the data that sees me file. 30 00:02:11,940 --> 00:02:15,420 Now, here I want to stop and explain this. 31 00:02:15,870 --> 00:02:22,260 So I didn't use a SIP argument because the SIP argument is, by default, set to a comma. 32 00:02:22,290 --> 00:02:29,490 Therefore, I didn't use that because the data are divided by commas. 33 00:02:29,730 --> 00:02:30,540 You see. 34 00:02:30,750 --> 00:02:33,780 So that's how I read the data. 35 00:02:34,560 --> 00:02:38,430 So there I have a pandas dataframe object. 36 00:02:41,480 --> 00:02:49,300 Now, when I access the first column, I iterate over the first four rows of the data frame. 37 00:02:49,310 --> 00:02:57,800 So since we have 12 rows, so that's 12 rows, that's only the header. 38 00:02:57,800 --> 00:03:00,110 So the header is not actual data. 39 00:03:00,470 --> 00:03:07,310 So since we have 12 rows and three columns, that means we're going to access rows 4x4. 40 00:03:07,730 --> 00:03:10,400 So 12 divided by three makes four. 41 00:03:10,490 --> 00:03:12,440 And so I added the sub header. 42 00:03:13,860 --> 00:03:15,690 That's the code for that. 43 00:03:17,430 --> 00:03:23,310 So I built an app string to construct this name. 44 00:03:23,850 --> 00:03:25,170 You see that? 45 00:03:25,170 --> 00:03:34,770 Here is where I access the first name from the first name column, and I applied the title method, 46 00:03:34,770 --> 00:03:36,410 which is a string method. 47 00:03:36,420 --> 00:03:41,430 So each name of the members will be capitalized. 48 00:03:41,520 --> 00:03:45,970 You could also use the capitalized method instead of title. 49 00:03:45,990 --> 00:03:48,330 That would also be fine. 50 00:03:49,020 --> 00:03:54,960 So we have here the name a space and then the last name. 51 00:03:57,020 --> 00:04:00,200 So name a space and the last name. 52 00:04:00,470 --> 00:04:03,620 That's how we use the F string in this case. 53 00:04:04,370 --> 00:04:07,670 Then I wrote the role using the right methods. 54 00:04:07,670 --> 00:04:15,020 So we have this normal text here, and then I rendered an image using that image method. 55 00:04:16,190 --> 00:04:17,600 Then we have the second column. 56 00:04:17,600 --> 00:04:23,870 The only difference here with the first column is that we iterate over rows 4 to 7. 57 00:04:23,870 --> 00:04:26,540 So eight is not included in the slides. 58 00:04:27,080 --> 00:04:32,240 So this is going to give us rows with index four, five, six and seven. 59 00:04:32,240 --> 00:04:34,460 So that is four rows. 60 00:04:35,840 --> 00:04:39,140 And then we have the third column here. 61 00:04:39,140 --> 00:04:43,280 We access rows eight, nine, ten, 11. 62 00:04:43,280 --> 00:04:45,170 So those rose. 63 00:04:45,170 --> 00:04:50,150 That means that's zero within the zero 1 to 3. 64 00:04:50,150 --> 00:04:52,010 So those are the first four rose. 65 00:04:52,010 --> 00:04:58,100 Then we have the next four rose in here and the last four rose. 66 00:04:58,370 --> 00:05:03,770 Each of those rose will be rendered in a separate column here on the web page. 67 00:05:03,770 --> 00:05:07,490 So that's my final code. 68 00:05:08,640 --> 00:05:12,240 You can also find the code attached in the lecture resources. 69 00:05:12,270 --> 00:05:18,480 So if you have a problem with your code, you can just copy paste my code on your computer and try to 70 00:05:18,480 --> 00:05:19,920 compare the two files. 71 00:05:19,920 --> 00:05:23,610 So in part charm you can compare to files. 72 00:05:23,610 --> 00:05:33,580 For example, if I have another main to that P file in here and let's paste some content in main that 73 00:05:33,630 --> 00:05:43,170 P and if I change this 8 to 9, I can select these two files right click and go here to compare files 74 00:05:43,170 --> 00:05:52,170 or control D and this will show you to the two files side by side and you'll see this path. 75 00:05:52,200 --> 00:05:56,970 It's pointing you where you have differences. 76 00:05:58,800 --> 00:06:00,330 And it's highlights the difference. 77 00:06:00,330 --> 00:06:02,700 So you know that eight and nine are different. 78 00:06:03,510 --> 00:06:04,890 I hope that is helpful. 79 00:06:04,890 --> 00:06:07,000 And let me delete Maine that we. 80 00:06:08,310 --> 00:06:09,990 And yeah, that's the codes. 81 00:06:10,110 --> 00:06:15,690 I know for sure that the code was different from yours, but that's nothing to worry about between two 82 00:06:15,690 --> 00:06:16,570 programmers. 83 00:06:16,590 --> 00:06:17,160 Never. 84 00:06:17,160 --> 00:06:20,250 Is the code the same for building the same thing? 85 00:06:20,550 --> 00:06:27,020 So I hope that building something from scratch on your own has helped you learn the concepts better. 86 00:06:27,030 --> 00:06:28,530 I'm sure it does. 87 00:06:28,830 --> 00:06:30,760 And I'll see you in the next videos. 88 00:06:31,230 --> 00:06:31,830 Thanks a lot.