Quick and Easy Web Design Creating websites from scratch | Laurence Svekis | Skillshare

Quick and Easy Web Design Creating websites from scratch

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
22 Lessons (2h 6m)
    • 1. Quick and Easy Web Design Creating websites from scratch

      1:46
    • 2. 1 Website from scratch introduction

      2:11
    • 3. 2 Course Resources web design

      5:05
    • 4. 3 Website Planning wireframe design

      6:49
    • 5. 4 Create parent elements HTML structure

      6:57
    • 6. 5 Add resources and dummy placeholder content

      4:33
    • 7. 6 Apply Styling to HTML top level elements

      5:33
    • 8. 7 Navbar setup and styling

      12:00
    • 9. 8 Creating a content wrapper

      2:39
    • 10. 9 Creating a header

      3:05
    • 11. 11 Setting up sections sidebar and footer

      7:03
    • 12. 12 CSS tweaks and fixes

      4:51
    • 13. 13 Add media queries make it responsive

      7:27
    • 14. 14 Add additional media queries

      4:20
    • 15. 16 Setup responsive navbar

      5:11
    • 16. 17 Setup menu for toggle of class

      3:20
    • 17. 19 Add jQuery event trigger

      8:02
    • 18. 21 Setting classes on the fly

      11:46
    • 19. 22 Page Tweaks and options

      4:54
    • 20. 24 Create additional pages for website

      8:18
    • 21. 25 update contact form

      6:19
    • 22. 26 Practice tips and resources

      3:24

About This Class

Quick and Easy Web Design Creating websites from scratch
Explore how to build websites using HTML, CSS and jQuery. Step by step
guide to how websites are built from scratch
Everything you need to know to build a website from scratch.

Learn how to use HTML and CSS to make websites from scratch. This course
covers the fundamentals on how to use HTML and CSS together to build
websites.

Learn how to identify different core containers within your web design and
then build your HTML code prepping it for styling.

Start by planning your website, what do you want it to look like. This is
the guide to develop your HTML coding by using this blueprint to build the
HTML structure. Use HTML to create the initial website structure.

Apply CSS to customise the way the website is rendered in visitors
browsers. Explore CSS and how to style your website. Add placeholder
content and images to get the feel of you websites. Build out a navigation
menu, style your navbar. Create content sections, style them in modern
website styling. Add styling to your headers and footers to make them
stand out. Setup you content area separate your content sections, including
setting up a sidebar. Improve your website, with special tweaks and updates
fine tuning your source code. Then use CSS to make it responsive!

Add jQuery to dynamic added functionality. Adding event triggers and
customised interactions. Detect current URL and set the active class on
your navbar.

Source Code is included
Top Resources and links used to create websites
HD quality video
Step by step instruction
taught by an instructor with over 16 years industry experience
quick forum response
ready to answer any questions you may have
Develop a solid foundation in web development, this course is designed to
get you creating your own websites. Explore how to make websites.

Upon successful completion of this course students will have a solid
foundation in the core principles of web design and web development.

Transcripts

1. Quick and Easy Web Design Creating websites from scratch: everything you need to know. To build a website from scratch, learn how to use HTML and CSS to make websites from scratch. This course covers the fundamentals on how to use HTML and CSS together. Learn how to identify different core containers within your Web design and then build your HTML called Preparing for styling. Start by planning your website. What do you want it to look like? This is a guide. Develop your HTML coding by using a blueprint to build the HTML structure. Use HTML to create initial website structure, then apply CSS to customize the way the website is rendered to your visitors. Explore CSS and how to stall your website ad Police holder Content and images To get the feel of your website, build out your navigation menu. Stall your Navid bar. Create content sections, style them in modern websites. Styling. Add stylings, your headers and footers To make them stand out, set up your content area. Separate out your content sections, including the sidebar. Improve your website with special tweaks and updates. Fine tuning your source code, then you CSS to make it responsive, then at Javascript and Bakery for dynamic added functionality, adding event triggers and customized interactions. Source code is included. Top resources and links used to create websites. HD quality video step by step instruction taught by instructor with over 16 years of industry experience. Quick forum response. Ready to Anderson? Answer any questions. You may have developed a solid foundation of Web development. This course is designed to get you creating their own websites. Explore how you too can make websites. Upon successful completion of this course, students will have a solid foundation core principles of Web design and Web developer. 2. 1 Website from scratch introduction: welcome to our introductory course to creating Ah, full complete website from scratch. My name is Lawrence, and I'm excited to have the opportunity to present this website project to you today. So I've been a web developer for over 15 years and I've been working heavily with HTML, CSS, JavaScript and J Query on a regular basis. And I'm always amazed at all of the really cool things that you can do when you apply these technologies together and you can create these websites and it really doesn't take a long time to create a website like this and I'm gonna show you how to do this and this is all gonna be done from scratch. We're going to start out with a blank web page and we're going to start to build out all of the structure starting off by creating a web design. So we're gonna have to lay out a blueprint of what we want our website toe look like and we're gonna build out towards that and we're going to start applying with adding in html, sectioning off all the different containers within the HTML and then making the website fully functional and ready for to be responsive so we can see here how the website is gonna look on different size screens and it is fully responsive in mobile. Ready. We're gonna also add in CSS to apply styling and really make the website html content come to life. Then we're gonna finish the website off by applying JavaScript and J Query in order to create dynamic functionality. So we see here that whatever page were on is going to get highlighted and that's active. So I'm gonna show you how to do that within the course. Also, how to create this responsive menu that's fully responsive. So even once opened up, we go to the larger size that we go back to our default large screen menu. So I'm gonna show you how to do all of this and a whole lot more. Within this course, all the source code and resources that I'm gonna be using within the course are also provided. So you two can work alongside the lessons and create your own version of this different source code that we're working with within the course. So when you're ready, let's begin creating a website from scratch 3. 2 Course Resources web design: within this lesson. I want to provide an overview off the content resources that I'm gonna be using in order to create a website from scratch within this course. So over here on the left hand side, I've got my editor open. I'm gonna be using brackets. This is a free open source editor. It's from Adobe. If you already have an editor, you can go ahead and use that. Or if you're looking for a new one, if you want to try one out than brackets is a really nice one. And I am going to be using it within this course. And one of the really neat things about brackets is this live preview. So it actually gives me the ability. Teoh have a live preview of the website content, and we can see it getting displayed here on the right hand side as I enter in the coding here on the left hand side so you can see that it automatically displays it. So this is one of the features of brackets, and I'm going to be utilizing this within the course. Some of the other resources have been going to be using within the course I'm going to be using wire frame cc. So this is an online application where we can quickly make a website design a website plan . In order to start building out our website, we're gonna need to initially come up with a plan of what we want our website to look like . So in this course is going to be using wire frame cc. And also I need to get some dummy text in order to have placeholder information within my Web content. So I'm gonna be using blind text generator eso. It allows me to generate a whole bunch of different types of just default dummy text that I can use this placeholder text and also as placeholders for placeholder images I'm gonna be using place Hold it and Laura um pixel. So these air to resources that you can use a swell in order to create police holder content and placeholder content is excellent. If you don't have your assets already ready that when you're designing your web site in order to get the look and feel of your website using CSS, then it's always a good idea to have that plate placeholder content in place first. Some of other resources that I'm gonna be using. I'm gonna be using Google Thoughts s. So this is a Google service that fonts dot google dot com and there's over 808 different fought families to choose from. And I'm gonna be selecting some of these really neat fonts in order to bring them into our Web project. Additionally, I'm going to be using Jake Worry in this course, so I'm gonna be using a CDN hosted library from Google again. And as you can see here at the developers dot google dot com, they've got a whole listing of different libraries that are available that you can simply copy the linking to and bring it into your Web project. So I'm gonna be bringing in geek Worry into my Web project as we're going through the different lessons in the course. And lastly, I want to indicate that I am gonna be using chrome within the course. And the reason I'm using chrome is that it's got developer tools and developer tools is within each and every install of chrome, and it gives us a whole bunch of really useful information when we're building out our websites. So it's got the box model here under styles. So for every element within our Web page, we can see what type of what type of styling is available we can disable can re enable it and so on. So they've got a lot of options here to get a visual perspective off what our website looks like and we can adjust the styling. We've also got information about the dawn, so that's the document object model. And this is rendered by the browser when it reads your Web page code, and it creates what's called a dom and a Dom essentially is a breakdown of all the different elements within your website, and we can see here that we've got all the different properties that are available on those elements. So we've got all of these triggers here and these air some of the triggers and some of the information that we're gonna be accessing via J queries. So essentially, J. Corey gives us even easy access to what's available within the dawn, and this is something that's available within chrome, where we can get more information about our content of our website, and then we can utilize that within our scripting. So again, these air just suggested resources that I'm gonna be using within the course. If you already have your favorite resources or if you already have your assets in place, you can go ahead and use those as well. Eso these air just suggested resources. If you're looking to try something, you are if you're looking to follow along exactly what I'm using within the course. 4. 3 Website Planning wireframe design: in the next set of lessons, we want to build out entire website from scratch. And we want this website to be fully responsive, mobile ready and ready for any side screen. So first thing that I like to do is open up. Ah, wire framing application. Now, this could literally be anything you could use. Wire frame dot cc. You could use photo shop. You could use a piece of paper, a pen and a piece of paper pencil, piece of paper, whatever works best for you. So this is just typically a guideline. But of course, if you are designing a website for a client or customer, then you want to make sure that your designs are really nice and professional. So then I would advise using something like photo shop to really does illustrate what you're gonna be designing for that plant. So because this is gonna be a Web course, I'm just going to do a quick sketch of how I want to present the content. And in html, I usually like to present the content in different sections. So way I think about HTML structure is what are the different sections of content that I'm gonna have represented within my Web screen. So the first thing that I wanted to add in is I wanna have a navigation bar all along the top here. I wanna have just a simple navigation bar. Let's do that first. So I'm gonna draw something right across the top here and I'm gonna turn it into just a placeholder. Eso We've got a rectangular shape here and then within the rectangular shape itself, I'm going to add in all of my menu items so might have potentially several different menu items there as well. It's another area within the website. So additionally, I I wanted to be essentially a three calling website. So we want to structure our website in a way that we can represent three main columns within our page and one of the other things that when you're designing the website, So you got to navigation and typically you've got your header section. So this over here is going to represent my header section and I'm gonna have it just floating there. I'm not gonna have a border around it, so it's just gonna automatically flow into the rest of the content on. So this one up here. This could potentially be a shaded color, so it stands out a little bit more and so on. So maybe we could even make it black. So really distinguishes that this is a different section or different caught container for our content than the rest of the content. So next I want to add in different columns, So I wanna have essentially a three column website on a full screen. Eso I'm just thinking maybe we could do. Typically, we could dio several different columns. We can size them. Whatever actually works best for us. But in this case, maybe we're going to do them all roughly the same or weaken due to the same one slightly smaller So we could do something like this section could potentially be, uh, 35 or 36%. This could be also 36% and then we can have a smaller one. So this conserve kind of like a side menu and also a content section. So let's side that in there as well, and maybe float this one to the center, center this a little bit. And of course, we're gonna be adjusting the spacing as we develop it. The website eso. Lastly, the last piece of the structure of our website we're gonna add in a footer area so this footer area can contain copyright information or just crucial information about the website contact and so on. So I'm just gonna add that in there at the bottom, and I'm gonna shade it slightly later than the navigation bar so that again it does stand it and then I'm gonna have content there in the middle and so on. It's another thing that I wanted to add in is I want tied in actual navigation menu. So I'm gonna just do that over here, and this will represent all of the whole navigation menu. So any Clinton that I have represented and in there and this will probably not stand it, we're probably not gonna have it standing out, but we are gonna have some text in there, so this may be a little bit later for now, or we could represent different shapes for each one of the navigation menu items. So this is again up to the dis different types of designs that we might want to work with so we might have something where we've got each item here that we can pay state. So in our menu, we probably could use maybe four different main pages. So I'm just going to simply pay state these mean pages. So this would represent the actual navigation bar. Okay, Does a rough sketch of the way that we want our content presented on the full screen now because we want to make it responsive, we might. We might want to look at different designs for different, different screen sizes. So we're gonna move essentially, the navigation bar will stay at the top, and when it drops down, we're gonna have that hamburger icon where we've got the 33 straight lines and that will represent the menu. And then we'll have the menu coming out here as a drop down vertical menu, so each item will take up the full with that's available with. We're also gonna have to stack some of these items here some of these content areas. So maybe when we shrink it down to roughly around 800 pics, we might drop this third content area below these two and have one into content areas. And then when we really shrink it down to the mobile screen. We're gonna have these content areas representing full with. So essentially it'll stack one on top of the other and they're going to represent full with and these air content areas that we're gonna utilize throughout the entire website eso They're going to be essentially areas where we're gonna have to place some kind of content , and it's gonna make have to make sense within each page. Of course, we can make some adjustments to this where we can have maybe two of these columns come together and still have the 3rd 1 for a contact form. Eso. We're going to develop all of the suit within the next set of lessons, using this as our standard guide to develop the website. So the next lesson we're gonna begin typing out and creating our HTML code and preparing to add in CSS later on within the lessons 5. 4 Create parent elements HTML structure: in the previous lesson, we did a quick sketch design of how we want our website toe look like. So this is how our initial website is gonna look like. And of course, it's gonna look differently on different sites screens, and we're gonna add that in at a later point. So we want to start with looking at taking a look at our design and really getting a better idea of all the different containers and what I mean containers. It's a set of different elements that would move together whenever the website resize is. So this is looking at this. We can immediately see that we've got one up here, which is a navigation too, which is gonna be the header Three, which is the first Section four, which is a second Section five, which is the third section and six, which is the footer. So we have essentially six main content areas within our website. So let's design that and create that within our HTML. And one thing that I did want to note is that I want to keep the navigation bar fully across the tar with of the website. So this is actually going to sit outside of the main container areas. So essentially we need to design our website from the body down and we're gonna have to main content areas. So the 1st 1 is just gonna hold the navigation bar here at the top. And it's gonna work independently of the rest of the website, which is gonna be limited in width and is gonna have a fixed with and then this is going to contain the other the other five sections for other five containers. So we're gonna have to parent containers. So let's build those out in our website s. So we do have our editor open here. We've linked to a style sheet, so we're all ready to go with our default template and now we can start adding in our HTML code. So the first thing that I want to do is add in a section for the navigation bar and then next and then within. Here's where we're gonna add all over navigation items. So we're gonna have a bunch of list items here, so a nordeste and list items and within each list item, I don't have an h ref Teoh A different page. So I'm gonna do index html because it's gonna be our first page that we're going to start out with. And this would be home. The first item within the list is gonna just be going toe home and then we add in every other every other list item that we're adding in is going to be another link within our navigation bar going to a different page. So typically in a website, you're gonna have an about me section. So we're gonna just create that that link there last one is usually a contact, and I'm just keeping it within that same format. So I've got the page name there, and it's linking to the name over here s O This one could be. If you're selling products or services, you could have some information about the services that you offer. Eso gonna add that one in there as well? So this is an information site about services for a typical a typical small business. So here we've got a navigation and next we need to create the other main parent container s Oh, this is gonna be a div, and I'm going to give it an I D. Of rapper Essentially, this is where all of my main content is going to sit. And we're gonna place all of those main sections within here as well. The first section that we are looking at is a header. And then within that header, I'm gonna have maybe in each one there and it'll have company name and we can even do maybe something underneath their slogan or something like that, depending on how we want to represent it. So we could do a small element here. And so put a slogan here for underneath the company name eso The next section that we have , we're going to create sections we do when we look at our design. So we've got the header. We've got the knave. We've got all the order on ordered list items. So now we need to create three mean container areas. Eso noting that this one is going to be difference. We're gonna have one two sections and we're gonna have on a side. So using html five and with HTML five now, we have semantics for our element names. Eso we call them sections instead using dibs usually throughout before html five were using dibs repeatedly So essentially these new elements tags are gonna have a name for representing What kind of content is gonna be represented within sight. So this could be so for now, I'm gonna put in first section and then we're gonna add in some police holder content as well. So one section, two sections. So this one would be our second section, and then here we're going to create a different type of tag. So this is going to be known as outside because this is for sidebars. And this last section essentially gonna function as a sidebar. So maybe we can call it a sidebar so we can distinguish it from the different content sections for our website. And then within here we're gonna have a bunch of content. And then lastly, looking at this eso which one are we missing outs? We've got her head. We've got section section a side for the sidebar, and then this area here is the footer and notice that it's contained within that mean are operative. So we're gonna keep that inside of there as well. So footer And then here we would have some typical copyright information and so on, So copy rights. So it's saved that and see how it looks now when we refresh our page. So this is the brackets, live you here and essentially it's some whatever I'm typing in here. It's showing here within the display area. But we eso had to refresh it in order to get rid of the rest of that content that was sitting there. So now when you look at it, it doesn't really exactly look like a website. But we actually do have something being presented within the view area. So the next lesson we're going to continue to build this eight and get it ready and prepared to start adding in our our CSS to attach styling to it to really bring this website to life. So all of this is coming up in the next set of lessons. 6. 5 Add resources and dummy placeholder content: this lesson. I wanted to add in some placeholder content and really begin to have our website structure really come out us so that we need to get some default text in. There s a placeholder text. So I'm going to get some text generated over here at blind text generator us. We'll just see. Maybe we're going to do a few different paragraphs here and just generated some text. So select all copy to Clipboard and going back into our HTML. And here I'm going to just pop it in here, and I'm gonna do the same thing. So maybe we have a little bit shorter a little bit longer. Their copy it to clip forward on this is going to give me some content within my second section in my first section and maybe the last section as well. And the sidebar might typically have some images. Eso might have some text, and we might have some images as well. So I'm gonna use place, hold place, hold it dot com, and I'm gonna add an image here within two paragraph. Let's go take a look at our website now and we can see now it's with just by adding and not content there. It's actually looking like something that looks quite a bit different than it initially did without that content. So we can continue to add in additional content as needed. And I'm also gonna link out to the different libraries. So one of the things that I did want to add in here is I want to add in on icon. So I'm going to create a separate give and I'm going to give it the class of my icon. My menu I could call it s So this is what's gonna show up whenever we shrink down the navigation menu. So we're gonna add this. We're gonna take care of all of this within the styling. Eso I wanted to use a resource called font Awesome. And the way font awesome works is it gives you access to a water Really cool icons glimpse on and you can really usually bring them into your web projects. So we just all we have to do is link out to the library in the HTML. So I'm going to just do that here and just stop before my CSS for my website CSS at his number of different ways to link out to font awesome. And now I can bring in this FAA bars, which is typical in indicator for a drop down menu. So I can add that one in here and now let's take a look at our website won't see what it looks like. So now we've got our menu navigation indicator. So the idea is that we're gonna hide our menu whenever we're on a smaller screen and hide the navigation menu or the my icon when we're on the larger screen and have it function within that way. So place of versa as well. So now let's go into eso one other library that we do need to add in that we should take care of as well. And this is the J. Corey Library. So we are going to be adding in our javascript and so on later on, and I show you how to make some real functionality with your website, including adding in that whatever page we're on, detecting the Web page that we're on and setting an active element and so on. So this is gonna be done through G query and essentially what G query is It's a JavaScript library, and it has a whole bunch of really nice functionality that makes it really easy to create JavaScript or Jake worry that's going to interact with your Web page elements. So now we've essentially set up the structure and we're gonna have to be We're gonna As we go through with the CSS, we're gonna add in some classes and I ds toe and identify the different elements within our HTML structure and a Zwick build dot owed. It's actually gonna start to look more and more like a website. So essentially, this is where we're at right now. We've gotta be six structure here and we're ready to go with adding and CSS So this is coming up in the next set of lessons. 7. 6 Apply Styling to HTML top level elements: We've already linked out US style CSS to our style CSS file. So now whatever we're typing in here, we can automatically see that it's gonna take shape within our display area. So I just saw that I added in a background color and right away because this file is linked and brackets is showing us alive. You of what's happening? Our web page and we're gonna add in all of our CSS now. And usually the way that I like to start with CSS is to start with the first element that encounter eso. First of all I'm encountering here is body, and this is a great place to set your background color. So if you're using a background color, you've got a background image that you want to use and so on. This is the place to actually to add that in and set that up. So I'm gonna do kind of like an off white background. And maybe we consumed the font color toe also be off black. And then this way, if we change anything Teoh a black color, then it should stand it slightly from the rest of the text. So this gives us the ability, Teoh, make some additional content that stands out. That's one of the thing that I did didn't do within those default section is that I did were added in some hyperlinks and hyperlinks, as we know, are essential part of any website eso typically on websites, you're gonna have hyperlinks throughout your content and a number of different places where the hyperlinks could be sitting. So I'm just adding in some some placeholder links and just right, adding in some of that random content so that we we've got some hyperlinks within our text other than what's within our navigation bar. Because we are gonna be styling that s o this no longer will be affecting. It s so we're gonna right over the anchor text styling, but for now, So we've got some hyperlinks within the body and we want to take care of those as well here , right at the top. Eso Typically, for modern websites, you don't see a lot of the underlining that's done by default with with HTML. It's a lot of these elements have some default properties and for anchor text, one of the default properties as a text decoration. And so I usually like to remove that aid and add that in whenever they get hovered over. I also like to update the color so the color of the links and I usually pick something that goes along with the color scheme. But we haven't decided on the color scheme yet, so I'm gonna do something bluish color, and we're just gonna leave it at that. And of course, whenever you're designing, just make sure that the hyperlinks, the all of the background colors and everything matches in with your color scheme. And usually when I'm unsure about what colors I'm going to be using, I use a great scale scheme. And that way I know that the different shades represent different colors. And when I do, when I do pick out the color scheme that I can really easily make those updates. So let's add in on hover. So whenever it's hovered, so text decoration and we're gonna add back in that underlying. So whenever it gets hovered, it gets underlying because users are typically expecting something to happen whenever you're hovering over your your hyperlinks. Teoh really Teoh so that they can understand that these actually are meant to be hyperlinks and also sometimes you might want to update the color as well. So you might wanna have it maybe a darker color or a lighter color, depending on what your color scheme is. So we see that now these any user coming in should be able to understand that these air now link and they do stand out from the rest of the text eso we're ready to go with continuing to build out our website. One other thing that I do like to add in is that updates for images is, as we can see here. So this image down here, it hangs off the available space. And whenever we make our website responsive, we want to make sure that our images are capable of re sizing. So this is where I like to set images as knocks with and give them a max with of 100% and the way that Max with differs from just with So what is the default designation of the signs? So if I just change this toe with this 3 50 by 1 50 takes the full available with but Max with works within the defaults of that image. So with Max with, we're only going to go up to a max of 3 50 And this prevents images from being pixellated, distorted, blurred I, and also allows them to resize when you resize your Web page. So I'm just going to show you now that this webs this image, even though it's 3 50 by 1 50 when we shrink it down and doesn't have the space available, it just goes and reverts to 100%. So the next lesson we're going to dive deeper into starting to set up our structure. We're gonna work with their navigation bar wrapper and really build this out to make it look like an actual website. So all of this is coming up in the next set of lessons. 8. 7 Navbar setup and styling: in this lesson. I want to cover off how to transform this a Norden list into a navigation bar. We're also gonna hide this might icon and have it not showing up on the larger pages because it's irrelevant here because our menu is already open and visible. We've got enough real estate within our Web screen in order to display our menu items. So let's take a look at our navigation menu and build the so so First of all, when we look at it, it's on a nordeste, and this does not look anything like a typical navigation menu, as you might expect it, toe. Look, I'm just gonna add in some spacing here so that my page automatically when I refresh it, doesn't go all the way down, and we can see that the actual CSS thing and be applying more centered within the page. Eso Now, let's add in some styling to this, and typically you might be using knave in a number of a number of places within your website. Eso Usually I like to apply some kind of identify or their eso you might use your have. You might use an idea you might use a class and, as we know with I DS, therefore particular elements and for classes, you can use them over and over again in multiple elements. Eso Either way, whatever works best for you, you could add that in an update your styling. So let's take a look at this. And first of all, let's identify that are knave, and we're going to give it on Idea of Knave Bar. So this is going to allow us to identify and distinguish this from any other now that we're using within our Web pages. So then let's open up our CSS. And from here we can start selecting an updating styling within aren't now bar, So we're going to do now far identifying it. We're going to select any one ordered list that's within our now bar, and let's apply some styling toe that. So the first thing that we want to do with the UN ordered list is what changed the different list type for the list style. So we've got an option here within CSS Teoh update the different list styles, and I want to just remove it those those circles there s so that we can easily start to build this out and make it actually look like a navigation bar. There's also some default values here for margin. So I want to get rid of that default for potting so loose. And just to make sure and we see once we get rid of those defaults that we get pulled all the way over to the left hand side, I also want to add in on overflow. So this is if any of the content flows over the edge. I want to hide it. So if I've got an image that flows over the edge and so on, I don't want to have to make it visible. I want to set a background color. So this is typical of what? The way that we sketch did our Web page. So let's take a quick look at that. Originally I had in a really dark shade eso We're going to keep that in line as well, and I could even go with with the black color if I wanted to. So I'll just add that in. And also I want this navigation bar to stay on top of the rest of the content, and this is where we use is that index. So said Index is a layering away toe layer your Web page content. So Zed Index will always sit on top of the rest of the content. So if we make this navigation bar floating or would make its absolute position, it's gonna override the rest the contents that's gonna hover over it. So we're never gonna lose our navigation bar and have it show up underneath somewhere content for some different areas because we always want the user to be able to access this particular this particular element within our Web page. So now we can continue to build this out, and we can identify list items within the now far so list items. So what I want to do with all the list items within the nav far, Let's float them to the left. And we see that when we floated to the left, we automatically get the horizontal version of our navigation bar. And we also want to add in some additional styling to these because we see that there really close together, and it actually doesn't look very good. So we need to add in some styling to those hyperlinks we also want to add in some different , different actions whenever we hover over them. And we're gonna take care of this because this this sits on the anchor anchor level. So let's create that and an anchor, and we want the display of it to be in line block. So this is in line blocks. Essentially, it's gonna take up, ah, block spacing of the available or, I should say, the full amount of space that's required for the content within the element. So we know that if we went with Block, then we go. It would take take up a larger space. But the in line block is typically set for elements that are in line, and this is actually gonna be more visible when we set some padding and so on. So when we do padding, Weaken said it maybe about 10 pics of padding at the top and to each one. Maybe we could do five picks, so we have some spacing around it. Eso, left and right is five picks. Talking bottom is 10 picks. Let's update some Let's. First of all, let's remove out that text decoration eso, in case we didn't way have removed it up here. But this is just in case. Ah, lot of times it's a It's a good idea to Riyadh these properties, this styling properties because in case you're updating your website and you decide OK, well, now you wanna have text decoration under the hyperlinks? Well, we want to set. Make sure that our knave bar hyperlinks actually looks like a knave are So I wanted to add that in as well. We can set a font size, so let's do one e m. And also let's update the color of thes eso. I really wanted to stand out a little bit more Eso weaken do Alice Blue, which is a white ish color weight blue color. Maybe also we want to make sure that our text is aligned within the center of the available space with the element. So we're gonna central line it, even though I think by default there, it's centered anyway because we're using in line block. But it's always a good idea off. When in doubt, toe add in that property and just make sure that it isn't doing something that you might not expect it to do. So now looking at this uh, there It looks like a navigation bar, but we don't have that interaction set up and ready to go yet. So whenever we're going over these elements, nothing is happening. And typically within a navigation bar, you'd actually expect something to be happening. And this is where the pseudo pseudo elements of hover or pseudo class of hover And whenever we're actually taking that action, then it fires off the properties for this, What? For this styling. So whenever we hover over it and I know I said I was going to stick with the gray scale, but I am gonna add in a little bit of color here whenever we're hovering over it s so that we can see that something is really happening here. And it's really standing out on also, maybe we want to even update the color, so make it a dark color. So I guess I'm going for more of a Halloween theme. Here s so we're doing like an orange color coral color whenever we're hovering over and I do have it zoomed in. So if I go back down to 100% it's starting to look more and more like an actual navigation bar. And this is something that you typically would expect when you're coming until website. And this is something typical that you would be expecting to interact with within your website. So one other thing that I did want to get rid of within this lesson and that's that this one here, this my icon so I can get rid of it in a number of ways. But I do have a class for it. So I'm gonna simply just access that via the class. And I'm gonna do a display. None. Before I do that, will, I wanna set up that font color. So I do want to set a background color as well. So I wanted to be in line with the background of the knave rul. So these air different elements and I could actually probably just put the background color in the now bar. Maybe that might be a better idea. So we're not actually repeating what we're doing and a quick look here just to make sure that we don't have any anything outstanding. And here let's update our color of this to make it the same as was set up our anchors there . So now we've got it white and probably want to make this bigger. So font size. I think we did have an option within fought awesome. Teoh, get larger size icons s Oh, yeah, we do have an option here to update the different sizes. Gonna quickly open up the editor here and I can see f a six. So I think that that actually is setting the different sizes. Some we go down here, this is F five s. So this gives us that some options to resize. We can just simply added in just as it's added in so we could do f A for so that that should make it bigger. Let's refresh it and it doesn't Oh, I do have the thoughts of sitting there. That's probably why it's so let's actually add it in as font size so font size and maybe do 1.5 p. M. And get rid of that so we can control it in a number of ways. We can control it through our styling. And I think there was some default styles that are built in with font awesome as well. So either way, you can get that navigation menu up to the size that you're looking for by doing a font size or updating within the CSS, adding a class to it. Let's add in some padding swell. So, you know, add in 12. Or I could just do 10 all the way around 10 picks all the way around. So it's not sitting right up to the edge there, so it's got a little bit of padding in space around it. And finally, now we're gonna hide it away from our view, and we're gonna look at it again when we're building out and adding on our G query, and we're gonna toggle the display view so that we can see that when we open up her menu and so on. So then it's gonna be actionable for opening up her menu. But for now, let's work on our the rest of our HTML and CSS to really get our website functioning, and then we're gonna add in responsiveness in the later lessons 9. 8 Creating a content wrapper: as we go down in our HTML structure, we next we encounter rapper. So rapper is our one of our talk level elements here, and this one is designed to contain a whole bunch of content within it. A whole bunch of sections within it. And this one I actually want to set default Max with to it. I don't want it to be fluid, and I don't want it to be able to expand all the way out S o. I want to shrink down our web page because this way, we can see actually where our content is sitting. So I shrunk it down quite a bit, and now we can see the different effects that's gonna take place. So I'm gonna set a max width. So just like with the images, I didn't set a max width of 10 80 and just refresh that. So we see that now that I've set a max width of 10 80 maybe also gonna do a quick border around it so that we can actually see where that content is sitting. So I didn't actually even have to shrink it down that much and make a touch bigger to 11 80 . So now we see that this is our mean rapper area, and it's we see it's getting pulled over to the left hand side and this is another default . Eso Let's take care of that. And another thing that you might have noticed is that we do need to shift it down because I don't want it. I don't want them. I want to leave some spacing for this menu as well. So I want a position it relative, and I want to move it down from the top. So relative and absolute give you the ability to move positioning down. So I want to do what I do want to do is move it down slightly so that I do have some space in there from the now bar. That might be a little bit much, but we'll see. We're gonna update that. And next we're gonna look at centering it so centering it can be done through margins and we're gonna set the top and bottom margin to zero and the left and right. We're gonna set toe auto, so this will automatically center any content, any elements. But just by adding in that auto, so Now we've got all of our positioning, their of our main content and now we can build it all the different sections within that content. So the next lesson we're going to do that and we're gonna set up essentially header the three columns and footer. So that's all coming up in the next of the lessons. 10. 9 Creating a header: moving down from the rapper. The next main content section area that we see is Header So this is gonna take up a full available spacing that's available within that element. And so now we're gonna identify it. We have different ways how we can identify all of these different spaces and we are gonna need a way to separate out all of the different sections. Eso we need to give some identifies here for the section so I'm gonna add in first section or this could be mean And then the 2nd 1 could just be second so that we can identify all of these different sections because I do have to section elements here that's distinguished between them and this one can be second. So now, looking at this, I have rapper. So the parent is rapper. I've got a header tag within that rapper and maybe in a copy, this it remove it from there and so we can actually see which one we're working with. So we see that we're working on that header section and this is where we would set all of our header information. Eso Let's set a default height for it s Oh, maybe do 1 20 picks. That gives us enough spacing and add in some potting there. So the words aren't just hanging there, right on the edge. So I'm gonna do maybe we could do a top and bottom of 10 picks and we can do a left and right of 20 picks can see how this looks, So refresh it. And so now we've got something that looks more of the order of a header area, and I'm going to remove out this border because they don't want to necessarily have a border there we might want even include a background color eso This may be a really light shade, so it distinguishes our header from the rest of the content and maybe not that late, So make it a touch darker so that we can actually distinguish where it's located. I also really like to use border radius eso that we're not as boxy and this gives us around . It edges styling as you can see here we can do left, right, top bottom and so on. But I got a round all of the borders. So maybe do 20 picks rounding or 1 a.m. rounding So let's see what this looks like. Eso slight rounding of the corners. And once we get rid of this, it looks like So now we've got a clear header area and we could start working on the different sections. And we are We do have a weight identify them, so we don't need to specify that their within the main rappers. So we've got a main area, so I'm gonna put that border within their s so that we can see which one we're working on. So the next lesson, let's set up that mean border section. 11. 11 Setting up sections sidebar and footer: So the last lesson we looked at, how we can set up a clear header. And now we're gonna look at setting up this means section. Let's go back, Teoh Original design quickly and take a look at this. So we've got our header there. So that's showing up. And we've got our first section are second section and our sidebar. So we see that right now they're all aligned. And this is very similar to what's happening over here with the menu, because each one of these different elements is aligning itself left of the other elements so or to the right of the for the element in front of it. And they're nicely aligning themselves. And we can take some cues from there and set up all of our different sections within that same type of format using float. So let's open up our first content area and have main so already added our borders. We can see what it looks like. Now let's float it over to the left and when you're using float, so I'm gonna show you what happens now so we see that it's actually floating. It's only taking up available space that it needs And then what's happening? That second section is floating right next to it. So this is not ideal. We need to be able to set and width of it. We need to be able to add in some padding so the words aren't hanging right on the edge. So let's add in some potting five picks potting and refresh it. So the wording is paying a little bit better, but we still need to be able to identify it with wives. And doing this is going to really allow us to build this website. It s so we we can look at this and roughly estimate that are with is gonna be the maybe 38% and see what this looks like. So now that we're taking up 38% s Oh, this is roughly the amount of space that we're gonna be allocating for this particular section. So now we can do the same type of thing for the next section, and you always need Teoh be ready to really calculate out all of these different sections because this is something that when we're adding and patting reading and borders, So this is taking up part of that 100% that's allocated to that element Or that that particular container eso always be mindful of the fact that all of these count into our full with eso. Whenever we are doing our calculations, make sure that we're not we're not overlapping and that we're only using up a maximum 100% . So now we've got our second section, so everything looks pretty good. And now whenever we add in our sidebar So I'm going to do this one as a rapper, a side I could have, of course, given an I D as well eso There's just different ways to Teoh identify the different sections, the different elements. But I think I'm gonna use the rapper a side so I don't have to clutter up my html by having too many different areas that I'm identifying. So let's pop this in. And what do you think is gonna happen here whenever I add the sidebar? Because we're gonna be well over, are available with So what happens is it automatically drops below. So we don't want this to happen. We want it to still stay up there to the right hand side, and this is where I met by having a really calculated it. And a lot of times I just kind of guess it an eyeball it just to make sure and see how much space I have available on. Of course, if you're designing your website, you should really mathematically work the same way and see exactly how much space you have available to U. S. So I like to see it also in the re sides. I'm gonna set some breaking points in here. Eso This actually doesn't matter that it's dropping down here at this point because this is where I'm gonna set the breaking point. Eso up until this screen size, let's get it up to 100%. So this is 100% size. So you see that as we shrink down and we're gonna have to start setting some break points will make it responsive. So we're gonna have 2% a break point there and maybe make it take the full width and then each one of these, maybe 50%. So that is coming up when we've set up the responsiveness of the website. And one other thing I did want to add in We see that when we are stacking at the copyright , doesn't know, really know where to go it. So this is the footer and it doesn't really know where it wants to end up because we haven't really given any properties and the instructions of how we want it to handle. So what really had happens here is whenever you do afloat, you have to clear that float. Otherwise, the next element is actually going to try to fit that space. So let's clear both eso. This clears both floats left and rights, and now when we refresh it, we see that's taking up the full available spacing and let's give it some more properties here, so give it a width of 100%. And we also had a background color within our design. So let's add in a quick background color, and I believe we were trying to do something off. Great. So let's see what this looks like now. So now stick of look at our web page and we've got our copy right there. We've got all three sections and we can also remove it thes borders because thes borders don't really looked great. So we're gonna update that Refresh it. And essentially, now we've got our three column website. Let's go back and look at our design. So there's navigation. Header 1 to 3 columns and footer. So this is our website. And I know the shading is a little bit off and actually should have brought this in because this one is not not floating along with the rest of them. So maybe update my design a touch, and so they're real. So it's more along the lines of something like this. And of course, I know we have rounded corners and we have some spacing there s so you'd have to make these types of adjustments as well on. Also, if you did present a design to a client, just make sure that yeah, it looks exactly like what the design is. So make sure you do the colors the same that you're presenting and so on. And if you're using a navigation bar, make sure that you're indicating the colors properly there as well. So next lesson. Let's continue to build this out and make some tweaks, and then we're going to introduce responsiveness to the website, and that's gonna be a really nice effect, and that's gonna take care of this where we're having the different sections and it doesn't look quite right. So the responsive Whenever we add in the media queries, this is gonna take care of that. And all of this is coming up in the next settle essence. 12. 12 CSS tweaks and fixes: I wanted to make some tweaks and adjustments before we continue on and make it responsive. So just look at the website right now, I want to make some adjustments to the way the footers presented. So I want to center that Clinton and make some just some additional tweaks to it. So text the line and we're gonna line the text to center. So I think that a lot of times you're gonna see footers where the text is actually centered and also gonna set a color here because I don't think that one that one's too dark. So this one's a little bit later and more in line with our design. We probably don't wanna have that's solid border around there and probably want to add in a default height to it. So give it a height of 1 50 and then also add in some potting around the words. So it's nice and centered. Do that. So now we've got some padding nicely centered. We've got a really nice lots of available space down here within our footer section. I also want to update the way the nab our is being presented. I want to add in some more potting so that these menu buttons really stand out a little bit better. Maybe I could even just do 15 all the way across. So 15 top bottom left and right. So let's see how this looks. So this makes it quite a bit nicer, quite a bit more outstanding. We can also update our nav bar where we're positioning are now far. So we probably want to set up our now bar and have it sit rate up here within the the top corner. So I'm gonna actually move this, move this one down and move it over, and we are gonna take care of some styling on there and the reason that I'm moving this is because the way that's being presented in the order is being presented. That's going to save me some styling when I make it responsive. Eso moving that up there. And another thing that I want to take care of is adding in a position for the nav core. So let's set it up as position and give it an absolute position because I always want to make sure that my nav bar is sitting in the top, right. It's where should say top left. That should be top left. So we have an option to you to go right or left. I want to make sure that it's display is block. And I also want to make sure it's with is always 100%. So let's refresh. That s so this gives us much better presentation of our content. And also now we see why we added in under the wrapper there why we needed that 40 picks. Because now we're relative. And that just means that if it was zero socially, what zero looks like s zero r summer content would be overlapping and so on. And making note of that, I'm gonna actually move this zed index out here as well. And I'm gonna also do that overflow out here as well. So take it off the an ordered list and put it on the parent there. And basically, what this means is that whenever I resize it, here s so we've got we got to take a look at it. We can have our menu here fixed to the top if we want to do that as well. So these are some of the options typically you. Probably You see these on the one page websites where we're floating over the content s Oh , this is an option as well at this point, depending on what our design is, and also depending on how much content we're presenting here. So if we don't actually have a lot of content, we're not gonna need to have our menu here sticky at the top. If we do have a lot of content and we might want to have it sticky at the top So all depending And we're gonna show you the different ways to do that once we make it responsive . And once we add in the different properties within styling to really to demonstrate the differences on resize. So in the next lesson, we're gonna add in our media queries and I'm gonna show you to do that. And this is what's gonna make your website responsive. We saw that whenever we're shrinking down here that the sidebar isn't quite right. And whenever we shrink it down to a really SISE really small size, nothing really looks right. Like these sections there way too long for someone reading on a mobile device that they'd have to scroll down and so on. And then they'd have to scroll up to see the next section. So not ideal eso. Let's take care of that in the coming lessons. 13. 13 Add media queries make it responsive: This is our current website and essentially we've got a header. We've got three sections footer and a navigation bar. Eso everything is coming along like original design was eso now I wanted to add in some additional options here and action. I'm also looking at this and thinking that we should update the rapper toe, have a background of white, so I'm gonna add in a background color off white and just refresh it. So now the content is going to really stand out a little bit better on also, I'm gonna add in some potting on the rapper 56 So now let's some so we because I added in the padding, I've gotta adjust the footer as well, so let's take care of that. So instead of having five picks, let's do 2% and then knowing that the footer is 100% I need to update that to be 96% so that it it floats more centered within the content and now we're ready to build out the rest of the website and make it responsive. So with chrome and one of the reasons I like using cruel is because it's got deaf tools. So I'm on a windows machine so you can just press right click, inspect anywhere where you can press control shift. I you can go up into the drop down here and you could make a selection for the deaf tools there as well. So what Deva tools does is it gives us an overview of what's happening in the different elements so I can see how much margin border poundings this is the box model. So, on any element I picked, I can get a whole bunch of information so I can adjust it, remove it on so on and really get a better feel for when I'm designing my websites what it's gonna look like so immediately. When I'm looking at this, I see that this is dropped down. The side bar should be taking up instead of taking up the original percentage when it the screen breaks, I need to take up even a different percentage. So let's look at where it breaks in the screen. So I've got a screen size up there and I've also got this device toggle to a bar, which is a really nice function within the deaf tools because as we can see. Now I can make my Web page look like as it would on a mobile screen that was 3 75 by 6 88 I can also make it dynamic and adjust it manually so he can see here. How many picks across, and we see that roughly around just under 800. This is where it drops down. So this is where ideally, want to set my first media query and this is my first break point that I want to work towards. So it's open up our editor. And now I want to add some custom styling, too. Any content that is underneath or falls into being smaller than 800 pics. So, Max, with okay, let's do a 20 just to be sure. So now any of the styling I in here. So if I do something like body background color on, let's do all quest, so something that really pops it. So now when I refresh it, we see that when we shrink down under 820 picks, we get on aqua background color. So this is something that we can adjust where we can take our content up here and make adjustments to it. So let's take our wrapper and we're not gonna worry about body. But we're gonna take our wrapper and have zero patting. And I usually like to copy and paste s so that I can see what elements I need to change. And everything else looks pretty good. So I don't need to make any changes on those ones. So we only apply to the ones that were actually making changes on. So we see that whenever a shrink it down, we're gonna lose that padding that's around there. So that's exactly what I want to happen because I do wanna have the ability to really isolated that content and have it at 100%. So see, as we get bigger, we've got the content of again available to us and so on. So now we shrink it down, and at that point we also want to make some adjustments. Teoh these main elements. So we've got the 1st 2nd and ask side. We want something different toe happen with them. So I do the same thing that I did for the rapper, and I got a copy and paste it down. So the first thing that we want to do is we want to set a with So maybe we want to do something like 45% and have a little bit of potting. So maybe a change, even the potting to a percentage. And we're going to get rid of this floating to the left, so padding and with are the ones that we're gonna set. And so what? The float toe the left. We've got 45%. Maybe this one. Now we want to floated over to the right, so that is going to make sure that it's on the right hand side and put the spacing in the middle between the two elements. And we want to adjust the padding and with as well and then the east side. What we want to do is the same thing that we did for the footer, where we want to clear both. So we don't want any of the floats there, So just clear out both of the floats and maybe we want to keep potting at 5% so believe it was already 5%. So just leave that. And now we want to do 90% for the entire with. So let's take a look at this and see how this turns out. So when we resize it so it didn't exactly a line there, so I'm using up a little bit max excess space. So I need to make some adjustments to this, so I'm gonna adjust these down to three and a little bit better, But I still need to make some adjustments and these air because there's some built in properties into them already. So now we see that when I do inspect. So I've got my padding there. So I've got some padding there, and it has to calculate out to the full available padding. So you see that now it's adjusting really nicely, and we need to set one more breaking point there, and my sidebar automatically stocks underneath. So let's add in one more media query as gonna be adding that in in the next lesson, and that's is going to set our final default size, and it's also gonna just toggle the menu. So this would be the point where maybe if we shrink under 500 picks, this is where we want to really adjust our menu. So this is coming up in the next set of lessons. Okay, 14. 14 Add additional media queries: in the last lesson, we looked at how we can set a breaking point and one other thing to that. I want to just the footer there. So I realized that I hadn't taken care of Footer properly, So let's make our adjustments to that one as well. So because we removed out some of that padding eso Let's our potting to zero and maybe we won't even adjust the height. So this is all depending on how we want to handle our content. Text the line. We don't need to repeat colors. We don't need to repeat clear. We don't need to repeat and maybe want to send it out 100%. So it's take a quick peek and see how this is looking. It's not much better, and I'm thinking that maybe we should set our media query. Our breaking point at 600 picks is maybe want have more navigation menu items and so on. So this gives us some flexibility and room to update our content, and I also want to get rid of the way the header is being handled. Eso that rounded sides around that header. Eso want to get rid of that as well. So let's add that in heights, let's do potting of zero border radius zero and after on color, we can remove out and height we can remove out. Unless, of course, we want to set a different height. So now it looks a lot more aligned, sits on a square in a square and nicely aligned us. Let's start building out for a minimum size as well. So sometimes you do want to set a default size of your content that you might not want to shift underneath. So let's copy of our media query and I'm going to scroll down and let's set it at another breaking point. So this 1 600 picks so sometimes you're gonna set multiple media queries I've seen depending on how much customizing and how much you really want your screen to be adjusting . There's a number of different options here for setting your media queries. Eso let's set our wrapper with and just gonna set it to auto with, so this works the same way where it automatically centers. That creates an auto myth and so on. I don't need to have any of the padding cause I've already removed it out at the last breaking point. Select. Look at her header so we don't actually need to include that because I think that that one is fine. The next one is our content area. Eso are content may be going to sit the content toe with auto. Remove that float so that's that. Float to none and let's give it a margin of zero just to make sure that we don't have any lagging margins in there. So margin zero and probably enough to do the same thing for the side. A second item so that takes up full with automatic with removes the floating. And for the sidebar. So we've already taken care of. A lot of that may be what we want to do is remove the padding as well. It's already got clear both, and let's change this with the auto so that were consistent and footer. Let's do that with the auto as well. So let's take a look at this now. Whenever we shrink it down below 600 we see that it nicely stocks itself and presents it the content in a nice, neat, stocked fashion. And then as we get bigger, we get all of our columns presented. And as we get smaller, the two most important columns and then the sidebar would probably potentially be something that's not as important. And the most important content we always want to keep at the top. So essentially, this is our website right now. And in the next lesson, we need to update this navigation menu. So we see that as we shrink it down, it doesn't actually shrink down really well. So this is something we definitely toe Look at and we're gonna take care of this in the upcoming lesson. 15. 16 Setup responsive navbar: in this lesson, we're gonna update our navigation bar. So the way that we wanted to look whenever it's on a small screen. So we want a button there to be clickable and open up that navigation bar menu, and we don't want it to stock horizontally. We do want to bring back the default vertical stacking order. So let's take care of this. And in this lesson, opening up her editor. And we wanted to set it up on the media screen whenever it's less than 600 picks. So we've got our max width of 600 anything that's less than that is going to get these properties added to it. So let's open that editor and also gonna open up the display area here on the right hand side on. We refresh it to see the new changes there. I can also re link it. There s O that now brackets has linked once again and let's open up her navigation menu. So we want to ideally make it on a really small screen. So that opened that up. And now it's at in our styling there. So first of all, let's some let's turn, let's update the list items. So let going back up here just like what we did before, where we've got all of our navigation items there. And then what we're gonna do is we're gonna hide it. So I need to make some updates to probably a few of these. So I'm going to just copy and paste it, and I'm gonna put a placeholder sear. So I know which ones have copied and pasted it. So 1st 1 the one ordered list list style tight, and we see that this one probably doesn't need a lot of changes. This is where we're gonna actually add in the display. None so displayed block for now. And then we'll update that to be none once we're ready and next. Or we could even do it on the list items as well s. We see that the list items have afloat of left. Let's float it to none. So get rid of that and we see that right away it takes up the proper spacing there. And let's update these to display in line. We're actually going to remove that in line because let's bring it back and lying. So let's leave it at block right now. So display block and quickly take a look and just make sure that s so we've got these are in line block right now, So let's get rid of display in line and just leave it in line like that and maybe update this one back and let's align the text to the left. So we get rid of this in line, add in some additional potting to it, or remove it some of the padding because we're gonna need to take up less real estate on this one. Text decoration. We can get rid of that when we can get rid of and that when we get rid of eso for the hover , we don't really need to make any changes for the hunger either. So let's go take a look at this. No. And we see that this is how our menu is showing up. So we might ideally, actually need to add in our menu bar. So let's show this one s. So now that we've got this one hidden originally, I'm just looking for that My icon. Let's update this and add that into there. And instead of display none, I'm gonna display block that one. So that one shows up there. We want to actually pull it over to the right hand side eso instead of having it sitting there on the left and by default, we always want to have it on the right hand side as well. And we also want to hide this change that to display none. So the idea here is, once this gets clicked, then it displays the menu icon and again, depending on what your preferences, you might want to pull it over to the right. You want to keep it over to the left s again. This is depending on preference. But if we want to pull it over to the right, we could just do a text the line, and we can align it over to the right so that will take care of having our where navigation menu shows up. So in the next lesson, we're going to still make a few updates and tweaks to get it ready and ready and prepared for adding JavaScript for J query toe. Add additional functionality to our Web page. So all of this is coming up in the next lesson 16. 17 Setup menu for toggle of class: I did want to make one adjustment here because we noticed that they're not taking up the full with. So we ideally, we want them to take up the full with so that we can accomplish that by adding in 100%. So now we've got our navigation bar looking proper a few things that I do want to just as well. So I want to take care of the height of the the header. So the header section here. So we did set some default heights and usually on the small screens where space might be limited, we might want to just this height as well. Us have said it over to auto do padding at zero. This is just to ensure that on the smaller screens, everything looks the way that we want to present it. I should hide this one again. So let's scroll down to where we had are a Norden list and blitz display. None. So what we need to do in order to get this to work, we need to add in some javascript functionality, so make this clickable. And once it gets clicked, then we're going to show the navigation menu. We're going Essentially toggle that on an ordered list property set this up and add in a class here. So class And this class on the smaller screen is so this is for only gonna be utilized within style. CSS So what I'm doing is I'm adding a class here on the UL, and this is where I'm gonna actually toggle the display value s oh, this is gonna be a lot easier by actually adding and removing the class instead of updating it here and updating and searching out to the element. You could do it either war. But let's just do it this way where we're gonna add in and remove it the class. So the class is just gonna be small screen. And now, instead of doing this one here, we're gonna do small screen display none and make sure that on the full screen we're actually displaying, that's just gonna do it right under there and a rid of that one display. None. And but we got rid of the wrong one there, so make sure that this is displayed block. So let's just refresh that and we see that on the larger screens. Eso that's disappearing so that classes now effective there and on the smaller screens that's gonna actually it's gonna make it disappear. And I just had to save that and refresh it. So now we see that everything is working properly, and all we need to do is just toggle this. So have this button clickable toggle this on and off and that will show the menu and hide them in you. So that's coming up in the next lesson. 17. 19 Add jQuery event trigger: are you ready to add in dynamic interaction? So let's do it with J Query. So I've already added in the J. Corey Library. You can add it in a number of sources. You can actually even go to the G query website, and from here you can download the G query source file, or you could link to it, as I've done with the hosted library. So the choice is yours. And essentially, what this does is this brings in all of this JavaScript code, and you can access any one of these JavaScript snippets, which is J query and gives you a whole bunch of functionality. That's really useful, and it allows you to more quickly at in this dynamic capability than you be able to with JavaScript. So you right, Jake worry in the same format as JavaScript. You bring it into your Web pages in the same type of way where you type in script tags, and then you add in content in between the script tags. So with Jake worry, the way that it works is it's interaction within the Dom. And whenever we go to the website here, so it's got some information here to how to add J query and so on. So essentially interaction. The dome is a Siris of all the different elements on your website. We see that within our chrome consul here that we've got access to any element has all of these properties and values that we can really easily access. So you've got all of these event triggers. So the one that we're looking for within this lesson, I want to add in event trigger so that whenever this menu item gets clicked than it fires off a function. So we see the whenever I go over to it, I've got this eso I've got a whole set of properties here, and I've got a bunch of different event listeners. So I wanted to add the on click event listener and what G query. This is really easy to do because with G query, it makes it simple toe add into classes and identify elements for your classes. With JavaScript, it's a little bit more difficult to isolate out these different elements with the classes. Takes a little bit more court, so let's set up. R J. Query and Jake are essentially loads when your website loads so we can add that in as a function and G query of s functions within the document object eso We need to make sure that our document is loaded so you can either do it a number of different ways. You could do it with a function and added in like this and essentially call over so the J coury would go in here. Or typically you might see it written as document. And this is a method that runs whenever the actual document is ready. So we could do document ready and then have the function in there. So either way is gonna accomplish the same thing where we're adding in the functionality for Jake worry between these curly brackets here and this essential is gonna fire off whenever the dawn is up loaded and ready to go. So, as I said, it's really simple and straightforward toe Adam J query and create these events. So we already have a class here that distinguishes this particular icon, and we can put an event listener on that class. So let's update that and put in Esso in order to access the different elements we do the dollar sign and then here, just as we do with CSS, we distinguished the element that we want to create that interaction and the then handler that we want to do. The event binding that we want to do is a click. So there's our click and function and we can pass over the parameters in e as well. Eso these are if you want. If you had a anchor texting and prevent the default and so on, you could do that as passing over that event information. But what we want to do is really simple and straightforward. So what I'm gonna first do is a console directory that e event information so you can get a better idea of what Jake worries doing behind the scenes. So when you output something to the console, essentially, this is what's visible here within the display area. Gonna toggle that off, Open up the console. And I guess I got to make a smaller to see it and never we click this button. We see this event gets triggered, and we have access to all this information. So we see that we already know information about that particular element that's all been passed through the event on. We can utilize this information in Jake Worry, but we don't really need to do too much with the J query functionality. All we want to do is actually toggle that that menu item. So whenever it gets clicked, we want to toggle that and add in that class and remove that class. So let's do that as well, so we don't really need toe utilize the vent object. But I just want to illustrate that it is there if you do want to utilize it. So what we want to do is we want a toggle, that class that we added in. So that's that small screen class, and we want to toggle that off. Now let's take a look at our navigation but bar. So how we're selecting it and just like we do with our JavaScript, we can make our selection process in that same format so we can identify it that we've got knave Bar. So just over here, the same way. So now bar and we want to add and remove the class from the UN ordered list. So that's now Bahr ul and we want to remove the class and we're going to specify which class we want to remove. So you l selects the element. So this is the element selector, just like over a year where we added than that event listener. And the method that we want to do is toggle class. So as we can see from the description, add or remove one or more classes from each element in the set of matched elements, So depending so we're gonna look at this matched element and what it's gonna do. It's tucked in a toggle the class, and now we need to specify which class we want. Otago So going back up here and we want to specify that were toggle ing this sm screen on and off whenever it gets clicked. And that's it. So let's go back to our Web page to refresh it. And now we see, whenever we're toggle ing, our menu is opening and closing, and the really needs need thing about doing it this way is that whenever we go to the larger screen size that we're actually not hiding and showing the menu because it's all dependent on that class, and whenever we've got the menu open, then it stays open. So even when we re size and shrink it down, which most people aren't going to be re sizing your Web page, but it's always good to know that it's there in case you need It s So now we've got a fully functioning menu all ready to go. We can open and close it at any point and interact with it within our web page. So the next lesson I wanted to add in something really neat because way see that we're not actually sure which page were on. So even if we go to the index dot html, this should actually be highlighted, which will give us a better idea in a better sense of which page we're sitting on. So I'm gonna show you how to pick up what you are. L were at Match it in with the navigation bar you, Earl, and add in a class of maybe active s so that we can highlight this as in addition to having it highlight whenever hovering over. And this is a really good user experience because it gives the users of visual representation of which page there actually sitting on. So that's coming up in the next lesson. 18. 21 Setting classes on the fly: the last lesson we showed you how you can add J curry and create a fully functional event that gets triggered when you interact with your Web page. So this was something that's really easy to add in. And we also looked at our website and we looked at thinking that what we need to add in and determine which one of these menu items is the current active page. And we could do this in G. Korea's Well because as we saw, we've got a lot of information available to us within J query and we see that we have access to all of that information. We can really easily access any piece of our web content. So what we want to happen is whatever our website loads, we need to set an active element so active, maybe call it active set up. So this is just a function whenever why website loads. I want to run this function, and just down here is we're gonna set up the function function is essentially set of commands that you can group together and simply call to it from within your source code. So this function is gonna first of all we need to pick up our path. So where you are l path or so we need to know what Page were on. We want to make sure that we can pick up this index dot html and we can utilize it within our web page. So let's do the window object. And this is essentially another dom object, which gives us information. And we can actually see what what is within this browser bar here by using window and doing location that should be adopt their location returns the location of an object information , but the current location and let's do path name so the path of actual object. And I'm gonna just simply Consul, log this you URL path value out. So essentially, you're l path is holding the value of window location, path, name, and this gives us the ability to use it. So we see that we've got this index stop html. So now all we need to do is take a look at this and actually match it within our menu items here and and see which one actually represent is represented there. Eso one of the things here as well, so sometimes you might have additional content in your string and so on. So this I This could potentially mess up your string eso which it isn't actually right now with in this case. But you have to be careful that you are actually matching to the correct path. Eso make sure that always console, log that out to make sure that you are getting to the correct path. And this is the same thing that you've got within your hyperlinks. So we do have those slashes and so on. So now let's open up our editor and we need to see we need to look through all the different navigation you are else here and see which one matches. And if we find a match, then all we need to do is add in a class there. So let's let's create that loop. So we're gonna loop through. We can simply do not have and do a for any hyperlinks within the nav. And I do need to quote around that toe, identify it as an element eso for each and would do the same. We've got a function here, so within here, what we're essentially doing is we're gonna loop through each and every one of these elements. And then we're going to return back of value. Eso we can use the value. So maybe what I can first do is I'll console, log out this and what this is. This is the container. This is the This is each and every object that is picking up through the salute. So let's see what happens now. So when I looked through, we see we got for items get listed out here because we're looping through each and we'll see within each one. We've got a whole bunch of information so we can actually pick up where the URL location is . Eso weaken dio, find out where the h ref is, So where it's going to match it with the current one and salon. So let's take a look at our court again, and as we're looping through this, we can specify which attributes we want to do as well, and I think that's probably the best way toe make a check to see if our value is within that attributes. So let's maybe we put this in a variable and contain it within something called H ref. So this is an Samos the euro path just a variable string and we're gonna use this, but we're going to be more specific. I don't want to return back that whole object, so I'm gonna get an attribute, and the attribute value that I want to return back is gonna be h rough. So take that consul again. And now I can show you the H reps as we look through them. So let's take a look at this. So we see that remember, the 1st 1 here is going to be picking up the girl from here, and then this. The next line called 71 sees index about services and contact. So it's actually getting that information right from the HTML page. So if you are to update these, these would update as well. And this is ideal. And this is where we get that dynamic interaction and that capability with within our Jake where So now let's write a conditional statement and just do a quick check to see, if so, the u R L path. And let's make sure that we've got sub string zero is a equivalent each roughed length essentially what this will output. It will output that h rough. So I could just to show you that what it's gonna do, it's gonna essentially output. That path that we have there in all it's doing is just making sure that we're not actually having anything extra in there that's added in and so on. Of course, if you don't have anything extra, if you're not expecting anything extra, you can simply do a match and just see if you are all path is equal to H rough. We could even do an absolute equal to H rough. And if it is, then maybe we'll just for an allergist consul locked out and just take much. So now let's see what happens when we refresh the page. So we've got our initial listings. We've got our line 67. So tells us what you are l were on on. And then here is where we're doing. The loops were doing 71 72 we found a match 70 one and 72 Don't match. So no match 71 72 Don't match 71 72 don't much. So essentially, we're doing all of these matches and I'm gonna keep this NPR just commented out in case you want to play around Experiment with that s Oh, this is just mawr defined way of making sure that you're getting that. Actually, you are a path with the length and making sure that it's there so you can remove that out. Or you could do it either way just to ensure that you are actually getting that path. But right now, this is very simple websites. We've got her index dot html. We're just matching it to the H rough. If everything looks good, then all we need to do is add active class to that element. And as we know already looping through each and every one of those. So it's is easy as updating and adding active class, and we do want to add the active class to the parent. So this is where we can go close us to find the closest list item. So the closest one would obviously be the parent, and all we need to do is add class. And this is where we can specify what class we want to add in and adding in that active class is going to give us a different color. So we need to jump into our CSS and make an update Add in different color for the active class eso We can either do it the same way as we've got it down here. So maybe I'm just gonna call this active and let's go down here and add in an active class into our main CSS here. So going up to where we've got all of our navigation items on going right up to the top here. So we've got all of our navigation list item A. So we want to see if it's got an active class that I want to set a different background color to it. Copy that eight. And I want to do where I want to add in active because we're gonna add in an active class. And from this one we want to update what the background color is. So if it's a list item of its hyper Lincoln, if it's active, then let's update our background color. So instead of blue, let's do it red. So it really stands out and go back into our websites and refresh it and popped back into our CSS. And so now we're going to see if it's act actually active. Then we're gonna update that CSS. So let's take a look and inspect our elements. See, if we've got active is added to it or not, so need to refresh the page, probably to see if save this and save that. And we see that now we're getting active is being added on to the list item eso If we had if we went to about if we had a boat set up, that would be active as well. Eso let's go back into our CSS and maybe we want to set our active to the same as our hover so we could do that as well. So maybe that makes more sense. So just chain them together with the Kama, remove it this one and to see how this looks. So now when I refresh it, we know which page where is active. It automatically adds an active and now whenever we hover over them, we can see that we can still change to additional pages. So the next set of lessons we're gonna build out the rest of the website adding about services and contact and adding in and linking out to the CSS and G query that we've been using within the last lessons, So all of this is coming up in the next set of lessons. 19. 22 Page Tweaks and options: now that we've finished adding in our JavaScript, we've got a fully functional website all ready to go. And now we can look at updating our content. So one of things that I wanted to add in is I want to add in another image here, So I'm gonna use Loren Pixel. And what Lauren Pixel does is it allows us to add in actual images, so as opposed to place, hold it where we've got a great out area with the pixel dimensions or the image dimensions . Lauren pixel gives me actual images. So let's update that and add that into our code. So I'm gonna add in an image. So maybe we have an image in there Or actually, probably better yet, we haven't image between all of our content, and it's gonna be a nice, big white image. So let's take a look at our web page. So it looks like now, now we've got our image coming in a little slow, but so the images loading and it's a little puppy dog. So So yeah, so this is essentially how we can create our website, and that's the thing with Lauren picks. So you actually never know what you're going to get within your images, so really need. But you do have some options here to pick specific categories of images. If you want eso that's really need nice need function. And this always really is, ah, lot more impressive to people coming in and using their Web using your website, where they can actually see something that, instead of just a bunch of of content and these placeholders images can really make your Web page and your design really popular and make a little look more user friendly. Another thing that I want to add in air Google funds. So Google fonts. We've got a lot of options here for fonts on. We can really easily go and pick whatever fun we want and out it into our website. So for this instance, maybe we're gonna just s I'm just picking something here at random. And, of course, when you are designed your website, make sure you spend a little bit more time on this because it is important. Teoh really have that right fun, because fonts can really make a big difference within your website. Eso maybe take this droid sense and there's different ways to bring it into your website. So there's a standard you could link to the style sheet. But I usually like to use, import and import it directly to my CSS, especially for projects like this. Where I'm linking out to, I'm gonna be linking to multiple Web pages. So this saves me the trouble of actually if I make an update, having to update each and every page, and we definitely don't want to be getting into that. So let's open up that and open up this. And now let's got in Family Droid as early as our fault and we see right away our website looks quite different with the new font eso. And of course, it's always nice to play around and check out all the different fonts that you can add in. They're update. I want to updates is that whenever we shrink it down, looks like we have a lot of content and we lose our menu here at the top. It's a number of different options again, depending on how you want to design your website, make your navigation menu sticky all the time. So just by updating this and changing it to fix instead of absolute were fixed. And now whenever we scroll down doesn't matter. Much content we have whenever we scroll down or menu is here at the top, or you can have it on Lee gold fixed whenever, where within a certain size. So this is again, whatever your preference is, I'm going to just leave it as is right now, fixed at the top because I think it's got quite a bit of content. And whenever the users air scrolling, I always want them presented with this navigation menu so they can really easily navigate to other pages within my website. And they're never looking and having to scroll up and then navigate. So these air just little things that you've got to consider and again, depending on how much content. And typically, if you've got a three calling website, you probably do have a lot of content that you're planning for. So next lesson eso. Now that we've tweaked the website a little bit and we can continue to tweak it out, make some updates, poundings, margin colors and so on to really get the look and feel that we're looking for eso. Of course, there's unlimited options here a this point with different properties that you can set up to really get a good look and feel the way that you want it. But in the next lesson, we're gonna be showing you how to complete this website, finish it off, update and create additional pages so that it's ah fully functional four page website, all built in from scratch, sharing that same Jake Worry, sharing the same styling. So that's coming up in the next lesson. 20. 24 Create additional pages for website: this lesson. I'm gonna show you how to complete your websites on the last set of lessons. We've done quite a bit of work here with our website and we've got our essential or website up and running fully functional, fully mobile, ready. And so one eso we're ready to go to do our final steps of our website creation process. And this is just updating and creating the additional pages. So because we're doing an HTML style website we need to create about HTML service is HTML and contact html and we can play a little bit around with some of that content. There is one crucial thing that we should do before we do. Anything else in that is gonna be to move our Jack J query or a JavaScript out of our page so that all we have to do is linked to a script file and we have full access to it s so we need to keep that Jake Worry link on that page. I've created a file called script dot Js. So this is gonna house my javascript and the same way that we're linking out to geek worry . I'm just gonna link out to script Js as the source of this file and same thing here. It's still bringing in all of that JavaScript functionality or J Corey functionality into our Web page. And let's just double check, make sure everything is still there. Make sure that our menu whenever we shrink it down So our menu is still there. Everything is fully functional. So we're ready to go, Teoh, just duplicate out our pages and then we can update the content. So one more double check because sometimes you know, you make these changes and when you before you create that, all the additional pages you wanted always double check because you don't create all these pages and then have to do them again. So everything looks good and I'm gonna create a page called a Boat Got html and all I'm gonna do is essentially duplicating my index dot html. So now I've got a boat dot html. Next, I need Teoh create services dot html. So just save as and just do services dot html. And lastly, let's do one more save us and we're gonna do contact up each to know. And now let's go to our website and see how this is working. So now if we go to about services contact, we see that our menu bar is active on the color or the page that were on. And as of course, you can tweak this as well so you can separate it out so that your active page it looks different than irregular page and so on. So let's make a few quick adjustments. So on the home page, I like to have this header section, but on the about page, well, it doesn't really work. So let's see what kind of update we can do here. Eso We've got our header so we can remove that header. And here we can use all of our sections about us and so on on just have a whole bunch of content here. That's maybe about the company and so on and again, we're just gonna keep that content. Keep the sidebar and eso on. So I think that that's pretty good. So it's slightly different the about me section because you generally might not need the header. You can keep it in, depending again on your design and how you want. Present your content if you wanna have somewhere where you've got maybe the full with a cross. You could make some adjustments to your CSS as well, for that s O. Maybe the need is that you have different style of Web pages. Eso instead of having thes ones, you can just have the rapper and have all of the content within the rapper as well. So again, depending on how you want to present that content, you might have a section or you just have another div here with all of the contents so we could do Div and close that div. And then within this def, What I'm gonna do is I'm gonna get rid of some of this. And so maybe this is a better way to represent about us. So it's got all of that content, still has the footer, and it's still Rece. Eyes is nicely because we've only got that one mean container area. This is a quick way to design some different options here. You might even actually want to keep the header in. So I'm just gonna pop back into Index and should have some more options of just different things you can do and a lot of this comes down to planning as well. Eso You've got to treat the different areas that get handled within your website in different formats. So if you want to create a special set of classes or styles just for the full container area, you can do that as well. So you cannot in some potting and so on eso you might want to use it for services as well. Or maybe with services. You might be happy with the way services being presented. And here's where you won't want to get rid of your header. And there is some flexibility as we can see on how our content gets handled. So services and here we potentially might have a bunch of images, and I was gonna do a quick line break there to see how this looks services. So just so we do have something different represented there and again, there's an unlimited number of different options that we can do here we can provide. So Lauren Pixel sometimes does take a little bit of time to load eso these thes images. That's why it's taking some time there Contact section. We probably want to do the same thing that we did over there where we just remove out all of this, keep the footer and have our dips instead. And in this case, eso We've been doing quite a bit of styling. So maybe we want to add in some styling here for the rapper with a div inside of it. And we're gonna do a direct descendant, def of rapper and then within here. Let's out in some potting 15 picks and so on. So we might quite a bit of options there what we might want to do. So now we've added in some padding and we want to do the same for the contact area. So contact here, that was actually the footer. So I got way too many open right now. They all look very similar. So that's what I was actually putting it into the that the wrong page there. So let's do the div and contact for and this is where we can add in a contact form. So now let's just take a quick look at our website. Make sure that everything is looking right. Contact form Company name is their services and so on. And in this one, I'm going to get rid of the header as well as you typically might not see that within the contact form. So you just have a simple contact form, so some variations of the way that the sections are being produced and handled. 21. 25 update contact form: in the last lesson, we looked at creating additional pages. So now we've got a contact form. So let's open up our contact html page and actually create a contact form and then apply some styling to it. So maybe even have, like, a header here to indicate contact form and then below, Let's open up and create perform and do it with a bunch of dibs here to separate out the different fields. So typically you might ask for a name. And then we've got our input field so tight because text so this would be our initial name . We also want to collect email, address so email and change the type to email, and lastly, we might have a button so we could do tight button. Or we could do an actual button elements. Let's just do a button element and type here is gonna be submit to submit the form, so send message clothes off, close off the button and save that. And now lastly, eso get the form closed off. Let's take a quick look and see what this looks like. So now we've got a contact form, so maybe we should apply some styling to this as well. So let's update some of that styling. And this is why we really like toe link out to the same style sheet. Eso that this gives us the ability to do styling across all the pages. So if we saw that there was a problem or an issue, we could easily update our styling. So let's first take a look at form on. Let's give it a max with. So use that Max with again. And let's give it a pixel max width of 600 pixels. Eso This basically means that it will resize. If it's anything less than that. Let's give it a border. So one pixel border solid border and pick up a light color border radius to give it that rounded effect. And so we've got form, and we've got some dibs within that form. So it's had some potting around there, so 15 picks on each def and form, so we've got inputs. We could just do input, and we can also update something for Button. So let's do a with so with equals 70% for the form for the button with So it might be doing something different between the two of them. So that's why I've got them separated out there s o and refresh that. So maybe we even want to center it because it's we've got that text there. So a few different options we could brief the is owed even mawr create the inputs on a new line if we want. So how do we get it to a new lying? That input and this is easy. We can do it with display and do display block. So that will cause all of these thes Children here of the dibs to take up that full with. And we don't have to worry about that one because that one's going by default to it. So refreshing it. Now we've got name, email and the message and maybe we want to even center everything. Eso We could do that as central lining or we could bring that over. So depending on how we want toe approach, this is number of different options. So we could do up here at the parent text, align and central. So see, if this actually solves centering out that content, we see that it centers This centers this, but because thes air being treated as separate elements. They're actually not getting centered there. So aligning text, they're not being treated as text. And this is where we need to center out those elements the same way that we did with the rocker. So let's grab the margins here, go up to the inputs and treat them as separate elements. So now they're in center those we've got the text centered again. Depending on what? Your preferences. How you like it, toe. Look, I'm gonna actually add some height to this button. I think it's ah a little bit small there, So I didn't some hiding as well. Just see what this looks like. Go back it so usually like to have bigger buttons dio lying height and still need to make some adjustments here because their line height is with the padding. It's throwing off where that it was not wasn't getting centered. So now to sexually center that text and we can make that text bigger as well s we noticed that it is responsive on. Maybe we even want a center the form as well. So just like what we did over here, we can take that whole element in vcenter it or we could. We could identify an element and do it that way as well. So a number of different ways. We could keep that create a container for the whole contact form and then center that information and move these over. So all depending on how we want to handle this weaken, center it via padding as well. If we want eso. If we wanted to have parting around that content, we could center that as well. It's a number of different options available to create those contact forms and really get it looking the way that you want to present it. 22. 26 Practice tips and resources: Now that we've completed the website, we've got it looking and performing the way that we initially intended it to. We've got a contact form and we got a little bit of a variety of different types of pages. And of course, we can continue to build these out and really customize this website into a number of different ways. Right now. Eso One of the things that I still want to cover off within this course is how you can utilize the source code in really practice and make it your own. So now it's up to you to take the source code, take what you've learned within the lessons and apply it. So if you don't have an editor or if you want to just do this online, there's a really good resource at code pen. I Oh, so what you can do is you can copy and paste the source code into there, so I'm gonna just use the index page and just copy out all of that HTML that's within the body. Place it within code pen within the HTML section with JavaScript. I do need to add in the J Quarry library. So and this is using enough to do. We can just add in the GE Quarry library. It automatically links the CSS, the style sheet and the JavaScript so I can take this JavaScript code, pop it into the JavaScript section there and open up my CSS file and pop that information in to the CSS source code. And what it's gonna do is magically transform into the website we've been working on. And the good thing about code pen is it really gives you a lot of options and flexibility. So if, for instance, you want to change the background color or if you want to save some of the geek worry, it's all right there. Eso if I want to update the background color, and I'm gonna do something like green, so it really stands out there. We say that we see right away the website is updating and changing. Of course, the links aren't gonna work because if you try to press some of these links, you're going to go nowhere because you're trying to link to a file that doesn't exist. But the point here is that this is a great opportunity to really apply some different styling. Try a few things different out and see how it gets presented and be able to view it. One of the things that we are missing is the thought awesome, so we can bring that in as well, where we can bring it into our HTML complacent within that head section. So this gives us the ability to bring in front awesome into the project. So linking out Teoh style sheet save and close. And so now and I can also change the view so that I'm on a side view here, so I can easily resize the way the website is being presented. And there we've got our navigation bar, everything up and running and functioning. So do take some time, play around with it and get a good feel for how the website is functioning and try it out for yourself and see what you can do and see how you can customize this website to really make it your own and take what you've learned from the previous lessons and apply it with building out your own customized version of the website