1 00:00:00,300 --> 00:00:07,790 Hi welcome to this lecture in this lecture I didn't set a project called for a real responsive website. 2 00:00:08,130 --> 00:00:10,060 So let us get started. 3 00:00:10,890 --> 00:00:11,600 OK. 4 00:00:12,480 --> 00:00:15,270 This is the folder for small business page. 5 00:00:15,270 --> 00:00:22,310 This is a project we have been developing in the previous section of TMLC SS jealous of GQ and Brewster 6 00:00:22,320 --> 00:00:26,780 goosestepping one you can take advantage of this sort of structure. 7 00:00:27,630 --> 00:00:35,490 It has for the course Yesus called images and for javascript we already have music playing we're configured 8 00:00:35,880 --> 00:00:45,250 with this code of structure so we can take advantage of this for the structures Lucas you name it with 9 00:00:45,730 --> 00:00:46,680 low skill 10 00:00:49,380 --> 00:00:55,030 Noso this will be the name of our really just wanting conject inside. 11 00:00:55,080 --> 00:00:57,630 So let us sort of move the unnecessary images 12 00:01:01,190 --> 00:01:08,130 in to see a Cisco that we need both posterboard monotonous says because you will be using Ghost a framework 13 00:01:08,550 --> 00:01:15,280 and standards he says and indigenous for that we also need GQ library. 14 00:01:15,310 --> 00:01:16,290 So we already have. 15 00:01:16,290 --> 00:01:23,240 GQ to downloaded and configured with this folder and we already knew goosestepping Dortmunder G is. 16 00:01:23,430 --> 00:01:28,520 So almost everything is configured in this sort of structure. 17 00:01:28,530 --> 00:01:36,980 Let me open this folder and the Vegas editor but before I add this structure to the breakfast or did 18 00:01:37,090 --> 00:01:40,820 we need the content for laso project. 19 00:01:40,890 --> 00:01:44,420 Let us move the content for the project. 20 00:01:44,490 --> 00:01:45,840 This is the content. 21 00:01:45,840 --> 00:01:46,610 Think of it. 22 00:01:46,660 --> 00:01:47,670 This is the content. 23 00:01:47,850 --> 00:01:50,140 The plant has provided to you. 24 00:01:50,640 --> 00:01:54,330 We have the images for the oldest watching Project. 25 00:01:54,330 --> 00:01:57,990 Let me copy it all and move it to the last quarter 26 00:02:03,440 --> 00:02:04,290 okay. 27 00:02:04,740 --> 00:02:09,950 I think we all need images at this point and this will be the content. 28 00:02:10,020 --> 00:02:10,860 We will be using 29 00:02:18,170 --> 00:02:22,070 for our project. 30 00:02:22,150 --> 00:02:28,090 This is just you can think of for the content the client has provided it has some content but we will 31 00:02:28,090 --> 00:02:32,390 be using this content this text for our real. 32 00:02:33,980 --> 00:02:35,150 Object. 33 00:02:35,810 --> 00:02:38,310 OK let us get started. 34 00:02:38,380 --> 00:02:40,920 I mean open this project in the back of city to 35 00:02:47,110 --> 00:03:00,440 open and postop have these who are you working there just soften the Indic start and Steimle find we 36 00:03:00,440 --> 00:03:05,910 have some unnecessary markup there just to move the unnecessary. 37 00:03:05,930 --> 00:03:08,070 I think all of the markup in the board is section. 38 00:03:08,130 --> 00:03:09,550 We need to remove. 39 00:03:11,240 --> 00:03:21,080 So we can start building that unit once you get set from scratch and look me the name the title for 40 00:03:21,090 --> 00:03:23,760 this project it would be so 41 00:03:26,400 --> 00:03:27,760 simple. 42 00:03:28,410 --> 00:03:39,400 Dean and respond see if say this will be the title for this good checked working 43 00:03:42,220 --> 00:03:56,010 let me add some additional thanks. 44 00:03:57,730 --> 00:04:03,240 This is a matter of interest tell the browser to go in court suspicion. 45 00:04:03,490 --> 00:04:08,160 Get back to us. 46 00:04:08,580 --> 00:04:11,050 It is a core group or 47 00:04:22,270 --> 00:04:25,840 data first and I will explain what this meant to take his core 48 00:04:40,200 --> 00:04:46,400 this matter to the viewport element gives the pros an instruction on how to control the page dimension 49 00:04:46,460 --> 00:04:58,480 and Skilling the device bar search the author to follow the screen word of device which will vary depending 50 00:04:58,480 --> 00:05:03,220 on the device and the initial skill sets the initial zoom level. 51 00:05:03,220 --> 00:05:08,070 When the page is first lauded by the browser so it is very important to add. 52 00:05:08,090 --> 00:05:15,620 This made it take for Responsive Web sites okey OK. 53 00:05:15,610 --> 00:05:16,900 One thing let me fix it. 54 00:05:17,050 --> 00:05:24,010 I just know that should is equal equal device Dashni talking no just fine. 55 00:05:24,370 --> 00:05:25,700 Now moving forward. 56 00:05:27,040 --> 00:05:33,610 Let me move these javascript choir's to the body section at the bottom. 57 00:05:33,640 --> 00:05:42,140 Is a good practice to add these scripts at the bottom of Wardy deg because it will increase them page 58 00:05:42,190 --> 00:05:43,240 speed. 59 00:05:43,870 --> 00:05:45,670 Let me add some comments. 60 00:05:48,700 --> 00:05:49,810 More scared. 61 00:05:50,440 --> 00:05:53,520 You tell us it of. 62 00:05:53,650 --> 00:05:54,240 DS 63 00:05:57,210 --> 00:05:58,870 is a good. 64 00:06:02,050 --> 00:06:02,530 OK. 65 00:06:02,740 --> 00:06:11,280 Let's start adding some other resources like Google Forms and for awesome and FEBE icons for this project 66 00:06:11,330 --> 00:06:14,710 you knew who Paypal Google Forms. 67 00:06:16,250 --> 00:06:21,940 And you can easily add dude to the Google for trips site. 68 00:06:22,070 --> 00:06:24,330 So let us start adding the Google phone. 69 00:06:24,680 --> 00:06:31,340 OK this is the vich site of the Google Forms and we can easily add Google Chrome on this website. 70 00:06:31,370 --> 00:06:36,080 The first one we need is that it'll be the support I need. 71 00:06:37,830 --> 00:06:45,000 You just click on disburden Creek use and this these are the all stars for this font. 72 00:06:45,060 --> 00:06:47,340 And BAM little script the style for this 73 00:06:56,100 --> 00:06:57,980 I just add 300. 74 00:06:58,500 --> 00:07:03,520 All of these are called hunger. 75 00:07:03,790 --> 00:07:07,620 Each hundred and let us add this 900. 76 00:07:08,060 --> 00:07:08,780 OK. 77 00:07:10,330 --> 00:07:12,500 I just need to copy this link. 78 00:07:15,320 --> 00:07:21,250 And means to do the header section are also indexed totals. 79 00:07:21,250 --> 00:07:21,820 Jon Karl 80 00:07:25,350 --> 00:07:30,240 are seemed there in a service called the second Google form. 81 00:07:30,400 --> 00:07:51,330 We need this joke which is schools Sasko pre-cruise I would need 400 600 700 and 900. 82 00:07:51,510 --> 00:07:58,140 So on your desktop you the link for this can go and the street here. 83 00:08:02,020 --> 00:08:06,030 Coleman's code is good fonts. 84 00:08:08,360 --> 00:08:12,170 And you would be a good is if we read a book. 85 00:08:12,550 --> 00:08:12,980 Yes. 86 00:08:13,030 --> 00:08:13,910 So the sources 87 00:08:16,850 --> 00:08:26,510 after that and the icon we have I can go I did yes I did buy the plant that does and the fab Eichhorn 88 00:08:34,490 --> 00:08:37,690 link leashing could be. 89 00:08:37,940 --> 00:08:41,450 I can type croupy 90 00:08:43,880 --> 00:08:46,300 image being G. 91 00:08:47,490 --> 00:08:51,410 And actually be images 92 00:08:57,040 --> 00:08:59,180 and gun me. 93 00:08:59,240 --> 00:09:08,370 I can. 94 00:09:08,980 --> 00:09:19,040 So all you have I did over there I can Google Google phones and no we need to add 40000 it mean visit 95 00:09:19,040 --> 00:09:22,600 the court and say OK this is the. 96 00:09:22,710 --> 00:09:23,680 Or awesome. 97 00:09:23,750 --> 00:09:33,350 We need these quote awesome because we will be using these Conte's as I can you know project. 98 00:09:33,490 --> 00:09:35,140 It is a really great resource. 99 00:09:36,600 --> 00:09:43,980 You can see all of they can see soon you'll be using these phones and are the oldest ones that are. 100 00:09:44,090 --> 00:09:47,140 So let us get downloading all downloaded 101 00:09:49,950 --> 00:09:51,610 so it is a daunting no. 102 00:09:53,280 --> 00:09:56,020 Here this is though just once. 103 00:09:59,410 --> 00:10:05,010 This is the zip file I ended up with called Google photos 12:36. 104 00:10:05,040 --> 00:10:05,510 Awesome. 105 00:10:05,530 --> 00:10:06,860 Give me ex-addict deep. 106 00:10:08,860 --> 00:10:11,440 So this extra could fall. 107 00:10:11,560 --> 00:10:13,220 I need the folder. 108 00:10:14,740 --> 00:10:16,550 And form. 109 00:10:16,640 --> 00:10:18,050 Awesome Darkman Garcia says. 110 00:10:18,110 --> 00:10:20,860 These are the good things I need at this stage. 111 00:10:20,900 --> 00:10:29,180 It's been copied of course and through the school project I really need to here. 112 00:10:30,480 --> 00:10:31,790 Derek that's true. 113 00:10:32,080 --> 00:10:33,580 And second I need 114 00:10:38,060 --> 00:10:40,150 to see is this file horn dash. 115 00:10:40,190 --> 00:10:51,730 Awesome I mean it's excuses when if you moved to the CCS color Let us link this foamboard awesome Dortmunder 116 00:10:51,730 --> 00:10:59,470 t Assis NKU them so. 117 00:10:59,570 --> 00:11:03,660 I did hear lnk elation. 118 00:11:05,820 --> 00:11:06,580 Good call. 119 00:11:06,590 --> 00:11:08,270 This will be stencilled also 120 00:11:12,380 --> 00:11:14,540 takes you so he 121 00:11:19,190 --> 00:11:20,450 Kim and 122 00:11:23,780 --> 00:11:27,220 s.c.s and Goncourt awesome. 123 00:11:27,880 --> 00:11:32,530 Making this stunted article. 124 00:11:32,860 --> 00:11:37,230 This is an awesome 125 00:11:44,630 --> 00:11:45,350 game. 126 00:11:48,020 --> 00:11:55,100 So at this point we have headed course I can have a date or something. 127 00:11:55,870 --> 00:12:04,300 And here let us work on staying indoors says a thing we don't need them these days. 128 00:12:04,410 --> 00:12:06,470 So we even start from scratch. 129 00:12:06,500 --> 00:12:10,620 So let me add one more hit and add some staling. 130 00:12:11,430 --> 00:12:11,930 Steady. 131 00:12:11,940 --> 00:12:16,150 This is got all elements marching 132 00:12:19,540 --> 00:12:25,980 G-2 mobs and so you don't play all of the elements on the beach. 133 00:12:26,000 --> 00:12:34,750 It will basically reset all the elements with beddings zero and much in zero and little supply some 134 00:12:34,760 --> 00:12:36,700 rules to the body element. 135 00:12:37,120 --> 00:12:42,280 We just entered Google Forms So let us add the Google folks to say yes. 136 00:12:44,750 --> 00:12:47,860 And we will see it in here. 137 00:12:48,170 --> 00:12:52,390 And if that element is not available then Sensata can still be used. 138 00:12:52,400 --> 00:12:54,650 This is the form we just edit. 139 00:12:54,750 --> 00:13:02,710 You know indexed stories do you mean why should you do this one they'll be so you'll be using these 140 00:13:02,770 --> 00:13:05,970 two forcing the state gace assist for this project. 141 00:13:06,350 --> 00:13:11,020 And let's assume that a workflow while 142 00:13:13,890 --> 00:13:31,120 our long way fiscal is vertical and our film x would be good. 143 00:13:31,860 --> 00:13:38,170 So anything on the horizontal side Michigan or fluvial be hidden. 144 00:13:38,220 --> 00:13:46,260 We'll just add some forceps to the paragraph size. 145 00:13:46,790 --> 00:13:48,330 It should be 14. 146 00:13:48,600 --> 00:13:51,030 We are already using goosestepping. 147 00:13:51,300 --> 00:13:58,190 So visually take responsibility for all of that epigraphy so we don't need to add some more general 148 00:13:58,200 --> 00:14:01,930 CSSA because the stay the course the good said gotcha's. 149 00:14:01,950 --> 00:14:03,760 This will take all of the responsibility. 150 00:14:05,170 --> 00:14:08,860 So this was setting up the project. 151 00:14:08,860 --> 00:14:10,800 So we have all the resources we have. 152 00:14:11,170 --> 00:14:18,340 We have the forms linked to the stay indexed or textual file we have a recon icon and we have added 153 00:14:18,340 --> 00:14:19,570 the port Awesomes. 154 00:14:19,600 --> 00:14:26,320 I think we can start adding it in marker for the header section in the next picture. 155 00:14:26,350 --> 00:14:27,330 See you there. 156 00:14:27,340 --> 00:14:27,790 Thanks.