How to Create a Website HTML CSS Bootstrap | Laurence Svekis | Skillshare

How to Create a Website HTML CSS Bootstrap

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (2h 5m)
    • 1. PromoVideo

      1:28
    • 2. 1 HTML CSS course introduction

      3:02
    • 3. 2 Course Resources to create a website from scratch

      7:33
    • 4. 4 Website Planning

      5:04
    • 5. 5 Building HTML page Structure

      10:40
    • 6. 6 adding Bootstrap to a website

      5:09
    • 7. 7 Adding placeholder content

      2:20
    • 8. 9 Adding Default Styling

      6:30
    • 9. 10 Update Logo Slogan section

      5:57
    • 10. 11 Create a Navbar with Active element

      7:07
    • 11. 12 Index Page welcome message

      9:29
    • 12. 14 Create a two column content area

      3:49
    • 13. 15 Create Footer Element

      2:27
    • 14. 16 Make it responsive

      3:34
    • 15. 17 Setting up font awesome

      4:27
    • 16. 18 Update navbar to be responsive

      4:05
    • 17. 19 JavaScript to Hide and Show Elements

      5:48
    • 18. 21 Create another responsive Navbar

      11:59
    • 19. 23 How to add Bootstrap JavaScript Library

      3:19
    • 20. 24 Add Bootstrap Menu NavBar

      8:45
    • 21. 25 Bootstrap Menu Navbar

      5:56
    • 22. 27 Create website pages

      4:33
    • 23. 28 Online Code Editor

      2:03

About This Class

Complete guide to learning how to build an HTML CSS website that is fully Responsive and ready for mobile devices

Learn how to build a modern fully responsive website from scratch!

Step by step training including everything you need to create a website from scratch.  By the end of this course you will have the resources and understanding to create websites adding CSS to HTML.  

Modern websites are ready for any size device including mobile phones, tablets, and desktops. This course will show you how to create websites that are modern and responsive.

This course has everything you need to start

  • including source code
  • top resources
  • step by step training
  • full HD videos
  • wire-frame and web design planning
  • full portfolio project from start to finish
  • how to add Bootstrap for rapid web development

Learn how to create website structure with HTML and prepare to add styling.   Use CSS to make your website come to life.  Then make it responsive!  

I'm here to help you learn how to make websites and ready to answer any questions you may have.  Discover the freedom of creating and styling websites from scratch.  Are you ready, let's begin learning how to make a website from scratch.

Transcripts

1. PromoVideo: learn how to build a modern, fully responsive website from scratch. My name is Lawrence, and I'm here to help you learn how to create websites from scratch. I've been a Web developer for over 16 years, and I'm really excited to have the opportunity to present this course within this course. We're gonna be building out a website, step by step, and I'm gonna show you how to use HTML, prepare your HTML structure and then add styling to make your website come to light. And then we're also gonna add in additional styling to make your website responses. This is a step by step training course. Everything is included that you need to know in order to create a website from scratch by then, this course you'll have the resources and understanding to create your own websites using HTML and CSS. Modern websites are ready for any size device, including mobile phones, tablets and desktops. This course will show you how to create websites that are modern and responsive. In this course, we've included source code. Talk resource is step by step training fully HD videos, how to set up a wire frame and web design planning. How to build this portfolio project from start to finish. Auto bootstrap, rapid Web development in a whole lot more. Discover the freedom of creating styling websites from scratch. Are you ready? Let's begin learning how to make a website from scratch. 2. 1 HTML CSS course introduction: hi and welcome to our introductory course on how to build a website from scratch. My name is Lawrence, and I'm gonna be your instructor for this course. And I'm so excited to have the opportunity to present this course to you. I come to you with over 16 years of Web development experience and one of my favorite things to do is to build websites. I really enjoy the aspect of being able to create HTML code and then add CSS styling and then, of course, JavaScript toe Add that additional functionality to your two websites. In this course, I'm gonna be presenting how to start with a basic design. So this is our basic design of our website, where we've got several sections of our website. We've got a desktop, you and a mobile view and how we want thes sections tow line up depending on the screen size. So this is what we're going to be starting with, and then we're going to create our HTML structure. So the HTML structure is gonna be prepared and ready to handle CSS. And as you can see here within this screenshot, we've got some of the structure that's available here where we're dividing it into different sections. And then those sections were going to use Teoh, apply styling to and actually move them around, depending on the screen site. So all of these different areas air going to be sectioned off in the HTML code, and we're going to apply styling to really make it come to life. And as you can see, this is an example of one of the websites that we're gonna be building within the course. You can see whenever we're re sizing, we see that the navigation menu resize is so it's a fully responsive, ready to go website and we can see that whenever we click, we get brand new pages. So the template is changing. We've got a different template for our injects page or introductory page, as we do for about and products and contact. So we also see that the menu is re sizing and we are going to show you different ways to implement these responsive navigation menus because they are ever so important for Web visitors coming to your website so that they can all be able to interact properly with your website. So actually, you different ways to set these navigation menus up. There is some that are just styling and then others that we apply a little bit of javascript to in order to add that functionality of the menus. All of the source code and resources that I'm gonna be using within this course are also included so that you, too, can work alongside with the course lessons and practice and develop your own website updating your HTML and CSS skills as you progress through the course. So when you're ready, let's begin creating a website from scratch. 3. 2 Course Resources to create a website from scratch: welcome to our course on building a website from scratch. So some of the resources that I'm gonna be using throughout the course, which I've got open right now on my screen. So just over here on the left hand side, this is brackets, This is brackets Editor. It's from Adobe and then on the right hand side, I've got my life preview available, and the real anything about brackets is it comes with this life preview. And as you can see, when I type something here on the left hand side, it shows up in the life preview on the right hand side. So this seems to be quite a bit of trouble of going back and forth, and I can actually see what's happening when I added some code within real time. And if you're looking for an editor, if you already have an editor, you can go ahead and use that. But if you're looking for a brand new editor to try out brackets is from Adobe, it's available. It's free to download open source text editor works across multiple platforms, and there's some really good information here at the bracket Stop I a website. There's also a lot of really nice popular extensions and I'm also going to be using it within this course. Some of the other resources that I'm using in the course are police hold it, which gives you the ability to please placeholder images within your website. And this is great when you're designing websites because this gives you the ability to really add in content and make it look as a normal website would with all the content in place. There's also blind text generator dot com and this is the same thing where we're going to be adding in some extra text there placeholder text and allows us to generate Laura um ip suit text S O. This is just some dummy text that we can utilize within our build when we're building out our website and another resource something to be using within this course. So this is glitchy glitchy dot com, and this is where I'm gonna create the wire frame for the website that I'm gonna be building within the course so you can use any editing software s Oh, this is just gives me the ability really easily kind of sketch of what I want. The website toe look like and then be able to present it in a J peg and then we can refer back to it as we build out the website. And this is always a good idea when you're building out your website to just to sketch something out and you get a rough idea of what you want your website toe look like and then you build towards that. So I'm gonna be using this for wire framing and you could use a number of other resources and including Adobe Photo shop. And there are some wire framing wire framing applications as well. That are really useful, and you can really quickly build it. But I'm just going to simply build out a very boxy type. I would line of the website that I'm building and eso the cliffy dot com is going to be sufficient for the needs of this course s another thing that I'm using. I'm using a browser chrome browser. And the really nice thing about chrome is that we get access to Dev Tools. Eso This is that consul that just opened up. I'm on a windows machine so I can open up the developer tools with control shift I or I can go in the menu over here clicked open the developer tools. And what the developer tools do is they give you the ability to take a quick peek at your HTML code. You can also see your CSS. We've got the box model over here. Eso I can select an element and I can see some basic information from the CSS. I can see where the margins are, and I can get a better idea of what I need to adjust if I do need to make some adjustments . So another really useful tool is chrome because it really does have a lot of capabilities. And also, if you're developing some javascript code, you've got the consul here so you can communicate back and forth their sources, network timeline profiles and a bunch of other stuff here as well, Really useful. We also have access to the dom so we can see all those dumb dawn properties here available rate within the browser. So we are definitely gonna be utilizing this and also another tool that I'm gonna be using . But it's not actually necessary for you if you want to get Europe website Up and running and this is gonna be Sam and Zampa essentially lets me run on Apache Server on my local machine so I can go over to local host when I started up and I could actually run PHP code . But the course is going to be based on HTML and CSS, which only needs a browser to run. But I do like Teoh, run the local host so that I can actually simulate the way the website is going to be presented on the domain eso. This is also an option to have that's running. If you want to do some development, especially if you want to add in some PHP capabilities and database capabilities to your website and try that eight, then Zampa is definitely one of their best resources to get up and running quickly. Eso and this is available across Windows, Linux and OS X and the website Apache friends dot org's and you can find out some more information about Zampa relatively easy to set up. You can just click to set up and then you can set up in the configuration files where the source of your website where your source files are in order to run your website or you could just download it to their default default folder. That's gonna be set up on your machine when you set up Sam so again, not absolutely necessary. But it is a good resource in a good tool toe have when you are doing your development. So also, we're gonna be starting out with a basic HTML five template. So we've got a basic outline here, all ready to go. So we've got our HTML code, our head and body, and we're linking over to a style dot CSS file which is just over here that I've got both open both files open right now, and we're going to be used them to develop the website. So all of this ready to go And in the next lesson, we're going to start adding some code and creating our website from scratch. And of course, the websites gonna be fully responsive. We're also going to be utilizing some boots drop in order to make our menu more responsive . Bootstrap provides an easy way to make responsive menus. And if you're not familiar with bootstrap boots, drop is available and get bootstrap dot com. And what bootstrap is is this is, ah, framework that allows you to rapidly develop Web content. Eso predominantly. It's essentially a CSS file that allows you to create fully responsive websites just by adding classes in your HTML. And then there's also some JavaScript components and these air based in J query. And these are also really useful regular things that be adding in a website, and it's already pre configured, so all you have to do is access it via you need to access at in J query and the boots drop JavaScript file, and then you have full access to all of this capabilities, and all you have to do is place it within your HTML. But we're just gonna predominantly be looking in boots. Drop utilizing the responsive menu because bootstrap provides a really nice component here for responsive menus, and we're gonna be utilizing with that within this course as well. So let's start coding and creating our website 4. 4 Website Planning: before we begin coding our website. Let's go over and wire free moat, our website and quickly right up. Do a quick drawing of how we want our website toe look and how we want to present our content within our website. So essentially we're going to create several content container areas and then within those areas we can add in the different pieces of content. So first off, we're going to create a head section. So this is where all of our header content will go that we're going to utilize within the website. Next, we're going to create a navigation bar and this navigation bar is gonna actually to move around so we might be able to place it within our head section and contain that within there s so that we can utilize it so we can't create one, holds head section here, and then add in some pieces in here. So maybe here we could have ah logo. And then up here we'd have our navigation buttons so we could do something like this leak Kind of See this typically done within websites where we've got an outline here and we've got are now up there and our local. So next we need tohave, an area where we want to add in some additional content that we want to display out from our website. So we want to make our website essentially a two column website and we want the initial index page toe have maybe a really big opening image here to really get those the attention of the users that are coming in tow, access our website and then next we're gonna create a container area, and that container area will have a regular container area and a sidebar So going to keep as one piece there as one section and then create some content there and another content area for a sidebar to me that could take up that whole section there. So we create something like this where we've got a container there and we've got a sidebar here, and I'm gonna just gonna move this down so it's in line with that other one and give it a little bit of potting their spacing off the site. And then, lastly, what is every website needs? So we've got a header. We've got our content area, and lastly, we do need a footer section. So this will act as our footer area there and we can add in all of our foot or content within their essentially, this is what we want. Our website, Basic website layout toe look like we've got 1234 main container areas and then on the regular pages, we're just gonna have the header that contained the content area and the footer. So we're not gonna keep this intro part here that we're looking at within the center and because we want a make, we want to make this website mobile ready. We have to create a mobile version as well. So this will be for the smaller size screens. We're going to compress the head information. So we're gonna move the navigation to be one of those clickable menus with three lines. So create one of those and that's gonna be done through bootstrap. Over here, we can keep our content, maybe our local and so on. We're gonna have those four container areas, so we're gonna have our main image there mean content there on the index page only. So this is just for the index page, and we're not going to keep it across all of our pages. And then next we're going toe, give these ones full with across. So we've got our main content area in our sidebar. So they're going to stack one on top of the other. Essentially, they're still going to be in that one main container, but then there's gonna be two containers within their which are going to take up full screen with. So I'm gonna make a quick adjustment on that. So it lines up and then we're gonna have another one in there. And essentially what? Basically this is looking like this is just going to stack all of them in lying together and then, lastly, the footer. So essentially our mobile screen is gonna be a compacted version of what are mean death stop is gonna look like So we're gonna have that same area here at the top and then container area. So we're gonna have all of those different content areas as well. So up here we're gonna have our head area here is gonna be the same as this one. This one is gonna be the scene is this one and this one is going to be the same as that. And then the footer at the bottom. So four main sections and these ones are going to stack one on top of others, so it's gonna actually look like five, but we're gonna keep it the contents within those four mean content areas, So let's begin coding. 5. 5 Building HTML page Structure: Let's look at our basic outline of the website that we're trying to create within this course. So we've got a regular view here on the left hand side and our mobile view on the right hand side not gonna open up the editor and we start creating our HTML structure in order to build out this website. And I've got my quick preview here on the right hand side. So initially, you're probably not going to see much coming out of that. HTML is we're gonna essentially building that structure with the elements were to start with a header. So this is gonna be our main header area, and we're going to give it a nine i d of header. So this is just in case we decide to use header again s so that we can identify it within our HTM within our CSS and then within this header, I wanna have to separate sections. The first section is going to be the logo area, so this is just gonna be a regular div, and I'm going to give it an I d. Of logo and we just closed that off and maybe we can put company name or something like that. They're just to hold that police and then next I want to set up the navigation bar. So this is gonna be our mean now far and give it an I d of nab far. And these air just ways that I can identify it within my CSS. That's why I'm giving them ideas there. We may or may not need them as as needed, but I like toe have it within my means structure of my website to be able to easily identify the different elements that are available. So within the knave bar, typically when we're designing navigation menus, we do them as on ordered lists. And this presents the list off navigation items really neatly as list items so I can create my 1st 1 here. And this will be a church ref, and I was going to leave it as a blank h ref right now. Or maybe I can place an index dot html so that we have that in place, closed that off and just type in home, and I'm gonna just copy and paste this eso typically for websites, we're gonna have maybe four different items here in the menu. So the next one we could do an about me section, So just call it a boat and will create an about dot html page after we finished out the template and do our styling. That's wanting an ad in these additional pages, and the reason being is that I'd have to I have to plan out how I'm attaching the CSS first . And this is why I'm going to do the copying and pasting of that HTML structure and the other pages at the end after I've done my styling. So this one could be for products, and I'm gonna just call this page products html and then. Lastly, every Web page needs to have a contact form, so we need to have a way Teoh get ahold of the website owner. They want to place an order or something like that so that we have a way that that owner of the website can be contacted. That's what our website looks like right now. It doesn't really look exactly like a website, but we are going to be building this out, and when we apply that styling, it's really magically gonna all come together. So the next thing within our plan when we're looking at our plans. So we've got the two sections here that we've just created. We created this local area. We created the knave bar, the navigation area. So that's it for the head section of our website. And the next is this intro welcome message type section, container area and this we're gonna do it as just a div. We could do it as a section as well, So maybe we can do it as a section or a div. And remember, this is only gonna be present when on the intro page. So I'm going to give it an I d. And I'm gonna call it welcome so that we can easily identify it and welcome to my website and we're not going to display this on the other pages. It's just gonna be on the index page again. Eso next. We got a look at a container area so we can do this as a section if we want or we can do it as a div. And if you're not familiar with HTML five, what happened with HTML five Initially, when we were building out websites, we would call them we would create them all as dibs and would give them at these ideas like Header nav bar and they'd all be dibs. And essentially they take up that full block of available code. But what happened when HTML five came along is that they decided to bring everything together and have it within one container area. So I have it as named semantics instead of dibs. So it would just make more sense. When you're looking at the code eso instead of dibs, we change them toe headers, and eventually, right now, they're functioning the same way as it would with dibs. So they are interchangeable. But best practices usually to go with the HTML five semantic elements. So this one is gonna be section, and I'm going to give it a class of container and close that off. And then within that container, I'm gonna have to separate sections. So I'm gonna have main section for the content, So section and I'm going to give this one a class of content. Call it main or something like that, and then beside it I have a side and a side is the element that we use or the time that we use for side menu. So this would just be beside menu or sidebar. And maybe we could give this one a class as well side. So just give it a class of side menu eso that takes care of the next section. And then lastly, what we need to do is create a footer. That's one of the things when you have brackets doing the self closing of the tags writes a little bit quicker. But sometimes if you press that closing of that tag too quickly, then it creates one that you're not trying to create. So s so that's what just happened there. So I got to give this one on i d of Footer and then here we're gonna put company copy rate 2016 or something like thought, and we can do the copyright symbol. So I got in. So now let's go quickly. Take a look at and see what this looks like. So when I refresh the screen here, so that's one of the things here with brackets as well that I'm adding it in. And as I'm adding in an updating it just updating the next piece, it's not actually refreshing the content. That's why I ended up with a whole line of these repeated pieces A coat. So maybe I need to add in some additional content here so that I know this is content of the site side menu. I have navigation. So I do have some placeholder information for every piece for every element. For every one of my main elements within my website eso we're ready to go with the next step and start really building out this website and presenting it and making actually looked more like a website. And also there's a few things here that you might have noticed that wall is building these out, so started with ideas. I've got ideas here and I've got classes. So if you're familiar with CSS than you know that I ds are for unique elements and classes are for reusable elements and one of the classes here s O whenever we're using bootstrap, it already has some pre built classes within it. So I have used classes down here and I use this one container and this is actually a bootstrap class, so it's already a pre defined class and boots drop. So open up boots drop here under containers. We see that we already have a class container. And essentially, this is what allows us to create a responsive fixed with container on. Then within. Here's where it could create some rows and columns. And this is gonna be useful when I want to employ some of my bootstrap content within that mean content area. And that's why I've given it a class of container and, of course, can classes we can reuse as many times as we want. And this is the same thing here for the content. Because if I want to have multiple sections, I might wanna have different content styling, and I might want to re use that styling in different parts of the website s. So this is where I have used a class and then also for the side menu. I've used a class, So these I ds I know I don't want to reuse anywhere else within the website, and that's why I've stuck them as ideas because I've pre defined them and I'm sent. I'm setting them up just as ideas, so they're only gonna be in one element within the page, But I might be using these classes multiple times, and that's why there's the difference. And then, of course, because I'm going to be adding bootstrap, I'm using some of the pre defined bootstrap classes. So in the next lesson, we're gonna add in bootstrap and we're gonna add in some additional tweaks to this website content in order to present it a little bit more, better make it look more like an actual Web page. So we're gonna play some placeholder content in there. That's all coming up in the next set of lessons. 6. 6 adding Bootstrap to a website: in the last lesson I mentioned that I've added in a class here, and this is a boots drop class. So let's go ahead and add boots. Drop into our website and the good thing about boots drop is it allows us to create our websites quicker. So it takes care of a lot of the lifting that we normally have to do within our website design process. And it's just simply simplifies that it allows us to more rapidly and quickly develop our websites and what we're going to be using within bootstraps. So we're gonna be using its CSS file. And essentially, Bootstrap is a Siris of CSS and JavaScript file, and we have our option here. Toe link to the seedy End CD ends our Web, Web accessible files that are meant to be shared and to bring in these libraries really quickly into your Web projects. You can also download it and link it to your website locally, also uploading the files with the rest of your Web files, so there's a few options when you're wanting to set up boots drop. But usually the quickest way is just to grab the link, and there are some benefits to actually get in the Cdn version, because if other websites are using it as well, if it gets cached within your browser, you'll have a quicker load time, and it's already using that men ified version. So this these are the advantages of using a cdn and then, of course, that you don't have to go through the trouble of downloading and bring it over the same file folder. So a little bit quicker, but and then to the day the effects are the same thing. And when you're adding in your bootstrap CSS file, notice that I've placed it above my regular CSS file. And this gives me the ability that if I want to actually customize some of my CSS and overwrite some of the boots drop CSS. I could do that with in my CSS file. There's a lot of times if you place it ahead of it and inadvertently maybe use some of the bootstrap CSS well, that's gonna overwrite your CSS, and it could leave you scratching your head. So best practice is always to place the libraries that you want to use first and then your customization CSS file afterwards, so Now that I've got that in place, this is gonna allow me to build this website quicker. And the good thing about Bootstrap is that's all mobile and responsive. S a mobile, ready and fully responsive. It's got a lot of really need components. So now that I've saved it and if I refresh it well, we don't really see much difference here within the website because I don't think that container really has a lot of CSS styling within. It s Oh, this is why it's there's not a lot within it, but it's more about building up the structure of your website and getting it ready for the rest of the bootstrap library and the boots drops CSS to be implemented and added into your website. And we're gonna use this if we're listening about products where we can easily use the bootstrap grid system toe. Lay out a list of products within our website really easily, So that's one of the advantages as well of using the boots drop system. Basically, what it's done is it's slightly indented. It's created a little bit of padding around there, and if we go out here, we can see that there isn't that much of a difference. But we can see that this content now has been brought in. So if I do, go ahead. If I inspect it, we can see that we've got a maximum with the content is centered, the container information is centered. So this is preparing our website to be bootstrap, ready. And because now that we've added in this container, the rest of our content is still left aligned. So what we want to do now is added in the container into the other sections of our website so that they align in the same way as this one did. So this is where we bring in this container and we can add it into our header section and we can add it into our welcome message and we can add it into our footer. So now let's take a look at our website and now it should be centered. All the content should be centered in and proper, the lining once again. So we're ready to go with building out the rest of our website. We've got all of her bootstrap components up and running and set up. And just one other note that if we ever want to remove the container, maybe who wanted her footer to go all the way across weaken really easily do that by removing that class and then we can create our own class and update our website accordingly . So maybe I'm gonna leave it up there because maybe we want our footer to always be 100% across the bottom of our page and we might even want the same thing for a header. Eso We could do a fluid container as well, so it's a few different options here when it comes to bootstrap and building on our website . 7. 7 Adding placeholder content: in this lesson. I want to update and add in some dummy content to actually make our website and we're presentable and look more like a website. So let's go over first to dummy text generator or blind text generator. And this is a great way to add in some dummy text stand. I'm gonna maybe do three paragraphs. I'm gonna include the paragraph tags and copy it to clipboard. Open up my project, and then I'm gonna add that in. Actually, before I add that in, I'm gonna update and add my H two tags. So when I add it after this section cause this is the content that I want to stand out as hde two and then the rest are just gonna be these dummy paragraph two pieces of content. And also I want to add in some content into that sidebar toe. Actually make it look like we've got something in there. So it's thinking maybe we could add in some default, add images and at those in So it's open up our place, hold text and add in some images that way. And here we've got a default size of 3 50 by 1 50 so I'm gonna just take that and I'm gonna drop it into my side menu. So we're gonna add in some paragraph and do update this to be to 50 and just call it. Call it adds or something like that and just do a 2nd 1 So this is going to give us the ability Teoh have placeholders for a couple of images within our website, and I'm gonna add in a line break in there as well. Just that were not on the same line. So now when I refresh it, I've got essentially a website with some content in here. So I've got my head information, my navigation bar, which we're gonna update with CSS actually presented as a navigation bar and then our content area and our side menu. And then, of course, our flair. So the next set of lessons we're going to start adding in our CSS and started making this really look like the website that we're looking like that we were originally designed within our wire framing here of our website. So this is all coming up in the next set of lessons 8. 9 Adding Default Styling: in this lesson, we're gonna apply CSS in order to present our website more like what our original design looked like. So I'm gonna go ahead and go back to resign quickly to look at that. And now we're gonna open up our editor and I'm gonna shrink that HTML part and create the CSS larger. And I'm also gonna update the themes here to update this sizing to make it slightly smaller so that we can get a better overall view of our source coat that we're gonna be using to create to create this website because we are going to need to refer back to the different elements sections that we've been building out for our website. So the first thing that we do, usually with CSS I like to start with the largest tags first, and the 1st 1 that we encounter is the body type. So this is where all of our content is held and this is our main body area. So I'm going to just set something up here within CSS for body. And this is where if we had a particular background color, we could add that in so five a background color and I'm gonna use a gray scale Leo right now because of the fact that I don't have my color scheme a picked yet. This is where I'm gonna use gray scale. And we see that this all gets presented in great scale eso now going down to our main container areas so we can actually update some of that styling for container as well. So this is for the class container. And there is some default styling already in bootstrap for it. And I just open up bootstrap really quickly. So this is a bootstrap CSS files. It's not the men ified version. So this actually is where you can actually see the actual cold laid out. The men ified version is with it whitespace. It's a little bit harder to see, so we see that container has different sizes, depending on so it's got these presets sizes and bootstrap That's got our padding. Their margin left moderate margin, right automatic. And that's what centering it. And then we've got this 15 picks of padding. So we noticed originally when we added in container within these elements, we saw that we got this this in denting of that content and we saw that was also centered. And this is all coming from bootstraps. It's just over here. And other thing here about Bootstrap is that we've got the different sizes. So we've got for men with sizes, those boots drop is mobile. First thinking's. That's where they're used in the men wits. But we're probably gonna be using the max wits within our website cause were actually designing from the desktop version down. So those are the two different ways to design. You could get relatively the same idea. I just with the men with your setting out what the container is gonna be like, depending on the size of the screen. So if it's larger, if it's passed the 76 teeth and this is the size, if it's with a min with of of 1200 then this is the maximum size the containers going to sit out eso anything larger than 1200 it's gonna have a container with 11 70 and the same thing goes for these breaking points. This is so we get a better idea of the content that's available within bootstrap, and I could actually go ahead, and I'm gonna shut that bootstrap file and go back to our regular A regular CSS because I just want to quickly show you what is contained within bootstrap, and we don't really need to overwrite any of it. I'm gonna set background color, and I'm just gonna use white. So now when I refresh it, we've got our main container areas and we see that we've got ah, wait background for the text as well. Another thing that I usually like to do to set on these defaults. So in the body, I also like to set my hyperlinks and I don't have any hyperlinks. So I should add some in Esso hyperlinks or one of those things to that. It's really nice to to set these within your CSS because this really does give you your site a different look and feel. So I'm gonna just create a couple more, and I'll say how we can make them stand out. So by default, because we've attached boots drop, we already have a little bit of styling here where we don't have our decoration. It's only showing up whenever we way hover over it. So this is all coming from here from bootstrap when I remove that, we see that we get these underlines. And I usually like to add this in just a double to be double sure that we don't have any text decoration and we can set our colors so we don't have these standard blue with the underlying on all of our text. I like to do text decoration None. And this is also being brought in from Bootstrap. And this is where we can set a nice color that we want to utilize eso. Maybe I'm gonna split dark blue there and I'm gonna bring this bootstrap filed back in. So it is. It is already in there. It already does have some preset coloring to that. But I just wanted to double make sure that if we ever are not using boots drop, though, that we already are setting these. So it's always a good practice to get into. So even though boots dropped has it That's always a good idea that we do said it as well. And it also has the hover there. Two saw whatever were hovering over it. It is changing color. Sameh, be a just gonna pick a random kind of bluish color So when I refresh, it s So now I've got the same thing that boots drop was doing. But I've just added in up here we can also we've set the background of the container and now we can begin building out the rest of our content s. We're going to start with the navigation bar first because this is right here at the top. So you start within the head section. I'm going to make all of our updates to the head section, update the logo and then work on the now far. So that's all coming up. Next set of lessons. 9. 10 Update Logo Slogan section: to help us with our design layout. I'm gonna add in a style here. So this will just be a quick border style so that we can actually see where all of our main content and our containers are sitting. Eso Because I'm going to be working on this one. I'm gonna add it in there. I can add it in there. I can add it in there and so on. So this breaks up our content and allows us to see it quite a bit better. And I'm also gonna add it in Teoh each one of these ideas here that we're gonna be working with. So it's a one pick border that we've added in. And this gives us a better idea of how that content is being displayed. An outlaw output Eso we want it. Ideally, we want a break apart. Won't break this apart into two columns. Eso We're going to just do it within a standard way where we're going to select So we make us elections. We're gonna do header using that header I d and select local within it Or we could just simply select local and swell. Maybe we'll just keep it at that s O because we've used ideas there. So we do have the ability to do have bar and we could have just as easily done this as Header of the Parent and then the Div and the Knave as well. So either way, we could do the same thing, accomplish the same same result here. So let's float this one over to the left and I'm going to give it a with so the local looking at roughly the wits that we need for it. So maybe we can do something like a 40% with, and then this one will float over. We can float it to the right or we could float it to the left, so it doesn't really matter, because we're going to be taking up that full available 100%. So we're just going to keep it at floated to the left. And so there we go. So now we've got our navigation bar here. When we refresh, it s so we've got our navigation bar is ready to go. We've got a company logo, so each taking up their correct percentage and then when we really shrink it down like this we're gonna collapse the menu in and make a drop down menu. So let's go back into logo here and we're gonna update some of the text there that's available. Eso we want to make maybe the text align and we pull this text over to the left hand side and maybe also remove out. Or we can add in a margin if we want. So if we don't want it sitting directly over to the left hand side, we can add in a little bit of a margin there of 10 picks. But then we'd have to adjust the with. So let's for now. We're going to keep the margin at zero just to ensure that we're floating it properly. So margin zero and with zero we don't need to specify picks. We can just do it that way. We can also update our our fault color, so let's update that as well. So the color and was going to do black. Or maybe you can add in a little bit of color. I know I said, is going to agree scale, but let's add in a little bit of color there as well, and we can also adjust font size and fought family, of course. So maybe let's make it so 1.5 PM so makes it a little bit better, a little bit bigger there to stand out. So there we've got our company name and we can also add in additional another line there for want to make it small. So if we wanted to do it this way, maybe we could have a whole other container there over to the left and add in a small slogan or something like that underneath eso This is something that we can add in as well. Eso food. Let's just had that in there. So I'm gonna create another def here, and I'm just thinking probably the best way to do it would be like this. And we could just do small so this could be for a company slogan making it smaller. And then we need to make some adjustments. There s So let's pull that one out and do logo with a child of def is gonna be this and we can do logo with a child of small, and here we can adjust the color, so maybe we want to stick with something that's off red coral color. And here we can adjust the font size as well. So 0.8 and one other thing that I'm gonna add in here as well. So text transform. What text transform does is if we want make it all uppercase, it'll transform all their text uppercase. So maybe that's a good way to go about presenting our company name. That's always upper case. So the next lesson we're gonna look at updating this now bar and transform this a Norden list into a navigation bar, so it's coming up in the next lesson. 10. 11 Create a Navbar with Active element: in this lesson, we're gonna look at transforming our navigation bar into something that looks more like a navigation bar. So we've already set the main container area. We've brought it over so it's floating left and it's taking up 60% of the available space. So let's update this on ordered list within the NAV bar, so select now far and where he's going to select the an ordered list and apply properties to their and we're also going to do now bar. And we're gonna do our list items that are there and apply some properties there to transform out thes thes different elements. So typically with navigation doors, you don't have them listed out here as horizontally. They're more they're not vertically listed, but there horizontally listed so we can take care of this with the display property. And we're gonna just in line block. And as soon as we go in line, you see it already transforms and it already comes into line. Eso This gives us the ability to line these up as in lines, and we can add in some margins as well around the different elements. So if you want something, some spacing at the talk, we can add in five picks and or if what? Spacing to the left and to the right, we can add that five picks in that way. So spacing on the left, spacing on the right of five picks. Another thing with the navigation bar is usually when you're hovering over them, you see the colors changing, and maybe you've got some block of color surrounding it. So this we can take care of as well. So within now, bar, we can see select all of the hyperlinks and we can add in some properties here. And I was going to create some additional spacing down here. So we're not sitting right here at the bottom. Is Every time I say that, it's ah, it's actually moving it down. So s So that's why I just added that quick spacing in There s so this is where we can do use, display and display as block. So this allows us to take that entire available block of space. We also want to get rid of the text decoration entirely so text decoration, and we would make sure it's got none, but also when we hover over it we're going to get rid of, It s I'm gonna show you how to do that as well. And we're gonna also add in a color to it we can do a background color on swell eso Maybe for this one, we can do a light color and we could do background color of black so that we can see that s o there is gonna be a difference between adding our background colors there and back line colors there. Although whenever we're looking at this, we don't immediately see a difference. But when we apply that hovering over, we are going to see a bigger difference between what? We're adding it within their or within the list item. So sometimes you do see it added in with the list item. I usually like to add it in on the last element from the parent. I'm also gonna add in some potting here, some thinking probably about four picks of potting s so that they look more like click football clickable boxes. And this is where that pseudo element comes in the magic of Whenever we hover over, we can add in ah, hover style into it. So let's go ahead and at that. And this is where I want to update the background color. So usually I like to do a complete contrast, so even go with a black color and then do background do a lighter background. So let's do something like red. So it really just pops out right now whenever I hover over it and maybe even a little bit more padding on. And so this is the spacing here is being created by the margin. So if you want it, if you don't like that much spacing between the boxes, you can always reduce that or you could reduce it all the way to zero. So you could reduce the spacing completely and their eyes actually some default spacing sitting within the list items as well. So I'm gonna take care of that. And so I'm the an ordered list. We already have some default spacing eso we see when we do in line at that, we lose the list style eso the list style is that disk that we saw. So we want to change this to none. So just to show you the difference here, whenever we get this in line block, we see that we get these squares there, so we want to ultimately get rid of that again, just to show you that whenever we do none, that that actually disappears. So let's update this back to none. So that disappears just to ensure that we make sure we don't have anything there. And with a new ordered lists, we do have default spacing there. So we've got to get rid of padding to zero and margin to zero, just to make sure that we don't have any defaults that are lagging there, and there might be causing some issues there. So now if I was to change this one down to zero, we see that's aligning there to the left hand side, so it's aligning a little bit better. But I do like to have a little bit of spacing between the buttons, so maybe we'll even keep it at two and one last one that we should take care of as well, when other pseudo element that we should take care of. And this is whenever the site is so we've got hover, but we also wanna have one where it's proactive because we want to be ableto identify whatever the active ones are s So we can either do it this way where we can calm a separate it and add the active ones. That way, maybe that's easier, right Now s we can add in a class here and call it active so that we know that we're always on our home page. Let's refresh that. And actually, this should be a active. It's not a pseudo eso that way. That one is active and whenever we hover over them, they turn active s. So this means that we can click on those. So the next lesson we're going to continue to build out our website and really update the look and feel off our content area. So it's coming up in the next section. 11. 12 Index Page welcome message: in this lesson. We're gonna continue to update our website and we're gonna create that mean welcome slogan , Area s. I'm just looking at our nav bar and generally you see the nap are pulled over to the right hand side. This is a really easy fixed. We're just do a text, the line, and we just pull it over to the right hand side on. So this gives us the ability to see our navigation menu pulled right over to the right hand side. We're still taking up those proper spacing and everything for the websites. When I refresh it, we see that we still got 40 60%. We've got all of the main menu over here, and of course, we're going to remove out thes thes lines. Some might as well do that now because this isn't actually part of our main design. This was just while we were doing our initial setting up of the website. Something went wrong there, so I left in the extra court there. Let's refresh it again. We want our website to look like so far as we can see, it's responsive, and we are gonna be taking care that responsive part of the website as we progress through the course as well. But for now we're just building out, and we want it to look presentable within our current design. So let's go ahead and look at the main container that welcome area. So ideally, we wanna have something that's fairly large, and with bootstrap, there is actually an option with it. As we go to bootstrap, we have a basic, some basic CSS styling and components that we can use within boots drop and they can actually accomplish some of this. So we've got what's called components, and we've got one called Jumbotron. Eso this listed out presents it, as we would normally want, maybe a welcome screen coming into our website on this, and I mean, this is probably really ideal for the way that we want to present it. So we could always go ahead and we can copy a Jumbotron. We could pop over to our website, and this welcome container could become a Jumbotron, and I'll show you what this is gonna look like now. So when I refresh it, we've got the welcome to the website and it's contained within a Jumbotron and then we just need to apply that styling. So let's go ahead and add in span there. Have welcome to the website and then we'll have another paragraph there. Pleased. Look around, Julie. So let's go back to the Jumbotron and we see that typically they have an H one for that Hello world. So maybe we should even update that to H one. Although what Usually I am hesitant to use H ones. I like toe rather use h twos. So maybe we could stick with an H two on this is because usually I reserve H ones for the site title and this is more for S e o purposes. Eso This is something that maybe we can even adjust with our styling and we could have the content about the website as their main h one or H two and then this way we could keep it consistent because we're not gonna be reusing Thies this main welcome page on any other Web pages. So this is just only for the index page eso This is something to consider when you're making out your design, how you want to use your heading tags so that each one's and h twos. So typically, the way that I'd like to do it is I'd like to keep this one and h one this one in each to because this is just a welcome one. But even more, ideally, I'll just create into a div. And then that way I can make some characteristics for with the class So I can set up a class and I can call it something like Welcome header and then go down here and open up my CSS. And from here, I can set the different size of text that I want. So I've got my options for the text alignment, so I can also do the fought size. And maybe I'll just do 1.6 p. M. Or maybe we can even do even larger so two PM and a lot in some potting there. Just take a quick look at that and see how that's coming out. S o. This isn't really aligning well with my paragraph. So maybe I want to look Teoh even adding it and customizing this because of the Jumbotron, it's actually adding some styling into those paragraphs, so we may or may not want to remember. Keep that or we could remove that. So this is all depending on how we want to present our styling. So the Jumbotron, we've got some default styling for paragraphs. Eso Ideally, maybe we wanna have additional paragraphs as well, or we want to just override the styling that's available within the jungle. Tron. And we want to update that paragraph styling to be different fought size. So maybe we can bring it down to 1 p.m. Or even smaller. So 0.7 p. M. Maybe we want this one toe look smaller. And actually, I'm just thinking about it's probably better to just customize this, and we already have an I d. Of welcome. Let's just totally customize this and add in our own styling around this welcome screen. So here I've got my welcome paragraph and I've got my welcome header there, and we can out in some potting around there and even add in margin some margin left, so it's always pulled in at least 15 picks. Let's moved in from the rest of the content, maybe even make it a little bit bigger, and then we can add in some styling for welcome as well So let's add in some default padding. So padding at the top and will do 30 picks believe this is what Jumbotron has. Its got patting bottom, and it's got 30 picks for top and bottom, so there's probably a shorter way to do this. So top and bottom is 30 picks. It's also got a margin at the bottom and probably things 30 pick margin at the bottom. We can do a background color, so this is so it stands out a little bit more and let's also add in a border radius. So we're gonna round the corners. So border Radius and they would do something like 15 picks. So now it's a more rounded border, and I'm actually going to get rid of this one, so it stands out a little bit more. Eso essentially, this is our welcome message, and maybe we even want to move it down from the top so we wouldn't do maybe a margin at the top as well. So just do margin talk and brought him at zero. So let's take a look at it on our other Web page here, and we noticed that it's being pulled over to the left hand side eso The problem there is that eso we do have the container there, but because we're overriding the margins that would have normally taken place with container within the i. D. So this is causing an issue here. Eso let's create another def and we just put that did inside of that container. So that should fix that issue that we had pulling it over to the left hand side. And that was again within the bootstrap styling eso that was pulling it over to the left hand side. So let's take a quick look. And so this was that container area. And in the next section, we've got to create a two column section down here for army and content, so that's coming up in the next lesson. 12. 14 Create a two column content area: in this section, we're gonna look at updating our main content areas. So remain container that has all of our content within. It s so we do have it outlined right now. So when you look at here, we do have an outline of it, and maybe I'm gonna add in is outlines into the to separate class sections that we have that we're gonna be working with so we can get a better idea of what we're presenting and how we want to present that content. So we do have one and two, and what ideally want to do is I want to pull the content on the left hand side and I want to put this side menu on the right hand side. So we're going to do the same thing that we did up here within the head section where we've got the two sections and we can float them over to the left and then also we can floated over to the right as well. The sidebar. So let's take a look at this. And we've got our main content there. Eso This one is floated over to the left hand side and then we have to figure out what with we wanted to take up. Today we want to take up 60%. So we're gonna do it opposite of what we've got up there. And then next we're going to do the same one for the side menu, and we're gonna float it to the rate this time. And this time it's only gonna take up 40%. So let's take a look at this and see how this is laying out. So now when we're shrinking its and we've got all of this taking up the proper spacing. And one thing that I am noticing is that our images are not responsive. So this isn't really easy fix. Whenever we want to make our images responsive, we do Max with. And what Max with does is if we have less than the max with available spacing, it creates it to 100%. So these images air to 50. But when we run out of the spacing for the 2 50 then it takes it as 100%. But this makes the images responsive. Just by that one additional line of court so you can see their ads were re sizing. It is becoming responsive. Those images. So let's go back down to here and look at what else we want to add in Esso. Maybe within the sidebar. One of the things here is we noticed that it's popping right over to the right hand side. Eso Ideally, we might want to add in just a touch of some padding to maybe five picks of padding so that we actually get some spacing between the edges there. And we also probably want to do the same thing for our content s, um maybe we even want to do some padding around there, and this is all dependent on how we're presenting our content. Eso generally with the sidebar, they would do a background color just to differentiate it, to make it slightly different colored from our main content area so that this way, the content stands out even more than the sidebar would also over here. We can center any other text or it could center the images if we want to do so. Eso that's available as well, Or we could just let them float over to the left hand side. So this is dependent on how we want to present that content. You can go ahead and get rid of that outline there. And now when we refresh it, we've got our two column website all ready to go and notice that we still have to take care of the foot or content, so that's coming up in the next lesson. 13. 15 Create Footer Element: So our footer is identified with the I D Footer, so this makes it really easy to access it within our CSS eso. One of the things that we need to do is to clear. We need to clear both the float left for this one, and essentially, this will prevent the footer from being pulled over to any one of these sites if there's some available spacing. Although we did take a full 100% there, whenever you're you've got the spacing there, sometimes you see that bottom will actually go into that space, and we definitely don't want that to happen. Another thing, too, with the footer, I want to text the line, so that's going to a text. The line center is normally see the footing aligned in the center, maybe want to add in some margins as well, so I can add in a top and bottom margin of 20 picks to center that text a little bit more. Maybe set do zero for the margins left and right, and as well we're gonna add in some potting so that we can have some spacing between that mean content area, and we might want to reserve some padding on the left and the right, although this is not exactly necessary because we've already centered aligned our text. But this is something that could be added in as a just in case precaution eso that we're not taking up too much space that would want to allocate for the rest of our elements. So there we go. So now we've got a fully functional website. We've got all of these hover links working. So everything looks to be working pretty good. And in the next lesson, we're gonna look at how we can make it responsive because it's not responsive. And our menu gets all mixed up here whenever we are trying to make it responsive. Eso This is something that we've gotta add it. And whenever we're looking at our initial design. So we've got our basic design up and running as we can see here. We've got essentially the layout that we had looked at eso We've got our footer area here. We've got content one. It's going to refresh that we've got the main content area left side right side are welcome page and our upper header here s in the next lesson. We gotta make it responsive. So it's coming 14. 16 Make it responsive: making our website responsive is going to be really important these days with the web and the way that it is. A lot of people are accessing your website on mobile devices and it just has to look right on a mobile device. Eso right now our website. It's not responsive. Some of the images are responding. What? We ultimately want all of our elements to stock properly. Whenever we hit a certain point, a certain with of our screen, we want the elements to actually get some additional styling added to them. And this is what we were talking about earlier when we were looking at the men with whenever it's a minimum. With that, we have something happen. Well, we're doing at the other way and we're using Max with this time. So the key here is the media and on Lee screen. And this is where we set Max with. And this is where we're gonna look for a breaking point that we want something. Once it hits this Max with, we want something else toe happen. Eso maybe for now, what we're gonna do is we'll just update this. I mean content area so that the one that we set toe white. Let's set that too, The container area. So let's set that to read whenever we hit or a green so that really stands out So we could see that whenever we hit certain with we see that it all goes green eso Whenever we're below this breaking point, it goes green and I'm going to just show you over here as well is really important to understand how this is all working S o within chrome. We do have the ability to to simulate different sized screens here. That's just by clicking this toggle device toolbar and we can send simulate an iPhone. We can simulate nexus galaxy and so on. So these air that default wits that are available as well as we can customize the responsive size. So we see that whenever we get below 700 that's when the new styling is gonna take a fact. And this is where ultimately we want to move. This content are side menu underneath our main content areas. So we want thes toe once again, take 100% available with and remove the floating from it and then shift that rate below it and this is where we've got within that container area. So let's go back over to our side bar back over to our content, and we're only gonna use the styling that we actually want to update eso we've got float and in content, we have float left. So we're going to change that to float none. And we're gonna update with 2 100%. So we're gonna do the same thing over here, update this to float none. And we don't have to worry about the background color. We don't have to worry about the padding because these could just propagate from the previous version. So let's take another look at this and see what happens now. So we've seen Now, whenever we shrink below 700 pics, they actually stack, and this is in line with original design. Here s 01 last thing here is that whenever we're re sizing, everything else looks good. But this menu is really messed up. Eso There are a number of ways to handle this, and in the next lesson, I'm gonna show you how to do that. How to make are responsive menu. So it's coming up 15. 17 Setting up font awesome: I want to bring in another library into our website build. And this is gonna be fond. Awesome. And this is, uh so this is available from bootstrap is commonly used when you developing with bootstrap , and it gives you the ability to have a whole bunch of really cool icons and use of a whole bunch of really cool icons. So we're gonna bring that in the same way that we bought boots drop into our website and just at another line, they're linking to it. So now we have access to fought awesome and fought. Awesome. Really, truly is awesome. Eso we want to add in another menu item here. So when we're shrinking down our website, I want have a clickable link here that we can open our menu and hide our menu as needed. So let's create Ah hyperlink here. And so it's gonna be an h ref, and this is just gonna be the trigger for the menu. So it doesn't actually have toe link anywhere. And we're just going to give it an I D. And maybe we'll just call it many menu. And then here is where we're gonna use font. Awesome. So icon class, and this is where we can specify FAA. So we specified the class that we wanted to use. So it's FAA, and it's f Aybar's just close that I down and refresh it and we can see that this is giving us that menu bar that we wanted to utilise within our website. So this is perfect, but we do want to hide this as well because we're not going to be making use of it. And one of the down sites here is that it's taking that hyperlink property that we've got within those menus. So this is not really ideal. So let's just use a diff here and make this a clickable def. So I'm gonna make this show up and let's make this one s. So what? We're gonna go into our text here, and we're gonna make this one larger, So let's make it large up here. So the FAA bars and we do font size. I am allergic to GM for it. It makes it nice and big. They're a nice invisible within our page. So whenever we shrink it down, what we want to do is show this eso first up. What we want to do with their many menu. We want to display none. And then whenever we shrink down our website, we wanted display it on this block. So we're gonna do display none, and that will hide it. And then when we shrink it down, when we want to have access to our menu, we want to do display block. So let's and refresh it. And now, whenever we shrink it down so that we've got our menu there, we can actually get rid of the green color because this this was just for demonstration purposes, that wherever we're hitting that breaking point, So as we continue, let's continue to build out this menu and make it more responsive. So let's make this bigger. And in the next lesson, we're gonna tackle the weight that our menu gets presented whenever we shrink it down. So this is now it's gone. But when we get bigger, we need to be able to present this menu. And ideally, what we want to do is present the menu just underneath this head section underneath the company name and slogan eso This is something that maybe a little bit tricky to present eso we're going to see what we can do but working on this and updating and showing that menu whenever we shrink it down and in place of these icons. So I want to hide all of these or want to move all of these around. I want to move the nav bar around. But I just want to show this one part so it could be a little bit tricky, and we might have to hide this menu entirely and so entirely separate menu because we've got this one floating within Here s oh, let's work on that within the next lesson. 16. 18 Update navbar to be responsive: in this lesson. We're gonna update our many menu here to display as we wanted Teoh on a small state. So up, abs, umed it in so that we've got our display menu here showing up and I'm gonna just I'm gonna do a display. None So update that to display none when it's large. But whenever we zoom in, then actually want to display that many menus. So let's go into here and display block so that this one now is going to show up, and one of the things that I want to do is actually want to move this one over to here. And the reason being is because the way that I want it presented I want floating over to the right hand side when whenever it's available here, eso I'm going to make some adjustments within the CSS, and I also want the menu to present horizontally or vertically instead of horizontally. So let's make those updates within our code here. So just like what we did with the containers where we updated the floats, we're gonna update the floats on the nav bar first, and we're gonna do a float of none. Give it a width of 100%. And also let's clear out both because we don't want any of the floats still sitting there. So we're gonna clear out both. So let's save that and see what this is gonna look like. So not eso. Now it's just it's moved it down there. It's taking up the full available with eso. Let's make some additional updates to now far and the list items. So we need to make those back into displayed blocks instead of so just do a displayed block here, so that comes back horizontally. Eso This was something that we had changed originally trying to get rid of all the margins as well. And I want to pull the text over to the left hand side so text align left so that this is the menu that we want to present whenever this gets clicked and we're going to take care of that within JavaScript, we're gonna toggle what's visible and what's not visible. Eso what's left now is to update this many menu, uh, this clickable icon here and maybe float that one over to the left. So many menu we called it, and years we're gonna do a float left, and this time it slowly take up 20%. And also, let's update this to text the line, and we're gonna align the text over to the right hand side that the menu is always sitting over there, rate flush to the right hand side. So what's the last thing that we need to do? We still need to update that local area to take up the rest of that 80% eso just as the mini menu shrinks down. Let's update logo and let's give logo A with of the remaining 80% because it's gonna be on a smaller screen and we're gonna need some additional space. So let's check this out now. So now whenever we shrink it down, whenever we expand it, we get a regular menu. But when we shrink it down, we get this menu. But this knob bar is still visible, so what we want to do is we want to display display none of it to just hide it from view. So I want to style it before we actually add in the JavaScript. Eso. What's left now is just to make this clickable, and when we click it. We want to just actually display the naff bar in a block. So that's coming up in the next lesson, and we're gonna utilize some JavaScript for that. 17. 19 JavaScript to Hide and Show Elements: in this lesson. We wanted to update our website and add in some JavaScript s. We want to make this clickable this menu and then actually show our menu and toggle that CSS property. And this can really easily be done within JavaScript. So, javascript, this is gonna be javascript. But we're gonna be using some of the dawn components. And with JavaScript accessing that dawn is the dawn essentially is what gets built by the browser. And this is what we looked at earlier when we looked at our website and I just want to get rid of this on. And we looked at her website and her deaf tools, and we had this here where we've got properties, we've got paragraphs and we've got a whole bunch of thes built in functions built in properties. They're available on every single element. And this is what the dom is because this is the document object model which is created by the browser. So the browser reads through the HTML code and renders it the Dom. And then through javascript, we have access to the dog. So what we want to do is update the display properties whenever our menu gets clicked on the small size menu. So first of all, we need Teoh access it from JavaScript. And we can do that by accessing setting up a property and then accessing that value of the property s so we can do something like we could do very evil. So we're gonna set a variable, and this is just going to contain that many menu. So you have to call it menu menu. But we're just going to call it that just for simplicity sake. So document get element by i d. And the element that we're trying to access is gonna be many menu. And we're also going to set another variable because what we want to do is we get these additional elements. So I want to get Nav Bar because I want to be able to access that one as well. Open and close its weaken, get nav bar, and we're gonna contain it within the object. And then this is going to give us the ability to update properties. So now we just need to add in ah, listener event listener for the mini menu. And first, we're gonna set up our listener here. So many menu on Click, and we need to specify what we want to happen when it gets clicked. So we want to run a function when it gets clicked. And then this is the function that we want to run and we want a toggle nav bar, so either we want to display it where we want to hide it. So let's take a look at this and just do love our style display. And for now, let's just do a display of blocks. So we're gonna update the display to be blocked and see how this works out to refresh it. And now, when we click it, there's something it's not actually adding in the event listener. So let's take a look at that has realized I've got a space. There's that's probably why it's not working. So let's refresh that. And now when we click it, we're showing, that s so we need to also be able to hide it when we click it eso Ultimately, instead of just doing block, I want to do condition there to see what it is at, and if it's none, then it's gonna be blocked, and if it's block, then it's gonna be. It's going to go to none, so we'll just take a quick check to see what the value to see. If this value is already equal to none. And if this is true, then it is going to switch to block. Otherwise it's gonna go to none. So let's see how this works that. So now I can click it. I can show it and hide it. And then obviously this menu would work the same way as it's always been working. So this is a really quickly, really quick fix toe add in clickable naff bar. You could also do it on click here as well and just run that function. And of course, you just need to pass in those parameters there. We can also take it like this because maybe this way might be a little bit a little bit better. So there's a lot of different ways to do the same thing here within JavaScript s so we can really shrink down the mountain code that we're using here, and we don't actually even have toe identify it. Student on click like that. So maybe this is a little bit easier to understand. A little bit more straightforward, so it's going to do the same thing. So whenever it gets clicked, that's gonna fire off and open up the navigation menu on. And we can see here that one of the problems that's gonna happen, though, if we've got it closed and if we shrink it if we resize the screen than it's actually going to disappear. So this is one of the inherent problems, like everything will work properly if we're on our mobile device and we're clicking. But if we re size in the screen that we could run into some issues. Eso there are a number of different ways to do this. So the next lesson we're gonna look at some alternatives as well, so it's coming up. 18. 21 Create another responsive Navbar: in the previous lesson, we had looked at how we can make our navigation bar responsive. So when we re size it, we get this icon here that indicates that there's a menu which is clickable. It opens up and it closes so we can resize and we see that we do still have some issues with doing it this way. And this year's really come because we're able to resize the page. So this typically wouldn't happen if you came in on a mobile device. You came into the website and things would actually work as needed because you wouldn't actually be re sizing your page. So this type of menu bar is also ideal if you're hiding and showing a menu bar, or if you've got a second menu bar that you want to hide and show. So in this lesson, I want to take this one step further and show you some other options to create menu bars. And in this lesson, instead of adding and removing the actual the style property, the display property we're gonna use, we're going to actually use ah class and we're gonna remove and add the class as needed. And that class is gonna be the holder for whether the menu bar gets displayed or none. And what this is going to do is this is going to simplify things a little bit by taking it out and breaking apart that ability that were displaying this menu bar and we have the ability actually to hide and show this, but then we're gonna allow it to be controlled via the styling. So we're gonna attach a brand new class here, and then this class is actually gonna be controlled via the media screen and let us know whether we need to hide or show this. And this is all gonna be controlled within here within the media screen. Instead of adding it here into the nav bar, we're gonna be adding it it as a class, and this is gonna make a lot more sense because once this class has a larger size, then we know that we do want to show it. So I'm going to create a brand new class here, and we're just gonna call it sm screen. So this will be for small screens, and we know that whatever items here within our website that need to have the same properties for small screens. They're gonna be able to take that same property and over here within the CSS, we need to add that in that we're gonna essentially we're going to do a display. None on that. And then we're gonna toggle it within the media screen here. So I'm just gonna open up our CSS file, which is down here below, and I'm gonna attach some properties toe, sm screen. And what's gonna happen is whenever we are on the smaller screen, then we're going to just display none, which means that on the larger screen were always going to display. And so this is going on Lee for the navigation bar. So it's got actually good not gonna have anything to do with what's happening within our within our main display area from our dust stop view. Try this out and see how this works. It's when I refresh it. We see that we're automatically we're not displaying that menu bar, but when we go big than we are displaying it and then this icon is still clickable right now and we're gonna take care of that within this lesson as well. We'll take care of that. JavaScript And what we want to do within the JavaScript is essentially toggle that class on and off because that class is the one that actually is going to show the menu bar or hide the menu bar. So let's go over to our JavaScript here, and we're gonna create some variables that are gonna hold the contents. That is document objects. So document and we're going to get element by i d. So we're gonna grab that entire nav bar. So grab nav bar, because that's where what we've called that whole navigation bar here over here. So we're gonna grab everything here, and we're gonna also check to see if our button so this button here is called mini menu. So let's take a look at this one as well, because we want maybe apply some properties to that s so maybe we're gonna attach the on click to that. So this is gonna be the same thing here as we can call it button menu and will equal it to this. And we'll clean this up a little bit as well by doing this. So we're gonna essentially add that on click function. So just making a quick adjustment to here. And what I want to do now is I want to actually, instead of all of this. What I want to do is I want to take this nav bar against were just essentially doing the same thing here. So this is, uh, this Object X is holding document get element by I, d nav bar, or we could maybe call it nab our. So it makes a little bit more sense there. So now bar contains all of that information, and we're gonna essentially check that class, name and class name is the object that contains all of the class information of the element . And we're gonna check to see if this nav bar class name is equal to absolutely equal to nothing. And if it's blank, then we know that. So if it's just a space there, So I'm gonna make sure I add that space and as well, so that when we're removing it and hiding it that we actually are adding in a space. So we do have that space. There s So now we need to make sure that we add the proper the proper class. So it's gonna be adding in sm screen and removing Essam screen. So if it's not there than the value of NAB, our class name is SM screen. And if it's blank, then it's just gonna be the blank space. And I can also do a consul logs. We can get a better idea of what's contained within this object, and you can see that the class name is going to be presented within the console. And the consul directory is a better way to display object information, especially when you're getting object information from the Dom. So you gonna see that sometimes when we're developing, we use consul logs, consul directory and essentially they play. They send over messages over into the console, and this is used for development to pass information back and forth so you wouldn't actually know what the contents of not bar is. But if you console log undated than every time you go to the website, you're gonna be able to see what's contained within this object. Let's check this out and see how this is working now, so we're refreshing, and I'm actually going to open up the console so we can see some additional information. So that's under inspect here. And so I'm gonna have that consul over here so we can see what messages were getting back and forth and when we re size it. So now we get the navigation bar. When I click it, we see we're opening up the nav bar and we see the contents of it. So it's a blank class, so we see when we're clicking it again. It's a blank class, but there's still something that's going wrong here and just looking at this, I want to note that how consul directory and console log output the information differently So the console log just outputs that entire element, including the HTML and then Consul directory, allows us to actually see the directory information. And this is the one that we're looking for right here. So we're looking for class names. So this is the property that we're looking at, and we're checking to see what the value is so we can see whenever we click it. So I just need to open that again and see within the console. So this is that last object that we just clicked. And when we go to class names it's not actually adding it in. So this is what's causing that issue because it's not adding in sm screen. So looking at our source code so we can see that we can also log out that class name so we can double check what the value is that's being presented there. But going down here, we see that we do have still some issues with the CSS because the way it is right now making some unwanted properties and we don't want to display it none because we're controlling the display through the class. Now that s M class, and that's the ones going to display none. So want to get rid of that? And I'm just do a quick check over to make sure that everything else is looks proper. Statistical back out to our Web page and refresh it. And remember, we've updated the console is well now, so we should be able to see what the actual the class name is. So this is just gonna be a listing of all the classes that are there. So in case you have some additional classes that you need to add those in, so it's actually not taking that condition and it's not resetting it there. So maybe we do need to just leave it at blank. So this might be a little bit easier if we have some additional classes there, because then we know that the properties are gonna be in place, which I'm gonna show you a swell. So when we refresh it, we see that now everything looks like it's working properly. When I resize the page, our menu is there, and it looks like they're re sizing is working. So even though the menu is open and we re size it, it doesn't take anything away from the actual navigation bar showing up. And when we re size it again, back down to small, then we still are at where we left off with the navigation bar being open. So these air just two different ways to present it. And you've got to choose whichever one works best for you. And I'm just gonna quickly show you how it is if we have another class in here. If by chance you have a second class or something like that, so maybe we just call it second or something like that s O then we need to update this as well. And this should read that if its second, then we're gonna update it with with the second class and we just leave that one in. So we're gonna add that one to it. Just put a space in there should maybe we don't need a space. Let's try this eight and refresh it. So now when I click it, it's toggle ing. And we can take a quick look because we still have that developer Consul open, and we can see that whenever we're clicking it. So we're adding and removing the class, but we're actually removing both classes. So another problem there that we just need to make a quick update of it. So we're actually rewriting all of the classes in there and where we're just writing second . So we're not. We're actually losing that screen, so we need to actually write them both in if want to keep them within that click. So we want to rate both of them in there because it's taken that whole class name because it's applying multiple classes there. So even though it looks like it's working now, we see that in fact, it is working as keeping that second class. So if you have multiple classes in there, makes sure that your listing the moat and that you're rewriting them back in to that particular element within the class name. 19. 23 How to add Bootstrap JavaScript Library: in the last few lessons we've been looking at. Navigation bars and navigation bars are ever so important to your to your website when you're looking at mobile and responsive capabilities of your website. And this is why we're focusing quite a bit of time on these navigation bars because getting them right is very important. It's a vital aspect within Web design, and I also want to show you. So I've shown you two options that are essentially JavaScript options, and they're essentially working the same way where we've got our navigation bar. We've got some JavaScript that's helping to control some of the styling, and we've got our style sheets. So we've got it formatted to collapse and to hide and show, depending on the screen size. So there are a few other options as well for navigation bars, and one of them, which is often used for Web development, is bootstrap Now. Bootstrap allows us to more rapidly and quickly develop websites, and they have a built in functionality that's up and ready to go. When you want to add in, you're responsive menus. Now, with bootstrap, the only thing is that you do need to collect Teoh connect to the bootstrap library and also to the G query library. So first you need to add in the J Query Library. So I've already got thes within my dashboard here. So I've got this is the G query library and much like what we were able to bring in with CSS linking to a CSS library from thought awesome. We can also bring in the J. Corey Library and then bootstrap JavaScript utilizes that J Coury Library to make some really nice functionality. And if you do have some time, go over to the boots drop website and check it out. There's a lot of really neat things that can be done with Bootstrap. So I'm going to get rid of our JavaScript here. So it's going to leave it blank for now. And we're gonna go over here, and we're gonna format our website to accommodate the new bootstrap menu settings and menu combinations. So we do need to add in classes much like we do with other with other navigation menus where we're using classes and other parts of bootstrap or using classes to create different effects were going to do the same thing here with Bootstrap. So we already have i d header. We've got class, container and container is bootstrap class, which allowed us, If you remember, earlier in the course we looked at how that allows us to actually center some of the content and then next, we've got this i d logo here, and then we've got our nav bar. So what we want to do for bootstrap is we want to make a complete collapsible menu. So in order to do this, we need to get rid of and move a few things around. Like we're not gonna need this many menu anymore because actually, bootstrap is gonna take care of it, but we are going to need these f I thought awesome bars. So I'm gonna maybe just leave that in there till now. And in the next lesson, we're gonna convert this into a fully responsive bootstrap navigation menu. So it's coming up in the next lesson. 20. 24 Add Bootstrap Menu NavBar: in this lesson. We're gonna update our navigation menu to be fully bootstrap, pretty and responsive via Bootstrap. So we're going to get rid of some of our styling that we have been working on earlier and just simply contain the bootstrap information. So I'm gonna go down into the style sheet because just like the previous example, whenever we're making changes to our HTML code and we're adjusting, our menu is being presented. We also need to make adjustments to how we're presenting our CSS so we won't need this anymore. We're gonna leave the FAA bars for the front off some bars so that we get a fairly good size on them because we do need to have some kind of context, their menu. There's an option within bootstrap. A swell to do that. We don't need the SM screen anymore. We don't need the side menu or extra, but we do need the side menu, but we don't eat the mini bar. We don't need any of thes knave options, so this can all be simply removed out, and it's cleaned up quite a bit of what we're doing within our media screen. And now we're ready to start adjusting our CSS. We can also take take a quick look at the website and it's not really functioning well without that CSS. So let's make some updates and changes within our website now. Eso first thing that we want to do is we want to update. So we're gonna have now as containing the logo and the company information, because with bootstrap, it gives us the ability to pull all of that information over. We no longer need to identify this as the now bar because we've got all of that information that we were originally using. We no longer need to make containers there. So with bootstrap, it's got a built in class called nav bar. And then it's got additional styling for the knave bar. So this is what I'm adding in here we're on typing in knave bar toe. Let it know that it's a navigation bar. And then here it's studying the additional look and feel of the now bar, and we're just going to go with the default one for now. So just like we had our class container there, we also need to add in some additional classes and with bootstrap It's just a syriza classes that you're adding in. And this helps bootstrap understand how you want a position. Different elements on your website. That's where we need to bring in dibs. And with bootstrap, you need to bring in quite a few of them in order to get your website looking exactly the way that you want. So with container fluid, this gives us the ability to have a container that goes entirely across the entire Web space there. So I'm gonna just should actually be container fluid so different than container container fluid gives us 100% with the full available block section. Now we need to add in another div here, and this one is gonna have a class of now bar header. And this again, this helps bootstrap understand what we want, what we want, this particular element and how we want to represent it within our court. So now, bar header and then next, we need to set up button or something to be toggled when it gets clicked that we're gonna we're gonna fire off that bootstrap function. So let's create that right now as well, and we're going to just do button tape and tape is a button and then the class. So this is an important part where we need to specify that this is a knave bar toggle. So this is a class, but it's also going to help us. How bootstrap. Understand how we want to use this particular element and we want to use it as collapsed. So that's the type of navigation bar so collapsed bar and we need to add in data toggle. So this helps J query understand even more information of what we want to do and how we want to utilize this so we can take to data toggle and we want to make a collapsible menu and then date a target. So this is also extremely important because we need to target what we want to collapse. And we ideally, we're going to collapse everything in this UL list. So we're gonna target now far and there's a knob or I d that we're gonna reuse again. So that's the button. And then within the button, we need to have some kind of, uh, some kind of characters. There s So it could be any other any characters you want, but I'm gonna use the same one we used in the mini menu there and save that part. So now whenever we go to the Web page, let's see what's happening now. So we're still not looking proper because we haven't added in all of the styling. So that's important thing about Bootstrap is we really do need to add in all of the styling and typically with your menu here. So we've got our now bar header, and we know that this is part of the NAFTA Bar header. So we've got our logo and all of that, their next going to create another DIV. And this is going to get the I D. Now bark, so notice that it's tying it together with the target here, using the I. D and class, we need to specify what we want the class to be. So the class is going to be now, so it's a navigation bars of bootstrap understands that and nav bar love, and we can pull the nav bar over to the right or left. So we're gonna do a right navigation bar. And with bootstrap, there are a bunch of options for setting the different navigation bars So let's save that and add in. So actually, I got the class wrong here. We need to add this class in two. This you a Norden list, and we need to actually update this to nav bar collapse. So again, mawr bootstraps, styling. So this has to be knave bar collapsed because that is the option that we we chose and the menu class is going to be collapsed. So let's take a look at this now. I going to refresh the page and see what's happening now. So we see that whenever we're re sizing, so it is slightly working. But we need to still get rid of some additional styling because it's kind of working, but it's not out putting it properly. So there are some additional options that we do need to make updates here and typically with bootstraps. And this would typically be an h rough. So be linking somewhere. So I'm gonna just style this, as we normally would in Bootstrap on. I do need to get rid of that logo there. So let's save this now and tweak it a little bit more. So let's see how this looks now. So opening up that window. I can close down that one and we can see that it is starting to look more like a menu that we want to present. But it's still not opening and closing, and that's because we still have some additional styling that we've gotta get rid of within our within our build. So typically you wouldn't build out all these navigation bar settings and then update them . You would simply not include them because bootstrap would be handling all of that information. So now when we go to our website and with we refresh it, we can see that now we've got a working menu, except it's not clicking, so it's still need to add that functionality. And But we do have the company name there, and we have the menu that's collapsing and hope it's not opening yet, but it is showing as a typical navigation menu when we're re sizing them. We've got our company name and our logo information, which can sit there on the left hand side. So the next lesson we're gonna finish off and make some additional updates. We can open their clothes and menu and finalize this menu on our website built via Bootstrap 21. 25 Bootstrap Menu Navbar: in this lesson. I want to tweak the code a little bit just to make sure that everything is working properly . So when I refresh it, we noticed in the last lesson. So the menu bar is adjusting properly, so there are a few tweaks here. So is looking at this data truck target and we need to target it to this I d. Of Nav Bar. So here we can call it whatever we want. So we could use different targets as well Eso we could target it to different ideas. So I just called it nab are just to be consistent with what the work we're doing earlier. So now I target it to Nav Bar, so this is actually gonna actually target it to that particular element. So let's see how this works. So when I open and close it and when I readjusted so my navigation bar looks to be working properly and we removed out all of those elements and bootstrap just makes it really easy and notice as well that I didn't have to include any JavaScript so I can get rid of that script tag or that script element as well. And the one thing that's not showing up exactly right is this company name. And there is actually a class for this as well within boots drop, which could actually style this and give us the ability to make it look a lot more Niedere eso this this class here that we could add in here is a knave brand because with boots drop were expecting satnav bar brand so that we would be expecting that there is some branding there within that the upper left hand area, so that we typically would have a brand there. We can also add in an image, a logo and so on and slogan eso there are some options, but we do want to keep it only one line. And the reason being is the way that the bootstrap navigation bar is working, that it looks best and performs best when this is only one light. But of course, if you want to, we could apply styling and update it as needed. But for now, let's just leave it with this and we see that we've got a navigation bar up and running, and also I just want to show you So this is the bootstrap CSS file. This is the non unified version, so you can get a better idea of what's available, what classes are available. So if you just search knave Bar, we've got we've got a whole bunch of entries for Nav bar so we could have a NAB are fixed at the bottom s Oh, this is the pulling to the right. We've got also options to add in drop downs. Eso these air the different radius sizes so you can see there's a lot of information here, and this is that. Nab our header so it automatically floats it to the left. On the menu. Nab our collapsed loser. The CSS styling options for the collapsing menu. We've got fixed top static. So these are all different options for the nav bar, and we can really easily there's the NAB our brand that we weren't used. Eso weaken really easily. Add in these now bars whenever we toggle it. This is what happens to the knave bar, and this is all controlled via G query and just styling that's available within bootstrap. And that's why it's it's important to get all of these class names done properly so that we can add them in properly within our website. And if you want to read up more about the nap bar and the different options within bootstrap and as we can see, it saves us a lot of trouble when we make this now bar within bootstrap and let bootstrap handle all of the styling and the actual coding for it s So we've got some information components, nav bar, and we've got all the different options here that we can do with nav bar. We can also and then we've got the nav bar default. So this is the typical bootstrap nav bar. We've got information about the brand image eso were able to actually out in a brand image as well. So this would have been something where we could add in that image. We've got an option to add in a search. Submit a swell in there. We've got the nav bar form and naff burn left and so on. It's a lot of different options here with the nav bar and ability to change how the knave bar is treated. We could also fix it to the top if we wanted eso weaken simply by adding in the simple class, we can change how the knave bar gets presented. We can also fix it to the bottom as well. And so one. So if we had something where we're fixing it to the bottom, we went back into our A regular nav bar. All we need to do is copy the class inappropriate location. So it's see here we've got in the nav bar so we can just add that in gonna just ad copy and paste art in Sanaa Far fixed bottom. Now, whenever we go over to our web site, we can see that our navigation bar now is at the bottom. And when we re size, the navigation bar is staying fixed at the bottom of the screen and you can see this. And this is something that boots drop automatically takes care of. So it really makes it easy to make adjustments to how your navigation bar gets presented within your website. And this is all again done through boots drop. And this is why a lot of developers air using bootstrap because it really does make it easy to make these adjustments in these updates on saves you some trouble of actually coding and adding the styling yourself so they have to do is linked to the boots. Drop files that bootstrap CSS, the boots dropped Java's JavaScript and also to Ajay Kori Library. And that's all you need to get it going within your website and then, of course, added inappropriate classes. 22. 27 Create website pages: So now that we've completed the website, all of the source code, we've got it looking and acting the way that we wanted to present as we've got our navigation bar. And I should actually move this one back to the top because I don't want it fixed at the bottom. So let's take care of that. And it's is easy is just removing that class and updating where the navigation bar actually presents itself s so we can see that everything is working the way that we wanted to. And now we can build out other additional pages because this website actually has for pages . So this was our home page. And on the additional pages, we want to get rid of the welcome to my website. We don't want to present this. We might have something else that we want to present in place. But for now, we're just gonna content completely remove that and looking at our design. So our current website still matches our layout originally oh, that we had laid out and how we want it to present our website. So let's go back into our code. And now, in order to create the additional pages and then it just hide where I'm gonna keep that. And in order to create additional pages, what I usually do is I just create the pages like this. So we gotta also make sure that we have all of the page links in there. So I'm going to just simply save this eyes about HTML and from here, I'm going to get rid of this content that's contained this top header container, so I could just simply remove that out. And then I can rename this about us. And then here's where I can present content. If I want within the boat section and we can keep the ads the same, we could bring them in dynamically, So there's a number of different options there. So now whenever I clicked toe about, we can see that we've got a completely different style layout for a website, and then now we can do the same thing for products. So save as on just gonna check to make sure that I get the file name correct. So it's products with a lower case peak. So now I conceive about as products dot html, and we can then customize and fill out our website as needed. So apply the appropriate syntax and code. And now it just lastly our contact. So save eyes and I'm going to save this as contact dot html and I'm gonna update this to save contact. And now when I refresh it So I've got all of my pages. Everything is built, fully responsive website from scratch, and I can begin to add in images if I want an additional content and so on. So this is all available now within my website built. So I encourage you also to take a look around the source code, makes some updates, adjustments as needed, and build out your own version of this website Fully responsive mobile menu. And you can also choose which men you want to present to your visitors and how you want to present that menu. So we laid out a number of different options for the navigation menu because this is still the most crucial part of designing your website because you want visitors from any size screen to be able to come in and activate and interact with your website as designed. I'm also going to include the resources and links that I've used within this course, so you can check it out for yourself. You can check out what boots drop has to offer. There's quite a bit of options here to develop and build websites quickly. Just utilizing these boots. Drop libraries and bringing them in to your source code, and you can also create your own versions using dummy tax placeholders if needed. Toe hold places and spacing for your website content, and then you can create your own designs using glitzy dot com. And there's a number of different other options. And if you're looking for an editor, brackets is available as well. So brackets io, so I am going include all the links and resources used within this course. 23. 28 Online Code Editor: I've added all the source code over at a website called Code Pen i O. And this is a website that gives you the ability to add it source code directly on line. So you can see here that if I change like a background color, we can see that right away in the display area, we see the brand new background color in those brand new CSS effects taking place. And this is a great resource. If you want, develop out your website so you've got all of your source code in there and ready to go. And you can make some adjustments here within the source code to present the website indifferent. So if you wanted to make your border radius bigger, you can see that right away it takes place over there. You can update your background colors. That's a good places. Well, to test out different colors, check it out and see how it gets presented within your website s so you can make a bunch of changes here. We can also update our font size as well as it could make it really massively big. We can update that in Dent to the left, so we can remove some of that in denting. We can indented more and we see right away it's taking shape up there within the website. So these are This is a great resource and I've uploaded the code already in their there. Welcome to go over to the website and check it out, played around with the court and see what you can make happen and see different styling options that you can add into the website. It's going to bring this back toe white s so you can see everything gets presented properly within the website content. So I encourage you to go over to the website, check it out and use online resources like this to really develop out your website and get it looking the way that you want it to look within real time and getting a real time preview.