1 00:00:10,070 --> 00:00:12,950 Hello everyone and welcome to our bootstrap course. 2 00:00:12,950 --> 00:00:17,420 In this lecture we're going to be giving an introduction to web development fundamentals. 3 00:00:17,420 --> 00:00:22,100 This is going to be a quick overview of each team out CFS and javascript. 4 00:00:22,100 --> 00:00:25,820 So let's go ahead and navigate to J.S. bean dot com. 5 00:00:25,820 --> 00:00:26,210 That's right. 6 00:00:26,220 --> 00:00:32,310 And right now just type in J.S. bean dot com in your browser and hit enter and you'll be taken to GSK 7 00:00:32,310 --> 00:00:33,860 then dot com. 8 00:00:33,860 --> 00:00:40,990 The immediate thing you'll see on your screen are these three tabs the first tab here is each t amount. 9 00:00:41,000 --> 00:00:41,990 The second is CSF. 10 00:00:42,020 --> 00:00:43,730 And the third is the output. 11 00:00:43,820 --> 00:00:47,630 And these are all different tabs that make up our website. 12 00:00:47,660 --> 00:00:54,800 So each ECMO is the structure of the site known as the document object model. 13 00:00:54,800 --> 00:01:01,970 This contains all of the objects of our Web site like the body and the head as well as more that we 14 00:01:01,970 --> 00:01:03,340 can put ourselves. 15 00:01:03,480 --> 00:01:05,870 The CFS contains all the styling. 16 00:01:05,870 --> 00:01:11,480 So as you notice it's better now because that means our website has no styling only the default styling 17 00:01:11,960 --> 00:01:18,920 and the output is what we would see on the Internet when we uploaded this Web site to a server and produced 18 00:01:18,920 --> 00:01:19,220 it. 19 00:01:19,220 --> 00:01:24,350 So you'll see that output is empty because there is nothing in the body of this website which means 20 00:01:24,530 --> 00:01:25,570 it is an empty Web site. 21 00:01:26,600 --> 00:01:33,700 So every Web site will contain ECMO as well as CFS and it would produce this output. 22 00:01:33,770 --> 00:01:40,540 J.S. Bean is a free online editor that lets you build and preview your Web sites on the web. 23 00:01:40,550 --> 00:01:46,070 So that means you don't have to download anything you can just build code in a GMO style with CFS and 24 00:01:46,070 --> 00:01:51,970 you will see an output here in the output tab you can go to file new to make a new bin. 25 00:01:52,040 --> 00:01:54,080 You can make the been private. 26 00:01:54,170 --> 00:02:03,530 You can also delete the bin archive it so save it to your history there you have made my bins which 27 00:02:03,530 --> 00:02:06,250 is all of your made bins in the past. 28 00:02:06,380 --> 00:02:09,740 You can make one with an account. 29 00:02:09,740 --> 00:02:14,840 You can add a description save a snapshot of the bin which is which means to save the bin. 30 00:02:14,840 --> 00:02:17,090 I highly recommend saving snapshots. 31 00:02:17,090 --> 00:02:21,950 This will allow you to have a huge history of all of the versions of your website. 32 00:02:22,010 --> 00:02:22,960 You can clone the bin. 33 00:02:22,960 --> 00:02:25,130 So make a duplicate. 34 00:02:25,130 --> 00:02:25,910 You can publish it. 35 00:02:25,940 --> 00:02:33,620 Export it to get hub or download it downloading it will create an e mail file which will contain this 36 00:02:33,620 --> 00:02:42,510 ECMO as well as this CSX put into the head the e-mail will be put immediately into his own file and 37 00:02:42,510 --> 00:02:46,280 the CSX will be put into a style sheet here. 38 00:02:47,750 --> 00:02:49,390 So you'll see these style tags. 39 00:02:49,400 --> 00:02:54,260 And this is where your e mail will contain this. 40 00:02:54,260 --> 00:02:54,940 Yes. 41 00:02:55,210 --> 00:02:59,300 So that will happen whenever you download EGF spin project. 42 00:02:59,330 --> 00:03:02,530 You can also see this as a template we use it. 43 00:03:02,570 --> 00:03:04,700 So this is how GSP works. 44 00:03:04,700 --> 00:03:06,200 Now there are several tabs appear. 45 00:03:06,200 --> 00:03:07,900 You'll see there's e PML. 46 00:03:08,360 --> 00:03:10,460 And if you click on it you'll hide it. 47 00:03:10,580 --> 00:03:12,490 And if it's blue it means it's being shown. 48 00:03:12,950 --> 00:03:15,390 So there's ECMO and I can hide CFS. 49 00:03:15,390 --> 00:03:18,620 I can hide the output to just show the ECMO. 50 00:03:18,740 --> 00:03:20,100 Then there is the CFS. 51 00:03:20,120 --> 00:03:24,020 And every time you open a tab it opens up beside the other tabs. 52 00:03:24,140 --> 00:03:30,680 So CFS will contain all the styling then there's javascript javascript contains all of the functionality. 53 00:03:30,740 --> 00:03:37,730 So if you wanted a button to work or a form to be able to be submitted or to collect user input this 54 00:03:37,730 --> 00:03:40,620 would be the interactivity of your Web site. 55 00:03:40,610 --> 00:03:45,530 Now this is beyond the scope of our course because with bootstrap we're going to be learning how to 56 00:03:45,530 --> 00:03:52,910 build the front end which concerns e-mail and see ISIS e-mail CFS are the front end which means it is 57 00:03:53,270 --> 00:04:00,620 the appearance and the structure of the website javascript is the back end which means it is the interactivity 58 00:04:00,620 --> 00:04:09,290 saving data making things move although you can make some animations with CFS an e-mail javascript will 59 00:04:09,710 --> 00:04:14,090 make more of the usability of your Web site OK. 60 00:04:14,120 --> 00:04:19,370 But you can still do a lot with e-mail and CFS and in fact it's recommended that you do more than you 61 00:04:19,370 --> 00:04:27,770 can with e-mail and see RSS because these two are rendered faster in the browser so they run faster 62 00:04:27,970 --> 00:04:29,380 there are more performance. 63 00:04:29,420 --> 00:04:35,870 There are more performed on different browsers as well which means that on the different browsers they 64 00:04:35,930 --> 00:04:42,800 still work whereas some browsers don't support javascript so e-mail CFS can still do quite a lot without 65 00:04:42,800 --> 00:04:43,710 javascript. 66 00:04:43,750 --> 00:04:49,010 There is also the console which is for you as a developer which means you can print statements for yourself 67 00:04:49,010 --> 00:04:53,130 here depending on what you want to test in the code. 68 00:04:53,180 --> 00:04:55,810 And finally the output will show the result. 69 00:04:55,850 --> 00:04:59,930 So let's go ahead and look at some of the basics of East Timor first. 70 00:04:59,920 --> 00:05:02,320 First we have here some template code. 71 00:05:02,330 --> 00:05:09,520 And this will appear with every J.S. bin project that you open whenever you build a Web site outside 72 00:05:09,520 --> 00:05:11,480 of GM spin you won't have this code. 73 00:05:11,490 --> 00:05:13,620 You'll have to write it yourself but not to worry. 74 00:05:13,620 --> 00:05:16,660 It's it's quite straightforward. 75 00:05:16,660 --> 00:05:23,650 Up here we have the doc type which says the document type and this is to let the code know that this 76 00:05:23,650 --> 00:05:25,510 is an e-mail document. 77 00:05:25,510 --> 00:05:31,960 Then we have here an opening each to attack and this will open the code which means that all of the 78 00:05:31,960 --> 00:05:39,970 code inside of the opening EMR tag and the closing H2 email tag should be treated as each to email which 79 00:05:39,970 --> 00:05:46,000 means it will be read in a certain way as e mail by the compiler which will render the e-mail into a 80 00:05:46,000 --> 00:05:47,470 web page. 81 00:05:47,500 --> 00:05:48,690 Then here we have the head. 82 00:05:48,700 --> 00:05:54,370 And this is where you put in several information points about the page. 83 00:05:54,370 --> 00:05:56,740 So here we have first the character said. 84 00:05:56,920 --> 00:06:01,050 This is the keyboard set of the web page. 85 00:06:01,060 --> 00:06:09,190 So it means you can use specific characters and of the UTF 8 character set. 86 00:06:09,610 --> 00:06:18,030 Then we have the viewport and this will let J.S. Ben know how to render the width of the screen. 87 00:06:18,040 --> 00:06:21,270 So this is for just been to render the viewport. 88 00:06:21,400 --> 00:06:23,830 Then we have the site title which is GSP. 89 00:06:23,860 --> 00:06:28,230 And this is the title that shows up in the browser. 90 00:06:28,240 --> 00:06:33,530 So as you can see the title here J has been that is what is being shown here. 91 00:06:34,180 --> 00:06:40,990 But this is for the back end of your website whereas this is for chess spins website. 92 00:06:41,020 --> 00:06:41,470 Okay great. 93 00:06:41,470 --> 00:06:46,720 So if you had your own website this title would show up just here and this is extremely important for 94 00:06:46,720 --> 00:06:53,170 a CEO search engine optimization which means your website can be better found on the Internet can become 95 00:06:53,170 --> 00:06:55,120 more searchable more popular. 96 00:06:55,240 --> 00:07:01,330 You can get more hits etc. There are many different points to even consider in your HMO to make your 97 00:07:01,330 --> 00:07:08,320 web say more SEO friendly which means more searchable including making a title like this. 98 00:07:08,350 --> 00:07:16,690 Then we have the closing head tag because many and the majority of tags in each team out must be opened 99 00:07:16,810 --> 00:07:18,380 and then closed. 100 00:07:18,460 --> 00:07:25,060 Some are self closing which we'll look at later but most of them you have to open and then close in 101 00:07:25,120 --> 00:07:32,590 the head is also where you would put in a link to a style sheet as well a style sheet means your code 102 00:07:32,650 --> 00:07:33,900 that styles the website. 103 00:07:33,910 --> 00:07:41,920 So adds the font colors the background colors the colors of elements different properties of how you 104 00:07:41,920 --> 00:07:45,980 want the visuals to look like and that would all be here in CFS. 105 00:07:46,240 --> 00:07:51,660 So we don't have to put a link to a style sheet for GSP Ben because it automatically considers this 106 00:07:51,660 --> 00:07:53,950 the asset tab to be the style sheet. 107 00:07:53,950 --> 00:07:59,350 However if you're using a different Azure if you're using an idea and integrated development environment 108 00:07:59,350 --> 00:08:07,480 such as Adam or brackets or anything really to build your website off line and on your computer then 109 00:08:07,480 --> 00:08:10,540 you will have to add a link to a style sheet. 110 00:08:11,050 --> 00:08:15,550 Then we have the body here which contains all of the code that will be rendered on screen. 111 00:08:15,610 --> 00:08:16,810 So I'm going to toggle this. 112 00:08:16,810 --> 00:08:17,170 Yes. 113 00:08:17,260 --> 00:08:18,680 And go back to the output. 114 00:08:18,760 --> 00:08:21,910 And here is where I can actually begin writing text. 115 00:08:22,270 --> 00:08:28,300 So if I put in any old text here like a site title you can see it will immediately be rendered here 116 00:08:28,300 --> 00:08:29,470 in the output. 117 00:08:29,470 --> 00:08:32,900 And this is what my site would look like live on the web. 118 00:08:33,520 --> 00:08:39,790 If I published it and you'll notice it is styled with this default times new roman styling and that 119 00:08:39,790 --> 00:08:46,210 is because that is the default with every page and on top of this default styling you can add your own 120 00:08:46,210 --> 00:08:48,740 styling in CSX. 121 00:08:49,090 --> 00:08:49,390 Okay. 122 00:08:49,420 --> 00:08:53,860 So in the body is everything that would be created on the site. 123 00:08:53,860 --> 00:08:59,350 So typically you want to put text in to something like a header so you know as I put it into a header 124 00:08:59,350 --> 00:09:04,030 one and then I close that header one tag suddenly the styling has changed. 125 00:09:04,270 --> 00:09:11,110 We're going to be looking at a headers later on in this course as well as many more different tags but 126 00:09:11,710 --> 00:09:21,370 tags symbolize what the element is and how the elements should look would be done in CFS if we can add 127 00:09:21,430 --> 00:09:26,960 another element it would just go below it so we can open a paragraph saying welcome. 128 00:09:27,250 --> 00:09:31,140 And this will create a paragraph with this paragraph tag. 129 00:09:31,240 --> 00:09:40,150 So this is the structure of every ECMO page and of every Web site there is a behind the scenes code 130 00:09:40,810 --> 00:09:45,310 file that contains in each female body just like this. 131 00:09:45,310 --> 00:09:45,550 OK. 132 00:09:45,580 --> 00:09:49,480 So now you know what an e mail page is. 133 00:09:49,480 --> 00:09:51,570 And with CFS you can add styling. 134 00:09:51,570 --> 00:10:00,780 So for example I could call every paragraph with a P letter which is the same name as its tag name. 135 00:10:01,150 --> 00:10:06,460 And then in here I could change the color to white and you'll notice this will disappear because it's 136 00:10:06,460 --> 00:10:07,490 now a white color. 137 00:10:07,520 --> 00:10:12,060 I can make it yellow example or blue. 138 00:10:12,300 --> 00:10:18,780 So as you can see I can add styling the SPSS to elements that are created in each team out. 139 00:10:18,820 --> 00:10:26,520 Now why a boot strap is so valuable is because it allows you to apply default styling to each female 140 00:10:26,630 --> 00:10:27,610 elements. 141 00:10:27,780 --> 00:10:35,880 So instead of having to put styling in CFS we can do that with bootstrap in each GMO by importing bootstrap 142 00:10:36,300 --> 00:10:43,170 with some lines of calling the bootstrap script tags. 143 00:10:43,350 --> 00:10:50,330 So by calling bootstrap into our file we can then use bootstrap which contains its own styling that 144 00:10:50,340 --> 00:11:01,170 we can call using classes we can call the bootstrap class of P two and this is what's known as a bootstrap 145 00:11:01,170 --> 00:11:10,320 class and instead of having to style elements ourselves in CFS with bootstrap it will style it for us 146 00:11:10,410 --> 00:11:12,330 using Bootstrap classes. 147 00:11:12,450 --> 00:11:16,890 Right now there are no changes being made because we have to import bootstrap which we'll be doing shortly 148 00:11:17,700 --> 00:11:22,560 but the general idea is that bootstrap will allow you to style elements using its classes which are 149 00:11:22,560 --> 00:11:30,100 extremely efficient and time time saving as well as visually appealing et cetera. 150 00:11:30,270 --> 00:11:35,770 Not only in terms of the visuals but CSX will help you lay out your page bootstraps. 151 00:11:35,830 --> 00:11:41,520 Yes that is because typically when building the layout of a page you would have to add CSF styling on 152 00:11:41,520 --> 00:11:44,160 each element to put it exactly where you want it to be. 153 00:11:44,190 --> 00:11:50,750 And this can get quite messy because elements are dependent on other elements. 154 00:11:50,790 --> 00:11:57,960 So if the tail is here and a paragraph is down here where it is places dependent on others and sometimes 155 00:11:57,960 --> 00:11:58,870 it's not. 156 00:11:58,890 --> 00:12:05,220 And so with bootstrap it makes laying out your page much more convenient as well and efficient. 157 00:12:05,220 --> 00:12:09,960 So we're gonna be looking at all of what bootstrap can provide and there's actually quite a bit that 158 00:12:09,960 --> 00:12:10,640 it can do. 159 00:12:11,460 --> 00:12:16,830 So we're going to be looking at the core features of a bootstrap can provide and get you up and running 160 00:12:16,830 --> 00:12:22,770 with your first projects and then this way you can build more complex projects as time goes on as you 161 00:12:22,770 --> 00:12:25,210 build upon your knowledge. 162 00:12:25,230 --> 00:12:29,100 So thank you all for watching and we will see you in the next lecture.