1 00:00:04,040 --> 00:00:09,465 It is time for your first assignment in this course. 2 00:00:09,465 --> 00:00:10,975 In the first assignment, 3 00:00:10,975 --> 00:00:18,605 we're going to provide you with unstyled aboutus.html page. 4 00:00:18,605 --> 00:00:22,130 The zip file containing that aboutus.html 5 00:00:22,130 --> 00:00:25,670 page is available to you in the assignment instructions. 6 00:00:25,670 --> 00:00:30,530 So you need to download the page and then move that page to your con Fusion folder. 7 00:00:30,530 --> 00:00:33,060 Thereafter, you will apply 8 00:00:33,060 --> 00:00:40,970 Bootstrap classes and the Bootstrap Flexbox grid to style the page, 9 00:00:41,110 --> 00:00:47,780 then you move the page to the Con Fusion folder, 10 00:00:47,780 --> 00:00:52,095 then you can view the page in your browser by typing 11 00:00:52,095 --> 00:01:01,810 localhost:3000/aboutus.html and your light server build server up the aboutus.html page, 12 00:01:01,810 --> 00:01:05,310 so this is the only way you can get to view the page. 13 00:01:05,310 --> 00:01:06,545 So to begin with, 14 00:01:06,545 --> 00:01:08,775 the page will look like this, 15 00:01:08,775 --> 00:01:12,520 a completely Unstyle page which just contains content. 16 00:01:12,520 --> 00:01:20,165 Now your job is to go through three tasks in order to format this page. 17 00:01:20,165 --> 00:01:23,245 Let's look at the three tasks in more detail. 18 00:01:23,245 --> 00:01:26,890 Your first task is to apply 19 00:01:26,890 --> 00:01:32,850 the Bootstraps CSS and the Javascript classes to the aboutus.html 20 00:01:32,850 --> 00:01:42,415 page so that this page will be instantly transformed into this page, 21 00:01:42,415 --> 00:01:48,470 where as soon as you add the Bootstraps CSS and JavaScript classes, 22 00:01:48,470 --> 00:01:54,115 the header and footer will automatically get formatted correctly, 23 00:01:54,115 --> 00:01:59,170 because I have simply copied the header in the footer from the index.html page into 24 00:01:59,170 --> 00:02:05,140 this page and I left all the Bootstrap formatting as such, 25 00:02:05,140 --> 00:02:10,955 but the actual content of the page is still left unstyled. 26 00:02:10,955 --> 00:02:14,580 So now, as the second task, 27 00:02:14,580 --> 00:02:19,580 you're going to apply the Bootstraps Flexbox grid including the Container, 28 00:02:19,580 --> 00:02:23,190 the rows and the column classes to 29 00:02:23,190 --> 00:02:28,430 this content or the page so that you can style it properly. 30 00:02:28,430 --> 00:02:30,345 Now, when apply the classes, 31 00:02:30,345 --> 00:02:36,430 you're going to apply the row and column classes to the aboutus to just leave it as such. 32 00:02:36,430 --> 00:02:40,390 Then you're going to apply the row and column classes to 33 00:02:40,390 --> 00:02:45,445 this content so that this content occupies only half the screen, 34 00:02:45,445 --> 00:02:48,740 and then you're going to apply the row and column classes to 35 00:02:48,740 --> 00:02:53,245 this content so that have occupies the entire screen width. 36 00:02:53,245 --> 00:03:00,300 So, choose the row and column classes correctly to apply to this. 37 00:03:00,300 --> 00:03:05,220 You can use the custom CSS classes that we have already 38 00:03:05,220 --> 00:03:10,510 implemented for the index.html by adding the style.css file, 39 00:03:10,510 --> 00:03:14,765 also to style the content in this page. 40 00:03:14,765 --> 00:03:18,010 So when you complete the second task, 41 00:03:18,010 --> 00:03:21,990 your page will end up being styled like this. 42 00:03:21,990 --> 00:03:27,290 So you can see that the aboutus page exists in its own. 43 00:03:27,290 --> 00:03:31,505 Then Our History part, 44 00:03:31,505 --> 00:03:37,800 notice that on a small to large screen size, 45 00:03:37,800 --> 00:03:43,815 the Our History will occupy only half the screen width. 46 00:03:43,815 --> 00:03:51,850 Then the Corporate Leadership part occupies the entire screen width in this case. 47 00:03:51,850 --> 00:03:56,000 This is the second task that you need to complete in your assignment. 48 00:03:56,000 --> 00:03:59,660 For the third task as you can see, 49 00:03:59,660 --> 00:04:05,380 this content layout looks fine for larger screen sizes, 50 00:04:05,380 --> 00:04:13,240 but when you go to the extra small screen size especially like this, 51 00:04:13,240 --> 00:04:20,415 you notice that the content is too much in this section. 52 00:04:20,415 --> 00:04:27,670 So what we would like to do is to use another Bootstrap class provided for us called, 53 00:04:27,670 --> 00:04:31,615 [inaudible] and DSM block. 54 00:04:31,615 --> 00:04:37,865 There is a link to the responsive classes in the assignment resources, 55 00:04:37,865 --> 00:04:44,550 so you can check out the documentation for the [inaudible] and DSM block. 56 00:04:44,550 --> 00:04:49,440 You need to apply those so that this description will be 57 00:04:49,440 --> 00:04:54,400 hidden in the extra small screen sizes. 58 00:04:54,400 --> 00:04:59,955 So when you the classes to this corporate leadership part, 59 00:04:59,955 --> 00:05:06,040 the same content will now be laid out without the description, 60 00:05:06,040 --> 00:05:10,465 so it will be hidden in the extra small screens size. 61 00:05:10,465 --> 00:05:14,170 But when you go to the small the large screen size, 62 00:05:14,170 --> 00:05:16,335 the content will become visible. 63 00:05:16,335 --> 00:05:21,200 So you can notice that for the extra small screen size, 64 00:05:21,200 --> 00:05:23,760 the content is hidden, 65 00:05:23,760 --> 00:05:26,170 but for the small screen size, 66 00:05:26,170 --> 00:05:30,475 that description content will be shown clearly. 67 00:05:30,475 --> 00:05:35,310 So this is your third task in your assignment. 68 00:05:35,310 --> 00:05:40,175 While you are at it, you can also apply the same classes to 69 00:05:40,175 --> 00:05:45,810 the descriptions in our index.html page so that 70 00:05:45,810 --> 00:05:51,480 the detailed descriptions for the content items will also be hidden in 71 00:05:51,480 --> 00:05:57,645 the index.html page when it is viewed on extra small screen sizes. 72 00:05:57,645 --> 00:06:02,090 This completes your first assignment. 73 00:06:02,090 --> 00:06:04,965 Also, when you submit your assignment, 74 00:06:04,965 --> 00:06:14,460 please take a full page screen shot of your layout 75 00:06:14,460 --> 00:06:19,615 both in small to 76 00:06:19,615 --> 00:06:25,930 extra large screen size and also on the extra small screen size, 77 00:06:25,930 --> 00:06:29,230 and then include that as part of your submission. 78 00:06:29,230 --> 00:06:32,420 To take a full page screenshot in Chrome, 79 00:06:32,420 --> 00:06:36,000 you can use a Chrome extension that is available to us, 80 00:06:36,000 --> 00:06:39,305 the link to the Chrome extension is provided in 81 00:06:39,305 --> 00:06:45,325 the assignment resources that follow the assignment description. 82 00:06:45,325 --> 00:06:48,555 After you complete your assignment, 83 00:06:48,555 --> 00:06:52,610 in case you're saving your changes to a Git Repository, 84 00:06:52,610 --> 00:06:55,750 please don't forget to commit the changes to 85 00:06:55,750 --> 00:07:00,090 your Git Repository with the Message Assignment One.