HTML CSS Create a Single Page Website from Scratch | Laurence Svekis | Skillshare

HTML CSS Create a Single Page Website from Scratch

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (2h 8m)
    • 1. Promo video

      2:21
    • 2. 1 Single page website course introduction

      2:07
    • 3. 2 Web Developer Tools and Resources Overview

      6:28
    • 4. 3 Create a wireframe of website

      2:23
    • 5. 4 Build HTML page structure in prep for Styling

      8:21
    • 6. 5 Build Navigation Menu and Page Content

      9:54
    • 7. 7 Build HTML tags Nesting of Semantic Elements

      8:48
    • 8. 9 Adding Styling to your webpage

      9:55
    • 9. 10 Linking to Libraries Google Fonts and more

      7:20
    • 10. 11 Sticky Headers Section Styling

      8:36
    • 11. 13 Build a navigation bar with CSS

      6:36
    • 12. 14 Add background images

      7:30
    • 13. 15 Section text rgba

      2:37
    • 14. 17 CSS media for responsive web design

      6:22
    • 15. 18 Update menu to be Responsive on resize

      5:40
    • 16. 19 Introduction to JavaScript and jQuery

      6:52
    • 17. 20 Add Click events create interactions for users

      5:07
    • 18. 21 use jQuery to get pixel position of HTML elements

      6:56
    • 19. 22 Scroll webpage dynamically

      3:45
    • 20. 23 Hide menu when clicked on small screen

      5:11
    • 21. 25 Final Fix of issues completed website

      5:20

About This Class

HTML CSS Create a Single Page Website from Scratch
Step by Step guide to building a single page website from scratch Learn how to use HTML CSS JavaScript jQuery together

One page scrolling websites are extremely popular and a great way to way to present information for anyone.

Benefits of one page websites

Great for mobile
Encourage users to see more content
very visually appealing
no page refreshes
easy to setup
engages visitors in a unique way
provide information in a unique and easy to consume way
Learn how to build a website from scratch...

Everything you need is included
Source Files ready
Top resources
Best links
Top tips for better web design
Step by step process explained
Tools and resources needed for web design
Start by creating a wire frame of the website, and draw up how you want the finished website to look. Build the structure of the page using HTML. Full explanations of code as it is built. Create the HTML menu, content area and basics of web design. Using HTML5 semantic tags, to create your webpage.

Styling explained. Make your website come to life adding styling to HTML structure. Attach external libraries to add more to your CSS. Learn how to turn your HTML header into a sticky header. Add styling to transform your unordered list into a custom navigation bar. Learn about adding backgrounds, setting opacity to sections and more.

Make your website responsive so that it will work on any device across multiple screen sizes. Resize and scroll the page to sections within your web design.

Add interaction and dynamic effects to your website using jQuery. Learn about adding event listeners, move the screen position and more.

Start exploring what you can do with your website design

By the end of the course you will have the skills and know how to create your own website from scratch.

I am here to help you learn how to create your own web projects and ready to answer any questions you may have.

Want to know more, what are you waiting for take the first step. Join now to start learning how you too can create dynamic and interactive web projects today.

Transcripts

1. Promo video: one page Squirreling websites aren't extremely popular and a great way to be able to present information to anyone. Benefits of one page websites. They're great for mobile. They encourage users to Seymour of your content visually appealing. There's no need for page refreshes. They're easy to set up. Engage visitors in a unique way, and they provide insurance information to users in a unique and easy to consume format. How to build a website from scratch. We're gonna include everything you need in order to get started. Create your own source code is already to go talk resources. Best links Talk tips for better Web design. A step by step process. Explain tools and resources so everything you need it. In order to start doing Web design and creating a website from scratch, start by creating a wire frame of the website. Draw up how you want the finished product look. Build the structure of the Web page using HTML. Full explanations of code and how it's being built are provided within this course. Create the HTML menu content area at basics of Web design. Explained using HTML semantic tags to create your website from scratch than styling has explained. Make your website come toe life by adding styling to your HTML structure. Attach external libraries for even mawr functionality with your CSS. Learn how to create and turn your HTML header into a quick, sticky hair styling. To transform your A Norden list into a content navigation. Learn about adding background setting old pasty sections and a whole lot more. Make your Web site responsive so that it will work across any platform across any device for multiple screen sizes. Resize the scroll page to see how sections work within Web design. Add interaction and dynamic effects to your website. Using J. Coury. Learn about adding event listeners and how you can move the screen position and a whole lot more. By the end of the course, you'll have the skills and know how to create your own Web site from scratch. I'm here to help you learn how to create your own Web projects and ready to answer any questions you may have Want to know more. What are you waiting for? Take the first step, joined now and start learning how you too can create dynamic and interactive web projects. Today 2. 1 Single page website course introduction: welcome to our introduction on how to create a single scrolling Web page from scratch. So this course I'm gonna walk you through all the html CSS JavaScript J. Corey that you need in order to create a website just like this one. My name is Lawrence, and I've been a web developer for over 15 years, and I'm going to be sharing my knowledge with you and how to create riel world websites. All of the source code is included, and this course is designed to be a step by step process to get you started quickly in order to better understand how to create websites and even how to create websites quickly and efficiently. So you can see here that we've got ah, fully responsive website. So this is the same Web page, some Web page code. But when I resize it, we see that there's different things that are happening to see we've got this little menu that shows up and so on. So this is all done through the court, and I'm gonna walk you through how you can create your own version of this within the course. And you can see here that once we click this menu icon were presented with all of those seem links that we had here up at the talk. But they're presented in a different fashion, and this is, of course, designed for mobile devices. And this is a fully responsive website, so it's capable of being rendered out on any browser on any size screen. So whenever we click it, we see that we scroll down, and it's an animated scroll to the Web page that we're selecting and the user. Of course, just as any other single Web page, single page website, you can see that you can also manually scroll down, and you can see all the different sections for the Web site. Or you could use the quick navigation menu and click over and navigate to those. So I'm gonna show you what's involved in creating this website and how to create your own version of this website throughout this course. So when you're ready, let's begin creating a website from scratch 3. 2 Web Developer Tools and Resources Overview: within this lesson, I'm gonna be going over and providing an overview of the tools and resources that I'm gonna be using throughout the course. So first of all, within. In order to write html CSS, you should have a really good editor. You can use any kind of text editor. You can even use Microsoft Word if you want. But within this coursing to be using brackets and there are some advantages to using brackets and brackets is in full adobe product. It's an open source Web editor, and it provides quite a bit of really nice functionality, so it allows you to do a live preview. It's got an in line editor as well. There's quite a lot of really nice features, so I'm not gonna go over all the features about brackets, but one of the really neat things. But Brackett says, it's got this live preview. So when you go over here, I can check off the life preview and what I do want to see what's happening live on my page . It's going to open up this 1 27.0 dot 0.1 and then a port and then index file and the really anything about it is that whatever I type in here within brackets, we can immediately get see getting displayed here on the right hand side or within this browser window. So this is one of the reasons I'm gonna be using brackets because we're gonna be immediately able to see the content being displayed live. And of course, there are some bugs here, So sometimes you do have to make a page refresh in order to see that live preview. And what this does has this safety the trouble of setting up a local host and of course, HTML and CSS and JavaScript. They get run within the browser. So all you need is a browser in order to run html CSS and JavaScript pages. But this gives you a really nice handy tool in orderto output that content as it would be displayed within your server. So we've just got basic DNS address here and then the page file. So this is a shortcut in opening that up and of course, also do have local host running. So this is provided from example some using example the back into eso. This gives me the ability kind of the same thing that brackets does where I can just go to a local host. And I've got my exam server pointed to the correct file folder. And if I've got an index file there than it takes that as the root file and runs that so that's brackets. And then, of course, Sampas, Well, so some of the other resources that I'm using within this course these are gonna be in order to create police holders. So I'm not actually going to be typing out all the text that I'm gonna be using within the the website. So I'm gonna be using blind text generator. It's another really nice resource, and you can really easily create some dummy text here. And the use for this is just as placeholder. When you're creating your website designs, it saves you the trouble of actually having to type out all that text or have all that text handy and the same idea for Lauren pixel eso. It's another resource of maybe using within the course, and essentially they provide you bunch of dummy images. So same idea as the dummy text. But we've got dummy police holder images, and this is a really good thing. If if you're designing your Web site and you don't wanna have you don't have the image assets in place or you're still waiting on them. You can go ahead and design your website around what your design looks like, and then add your images in later. Eso also another resource that I'm going to be using is formed. Awesome. So font awesome. It provides you some really easy to use icons. So they've got 634 icons. And really, it just saves to the time of again certain resources handy. And it just really gives you a nice place where you can link out and get some icons and use them within your website. And this is another resource that's available so you can either download the library you can link to the cdn, so within the course, I'm gonna be linking to the CD and and if you're not familiar with the Cdn, that's basically a Web resource where you can go to and get a girl. So we've got so we've got the bootstrap cdn, so you might be familiar with that. We've also got the point Awesome cdn as well so we're gonna be using that and not sure why Didn't get to that. But we're gonna be using font awesome to provide some additional nice icons within our website. So when you're ready, let's start building out our first one page, single page responsive web site from scratch. And just to start out, I've got a basic HTML template here, So I'm gonna run through this really quickly. You're familiar with HTML is gonna be nothing you hear, but s So I'm just gonna run through what these tags mean. The doc type here at the top HTML. This indicates to the browser and to the resource that's rendering out the code that this is an html five page and basically all of this content here, this met information. This helps the browser understand what type of content it should be expecting. So we've got our language set to English. We've got her character set to utf Dash eight and over here we've got So we've got an I edge compatible. That's for Internet Explorer. We've also got a view port set, so this gives us that responsive capability when we're viewing on a mobile device so that it understands to set the screen size or the viewing area Oneto. One initial scale would be one, and it really does help with when you go to the Web page. Sometimes you might see it that the font is extremely small and hard to read. Well, then they don't have you port set So sad, adding, And Vieux Port really does render out that font a lot better and allows the user to be able to see the text. Then, of course, I've got my body's so opening and closing body tags, and I've got my HTML closing tag here at the bottom. And then I've just written out Hello World here in order to demonstrate that we're up and running. So in the next lesson, let's start building out our HTML Web page. 4. 3 Create a wireframe of website: in this lesson. I want to plan out how our website is gonna look. So because we're building our responsive website, we're gonna have multiple views of how we want this website presented. So I'm gonna just display what I want it to look like as a full version on the desktop. And then the mobile version is gonna have a limited menu view area. So essentially, what I want to do is I want to build out a menu area up here. So when the Web page starts up, I wanna have maybe our five menu buttons over here so they can actually be individual buttons so we could do something where we've got a Siris of individual buttons, so it's probably not gonna be so this is just to get a better idea. So we're gonna have our menu buttons and of course, they're probably gonna be all the same size ones were completed here, but this is just to give us a rough idea of what we're working on than over here. I want to maybe place a local, and so this would be the company logo, and then this is a full page, single page website So the entire section down here, this is gonna be taken up by the viewing area. And what I want to do is I want the menu to stay here at the top as well as the local. So as we're scrolling down, I'm gonna have all the four or five of these pages showing up here as a full page. So we're gonna have ability to either is to scroll down or to click one of these buttons and have the Web page actually scroll to that particular Web page that we want to display. Role is going to be adding in some background images to this and also for mobile. What I want to happen is, once we shrink this down, I want the menu over to Pier here, the navigation menu. And when we click the navigation menu, maybe we can have that navigation options pop up over here just above the viewing area here for the page. So this is the basic design that we're gonna be going for when we're building the suit, and this is ah, website where you can quickly just kind of drive some of your ideas I and place it into a visible area, so it's a website called wire frame dot cc and next lesson, let's begin starting to write our court. 5. 4 Build HTML page structure in prep for Styling: So we're coming into our website. One of the first things that we need to do in our HTML code is built out our structure of our website. So from the wire frame, we can have a rough idea of what we want our website toe look like. So you can see here that we've got essentially two main content areas we've got ahead in area So a header area here and then we've got the full viewing area down here. So let's go ahead and create our structure. And then, of course, we need a space. Teoh, hold our low goal or are branding for a website. So we need a space one over here, a div within that heading area. And we need some menu navigation buttons over there and this is all within that first section. So, essentially, the way that I'm looking at it right now is that we've got two main sections. So let's open this up and create our two main sections for our website. So the 1st 1 is gonna be a header and we're using html five. So we're gonna identify it as using the header tags to create a header element And then, of course, the content in here is gonna be that heading information eso I'm gonna use some dibs in here s so I'm going to use first thing that use a div as my main container. So that's always a good idea, tohave that capability of having a sub container in there in case we decide we want to move some things around where we want to pull out that navigation or that that additional bar. So let's create a main container for now, that's gonna hold all of our menu items and menu information and usually the way that I like to do it, as I like to give them I d. S, because this essentially this gives me the ability to reuse that header tag if I need to eso sometimes you might use headers within sections or within even your footers, and so their footing area of your website. You might need a header and a footer and some content. So it's always a good idea to be able Teoh identify particular your main header. So given an idea of header or whatever makes sense for you, whatever you're used to calling that talk header and then this over here. So this is gonna be where my menu contents are. Eso maybe this essentially is gonna be containing that entire menu area and the logo. So I'm just gonna right now, place this all under one, this particular area and I'm gonna do another div over here, and I'm going to give it an I D off. Let's say branding so that I know that this is where my contents of the company information are going to go. And next, we need to create a navigation area. So I'm going to just create a knave element, and I'm going to give it an I d of now so that I can isolate out all of this navigation information and what I build out navigation bars. I like to use on ordered lists saying I used the u l. And I'm gonna use a bunch of list items that can actually link out to the Web, the web, you are else. So we're gonna fill that in upcoming in upcoming lesson. So this essentially is my main header area and now the second part of this website is a meat a mean container area are some way of containing that content and notice again that there's don't one of our different ways. When you're building out a website eso you need to really kind of think of it where you want things to fall before you add in that styling because it's gonna make adding in that styling ah, lot easier as you progress. So let's create a main. So I'm gonna create a diff here so that this is gonna be my main container area. I'm gonna give it an I D off container, and then within here is where I'm going to set up all of the sections, so I'm gonna have a section for each one of these clickable menu items that is going to display full page. So I want the sections to display as a full viewable area. And of course, we're gonna have to move these down because we're gonna have this menu here, staying up it here at the top. So it's going to essentially be a sticky navigation menu at the top. So even when users scroll, then they're still gonna be presented with that and menu at the top because you always want to give users the ability to be able to click through and view additional page, especially when you're on these one page single page websites. It really does provide a lot of really nice functionality that you have that menu there at the top. So it's pretty much a must have tohave that menu at the top. So this is going to contain sections. So we're gonna just build it section here and then within that section, we're going to give it on I D. So maybe we're first section. We're going to give it an I. D of home. So this is gonna be our initial press present head section that gets presented when the user comes to the website, and I'm also gonna add in classes here. And the reason for this is that I don't again want to just use the default section tag within my CSS. So I like to be able to identify the sections either by a class name or buy something else that's really specific. That can specify which sections I'm using. S so, of course I could still do it within a container and immediately if it's got a section as a child from the container than we could do it that way to identify it. But for the purposes of this class, because this is an introductory course that I'm going to keep it really simple by keeping the CSS fairly simple and straightforward. So that's why I'm gonna use classes to be able to identify the sections that I want. Apply the styling, too. So let's create some additional sections solely. Did is copied. That and typical website might have a home page. It might have a about page. It might have even some products or something, or so some product information on. Of course, we always need to include contact, so it would have some contact information and maybe something else. So just may be a general type of information here. So typically, most websites will have, ah, home page and information page products contact. And I'm just gonna add in an extra page so that this was so that we actually are able to use five buttons here, and each one of those buttons is going to coincide with a section here within our HTML. So let's take a quick review of what we've done over here, and we're gonna output that page within the display area so you can see it actually gets presented. So when we save this and now if we go and if I refresh it well, really, there's not much happening yet in our website, and that's because we don't really have any content. So this is all just structure and placeholder s. So this is all part of the planning process. When you build it your website, make sure that you're planning for and anticipating what you're going to need within your CSS. So basically, we've got our two main sections got her header and we've got a container area here for all of our sections that we're gonna be presenting. So we're going to keep this header so this entire header is gonna act as a sticky header, which is going to be on top of the Web page that's going to just stick at the top there, and we're gonna click the buttons and get scrolled down and presented with the various sections. So the next lesson we're going to continue to build out some of the html and get this website ready and prepared in order to work as a single page websites. That's coming up in the next set of lessons 6. 5 Build Navigation Menu and Page Content: in this lesson, we're going to continue to build out our HTML page structure in anticipation of setting up our styling and being able to present it as an actual Web page. So now we should be able to actually see some content here within that display area. So let's jump over to the navigation element here, and we've got on unaltered list. And a no ordered lists are used in order to present a really nicely formatted way of presenting your navigation items so you don't necessarily need to use on a Norden list. But in common practice, a lot of Web developers will be using a new ordered lists because this it presents the content in a nice, readable fashion. So you don't have to do it this way. You can use different other elements, because, of course, we're gonna be providing styling and we're gonna be making it look entirely different. We're gonna re removing that default a Norden list styling. So within this lesson, I am going to be using a nun ordered list, and usually when I do create menus and navigation menus, I do it within this type of format. So let's create some hyperlinks within here, so these hyperlinks are going to be used in order to link together the various sections. So the idea is that I'm creating an anchor tag, and I'm linking over to the Web section that I wanted to present when that anchor gets clicked, so hyperlinks so you might be familiar with hyperlinks. So this is essentially what the Internet is all about, linking between different Web pages and connecting everything together in a sense, building out a Web and when we use hyperlinks. So these air really the core pieces of any website is this ability in error to link together various pieces of content. So with hyperlinks, you might be familiar with actually going to a Web page. But you can also use thumb as anchor as they're intended as an anchor tag. You can use them to link Teoh various ideas within your Web page. So if I do hash tag home, so essentially, this is gonna link to this section, and it's gonna know that whenever I click it that this is an anchor to that particular section. So let's commuted toe build this out and maybe I just type in home. There And so this one is ready to go whenever we click home, we're going to scroll down to this section down here and let me add in some content here in order to better present this. So let's jump into here and I'm gonna do each one and then maybe I could do a paragraph. Or maybe this should be. Actually, this should be an H two so that it gets presented a little bit better. So the other thing that I'm adding here are these heading tags and what heading tags do is they provide an emphasis on a particular piece of content so you can see here within our display area. So when I added in these headings that I added in home page here and each one is bigger than the H two and it goes all the way down to H six. But you're very rarely gonna be able t very rarely. Seat H six is actually I've never seen anyone using each six because the idea of the concept of using heading tags is to start out with your each ones which would be your most important headings. And then the H twos would be kind of like a subheading. So if I had additional headings here, then I would use h twos. But if I had another heading within this age to then I would use h three and so on. So they're all wrapped within each other, going all the way down. So the idea here is that I'm using for this section. I'm probably only gonna use H one and H two for each section. And I should actually probably stick to h twos for these additional sections because this is a single page website. And when the search engines come to your website, then you want a particular each one, so you don't want to overwhelm them with a bunch of each ones you want to maybe only use one H one for each single page. And when the search engine bought comes to your website, it's only going to see it as one single page that's going to read out all of that content. So be really mindful when you're using the H and the heading tags, because this is also used by search engines to gauge what the relevance of your content is and how actually, how it's going to rank it so one of those important Seo tools to be mindful of when you're building out websites. So now I'm going to jump over to blind text generator and I'm gonna create bunch of paragraphs. So maybe I wanna have, let's say, four paragraphs. So select all copy. And there's a few options over here where I can display it with the paragraph tags. So that's actually the version that I want because I want this to be formatted and ready for HTML. So now let's go back over to our Web page. I'm gonna refresh it to get rid of that double there. And as I said, Brackets is really good with this, but sometimes it does. It doesn't refresh properly, so you'll see this duplicating of content. And this is just brackets doing that. So this isn't actually on the Web page. So when you refresh it, what we're presented with is the actual Web page content. So now when I click it, we actually go to the home section, which, of course, were already on and which, of course, is the only one were being presented with. So let's go ahead and add in our additional list items. So remember, again these they're going to turn into the Web page navigation area. So as we work through this, we're gonna turn these into the web page navigation. So I'm just scrolling down so I can actually see the sections and how I've called them. So gonna type those in first? So we had about products. We had our contact page and we just had an extra page. And of course, this is for demonstration purposes. Normally within a website, you wouldn't have that extra. And of course, we don't have to call the text within the hyperlink here. This is for display area on Lee. So this is and actually used for anything. This is just used in order to present the hyperlink. So you could actually call this whatever you want to call, it s Oh, this doesn't have to be. I income the same as what's in here. But generally when we are making websites would do try to keep everything in line. So we want everything to kind of make sense that this hyperlink links to the extra section and this is the purpose of it. So use your wording wisely. The semantics of the wording that you're using. Try to get it to make sense as much as possible within your website, so that when you are looking at a later point that it just makes sense. So you know that this was that about section, and you don't actually have to comment within your Web page. And in case you do have to comment, HTML comments can be created with the less than sign the explanation mark two dashes. And this is and it is always good practice to do this type of commenting, because whenever you're sharing your cold or if other, if you come down, come back to your website and maybe it's been a few months since you've actually been using it. You can really easily jump back into it and get a better idea of what you were doing, what you were working on and what the purpose for some of these sections would be. So if when I come to that extra section that maybe I want to know what that this was just for this is just for so I've just for demonstration purposes, this is the contacts section and, of course, within within your commenting. You can comment as you need to, so it's not necessary. But it is a good idea and you can place whatever information you want within this comment area and notice is, well, that the comments don't actually show up. They're not presented to the user. So the comments are forward. Just the coding section. They're not gonna get presented to the user s. So again, this is just for the Web development purposes. So the next lesson we're going to continue to build out our structure and actually make it look like we've got something here. And then we're gonna ply the styling later on within the course. And the styling is where things get really interesting because we get to place our own spin on it, pick some colors, pick some styling and really make it look, uh, the way that we want it to look. So that's all coming up in the next set of lessons. And then, of course, as we progress through this course, we're gonna complete this website and deliver a single page website that's going to be responsive 7. 7 Build HTML tags Nesting of Semantic Elements: this lesson. We're going to continue to build out our HTML structure in order to prepare for applying CSS and really waking the magic happen to create a website out of this HTML code. So I'm gonna add in some additional tags here within the structure of my section. Let's odd in and separate out. So I'm gonna separate out the actual content that's being presented because I wanna have images in the background. And the idea here is that I want this text to be readable. Eso What I want to do is maybe I want a place, some kind of cover over the image in just in the background of the article here in order to be able to read the actual text. So this is why I'm adding that in. And we might have to do something up here as well. But for now, let's just leave it at this, that we've got our h one and H two and then we're gonna have our article presented there. So we're gonna have this on top of the image directly and then down here, we're gonna have this text in a visible fashion on top of our content There's a few other things that I want to add in, and I'm actually going to cheat with this and copy this content out here and add this into the boat section. Of course, in normally you would try to make it a little bit different because you'd have actual purpose for creating that about section. But because we are just demonstrating this website eso maybe this is a boat section, so it's still see how this is gonna look, so we don't need necessarily toe have all of that. And it's always a good idea to keep the format very similar so that you know that you've got this article area here that you've got that you've got available to you to use and also plan it out and build it appropriately. So if you're going to be using different sections within here, then you could either add them as sections articles or you could default to dibs. Eso again, depending on how you want to present this And of course, you can also set in headings here footers in order to present this content. So this is something that we might look at as well later on, and present this as a heading eso Maybe we could actually do that right now. So just so that we have our structure here properly. So this is actually going to be header. And when I see that what's happening here? When I see that it's actually brackets that's beautifying it. So it's actually reorganizing where we have our in dense to make it more readable. Associate future. That's within brackets. So if you're wondering why, whenever I say that that it, it shifts it over, that's just cause it's presenting it in a readable format. So making it nice and beautiful. So I'm gonna odd not one in there, that one in there, and I haven't got to those yet and copping up the header there so that we've got full header area like that. So now I can copy it that product area and have got the full structure, sir. And also, of course, you could add footers as needed. So design your section areas I was needed and as you want them presented to the users or to the web visitors. So there we go. So now we've got all of the sections. Everything looks pretty good and just gonna find Tune it here and I'll show you that these anchor tax anchor links air gonna be working and maybe I'm gonna make a few of them a little bit smaller here. So let's go out and refresh our page. And now you can see that we actually have what looks like an actual web page here so we can start seeing that we've got the beginnings of our website. And the reason I made up bigger is that I want to show you that how the anchors are actually gonna work. So we've got our navigation menu here, and when I click contact, we see that we get brought down, we get presented with contact, and we've got whatever's we get presented with extra. And if we're going to products we have presented with the product section. So essentially, the way that it's working is its listing out, and it's anchored to these I ds and this automatically scrolls the web page. And this was what I was saying earlier about having that navigation menu at the top. Because when you're building out a single page website, you don't want the user to go to the very bottom and then have to scroll all the way back up. So you want that nice and neatly presented and see what I clicked. That boat, section it space Is that about their at the talk? Uh, and what was happening here when I pressed something like Whatever. It's just showing me the extra here, so it's not actually scrolling it all the way down bringing this to the talk because it actually can't because there's no more additional white space there. And that's why we see products section here at the top, and we see very little move because the contact and extra are very small sections. They don't have a lot of information in them, and it's not actually able to move them up because it doesn't have. It doesn't present white space underneath there. So all it's doing with the anchor is making it visible. And if there's additional additional content below that, it places it nice and neatly up here in the talk. And this is something that's gonna be important to note as we progress through the course and before we start adding our styling that we need to note this, that this is the way that the anchors work. And in order to actually be able to present our pages properly, we're gonna need to make them take up that entire space that's available. And of course, we're going to do this within CSS in order to set up our website to properly present with the anchor types. So the next lesson we're actually going to jump into our styling and really started making things interesting with our Web page. So right now we're just presented with a plain old, just a bunch of text. It could very well be images we could add in some images as well. But we're presented with some content here and where we're not really seeing any kind of styling. So this doesn't immediately look like a navigation bar, as we'd expect in so one. So speaking of images, before we finish off this lesson, let's just quickly add in an image and for images I'm gonna use Laura, um, pixel and Lauren pixel. What it does is provides placeholder images so I can select images that I want down here. I can do color, I can do gray scale, and it gives me a random generated image so I'm gonna be using this for various parts of this course is well. But for now, let's just copy out this image tag and essentially this. Give me an image that's 400 by 200. It's got the image source there as well. Eso I just copied that so I don't have to rate that it, but in order to set up an image So if I wanted to set up an image here, I could just add that in. So let's added in under a paragraph, and I could do image and then I could do source. Or I could just paste in the tag that I copied from there. And now let's go take a look at our web page, and we're going to see that now. We've got a nicely presented image there within our content. And of course, I had zoomed it in in order to demonstrate the anchors. So I'm gonna bring it back down to the 100% default, and we can see that the image 400 by 200 should be a random image, so we should see some different images every time we refresh it. Where most of the time we refresh it. And of course, the interesting thing about using the's randomized images. You never know what what to expect. So I have no control over what images air going to get displayed. Here s O. This is just four warning you that I'm not sure what type of images will get displayed here , But of course, they're all gonna be thes typical type of Web images. So the next lesson let's jump into our styling. 8. 9 Adding Styling to your webpage: This is the section of the course where things get really interesting because this is where we are introducing styling and CSS styling and everything about CSS styling in order to present our HTML content differently. And the thing with styling is, this is where you can actually place your own spin on it and how this HTML gets presented. You can deliver it in different ways just by applying some styling. And so within the course, we've got a number of different ways where we can add styling within our Web page. Of course, we could do an in line style so we could add the style attributes, and we could do something like background color and then pick a color here. So this is just to demonstrate that how easy it is to add styling. And so we see here immediately here on the right hand display area that we get this background color red eso effects take immediate effects, are very visible with styling, and this is what I mean, but we can add our own spin when we start adding and styling. This is the number of different ways where we could add Starling into our website so we could use a style tags. So that was the misspelling. So I get rid of that and we could use styling tags so we could do something like So I'm just gonna get rid of this in line styling because the problem with in line styling is that if you ever have to make any changes and let's say you've got a website with a lot of pages and your Web page has growing here and you come back to your website and you are starting to wonder, well, you know, I want to change this red to blue. But I've used it in various spots within my HTML code, so might be a little bit difficult to kind of go through every line of code and updated. And this is where we apply styling where we can do a page styling here s so we could do something that applies to this page in particular, and we can keep it up here within that head section. So if I wanted to identify the header, I could do it within this type of fashion where I used the hash header and then anything within here. So I could do that same background color property and maybe change it aqua. And this again, this is this is actually being presented from So now we see that now we've got an aqua color and those colors. This is another really cool future of oat rockets. And I don't mean to be selling brackets. If you do have an editor that you're using and you're comfortable with, then please do go ahead and use it. But it s so just in case you're wondering how I'm getting these pop ups. So all of this is built in within brackets and this is why it's it's a really usable editor because it provides you this kind of quick colors, references to tag references and so on. And you see it a lot within JavaScript when you're typing out your javascript that it's always good to be presented with the options, Sometimes you might misspell it. And in this case, with styling, you're not always aware of all the different color, the pre built colors. So it's really easy to kind of pick those colors within this way, and we see now we change the background color were being presented with the header here. Background color and everything is is being presented within that Web page. So one of the disadvantages of doing it this way and I know that I already said there's a disadvantage to doing within the page. But this is also a disadvantage. So let's say you have a website and you, uh, building on a website. You've got a lot of pages again and you've got styling on every single page. So that means that if I've got Index, if I've got about, if I've got products than I have to go to each and every one of those pages in order to access this particular styling. So if I want to change that header, then it's gonna have to open up every page to do that. And that's quite a bit of work, especially when you want to build out a template that gets utilized throat your entire website. So there is 1/3 option, and this is the preferred way to go when you're adding styling into your Web page, and that's simply toe link out to a style sheet. So what I'm gonna do is I look out to a style sheet and I'm gonna then create that style. She So I'm gonna just link out to a page called style dot CSS, which I still have yet to create, and I'll show you how toe create that really quickly. So we've got, uh, our yell style sheet. So this helps the browser once again understand what we're doing and what we're linking out two and then just close off that tag. So now we're gonna be looking for style dot CSS as our style sheet that we're gonna utilize within building out and presenting content from the website and one of the things as well That's important to note here is that if you've got particular styling that you want to apply on that particular page and only dot particular page so you wouldn't be doing something for for your entire, for your entire template of your website that would be contained within style that CSS. But let's say on this particular page I was using one element that I'm not using anywhere else, and I want to apply some styling to that. So then it's OK to place that within that head area. So let's create a brand new file here and I'm just gonna So the sidebar and maybe I did Teoh horizontal split. So this gives me the ability toe have to separate view areas here where I'm writing at the code. So we've got our original index dot html and then this is gonna be just style dot CSS. I'm gonna save this as style dot CSS. And now we've got our style page linked. And if you're wondering the way styling works So whatever styles we get presented with first these are the ones that are going to take precedent over the other ones. That's why generally, if you've got in line styling, that's gonna take precedence over as well. And you also do have the option. If you want to make sure that a particular style I overwrites whatever additional styling is done, then you could add that important to any styling. And what I mean by that is you can do so you could do something like that to add important tag to make sure that the browse understands that this is the actual color that you wanted to utilise. So you have that option as well. So let's create some styling here so I can do. Maybe if I want to do for the menu, because I do have that menu in there or actually, I'm gonna do it for the body. So we have something different. Eso When we're using I DS ideas within a Web page, you're only gonna have one I d. With the set with that name on. Ideas are indicated with the hash, but there's two other ways in order to identify your content in your HTML so you could name it by tag so you could set properties on a tag. So if I wanted my body toe, have a background colors and using background color cause these are the ones that are most visible. When I make the change and refresh it, we see that we get this background color blue, and this is attached to the entire body at tags. Eso If I had multiple body tags that would show up so same thing. If I attach it to the list items, we can see that all the list items get this background color of blue immediately, and we see that they're being presented in that way so it's over top because the menu is nested within the header so the header would get that orange background. The menu doesn't get any colors and then all the way down to the list items and then they actually get that background color applied. And lastly, there is another way of applying styling and that's via the class name. And this is done with dot and then the class that we wanted Teoh to select. So here we've got our sections. So maybe for our sections, if we want to set a background color And I know these colors air really not going together Well, but again for demonstration purposes. And of course I'm gonna update these as we progress through the course. So there we have it. We have got all over sections, have a background color. Our list items have a background color or head are heading here, has a background color. So the next lesson we're going to start applying some additional styling and really start to build it. This website, So gonna hide that side bar. And now I've got my CSS file unlinked to it up here. So it's linking Teoh this CSS file and this gives me the ability to update my styling on my Web page, and in fact, I'm gonna linked to the same CSS on every single one of these pages. So if I had multiple pages on the website, I'd linked to that same style sheet and then that would give him the ability to update my entire website. The styling on my website by just changing one single file. So next lesson, let's dive deeper into CSS and see what it can do. 9. 10 Linking to Libraries Google Fonts and more: this lesson, I'm gonna show you how to add external front. Especially fond, Awesome. And as well we're gonna look at how we can add in some Google fonts into our Web project. So let's begin by opening up front. Awesome. And we're gonna link to it. So just like what we did, I'm going to get rid of the styling. So this is that index page here at the top. I'm gonna get rid of that on page styling there. And just as we link out to our style sheet, we can link out to a thought awesome library. And there's a number of different options here for installing and setting up foreign tossem . You could download it. And just as we linked to that local file, we can link to its min ified CSS and a quick note on the difference between the men ified version and the regular version. And this is just how white spaces handled. So men ified version will technically load faster because it's just a reduced white space. Eso There's no white space within the file and it makes a little bit smaller and loading faster. So I'm gonna use the font. Awesome Cdn. What? There's one available at bootstrap cdn dot com. So if you go to font awesome, they've got fund awesome presented here, and we've got a number of different ways to bring it into our project. So I'm gonna bring it in here The html link s so we could just simply link out to this file . Or we could get this one that Scott some or integrity there some more, more security there because it's cross origin and so on. And the good thing about using CD ends is that sometimes it can get your website toe load faster. Eso if a number of other websites that the user is gone to has already used things font awesome file, then it might already be cashed within their browser. So again, quicker load times, especially if these files get cashed within browsers. And also I don't have to bother downloading it for the lessons. So this is another reason why I'm using it. So now I can quickly link Teoh any of the font awesome files and just going to jump quickly into my html because this is where I'm actually going to be adding in that front. Awesome So one of the things here is that whenever we shrink that navigation bar down, I want to display essentially a way to Teoh something to click. And this is where I was going to use font. Awesome. So I'm gonna use the class and they've got these f A F eight bars, and this is generally used to indicate a menus. We see it gets popped up there and maybe I want to give this one and I d. So I'm gonna give it an I D and many menu. So this is just the many menu bar s. So this is in anticipation whenever we shrink it down that this is gonna show up, and then the user can use this to be able to see their main menu. And maybe in here we can pull up jumping back out to our website so maybe we can get some kind of picture here that we could substitute instead of a logo. So I'm gonna do gray scale, and maybe this could be our company logo. Scientists copy image address. Pop back over to here and place this in here, wrap it in some image tags so that now we have a placeholder for our A company logo. Let's go back out and check it our Web page when that refresh it is. Now we've got a company logo. We've got our nav bar whenever the pages small that the user can click that could pop open the navigation area. And then over here we've got all of our sections and let's go over and cover off. One more thing in this lesson, and that's how to add in fonts. So we're going to use Google fonts in order to access a font library. And maybe we want to pick something So they've got 707 font families available on Google. Idea is the same that we simply link out to them so we can sort them. So maybe if we want to have this handwriting effect to it. So this is always a really kind of neat effect. Teoh. Your website, some just trying to find one that maybe is kind of neat and different. So if I wanted my website to use to use, uh, this Gloria fought, we've got a few options to add it in, So we've got another just select quick use that gives us some more information about it. We can either link to it as we did within our HTML so we could link to it into our website in this format, Or I can do on import of it within my CSS. So this is the way that I'm gonna bring it in eso that we do have different ways that we bring things into our web project and all we need to do is copy that girl and this is gonna work the same way as I would when I was placed in that link here. And remember, if you are using the link version in the HTML to place it in front of your style CSS because you want that library to be up and ready to go before your CSS tries to access it and now, in orderto access it, they also provide us a way to write that in. So now, while we need to do is fought family. And if I go over to here, So let's see the transformations on a refresh it. And maybe in the sections here, I wanna have this type of fund. So there we go. So that's how we bring in Google thoughts and a lot of fonts to choose from and just some really quick ways to get access to some really nice styling cues on. So just want to demonstrate that. And so the next coming lessons. We're gonna start to clean this up and get rid of the background color for that cause that's looking fairly fairly blue. Hard to read those not those characters. And maybe over here we want to change our background color. So we want to maybe work with more of a grayscale feel on. The reason that we usually try to work with more of a grayscale feel is that whenever we haven't decided on a color scheme a yet, we want to stick with the gray scale in order to be able to, uh, toe, add in different color variations and shades later on. Eso usually gray scale is a great way to start. If you don't have a color scheme of that, you've already said set up and that you're ready to use. So the next lesson. Let's dive deeper into CSS and really see what we can get done 10. 11 Sticky Headers Section Styling: currently, our website has some styling applied to it, and it started to look more and more and feel more and more like the finished product will look and feel. So again, we've got all of that linking his workings were all ready to go to continue building out our styling. So it's open up our editors and open up that preview area here in the display area. And we're gonna work predominantly with the CSS. So let's make that a little bit bigger, and the index we may still need to reference to it. But for the most part, the next set of lessons is going to be based around the CSS. So let's the first thing that I want to do is actually going to get rid of what we had there before. And what I want to do initially is I want to get rid of this this trigger here, this menu item, So I'm just gonna go back up and see what we had called it, and I just want to display it as none. So take that many menu when the page loads and I'm gonna just apply a property to display as none so this will hide it from the page when the page loads, The next item that I want to look at is the head. So maybe even replaced the head above that. Because the way that I like to create CSS is I want to start with how the elements are presented with in my html page. So what might CSS to roughly match that same order of presentation? So we've got our header is identified as Header. So that's what I'm going to just use the I d value there and what I want to do is I want to set some parameters for it, and I want a position at fixed and so on. So let's take a look at that s o First one I want to do is position and fixed and what this is going to do. We see here right away that our position is fixed and this gives us the ability to be able to access it even when we're down at the bottom. So even if I was to collect Kirk home and then I click whatever, we're scrolled down to the bottom. But I still have the option to go back to home, and this is what we're talking about earlier, where we need tohave, a fixed position for this navigation menu and this whole heading area. So, of course, the local does not need to necessarily be within a fixed position. But there, the way that it's been designed here is that it's nested within that mean menu area. And so we're going to keep that as part of our fixed header section. So let's add in some additional additional styling properties here. So we need to have a background color because the problem here is that we see the text underneath and we definitely don't want to have that whenever we're creating our Web page. So this gets eliminates that and you can no longer see through it. And now when we've got our fixed position, when we scroll down, we can nice and easily read our hectoring area. It's the next thing that I want to do is maybe set so default with for it because I wanted to go across that entire available space there. So I'm going to give it a with of 100 also height. But I'm gonna give it a set height size And the reason for this is that I want to set it at around 80 picks because I want to be able to know where I need to position the menu when it shows up. Because I can't position the menu here at the top over the local. It's not gonna work well on mobile, so this is the reason why we need to position it and we need Thio. Thio, given actual pixel were an actual set height on. Now this is just for positioning. So I said it at top zero picks and this is where we can fix the position. So if I wanted it down a little bit and so on, I could move it around. And as he could see here, whenever I change those values here, it's actually changing its position. But I want it exactly at the top, and I want it exactly within that left corner there. So I don't want it moving around. I don't want it changing. I want it within that 00 position so that I always know where it is, and I can always access it. And now, looking at this, you're probably thinking, OK, well, now this navigation menu is not really fitting in. Well, but we are gonna take care of that. I promise you in upcoming lesson, and I'm gonna show you how taxes style start styling this navigation menu. So one of the other things before we jump into that next section is I want to update. And speaking of sections, I want to finish off some styling for thes sections. And we can see here that well, whenever we click this whatever, because it's a smaller section, it's not taking up that whole entire page. So this is actually where some of the magic happens from a single page website where we're actually going to set a minimum height because I don't want this to be presented at less than maybe 1000 picks so we can do something like that and we can see right away whenever I do that. Now, if I go to whatever we're getting presented nice and neatly with every single page, we still need to make some adjustments. Because now what's happening here is that we're actually hiding some of the content. So we are going to be fixing that as we progress through the lessons Another thing that maybe we want to add is an overflow Kidding. What this will do is this will hide any content that might be hanging over. So sometimes me if you have really big images and you didn't resize them for mobile, that might hang over your section area, and this will actually hide it. I got a position it relative because I want them all to be in relation to each other, so positioning at relative will pop it into place. Let me refresh that. And lastly, I want to add some potting at talk because I do want to move it down because now that we've positioned at relative well, it's going on top of our menu area. And that's not what we want because now we can no longer click that. So let's do potting talk and let's move it down 100 pics. So because we know that we're preset here at at 80 picks for that, we know that whenever we're placing it, being showing so that we can actually see it. So one of the things here now that have positioned at relative well are are heading. Area no longer is on top so there's a number of different things we can do. You can change the vertical stocking by doing. Is that index And so I can set that to, ah, higher index than the section and that will show up automatically on top so we can do that as well. If we need Teoh on, then this way we're no longer overriding what's available there. So this is one way to do it. We could also get rid of that relative. So if we want to comment that it for now, so you don't necessarily may be want to use the relative s. So this is again Maybe we want to do it this way. Maybe we want to do it that way. So maybe there's some advantages and so on. So we're gonna actually just comment the stuff it and if we need it later on than we've got it there and ready to go, so we don't necessarily need to set it on relative because by default it's already stocking one on top of the other. And over here, the set index, we might run into some issues here later on when we're re sizing. So we want to be kind of cautious here before we set those that index and before we set that position relative. So this is how we're consent up our website and actually have the right container size and be ready to go with building out the rest of our content. So now you see that air navigation menu is working, and the next order of business is to style our navigation menu to actually look like a navigation menu, So it's coming up. 11. 13 Build a navigation bar with CSS: in this lesson. We're gonna look at what you've all been waiting for and that's actually styling that navigation bar. So let's jump into our CSS and open that up. And now we're going to take a look at styling our menu area and a navigation bar. So jumping over to that. So I'm gonna just quickly look at the html here and we see that we've given an I d. Of nav and that it's a new ordered lists and we've got list items. So first of all, let's take a look at our nav menu, and we're gonna identify it by using naff. And I'm gonna make one really quick update here. I'm gonna change this into a class because I think it just gets presented better as a class eso I'm gonna update this one down here to be classed as well, so save and save. So let's add in some styling properties here. So, for our nav, what I want to do is I want to actually use floats. So one afloat this to the right up because we do have our logo there and I want the navigation stuff to stake here on the right hand side. This is where we're gonna use float. And then, of course, with floats. We need to clear out those floats as well. So initially, I want to float it to the right. We can see here that right away it floats over this right hand side and a look a lot better once I take care of floating that logo as well. So next, maybe we want to set a fought family because as we play around with the different thoughts maybe we don't wanna have at this default I thought that we used previously within our section here. And maybe we want to use something like Ariel or something like that. So we can specify that here. So I was gonna quote around it, Ariel, and a lot of times within menus like to use that text transform. And maybe you want to transform it all to upper case so that leaks looks nice and neatly presented there. So that's all uppercase. And maybe that's it right now for the main nav class eso Let's go down, Teoh, update this so it doesn't look like an a Norden list anymore. So let's specify now you l and then here we're gonna set potting to zero, and this is just going to get rid of some of that default that might have been available within their. So we don't really see much of a difference, because we're already floating it over to the rate, so that just gets rid of some default that's there. Now, next we're gonna do now, have you? L And now we're gonna look at the list items. So with the list items, we're gonna use float again, and this time we're gonna use float left so that they align left of each other. We want to get rid of again that annoy ordered lists styling. So let's do list type or less style type, I should say, And that's gonna be none. So that gets rid of the little style types there, the little round dots that we had, and maybe we want to set a border around them. So I have set a border of one pick solid and let's do a really light color there, so it's got a very light border around it. So now we can see it started to look more and more like a navigation bar and Now the last thing to take care of is actually taking care of our hyperlinks, that air within their. So again, we're going to use that same format where we're identifying that Those are the elements that we won't apply the styling, too. And now let's add in some additional stylings weaken do things like our background color. And let's set our background color to be black, and so we need to make our buttons are text visible. So set the color toe white and maybe want to add some padding, so it's, ah, a little bit more blocky around it. And speaking of block, so we want to do a display block. So this allows us to take up all the available space and usually with menu items. It's understood that these air menu items so we want to get rid of text decoration, and I'm gonna set it to none, and that gets rid of that underlying there that we had. So now we conceive that I can refresh it and does look more and more like a navigation menu . The only thing that's missing here when I go over these various elements, nothing's happening, and that's because we haven't set the hover yet. And the hover is just that little magic piece of styling that presents the content to the user. So in a fashion that they can sail Well, these are clickable because something's happening. There's some kind of action taking place whenever we're hovering over them. But maybe we wanna have some really contrast here, and I'm gonna just change this Teoh White and Teoh Black. They're gonna be completely different whenever I update this cynical in their save. And now, whenever I hover over them, we see that there swapping colors. This is nice. So now we've got a navigation menu and all of the buttons, they're still working as they did before, and it's really starting to come together. So the next set of lessons we're going to dive deeper into setting up and really fix up this navigation menu area here because we don't want this logo unless this is the styling that we're going for. We typically wouldn't want this to show up, kind of like halfway through here and then this up here. So we want to move this up and we're gonna work on setting up that little girl. So it's coming up the next lesson 12. 14 Add background images: in this lesson. We're gonna look at taking care of our branding here. So we've got the i d branding here, and it's essentially showing that image, that local image. And right now it's messing up our update This right now it's still messing up how our menus being displayed. So let's jump into that and find some air space down here and build this out. So we identified it as I d branding. So let's identify it within the CSS, and maybe we want to set a fixed with for it. So with of maybe 200 pics and give it a height, So I wanna give it a fixed height of maybe 50 50 picks, and I gotta float it to the left. Now, I'm gonna actually take this image out of our CSS, and I'm gonna set a background image. And the reason I'm doing this is because the background images are essentially they're less intrusive than the styling image. And I can actually, uh, control it a little bit better with my with my CSS. So let's set this one as the background image and no, repeat eso This will make it that it's not gonna repeat and centre and centre. It's essentially now. It's not gonna repeat. It's a centered image, and we know that our background has a certain size. So background sighs. And we had I believe it was 200 pics. So there we go. So now we know that it's actually size properly within the background and presented properly. So now we're still missing. Ah, some pieces to this puzzle because it's turning. It looks OK, but whenever we're re sizing, we're dropping at below there, and this is something that we're going to take care of within the media screen. So let's still take a look through our code and see if there's anything else that's missing and what we can do. What's a really neat effect within these one page websites is that we can do quite a bit of a different background colors with these sections and so on. So I'm gonna show you how to do that, how we can apply different colors to the background. So let's select our section, and we're going to use a suitable element so pseudo styling and a child, and this allows us to select every other child within the section that's going to be even and then apply styling to every one of those Children. So now we can see that we're still on this grayish color and is I've got this background gray. So maybe I don't want everyone to be great. May I want every other one to be great so that we have some kind of contrast and something is different happening there. So you see now, whenever we're scrolling between the sections, we've got our main section area and ever we scroll down, we see that we've got varying colors. This is exactly what we want out of our web page because we want to be able to present them as actual separate sections. So users coming in and they're scrolling Well, we want them to be able to see that. Okay, well, this is scrolled differently. And also in regards to that, we can actually set specific images for each background. So what if maybe in about area or I'll take products right now and if want to set a specific background image to cover off that section? The product section? Well, this is really easy to do, So let's go down here and identify that products and apply background styling so much like what we did over here, where we took a background. And so now we've got it as no repeat, so we don't want it to be no repeat. So let's make some adjustments to these attributes. Eso We've got one that's called Cover, So take a look at that. We go down to products or we need to actually set cover separately so I can do background size can cover so soon. Now that background covers that particular one. It's not really turning out that great, but it is covering that off. So maybe we can do, you know, repeat over here, and that should not be within that you, Earl. Maybe that's what the problem was. There. Jump back into Lauren pixel and I'm going to get another image here. So we set our why to be 1000. So let's go by that. And maybe we can get a color image. So maybe we can use this one for this would probably make more sense in the about me section. So now we can see how it's nice and neatly presented their eso. Each one of these sections could potentially have a different image on. We could use a number of different images as well. So maybe we want to set another image here. And maybe we wanted to another one as city. So I'm copy image address, and I'm gonna just hey, stud in there and I'm gonna put this one in that boat section. So now are about has a nice city image. And so when we go back to about, we can see we've got that city image there and actually, we had an image there as well. That doesn't seem to be loaded s So this is what I meant by that. I want to actually separate out this section where we've got the rating could Sometimes whenever you've got writing on top of an image, we don't necessarily see it as easily. So in the next section, I'm gonna show you how we can update that that's coming up 13. 15 Section text rgba: So this lesson Let's go down to our sections. So we've got the article. So what I want to do is whenever I've got a section and I've got an article where underclass section and I have an article one apply a semi transparent background to it. So let's take a look at this selecting out section. And now I've got the tag article and let's apply some styling to that s Oh, this is gonna be really easy to do where we just do background. Well, we could do background color and we're going to use our g b a. So rgb a is red, green, black are blue, red, green, blue and Alfa Alfa gives us stability to make this kind of transparency to the background eso any value all the way up to although it from 0 to 1. So now we've got semi transparent and I'm actually going to change this to be white, and we can see here it that it is changing on the rate hand side. So maybe we want to make it even more visible. So maybe set it as and eat. Now we see that whenever we've got our text, it's more visible and being presented in a more visible fashion. Eso also maybe we want to add in some potting around there. So So they're text is more centered and maybe even wanna go a touch bigger. So now we've got our more centered text there presented lot, Nacer. And of course, we do have our sections here that we can click through. So the next lesson we're gonna look at how to make it responsive. So we noticed that whenever we're re sizing well, this menu, at a certain point, it stacks underneath our logo, and that's not what we want. So we have two choices here where we can either hide our logo and have this take up that entire space, or we can present the menu in a different format. And that's what we were looking at earlier, where we had that icon, which we could click, and then that would open up the menu here, so nice and neatly just above the section areas. So that's what we're going to show you how to do in the upcoming lesson. 14. 17 CSS media for responsive web design: So let's look at how we can make our website responsive. And again, this magic is going to come from CSS, and we use what's called media queries and because we've been building up this website actually from the desktop version. So we've been building up from up from the large sites down. And there's two different ways, of course, that you can build websites. You can start with your mold Bible view, and then you could build up from it as well. So those are the two options that you have, and this may affect the way that you actually look at and how you're presenting your content. So let's take a look at this. And so this is our website. So far, we've got our home page here with got So everything is being presented nice and neatly. But when we do resize it, then we see that we run into some trouble there with the styling of the menu. So let's take care of that with media queries so I can minimize this because we don't need to look at our index. So this is all done through CSS. So with media queries, you have an option to set what you're, I guess, essentially different break points within your website and what I mentioned earlier where we started off with our big view and moving down. This is why we're gonna use Max size. There's also, if you start with a mobile first approach, you might be able to use men with, because this is going to set a break point once you grow larger than 6 40 So right now we're setting a break point once we shrink down less than 6 40 So I know it sounds the same . Slightly different because the ideas are that all of the content, all of the CSS outside of this Max with is just by default. And then the max with is going to make that adjustment as opposed to all of the default settings and then men men with would make that initial adjustment. And, of course, you can set this max with to be whatever you want. I usually like to set break points around the 6 46 8700 area. This usually gives me a really good version of a mobile version, so that's where if I'm sending only one break point, I'll do it there. You can, of course, set multiple break points. So just to illustrate how this is gonna work So maybe if I had something that if it's an iPhone so really small So maybe how this brake point there and maybe a hod tablet size. So I had a different body color, so I'm just gonna set. So for body, let's set up some styling here, so background color. And this is just all to illustrate how the media queries work. So I'm gonna be removing these as we go along. So do read. And maybe this one can be green. Because, of course, we haven't really used green yet, So let's take a look at this now how this is gonna work. So we do have actually body colors that were setting. So maybe this isn't the best example of it, but let's, uh, let's see where we could actually see something that changes. So maybe for the sections, for now, I'm gonna get rid of the background color. Be a better way to demonstrate would be to go down to here, and I can simply set a background color for particular elements. So let's do it that way, there is need to update these ones now as well. So now we see that at 9 80 So initially it's white and this was the difference between the men and Max because initially it's white. And then when I shrink down, I get my changes happening At 9 80 when I shrink it down even more, I get another change happening 6 40 and then if I shrink it down even more. And I think the reason that it doesn't look right is because I'm off to the way off to the side there. So they bring that back into focus here, and we can see that when we shrink it down, even Mawr toe for 60 than it turns green. So this is what the media queries conduce, and the really neat thing about them is this gives us stability of applied, different styling, and this is where we can apply styling. We see here that we need a breaking point. We could we need a way to present this menu in a different format, so let's make that adjustment here that it's actually going to go to Aqua whenever we hit that breaking point and that's probably about 7 20 Let's just refresh it. Make sure changes get take place. So roughly around when it hits, we can probably go with a 6 80 So I don't want to tie it to closely, but we could probably go with a 6 80 here. That this is the point where I see the menu drops down. And this is where I want to have my media query to readjust the menu in the way that's gonna look and one of the things that I want is I want to display my many menu now. So let's take a look at that and change that to display block, and then we're gonna I'm gonna show you how we can redo the way this menu is going to get presented. And I don't really need Teoh. We're gonna leave this in for now, but we're not going to really need to worry about all the different home page colors, some going to just leave it in right now for sampling. But normally you wouldn't do this where you'd be changing the home page color, depending on what size your contents being presented. So the next lesson we're going to continue to work with the media queries and fix up this menu and get this working properly, so it's coming up in the next set of lessons. 15. 18 Update menu to be Responsive on resize: in this. In the previous lesson, we introduced you to media queries. So I'm gonna show you what else we could do with our media queries. So what I want to do just going back into our CIA set or our HTML And let's take a look at how our menu is structure. So we've got our class nav, and it's being presented within this type of fortune. We've got a nerd list and list items. So what I actually want to do is I want to hide the class nab. So I want to do display none. And I want to move my media items or the a Norden list down. So wanna text align it 100%? So show you what happens when I add this in. So first thing that I wanted to do is do nothing, and we'll do display enough. So you see that once it shrinks down to a certain point, we're display nuns who were hiding that navigation menu. We're going to rely on that image to take care of that. The thing I do want to still take care of. So we've got our menu meant menu and I want to float it to the right because I don't want it sitting there in the way s I want to float that one off to the rate, and actually, it's gone off way over to the site. So maybe you want to add in some margins as well. So I'm going to do margin right to bring it back in to the visible area, and I want to make it bigger. So I'm gonna just the font size. So maybe take a fought size, a really big thought size to maybe 36 or something like that. And maybe I want to move it down from the talk a little bit because I don't want it sitting right at the top there. So maybe just move it down. Five picks from the top and I also want to update the cursor. So this is we can see assess. We can update what the cursor looks like whenever we go on top of it. So you can see here that brackets presents with a bunch of options. So the one that I want to choose is I want to be a pointer. So let's refresh that. And now whenever I go over that So now we've got the pointer. Eso this indicates that this is a clickable link s So this is the pointer where we've got that hand. And we can see that whenever we've got links that we get this pointer value. So that's all built in Teoh to are are many menu there, and now it's being presented more like a mini menu in a visible menu. So let's go back into our media query and really show you how we can present the menu items . So we want this to be clicked and we want to add some functionality. And we're going to do that adding in some JavaScript, some G query, whatever we add in that as a clickable item. So we're gonna take care of all of that with javascript. And if you're not familiar with JavaScript, urge a query. It's gonna be really straightforward. I'm not going to get too deep into it. It's just gonna provide us capability of adding event listeners. So let's finish this one off. So we've set the navigation to be to display none. One of the other things we need to do is set the width of it, but let's take a look out the love on ordered list and list items and setting a width of it to 100%. And we're gonna line that text Subutex the line to center so that the text is aligned to center. So maybe right now what I'm gonna do is I'm gonna remove that display None so we could actually see our menu. So this is where our menu is going to show up. So this is nice and neatly showing up exactly where we need it to eso. The idea here is gonna be that whenever I click this, that we're going to be presented with this navigation menu. So we want to also update are enough to display at with 100%. So that takes up all the available space. So the idea is, we click the button, it shows up, this menu shows up and yes, the menu is actually on top of the content and we actually want to present it this way because we don't want the content shifting down and up with the menu as we open and close the menu. And then the idea here is gonna be for mobile users that they can click one of these menu items and they can be brought to that page. And then this menu will eventually close as well. And this again is going to be done in JavaScript. So now we are ready to complete our project. We're going to jump into the JavaScript in the upcoming lesson, and we're going to control the viewing of the menu item. So let's just make sure quickly that everything is working as needed as we see that whenever we get to the larger size, were able to click down and were able to see all of our content here that's presented within the website and whenever we shrink it down, were presented. Now with this menu, it's a clickable menu or will be a clickable menu, and it's gonna present our content in a more usable format for mobile screens. So that's coming up in the next settle. Essence 16. 19 Introduction to JavaScript and jQuery: this lesson is gonna be a quick introduction into adding some usable functionality into your Web page. And with there's three cornerstones off any website, so it's gonna be HTML, which we've already covered CSS, which is the styling. So this is the presentation part of your HTML. HTML is the structure of the Web page. CSS is that presentation and interaction is provided via JavaScript. And when it comes to JavaScript, there's quite a few really nice libraries and JavaScript and essentially, they make that JavaScript more functional and easy to use. So with JavaScript, JavaScript is really unique in the way that it handles your HTML content, and it works alongside your browser. So whenever any web page load. So I'm gonna just open up this web page here. I'm gonna quickly open up my inspect. So this is available within any chrome browser, and you can always go over to inspect s so you can go into your tools. You can see developer tools among the windows machines. I compress control shift I, and it gives me some information about what's happening within my website. So when you go over to elements and make this a little bit smaller. Eso We see that we've got all of our styling here so I can click on any part of the web page and I can see the box model here. So I know how much how wide it is patting border margin. And I can see a lot of information from my website. I can see the source code here. I can click on things and I can see presented with the styling. So this is a really useful tool, and especially when it comes to javascript and I try to explain this and run through this fairly quickly if you're not familiar with JavaScript s. Oh, this is gonna be a really quick introduction to what JavaScript is and how it works within your website. So the reason that I opened up the deaf tools not only to show you the styling is to show you what else is available here. So we've got our computed values here for every element within the Web page, and we see here that this is actually built up within the browser. So the browser, whenever it comes to a Web page, it loads all of that HTML content that's available within the file CSS and JavaScript, and it builds out from the HTML source code. It builds out what's called the document object model. So this is the document that's being presented. And with JavaScript, we have the ability to create event listeners and actually interact with this document object model. So when I go into any one of my elements here, So I've got my article and I can see I've got a whole ton of properties and values. So I've got the inner html inner tax and so on. And JavaScript actually gives a stability toe access all of this content and information from that HTML element and going down. We see these on a board auto complete on blur cancel. So these are events within your Web page, and this is where the user would come in, interact with your content and trigger off certain events within your content. And JavaScript again gives us this functionality where we can listen for events and we can perform certain actions. So someone comes and clicks on something which this is the long that we're gonna be using. We're gonna attach a click event to that menu. Trigger s so This is the one that we're gonna be using, but essentially what this is going to do. This has already built in to the browser it already understands. It already creates all of this for each and every element, and it's all ready to go. So javascript, all that does is just patch into this, access it and provide that coding interaction that you're looking for when you're developing dynamic content on your website. So in a nutshell, and I think that's probably one of the quickest explanations of JavaScript. And of course you're welcome to look into additional information on JavaScript, but it's not gonna be essential for this course and to get going with the website that were producing. But we are going to need to use some kind of dynamic functionality within this website in order to trigger off that menu. And what we're going to be using is so JavaScript has a bunch of libraries and these libraries allow us to interact with the dawn, especially when it comes to Jake. Worry a lot easier, so with short less code, and it just really makes a lot more sense. Eso Let's open up one of these libraries, and one of the most popular ones is G Query and will ever go to developers dot google dot com. This gives us access to the seedy ends of a bunch of really cool libraries, and we're just go down here and we see that we've got RG Query Library here and we're going to use the one x version. So this is the most compatible version across browsers. Some of the older browsers might not be ready for the newer versions of J Query. So this is something to be mindful of. And we're not really looking for a lot of heavy duty capabilities within J Query. So we just want some straight for it out of the box event triggers. And this is gonna be perfect for what we want accomplish within our Web project. So going back into our editor, I'm going to just add that library and JavaScript just like with CSS, we have the ability to add in libraries and linked to source libraries so much like what we did over here with foreign Awesome. We're linking to our CSS library. We're linking to a javascript library and linking to the library now gives us access to that JavaScript capability. And because we're linking to that library, which is the decree library Now we've got J coury available, and any web browser automatically has JavaScript. JavaScript is the language that doesn't require any compiling. All you have to do is place it within script tags and you're ready to go with JavaScript. So now that we've shown you how to set up JavaScript and one other note on JavaScript, you might see it within in line. So just like the styles with attributes within an element, you can also add JavaScript onto any element within your Web page. And we saw that as it's built out by the dawn that we have that connective ity between the code and HTML elements. So in the next lesson, we're gonna write some Java Jake worry code in order to create that interaction that we're looking for for a website 17. 20 Add Click events create interactions for users: we're all ready to go with JavaScript and J. Corey within. Our Web page has got our script tags all ready to go. And now we want to create some interaction. So whenever we click this particular element, we want something to happen. And we can set this up within our Jake wear and within the J coury cord. So because we're using Jake worry, we have to wait for the dawn toe load the document object Model s O. We can access J coury code once it's ready and once it's loaded. So we do something where we've got this function and then this is where we place our Jake recalled within here on This is different from javascript because with JavaScript, we don't. I need to necessarily wait for everything to load in order to provide JavaScript capability . But if we want to interact with our HTML elements, then we do need to make sure that everything is loaded and that it's ready to go. So with Jay Query, which is why I'm using J query because you don't really need to have a huge JavaScript understanding in order to get started with Jay Query. And as we can see here it's The concept is gonna be similar to what we do with CSS where we identify the particular element that we want to use. And the format is the same way that we were accessing the CSS. So if I've got an element that has on I d, I'm gonna access it with the hash. And if I'm just accessing a class, I can access that with the period, So same way, same way that we access the elements. And now we need to specify what type of interaction we have. So we use the dollar sign and the rounded brackets, and we we conclude the quotes and then we have the name where the i d of the element that we're trying to access. So all this is doing is this is specifying that element that we want to provide interaction to. And as we saw earlier, this type of capability has already built in. So click capability is built in and ready to go and then within the click, we haven't option. So javascript is a Siris of functions. Functions are blocks a code that get executed. But we can also do functions within other functions. So whenever that click is initiated, we're going to run our functions. Go. I don't want to go through and name and create a separate function for this. So I'm going to just create ah, function within here. Eso Essentially, this is all we need to do in order to set up that that has been clicked. And I'll just show you a really quick thing with JavaScript so we can demonstrate that this actually gets triggered and whenever we click this. So I got to refresh this whenever we click it, we see that whatever code is within here gets run through. And this was just a simple alert message that we can trigger and JavaScript and that's all that was. So what I want to do is I actually want to toggle this menu and javascript Haza built a J. Correa's a built in function for that, it's a really nice, smooth functionality. So again we identify the element that we won't apply the coating to, and we do slide. And that's another good thing about brackets is that it has J query content in here, so we have the ability to see what it's gonna do so slide down display the matching elements. Sliding motion slide up is going to be the opposite, and slide toggle is the in between. So depending on what state it's at, it's gonna take the office and state. So let's take a look at that and refresh this and we see that now we've got that menu capability. We can click, and we've got that interaction ready to go within our Web page. So in the next lesson, let's take a look at and start building out some additional functionality here. So some of them here. So we've got our pages here, so everything's working. But there's a few things here that are still missing, and one of them is the fact that this menu is not closing when we click it, and also whenever we resize the page, we see that it is sort of working. But we wanna make sure that whatever we're re sizing that were hiding the menu properly, so this again, even though it's functioning now and it is working, everything looks good. There's some more stuff that we can add in with J. Craig and one of them as well with Jae Query. It's got this really need enemy functionality, so that's also built in. So instead of going directed to the page, it does that kind of scrolling effect, and that's a really nice, neat effect that we can add in within our webpage, so show you had to do that in the upcoming lessons. 18. 21 use jQuery to get pixel position of HTML elements: So one of the things that I wanted to add in I wanna have a smooth scrolling down whenever one of these buttons gets clicked. Another thing that I want to add in is that I want toe slide this menu back up whenever it gets clicked. So those are the two things that are still missing in our interaction. And let's add that in And I promise it's gonna be really straightforward with secret. And I'm not getting into too much detail with G query. Eso were just need enough to be able to provide our functionality. So this one get rid of that function and we're going to use the click event again. And remember how with jobs with CSS, we identify the elements, so we do the same thing here with bakery. So if I want identify a class nav class list item, the anchor text and I wanted to create a click function here. So whenever it gets clicked, I want a trigger off an event and just show you really quickly what we can see here. So I'm gonna use console log in order to demonstrate what information is being passed here from the event So let's go back out into our Web page and just show you what happens now. So whenever still need to shrink this one down, So now, once we shrink it down so we can get our actual menu here, click the menu and we can see that within the consul. So I can shut some of this stuff down here. And the consul is a way to communicate back and forth information for developers from your Web page. So when I click at, I get a whole bunch of information here. Getting presented this again. Is that Dom? That's in action here where we see all of this information. So never we click. We get tons of information here, and we're gonna utilize some of this information. And the really neat thing about it is that it actually picks up information from the item that I clicked. So we get things like we've got our mouse event. We've got her X and Y coordinates. We've got current target, so we see that it's going to I pressed the base. You are. I so I've got some attributes there as well and so on. So I've got some really nice information here that I can utilise within my logic when I'm applying it to my Web coat. And the reason I'm showing you all of this is because we do have the ability to pick up the target. So whatever item I'm clicking here, I'm actually able to pick up that target information. So let's jump back into our code here, and I'll show you how we can pick that up. So there is a Nev Ent. So with Jake worry, we can use an object. We can access an object So the current life object is coming under this. So we have ability to select the attributes and we can get the H ref attributes out of the element. So basically, what's happening here? So refresh it again to show you what's happening. And this is where the consul is really useful because it gives us this ability to see s so we can see even when the menu is large, that we can see which anchor we're which you, Earl, we're tryingto access, and we can pick that up. And the really neat thing about this is now I can use that as a target value and move the entire Web page to that particular target. So now I'm picking that information up, and this is already contained within that element because javascript j query smart enough to know whatever. I'm clicking and passing over information. So going with all of this information now, we're ready to actually move the web page, and we do have the ability to move the Web page to wherever we want. But one thing we do need to figure out is where it's located. So let's set up some variables and variables are a way to hold values S O. This is our target. So this is our target section. So I'm gonna just name it as that instead of passing in the consul, I'm gonna used the variable target section to contain that information. And now, within J query. I can access this as an object so I could do the same thing dollar sign and keep that information in there. And I can check to see how far off the top it is by using offset. So it gets the current coordinates of the first element or set of coordinates of the first element in the set. Basically what that means is I can return back my X coordinate or my y coordinate of where we're positioned at eso what's happening here? And I'm just gonna finish this off and talk a little bit more about it. So this is going to give me a value off where that particular section is located. So whenever I click it, I can see that I get the actual coordinate position off the section wherever it's located. So it doesn't really matter where which section is present. These values are always gonna be the same. So I know that if I go to on my web page, if I go to 1108 I'm gonna be presented with the about me section If I go to eight that I'm presented with the homepage and the way that this is working Remember again that we had our heading information contained, Ah, 100 picks. So that was down. So it was moved down on. We've got some padding around there, So that's adding in another eight. There were four and four, and then on top of it, we added in each each section was 1000 1000 picks height and you mathematically at all of this. Together we can determine what position the Web page or that girl is at. So now we know where we want to scroll our web page too. So I'm gonna show you how to do that in the upcoming lesson. 19. 22 Scroll webpage dynamically: Let's open up our editor. And now we're gonna ply the functionality within J query in order to move our web page. So, no, we're no longer going to be relying on the defaults within the HTML. We're gonna be using J Query to move our page around. And the really neat thing about Jake Worry is it's got this really cool animate functionality. So let's select out our HTML and selected our body. So selecting it by the tags so much like what we did with CSS, where he had her classes, we had our i DS we could select by tags and we're going to use built in function in Jaqui called Animate to Performs a custom animation of a set of CSS properties. So basically, it updates the CSS in a calculated fashion, all built in with Jake Weary s O. What we're gonna use is animate, and it's got several properties here that we can set so we can do scroll, and we're going to do scroll top. So you see that when we're presented with the options there, we've got some options there to scroll it to the top and we're going to scroll it to this value. So probably best bet is to create another container. And maybe I could just call it Scroll Two or something like that. And now, instead of using all of this long function, because right now this one is going to contain that value that we saw. So what we do to to do is specify scroll to in the position that we want to scroll it to. We could have also entered in the in America use we could do 108 or whatever. But this way it's gonna be more dynamic, and it's gonna actually perform that functionality. And also we can provide properties where we can set how quickly the scroll happens so we can animate it. Weaken said it. 1000 is one second, 500 is half a second. So let's do the scroll. We're going to keep it relatively slow, and we can adjust the speed as needed. So let's take a look at this and see how this looks like now so it could get rid of that. And now we see, whenever we go to the sections, it's it's doing this really nice scrolling capability. So see that we're moving the page, and it's a much nicer effect than when we were just simply clicking it, that the user is presented with the fact that it's actually scrolling and moving up and down, and that they can see if they want to see the page above it. Taken. Simply, scroll to it so much Nacer presentation to the users than what we had by originally. So another fit thing that we should do here is at in a prevent default. So with with elements they already have basic built in functionality. So this is why we passed that event object in. And we're going to use another method in order to prevent the default action, which is on a hyperlink to click through that anchor text. So this not sure if we're able to see much of a difference. But it should smooth things out a little bit and present that content in a little bit better fashion instead of having that kind of double scrolling to it that removed the default action of the hyperlink. So lastly, what else we wanted to do is whatever we're on our move, I'll or we've got the smaller version. We want to be able to click it, and we want this window to close, so that's coming up in the next lesson. 20. 23 Hide menu when clicked on small screen: we're pretty much ready to start wrapping up our code. So a few minor things here that you might have noticed So what we had mentioned earlier as well. So whenever I open up the page and let's refresh this one here and we can see that as I shrink it down, we get our menu showing up. So there are a few issues there with where the menu showing up. So sometimes it doesn't exactly appear s so this is a CSS issue. So let's add in some CSS here for the mini menu, and we're gonna do display. So I want to always make sure that's displayed as a block. And this is where I can always make sure that it is displayed as a block by adding that flag of important and also I want to float it over to the right. Let's take a look at this now refresh, and so there we've got our many menu, and now when we click it, we can go to the page that we're looking at. Everything looks like it's working pretty good, but we still need to add in a little bit more J. Coury and that G query is going to be in orderto handle closing off of this menu once it's clicked. So let's add dot in and with G query. The thing is, you can get as we saw before we can get values so you can get values of any one of these objects that are available. And one of the ones that I can get is I can get the value of many menu. I can get CSS values, so I I'm gonna show you first is what value were able to see. So again we need to identify the element that we want access. It's gonna be by i d. So I'm going to use the hash so many menu and setting it up as a g Koury object with the dollar sign in the front. The properties are gonna access, or CSS so you can get a value of the style property for a first element in the set that matched elements or are one or more so basically what that means. If I had class, I get the value of the first CSS value and I watch check to see what the value of display is, and I want to put it in the console. So let's take a look at how that works. So now when I'm on the page here and whenever I'm re sizing or whatever, let's take a look at that. We can see that when we're re sizing and we click it so we can see that whenever anyone gets clicked, we should actually be out putting that Consul. And I think the problem there is that extra s. So it's the refresh that again. And now we can see that the value of many menu is none as its indicated down here, so I can make this a little bit bigger. So this is that same console there. We can see that whenever we click it, the value is none. But if we click it off the mini menu, we see the value is block. So now we can use that to apply some logic and apply some kind of dynamic functionality. We're gonna check to see what the value of many menu is, and depending on with the value is block. Then we know that we've got an open menu and that we have to shut that menu down. So that's what we can apply down here by using a conditional statement and with JavaScript geek, where we've got these conditional statements where we can apply if and if something is true . So if the value of this is equal to block, which we know it will be when we're accessing it on the smaller screen, then we know that we just wanna slide it up. So whenever this anchor, the snob list item with the hyperlink gets clicked, we want to shut that menu down. We're gonna check to see if it's open. If it's a block and if it is, then we're going to slide it up instead of doing slide toggle. We're gonna use another built in function and these air all built in within J query. We're going to apply slide up because we only want to slide it up. We don't want to toggle it, so let's go back out to our page and see what happens. So now when we've got this menu, many menu, we know it's a block and it slides ups, and I can shut this and click it and we see that we go to the page, shuts the menu right away, so Sometimes when we're opening and shutting these menus, we can see sometimes it's a little bit quirky where our menu disappears and we're not hiding and showing it because we're relying on CSS and CSS is, although it works well when we come in and we refresh it because we're loading the page, we might not have the functionality that we actually need within our one page scroll page. So there is a fixed to this, and I'm gonna show you how to do this in the upcoming lesson. So that's coming up in the next lesson. 21. 25 Final Fix of issues completed website: So let's let J Corey show the hiding ensuring of this Nath bar and I can remove it from the CSF so I could keep it in there. It actually doesn't really matter, because we're gonna allow Jake or Ito handle. That s So now we're gonna not have this menu bar disappearing, so it's still working. But let's fix this up and get it to work properly within our Jake were so open up. Our editor on gun I just open it up big here and again. This is within G query where we do this functionality and we're gonna use a check to see what's happening with the window And, of course, Jake Query because it's bound to the window bound to everything, any kind of user interaction. We can see that whenever the user, whatever event handler we want touched a specific event. So whenever the window is bound on resize whenever the user resize is the window just like the click functionality, we're going to run a function over here, and this is going to do something if the user resize is the window. So just to show you how this is gonna work, I'm gonna console log out resized. So every time that Reese Ice takes place, it's gonna fire off this event. So let's open up this and open up our inspect and a console and make this smaller now again . So now we see that whatever clicking off that by mistake. But we can see that whenever we're re sizing, we're triggering that event, and it's firing off all those console log messages. That's why that number keeps increasing because we're doing a bunch of recitals there. So what we want toe happen is we want to do a quick check to see what the men, what the status of the many menu is. And if it's display none than what we want to do is we want to show it. And if it's display hot, if it's display block, then we want to hide it on the resize, and we're gonna just trigger all of this functionality. So let's take a look at that now and open, not up in our editor. So again, we're gonna provide that same conditional type functionality in here, and we're gonna check to see if this time if it's ah, none, and if it is a nun. Then instead of slide up, we're gonna show it and else was just over here. And otherwise we're gonna hide it. So we're gonna provide and actually, maybe we need to add this back in. So it did remove this, but we still probably need tohave none there in order to do let CSS do some of the control . And then we can run through it as well with our with our Jake. Right? So let's see how this works out number before when we resized it and we're playing around with it like typically, the users wouldn't be doing this type of interaction. They would just maybe resize at once. But this is just something that we can handle as it's a bug within CSS. So now it's working out a lot smoother. We don't need to see the consul anymore. And now we can see we've got are fully functional website. Never. We click it, we're moving to the next section and everything is working exactly as we're expecting on our one page website. So again, when we re size it, we see that we got all of this showing up and different sizes. We've got a different break points set and everything's ready to go. So this is it for our one page dynamic website. And as you can see, we've got covered off quite a bit of different functionality. So most of the bulk of it was within the HTML set up, and then the bulk of it was really the CSS, because the CSS provides a lot of that magic. But when you add in G query, you can see that you get all of this really neat kind of animated effects, which really makes those one page scrolling slates look a lot better instead of as before. Whenever we click the link, the hyperlink would just go to the page. We wouldn't see that school action. So that animated scroll action in G query is one of the really neat things. And that's why, uh, it J query is used often times in these one page sites because it's just really easy to apply. This, uh, this really nice functionality and presentation to users so all of the source code is gonna be included as well, and I do encourage you to try it out for yourself. Check it out for yourself and see what you can produce. See what type of one page interactive website you can produce with the content that you've learned within this course.