Build a Responsive SinglePage Website from Scratch Bootstrap | Laurence Svekis | Skillshare

Build a Responsive SinglePage Website from Scratch Bootstrap

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 20m)
    • 1. Course intro

      2:21
    • 2. 1 Course introduction

      2:05
    • 3. 2 Course Resources

      4:52
    • 4. 6 Website Structure

      7:05
    • 5. 8 Add styling to sections

      4:59
    • 6. 9 Building a navigation menu

      7:27
    • 7. 10 Navbar with Bootstrap easy

      2:06
    • 8. 12 Adding Buttons to elements

      7:55
    • 9. 13 Rows cols images made responsive

      8:08
    • 10. 14 Contact form using Bootstrap for styling

      9:23
    • 11. 15 Add background images

      7:27
    • 12. 16 jQuery Scrolling Effect

      5:24
    • 13. 18 Adding modals

      7:11
    • 14. 19 Course Summary

      3:17

About This Class


Guide to learning how to create websites, using Bootstrap. Real world web design step by
step guide to HTML CSS design
Learn how to create your own website from scratch

Bootstrap is a free and open-source front-end web framework for designing websites and web
applications. Bootstrap enables you to create websites quickly using pre-built CSS styling
which you can apply to create the look and feel for your website. Coding website made easy
with Bootstrap. Best of all, its fully responsive.

This course will teach you how to get started creating websites. Everything is included!

Top resources and tools needed
How to build your page structure and make it ready for bootstrap styling
How Bootstrap works
Source Code is included
Why Bootstrap allows for rapid website design
real world examples of web design
and much more....
Start from scratch and create your own website. Single page information website that you can
use as a template.

Speed is important for web development and Bootstrap delivers. With Bootstrap it takes care
of many of those repetitive styling tasks and allows you to focus on making your site look
great!

I am here to help you learn web development and design. I'm ready to answer any questions
you may have.

Nothing to lose, there is a 100% Money Back if you don't like it

Want to know more, what are you waiting for take the first step. Join now to start learning
to create websites today.

Transcripts

1. Course intro: one page Squirreling websites aren't extremely popular and a great way to be able to present information to anyone. Benefits of one page websites. They're great for mobile. They encourage users to Seymour of your content visually appealing. There's no need for page refreshes. They're easy to set up. Engage visitors in a unique way, and they provide insurance information to users in a unique and easy to consume format. How to build a website from scratch. We're gonna include everything you need in order to get started. Create your own source code is already to go talk resources. Best links Talk tips for better Web design. A step by step process. Explain tools and resources so everything you need it. In order to start doing Web design and creating a website from scratch, start by creating a wire frame of the website. Draw up how you want the finished product look. Build the structure of the Web page using HTML. Full explanations of code and how it's being built are provided within this course. Create the HTML menu content area at basics of Web design. Explained using HTML semantic tags to create your website from scratch than styling has explained. Make your website come toe life by adding styling to your HTML structure. Attach external libraries for even mawr functionality with your CSS. Learn how to create and turn your HTML header into a quick, sticky hair styling. To transform your A Norden list into a content navigation. Learn about adding background setting old pasty sections and a whole lot more. Make your Web site responsive so that it will work across any platform across any device for multiple screen sizes. Resize the scroll page to see how sections work within Web design. Add interaction and dynamic effects to your website. Using J. Coury. Learn about adding event listeners and how you can move the screen position and a whole lot more. By the end of the course, you'll have the skills and know how to create your own Web site from scratch. I'm here to help you learn how to create your own Web projects and ready to answer any questions you may have Want to know more. What are you waiting for? Take the first step, joined now and start learning how you too can create dynamic and interactive web projects. Today 2. 1 Course introduction: Hi. Welcome to building a responsive website. Using boots drop within this course, we're gonna build out a website from scratch. My name is Lawrence. I'm gonna be your instructor for this course. I come to you with over 15 years of Web development experience and one of my favorite things boot developing websites is ability to use some really amazing nice, cool features and especially functionality that's available within bootstrap boots. Drop really does make it easy to develop websites from scratch. And I'm gonna be introducing you to how to build a website from scratch utilizing boots drop. So over here is the website that we're gonna be building and we can see here that we've got a basic website with, So we've got a splash page introductory page we can quickly link over toe about section. We've got a home section and this is a one page scrolling website and you can see when I'm clicking any one of these navigation buttons. It's actually scrolling the website content and this is the effect that we're going for within our Web project in order to have a really nice effect and the really anything about this type of website is. It's fully responsive. So you see here, even when I just the size of the available screen, the website is responsive and the content presents itself in a mice readable fashion were even though, look out, adding and mortals, we're gonna look at how we can create contact forms and so on, so all of this is going to be included within the course. I've also included the course source code. So all the source code that we're going to be looking at, as well as some of the top resources and links to some of the some really useful tools that are available online in order to build websites. So all of this, and a whole lot more so when you're ready, let's start building our bootstrap website from scratch. 3. 2 Course Resources: in this course, we're going to be building a single page responsive website from scratch. So some of the tools that are going to be using within this course and that you're welcome to utilize as well, if you're looking for a new editor or if you're looking for different tools on the Web in order to create websites. So I'm gonna quickly run through some of the tools I'm gonna be using within the course. So let's open up our browser and the browser that I'm gonna be using. I'm gonna be using chrome. And one of the things that really like about Crume is that it has this ability to have thes Dev tools. And Deb do is allow us to have more information essentially about what's happening with on the website. So I've got my source code here. I've got my console where I can communicate. Some JavaScript communications back and forth have got sources that I'm linking out to have got some network information and so on says a lot of really good stuff in here. And one of the other things that are really like about this is that I'm able toggle different devices, so I'm able to see what a website will look like in an iPhone six iPhone five. And I've got various other options here a choose from as well as being able to adjust the size and even the rotation so I could literally simulate a mobile device and really get a good feel and look about how my website is gonna look like s O. This is all available within chrome. And as you can see here, we've got some CSS styling here. So we've got the styles, so it computes out for the body. And if I do have some elements in there, it'll do the box model effect here where we've got the content patting border and margin and so on. This is a lot of really good information here, as was computed event listeners. There's the dawn break points and then there's the overall properties of that particular element. So I'm gonna shut that down for now. But we are gonna be looking out and referring to it within the course. And if you're using another browser, then you won't have accidents. The same tools that we're gonna be looking through, its another resource that I'm gonna be using is my editor and the editor that I'm gonna be using in this course is brackets and brackets is an adobe product. It's a free, open source text editor. It's got a lot of really neat features in it and just gonna quickly run over some of the really nice features that I'm also gonna be using within the course. So one of the features that I'm gonna be using is this life preview. So we've got availability of doing a live preview, and when we click that button, we open up a live preview. And basically what a live preview does is it allows us to see whatever changes were making within our editor assumes received them. Then we can see them within our preview area here, and it said sometimes it actually does even updates. So I'm not sure why it's not updating, So there's apparently a linkage problem, so I probably have to restart brackets, But we are gonna be using this within this course as well, just to see life previews of what we're updating within the editor. So it's gonna be another resource that we're gonna be using, and also we'll be designing the website using bootstrap. So what? Bootstrap is its front and framework, and it allows us essentially to build our HTML structure in a way that we can easily apply styling to it. And in the next lesson, I'm going to run through all the different basics of bootstrap so you can get a better understanding of what we're gonna be doing within the course and how we're gonna be plying bootstrap. And the thing about boots stop is, once you start using it, you're really gonna enjoy using it because it's going to give you the ability to build, to build really quickly. And once you get used to all the different classes that are available, it really makes website development quicker and easier and all it isjust adding in various classes. And it's also got a JavaScript library that comes with that. It's a very useful resource toe have, and we're gonna be utilizing it within this course on swell. And another resource which we're going to be starting off with is we're gonna plan out what we want our website toe look like. So we're going to be using wire frame dot cc to quickly sketch out what we want our website toe look like. And essentially, this is just a quick wire framing tool. And usually when I'm creating a website project, I kind of like to have a rough idea of what I'm developing and how I want it to look like s . So this is where I'm gonna be using wire frame CC. So the next lesson I'm gonna run through Bootstrap, and I'm going to give you a quick overview off what? Bootstrap is how it's used. And then we're gonna progress into building out a website from scratch and building bet out , utilizing boots, drops. So that's all coming up in the next set of lessons. 4. 6 Website Structure: Currently, we have our basic bootstrap layouts. We've got our HTML tags opening, closing head tags opening and closing. We're linking out to the bootstrap cdn. They're pulling in that boots drop CSS library into our Web project were also linking out Teoh J Query and pulling in the bootstrap J. Corey Library into into our project. So now we can utilize thes within our build of our Web site. It's also going to create a separate link and link it to a style sheet. Eso We're just gonna have another style sheet fear where we're gonna add additional styling for a Web project, and this is God's gonna link over to a CSS file, so style dot CSS. So I'm gonna just link that one, and I've got that one open down here at the bottom. So this one's blank right now as well, and it looks like we are ready to start building out our project. So first thing that we want to do is we want to create our navigation bar, and then I underneath the navigation bar. That's what we want to add in our content. The navigation bar within bootstrap. So bootstrap gives you the really nice ability to create these navigation bars. And I a lot of the built in functionality where re sizes whenever the screen is small, this is already built in and boots drops. This makes it really nice and easy to create these s So let's start by building out our navigation bars, we're gonna put it into a knave and then we're gonna add in a bunch of boots struck classes . So the 1st 1 we're gonna add in is nav bar and we're gonna do now far. It should be one. So it's always that one word and then the dash and default because we want to use the Nath Bharti default and we want to fix the knave bar at the top. So we do now bar fixed dash talk and notice here with bootstrap, all the different classes. Everything is kind of broken down here that we have what we're applying, and then we've got our default nav bar, and then we have the ability to bring it to the top and fix it at the top. Eso. Besides that, we also want to add in ah header. So this would be when the user comes in, opens up our web page and then we're gonna have some main content in there and within here is where I'm going to specify the containers. So I'm going to do div class and I'm just going to give it a class of container. And remember, again, we have the two options. When we create containers, we had the ability to do a container that is fluid or a fixed with container. So container itself is just fixed with and I want to do the same thing for the knave bar. So we have the contents of the naff bar out of fixed with and I want to build out entirely out of my website fixed with. So I'm gonna just add in some sections now and the sections are gonna be floor because we're building out a one page website. So we need to apply different sections in order to contain that content and then within the section itself, we can do the div container eso We could also do this on the outside, which would provide us a slightly different effect. But for now, I want to keep it on the inside because I want that container size to be sitting on the inside, but I want the section to take up that whole available space. And what I'm gonna do now is I'm actually going to duplicate this so we don't have any content in our in our HTML quite yet, but I am going to be adding that in. And lastly, one of the thing that I did want to set up is I want to set up a footer. Eso This gives us the ability to place some footer content now again with the container, you could do it on the outside of all of these, and that would work just fine. Us? Well, it So it's a prep reference the way that you want to develop it. But for now, I want to have get, have the ability to. If I want to stretch out my nav bar across entirely, I could just change this toe fluid and so on. So I have ability to control each and every section of my HTML page, and I can contain it and can control it separately. So in case I want to make some updates later on, and I want to have things presented in different ways that I can really easily do that, what they're having to add in extra elements into my Web page and also down here at the bottom. So there's one of the things that I did want to add in, and I'm just gonna comment it for now because we are going to return to this. And this is where I want to place my motile because I do want to demonstrate adding an immortal within this course song out in that motel course here at the bottom, and this is gonna be again another def. And then this is all styled with with bootstrap. So that's just our placeholder for our mortal. So right now we've got our basic website layout, so we're gonna have 123 So maybe we're gonna have actually more than three sections. So maybe we'll have four sections. Will do are typical home page will do in abouts maybe some products or something like that , and then a contact area. And this is gonna be our for main sections. Eso I do want a link to them via anchor. So I want to set my I ds for all these different sections as well in order for to give me the ability to be able to click a link and link to it. So I'm gonna set those up right Now s the 1st 1 is gonna have a ni de off home. 2nd 1 is gonna have an idea of about the most websites you're gonna find that there's home about. Definitely. Don't forget that. Contact one and then depending on what we're doing. So maybe we've got some products or services, whatever. We want the user to come in by and then this is just contact. And these, of course, could be named whatever you want them to be named eso in preparation for setting up our website, There's a few other things they're gonna have to add in and as well, we're gonna have to do a little bit of styling. Teoh, create our website and produce it in a way that it's gonna be ready to be a one page website and that's gonna be coming up in the next lesson. 5. 8 Add styling to sections: in this lesson, I would take a few steps back and pop over to wire frame cc. So never dividing a website it's always a good idea to have a quick run through of how you want to present your website in your content. So essentially, what I want to do is I won't have the navigation bar here at the top, and I wanna have maybe some company information. So put that at the top, have maybe some company information there have our navigation, so this could be where our navigation menu is going to sit. Bring that up to the top there. So this is our navigation menu, and right now I'm just designing the way it's gonna look on on a regular desktop. And, of course, whenever we shrink it down to Mobile because we're using bootstrap, it's gonna automatically shrink this menu down into that clickable icons type menu and then just below. Here's where all of that content is gonna go. And because we're building a one page website, we want to make sure that we're utilizing that full available height that's available to us . So the minimum height of each Web page is going to be that entire height that's available to us because we want to be able to click and have it automatically scroll. And this is where it's always a good idea to have those set heights and widths, and it's gonna work really well on mobile as well. So let's go back into our source code now that we've got a basic idea of what we're building and this is gonna be a really basic website, really straightforward. There's not a whole lot involved in this website. We've got our menu here at the top and then the content, and then we're gonna have the four content areas. So let's jump back in, and we already set up the structure for that eso Let's add in our section contents, and I'm going to create a brand new class for this, which means that I need to add these classes into my sections. So wherever I have an actual section, this is going on. Apply the class to so do class in a class in another class and another class of sections. So these air not boots, drop classes, thes air ones having to be creating right now. So let's open up style dot CSS and let's select section and then apply some styling. So wanna have it as a minimum height of 1000 picks. I want to set my over flow Teoh Hidden eso. This will hide any content that's hanging off of my available visual real estate that I have for my page and we're gonna do position relative, and we're gonna add in some parting at the talk of each section. So maybe 80 picks or something like that. And also let's pop down and do one more thing with the sections so that we can actually see the difference between the sections. Because right now we don't have any content in there yet, so it's just gonna look like a plain white page. So I'm gonna do a suitable style. So that's the end child. And let's do on even Children. We're gonna set a background. I will do background color. So let's do some alternating background colors and for now, maybe just leave it on a great scale. So it's a quick tip. When you're developing websites, it's usually easier to go with gray scale and then add in your colors and styling afterwards, so Now we've got our sections, so it doesn't look like much, But we can still scroll down and you'll see as we scroll down, we can actually identify the different sections. That's why I want to add in that that coloring of the different sections so we can actually distinguish between them. And we already have our bootstrap menu set up there and notice that it is sticky at the top , and that's exactly what we wanted. So the next lesson, let's check out even more of what we can do within bootstrap and continue to build out all of our website in order to s we're gonna build out our bootstrap, single page website, and in the next lesson, we're gonna look at building out the NAB R. So it's coming up. 6. 9 Building a navigation menu: in this lesson, We're gonna build out our navigation bar, and one of the things that I want to do is linked to Font Awesome. So fought awesome. Gives us a library of a whole bunch of really nice usable icons and they've got a really nice one. So we've got 634 icons on no Java scriptures required and death stopped friendly. So it gives you access. Teoh, really bring out some really nice icons. Got some icons here listed, and all you have to do is select it and you can just link out to it. They tell you how to link out to it. So the one that we're gonna be using is I believe it's just called the bars. So this is something that you would typically see when your website resize is and this is what I want to bring into our project. So let's go back up a little bit here and add and fought Awesome. So again, a cdn for foreign tossem Bring that in and that's going to give us the ability Teoh utilize the FAA fond awesome bars. It's always really useful toe have thes within your Web projects as well because it gives you this really neat ability to be able to add in all of these different icons and users love icons, so it gives you the ability to add the's in really easily. So let's jump back into our HTML code and build out this navigation bar. So over here. So we've got a class to contain that, and I want to build in another class here. So this class here is gonna be for the nav bar header. And this is where you would place your actual branding information and so on for your website. Let's do this now. So now for class equals So it's now for and seem format and header. So we've got our now bar header and now let's add in a button. And then the contents of this button are gonna be where we have our our icon here for the mini menu that pop up menu. So give it a type of button. Class is gonna be love bar toggles. So this is going to allow us to toggle the naff bar, uh, data toggle. And this is what we want toe happen. And these are this is all information that's getting picked up and utilized with bootstrap . And then lastly, we need to do a data target, and this allows us to specify where our target is and what we want to to collapse. So here, we just would have are talk. Now, bars. This is just a target that I'm gonna make up, and I'm gonna do it as an I d. So you can apply that hash there and then decided we can also add in maybe another span or something like that. And then this would be so This is where we would have our branding. So have bar brand. And this is where we place maybe our company name or something like that. A lot of times this might be a hyper Linkous. Well, so might want a link out. Tears. It's in the main home page. So again, depending on how you want to present this content, let's build out our navigation bar. So let's make sure that we're not within that knave bar header there and create another def . So, yes, with bootstrap, you're going to see a lot of dips, and I'm gonna do on a Nord Erred list and I'm gonna have a bunch of list items. Eso these list items, they're gonna have anchor text and they're gonna have hte refs, and they're gonna link to the various sections. So various ideas. So you're the 1st 1 can link to home and so on so it can build those out on home, save that and create a bunch of list items here. So I believe our next one is a boat, and I just couldn't put a boat there within the anchor eso this waas products. And then lastly, we had contact. So make sure that you're anchoring to the actual ideas that you used. Otherwise this won't actually work. So contact and let's take a look at this now. And of course, we still need to add something in here, so maybe we'll do that first. So this is gonna be a class and it's gonna be collapse, and it's gonna be love for collapse. So we know that what characteristics this particular element should have. And then we just need to specify the i d. So over here we called it talk now far. So let's do the same and link it together when we pop out to our website and maybe what's go? Teoh resize this one and we'll just see that are now Bar is working now. We still need to do a little bit of adjustments here to the styling, of course. But for now, we see that we do get this icon menu. We get the products so everything shows up right on mobile. But we still need to make some adjustments here, Teoh, get these ones to show operate within the navigation. So I'm going to do that and finish that off on the next lesson. But this was just to simply illustrate that this is how where this is, how we can create our navigation menu and actually should fix these because these are linking to the I DS. So I need to place those hashes in front. So let me quickly refresh this. And now we can see that we're actually linking Teoh the actual different sections s Oh, this is just plain html. What allows us to link out to these on click those and then move to the the selected anchor that we're clicking Teoh and we see that the u. R. I is also changing so we're doing hash products, so it automatically brings you down to the product area. So the next lesson we're gonna finish off fixing up this navigation menu to actually make it look like a mace presentable navigation menus that's coming up. 7. 10 Navbar with Bootstrap easy: So in this lesson, I want to fix up, finish off fixing up the navigation bar. So one of the things that was left over here is that we need to specify classes here for the UN ordered list. And this is all again built into bootstrap and allows us to specify that this is a knave. And again, remember that nav bar that it's a knob are now. So let's now go back out to our Web page and when we refresh it and we make it big. So now we've got arm or typical type navigation bar that we might be expecting when we're developing our websites, and this is one of the really need things. But bootstrap is that it really does allow you to do this. And it's super easy to apply this eso one more class that we can apply and we can do now far right which will actually pull the navigation bar over to the right hand side. So when I refresh that now, our navigation bars over to the right hand side. When we re size it, we see we get this nice, neat menu and everything is presented as we want it where we would be expecting it to be presented. Using bootstrap. I want to quickly pop over to here to tell you some of the different examples that are available for now. Bars. So this is from get bootstrap examples. Eso we've got our default. Now far, we've got static top. So this is the type that where we're using actually fixed top because we want to make sure it stays at the top. You do have the option to add and drop downs and multiple options here within the menu. And just like with any other bootstrap, it's all mobile friendly. So we get presented with this. We've gotta drop down. So everything's working. So you do have quite a few options here in bootstrap in order to present your navigation bar menu. So in the next lesson, we're gonna update some of our html and then continue to add in styling in order to create our one page scrolling website. So it's all coming up 8. 12 Adding Buttons to elements: in this lesson. I want to build out our header information. So we've got already a container here and I'm gonna add in another def. So Yes, again. There's quite a lot of dibs here with Bootstrap, but essentially, this is how we design with boots drop, we utilize all these different elements that contain the classes, and this gives us the ability to add that styling. And as we build our website, So I'm going to use something called a Jumbotron and Jumbotron in boots drop. So once I save that, it's still updating their. But once I save this information, we can actually present it as a Jumbotron, and I need to add some information here. So first of all, let's add in welcome to my website. So I know we're designing your website. Probably get something a little bit better than that. But so we need to also move this down because we gotta think when we're applying our head area. So maybe we can even give this the same class as a section. So I've got welcome, Teoh, Welcome to my website. And then also I wanted to add in some content here, so maybe a little bit of a blurb about the website. Eso We're gonna do this? We're going to utilize a website called dummy text. It's blind text generator we're going to display with the paragraph tags. Don't wanna have this much. Maybe I want to have 20 paragraphs. Actually, no, we only want to have one paragraph and maybe 75 words. Or maybe a lot less than that. So let's select that. All coffee to the clipboard. Open up our editor here and place that in there. So this will actually give us some text here. So welcome to our website. And we've got some text here to look at and this should actually be jumbotron, so it actually stands out. So you see that we get this nicely presented really nice looking text and hit Nice look and feel to it. And one other thing I'm gonna add in, so maybe I can add in another. So after this paragraph, start another paragraph. And then here is where I'm gonna add in a button and buttons with bootstrap. Really easy to dio. So it doesn't necessarily even need to be Ah, hyperlink. We can do something. So what? I'm gonna do is just to learn more. And then maybe this can link over to h. Ref can go to that a boat section again and then so to turn. So what? I saved this. So let's see what this looks like. So it's just a regular but a regular hyperlink to watch how, when we can transform it into a button and with bootstrap, we can select the different class for buttons we could do primary. You can see it is changing here on the right hand side. So warning, uh, we've got a default just gonna be white. So we've got a number of options to create buttons. Eso Usually I like to use the primary one so it automatically picks a color for us and a little bit more about the colors in bootstrap site. They have some examples here of the buttons, and I usually like to go to these button generators. There's one really nice one here. Plug Goal Labs, Twitter Bootstrap button generator. It's got all the information you need to be able to utilised boots. Drop eso bootstrap, but in general bootstrap three button generator, we have the ability to do small mart large many, so they've got a preview there. We can change into a button link and input doesn't really matter what, what type of element. We can apply these classes and these styles to anyone. And we've got our default options here for button colors. So the one that we looked at primary there's info, their success warning, and that it does is it just changed the DTN dosh. And then this is where it specifies the different colors of the buttons we've got button states that we can do. We can also do a full with button. If we wanted to do, we can add in an icon weaken position that left or right So that's the icons. It's a lot of different options here with bootstrap, and the icon is just added in as a span because we've added in front awesome. We're probably better off just picking some of the font awesome icons if you wanna have that within our our Web project, So I'm just trying to find one here that might be a pretty good one. So maybe if we want to have a check box or something like that. So let's add that in as an icon, and we can give some information here that if we wanted to pull it icon, position, right or icon position left. We can see what's changing over here that all it's doing. It's repositioning where it out puts. It s own either out putting in front or after the text. So let's go back out into our example. And now that we've got this icon the check box so we could do the same thing, we could move it in front or behind. And right now when we click it, which we're eventually gonna change this to to go to our our motile. But for now, when we click it, it's going to the about me section. So let's try adding in some information here within these sections, eso I'm gonna do some each do H two tags because this is gonna be a one page website. I don't want to overwhelm with a lot of H one tags on. This is why I'm using H two tags so that I don't have a Siris of h one tags because we don't want to, you know, over utilize h one tags and because we're keeping everything on the same page. This is not normal practice where you'd start with h two. So maybe the H one, we would. We've already got her each one there. So we've got in each one and we've got a bunch of h twos. So let's save that now And now we can see when we load our web page, this one starting at about because that hashes there. But we've got an option to go through the menus. We can go to the different products. We can go to the home and so on. So close that menu bar and we can see that we're able to navigate to any one of the pages, go back to the home. And we also have the ability to have this intro here, which is a nice way to present some additional content. Maybe when the first time the users coming into the Web page and you don't really necessarily need them to see it all the time and maybe not even the home page. So again, depending on how you want it layout and structure your website. So the next lesson we're gonna look at some other ways of presenting some content here within bootstrap and really build it. Some of these sections and again a lot of it is based within HTML, and all we're doing is linking over to the classes. So we're utilizing a lot of the default classes that are veiled within boots drop. 9. 13 Rows cols images made responsive: the bootstrap is a Siri's off rows and columns. Essentially, that's how we look at it when we're building out threes in the grid system. So you take a look at products and maybe we have a Siris of products that we want output, and we want to put them really nicely within our Web page. So first thing that I want to do is you guessed it create another def, and this def is going to specify are different columns. So actually, we're going to start out with a role here. So this div is going to be contained the role information So this could be utilized as may be the first roll or something like that and what's being presented. Eso this role is, and every row needs toe have another element nested within. And then these elements are going to specify the number of columns because obviously we can't do role in columns within that same class because we're using classes, and this is why we got to create another element. So maybe let's start out with our being row and this one, it's actually it's not really gonna matter, because it's gonna be 12 all the way across. So even when it shrinks down below that 12 I still want to output products within a separate role within its separate. If so, this isn't really gonna matter where we're utilizing this within bootstrap and underneath the role. So I wanna have another role here. And this is where it's going to get interesting because I want to present some products with some product information, maybe some pictures and so on. So I need to think about where I want to set my break points, whether I want to have the products on an X M or SM. So let's try it and break it down on the S m. So this will be and in here will have some information. So maybe we'll have product one or something like that and maybe even a hyperlink to the product as well. Eso let's first of all, it's create. So maybe if we had that hyperlink. So right now, I don't have a hyperlink toe link to for a product, So I'm going to just leave a placeholder. There s oh, just have that hash. So it's not actually going to do anything to change pages and let's jump back in and grab some images is the one thing that is really neat with images. It's always a great thing to present images within your Web pages. And so I'm gonna have Siris of images. Eso image I AMG source. Please hold it. So it's gonna be 3 50 by 1 50 remember that we want to make it able to resize. And then over here, I'm going to just add in some information. So here you could add in costs and so on. So one of So let's quickly take a look at how this looks within our websites would go down to products. We've got that one image there, and when we re size it, we see that the image stays at 3 50 So even though our columns air changing are images actually aren't. And this is where Bootstrap again comes to the rescue because they've got a class for that and we have the ability change and make our image responsive. So let's add that in and refresh it and now we can see that the image actually re sizes so it takes up eso it goes to its max, but when it shrinks down below the available space than it allows us to continue to shrink it down. So if we have something where we had a really nice big image, let's make this much bigger and we can see that it allocates that full with. But because we're breaking past that break point of the grid of SM, it's only gonna take up the available space. So no matter how big we get, we're still got a two column system here where we can see that we've got two columns being output with two separate products. So as we resize them, the images get bigger and up to 6 50 But when we shrink them down, this is where the magic of bootstrap takes place is because it allows us to make Slee stack these products as needed. And I just popped over to the bootstrap website, so get bootstrap dot com CSS images and we can see that we can apply the class image responsive to make it responsive. But notice here there's some other really interesting options so we can make I am G, and we can turn them into circles if we want, which is a nice effect tohave if you're looking for such types of effects. So let's let's refresh this first and now we can see that our images are circle shape and so on. So it's quite a lot that you can do and it's all built in within bootstrap and ready to go . And if you're thinking OK, well, what if we did? What if we had four products we want to highlight? Well, so that's fine. We can just add in another role and we can see how easily boots drop accommodates this. Or if we wanted to, we could even remove that second roll. So we actually pulling these thes images dynamically. We didn't really actually know how many we had we could just use. That s that call at some six and we see that it no matter what, it's still nicely stacks. But even if we end up with on odd number, so maybe we had five images, we can see that it's still nicely stacked and it looks really nice and presentable. And when we shrink it down, we see that bootstrap takes care of where we're placing the order of these images, so really nice effects that are available within bootstrap. And this is what I meant by bootstrap really handles a lot of this, uh, the styling that we would have to do normally when it can't comes to CSS when we'd have to allocate and take care of what's gonna happen with this next role, it's automatically taking care of my bootstrap. So if you know how many items you have, you can really nicely neatly do it with the rose. But if you don't know that, that's okay, too, because bootstrap can handle it with just the columns. And we can really easily adjust these column widths Teoh be output as we need it. So maybe if we had a bunch of smaller images, So on a small screen, we need half of this, the page with but on a larger screen, we maybe only need 1/3 so we could add in call the LG And for here maybe we could only take 1/3 of page. So I'm gonna just add those and and just show you how this is gonna present us. Well, it's kind of good, cause we do have that odd one there as well. So we see that once we get really big. We're allocating the rate, the right sizing for each image. This that I did make him a steak. On this. It's on equal sign. It's the dash because we gotta specify column dash allergy. That's probably why it's not working right, So it's Refresh that, and that one didn't turn out radio so and refresh it. We do have the four column for the super large size, and we have the two column for the medium size, and we have the one column for for the smallest size page, size and all nicely, neatly presented and responsive. 10. 14 Contact form using Bootstrap for styling: in this lesson, We're gonna build out a contact form within bootstrap. So I already have a layout for a bunch of products here. And we also have maybe the about section here. So we're going to do the same thing that we did in the products section for the boat. Me and we're gonna output. So we're gonna update this and change this to about so that's better structured for boots drop. And then we've gotta have a bunch of information about the user. So let's just quickly fill that out, and then we can get to the actual contact form. So maybe there's a bunch of paragraphs here and some additional text. So select coffee to clipboard and let's bring that into the boat. Me? You shouldn't put paragraphs within paragraphs there. So now when we go out to our default site, I refresh it. So if I go up to a boat, I do have some content there that's being presented. I've got my home, I've got my introduction. So maybe we can also form out this and present it a little bit better using bootstrapped as well. Bootstrap. They have panels and wells, but they've actually moved some of that out. Eso Maybe what we need to do is actually be more specific about this content here so we can deploy our own styling here. So I'm gonna just select a boat and I'm gonna select any paragraphs that Aaron with the boat add in some padding there so that just so it presents a little bit better there. So refresh that. So now we've got some padding on, maybe even about that whole section that we want to have some padding around it as well as we've got pouting at the top and maybe wanna have Harding eso padding. I do 10 picks all the way around. So let's see how this looks. So now we've got our patting, but we need to add in some padding at the top, a swell. So maybe we need to actually specify that we want to do 10 picks a et picks. We wanted to maybe 10 like that, and the bottom zero picks. You get rid of that padding clumps will do the shortcut for the padding. So we end up with the top and the left and the right each having 10 that brings that text in a little bit better over to the form and on their website Get bootstrapped. They have a really nice formatted form. We can see here that we open up in clothes form and we've got a form group. So this gives us the ability Teoh group content together nicely. Present it. We can also do in line forms so different form classes that are available. So this type of stuff is good for log in and so on, so we can do a typical horizontal form as well. So let's let's start by building out. I'm a typical horizontal form and maybe this could be a contact here, so we're gonna have to update some of this to first name, last name the Fields. So I'm gonna just simply take out that form horizontal go down to our form section or the contacts section, and actually should form at this the same way that we did this over here us that were consistent with their form formatting of her boots drop so this container here would have the contents so row and that would be contact. And then we would create another role here. So I got a out in a dip. And then within here is where we can specify our class. So you need to add in. You guessed it another div. And this is where we would specify what we want to look like. So maybe we wanted to be six across, so saving that and now we can add in our form. So this is where our form would set s open and closing. And this form is gonna use class form or Zon tal. And then from here we can build out the rest of the form information eso you can see here that each one is grouped within a class here. So we've got these form groups. So these give us the ability to create different form groups. And then each form group has a label and then another div that holds that input So on. This is where we could have our input group and so on. So maybe what I'm gonna do Just to save time, I can copy that eight and save that and then I can update this form information Eso We've got our form group. We're gonna label it so it classes call spent two. So do first name, and then this class is gonna be 10 so we can see that it's gonna have a first name with the label, and then the next column is gonna be the longer one that's gonna be having our input form. So this is gonna be type. So this is just gonna be regular text, class, control, form, control and the I D that we're gonna use here is gonna be the same as the label first name and placeholder. And so maybe we just do 12 all the way across a swell. So each and every field I know it looks like there's quite a lot of information here, but again, this is that bootstrap structuring where we like to keep things as consistent as possible. And it does unfortunately turn out to be a lot of dibs and spans that we get need to use. But this is just the way it is with boots. Drop in when you're defining with your HTML. We noticed that there hasn't been a lot of CSS that we've had to do, and that's because a lot of it has already handled within boots draft. So we see that now we've got our contact. And so there's different ways to lay this out as well. Eso depending on how we want to present it. So maybe we wanna have some additional fields. So maybe we do even want to have on email field. So maybe I can contact coffee this one out and have email and so on. So go back out to our form and then last night. We just need to have a button and notice how this is being presented here that we've got a column c o l. So the column sm too. So that means that when we shrink it all the way down that these columns because they're not access, they're not extra small that they actually do stock on that small screen size. So it again, it gets really nicely presented for the user. We're still missing one last thing within the form. So every form actually needs a button and notice here that we're we're keeping it out of the default us. We're not applying that form group eso again. This is again depending on how you want to present your content. But we can simply add in that button and type equals so is the submit button and class. So do you remember how we do the buttons in boots? Drop How? Weaken style. Something to make it look like a bootstrap button. Eso just do that bt end and then we can have some BT and styling additional styling. So this will just be submit and save that. And now we can go back out to our project and take a look at that. And this is our contact form. So when whoever we press contact, you see that where represent were presented with the contact form on goto products we've got a products about, we've got her about home. So this is where we can have some additional information and then this part just links to about section. So in the home, we're gonna be finishing that up in the next lesson and then adding in some additional options to make the website more user friendly. So that's all coming up in the next set, a lesson 11. 15 Add background images: So for the home section, we're gonna add something a little bit different. So because we have the ability to identify each and every one of the sections, we can treat them differently. So let's go down here. And as we saw within the boat, were able to add in some padding. So this home we're actually going to do something a little bit different where I'm going to set a nice big background we're gonna use place, hold it and we're set background for the entire section. So background, you are l. And the girl is going to http. So this is the same as that placeholder image that we used before. So place old I t. And then all we need to do is specify or with we're going to do a full massive with image. We're gonna make it no repeat center it, center it and have it fixed and set the background size. So this is we have to set separately when I said it as cover. And then let's jump over into our home section and this is where we're gonna be more specific. So just like what we did over here, let's update it with that div that surrounds that. So save that s And now we've got a home there and maybe in here we've got a paragraph. So here we want to specify some kind of content or something that has to do with the Web page. Eso I'm gonna bring the paragraph downs, so maybe select all copy it to clipboard. Go back out here and add in that paragraph there. So let's take a look and see what our website looks like now. So now whenever we go to the website were presented with about the website we can quickly jumped to about and we also have this option for home and actually turned out to be the same color as those other ones. So maybe we'll do a quick update on this and change this toe odd so that we get a Nacer effect here with the actual image, you can see that the image is fixed, that it's actually not moving, and it creates this really neat scrolling effect as well. We can see that it's kind of like a parallax effect. We've got that image in the background and actually, probably if I use a better image going to get from Lauren Pixel, and it's going to give me a nicely presented Get a really nice, big, colorful image here and maybe do something where we've got a business or something like that color image and get that. Or maybe a grayscale might be better and copy, image address. Go back over to here since two, using the place hold, Let's see is Lauren pixel and see if the effect is different there so we can see that one other thing we do need to set. We need to set the actual so maybe we can set the diff inside of home and we can add in maybe some kind of gray scale color to it. And let's set the background color of the stives of background color. And we're gonna use RGB a so R g b A. And this is going to allow us to set Alphas. So maybe we can do to 55 0 comma zero and we'll set on ALF of 0.5. So see what this looks like. It's kind of a need effect there. Maybe that's a little bit to read and refresh that again. Now it's more of a yellow effect there. And as we can see, it's providing this really neat stuff really, really neat gives here and not actually kind of turned out to be a nice effect where I'm doing the div and I'm also applying it to dot dot Div s. Oh, if you only want to apply to the one, then we could actually specify that we're applying it to this call. So that was a nice need effect. But if we want to just be specific for that particular day, if we can do that as well and as well, we can add some additional potting around it to make the text stand out a little bit better . And there we go. So really, actually, like that, Dave effect kind of better because it gave us this really nice kind of double border eso. That's the one thing about CSS you really I sometimes kind of surprises you with what you get in the results. But here we see that we've added in this nice background and maybe want to add in a background to to the another section so we can do for the about section and let's go back out into Lauren Pixel and let's pick up a grayscale image for the city. So copy, image address and I will do the same thing there. So added. And that's a cover. So now about has some text home house, some text products and contact. Let's do one more thing here where we're going. Apply that same type of background effect to the boat, different as well, and there we go. So we have two different ways that the contents being presented because remember over here , uh, or over for about. We've already added in some styling to it. So that's why it's being represented slightly differently, because we do have some styling for the paragraphs. But you know, it's not bad to represent the content in different ways as we've got our products here and information about the product and so on. So actually, we don't see the differentiation now between products. So maybe with products to we want to have a different color as well for representing the backgrounds. Or maybe we want to just switch this back to even and see the products look like now. So now the products air back about the whole products and contact So there we go. So now we've got fully designed website and bootstrap, and in the next lesson, we're gonna show you how to add in some really neat effects into your Web page that's coming up. 12. 16 jQuery Scrolling Effect: in this lesson, I want to add in some geek worry in order to create some really nice scrolling effects. So with Jake worry, it's really easy to collect to create click events within various classes. So we already have it set up here that we've got a knave. We've got it list items under the thought nav class and they've got hyperlinks there. So now what we can do is we can select out all of these hyperlinks. So maybe we want to just take that now of class that we've got up here and attach a hyperlink. So we got a link to the bakery library cause we're bring it in with bootstrap anyway, and in order to access that particular element. So actually, this should be a dollar sign. We access it via knave list item and anchor text or anchor Elham anchor tag. And then we're gonna listen for a click. And then if there is a click, they were going to run this function. So even if you're not familiar with geek worry, there's really this is a really street for action and Jake worry Essentially, it's just a click event. It's passes over that event information within that event value here. So I don't actually believe we even need to use this. But let's just keep that in there. Just in case, because one other things here we've linked out Teoh Ah, hyperlink. And the first thing that I want to do is do a no event prevent default. And all this function is going to do is this is going to prevent that function of default function on clicks of anchor text to go to another page, so want to prevent that action. And I want to take care of this action using geek worry. So first thing I want to do is set up a target and we're gonna use this. So this is a value that contained or it's an object that contains all the different information of the element that actually triggered this event. So target is going to get that each ref value. So all it's going to do is pull back the value that's contained within H rough. Let's go back down to there. And now we need to figure out how far off the top that target is, and we're gonna set up another variable. So variables could be anything that we want them to be. Eso usually the naming convention should be something that just makes sense. Eso We're going to use this object value So target Because we do have that name that we're picking up from here. So if it's been clicked about, then the target value is gonna be a boat, and all we're gonna do is pass that into here and we're going to calculate that offset off the top and this is going to get us a value of where about is from the talk. And then this is where the magic happens with G query. So we've got HTML and we've got body. So these air, referring to the tags much like CSS, will refer to the tag that we don't have toe prefects it with anything. If it's an i d, then we prefects it with the hash. If it's a class, we prefects it with the period, so we're gonna do Anna meat and within animate, So get a bunch of parameters there. So one of them is called scroll top, and the position that were scrolling to the value is going to be contained within offset talk and then lastly, we need to give it a value here in milliseconds of how quickly it's gonna do the school. So let's check this out and see how this is gonna work. So now when I click it, you give it a second toe lord and we go into our main website. So we're going into local host and we see that when we click that link directly, we automatically go into there. But now when we click our navigation bar because we've attached this G query functionality , we get these really nice needs scrolling effects on her Web page. And we don't get that when we just click to that boat. Eso There's just different ways of presenting that content. And usually this is typical with one page websites where you have these kind of neat G quarry scrolling effects and just different effects. Teoh, make the website content s so that the user understands that there's a whole bunch of content there and they can scroll through it themselves to be able to see the different sections of the website. So that's how we add in the scrolling. We can also add in a motel somewhat we had talked to her earlier. So I gotta cover that off on the next lesson. How we can activate this motel. And that's a, uh, bootstrap built in functionality. And again, this is going to require J query. So we've already done some customized a query. The next one we're going to just use the built in bootstrap. 13. 18 Adding modals: So in this lesson, I want to show you how we can add in a motile so motives can be used within your website in various fashions. And again, these are gonna be fully responsive, fully capable of handling responsive, different sized screens and so on. And they're gonna be really easy to add into your website. So on the get bootstrap dot com, we have an example of a motile s. Oh, this is gonna be similar to what the navigation menu was that we do a data toggle. So it's gonna be motile we've got a data target. So this is where we target that motile div that's gonna actually launch. So maybe let's just copy this out and we'll go back into our Web page and figure out where maybe we want to add in a motel. Samo toes can contain various pieces of information. So maybe we wanna have additional information about that product and we could do something like product one and so on. So product one. So there we have our mortal all ready to go, and now we need to need to go down to here and actually create our motile. So it doesn't actually matter where the model is gonna sit because the mortal itself is gonna disappear and show as needed. Eso All we need to do is identify it, so I'm going to give it an I. D. That's gonna match with what? The idea that we linked it with and all of the styling and everything is going to be done via CSS. So it's gonna be motile, and we need to give it a rule much like he did with the navigation menu. So we need to specify what we want the rule of this particular element to be. And we want to specify that this rule is gonna be a dialogue. So it's just another word for the motile. And then within here is where we actually create our mortal content are modal dialog. So you guessed it. We got to create another def. So this div and we're going to give a class So everything with boots drop is a Siris of class names so motile and this is gonna be so mortal dialogue and were given a role, So give it a rule of document. So we need to specify these roles sometimes in order for it to better understand what the rule of the actual content will be. And then within here is you guessed it even more dips. So class and model. So everything is gonna be prefects with mortals have got our mortal content and within the content so we can actually break this down. So typically you have additional ones that class and we have our model header that is going to contain that head information for the motile. We've got ability to do a body. We've got ability to do so on. So just so you all these different ones here, so got body and you guessed it footer. So bloody and footer. And so maybe in the body Well, uh uh product one and then in the footer Usually we just have a close button. So I'm just gonna leave a placeholder for some buttons and let's check this out and see what this looks like. So divided into the contacts section or the product area. So there we go. That's all we need to do to add in the motel. And we should also have a way to close thes models down. Eso knows that you can click off of it to close it. But usually it is a good idea to add, instead of just buttons, their ad button type and equal out to button, and then give it a class to make it look like a button. So again, really made easy with bootstrap primary. And this is the important part of the button, and this provides us the button action because it allows us to close the motile. And then here we can specify various buttons or we can even use some of those forint. Awesome forints. Let's try this over again. So now we've got a close button and we can get some quick information about a product. Eso this one. Actually, it doesn't really fit well into the format of the products, so we might not want to use a button. But maybe we want to use a link or something like that so we can do that as well. It doesn't matter. Even I can change into a span. We can go back out, refresh it, and everything still works the same way. So it doesn't really matter how we're presenting it, and maybe I don't even want to present it as large, and I want to present it a small so that fits better within the rest of the content. And there we go. We can see that we've got, uh, usually when we're adding these types of things and we should even look, toe added into the various other items were more consistent about with the way things are, look and get presented. Maybe just really cut that down. Refresh that, and I just got in full, but it's still taking up a little bit more space than I'd like it to. And so, typically, when you're building this type of thing out, you might wanna have a different one for each one of available products. Or we can solve this with with styling as well, where we can add some styling to these paragraphs and give it a little bit more spacings. We could do something like a line height and achieve the same effect. So if I selected in styling products, call span sm six small and maybe we want to do something like paragraphs and we won't apply a line height of 52 it. So let's take a look at that, so it's already getting stacked a lot neater to see that we've got information about product and then some of them. If they have that info button, then they can find out more information. And it's not messing around with their stacking order. And everything still stacks really nicely as we originally attended. So tell you, add in mortals and again with bootstrap, there's just so many really cool things that you can add into your projects, and you can really add them and easily so a lot of nice functionality, which can get added and easily into your boot stop products. 14. 19 Course Summary: so just to finish up So we do have a fully functional, responsive website would come into the website and we refresh it. Were presented with are welcome screen. We've got our navigation up here at the top. We've got a couple options here, so we can immediately do learn more. So bring them to the about me section. So this could just as easily be a call to action or whatever you want for your initial landing page to look like eso here. We've got our home. So this could be again Be any type of information you want to present to the user about me eso about the company or about yourself products just different products and notice how thes are stocking properly. We included the motel Here s O. This is just some added functionality and eso It's really nice and neatly stacking. So even when we adjust it nice stacking and we've got our content section and everything that we need or contact section and everything that we need within bootstrap eso. I'm gonna include the source code as well. Uh, and I do encourage you to take a look around and check it out for yourself and see what really nice things you can make happen with bootstrap. I'm also gonna include all of the different resources that we've been looking through, and there's a wealth of information on the boots. Drop website. Eso Try out all these different JavaScript components. Remember again to include your G. Corey library and the JavaScript Bootstrap Library in order to be able to utilize thes. And that as well, includes motile eso. We do have the components here, so these air the typical components that are available in boots drop and we have our typical styling. So we had looked at forms. We had looked at buttons, images. There's quite a lot of nice code here and just different classes that you can add into and also feel free to add additional classes together so you could have multiple classes for one element and really see what can can be done with bootstrap and then also, you can add in some customized CSS customized G query in order to make your website have even more functionality. Eso we saw that we added in that scrolling part, so this is really nice for one page websites to provide that nice added feature that users air usually expecting to see when they're joining when they're viewing these one page websites that they're presented with all of the content that scrolls automatically and also with the backgrounds. It's really these nice, neat effect where you can have thes static images that don't move on. But they're in place and they can scroll down with the different sections. So that's again another really need effect that you can create, and especially if he's one page websites The's air really nice things that you can add in. And it's really easy to add in just with some customized styling, and you can select out any one of your sections and apply backgrounds within that same format that we did within the course.