Website From Scratch HTML CSS Responsive Design | Laurence Svekis | Skillshare

Website From Scratch HTML CSS Responsive Design

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (1h 53m)
    • 1. Promo Video

      1:33
    • 2. 1 Website design course introduction

      2:32
    • 3. 2 Tools and Resources from Course

      4:21
    • 4. 3 Website Wireframe plan

      5:57
    • 5. 4 Build HTML Structure Layout

      8:40
    • 6. 6 Floating Elements

      11:36
    • 7. 7 Update header elements

      4:56
    • 8. 8 Build nav menu CSS

      7:20
    • 9. 10 Margins Padding Logo area update

      9:39
    • 10. 13 update styling nav menu updates

      10:08
    • 11. 14 Main wrapper update set selected item in menu

      7:02
    • 12. 15 Use jQuery to get URL page value

      9:00
    • 13. 16 jQuery Dynamic Classes

      5:18
    • 14. 18 Add web fonts Google Fonts to website

      2:21
    • 15. 19 select page styling

      10:12
    • 16. 20 Images products resize

      8:31
    • 17. 21 Course Summary

      3:58

About This Class

Want to learn how to create a complete website from scratch?

Step by step learning of a real world project, creating a website.  By the end of the course you will be able to expand your portfolio with different website designs.  Build you own websites using HTML and CSS

  • Course covers everything you need to know to build a website from scratch
  • Learn the tools and resources used to create web code
  • learn HTML and what tags can do
  • plan out your website, create it according to your specifications
  • build your website HTML structure and add styling to make it look amazing
  • Source code is provided so you can jump in quickly to get started with your own projects
  • HTML and CSS in the real world presented by an instructor with over 15 years experience in web development.  

Build websites for the real world, see how HTML and CSS fit together to create usable websites that are fully responsive and ready for the modern world.

This course will present skills and overview uses of HTML tags in a web page design.  Provide guidance on how to apply styling and overview common styling properties to make you website look good.

Find out what it takes to build your own website, you will be amazed at how easy it can be.

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

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

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

Transcripts

1. Promo Video: Do you want to learn how to create a complete website from scratch? Step by step learning of real world projects, creating a website By then to the course, you'll be able to expand your portfolio with different Web designs. Build your websites using HTML and CSS. Course covers everything you need to know. In order to build a website from scratch, learn the tools and resources used to create Web court. Learn HTML and what tags can do. Plan out your website created according to your own specifications. Build your website. Your HTML structure adds styling and make it look amazing. Source code is provided so you can jump in quickly and get started with your own projects. HTML and CSS in Real World, presented by instructor with over 15 years of experience in Web development, build websites for the real world. See how to use HTML and CSS and how they fit together to create usable websites that are fully responsive and ready for the modern world. This course presents you the skills and overviews. The uses of HTML tags and a Web page design provides guidance on how to apply styling and an overview of common styling properties to make your website look great. Find out how what it takes In order to build your own website. You'll be amazed at how easy it can be to create websites. I'm here to help you learn Web development and Web design. I'm ready to answer any questions you may have. You've got nothing to lose. I want to know more. What are you waiting for? Take the first step. Joined now and start learning to create websites today. 2. 1 Website design course introduction: welcome to our course on designing and creating a website from scratch. Within this course, we're gonna be taking a blank HTML page and creating a website out of it. My name is Lawrence, and I'm gonna be your instructor for this course. I've been a Web developer, Web designer for over 15 years. I really enjoy working on websites and really enjoy seeing what can happen when you apply some code CSS bring it all together and make a live website. So this is something that I'm really happy to have the opportunity to share with you today . We're going to be building a website from scratch. We're going to be using a few of the resources, such as a Web editor creating our HTML code, creating three separate HTML pages, a CSS page as well as a Java script page. And then we're gonna break. Bring all of this together to create a website just like this, And the idea for this course is to build out a website with mobile first thinking. So we're going applying media queries in order to style our website from the very smallest of screens. So this is just chrome here and This allows me to simulate different screen sizes, so we've got on an iPhone. This is how our website is gonna look, so you can see that it's different than it looks whenever we resize. Our site are screen size to the larger sizes, but everything and all of the content gets nice and neatly presented in a very readable uniform way that's responsive and friendly to mobile users as well as desktop users. So anyone of any screen size is going to be able to interact with this website and utilize all of the content that's on the website. Be able to digest it, see it really easily on, and the content gets presented in a fashion that users can interact with very easily. So one of the main things here is that navigation menus. So this is always a challenge on mobile eso. In this course, we're gonna be showing you how to create a navigation menu, and we can see that's actually changing position as on changing the screen size. And we've got different variations of how we present our navigation menu, and this is all dependent on what we want and what we wanted to look like, depending on the screen size. So when you're ready, let's begin creating this website from scratch 3. 2 Tools and Resources from Course: in this lesson. I want to go over some of the tools that I'm gonna be using throat the course in order to build out this website. So one of the main tool something and be using and one of the tools that you need to have in order to create websites is a good editor. So if you already have a good editor, you can go ahead and use that one. If you're looking to try something, you or if you want to try, the one that I'm gonna be using within the course, I'm gonna be using brackets. Brackets is available from Adobe. Have website brackets I owe you can go ahead and download it. It's free, open source, text editor, and it's actually really useful it side. Great editor. It's got a lot of great extensions and add ons that you can add into it. It's also got this life preview you can do in line editing. It's a lot of really neat functionality available in brackets. So this is the one that I'm going to be using within this course some other resources that I'm using in the course as well. So I'm gonna be using chrome as my browser. And the really neat thing about chrome is that it's got its Web deaf tools built right into every every chrome install eso All you have to do is do and inspect here and you get this really nice web deaf console opening up. And the really neat thing about it is that it's got all the information, of course, from the website the source code CSS. But you can also toggle the different devices so you can take a look at a website or any website and see what it would look like on different devices. So here I can see what it's gonna look like on an iPhone six. This is the brackets website you can scroll down. We see that it resize is the page. We do have an option to update it. We can flip it as well. So a lot of really neat options and chrome, and this is one of my favorite ones because it gives you so much information and really easy to build mobile sites so that you don't actually have to adjust your screen size. You can simply adjust it and toggle the different device moments and really handy when you're building out websites. And of course, these days when you're building out websites, you've got to be building and cognizant of the fact that a lot of people are gonna be accessing your website via mobile, so they need to be mobile friendly and also for Seo purposes, it's another resource that we're gonna be using. So we're gonna be using Loren Pixel. This is a website where we can create some dummy images, some filler placeholder images. So when you're building out websites, you might not necessarily have all the tools, all the images and graphics and the designs done already. So you want to build out your website and you don't have these s O. This is where we use placeholders and another placeholder that we're gonna be using within this course is blind text generator. So it allows us to generate some nice Laura, um, text that we could again use for placeholder information, and this allows us to build owed an actual website with the content dots even before we have the content. And one last resource that we're gonna be using is gonna be glitchy. Eso lefties are really neat tool that you can design graphics with so you can use it to design your wire frame for your website. So I'm gonna quickly draw up something here for a wire frame before we begin building out our website. And it's got a lot of really need. Built in pre built shapes and content that you can simply drag and drop on your main screen area. You can add some text. You can change the way it looks and so on. It's a really useful, handy tool toe. Have whatever you want to build up mockups or want to have a quick graph or chart of how your website is gonna flow, how the users are gonna be able to navigate through your website. So all of these resources are gonna be used within the course. And again, I do encourage you Teoh to check this out and work alongside when we're going through the lessons in order to learn the content that we're providing and were taught discussing during the lessons. So the next lesson we're gonna look at starting to build our website from scratch 4. 3 Website Wireframe plan: Right now, our Web page is blank. So let's open up her editor and start creating some content. So I do have a default template here and just to run through quickly have got the doc type specified their opening HTML closing HTML had opening, had closing body open and body closed. Eso I do have all of this as default template. And then I've got my view port here, so this is essential for mobile devices. I've got my Internet Explorer edge eyes to make it more compatible. And my utf eight. So this is the character set that I'm gonna be using. So let's start typing in some of our HTML code. So the first thing that I wanted to do is actually link out to a style sheet because I'm going to be using a separate style sheet. So I've already created style dot CSS. So we're gonna be working off of two separate files within this course, and the 1st 1 is going to index dot html. So this is, of course, the starting point for any for any server. When it's just go, this is the main domain on here is where I'm going to be linking out to a style sheet, and the benefits of linking to a style sheet are the fact that you're able to keep the code the CSS as well as your HTML separate. And this really helps when you're building multi page websites, especially because you can link out to that same style sheet and then access that same styling information. So essentially you have to write up one time and link out to it, too, as many pages as as you want. Teoh utilize that style sheet eso some of the first steps that we're gonna be using. So I'm gonna quickly jump over to the style sheet, and I can start creating some I can start off with body and indicate what I what I want my font family Teoh use which font family I want to use. And so for now we're just gonna be setting it as a default here and we're gonna be updating this within this course as well. So now that we've got our basic structure up and ready to go, let's start planning out what we want our website toe look like. And this is where we use tools like Cliffy because this gives us the ability to actually create a wire frame and give us give us a better idea of what we want to do and how we want to create it. So I'm just clearing that last one up and there's a lot of really nice. There's a lot of really nice options here. Eso What I wanted to do within this course is to create a two column website. So essentially, we're gonna have our top area. So this is gonna be a little bit boxy the way that I'm going to be designing it. So I'm gonna make this the heading area, and then I'm gonna have to columns so on full view, because, remember, we're making a website that's gonna be fully responsive. Eso We're gonna actually have multiple different presentations of that same content. Eso It's gonna be a two column website. So we're gonna have something like this and then maybe even like a footer down here at the bottom, and we'll keep that footer in line with the main content. So made two column area. So we'll have something like this when we start out and then up here a top. You can have maybe maybe a local, a local area. So I'm gonna use the boxes again so you could have an area here that would contain your local your header information. So I'm gonna just type in logo and then over on this hands this side. This is where we can place our navigation menu. So I'm gonna just create just another square there for that so that we can understand that this is the place holder. So I think that this was actually a square. So let me get rid of that, and I'm gonna do the rectangle. And then So this is gonna be the contents of our navigation menu, and this is what it's gonna look like on the full size. And so over here, we're gonna have our navigation. Now, eso We're gonna have just some text here, Cem or text here. And then this is where our footer is gonna go. Sore footer, company contact information, copyright and so on. So, essentially, this is what we want to make the website look like. Then this is going to be on a desktop. And then when it shrinks down to a mobile size, we want to move this navigation menu in, maybe resize it, keep the company information on top and then, of course, want these ones to stock. We want text area, maybe text area one and text to. So we want text one to take up full with to to take up full with. But we want to to stack under text Area one. And this is essentially the way that we wanted to move around when we resize the screen and be able to present it to our Web visitors. So let's begin building out the HTML structure of her website and then we're gonna add in CSS to style it to make it look like and to get it to perform the way that we wanted to perform when the user resize is their browser. So that's coming up in the next settle Lessons 5. 4 Build HTML Structure Layout: it's now looking at our wire frame. We can visualize our HTML and how it's supposed to be laid out on our web page. So let's open up our editor and I'm gonna, uh, make the styles a little bit smaller so we can jump into our editor and start creating our HTML structure. So we look at our wire frame. We have a pretty good idea of where we want to start and how we want to build out our website. So we noticed that essential. We do have three separate sections, so we have ah, header section and maybe I'll just call this one. So the middle area is just gonna be called section, and then this is where our content would go and then lastly, we've got a footer area, so I'm gonna create all the three main areas first, and then I'm gonna build within these areas as we both as we work through the different lessons and within this section. So what I wanted to do is actually want to have to separate sections within here and with HTML five, there's different semantics that we could use in order to indicate different parts of our website. So we want to have a two column websites. We wanna have to separate areas or two separate dividers within here as well. So we can use section. We can use article, maybe of what I'm gonna do is use section and site of it. I'm gonna wrap the sections within a div. So just like that, So we would have section one which I'm going to give an I d in order to be able to differentiate and select it out from my HTML code. So maybe we will call this primary. So this is our main content area and then this one is going to be called. So what should we call it? Secondary s. So now we've got to clear content areas. We've got our header area and within this header area, we actually have two different sections as well. So we have one that's going to contain the navigation and this navigation is gonna need to move around. So we're gonna need to separate that out as well into a different element and as well as the company, information and local and so on. So a number of different ways to do this. But let's use standard HTML five knave and then within the Now this is where we're gonna create our navigation area. And then again, maybe here we're just gonna use a div in order separated. And then within this div will have are each one and this will be company info. So something about the company and then maybe below it we have I were This is the greatest company. So now we've got some content in there, and over here, I'm going to do on H two, So this will be maybe some kind of introduction to the company itself, and then over here is gonna be sub menu. Are advertisements, links so anything that we want to highlight in regards to our content. So let's go back out to our website, take a quick look at this and really doesn't look like much because we haven't applied any of the styling yet. But remember, this is just building out that initial structure and what we want our website toe look like . Let's go back into our editor and finish up some of the basics structure that we're going to need when we build out our website. So within the footer eso we can add in some copyright information. You can set the copyright icon there where you could use your own so company so company, name, address, contact us for more in full and maybe some of that contact information and navigation menu . So typically, when we're building out navigation menus, you're going to see the UN ordered lists being used. So we're going to keep that we're going to do that as well. So we're going to do like a really standard navigation menu. And when you're applying CSS, it really doesn't matter what tags air using, but what? The reason that we use on ordered lists is because it presents the content in amore readable fashion. So when you're going through here and you're looking at the navigation menu, so without the styling, it's just gonna be in a nordeste, and this is gonna present maybe the three different or we're gonna have actually three different pieces, three different main content pages to our website. So we're gonna have our home page, so within here should put in a truck, and this is gonna link out to our home page. So right now, I'm just gonna leave that hash there in order to indicate that a za placeholder. And so it's first gonna link out to the home page, and I'm gonna copy this out and duplicated. It's the next link out to maybe an about or contact and maybe put some products will have a product gallery. So maybe this is, ah, website that the purpose of the website is to highlight some products that the company is making some. Maybe we can have a gallery of those products and show those it. So it's gonna be really simple Web page home page. So starting page that the user comes in on products or information about the company, or, if you have services, you can list them there or even a portfolio. If you had a portfolio of different your Web designer yet a portfolio of different websites , you could do that there and then, of course, contact information. So we're going to keep our menu really minimized because we're not gonna actually change the icon when the website strength. So you might see that quite often whenever the website shrinks down, we get this menu icon and then there's a drop down menu, and we can those types of menus air Good if you've got a lot of pages. But if you've got a really simple website where you've got three pages than sometimes it's better just to shrink this down and actually only maybe take up 1/3 of the available space each for each one of these each one of these menu items and never actually hide the menu on the resize. And we're gonna be showing you how to do this as we progress through the course. Hi. Let's finish this up and add in some dummy content. So this is gonna be my mean. I was gonna call it rapper because this is what I want to wrap around my main content area . And I want the content to sit in. There s so we're going to call that just rapper. And if I want the footer to fall in line with the text sections, as we did in our design, I need to move my foot er actually inside of my wrapper. And this is gonna become more evident as we add in our CSS eso. Let's generate some dummy text. So maybe we'll have several paragraphs. Bring the characters down eso Maybe something like three paragraphs select all and notice I've checked off that the HTML paragraph tags is this just makes it easier to copy and paste within my webs Web content. And I don't think I'm gonna separate this out anymore. And maybe over here we're gonna have a little bit shorter dummy text, maybe just some highlighted points or something like that. So let's take a look at that and place that in the content. So now again, going back out to our website, it really doesn't look like much. Everything is kind of stacked there. We've got no styling whatsoever applied, but I promise you we are going to get to the styling and that's where really the magic is gonna happen. So all of this is coming up in the next set of lessons. 6. 6 Floating Elements: So now that we've built out our HTML structure, we're ready to implement some styling. And styling is really where all the magic happens. So with just the plain HTML, the Web page really doesn't look like much. Just looks like a regular text document. There's no layout, and it certainly doesn't look like what our designers, but we can see that we actually do have the mean contents and the container areas that we can actually start shifting around and moving them around using CSS in order to present it to the user more in line with what our original design was. So the way that we're gonna be doing this website is because we're gonna be looking at it from a mobile first perspective. And the idea here is that we want to start with the media query, and what media queries do is they allow you to present your website on different breaking points and presented in different fashions. And when we're designing from a mobile first perspective, so that would be going to just adjust this to be a mobile. First, we're gonna design it as what it's gonna look like from maybe an iPhone or maybe slightly bigger screen there. So we're going to take a look at our website and this is what it's gonna look like on the iPhone. So when we're thinking mobile first is we're going to set thes break points. So whenever the website gets a little bit bigger, so maybe we just said it responsive, so we can dynamically adjust the size. So we wanted to present different. We want to present differently, depending on what size of screen the users coming in on. So we can also adjust it back and forth and thes different adjustment points. These air the actual break points that we need to look at when we're re sizing our website and realigning some of the elements in our website to be presented differently on different screens. So the idea is that on a small screen, we want to take up that full available with of that column and on a larger screen we actually want to use to stack as two separate called us to separate columns. So let's take care of that within our styling, and we've already linked to style dot CSS. So now I can open up style dot CSS and Aiken begin working with that. So, first of all we created on I d primary, we create a 2nd 1 secondary. So we're able to easily identify these containers and access and apply some CSS to them. So we've got primary, and then over here, I can apply this to secondary and let's set some default widths. So what I want to do is I want to build from a small size and once the size is actually get bigger, this is when I want my media screen to update and change and apply different styling. So basically, what this is saying is that if we've got a minimum with off for 80 so for 80 would probably be the smallest that we'd work with for mobile and at this breaking point. So if it's larger than 4 80 or if it's larger than our smallest screen than I want this CSS to get applied to the rest of the page. So we're gonna build out our default CSS over here and then within the media query. This is where we're gonna take care of those customization for the different sizes and because we're starting with a mobile first perspective is that we're going to start building out and setting our styling what it looks like when it breaks past for 80. And this is different than with media queries. You've got the option to do men with and Max with. And the difference here is that when we hit the max with than we get something applied in the men with takes it from the other side where the men with has to be for 80. So let's take a look at this and maybe I can apply a background color at first so that we can actually see some really nice changes and probably enough to remove these because this is gonna really make our website kind of looked pretty bad with these colors. But this is just to illustrate the breaking point. So maybe I could do this Red so it really stands out when it breaks. So let's refresh this and we see that with the men with whenever our Web page is greater than the 4 80 then we get that styling applying, and I'm just gonna quickly flip it over for Max with so that we can get a better sense of what it's gonna look like from the other side. So what do you think is gonna happen here with the max with when I refresh it, we see that our styling is gone. But when we shrink it down, this is when our styling comes back. So that's the real difference between minute and Max with it depends on the perspective and how your building. And because in this case I want to start out by playing all of this styling to the smallest size and have the break points on the larger size, I'm going to start with men with it does take some getting used to to work with the different men wits and knocks wits. You can also do it in between here, where you've got him in in a max and you could do various combinations so it can really get fairly complex as well. If the need is there, uh, so let's set some basic with so on when it's smaller than 4 80 we just want to take the full 100% and 100% is the default on the div, so we don't have to worry about that, but we do have to worry about it when it strips when the size is actually larger than for 80. So this is where, where and why we need to add in those withs. So let's take up 60% of the with. And when you're designing responsively, you do need to always consider that it usually is better toe work with MAWR with without actually fixed sizes with these fluid sizes were using percentages just because of the fact that it gives you the more more flexibility in presenting that content. Eso I'm gonna actually set this to 35 because we are gonna have a little bit of spacing in between. There s so we don't want to take up that full, available spacing eso. I'm gonna set it to 60 and 35 I'm going to keep the colors for now until we add in some content. And then we really apply that more of a look and feel of what we want, because this is just gonna help us illustrate where this brake point is and we're going to see the shifting of the wits. So one other thing that I do need to include, and because this is gonna be this is gonna be a two column website. So let's take a look at this and I'm gonna actually make it bigger because we're not able to see anything. So we see that right now we've got the 60% we've got the 35% but they're not actually aligning. And this is where another important piece of property that we need to add in using CSS and these air floats floats allow us to specify where that particular container is gonna sit. And with the two column, it's really easy and straightforward. So we've got the primaries floating to the left and remember, back at our diagram here that the primary or it should actually be slightly bigger, and we want to make this one slightly smaller. This is not gonna have this much content. So we have this one over on the left hand side, this one on the right hand side. So if primaries floating left, where do you think secondary is gonna float? And if you said right, you are correct. So let's take a look at this and see what what it looks like. So, see, now we're forcing the content to align properly And there's one thing that's popped up here that we see that our footer is actually actually being displayed between our content here. And that's because the way that content is handled, that it automatically tries to align itself in available space and especially if you're pushing it to the left and to the right than it's going to say, Oh, well, there's a little bit of space available here. Let me move myself in there because that seems to be available. And so this is where we need to do a clear on the footer or on the float, lefts and rates. And sometimes this is one of those things that people get caught up with where they floated left, float it right. But they always they forget to add in the clear and the clear is essential part of structuring the Web page because you don't want that. So I haven't actually identified. I'm just gonna use the footer element. But if you re use footer within your code, then just be careful that you're able to identify it properly, so I could probably just do I d footer instead as well. So we do need to clear We do need to clear these floats in order to present our content properly. So let's give this one a background color as well, so we can actually see where the containers are. And this is this is actually useful when you're building out websites that you're able to color and see where the actual contents are sitting on where your boundaries of the container are, especially if you're not using any kind of placeholders, because this then it's really hard to figure out where your boundaries are and so on. So you could even sometimes you'll find people Adam like a border or something like that. So maybe I can add dot in solid block so that you can really see where your content is falling. So I'm going out in a bunch of borders and we're actually going to remove these borders. So it's refresh that, and we can see where our content is sitting. And actually, I have a better idea with the border. So maybe I can add in using a class, so I'm just gonna create one border one, and I'm gonna add this in as a class because this is actually going to make it easier for us to remove out thes thes borders later on. So here can apply class and I can apply class to each one of these sections as well. So that we do have that border that we can see. And also I can apply one Teoh the snap and apply won t here and there and just quickly taking a look and I don't think I've got them all. So let's refresh this and see what it looks like So we can see that the way our website is structured and laid out, we're getting that kind of similar structure to here. It's actually starting to look and present itself Mawr in line with our design. So the next lesson we're going to continue to work on this and really build out the way that we want our website toe Look, we're gonna add in some padding to structure this text a little bit better and a few other things that we're gonna add in to make it look more presentable. And of course, we're gonna style this navigation menu. So it's not a new ordered list anymore and actually presents itself to the user as a navigation menu. So all of this and more is coming up 7. 7 Update header elements: One of my favorite parts of Web site design and development is the part where actually, things start coming together and looking like what my original design was. So it's on the last lesson how easily we could create thes container areas and move them around the page and actually positioned them where we want them to land. So I'm gonna do that here for the heading area because this is actually the part that looks least like our actual design. And so this is the part I want to actually focus on and work a little bit more on. So let's open up our editor and jump into our style sheet and make some updates to the heading area. So the header we Maybe the first thing that we need to do is just break apart, that the two sections, we've got our 1st 1 here and then we've got our 2nd 1 So maybe the best idea right now is to actually break thes apart and present them in different different areas within that content. So we always want this This section dispersed did here to float to the left because this is going to be the main header area and also we want to maybe align the text center. So we're gonna use the same trick that we use down here when we split off our primary and secondary sections. Instead, we're going to make sure that we update our header area here. So let's take a look at our code and how we're identifying this one. Eso we've got the header. We've got a def so we don't have a named def. So maybe it's better if we update this and add in a name. So maybe I can add in something like logo were company name or something like that that we could identify this section with and also we want to identify are now. So maybe even the best idea here is to give header on I d of header and then identify them in that way. So now we know that we're working with Header and we've only got one death within their and sometimes you want to be really careful with the identifying of elements because if you add in some more disease and you're gonna ply these this style to that dip as well, so be be careful with the way that your actually presenting your CSS and you're doing your selection. But because I've only got that one Devyn there, I can get away with just doing header dip as well. And then I can also just get away with doing Header Nav because this is my now that's within my main top area. So we're going to use that same format that we did up here, where we can pull things, toe the left, pull things to the right as needed. So we need to first thing that we needed to do was actually specify their available with and remember again, we're down here in the media query because I want to take up maybe the full available space when we re size and we re shrink it. And what this is going to do is this is actually gonna move that menu navigation back to the position over here. So whenever we shrink it down, we're gonna have our navigation area where you have a company, information and our local but way we have more real estate. We've got a lot of white space over here, and this is why we want to pull that navigation over to that right hand site. So let's give it a with and just quickly eyeball it and say that you're with Maybe we can do 50% or we can do a 45% for the div. And not sure maybe we can add in a color there as well. Or maybe we can just leave it without the color, because we do have that styling there and this one is going to be float. So which side is this gonna float on? This is gonna float on the left and then the navigation is We'll keep this one at 45 as well. So notice that we don't need to do the full 100% if want have some spacing in between there . So it's refresh this. So I just had to re save there. And now when we refresh it, we see we've got our local here on the left hand side, our navigation on the right hand side. And when we re size it, we see that it really falls into place and on mobile. This is what we want to do. We want take up much of our available real estate as possible, and the only thing that right now that we need to update as well is gonna be this navigation menu because we don't want it presented or vertically. We want to present it horizontally so it takes up less real estate. And this is also the case for whenever it's on a large screen that we wanted to be presented horizontally instead of this list type fashion, so I'm going to take care of that in upcoming lesson. 8. 8 Build nav menu CSS: in this lesson. We're gonna redo our navigation in order to be an in line block and to display itself horizontally so to actually make it look more like a menu. So let's go up here to our main styling area. So outside of the media query, because we want this styling, the horizontal values actually be added as well when it's on a small screen, because we only got three items within our navigation menu, so we want to present it within that way, eso may be one of the first things that we want to take a look at is update the padding because wanna have some padding around the navigation menu that's not sitting exactly up at the top corner. Let's give it 20 picks, and maybe we only wanna have that padding at the top. But we want to pull it all the way to the left and to the right. Eso weaken, set up padding in that way, and this is going to give us a little bit more spacing there to see essentially, we've just moved that navigation menu down and let's actually get into the really nice magic part of boats. CSS is the way that we can easily transform these types of menus. Eso a Norden list. So any knave that contains an A Norden list s we need to get rid of that default on ordered lists styling, and this is contained within UL. So we need to set our parting 20 and I'm actually gonna shrink this down and open up a life preview and so that we can actually see what's happening here. This is one of the neat things about brackets is that we got this ability to do a life preview and you don't actually need to have any server running. So you can see here that as we're gonna be updating and saving, you're gonna see it changing here, or hopefully see it changing here on the right hand side to about it in zero padding. There on this is automatically already moved over these bullet points. Eso we see that we've got our original border here for that container, and the bullet points already moved out. So if I was to get rid of that, they moved back in. So this is what we're doing when we're updating and removing at that default on ordered list. Eso another one. There is to completely get rid of these bullet points and we're just gonna set this to none . As soon as we do that, then we lose those bullet points. So we got rid of most of that potting, and we can also do margin and set margin to zero as well. So this is just in case there are some margin issues there. And once we save that, that updates. So let's do a transformation of the NAV list items. So now that we're selecting those lifts items and we just do display, there's a number of different ways to display it. By default, it's block. But when we do in line and we see it automatically changes to that horizontal. So the all stock one after the other. And if I do display in line block, so this will give me some of that block the block features, but it also gives me and presents that list item in line, and then lastly, let's update our love. So any ones that have an anchor in there and we can add in some padding around there so that they stand out a little bit more so let's try adding and padding of 15 maybe adding a padding of 10. We can see that now. They're already taking up the available allocated space. And if we do something like background color so that we can actually see them a little bit better, we can see that all those items get presented. And now let's add in some suitable styling here. So studio and we're gonna do this one on hover. So now hover and would do some a different background color, maybe when it's hovered, or maybe just a different color. So maybe when we hover on will change to chocolate. So now we see whoever we hover and one of the other things to want to get rid of that underlined so that text decoration changed that to none that gets rid of those underlines. So one of the main things that users always like is this background color changing, so you can do like a subtle change or something like that. So let's, uh, let's show you what this looks like now. So whenever we hover over it and maybe this should be wait, so do more of a grayscale feel toe our design eso now whenever we hover over it were being presented with their content in that way, Whenever I go over to this other sample that I had here s we're going to see that that's so whenever we hover over it would see the effect taking place. And then, of course, even on the smaller screens. So let's drink it down. So it still get that effect of the color changing backgrounds eso whenever they get selected eso with mobile it is a little bit different because it doesn't take the hover the same way because you don't wanna be able to select things as you're moving over because that's considered a drag on it s so instead, the hover is when you click. And that's the selection of it s So it's slightly different but works different ways on the difference. Different devices. So again, depending on your device, it might be presented in different ways. So we get rid of this that now we can hover over it. So in the next lesson, we're going to continue to build out our look and feel of our website, maybe go back to original design and look at the local and see how we can present the logo bit better. And we also need to pull this one over to this this right hand side, because within our original design, are novice over here on the right, and we need to keep that with in line with our original layout and plants. I'm gonna add dot in quickly. So are now and their main navigation area. So this is where we can pull this over to the right hand side and we actually need this Onley within the media query. So this is another one of those that are specific for the different sizes. So let's do text a line, and we're just a line of text to the right hand side. So this is only on the bigger screens. And actually, you can copy this into here as well, so that we're not using up a separate property there. So text the line, we've got it floated to the right and the with, take a quick look at that and see what it looks like. So now it is pulling that text over to the right hand side, and once we get rid of these borders, it's gonna look a lot better on swell 9. 10 Margins Padding Logo area update: in this lesson. I want to introduce another break point. So we've been working at on the smallest break point here. So whenever we've got it at 4 80 this is or 4 80 Unless this is how we want our content to present somebody break past there, then we get the two columns and so on. So typically you might have more than just the one break points I want to add in a second break point and maybe we're gonna set this more for tablets. So I'm gonna go along the same lines here where I had my media screen at 4 80 and I'm going to take it up to maybe 700 just gonna create that down here. So minimum with 700. And this is where whatever I want toe happen. I want it to happen at 700. And one of the things that I want to move over and have this happen is whenever are so our navigation bar and in navigation menu. So let's take a look at this again. So now whenever we hit 700 we see that we've got it moving over more. So this gives us the ability, some more flexibility in our design, and we can actually add in some additional styling, depending on what size of the screen it ISS. So we might want to have our menu there over on the left hand side and instead of pulled over to the right because if we've got a screen of 700 we might want to keep it more centered and presented to the user. And then, of course, we shrink it all the way down. Then we're gonna have our are with year of all of these available icons. So we can also add in something here where we wanna have maybe a men with or something like that. So let's have a minimum with 4 80 see how that turns out, because before, when we're shrinking it down, eso they're stocking. So now we've got a men with added in there. So let's jump back into our logo area and work a little bit more about how we want that presented. So this is our website so far, and we've got the breaking point at 4 80 so sometimes you might wanna have another breaking point for maybe mobile device tablet or something like that. So you might wanna have for a slightly bigger screen another breaking point. So maybe where the menu gets positioned and so on. So let's take a look at this and add in another breaking point. And this is going to be done the same way as we added in our 1st 1 where we had our men with our media screen. So I'm gonna just copy this part here and add that in just underneath. And for this time, let's set our breaking point at 7 20 So this would be mawr designed along the lines of our our now our our size maybe could be like a tablet or something like that. So we have the ability to Adam different colors and changes as well. So let's go down here, and maybe I want to get rid of this 45%. This float right, and I want to add that in over here. So let's do it this way and to see what happens now, whatever we hit the breaking point. This is where it's going to readjust at that 700 point. So anything less than 700 and then whenever we get over that breaking point of 7 20 We see that now it's taking up that full size up until that point. And then whenever we have 7 20 it takes up less space. So we see here that we've got this this float right. But now one of the things that we need to do as well is to update this this one over here as well to coincide because now that I've moved it out of that floating area, we need to keep it consistent because that's where we've got this overflow of the two different elements. So now when I shrink it down, I can see that I'm presenting it much better in a much better fashion. And this textile line, right? It doesn't look right either. So maybe we can do text, align, center, and again, depending on what your design is, you might want to have something different for these different breaking points and so on. So this is what we've got right now on the different breaking points. We're still keeping her company information here at the top and our text. So let's work on that a little bit and apply some some styling to that to make that look a little bit more presentable. And I also want to add in, ah, margin at the bottom of that entire header. So let's update that, because that doesn't look exactly right either right now. So let's do Header and just gonna add in, uh, margin at the bottom, submerging bottom. And let's do 45 picks at the bottom. So let's see what this looks like now. So it's not the right screen site. So let's jump over to this example and we can see that back into our code. We see that it's actually not moving any of that down, and that's because we've got it floating. So in order to create that spacing below, it probably should add it up here in the top in the other media screen. So we see that now, whenever add that in, it creates the spacing, and it's actually meet giving us that space and that we needed for our menu. So it's a little bit of a trick there. When I refresh this now it's spaced out a little bit better. See there. It's added in our margin at the bottom, and this is actually gonna work and look a lot better presented a lot better that we're moving that content down. And of course, whenever we get it to the larger size, we don't have to worry about the margins anymore because there is that spacing already built in. And if we did want tohave spacing between the local area and the main content area, we could add that in as well. Let's jump back into our CSS updates. Some of that local eso we had given on I D or we just called it header and company information. So let's access that one there and add some styling to it. And we can do this here a top because we're not actually being very specific. We wanna have that seem, maybe padding and styling information around there as we do. So let's take the main container, the parentis header, and then we're gonna select that div that's under there. And now Adam, some potting around there. So maybe 10 picks and I should get this one back up. So now we can see a little bit more of what's happening on. Of course, this is a being applied to any size because this is any size, we're gonna apply that same styling. And this is where you would apply colors and so on, depending on how you want it to look, this is where you could apply all of that information. So we could also be more specific on how much line height we have on the H one and so on. And this is where we'd add in all of that information. So I don't like the fact that the small text there's that much spacing Eso No, this is a default here, so we might want to adjust that as well. And we wanna have maybe a little bit left spacings. We want to be really specific on those h ones. So maybe I could just go h ones and I could so we could bring it in a little bit tighter. We could do something like lying. So line height would allow us to specify the height of the line that's available. So we see them. What? The bigger the line height, the more the spacing gets created. There s so we could just move it, Teoh, whatever we want it to look like so we can really shrink it down there and make it look exactly the way that we want to present it to users. So when I refresh this, this looks a little bit more better and presented. Got a little bit space in there on the left hand side. So in the next lesson, we're going to continue to work on this and get it, Teoh, look more like what our content is being presented. So we notice here that our main rapper area here for the two columns this is smaller, the footers smaller. So that's something that we need to add in on the next lesson and then to really get it to look and present in the way that we've outlined it in the beginning. So all a lot of that is coming up in the next section. 10. 13 update styling nav menu updates: So now that we've built out our basic structure of our website so we can see that it re sizes and the menu moves around and everything looks fairly good s and I can remove out all of those borders that I had earlier that we were using earlier. And I could get rid of some of this thes colors that we've been using for the styling in order to make it look a little bit better. So maybe what I want to do is just simply removed that would. And we can always bring that back if we need to. If we want to add in war to our design one of the things when you're designing your website , it's always a good idea to use, like great scale colors, eso maybe instead of instead of having this bright red orange and bees, we want to update those to be more of a grayish color so much similar to what we're doing over here. So I'm going to get rid of the primary. I'm going to just update that to be white because most of the time you want your main content to be on a white with black text. It's update that to Gray and then maybe our footer where maybe do our footer really dark to a block background and a whites text does that block and would do our text changed that to wait stands out. Maybe we won't even have a minimum height. So maybe a minimum height of 200 pics that might be a little bit too much. So 100 pics will add in some padding for the text. So maybe 45 picks for patting. So it's nice and centered there, and it gives us a little bit of space. So I'm gonna bring this one down as well so we can see it here on the left hand side how it's getting presented. Eso also want to get rid of this default blue on the nav and maybe just add in more of a great scale again. Uh, this will give us a better idea of the colors that we want to use before we're actually presenting the colors. And maybe this is good. So we know that we wanna have a light color, and whenever we hover over it a darker color, we want to flip the font colors so maybe another thing. By default, we want to get rid of that default of blue and maybe even just do black for now and maybe update the fought wait to be bold. So this will give the font a little bit more. So it stands out a little bit better and also want to go jump over to the header and update that as well so that we have a background color to be able to differentiate our header so maybe, uh, lighter color for the heading background. And this is a color that's going apply to that entire selection. So sometimes you might want to split those out instead of having them in the media queries . You might wanna have the different colors, the default colors, that going to use right within this top part and maybe even create a separate section for colors Eso For this part, I'm just gonna do header and they're gonna add in a background color there and we'll do a background. We'll do a background color of keeping it within this gray scale, and we also maybe want to add in a border color as well. And maybe we can do this as black and now we notice that these navigation items so whenever we should resize them were OK, but because we've got this header color here s so this is actually throwing it off eso we need to make an update to this as well. So let's sigh Let's update our header and I'm gonna float the header by default. So this is the entire header area. I'm gonna float it over to the left. I'm going to give it a width of 100% moves back totally across, and now we can see that it's grabbed in that navigation part. So now whenever I refresh it, we can see that we've got this so looks a lot better, but we're still having a few issues here on the sizing. So we need to update some of that those margins and pa dings in order to better accommodate it. So let's try adding in a margin. So this is the short shorthand margins we're gonna add in a margin here at the bottom of maybe 30 picks. Maybe we could even do 40 and zero. So that takes care of some of that overlap that we were seeing maybe we need to do a little bit more there. Eso maybe even add in some potting around it. So maybe if you wanna have patting at the talk so only at the top will do 10 picks patting at the top. And that should help out a little bit with when we were doing the re sizing here so that it's not hanging over there and we still have a problem here whenever we shrink it down. So maybe whenever we shrink it down, we want to add in something different happening with the navigation bar. So maybe we want to start it with the header now than we want to. Maybe even do a background color. So one of the problems with doing that is that not see how this looks on another screen. Pop this over refresh, and we can see that now We've got this background there, so it's only appearing on the larger sizes, so I think that put in the wrong spot there. So let's take a look at this and refresh that something. There is the problem there with styling. I'm gonna use line height over here to specify. Maybe we could do 60 picks or something like that to specify the line height. So steak a look and see what this looks like. Now everything's good, except when we shrink it down to the smallest size that we still have this overlap on this . So there's a few things that we can do here to update and change this eso we've got where we're adding in that potting. So maybe we want to get rid of that padding that we've got over here and really cut that down and not utilize it within that same way. So if I got rid of the potting and I'm going to bring the potting over into maybe into this one here So now whenever we get it bigger. So this should bring our padding back. So see what's happening here. Put it into the wrong one here. So let's try it here. Save open up our website and let's just check out what it looks like now. So whenever we shrink it down so we got rid of that padding, so we need to add in probably a little bit of parting. There s So now we've got a clear menu there. Whenever we get even bigger. So now we've got a clearly defined menu area, so it looks more like what we had originally planned out where we've got this kind of background. Of course, we can get rid of that black background if we want as well, and only show it on the resize. And one other area we need to fix is just that default patting because I had removed it from here. But it looks like we still need a have a little bit of padding there within those anchors. So let's do something like we'll do five and will do 10 and see what this looks like. So on the smaller screens whenever we re size it. So now we still have more of a menu type format here. We shrink it down. Let's take a look, and we still have a little bit of an overhang. So this is where we could add in a margin bottom so added a margin at the bottom, maybe 10 picks, and that should take care of any of that overhang that we had there earlier. So now let's go back up to this one. Refresh it and now we see we've got a nice, neatly presented menu there. We've got everything re sizing properly announce more of a grayscale area. So the next lesson we're going to continue to build this out and we're gonna build it. How we can utilize this when we've got multiple pages. Eso we've got Right now we've got our main home page. There's nothing the menu that indicates that this is the selected area. So I'm gonna show you how to do that. Add a selected class for the selected item and some other tricks in order to better present our website. So it's coming up in the next lesson. 11. 14 Main wrapper update set selected item in menu: So this lesson. Let's make some additional updates to our website content. And one of the things that we want to do is add a class of selected so we actually know where we are within the website. So when we come into here, we've got three main pages home products and contact. But we don't know if we're on home products or contact. So let's take care of that first. And the way that we're going to do that is we're gonna add in a separate class into here, so this will be class and we're just gonna call it selected. So save that. And so now we've got our life, you here. And so we've got a class of selected it's gonna remove. That s there that was hanging in there, uh, going back down to our content area. So this has to do with the colors of our navigation so I can see that I've got this hover over here. So maybe what I want to do is add in a 2nd 1 that will just be a selected and just comma separated so that we don't really have to create a second set of properties here because whichever one is selected, we just want them to be highlighted in this type of way. So this is how you add in that selected And then, of course, for every web page, we're going to need to specify which one is the selected one. So there is a JavaScript, Ajay Kori trick as well to do that s so I'm gonna show you how to do that in the upcoming lesson. And, of course, if you don't want to use JavaScript, urge a query than you can just go ahead and every page so we can create instead of index duck html, we can save it eyes, and then we can have another page and we can call this one about dot the html and save this one. Eyes think we had products so and then now we can actually link to it. So I should have actually called this contact, But let's do it this way. So we've got about we've got products dot html and we've got our index doctor. Let's our main page. So now whenever we flip through them, that should have actually done this first. But whenever we flip through them, that's we can see that the selected should change section products. The selected should be this one down here. So let me just make a quick update on this. So I got my index there, so I'm gonna make an update on the list items and notice that we're sharing our html page s . So this is one of the things that we're able to do here is that we're able to share really easily share that CSS styling. And I should actually update this whole page with links as well. So I didn't have that in a boat and then updates. So this one is about so I just used about for contact selected check over products just to make sure we've got the right one and we don't have products selected. So now and let's go back out to our website and just try this actually going to get rid of this responsiveness. So products, home products contact, and we see that the selected one is the right selected one. And even when we go back to our code So I'm gonna hide this because I don't need to see this at the moment, and we're going to go into our CSS and notice that we had rapper here. So once minor quick adjustment that I need to make for the rapper. So going into our main design, we originally had our rapper. It was sitting at a fixed with So I only need to add that in as well. So rapper and this is where we do a max with and the difference between mocks wit and fixed with is that knocks with this use for responsive. So anything under this Max with of maybe 11 80 is gonna automatically automatically set to 100%. So we'll notice here that whenever we set this Max with But now we've got another problem where our main rapper areas pulled over to the left hand side. So we need to make some adjustments in order to center something and CSS So we remove out the margin and we set it to auto for left and right and then potting. So this basically removes at the top and bottom, but the left and right goes toe auto, and we're going to go to padding and we're gonna add in some padding, so maybe you could do a percentage wise patting of 4% and just quickly go back out to our website and see what this is gonna look like. So now we've got Mawr again in line with what we had originally designed. Where we've got our main navigation is 100%. And then as we re size and we hit that breaking point, we noticed that this content here has a max with, so it's always gonna be smaller. And then ever whenever we keep going down, it's gonna shrink down because we did add in that padding. So maybe at a certain point, we want to drop that padding from the rapper completely and maybe set out to zero and centering it won't really matter once we hit these smaller sizes because it's gonna be a relevant on the smaller sizes s So this is something again that we could work in? Eso we don't know certainly need to add that parting here at the top on. Maybe we want to add that parting and all of that later on in the bottom areas. So I'm gonna just copy all of this out and I've got potting in here may be added in at this point here let's see what what difference this makes. So you see that now we've got 100% on the smaller screens and then as we get bigger as we have those break points, then we start adding in the padding that we really needed, and we can continue to expand the way that our content is presented. 12. 15 Use jQuery to get URL page value: in this lesson. I want to add in a little bit of G query and that G query is going to be able to handle determining which page were on by using the U. R. I and then ultimately updating the proper element with the actual with the actual selected part. So we don't, so it makes it a little bit more dynamic. And of course, if you've only got three Web pages and you're okay with outing and selected manually, then you can go ahead and do that. This is just gonna be a geek worry functionality in order to do the same thing. And it's just gonna be a really quick introduction to adding in J query. So what I want to do is open up my full view there and I'm gonna have to add in. That's G query and the JavaScript in each and every one of these pages. Us, unfortunately, already saved them and copied them before it did. That s oh, this is gonna be trying to do it relatively quickly. Eso with geek worry. So what Jake worry is, if you're not familiar, J. Coury it's a JavaScript library and essentially just makes things makes interacting with the HTML elements on your Web page a little bit easier. And it's a condensed format so really straightforward and easy to use. Eso we've got over here. I'm not developers dot google dot com, and this is a great place to get some some libraries eso, CD ends, shared libraries and where I could bring in that G. Cray library that's located at Ajax Google ap eyes dot com And this is the path to where the J. Coury Library is located. So if you actually took this thing page and if you entered it into your browser, you could see that you've got that geek or a library. So all you're doing is linking over to that J. Corey Library and bring in getting it into your Web page. And also, if you want to utilize that, you got to make sure that you place the link before you're actually trying to access and rate Jake worry. So if you do it afterwards and get some errors, because the J Coury library won't be loaded yet, eso this is this is the source of it, and we're going to be doing the same thing where we're gonna link to one shared javascript file. So the idea is similar to what we do with CSS where we've got that one file that contains the entire CSS for the Web page or website. So we're just gonna link Teoh script dot Js and I can actually go over and remove out thes selected parts. So that's gonna be a quick update on create a brand new page. So this is gonna be where r. J Cory is going to go. So in order to access Geico or E J, Coury waits till the actual Dom loads. That's all of the elements on the Web page and it's got some functionality here where we're going to use console, log, toe out, put some content, and you're gonna be able to see that with Jake. We were actually able to pick up that window path so we can have an object called Window. And I'm trying to really explain this fairly quickly. So of course I'm not gonna be able to explain J query this quickly within just within this within this lesson, but s So this is the script dot html for script Js and this is the file that we're linking to. Eso notice here that this is the actual file that we link Teoh. So I'm going to go to the products. I believe it did it. Go see where I've done that and I'm gonna just step, have to go to every page and copy the same. But this is only a one time thing because once I've got this G quarry up and running, then everything will function automatically. And then the lastly, this about section disability page. And I want to add in that same G query there and see. So let's take a look at our Web page and just see what's what's going on now. So whenever I click So I got rid of the actual selection of which page were actually on so on, and we're gonna be doing this dynamically within a query on one of the reasons I like to use the console. That chrome browser is because the ease of communication back and forth from JavaScript we've got what's called the console. And when I type in this JavaScript command here, work was consul log. It's taking the object of the window, the location and the h ref, and it just putting that in the consul log. And this was just to show you that we can actually utilize this to get what page were on. So noticed that on the index page it's just taking this. You are I here and going to the next one same thing. So we've out putting it into a value, and then this value. Now we can make usable within our JavaScript. So let's take a look at that and see how we can actually extract the Web page. So we want to do ads. Apply some simple logic where we want to add an active class or the selected class to the Web page. If the U. R I matches the one that's within the current one. So we want to check to see if the current one is about, and if it is, then this products should actually be the one that's highlighted. So let's open that up again, and I'm gonna show you how to do that. So we've got eso now that we're able to get that value. We could easily place that into a variable and utilize that, but we're still not done because we don't have local host slash about. It's not gonna actually match our path unless we're actually using that domain name and so on. So in May or may not work, depending on how your structuring your website. But it's certainly not gonna work right now within this local host, because this value is still not going to be the correct value that's going to match up with in my HTML. So I need to add in one more update here, and what I want to do is return back the index off and what this is going to do. This is going to return back with the position of that slashes. So let's take a look at this now and see what's being returned back so I can see that it's being returned back. 16 have got a numeric value, and essentially, what's happening here is that it's telling me that this slash is located in the string of 16 the 16th position, and that whatever is afterwards, then if I could strip that out, then I kid at in so I could make a check of that using another function in Jake worries it's gonna be similar and we do sub string and what sub string does is it allows us to select via that position of where that slash is located and take the rest of the remaining content. So I'm just seeing if I've got all of my brackets properly. So I need one more Brockett here. So now what we're doing is taking a sub string and adding in It's taking the sub string and we're going to take that position. So let's take a look at what's being returned back now. So we've got products we've got about and we've got Index so getting better. But one other thing we need to add in because it's taking the position of the slash and we want to take the starting position of plus one, which is just after the slash. So now upside there is a problem there, so let's quickly take a look at that slash put it into the wrong spot and that's one of the things here that working with all of these closing brackets sometimes it's a little bit hard when you're looking quickly but now we're able to return back the value of off the page, so just get that one page value, and now all we need to do is update and add in the active classes and G queries. Got a really nice function, and it's clean function for that as well. So within the next lesson, I'm gonna quickly run through that. As I know, I've been going really quickly through Jake Worry, but it's not essential in order to set up your website. But it's just a nice to know. And it's just nice to know how to use Jake worry in case you are making a larger website and you want to have a little bit more dynamic capability within your HTML court. So in the next lesson, I'm gonna finish off this J query part of the course and update how we can add in this selected class dynamically using J query. So it's coming up 13. 16 jQuery Dynamic Classes: in the previous lesson. We were looking at Jake Weary and how we can add in. J. Coury had some dynamic functionality into a website, so saw that G query can select your window information and we could see that we could get the location h raft and that we could find the position of where the slash was and trim out the rest of that domain content and utilize Onley that returning back that page information . So let's take this one step further. And with G query, you have access to anything that's available within the page. So if we've got a Siris of I I DS or we have a SYRIZA classes, we can really easily access those and make interactions using J Query. So this one here is going to be located, so it's much it works the same way as CSS, and this is one of the real benefits of Jake Worry because they have made it very similar to CSS. So now that we know we've got header nav u l l I, we can make a selection of that of that particular element. So header and maybe we don't need to be as specific eso maybe let's just do ul ally A. And we're going to use a selector so much like what we do when we use CSS. We're gonna do a treff and we're gonna find where h ref is equal to. And so we're gonna use this value that we're pulling out here. So maybe we can put it into a variable for a little bit better. Readability. So I call it something like page path and this is just a store that value is gonna be the same thing that I put it in there. And now let's add that in over here. So we're gonna add that in as the page path. So if it's equal to and this is where we add the page path in So if this value is equal to the page path value than what we want to do is simply add a class and they do have built in functionality for this as well. So we're gonna add class and then we just need to select that class name. So I believe it was selected, and you notice here that it's not It's adding a second quote, and that's because I don't have it quoted properly here, so I don't have it closed off properly because I've got this heading opened over here and I need to add in another one. Here s so let's update this quotes here. So we added in the path and we opened and closed it. We need to get a bracket and we need another quote. So I believe that this should now close this off. And this is one of the things that I like about brackets is that we can see where we're opening and closing, so sometimes this gets a little bit confusing. There's a lot of opening and closing closings, so let's try this out and see if this actually works out and or see if it throws in the errors so we can see that now whenever we go to the page that it's actually adding in the class. And this is the beauty of geek worry. When we look at our HTML code and we open up that one that were on that correct page, that it does have that selected and this is going to be the same thing when we go over to hear that, it actually updates that html code ads in selected class, and we can see the results here when we navigate through our website. So this is a quick weight toe. Add in a dynamic updating selected class within your Web page, and this will work if you have multiple menu items here. And if you don't want to go through the trouble of actually updating each and every one you want to add this and dynamically, this is a great way to do it. And I know I've gone through Jake Worry rather quickly. But Jake Worry is really usable, and there's quite a lot with G query eso. If you do want to find out more about J. Query, there's ajay kori dot com, where you could definitely find it a lot more information about how to utilize Jake weary and really the benefit of J Query is that it's just really easy to use. It just makes sense. And as you can see, what we've gone through here, it's serious, similar to CSS, where we make our selector and we can add in those classes and so on. So all we've done here is we've put in a essentially a condition here and we could do this within our within CSS as well, where we could select particular parts of the HTML and then add some styling. But in this case, we're actually utilizing Jake Worry toe add in that class. 14. 18 Add web fonts Google Fonts to website: this lesson. I want to add in some nicer thoughts. So we've got our default Web fonts that we're using. And there is another option, actually to add in some more dynamic fonts and really easy to add the's forints in. So Google actually has Google thoughts, so fonts dot google dot com and this gives you the ability to select from over 804 different font families. And you can really easily bring these into your Web projects. And I'm gonna show you how to do that within this lesson. So it's just a matter of going over here and actually picking the front you want. And they have ability to year to do sorting really nicely developed interface here for this sort ings, we can see which ones are trending which ones are popular and so on. We can see the different styles weaken. Bring those down so we can see quite a lot of information really easy to kind of go through and selected the fonts you want to use. So I'm just gonna pick something here fairly randomly. So maybe I want to select this, uh, this one here as the front that I want to use. So now I've selected that fought family and they they just recently changed this. So now it's got a pop up here and I can bring that font in Esso. There's two ways to bring fonts into your Web projects. Linked points eso we can link out to the thought you are l within my HTML just like we did with the style sheet or what I could do is imported directly into the style sheet. So I'm gonna choose that option because I think that one's gonna work a little bit better for me. So I don't have to go in every single one of these HTML pages and add that styling. And so I'm going to just put that at the top here, added into my CSS. And now I have the ability to use this font family so I can use it wherever I want. I gotta put it in the body, and now we can go up to our Web page and check the suit eso. Now that we've made this change, we've made this addition. We see that the font automatically changed in updates for the entire website, so really need an easy way toe. Add in additional fonts and some nice touches into your website and your Web project 15. 19 select page styling: this lesson. I want to add in some additional styling into the website. So just some or default stuff, as you can see here, were relatively completed. With our project. Everything's re sizing s everything looks looks pretty good. We might need to add in some padding around the sub menu here because it doesn't look quite right. Eso I'm gonna just go over to here and I want to add in the padding on anything over the 4 80 s o. This one was the secondary one. So let's just add in some padding here, maybe five picks, so makes it a little bit more presentable. Eso the content isn't right up to that side menu and border. We've got our different pages and everything is working properly. So we had added in that G query navigation section that automatically selects the one that we're on. So let's just go through our h r CSS coat on just to make sure that we've actually hit on all of the different points that we were looking at eso Usually when you started with your CSS, you want to get the main pieces of content so within, Maybe I want to add in some images into my Web page and one of the things with images making them responsive. You want to make sure that they're not going over size, you want to make sure that they're fitting on the page and so on. And sometimes this is difficult with with your with your content when you're re sizing. So, for instance, let me go back over to here and I'm gonna use a website called Loren Pixel in order to get some dummy images. Eso they have the ability to select an image here. I can select it a bunch of different types of images here. It could be really more specific. Essentially, this is the the with, and then that's the height of the image. So if I just gonna take this and see what random image they're gonna allow us to throw into our index page. So Gorman and here maybe, if I want to put an image in here, So 400 by 200 let's go take a look at our web page. So you see that we get this image placed in here. But one of the problems here is that it's trying to take up too much real estate, and it's getting hidden underneath that sub menu. So that's definitely a problem and something that we really should address within our responsive design, because we want to be looking at responsive and delivering our content in responses fashion . So let's update our with to be 100% and we could see what happens here is that this gives us a max with, but we're actually asking for Max with of available space. So whenever we have more than 100 pics, then we see that it it sizes and it stacks itself within that within the rest of the code. But we see whenever we don't have that available real estate, it's not gonna It's not gonna stick out underneath or outside of available space, and so it's only gonna take up 100%. So this is one of the really important things that we should add in to our website. Is this this way of handling images? So besides that, a lot of times you're going to see as well how each one's air handled how h two zehr handled eso. Sometimes you might want to set the font height of that and salon. So you see something like font size and then we want to make it responsive. So 1.5 and so it's really wanna hot was as in each one. Is this one up here? Eso You may or may not want to do this. You might want to stick with the H twos. So I believe I had these ones as h twos. So listen, these ones are going to get more affected. So let's stick with the h twos. Maybe we want to update those margins. We want to change the we want change. Maybe the so. I've done the font size. We should always do that line height as well, so to accommodate the different sizes. So let's try slightly underneath the so maybe we can do a 9 p.m. So this gives us a little bit a little bit smaller line height that we normally by standard, would have. We can also do a font, waits, weaken, do a margin on that font. We could also change that fought family so we could do that as well. If we wanted to make something something different that stands out. So let's go back over to a browser here. And let's pick another Google front that we want to use that streak that one down and let's try something. So maybe this one. So I'm gonna actually insulate that one that we had already selected and open up this one here, so I could just really easily utilise it here. So now I've got this one selected and I can bring this one in on the import to do something similar to what We didn't lost one and then fought family. And it's each to an upper window. Check that out. So now we've got for our headings We've got a different font on. We can also do a bunch of different things here as well as needed within our main fought styling. Eso Sometimes you might see as well that we've got some customized styling for a particular page. Eso We've got three different pages here, but we're using relatively that same styling. But maybe in the about section we've got some particular information we want to display in a a different way. So let's just open that up. So now this we're going to go over to the contact area and then we Maybe we wanna present this in a way that we've got. Maybe we if we have a form on here and we want to present our form content. So So maybe we had some some type types here on salons, a few different types of inputs and so on. So maybe we want to present this in a different format as we would any other inputs within our web page. So I want to be really specific with that s So there's a number of different ways we could do that. We could do a rapper, I d. And we could add in a class. So maybe this would be the about page or something like that, and then this allows us to identify it within the CSS. So we don't have to do a specific CSS for that that page, and we can just reuse it if we want. And we can only hope we only have to open up that one CSS page in order to provide that styling. So let's do something like if we've got an input and this is just gonna be some really basic stuff. So with 100 because, of course, everyone needs to style their their content the way that they want to style it. So now we've got full with across and when we could just build out from here as we need to . So we can also be specific if we want to only do it for specific types. Let's go back to that CSS. I think. Unfortunately, I've got that one down there that's leading to a little bit of confusion. But we can be specific if we want with our CSS. So finally wanted type equals text and save that. So now whenever I go there so our submit button goes back to the normal the normal size, we can do something like we can add him a border here. So if I want to do one pick solid and maybe by default when I started with a blue border and maybe want to do border radius, so make it make it rounded slightly. Five picks, radius. Check that out, See what that looks like now it's doesn't really look that nice but hate. We're just trying out just different styling options here. So maybe this is how you want to present your contact form and so on So a lot of different options here. We could also update the backgrounds and so on, so background. So maybe I want it to be dark gray. And then maybe also we won't update the color of the font as well. So maybe want to make that formed white and so on a lot of different options. And this is how we can be more page specific on the particular the particular styling per page. So we don't we can keep it within one style sheet, and we can go have it across the entire website, but be more specific for the particular pieces of content that we do want to update and work with. 16. 20 Images products resize: this lesson. I want to do a quick update on the products page. So the first thing that we should do is update our HTML. So I'm gonna bring this one up here at the top because we're gonna be using updating this each to Mel here, the products page to get to look different than our main company area. So this would be products, so it may have a listing of different products that we wanna be able to display in showcase . So here I'm going to create a diff as the main container. And we were gonna use a Nord Erred list and list out our products. So this will be nice and neatly presented products and within here, maybe we've got some product images that we want to highlight. So let's go back over to Lauren Pixel and selective some products. So we've got our animal products, food products and salon. So let's try out and see what different ones we can have here. Eso if we had food here, so maybe we had a restaurant or something's on a copy image address so I can have Siris of different images. So I am G source and added that source for that image. And I'm going to do this. Maybe one have six different, so I'm not gonna have an even number. So on uneven number of images here and actually that didn't turn out that great because I forgot to close that off. So let's race all of this and try that again. So now I've got a serious of images. So maybe I want to adjust it and do a grayscale pick or something like that. So we have some variety or another image. Let's see what loads here. Maybe I should do that. It's color. So they do actually give you random images here, so I actually have no idea. But when we're linking to a specific image, it's going to give us more of, ah, oven image. That's a regular image. So let this is essentially The reason that I'm doing it this way is that I don't actually have the same images, so I think it's maybe just changing it by numbers will try that and see what we can get toe happen here. Let's go out to our example and see whether we do products so that we've got first I want to see if we've got images that are loading as a little bit of a slow loading time. Eso maybe this isn't the best way to do it because we've got Siris of images. It doesn't look like they're all popping up. So little by little, they're coming in. Eso what? The problem here is that we've got an a Norden Liston were displaying it as an unguarded list and of course, we could take care of this within styling. So now that I conceive that products area and maybe we want to identify this as equals So this is the main the a Norden list. And so I need to remove out that a Norden list defaults. So this is my items or something like that. So this is what's available on the items. Maybe I could have called it my menu or something. Eso Now let's go back into our CSS and make an update to make it look more presentable. Like it it like it would be within any type of gallery. We would have a Siris of items, So let's I d my items. And the first thing that I wanted to do is get rid of those defaults within that, a new ordered list. Some margin. Harding set those all to zero list style and set that to none. And so this is gonna present it much better. And now we need to update was list item. So we're gonna do that. My items so list items so allies and even won't do. It's floated to the left. Give it a default with off. Given a default with of will do 30% And I didn't a margin. We're gonna have some nice margins around it. So 5%. So maybe all update this 40 so that we have a total of 50. And let's take a look at this now and see how if it's stocks a little bit better here within products, So it looks like these images air taking a little bit of a little bit of time to load in. So maybe there's there's another resource that I can use in place us is another one called place. Place it for placeholders of images called place hold. So this will give me some placeholder images. And the thing here too, is I didn't want them all to be the same size. Not sure why it's taking so much time, Toe Lord, but let's just update Thies to save us some time. Of course, it would have looked better if we would have had those actual menu images. But I think if we're picking out particular images, maybe it's having a hard time finding some of them. Eso just gonna make this 1 500? Because not all the sometimes you know, you do want to have your images the same dimensions. But you know, it's not always going to be the case, so you need to be able to accommodate that when you're working with your CSS. Let's take a look at this now. So now we've got a Siris of different images, and it's all laid out nice and neatly, and one of thing that we do want to do is whenever we shrink it down, maybe we want to take up that full available with that's available to us eso by default. We wanna have it laid out that way, but whenever we resize the page, maybe we want to take up different spacing or something like that. So let's update the CSS for that and then of course, we need to also do it clear for the last one for the last element as well. So we could do that as well within the CSS. So let's go over to here. And so I had my items and list items so we can get rid of that float left. So maybe we want to only add this end whenever, where resized over the 4 80 And then that means that over here need to update this to be and 100% so see if this looks any better. So now we've got the images taking up the full available 100%. And generally this is a little bit better. Maybe we even need to set the default image with to be 100% no matter what. Eso again. Depending on how you want to style, it s oh, this this way. They're they're dimensions aren't going to be messed up. We see that the only ones that were actually resized are the ones that are over the 4 80 point eso again, depending on how you want to present it. Eso This is one of the things that when you're picking your image sizes make sure that it can accommodate the screen different screen sizes. So if you do have images that are really small images like this three fifties, you've got to take a look at that and wonder how you want to present this image if you want it to re size to a larger size and you're gonna pixelated a little bit if a 3 50 goes to 4 80 So that's something to consider when you're designing your Web site and we before you get your assets and to determine what the dimensions are with the minimum size of wits are for your images that you're gonna be presenting on your site. 17. 21 Course Summary: looking at our original design. So we've got a pretty good similar type design here to the website. And of course, we could still apply some tweaks and fixes to really customize it and get it looking the way that we want it to look. But essentially, what we've done is we've created a three page website, and we've got ability to actually customize each and every one of these pages. We're using a shared CSS file in order to provide all of the styling for the website. And the good thing about it is this allows us to keep a uniform. So let's say we want to change our footer to read. We could easily do that update our CS style dot CSS and that would updated across our entire Web website eso. We customized it to be mobile ready, and we can update the size of it. So this is so we can update the size of it and we can see how it's gonna look on different devices. Eso you see that it's fully responsive, and when we were, we resize it, the menu gets presented in different ways and so on. So we've got a few different looks and feels to the website, depending on what size screen. And then, of course, this again can be customized and adjust it as needed. And we see that all the different pages they get presented differently in the fully functional within mobile and laid out, and they work properly and get display that properly. So we've got a contact area here, 100% going across 100% when we have a sub menu. So it still looks nice and neat. We've got our images. Whenever we shrink that down, whatever we shrink down are available space on our page than they restock really nice and neatly in order as well. And whenever we do have more real estate available to us than they stock in a two column format and so on. And this could even be adjusted if we wanted to go to three columns and so so on. So this all depends on what size of images we want to utilize within our website. Eso. Usually what I like to do is to stick with a two column, because you generally when you get to the biggest size, so some of these images are getting to be full size, and because we had images that were 3 50 we don't really have that much space to play with . So all the images were different sizes, and so we had to accommodate that when we're doing our Web build. And essentially, this is a two column website, and if we wanted our footer to come out of there, we could just move that out of that rapper area that we had that's setting that default with size and so on. We've got our logo up here. We made some adjustments brought in some Google funds, and it's pretty much ready to go on. Of course, you can take the source code, customize it yourself and see what you can make happen within your own. CSS customize ations by adding that into the website the Web template, and continue to build out different styles and different versions off this website and the geek worry portion of the course. So we did go over it rather quickly, and it's a not a necessity in order to understand G query in order to utilize this menu or if you've got a really small website, and if you don't mind updating it yourself within the source code, setting those selected classes depending on what page you're on, that's always an option as well. So not a necessity. But Jake Worry really does provide that really need added functionality and quite a lot. You can do it, Jake worry. So if you are looking Teoh toe, learn more about Jake Worry. It's always a great resource tohave and to be able to utilize whenever you're doing your website development.