Learn HTML CSS creating a single page website | Laurence Svekis | Skillshare

Learn HTML CSS creating a single page website

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (2h 4m)
    • 1. Learn HTML CSS creating a single page website

      1:38
    • 2. 1 Introduction to building websites from scratch

      1:59
    • 3. 2 Course Resources Overview

      8:00
    • 4. 3 Wireframe planning of website

      4:53
    • 5. 4 Web Design HTML Page structure

      6:14
    • 6. 5 Add placeholder content to prepare for stlying

      5:19
    • 7. 6 Setup CSS defaults

      3:58
    • 8. 7 Create a sticky Footer position it at the bottom

      4:36
    • 9. 9 Navbar coding options for styling

      9:32
    • 10. 11 Add styling to sections

      8:35
    • 11. 13 Add section background covers

      6:49
    • 12. 14 Image tweaks and adjustments to CSS

      6:55
    • 13. 15 Header update style

      4:38
    • 14. 16 Contact form styling

      7:31
    • 15. 18 Add jQuery to website

      4:19
    • 16. 19 Animate scrolling of webpage

      6:53
    • 17. 20 update classes on scroll

      9:44
    • 18. 22 Google Fonts and Background shadows

      6:27
    • 19. 23 How to add social icons

      5:55
    • 20. 24 Resources to update CSS and customize

      6:41
    • 21. 25 Final Updates

      3:45

About This Class

Explorer how websites are made.  Learn about creating your own website from scratch using HTML CSS and jQuery

Explore how modern single page websites are made.

Learn about using HTML, CSS and jQuery together to develop a website from scratch.  Build a single page website within this course, everything is included.  Straight forward real world web design training form an instructor with over 16 years of web development experience.

Building websites is easier than you think.  This course will take you step by step about website building, teaching you the core concepts on how to design and develop a website completely from scratch.  

Web design plan in 5 easy steps.

  1. Plan the design of what you want your site to look like
  2. add HTML creating the structure
  3. add CSS make it look great and responsive
  4. make it dynamic with jQuery
  5. tweak and update as needed.

Everything is included to get you started quickly.  Top resources, source code and links to applications used within the course.  HD quality video. 

  • experience how to build a website from start to finish
  • find out about resources used within this course
  • learn how to wire-frame and create a website outline
  • familiarise yourself with how to setup HTML to prepare for styling
  • explore options for development with dummy data and placeholder images
  • Basic of CSS for your template
  • create a sticky footer 
  • learn how to create and add a navigation bar
  • Background explained, how to cover sections with backgrounds
  • How to tweak the CSS
  • Learn how to make it dynamic and interactive
  • Animate the scroll process 
  • Google fonts, social icons and more

I'm here to help you learn how to make websites, and ready to answer any questions you may have.  Let's being creating a single page website from scratch!

Transcripts

1. Learn HTML CSS creating a single page website: explore how modern single page websites army learn about using HTML. CSS and J Coury together develop websites from scratch. Build a single page website. Within this course, everything is included. Straightforward riel. World Web design training from an instructor with over 16 years of Web development experience building websites is easier than you think. This course will take you step by step, how to build websites, teaching you the core concepts on how to design and what developed a website completely from scratch. Web design Planning in five easy steps plan and design What you want your website toe look like Add HTML structure. Creating the structure for the website. I'd see assess, make it look great and make it responsive. Make it dynamic with J. Corey Tweet and update as needed. Everything is included to get you started quickly. Top resources source code and links toe applications used within this course HD quality video experience. How to build a website from start to finish. Find out about resources used within this course. Learn about wire frame and how to create website outlines. Familiarize yourself with how to set up html to prepare for styling, explore options for development with dummy data and play soldier images. Learn the basics of CSS for your template. Create a sticky footer. Learn how to create an ad and navigation bar. Backgrounds Explain how to cover sections with backgrounds. How to tweak your CSS. Learn about how to make a dynamic and interactive animate the scroll process. Google funds, social icons and a whole lot more. I'm here to help you learn how to make websites and ready to answer their any questions you may have. Let's begin creating a single page website from scratch. 2. 1 Introduction to building websites from scratch: hi and welcome to building out a website from scratch. My name is Lawrence, and I'm gonna be your instructor for this course. So within this course, we're gonna be taking you and showing you how to build a website from scratch. Starting out with a default html template. We're going to write out all of the source code needed in order to create a website just like the one that you see in front of you right now. So this website is going to be fully mobile, ready, fully responsive. It's gonna be a single page website and also it's gonna be a really nicely laid out websites. We're going to go through how to set up the contact form, how to set up a different product section with a number of different items as products also about contact home and a header section, including how to add these background images and everything you need in order to build a website also adding in social icons like the ones we've got here at the bottom. And this website is going to be a single page website where we're able to navigate using the different navigation icons here navigation menu here at the bottom and notice that whenever we scroll to a different page, it automatically activates that pages, setting it as active. So we can Either we can click down and we can activate the page or when we scroll down with See that we're actually going through different pages on we see that the navigation bar is responding to that as well. Eso we've got the same website just over here. Same similar functionality and you can get a better look at how this navigation menu is gonna work. So all of the source code and resources that were using within this course are included within the course. So you two can follow along and create websites just like the one that we're presenting in this lesson. So when you're ready, let's begin writing out a website and creating web site from scratch 3. 2 Course Resources Overview: in this course, we're going to be building out a single page sticky footer website from scratch. And in this lesson, I want to go over. Some of the resource is that I'm gonna be starting with in order to create the website. So first of all, I've got a Brown editor open here. So this is brackets I O S O. This is a free product from Adobe. If you already have an editor, you can go ahead and use that. If you want to fall along with what I'm doing within the course exactly as I'm doing it, I'm gonna be using brackets. So it's an open source editor you can download, and it works essentially the way any other editor would work. Eso If you want to check that out, it's available at brackets I o and what I'm gonna be doing, I'm gonna be starting out with on html template here. So this is just a standard HTML five template where we're specifying the doc type. We've got our opening HTML tags specifying the language. We've got our head sections. We've got some meta information in here, and this one here is an important line. We're setting the view port. This is gonna allow us to create our website to scale on mobile devices or on smaller screens. And we've also got a link here to our style sheet. So this saves us the trouble of actually having a whole bunch of styling information here within our HTML document and essentially separates out the styling from the HTML. And we've linked it over to style dot CSS same folder as index dot html the file that we're using to create HTML. So what we can do is now weaken type into style that CSS and have the styling properties come out onto the web page standard body open and close and then closing off the HTML. So this is our standard template that we're starting with, and we're gonna build a website out from here. Some of the other resources that we're using within the course, so we're gonna be using our browser is gonna be chrome. So this is an example of what we've got open here. And essentially we don't have anything yet within our Web page, we're going toe over toe local host. So if you might have seen that that we are going to local host ESO. I'll show you how you can actually set up local host as well on your own system. Although we're in this court's, we're only gonna be going over html CSS and JavaScript, and all of this runs directly in your browser. But if you are curious how to get local host or local machine running on your computer, you can check out Zampa. So this is that Apache friends dot or I download Zamfir Windows Lennox OS X, and I simply have it running in the background so that I can go over to local host. And what it's doing is it's essentially simulating an Apache server running on my system, and it's simulating what I would be getting output from a Web host. So all it does is you just do an install, and then you started. You could you only need Apache. You can start up my sequel if you're starting a database files illa, and there's a bunch of other options. There's configuration options and a lot of really cool stuff in here. So, as I said, you only really need tohave a browser. So the browser that I'm using is chrome And the really nice thing about Chrome is it's got these deaf tools here. So I've got it in a separate window popping up and this gives me the ability actually to toggle the different devices. So when I'm designing for mobile, I can really easily see what my website is gonna look like on a iPhone six. Or I could set the dimensions of my screen sites that I want to work with. And this is just a great way to really quickly see and get some information about how your website is being displayed and rendered out, and is gonna be very useful when you're fine tuning your CSS some of the other resources that I'm using it within this course. So I'm going to be using some placeholder police holder source files, some using place. Hold it for some images, Loren Pixel for images. And I'm also gonna be generating some Laura IP suit text that is the number of these different generators on line. So we're going to be doing that in this. What this is going to do is this going to allow us to better designer Web pages because it's going to give a stability to add in police holder content. And what that essentially does is make your website look like a real website without actually having to have all the assets in place. So place hold it, Lauren Pixel. And there's a bunch of these online eso you can again, depending on if you already have your assets, you can actually put your real assets into your website design as well some of the other resources that we're using within this course. So we're gonna be using G Query. And in order to access Jake Worry, you can go over in the J. Corey website or you can get one of these hosted libraries, so I usually prefer to use Google's hosted libraries. And, as you can see here, they have a whole bunch of hosted libraries. And this gives us access to the Jake Worry Library, which essentially is a JavaScript library, which gives us a whole bunch of really nice interactive functionality. Within our Web page elements are HTML elements. Eso really makes a nice, quick connection saving quite a bit, according that you could do anyway in Javascript, but it would just take you more time, and it's not as intuitive as Jake Worry. So this is why we're going to use G Query as our preferred way of creating dynamic interaction. Another thing that we're gonna be using in the course is Google fonts. So these are Google fonts available at Fahnestock google dot com Whole bunch of fonts to choose from. And it's another quick way. Teoh have access to 808 different fought families. You can sort through them. You can pick different styles on really fine tune and select eight the thought that you want to use and, lastly, some of other resources that were using. So we're going to use wire frame CC to quickly do a drawing of what we want our website toe look like. It's gonna be a single page website, so there's actually probably not a lot that we're gonna be doing within the planning, but it's always a good idea when you're designing your Web site to create a blueprint or a rough sketch of what you want your website to look like. It's really gonna help you out with how you can section off the different pieces of your HTML structure in order to apply CSS more effectively. And also, I'm gonna be using code pen. I owe so essentially code pen I o. It is a place where you can type in html, CSS and JavaScript and see it rendered out immediately within your web within the display area. So if you type in HTML, you see it showing up here, type in CSS showing up here. And this is a really helpful tool when you're designing your Web content because it does give you the ability to again fine tune that you can see that the Lord is already showing up. So I just demonstrating the JavaScript works in the same way. Whenever you start typing at a automatically renders and shows it up. So again, this really does help you fine tune your coding because you get to see what it looks like in real time. Right away. You don't have to switch any pages. It's all available on line, so you just need to jump over to the website and create a new pen so believe they have a button up here to create a new pen, and you can create a free account there with free accounts that share publicly and Whenever you create your project, you can see that, or you can pay for the premium account to save private, to save private code and pence. So now that we've got all of this out of the way, let's start creating our website in the next lesson. 4. 3 Wireframe planning of website: in this lesson, we're gonna go through how we can create a basic wire frame, a rough sketch blueprint of what we want our website toe look like. So I'm gonna be using a tool here at wire frame dot cc and essentially, this gives me the ability to quickly sketch out and drop a wire frame of my website and how I wanted to look. Now the idea here is that we see that we've got these grid lines and we can really find tune to how we want the different sections of our website to show up within the grid lines . And of course, there's a lot of options to create your wire frame so you can even use it in photo shop for a number of different applications that are available there. Eso depending on what the purpose of your website is. So if you are actually doing a website for clients, then do take some more time. Really spend some time drawing out this the wire frame of the way that you want to present the website. Make sure that that the wire frame is consistent to how you can design your website and all the different sections and so forth, uh, and then present it to the client. So in this case, we're gonna be drawing out a really simple plan. So let's begin. And this is gonna be a rough sketch. You could also do this with a pen and paper. You don't have to even open up a computer to roughly sketch it the way that you want your website to look. And essentially, because this is a one page website, we're gonna have all of the content visible with the different sections of the website. So this will just simply represent different sections. And the idea here is going to be that users scroll down between all the different sections and we're gonna have a scroll bar that's gonna move alongside with it s we're gonna have a sticky foot or scroll bar at the bottom. So I'm gonna create that one there, and it may or may not. Is this so the sticky footer is actually going to be, ah, fluid navigation bar. Maybe we'll make a black, so it's really stands out. So depending on the size of the screen, this may or may not be adjusting. So I'm going to just make a quick fixed there. So I've got it within the grid lines. And so we're gonna present our navigation menu there and this content over here, this isn't gonna have a border around it. So depending on the size of the screen, it may fit 100% with the navigation bar. Or it might be smaller if it's on a really large screen or on the smaller screens at a certain break point that we've set, it's gonna be 100%. And then down here is where we're gonna add in the difference. The difference. Maybe do some text here so we'll have our home page will have products. I make this a little bit bigger about me section and contact and turn this toe whites make it wider. Bring it down. So this is just gives us a rough idea of what we want, how we want our website to present. And let's just edit that text. I think I got a line break in there, so we wanted to to show up on the same line so roughly like that. But we are gonna add in some additional spacing in between these, so that'll space seven nightly Macy. And it looked like actual button areas. So a rough idea of how we wanted to present maybe have a little bit more towards the top. And as the user scrolls down the website, they're going to always be presented with the sticky menu. So they're gonna know which which section of the website there on. So these can actually even highlight in the background. I think I've gonna have that like that. And then I can add in some text afterwards as well. Maybe we'll make the text. So that's being home. And the idea here is that this is going to show up. So depending on the section that they're on, it will be blocked like that products the same thing. So they they're gonna actually know where they're looking at. So really simple, straightforward design. And then we're gonna have a number of sections. So home products about in contact. And then we'll probably have a footer at the bottom as well and maybe even a header at the top when the user comes into the Web page. Ah, and gets the first glance at your website content. So now that we've got our rough sketch ready to go, let's go ahead and start adding code and building out this website 5. 4 Web Design HTML Page structure: in the last lesson, we built out what we wanted our website to look like in a wire frame. And now we're ready to start opening up her editor and actually creating our HTML structure . So this one website is gonna be fairly straightforward. We've got a few main content areas, so we're gonna have a navigation bar which we're gonna place stick yet the bottom there, and we're gonna have several sections of content, so we might also have a header and a footer. So essentially, this is going to give us six sections, but within this mean scroll, herbal section and the naff bars is going to be a section on its own Just because that this gives us the ability to place and position the nap are. And we don't want to wrap it within the rest of these six sections because we want this to be fixed with so going up to a matter of eso, we're gonna add a wraparound there or container there toe hold all of that, content all of those sections within their and this is gonna be entirely separate one. So we're going to start it with essentially to parent pieces of each team l structure. So the 1st 1 would be where we're gonna house are now and they will just put create a dip their toe, hold on to our nav content and then listen within their We've got our nav element and the now that's gonna be built within on, or a Nord erred list. And we're gonna present a number of list items. Eso usually typically, this is the way it's done, but we don't actually have to do it this way. This is a new optional way off doing it and maybe actually to do something a little bit different. Let's just do him as h refs. And in order to demonstrate that there is a number of different ways that we can actually control and set these this this scrolling up. So the 1st 1 is gonna go to hash Index and close it off. And this is just the whole section, even though the whole website is gonna be, ah, home. So maybe that may Maybe it makes more sense. We just call it accordingly to the section. And our next section that we're looking at is about, and we just give it a uppercase a boat and we had another one where we had products. So it might have to move these around so that we can see how that we're presenting them within the website. And then lastly, we're gonna do a contact because you always need to have a contact section for people to be easily able to contact and connect with you on your website. So just save. That s so that's our NAB section, and we're gonna create another div, and this is gonna contain all the different sections of our Web page. So we're going to start out with a bunch of sections. We can also do a header in here, a swell if we want, So that could be a default starting area for a Web page. So let's add in some content here. Welcome to my website. Just a quick welcome message. And then within the first section, let's create each to their and odd in. We might want to actually have a container around there, So I'm going to do an article and then within that article, So this gives us another main container where we can we can add in some additional styling options and this is gonna be useful, because if we want to wrap around and have specific background for the within the section there, where we've got our actual content, this is where we can differentiate and add in that background color eso Typically, we might have ah, whole background for the section and then we have another element here floating within their and this is where content is gonna sit. And I'll una add in some placeholders content as well as we're developing this eso I'm going to give this one on i d of home so we can identify it and I'm gonna just copy and paste and do four more. So one for a boat and we're gonna obviously we're gonna update this content as we go through the lessons, the products and contact. And then we have to make corresponding ideas to all the different sections and that was just brackets, auto formatting. And then maybe let's just add in a footer as well. And this is where copyright and full contact mop never about the company. So typically you would have this type of content there at the bottom. So all of this now is within this div The first it is our navigation menu. And essentially, this is all we really need to do in order to create the structure of our website. So we can actually now go to the Web page and take a look at the way that's going to look got a few of these that are opens. I just wanted to close these down and let's take a look at our website. So now when we refresh it well, it doesn't look like much yet, but we are gonna be adding all the styling and all the functionality. Eso also bring this navigation menu down as sticky on the bottom. So all of this is coming up in the next seven lessons. 6. 5 Add placeholder content to prepare for stlying: in this lesson, I want to update our HTML toe, actually make it look more presentable and make it look a little bit more like an actual Web page. So now we just got our section headers here and blah, blah, blah. So let's add in and generate some Laura IP suit text. So Laura Mitsu is a standard way of creating some meaningless text and adding it into your Web design. Eso it actually looks like real texts, but I believe it's ah, pseudo Latin text used for Web design as they've got a definition down here. A swell eso. We can also randomly add check marks. So I'm using a generator at Laura Itsu info, and from here, we can generate out are different text and weaken. The nice thing about here is that we can add in our HTML code, so some of them they don't allow you to do that. And if your editor you can copy and paste it within the display area, then that's that will work. But if you're not able to do that, then you got to make sure that you have a generator where you can do HTML text. So let's cut down a little bit on the paragraphs and generated some of this text eso we can also adjust this to. So maybe that's pretty good. Open up where we had original, blah, blah, blah and just post in. It's not actually adding in those HTML. So this is one of the problems here, so I'm actually going to switch to a different generator they use actually blind text generator, cause that one wasn't actually adding in the HTML that I needed eso This one could generate different characters and so on. And we do it in a few paragraphs here. 300 characters eso we see here, we've got the paragraph tags and that's what we were looking for, generating of that text. Eso gonna added that I'm gonna generated out for a few of the other sections. Maybe this one has less paragraphs, but maybe some more words. So let's copy this one of its and I usually obviously I could just copy and paste the same ones. But I like to have some variation of the content that I'm posting within products. You do on a Norden list there and do a bunch of list items and gonna pop in some images here and I could use Lauren Pixel. So maybe that one is a good one. Lauren Pixel doesn't always load very quickly, so that's why I usually prefer to use place. Hold it. But Lauren Pixel looks just so much better. Eso Let's sigh Let's use Lauren pixel for all the different images and I want to do. I also do want to get a variety here, so might want to use different different slashes there. So we've got cats and city and people. So let's try that it and see how this transit eso. Now we can do cats for one list item, and when I save, it's gonna drop that down and I'm gonna have I want have a number of different items here. So we've got city. We had people and I think the last one maybe we could do animals. So I have quite a variety of different images that are going to be showing up there and then over here within the contact area. So this could just be like a standard contact form and then within here, we've got perform, fix that up, and then 1st 1 we've got our input type equals, uh, should be search should be text there, and next input type is gonna be an email. So we're gonna be expecting an email there. And then lastly, we can just do button equals submit, submit button, send email. Close off the button slash brackets already took care of that for me. So let's save this and take a look and see what our page looks like now. So now it looks, uh, got an extra bracket. They're closing bracket, but it generally looks a little bit better. Like we've got some actual content within the page that so we're ready to start designing out our web page and building out the CSS adding and styling and really make it look more like our initial design where we've got a navigation bar at the bottom. There s so let's start on that in the next lesson, and that's coming up 7. 6 Setup CSS defaults: in this lesson, we're ready to add styling onto our Web page inherited transform it into our original wire frame design. So this means that updating all of these sections and the navigation bar and making it look and feel like the website that we wanted to create right in the beginning, according to the wire frame. So let's open up our editor and we did have toe make one adjustment here. We're moving out that extra bracket, and now we can start applying our styling. So we've already got styling linked in via style dot CSS. We've got a stash eat style dot CSS. So let's open up that style that CSS and start by applying styling to the body and to the HTML. So usually, when we start creating styling, we start from the the main container s Oh, this would be the main container of HTML and the body. So we're gonna start from that top level element giving it a height of 100% so that because this is a one page website, we wanted to go the full height that's available to us. We also I want to take care of things like hyperlinks within this section, so we might have ah, hyperlink here so may have a number of different hyperlinks. So let's so let's update that as well. So maybe this is, ah, hyper linking, and we're gonna add in some additional hyperlinks throughout our page. So let's take care of the hyperlinks within this section. Eso Typically, when we're setting up our Web page the way that we want it to look, we would deal with the hyper linking and the main elements first and with modern Web site, you typically don't have a lot of those underlines anymore. So these air as HTML by default renders at hyperlinks, will see their blue and underlined eso. If you want to apply, really apply some nice styling to it. With modern Web sites, we usually take out the text decoration, so it's set it to none to remove the line and then give it a color. Eso This is dependent on what your color scheme is. So for now, maybe I'm going to do just a dark blue there, so not much of a difference. But in order for us to be able to differentiate the hyperlinks out and next, we need to add in ability for the users to be able to tell all Well, this is a hyperlink, because something is happening when I'm hovering over it. So it also makes hyperlinks more appealing and mawr feeling like that. There's something that the user can click, so we're going to give the underlying back in, and we're going to give it a color Whenever the user hovers over, eso might do something like crimson, so it really does stand out that something is happening. This is something different, and the user can distinguish all of the different hyperlinks. So next thing that I also want to do is update images because I want to make the images responsive. So this is where I added, I am G. And I do Max width. And essentially, what this does is this allows us to update depending on what the container sizes the image with. So if it's actually over the default container size, it's not gonna hang over. The edge is it's gonna take a new value of the default, which is 100% in the next lesson. We're gonna look at the next level of elements within our HTML design and start building those out, start applying styling to make them look and feel the way that we want to present them within our Web design that's coming up in the next lesson. 8. 7 Create a sticky Footer position it at the bottom: So now that we've applied some basic styling onto our website some default styling, we're ready to start taking. Look closer, look at our main sections of our Web page and start building out and applying styling to those. So first of all, let's look at the next element, the next major element that we encounter. And that's this dip. So I'm going to give it an I d. Of now far so that we can easily identify it. And this one Now we can start creating where we want a position that now bar. So by selecting oats, I d. Now bar, we're going to give it ah position, and it's gonna be a fixed position, which essentially means that it's not gonna move wherever I place it on the page. It doesn't matter where the user scrolls to. It's always gonna be sitting there within that page. So let's take a look at that and right now doesn't really do anything because I haven't set the parameters. Let's set those parameters. I'm going to give it a bottom pics of zero. So we have options to move it from different air urges of the screen. So we've got top right bottom left eso we could typically, if you want it to the be the top left hand corner. So we would do top zero left zero and depending on where we want a position, so I'm gonna do bottom zero so that it fits directly on the bottom. Let's also give it a background color, cause in our original design, we had a background color of black, so let's add that in as well. I wanted to split as a block, essentially, what displayed block, and I think by default, the diff would have had that display block anyway. But sometimes it's a good idea to add the's in just to make sure that they are actually in effect within the Web page within the design. So with 100 so blocking with 100 thes would have been by default anyway. But I'm gonna add those in just so that we do have the ability to if we make some changes here, if it's not a Dave anymore and so on so it can just apply it by the I D. So let's refresh the page now, and I'm actually going to switch out thes Lauren pixel images to place hold it just because it just seems like they're taking way too long to load. And it's interfering with our design work here. And then we can swap those out afterwards to be actual images. So place whole dipped and I'm just gonna have set them all as please hold it. So that way. This way, whenever I refresh the page, it's gonna load quite a bit quicker. So we now we see we've got our navigation menu, so it's fixed position, but it's actually sitting underneath what are visible content. That's no good. We need Teoh use zed index, and what SET Index does is it allows us to position where it's gonna be sitting. So who wanted on top of other content? We would need to make adjustments to the SET index and one other thing that we do need to set with it. We need to set height. So he said, it's with that 100%. So let's get of, ah, height of 60 picks. So this gives the browser a better understanding of where you want a position that content . So there's a navigation menu, and as we scroll down, we see that it actually doesn't change places. It still sits within that same spot, and this is the fact that we're looking for within our websites. We always have this navigation here fixed at the bottom, and it doesn't matter how much content were adding in. We can always see it, and so he's gonna be visible, and this is going to make it easier. As we can see, there's already built in functionality with anchors. Eso. It actually already brings the website sections to the correct area to the visible area, the focused area of the display screen. So even when I click thumb, we see that it's it's bringing them in to focus within our Web page. So the next lesson we're going to continue to build this out and really add some styling and apply some styling and transform this from just these hyperlink looking anchors to actual navigation but bar looking and you items. So that's coming up in the next lesson, 9. 9 Navbar coding options for styling: this lesson, we're going to continue to build out our navigation bar. So when we set up our HTML structure, typically you're going to see navigations with a new ordered lists and lists items. But for this lesson, I want to do something different where I'm just showing you how it works with just the anchor and the hyperlinks here. Eso this when we when we cut down on the Mount of elements that were using within our HTML structure, it also limits to what we can do within our CSS. So if we want apply different styling to the backgrounds and so on, we could apply that to the parent. But when we don't have any parents toe work with, we do get limited eso. There are some limitations to doing it this way, but either way, we can still make this fully functional. So now within the knave bar, no of anchor we can apply. Start applying some styling to it. So we noticed that it's really hard to see on that back background, so let's transform it into much later color. I'm gonna add in, just add in a text decoration because I definitely don't want text decoration showing up within that hyperlink there. I want to display them as blocks, so this would give it a little bit more spacing around it. So I just show you what this looks like now when I go out and if I refresh it. So now we've displayed as block and notice when you put in that display block that it actually transforms the order of it. So now we have to add in float left as well. So it transforms that horizontally. And I am just open up code pen and I'll show you what the what's happening here in real time as we're updating the CSS. So we've got our nav bar here that we're working with, and I just copy and paste that in quickly and get rid of our JavaScript here that is demonstrating earlier and open up the styling. And so there we go. So we've got our navigation bar here at the bottom make this a little bit bigger, so it's more visible. And just to show you what's happening as we're building this out. So when I added in display, okay, block to see what happens to our navigation bar, it automatically brings it down there and it actually doesn't look proper anymore. So now we just need to add in, float left. And what float left does is it actually brings them back in line Within that horizontal feature, we can also add in some potting around the text there so that they're spaced out a little bit better. And we can also do a background color if you want to do that as well. So just so that you can see and distinguish them from the rest of the background. This is totally optional. It's up to you, depending on how you're designing. I'm just gonna tidy that up on shrink that down because we don't really need to be looking at that right now. So typically with a navigation, maybe that stands out a little bit too much, and I'm gonna do it close to a dark color. But we'll do it to be able to distinguish it as well. We can also add in margins if we want, so we could do a margin left and show you how that turns it so that spaces ate all of the different buttons, so that distinguishes them. Eso This is again a preference depending on how you want to do it. You can also do a with pre defined your with so that they're all within a certain width. We could do text the line in a central line, the text so that they're actually sitting within the center. It's a lot of different options here, and depending on how you want to present it, you could do different options here. You can also do where you've got your 1st 1 So let's say, for instance, I didn't like the way that my margin looked here when added margin on the left here pushed it over. Obviously, I could do a margin, right, And that would probably fix that. But if you want to add different characteristics, you have the option to be really specific on the elements. So I'm gonna switch this back toe left and show you how to handle that. So going into, I'm going to just copy this value out here, and I'm gonna use first child, and so first child is gonna be for the first child that's available. That's the 1st 1 that's sitting in there. I can set a customized background color to it s so that we can see which one it is. So I see that we see it cause blue We can also apply to the last child. So whenever I save it, it goes blue as well. So this gives us the option. If we do want to remove out the margins are gonna update this back to first child and I'm going to give it a margin of zero. Get rid of that. So you say that and basically what we're doing is we're cancelling it out. So we're giving them all margin to the left five. But we're cancelling out the first child and this is really useful. If you're utilizing just different styling properties, eso maybe not as much as the margins. But you have something else that you're working with within the design and that you need to move it over eso. That's how you would do that. And there's also another thing with navigation bars. Is that you? Typically, whenever you're hovering over the element, you see something happening so along the same lines as adding in the suitable styling here , we can also add in, ah, hover on there. So whenever it's anyone hovers over it. It's gonna take these properties eso we can swap. It may be the background color and said it Toby White and set the color of the font to be black. So now whenever we hover over it, we see that we've got this type of effect and this is more along. The lines are original wire frame where whenever we're over it, it should be white. Eso We need to make one more adjustment here because I want to add in the active class as well. So instead of hover if it's got a class of active, I wanted Teoh take that that value as well. So if and we're gonna dynamically adjust the class here adding and removing active via J query. So now this particular element has an active active class attached to it and now we can see that it goes white here. So once we've added in that active class, it goes, wait and we can add and remove active classes as needed eso within our HTML. So I'm gonna just tidy that up, make it a little bit bigger. So the idea is going to be when we apply RJ query that we can set different active classes and we can see that whenever we remove the active class, it goes back to its default colors. And whenever we have the active class that we get this different look on it. And this is gonna be the idea as we're scrolling through their different pages that we're going to present the different sections within the navigation menu. So the user is actually going to know which section they're sitting on, depending on which section is highlighted and then also they do have the option to hover over them and see the different colors. You can also separate these out as well, so they don't necessarily need to sit within that same properties. Eso if for hover. You had something different, and maybe you didn't want to do exactly a white background. But you want to do on off white background so that you can distinguish which ones air active. Still, this is easy to add in an update as well. So now we see that whatever were hovering over them, they're not exactly going wait. But the white, the one that is active, is still having a white background. It's a number of different options here and again, depending on how you're styling it. So the next lesson we're going to continue to build this out and actually build out all of our sections. So what I'm gonna do here is I'm gonna copy and paste this content back into my editor so that we can actually take a look at this within our own Web page. So I'm going to remove those ones out, open up our page, and we see that now we've got our navigation bar and everything is ready to go and to fully function as we add in the different sections and make those updates coming up in the next lesson. So it's coming up. 10. 11 Add styling to sections: this lesson. I want to focus on the different sections. And because this is a single page website, it's important that our sections take up that full, available content in order to have the right effect that we're looking for as users scroll through the different sections. So even though our some of our sections might not have enough content to I fill up the hole Web height, we do want to make sure that we can accommodate for this and really bring out that scrolling effect within our Web development. So let's open up her editor. And in this lesson, we're gonna be adding in updating all of our section content. So what I'm gonna do, I had, uh, copy this out into I have a copy that whole div into our code pen here, and I'm also gonna copy of my styling. So actually don't have anything yet for the navigation bar or the section. So let's start to build that it. So I'm gonna just remove it what we were looking at earlier, and the idea here is that I want thes sections to take that full with, and we see within our code here that we can identify the sections. So we've got a div here and maybe we need to give this on i d. So they're just gonna call it mean for now. And this is going to allow me to distinguish the different sections. So main sections and the properties I won't apply to them, so we'll have a minimum height of 100%. So when I saved that, we see that there isn't really anything happening yet and that's because the height of the particular element is taken up that minimum 100%. So we're not actually setting it in relating it to the size of the page. And this is where we need tied in something else to make that minimum height instead of 100%. We want to make it the visual height, and this is going to release it to what's available within the browser and essentially give us that ability to to bring this out and position this as it would look within scrolling website. I also want to add in. So I've got an idea of Maine and I also want to take care of some other parts with the main section itself and this is gonna essentially acting as a rapper for our content. And so I want to set it as a maximum myth of 1200 picks because I don't want it always going to the full size. So if there's if there's availability for for larger sizes, so I'm gonna just shrink that down, I wanted only to take up up to 1200 picks are going to make that big against because so you can see the code there. But we noticed that when I shrunk it down, what happened is so maybe for now I'm gonna shrink it down even more so we can see a demonstration of this. I'm going to give it a border so we can actually see we're sitting on the page. And ideally, what I want to do is I wanna have this content centered. So in order center content within CSS. So container, we do margins so we could set a zero top and bottom because we don't want, ideally, adjust the top and bottom. But we do want to set on auto value for the left and right And what auto does, is it? Auto calculates the spacing on the left auto calculates the spacing on the right and splits it into. So essentially centering your content. We also want to add in some padding here. So we ideally might want to have some padding around all of the content so that it sits in the middle. We might also want to save that padding to the sections. So that's something that we can look at as well where we could have the different sections have the padding, so there is going to be a definitely a difference there. So if we did a back a background color, so I'm going to just do red so it really stands out and we do a background color here of blue. And don't worry, I'm gonna be removing. It s essentially, this is what it's gonna look like when we have the background colors. But if we do the padding around there, there is a slight difference on how that content is handled. And this is why I'm keeping the padding within the section because I wanted to write, relate to the section size, and this is also gonna give me the ability to add margins and so on, if needed Now, one other thing that I did want to add in is I want to add in position value here for the main section. And the reason being is that I might want a position that according to how my content is being treated, So if I position at relative, this is going to give me the option to put in a talk value or bottom value. But we have that border sitting there at the bottom. So I want to add in a bottom pics of 60 picks. So just to pop it up a little bit, moving up a little bit s so that we can actually interact with that s o bottom and we're just gonna do left at zero picks so that it pulls right over to the left hand side and tidy that up. So another thing that we want to look at and we want to work with is that we did have a different eso. We also had mean section, but we also had header and footer. So depending on how we want to treat the header and footer, we may or may not want to add 100%. So I'm not gonna want out 100% for the footer, but I might want to add it for the header. So I'm gonna just comma separate this out out in that header there and so that our header is actually gonna take up that full available space and for the footer. I'm not gonna worry about that. So I'm gonna just create a separate property here. I'm going to actually give it a background color to be able to distinguish it from the rest of the content. So I'm gonna give it a great scale type color. So let's bring all of this work into our Web project. I don't think that changed the each team mouth, but either case, I might have added something in there, so we'll just save that. And now I can add in the CSS as well. So now let's take a look at what our website looks like. So refreshing it. I've got to bring it back down to 100% and I'm gonna refresh it again. So you see that we've got welcome to our website. We've got home about products and contact, so now we can scroll to them. But that head section it doesn't look quite a rate with being so long. So I do need to make one adjustment there. I'm gonna take it out of this part here, and I just separated the properties for it and maybe give it a height of 200 pics and refresh that now again. So now we can distinguish between all the different sections and just going down here. I just want to make sure I've got a foot or there and for the footer. Maybe I want to do a height as well so it can stand it a little bit more. So now we've got our footer and everything is in place and it's still compressed. And that's cause when we were designing, we'd set the maximum width of 500. So let's update that back up to 1200. So make it really stand out better. So, ideally, we don't want to really have this blue background either. Eso I'm going to just simply get rid of the background on the mean and I'm gonna get rid of the background on here. We're gonna be looking at setting the background properties in the upcoming lessons 11. 13 Add section background covers: in this lesson. I want to update and tweak some of our content that we're presenting within our website. So this size is going to be a lesson to kind of do some quick tweaks and updates. So we noticed in the previous lesson that we had set the sections and still open up that code pen again that we weren't really easily able to distinguish between them. So I'm gonna add in alternating background colors to the different sections within the web page, and I'm also going to get rid of these default colors here, and I'm gonna make this one wider as well. So now we've got a bunch of different sections here. I've got this border around here which I want to get rid of, as well eso let's for so just tidy that up and so we don't really have a lot of code left here, So let's update some more of this content here. So I didn't wanna lost separated section and the header due in a few updates here to what we presented as the code. And then we had a height for a minimum height and this was 200 pics and we also had a minimum right out here for the footer section. So now that we've got everything in place, we can add in some section colors here, and we're going to do the same thing that we did in the previous lesson where we had a pseudo styling added into it. I'm gonna add that in as well. So I'm gonna add in styling into every even page. So every even section and the way that we do that is we do and child so which, like the first child last child weaken, do end, child. And now we need to specify which one we want to look at. So we're gonna just look at the even ones and hearing it out in a background color s so that we can distinguish the different sections, see between them. So there we go. So that's essentially there's, um, what we've got for for the different sections to be able to distinguish between them. I also want to really bring these toe life by adding in some background images into the sections. So let's go pop back down to here, and I'm going to set some background properties. Eso these are two background cover. So essentially this. If we do have a background image, it will cover that entire space. And also we're gonna set the background position, and I'm gonna center that position so that the background image is always gonna be centered . So we do have an option. I believe by default were centering anyway. But you do have an option of where we want to position those background images. So this is just in prep for all the different sections. Also, I want to be able to because I did add in these articles here, and this is gonna allow me to break out the different section values here. So I want to put so for articles for the article tags are gonna add a background color, and for this one, I'm gonna use our RGB or rgb A and do a white color. And RGB a allows us to set an Alfa as well. So that's red, green, black Alfa so that we can actually see underneath what the content is. And this is ideal. If you're adding and background images for older browsers, I should add in the background color rgb anyway, so that it's distinguishable there in case your browser's updated and so we could be able to see the text. We're also adding in some padding around there, maybe even a margin for the top and another one I really like a love to add in rounded borders. So I'm gonna do a border radius and I'm gonna give it 25 pick border radius. So see that that rounds with those corners. That creates a nice, interesting effect for our content areas. And we see that now on the two different content areas, we've got thes rounded effects on our content. And even though we can't see it in about and so on, we can still know that that is available. There s so let's continue to build this out and add in some styling for the different elements. So the 1st 1 let's look at So we've got an i d of home so we can identify it directly within our CSS so home. And this is where we can set a background image and that we need to find an image to place in the background. So you are l. And this is where I'm gonna use Laura Pixel. Let's pop back over to here and copy and paste at some of these image paths if we can. And I'm gonna just paste the image there in the background of whom and give it a second. So there's our image loading nicely, content nicely on top. Eso we do have some or options if we want to set for the different values there. So we had used this one. We've got another maybe for the boat. Me as well. We want to put on a boat there. So we've got our home. We've got a boat. Save that. So that's ah with Lauren Pixel. We're doing the same images, so I think that we need toe be more specific with the image. So we're gonna just do city. We can also set content for each and every page. Eso We still need to build out the contact form update that we need to build out the product's list as well and we need to still do something here with the top part, the home page. So all of this is coming up in the next set of lessons 12. 14 Image tweaks and adjustments to CSS: in this lesson. I want to make some updates. Eso We've got our content. I've added in the navigation bar and I noticed that what's happening here? We're not actually able to see the top because we've set a position as relative and we've shifted the bottom 20 so we can do either of two things. We can set the bottom 20 picks so that positions right at the bottom of the screen. Or if we want, we can use top and we could do top zero picks. And that way it'll nicely flow in and set up our header section right off the bat, right at the top. So let's take a look at the products here. So we've got a listing a bunch of a Norden list items here, and I really want to style this quite a bit on, presented a little bit better s so we know that we've got it under the products I d. So we can go down here to the bottom and for products we can take care of the way that it's being presented. So we have our own ordered list and list items, and now we can apply styling, toe marriage and every one of those. So let's do a display in line. So if we display it in line, we see they really nicely stock. I had to do it in line block there's with. So now we can set a default with to them. So if you want them roughly around 1/3 across weaken, sit them to default with of 30% or even 33%. And I didn't a border around it, one picks solid, and we're gonna make it a really lake border. And I got to shrink this down even more and also give it a minimum height so that they look better in line so that they're always at least 300 pics. And this is good if we're adding in some content here. So if I had blah a boat product and so on, we can see that now, as I go down here, we're aligning and were steady setting up a little a little bit neither. And they're gonna better align as we add in some additional content there. So each one of them has the ability have a little bit of content to really outline it and get them to align much better. So now we're adding and content. There s Oh, it's aligning really nicely and knows that whenever we're re sizing, we should actually add in some some responsive capabilities as well to this, so that realigns itself and lines up a little bit better. So let's take care of that by using a media screen. And I usually do the media screens way at the bottom so that we can see that the regular default styling and then we've got our media screens. So whenever it breaks past this point, I want something different to happen with my with my styling here, Amigo just set it up 700 picks. I want them to take up 40% and just to a height of Pato. So save that, tidy that up. And now, whenever we're re sizing, so now where they're stacking and we're still getting this, uh, there's bumped down here, so let's let's update that. Remove this out and we know that also with list items, we do have some default default styling, so we got to get rid of that as well. We've got those the style types, so let's just remove it out entirely from the U. L s. We'll update the margin to be zero will do padding to be zero. And this will get rid of any of those defaults and list style type and just set this one to none. Let's take a look at that now and save that over and let's wait for it to refresh and see that I just had to refresh their because for some reason, Code Pen was lagging in its update. So now we've got a much better looking website we've got. All of these are better aligned, and whenever we re size that, we see that they're stacking nicely. I could also make some adjustments here because I noticed that maybe 40% is not enough. And I could even go higher percentage. Sure if we can do a full 50 because typically, there are some lagging styling cues within here but doesn't seem like Copans adjusting really well. So probably have to copy this code back into our our editor and work with it from that perspective so that the 50% was a little bit too much. So we need to cut that down because there is some default styling as well. So if we cut it down to 48 then that's going to stock it a little bit better, a little bit nicer. We could probably even go to 49 kinds well and stock it in that way. So let's copy our code back into our editor and see what our website actually looks like. So now we've got all of the HTML code here, so Code Pen is really good resource to utilize. But sometimes it does have its bugs, so it's not always ideal. And there are some times when occasions when you do have to make some manual adjustments just to make sure that things were working the way that you want it or looking the way you want it. So now this is our website right now, and with Laura images loading in the background, we've got our navigation bar here at the bottom. We've got a product section so still need to build out our contact area, and we still need to make some updates to this header to really make it stand out and pop to users as they're coming into our website. So that's coming up in the next set of lessons 13. 15 Header update style: in this lesson. I want to update this head section of our website. So typically, this could be used as untraditional to your web page and to bring really people into your website. You could have just different effects and options there, that images and so on. So this is essentially my header area, and we're gonna make some adjustments to that content within the header. I do need another container there that's going to contain that content so I could float and center. It s Oh, this will just be a paragraph of the website and more information. So there s Oh, this is just starts, um, more placeholder content. And now I can go down into my CSS and making adjustments. I'm gonna save that and I'm gonna do main header. So I've got main header and just below that, I will apply some styling. Teoh any diff that's underneath the header. So for that first Div there, I want toe. I had some potting anybody that would want to do a border around it and do a background color. It's a slight variation off. White could even do beige. Let's take a look at the Web page now see what it looks like. And those Laura images are really taking a long time to load eso. I'm gonna simply I'm gonna comment thes open for now until we finish up with the website project and then we can bring them back into our web page so we don't have slow loading time, so it's update this. So there's our header there s o still needs a little bit more work. We definitely need to add some potting around their Teoh center that content and maybe quite a bit of padding. So 25 picks. We can also do border so border radius to make around it in line with the rest of the web page content. And maybe we could even do a background image on it if we want on so on, Or maybe an image. So again, depending on what you want and how you want present your website eso, we also maybe want to make it a little bit higher. So I had set it at 200 pics so we could maybe do it at 500. So it really stands out there. And so just so that people are aware that there's some additional content so you could have any number of items here. Maybe we just put an image underneath or an image within it. And this image, I'm going to actually just use, uh, this The ones were using before here for placeholder. So I could just copy of this tag here. Please sit in here and I'm gonna make this one bigger and a little bit higher. So see what this looks like now? So this was our image, and maybe we even wanna make it even bigger than that. It's a lot of a really nice full size image in there that's going to scale to 100% as we change different sizes and dimensions of our website. So there we go. So now we've got our welcome to my website about the more information we've got. All of our different sections outlined here. We've got the products eso let's finish this off, update the contact area and then add in our javascript org query to really make a dynamic and functional. But as we can see just that, HTML already gives us the ability to flow through the different the different pages. But of course we don't have any way to detect what section were on and how to determine what's active. And this is all going to come along in J query. So if you're not using Jake, we're in your project. Then you might want to make thes all the same color, and we won't. We won't distinguish for the user which section they're actually going to be on. So all of this and how to do all of this is coming up in the next set of lessons. 14. 16 Contact form styling: in this lesson. I want to update the form and how it's being presented on our website. That doesn't really look in line with the rest of the content. So let's take a look at form and make some updates to that s So we just had a really simple , straightforward form here, and it's not. There's not really a lot of elements here that we've set up yet. Eso let's take a look at this and start setting up some different options here within the elements where we can really speaking to style out this form. So we have our form tag there, so we can use that as our main mean point of connecting to our HTML. Next, I'm going to create a div and I give a class of role, and then within here, I'm gonna ply a label so it may or may not need to use it. So four and given an i d. Of name after equal, and then I have to tie that text field back into this. So we're gonna label for name. It's gonna be name close off the label and here we have to give it a name of you guessed it name, and we can also even add some placeholder content in there. So enter name. And so this is the format that we're gonna use another ones. So to save some time, I'm going to just update that one removed that one type is gonna be email name is gonna be email placeholder is enter for email and then lastly, let's just create another role here for the button so that we can break apart all of this content here and we don't really need to apply anything else there. So let's take a look at this. And now we've got our labels and some content, etcetera. So now we can apply some styling to our four. So let's open up our see us us. And typically forms would go into the top level eso depending on if you wanted to really isolated and have a whole bunch of different looking forms. But for the most part, your form is probably gonna be very similar if you're using multiple forms so that in this case I've only got the one form, so I'm gonna set some values here. I'm going to give it a max with, so I don't really want to take up way too much space. So maybe 800 picks could be a max with, I can add in a border around there, so one picks solid and we're gonna make it another really light border. And I didn't some potting there. 20 picks, potting and border radius. So I do like that border radius eso. Let's do 20 picks. I think that that's consistent with other border Radius is. We're also going to transform the label. So whatever label the label Tigers used, let's transform that to display block. So it takes up its own section. It's on line of code and with and give it a width of 100% just to make sure that it is taking up that full available line. And let's text the line so text aligned and we're gonna left align it that text. So let's see what we got now when we refresh the page so a little bit better s So we've got our labels there at the top. We still need to add in some spacing between all of these elements and more padding. We did give them classes of Rose, So here we can distinguish what we're doing with the rose so the Rose might have a margin and we could do margin at the top and bottom of 20 picks left and right. Could be audible. Doesn't suit what that looks like. That gives us a more spacing there. We can also add in spacing around the label. So margin and we keep a margin at the bottom time picks. This is quite a lot of options here. How you can play around with this to really update it the way that you want to look, let's also do our input and give it a with of 100% grab it go all the way across. Or maybe that might be a little bit too much. So let's make some adjustments here. So let's add in some padding. So zero and we could do maybe 50 picks eso we gotta be careful a swell that when we re size that were not not makes making a too much issue of this eso This parting is actually being applied to the cell s Oh, I want to actually have that padding here on the road itself and for the input. So we could do text and let's do tear text size or it should be fought size. Sorry about that font size so we can nascent, easily entering some nice flat sizes there on. Also, let's update and take care of that button. So we had type of button. There s so maybe all of our buttons we want apply some styling to that. So do some potting there. Do you fart size and saw it so it really stands it. So again, there's quite a lot you can do with this and it will come to to try the same with and play around with it and see what you can make happen within your code. Eso also, if you want a center that form, we can do that as well so we can identify it down here at contact s a number of different options here to center it. Really the quickest would be just to add margin, just like we center the main content where we could do margin and we could set top and bottom toe to zero and left and right to auto eso that won't actually center this contact, so you might want to add that in under here. It's all depends on how you want to style it. So let's take a look at that. And all I did was move that contact information in there s own. It's still left us some space for some additional information as well. So the next lesson we're gonna start adding in some dynamic capabilities by adding in J query into our website design, So that's coming up in the next settle essence. 15. 18 Add jQuery to website: in this lesson, we're gonna add in some dynamic functionality into our website by adding in G quit. So what g query is it's a javascript library, and I'm just gonna go over to hosted libraries from Google. And I'm gonna pick up ah link to bring in the source code the G quarry men ified source, and this way I can utilize it within my projects with Actually, I'm actually having to download Jake Worry and set it up on my website. Eso There's different ways to bring Jake Korean eso You could do this way or you could you could link to a library or you could download it and set up on your website. So either wait, as long as you're getting that J. Corey code set up on your page, this is where what you were looking to do. Eso. Now let's start working with RJ Query and Julie the G query Where Works is it really gives us a great weight to interact with their Web content within our HTML page, and we can interact with any one of our Web elements. So in order to activate and toe access J query functionality, we ideally we want the Web page to load. So that's where we add in this function. So you might also see it brought in as document ready. Essentially, this is doing the same thing as whenever your web page has finished loading than now. We know that we need to run where we can run our Jake or e chord. And that Jake record is just going to sit in the middle. Here s so let's add in some of our Jake Worry code and with Jaqui makes creating triggers and events really easy to dio eso If I wanted to trigger off anything within the novel bar any hyperlinks that are clicked the same way that I would access our CSS, I can access it via Jake Weary. So start out with the dollar sign to identify that this is an object or container and we're gonna select it enough. A. So we're gonna pick up any element that matches this pattern within our HTML, and we're gonna apply on click functionality. So whenever anybody clicks it, we fire off this function and then the contents of the function are gonna be available here , and then we close off that function. So let's think I added in one too many. So this is our function here, all ready to go. I had a cool in there as well just to break that up a bit. Eso let's let's console log out every time it's fired off collect and I need to update this . This is why we're having in issue here because I didn't suppose script, right? So it should be script and it should be closing script now. That's okay, So that's functioning better s. So let's go take a look at see what's actually happening on her Web page and to see the console. We can do this within Google Chrome say way that we got that all of those elements here. We can see that within the console whenever we click it, and I'm gonna bring that consul back onto the page so we see that's going clicked, and we have an option to put at the bottom. We have an option to hold it over to the right hand sites. It's probably better to put on the radio inside. So you see that, uh, every time we click it were firing off and we're triggering off a message in our console. So now we've got our event handlers up and running eso Now it's just a matter of creating that functionality where we're actually going to scroll to a certain point on the web page . Eso What we need to do is we need to know what was clicked. Some information about these items that were clicked. And this will help us better understand where we want to move and where we want to scroll to. So all of this is coming up in the next set of lessons. 16. 19 Animate scrolling of webpage: in this lesson, we're gonna update RG quarry, and we're going to use J coury to determine where each and every one of these sections as we click the different elements where the section is located and that we're gonna use then to automatically enemy and scroll down to a particular section. So let's take a look at our code that we were looking at initially with J. Corey, where we had brought Jake Worry into our website. And we saw that whenever we click, we can trigger this event and we can find out information about the ICT, the object that actually triggered that event. Let's go back over here. And one thing that we do need to add in we need to prevent a default function for firing off so we can get all of that event information as an event object. And here I'm going to do event prevent default. And what this is going to do is it's gonna prevent the default triggering off that automatic trigger where whenever we click that we actually move to that particular location . So whenever we removed the default we then nothing is gonna happen. Now whenever I hit thes anchor tax. So another thing that we do want to do to pick up here is we want to pick up the location off where we're trying to send out this the click to. So let's take a look at that. And yet the section So this is the section that we're trying to go to. Some able just get the sex and I D and we can use it. We can do it within this way. We're using this and we can get an attribute and get the value of H ref. And I'm gonna help put this in the console just like what we did before so you can take a closer look and see actually what's happening when we are triggering these effects. So back out to our Web page. Now it's click the menu items here that we can see that we're automatically trickling to go to the different sections. It's no longer responding because we don't have that in police, where we're actually moving the or the default action of moving to the particular section. So now we need to add that back in and adding it in with J. Coury gives us a whole bunch of options as well. So we do need to make some calculations before we continue. And we have to calculate out where that section is located from the top of the page. So this would give us a value in pixels how far down that particular section is located, and that will give us an idea of how far down we need to make our movement of our Web page . So we're just called this SEC talk to get a calculation of how far off it is from the top. We saw that we got that section I d. There and we can utilize that value by placing it in like that and the there's a built in calculation here to calculate the offset value. So get the coordinates of the first element or set of coordinates of every element in the set. And so we're gonna automatically offset from the top because we don't need the entire were entirely from the bottom and from the other ones. We just need to get that value from the talk. And so basically what's happening now. So I'm gonna place that in there and let's refresh it. And so now we can see that each one of these sections it has a different location from the top. And now all we need to do is animate and move our squirrel bar, scrolling our page to the correct section. So this is again built in functionality within J query. And it's really making it really easy to add this type of functionality eso we need to specify just like we do with CSS just like we did over here. Which element we want apply this to so we won't apply it to the entire HT Melton tired body And what we want to happen is enemy so animate performs custom animation of CSS properties and makes adjustments and calculations to them. Eso This is something I'm gonna I'm gonna show you within the console as we're doing our animations and as we do our movement that we're going to see that the CSS is automatically gonna be adjusting. And this is all gonna be done. The bakery. So where we want to animate it, too. We want to scroll to the talk. And as you can see, there's a bunch of options there as well. In order to really customize different pretty cool effects. And this is the value of this is the position where we want to scroll it too. And then we need another parameter there, and this is how quickly we want to do the school. So initially, maybe we want to do the scroll fairly slowly. So 5000 milliseconds, which is equal to five seconds. So now our schools are gonna take five seconds to reach that place. And I believe we've got our A built me section here. You see that? Now we're scrolling over to a different section and we've got our products section here and there's automatically we can see that we're getting properties from it, and it's automatically scrolling that down. So we see that positioning of the scroll is automatically dynamically adjusting and moving the entire scroll position to wherever we've selected it. Now, obviously this isn't ideal, and we want to make it a little bit quicker. So let's change this to one second and refresh and try this again. So now whenever we click it, we get a little bit quicker scrolling. And of course you can a justice to whatever works best for you. And this is how easy it is to make J query add some dynamic capabilities into your Web pages. So another thing that we're looking at and that we had talked about in our initial design is that we wanted these pages to update. So depending on the section that were in, we want to dynamically update. So we see that right now it's stuck on home, and that's because our active are active class within. Our nav is sitting on home. So let's take care of that in the next lesson using Jake, right? 17. 20 update classes on scroll: in this lesson, I'm gonna show you how to update classes dynamically using J query. So, ideally, what we want toe happen is depending on where the Web the scroll bar is located where it's sitting. We need to make some calculations to determine what section of our Web content the user is looking at. And we want to update thes accordingly. So we want them to update, add and removed active class as we scroll through the different pages. So let's open up our editor and this is gonna be J coury again. So I'm going to remove that it because we no longer need to look at that one. And we're going to create a brain. You function here. So this is the window window object, and we can fire this off every time scroll happens within the Web page. So essentially, whenever the Web scroll is moving, we're gonna fire this off. Let's create a variable here to calculate our scroll position and determine where the user is located on the Web site or the Web scream and we're gonna use window and we're going to get a value from scroll talked. So it's console log This out. So every time we move, we're gonna know, actually which which position from the top, where the user's view is. Let's see how this turns out. So now when we scroll, we see we know where the position is. So now it's a matter of making a comparison, checking to see if this value in which section were sitting in. And we can see here that as we automate the squirrel, we're getting all of those values popping up on dynamically changing their eso. This I will also work when the user presses these buttons because it doesn't matter who's initiating the scroll. If it's the J. Corey or if it's the user were still getting these calculations, and this is still firing off. So let's open up our editor again. And now we need to make some calculations with their scroll position, so we're going to see if the squirrel position So using that object value, we're gonna check to see if the value of it is larger than 100 because we don't want to be adjusting the school. If the user just touched the top position. Eso lau. Let's take a loop through. So Jake Carey also allows us to really easily loop through different elements. So we know that we've got this idea of Maine and we've got a bunch of sections in there, so that's how we're identifying them. And this is how we're gonna pick them up in J. Correa's. Well, so we're gonna use the hash to indicate that it's an I d seem as we do with our CSS so section and we're gonna look through each and every one of them, and we're gonna simply return back of value. So we're gonna do a function of X possum, that argument, because we're gonna utilize this this value to determine where the where the position is and how we can apply the different styling to it. So adding the classes and so on eso Now we're gonna loop through and pick up all those positions. Eso Let's console log this out so that we can see where we're located. So we're in a log of X, so X has a position of plus sign not and do the position value. So that's this position top. So this is going to return back a number of where X is located. This could never give us a whole bunch of information there, so we see that we've got zero. So the first section is at 5 40 The second section is 15 99 and we have it repeated. So these gives us this gives us the parameters that we can do the actual check to see where the user is actually located. So we know if the user is in 25 48 we can check to see if it's greater than this and less than this. And if it is, then we know that this is our scroll position and these are the top positions s. So we can see that if it's less than or equal to the scroll position, then we can add and remove the classes on. If it's not equal to that, we're not less than than we can update those classes. So let's take a look at this and open up our editor and make an update of this. So, first of all, what I want to do before I even do anything here is I want to actually remove all of the active classes, and this again, and G Koury is super easy. We just need to identify the element that we wanted to interact with within our web page. So this is gonna be nav A And we were looking for active class on the anchor. So now a dot active and we want to remove the active class, so we want to remove class. So we need to just specify the class name and that's active. So this is going to remove out the active class from all of those navigation items. So now we need to determine where were located and add in the class. And we can do this by using J coury again and specifying the class. So we need to write a condition here to check to see where we're located to see if our position is within that where we're looking at for the element. So this is where we're going to use the value of scroll position instead of console ing logging out the scroll position and I'm gonna I gonna just show you this and then we can make our calculations. It's essentially now. Every time I scroll, we see our scroll position and we see where it compares to the particular element. So in Jake. We were going to use a specific function That's again a built in function where we're able to identify a particular element Thea the the index value. So we know that we've got a bunch of them here, and what we would need to do is do a condition here to see if our values are matching. And if they do, then we're going apply this particular value to that matching element. So in order to better demonstrate this, we're gonna be using this This value here and we're just doing a condition to see if this value is legal, equal to or less than or equal to the value of our current scroll position that we know that we have a hit on this and we know that we can at this point, we can add the active class to it. Whenever we update the active class, it's just gonna go along. So I'm gonna show you how that works. So any of the nav A and we're just gonna do it on the equivalent pointer, what e que does is it allows us to reduce the matched elements on bring it into one specific index on We've got our index value right over here as we're looping through them. Eso this makes it using enough to add it in e q X. So this will return back and add the class to the specific index point. And we're gonna be adding an active. And I'm gonna move this one over, and I'm gonna show you why we actually have to remove the classes. So let's take a look at this now, and we see that as we're scrolling down where seeing that this actually is adding the active classes. But it's adding them to all of them that are less than that certain point. And we can also add in a different condition here. But we don't actually know where this position is until we looped through it so we can make an array of those and make some comparisons. But the easiest way is to simply remove out that active class on all of them every time. And that way, whenever we've got the last one that we're hitting, we're making sure that we've got that active class added into there. So now, as I scroll through here, we can see that the menu items are changing and they're fluctuating depending on where we scroll. So even if we hit the automated school via Jake Worry, we see that we've got all of these are lighting up as the website scrolls through the different pages. And so essentially, this is the objective that we want to accomplish with our navigation bar, where we can easily update update the active class on each and every one of these elements . So the next lesson we're gonna update and make a few other tweaks and updates to the website in order to complete this project and also going to show you some other tricks and tips. 18. 22 Google Fonts and Background shadows: in this lesson, we want to cover off how we can update our fonts and our background images and adding in different types of fonts within your Web page can really bring a lot of customization into your Web project. So we're going to go over to Google Thoughts, which is available at Fahnestock google dot com. And they have 808 different font families for us to choose from. And we can really easily bring any one of these font families or combinations of these four families into our Web project. So if I want to update my Web thoughts for my Web project, Teoh this one here. So I'm just picking one here at random. I make us my selection, I can click it, and it opens up several different options to bring it into my Web project. So I do have the option to import it directly into my style sheet, so this is my preferred way of bringing it in. You can also bring it into your page, just as you would any other CSS file by using a standard link within your HTML, or you could import it directly into your CSS. So I'm gonna bring that over and add that directly in my CSS and add it right at the talk so I can see that I've what I'm importing. And now to utilize those fonts, all I need to do is just select font family and use a specific fought family. So I'm going to use this font family and cross my entire website. And now, when I refreshed my page, my new font is there and ready to go. And as you can see, it's a quite a dramatic change from the previous font that just by simply updating that one source resource for funds The other thing that I want to do in this blessing this well, is look at the backgrounds. So in a previous lesson, we had deactivated some of the background images. So I'm gonna bring them back into you The picture Also, I might want to also customize some of my background. So maybe for my contact page, if I want to have a custom background for that so I can add that in a swell. So what do caught attacked? And we'll just do a background color here. And of course, this is all being shown to me from brackets. Eso I can simply click and select the different colors that I want to utilize. Now when I go to my website, it's check the suits of my contact page. Now looks like this. My products page looks like that. And then I've got my background image is in place, and also I might want to make my head or a little bit bigger this again, these air optional things that you can do within your website. I might even want a curve round the edges, so let's do that quickly. Let's do the radius. So we've used Radius and a few different options here. So let's do the radius of the sections and going over to where we had set the different section properties here within our CSS sort of going back down and we've got it over here means section, so I can just simply add border radius. So let's refresh that and see how this looks now. So depending on if you want to do it this way or not eso now it's Actually it's in style with the other elements that we have within our Web page, so it's make more of a uniform. Look where it is round it, so it does present itself a little bit better. We might also want to add in some margins and poundings between the different sections so we can do that as well. So we already have padding. So let's add in margin and we're gonna do a margin at the bottom. So what do maybe 20 picks at the bottom and this will give us some separation between the different sections within our website. And it's not gonna mess up our code because we're putting it at the bottom. If we put it at the top, we could potentially mess up some of our calculations for this girl. So we definitely don't want to do that. And we've got it fairly well. Eso It looks fairly consistent here with the other elements as well, and there's a number of other effects that we can add in as well. So maybe for the products, maybe we want to do a box shadow instead of thes borders. So maybe that looks a little bit better. So let's take a look at that where we set up our products in line. So we've got our border there. But let's do a box shadow as well. So this will give us a three D effect and it takes several parameters. Here. Smaby do 10 picks by 10 picks and do another 10 picks. And then here we need to enter in the color of our shadow. Eso usually typically you're going to do a fairly dark color and let's say that and see what that looks like. So now we go to the products. We've got this shadow effect. This might be something you like Might be something you don't like depending on how you want to create your code. I also wanna add in a margin at the top. It's, um urgent Top. Give it 10 picks there, so that will move that down. So create a little bit of spacing s weaken. Better see these shadows eso again, depending on what you want to do and where you want. Apply these shadows. It's all up to how you want to style your website. We could even do some shadows underneath all these articles as well. So have that kind of pop out and stand it from our web page, maybe even the contact form So I'm going to copy this shadow format and go over to where I set my form and save that. Let's go back to the Web page and do one more refresh and check out how the stranded eso it just it stands out a little bit nicer. It's a really nice effect now with the CSS three that we can create all of these nice properties that are now available within our CSS styling options. So the next lesson we're gonna add in some icons here for social connections within our Web pages, so that's coming up in the next lesson. 19. 23 How to add social icons: in this lesson, we're gonna go over how we can add in some really nice social icons Now, social icons these days are must have within your website, and the really good thing about them is their easily recognizable, and users are gonna tend to click them. So usually at least within your footer, you should add some social icons. Sometimes you'll find them in the header. Sometimes people will float them in a bar alongside, so the number of different ways to add the's in. So in this case, you're not just added in the Footer, and I'm gonna be using a resource called font Awesome. And the good thing about font awesome is it's got a lot of different fonts that you can really utilize within your Web pages. So we have some options here. We can download and customize it, and then we just linked to the path or we could link to the Cdn and there's some more advanced options down here as well. So what I'm gonna be doing is I'm linking to the cdn of font Awesome eso It's available at bootstraps. See the end and these are my options here. Eso I gotta just bring it into HTML. So this is a simple copy and paste. Bring my styling into you here and now I have access to ah whole bunch of really nice cool icons that we can use so we can go over here and we can do a quick check to see all the different icons. Eso If we want to connect it Facebook, you can see that we've got a number of options for Facebook. Usually I like to use this Facebook official one. There's also Facebook Square and so on. So I'm gonna just use the Facebook official. Once you click on Icon, you can just simply copy and paste that source code in and let's go down here within our footer and we're going to create a social icon box eso just below here where we've got our copyright information. Let's have a diff and this div is going to contain a number of hyperlinks, So h ref, and for now, we're not gonna link it out. But of course, before you go live, you should set this up as your social profile and maybe I can have a class of social, so I can really easily identify these icons. Eso This is for Facebook and we should also add in the other ones as well. So we've got our Facebook there. We've probably got a Twitter, maybe a linked in maybe Pinterest. It's all out in four different ones. So whenever I go to the Web page, let's go take a quick peek and see what this looks like now. So So we've got a whole bunch of the Facebook icons there, and the reason I linked it in social is this gives me the opportunity now to change the size of the fonts so I can really easily do like, social, and I can do fought size, and now I can give it a fairly big size. So that really stands out. And we can also add in additional styling if we choose to do so as well. So let's pick up the twitter one. The same thing I'm doing here. All I'm doing is doing a search s so we've got our Twitter Square Twitter eso Twitter doesn't have an official one. But let's just use this Twitter one here for Twitter icon and also maybe we want to look at Pyne Trust so it's pop back here and look at Pinterest and at Lincoln. So the Pinterest squares will keep it in line and Lincoln and we just do the lengthen square as well. And these air the four that I'm gonna use within this lesson. But of course, there are a lot of different ones to choose from at this point as well. So that was the Pinterest Square. And Alex just grab the lengthen. So these air, probably in the more commonly used ones, you might also be using G Plus s. Oh, it's another common link that people would have on their Web pages. Let's take a look and see what this looks like. So now I've got all of my social icons there, and they're still being colored just as any other link So we can make some updates to social here if we want a color and style them differently. So the blue right now it's working pretty good. Maybe we want to change the color, too. Just change it over to black and then over here, just as we did over here with the hover. I'm gonna add in an option here for hover and whenever it gets hovered, then we'll update the color Eso this baby will just turn it blue or something like that and we can even make it even bigger so it really stands out. So now let's see what this looks like. So now these air social icons, Whenever we hover over them, they're indicative that they're gonna luxury linked to something. So now it's just a matter of getting our social link you Earls and adding them in the hyperlinks there, and we're all ready to go with social. So the next lesson I'm gonna finalize this by bringing it into code pen. And I'm gonna show you how you can work with cold pen to continue to customize it. This source code eso that's coming up in the next lesson. 20. 24 Resources to update CSS and customize: this lesson. I want to show you how we can customize that our source code. So we do have Google's chrome and we can inspect elements here and just by inspecting elements. So let's say we've got our header here and we didn't like this color beige. So we have an option here to see what it looks like in multiple different colors and simply by we can't even have a color picker here. We can adjust the ingredient as well or the Alfa s. So we've got a lot of different options to really pick that correct color and pick our current color scheme. And then once we have our color selected, we have a nice option here with the box where we can pick out our color. Because, of course, this isn't gonna be saved. If you refresh the page, it's gonna default back to the old colors. You do have an option within within chrome to set up and save. Customize your deaf tools so you can actually have an auction here where you can save it onto your desktop or access the desktop file and then make changes and save it as well. So that's a really nice feature with chrome, but typically I I don't do a lot of that. I would typically go in and I would make some adjustments within the CSS just to see how it looks like. And just make note of that and then bring that into my my Web project manually. So even if the border, if I didn't like the border, I can get rid of that. And yes, it does look better without the border, so it probably would get rid of that. I probably would use a different color. We could even bring the padding down and so on. So we've got a lot of options here to play with. We can also see the box model here. Eso on any element. We've got a margin border padding and the content with so we can make adjustments on those . We can update the background color. We can do bottom border bottom colors and make a whole bunch of really nice updates here on this is available for any part of our website. So if we like to update the articles, we can make our updates there and someone so a lot of different options, we can turn the font on an office. Well, eso we can really get a better sense of what we want our website toe look like so the other And the other option I'm or commonly used is all usually resource like code pen. And then this is something that you could see life happening right away. So when you make your updates, you can see what your source code looks like. This advantage here is that this is if you've got a free account that's gonna be available to the public, So that is something to keep in mind. So with when it comes to code pen, first of all, the HTML is just looking for the body content. So all I need to dio or all you need to do is copy and paste it in. And then we see what the Web page looks like without any of the CSS. And now we know can go over and grab our CSS and bring that into our project as well and likes to tidy that up. So now we can see what it looks like with the styling, but we still don't have our javascript added him, and that's easy enough. We just go down here bottom and out in the JavaScript, and you're going to see there's gonna be an issue that's gonna pop up here. So and I'm gonna show you how to add in the libraries as well, because we don't have the library's added in as of yet. So we click here for this thing, this icon here and we can quickly add in J query. And there's a number of different libraries that we can easily bring into our Web project simply by clicking them. And if you're libraries and hear that you want to utilize, you can always add in the URL off the library. So this makes it nice and easy to simplify and add in J. Corey when you need Teoh. But I would just tidy that up, and now we'll see that looks like we're still having some issues. There s 01 of the other things to that I want to add in Esso, we noticed that we don't have those social icons showing up s so this is something that we can add in as well. So let's take care of that. And we want to add in the front. Awesome libraries. We need that to function. And so this is a CSS library, so it's probably it's not there, but we can added in within this type of format and we can save that and it looks like they're still in issue here with our With Our Jobs with RJ Query. So let's take a look at why that's giving us an issue. So I think I've copied it incorrectly. Let's go back down and make sure that I forgot to copy the function. So let's just make sure that we copy it properly in tidy it up, and now it looks like everything should be working s o just a quick check and we do see that it is fully functional and it looks just like our project and from here Now we can make our updates. So if you want to update our font, we can update our background as well some background color, and we can make it a grayish color if we choose and we're available. We've got quite a few different options presented to us at this point. Eso I also did want to get rid of that border around the heading eso easy enough to do so just going down to the header area and get rid of that border there. And also maybe we could do a different background color, so inspect element. So the these values air gonna be available until I actually refresh the page. They're not going to disappear until actually refresh the page. So that's a good thing to keep in mind. Eso If I did want to use the color, it's Azizi. Is this toe. Add in and utilize that color. So there we go. So this is our website brought into code pen and now we can play around with the source code and customize it to to make different effects and to move elements around within our Web page. 21. 25 Final Updates: now that we've come to a conclusion of our project. Of course, with CSS on with styling and Web design, there's always more that you can do to any Web page. You can really get fine tuning with. Some of the customization is and the CSS so take a look Good look around your website. Always make sure that you test your website. You test all of the links just to ensure that it's working properly. Open up different browsers as well is the same website in Firefox eso just to make sure that everything is fully functional because some of the browsers they do render out content differently CSS differently as well as JavaScript eso you got to be mindful of the fact that it might not work across all browsers. So always take a look through and just make sure everything is functioning the same way across different browsers. Make sure that you take a look on a mobile screen, make sure that you're good for small devices as well as for larger devices. Eso make sure that everything is functioning and working as you're expecting it to on different size devices as well Eso we've got our different phone sizes here by default within chrome that we can really easily access s so we can make it bigger and smaller and we can make customized, responsive sizes. So these are all things that we can update within our Web page. And I'm just noticing that we should do a quick update, because when I do resize it, it's when it's this size. Once under 700 maybe I should remove out some of the sizing here for the different elements here. So we had our 100 pics with here for the knave. A. So the way I usually like to do just to copy it over, bring it down here and then remove out all of the ones that we don't need to touch. So I can remove outs, background color center float, left decoration so I can remove out all of those. And I might want to make some adjustments. Here s O this one. I'm gonna just do I'll do a max with here, and we might want to do a max width of 25%. We'll see how this turns out. So when we refresh it and we shrink it down and it's still handling it. So maybe we want to get rid of the margins on the left to change that to zero and padding. We might want to move that zero as well. And let's refresh that. So now we see that our navigation menu is working slightly better. It is getting really small, so maybe I don't want to get rid of that padding there on the top. So maybe I want to keep my 10 picks on the top and bottom, but keep removed the left and the right. So, as you can see, there's always stuff that could use adjusting. So that was just one of the things that kind of stood out on me. But of course, go through your website, try it out on different sized screens, make sure that everything looks the way that you wanted to look, and then you can go ahead and launch your Web project. Eso use different resources. All of the we've listed out all of the source code and resources used within this course since, well, eso you have access to that and you can take a look around and build up on that as well