1 00:00:00,150 --> 00:00:05,560 OK, guys, before we talk about anything, let me show you some websites here. 2 00:00:05,610 --> 00:00:10,000 We got this Web site and this is very responsive we have here. 3 00:00:10,980 --> 00:00:15,230 And when we click here, we have a model with a validation. 4 00:00:15,270 --> 00:00:22,400 So when I click on Submit for validation and then if I type anything inside, we've got scooped. 5 00:00:22,920 --> 00:00:24,750 We can scroll down here. 6 00:00:24,750 --> 00:00:25,830 We have a carousel. 7 00:00:27,420 --> 00:00:31,610 And here we have found we can scroll down here. 8 00:00:31,860 --> 00:00:36,140 These people that are the responsive project plans and contact form. 9 00:00:36,630 --> 00:00:39,270 And this is also a website. 10 00:00:39,510 --> 00:00:40,950 We can scroll down here. 11 00:00:40,950 --> 00:00:43,470 We have a drop down with a carousel. 12 00:00:44,580 --> 00:00:49,700 When we scroll down again, we have this accordion, OK? 13 00:00:50,430 --> 00:00:53,070 And then here we have three cards. 14 00:00:54,180 --> 00:00:59,640 And here we have a spy responsive table and left little group. 15 00:01:00,360 --> 00:01:02,130 Here we have images 16 00:01:04,710 --> 00:01:08,370 and here we have three more section and the contact form. 17 00:01:08,760 --> 00:01:12,700 And this is also a website for selling online things. 18 00:01:13,320 --> 00:01:14,610 This is a demo version. 19 00:01:15,270 --> 00:01:16,530 We are not using this. 20 00:01:16,800 --> 00:01:18,190 We can scroll them down. 21 00:01:20,100 --> 00:01:22,230 OK, here we have the list. 22 00:01:22,230 --> 00:01:31,680 Grubin, we can scroll down again here we have the project plan and documentation and here we have a 23 00:01:31,680 --> 00:01:39,900 future we can check now the freelancer Web site here we have this page in a with a drop down link to 24 00:01:40,350 --> 00:01:43,560 this Web site are completely responsive here. 25 00:01:43,560 --> 00:01:45,420 We have this button right here. 26 00:01:47,040 --> 00:01:48,870 When we hover, we got this effect. 27 00:01:49,110 --> 00:01:50,340 We can scroll down. 28 00:01:50,820 --> 00:01:59,190 We had the web craft and contact form with a validation and we can click first for the built template. 29 00:01:59,730 --> 00:02:00,810 We can check it out. 30 00:02:01,050 --> 00:02:03,030 We have here the Dropcam link. 31 00:02:03,330 --> 00:02:05,580 And here we have some cards. 32 00:02:07,200 --> 00:02:08,490 This is looking very good. 33 00:02:08,730 --> 00:02:12,440 And here we have a carousel for the products here. 34 00:02:12,600 --> 00:02:17,460 This is responsive according to the width of the screen. 35 00:02:17,730 --> 00:02:21,810 When the screen is small, it was just the one item. 36 00:02:21,990 --> 00:02:23,520 And here we have a future. 37 00:02:24,270 --> 00:02:28,620 And also here we have a website, which is for the e commerce. 38 00:02:28,950 --> 00:02:32,580 We have here the sign in for your account. 39 00:02:32,580 --> 00:02:35,550 We can't separate the form or we can cancel. 40 00:02:36,000 --> 00:02:44,460 When you scroll down, we have new products and then here we have the class section and you put it again, 41 00:02:44,640 --> 00:02:46,500 categories and future. 42 00:02:46,830 --> 00:02:57,120 We can check now for shop dot a.m. and then we have here some filters and cards. 43 00:02:57,750 --> 00:03:03,830 And when we make the screen smaller, let's try to make the screen smaller, OK? 44 00:03:04,740 --> 00:03:08,160 And then here, let's make it larger. 45 00:03:12,240 --> 00:03:17,670 OK, this has been a problem for the screen, so we can just make it like this. 46 00:03:19,800 --> 00:03:20,460 Waiting. 47 00:03:23,760 --> 00:03:24,510 OK. 48 00:03:27,740 --> 00:03:34,050 And then now we can make a screen with the same width, OK? 49 00:03:34,580 --> 00:03:40,830 And here we have the list and group for the table and also have here filter your products. 50 00:03:41,120 --> 00:03:42,650 And here we have the NAF bar. 51 00:03:44,450 --> 00:03:46,720 We can click on filter your products. 52 00:03:47,630 --> 00:03:51,590 And in here we have an off canvas with this list. 53 00:03:52,460 --> 00:03:56,000 And also here we have for the product. 54 00:04:02,040 --> 00:04:04,600 And then here we can make it larger. 55 00:04:04,800 --> 00:04:11,620 And here we have for the project for the product and the last page for this website is for the back. 56 00:04:12,600 --> 00:04:14,050 And here we have the back. 57 00:04:15,480 --> 00:04:21,280 Do you know that you can build each of these Web sites just in less than one hour? 58 00:04:22,080 --> 00:04:23,130 How can we do that? 59 00:04:23,640 --> 00:04:27,480 There's a library which gets called Put's Chop Chop is. 60 00:04:28,140 --> 00:04:35,130 As in JavaScript library, which makes us able to build completely responsive websites just in less 61 00:04:35,130 --> 00:04:36,440 than one hours. 62 00:04:36,690 --> 00:04:40,750 We can go here and click on V5 and get trapped dot com. 63 00:04:41,730 --> 00:04:42,550 This is the Web. 64 00:04:42,660 --> 00:04:44,850 This is the website of Bootstrap. 65 00:04:46,470 --> 00:04:48,580 And this is completely free. 66 00:04:48,630 --> 00:04:55,940 We can click on documents and then we can scroll down so we can start using the starter template for 67 00:04:56,190 --> 00:04:59,840 for the seats and the JavaScript, the strapper. 68 00:05:00,720 --> 00:05:04,310 We already have a course for post track this one. 69 00:05:04,800 --> 00:05:10,580 This is a complete course afterwards track, which is containing more than 20 hours. 70 00:05:10,590 --> 00:05:16,840 We have continuous updates, good reviews from students and 10 projects. 71 00:05:17,640 --> 00:05:24,510 So thank you and see you on the bootstrap five from scratch with 10 products because you can find a 72 00:05:24,510 --> 00:05:28,290 link attached to this lecture as an external resource. 73 00:05:28,680 --> 00:05:30,380 Good luck and have fun.