Website Design Build a single Page Website Parallax site | Laurence Svekis | Skillshare

Website Design Build a single Page Website Parallax site

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (2h 13m)
    • 1. Website Design Build a single Page Website Parallax site

      2:04
    • 2. 1 Parallax Single Page Site Introduction

      2:53
    • 3. 2 Course Resources

      7:35
    • 4. 3 Create Wireframe of Website

      6:08
    • 5. 4 HTML structure create Navmenu

      5:28
    • 6. 5 Creating HTML sections

      5:08
    • 7. 7 Placeholder content

      3:18
    • 8. 8 Apply CSS to HTML

      4:26
    • 9. 9 How to create a Navbar from UL

      8:08
    • 10. 10 Full page size sections and background defaults

      6:05
    • 11. 11 Add background images

      4:46
    • 12. 12 Make your text standout

      4:59
    • 13. 13 Tweaking the navbar for responsive effects

      8:02
    • 14. 14 Responsive Updates and Fixes

      8:23
    • 15. 15 Navbar for small screens

      3:25
    • 16. 16 Adding Footer and updating sections

      7:36
    • 17. 18 Adding jQuery create event triggers

      7:09
    • 18. 19 jQuery binding window events

      3:12
    • 19. 20 Adding icon library

      2:33
    • 20. 21 Animate Scrolling with jQuery

      8:31
    • 21. 22 Slidemenu up jQuery

      3:08
    • 22. 23 Add Parallax effect

      6:37
    • 23. 24 Create a Contact Form

      9:56
    • 24. 25 Single Page Parallax site summary

      3:14

About This Class

Step by step guide to building a modern single page website from scratch

Do you want to build your web portfolio and expand your knowledge of web design?

Recently trending web design concept of parallax involves the background moving at a different rate to the foreground content.   This creates an interesting effect as the visitor scroll down the website.

Within this course we introduce the concept of web design for modern websites.  Creating an HTML frame, adding CSS styling and then applying dynamic interaction via jQuery.

This course is perfect for anyone who wants to learn about web design and how to create modern custom websites from scratch.  Everything you need is included within this course.   Learn how it all fits together within this unique project based learning course.   

Build a real web project and add cool animation effects.  This course is designed to teach you step by step what each line of code does, how and where to apply the code to get the desired results.

  • This course provides everything you need to get started with web design.  
  • Project introduction and planning
  • Step by Step learning about web design
  • HTML page structuring designing your website template
  • Creating proper structure to prepare for CSS
  • Applying CSS to styling you website
  • Creating effects within your website
  • Adding jQuery for dynamic interactive content
  • Adding animations to scroll
  • using jQuery to check viewer scroll location to create active navbar
  • Tweaking and updating CSS

What you get

  • Step by step learning
  • Source Code is included
  • Top resources provided
  • Work alongside lessons
  • HD quality video
  • Professional experienced instructor

This course covers web design with an introduction to using jQuery for advanced web functionality.
By the end of the course you will have the skills and know how to make a website.
I am here to help you learn how to create your own websites and ready to answer any questions you may have.
Want to know more, what are you waiting for take the first step.  Join now to start learning how you too can create websites today.

Transcripts

1. Website Design Build a single Page Website Parallax site: you want to build up your Web portfolio and or expand your knowledge of Web design. Recently trending Web design concepts such as Parallax, which involves backgrounds moving at different rates in the foreground Content creates an interesting effect. Within this course, we're going to show you how to create this Web effect within your own Web project. We're gonna be introducing the concept of Web design for modern websites, creating at each team l frame adding CSS styling and then applying dynamic interaction with Jay Query. This course is perfect for anyone who wants to learn of the Web design and how to create modern custom websites from scratch. Everything you need is included within this course. Learn how it all fits together within this unique project. Face learning experience. Build a real website project and at cool animation effects. This course is designed to teach you step by step what each line of code does, how and where to apply the code to get your desired results. This course provides everything you need to get started with Web design, project introduction and planning, step by step learning of the Web design each to melt page structuring, designing your website template. Creating proper structure to prepare for CSS, then applying CSS and style into your website. Creating effects within your website, adding J. Cree for dynamic interactive content, adding animations to squirrel and then using J. Coury to check the viewer scroll location to create an active now bar tweaking and updating your CSS. You get within this course step by step learning. The source code is included. Talk resources work alongside the lessons HD quality video professional experienced instruction. This course covers Web design in an introduction to using Jake Worry for advanced functionality. By the end of the course, you're gonna have the skills and know how to make a website. I'm here to help you learn to create your own website and ready to and answer any questions you may want to know more. What are you waiting for? Take the first step, joined now and start learning how you too can create your own websites today 2. 1 Parallax Single Page Site Introduction: welcome to our course on creating and designing a single page parallax website from scratch . My name is Lawrence, and I'm going to be your instructor for this course. And I'm so excited to have the opportunity to present this course to you. This is going to be one of my favorite projects that I've worked on. And this is gonna be a really appealing website that you too, can create. I'm gonna show you how to do this step by step within this course, we're going to start out by starting out with a new original design for the website. So we're going to sketch that out, wire free, middle and determine how we want it to look and how we want to present that website that we're going to get into our HTML code, design out our HTML structure and present our structure in a way that we're going to be preparing it and get ready toe add in our CSS and our styling to our website and then adding in that CSS, it's gonna transform all of this HTML structure into an actual functioning and an actual site that looks like a website. So this is the website that we're going to be building out from scratch. And as you can see here, this website is fully responsive. So whenever we're re sizing the website, we can see that it's going to resize two different screen sizes. So it doesn't matter if it's a small screen or a large screen. We've got different ways of presenting the menu, and we see that the scrolling functionality is all working. And I'm gonna take you through step by step, how to create a website just like this from scratch. We're going to be looking at CSS and HTML working together, and then I'm gonna introduce Jake. Worry A. J. Coury is where we get this amazing animated functionality where we get this additional menu functionality where it's sliding up and some really nice cool effects that your users and your website viewers will really appreciate s Oh, this is all available within the course. And if you're not familiar with Jay Query, then not to worry, because it's gonna be really light on the Jake worry. I'm not gonna get into too much detail, and I am going to explain what each and every one of the J query commands is going to be doing and how it's gonna affect our website and I'm gonna show you a real time what it's doing. Eso. And as we add those in, I'm gonna show you what different effects is going to take place within the website and the Web project as well as the CSS. As a nodding in new CSS, you're going to see this website transform into an actual usable website. So all of this all of source code is included that I do encourage you to try it out for yourself and see what you can create from what you learn throughout the course. So when you're ready, let's begin creating this amazing website from scratch. 3. 2 Course Resources: welcome to our course on building a single page website from scratch. So within this course, we're going to be building out a website that's gonna be a parallax have a parallax effect for the background images. So some of the resources that we're going to be utilizing within this course. So we're gonna be using brackets as our editor. So if you already have an editor, you can go ahead and use that one. If you want. Try something. You you can always check out brackets, but I'm gonna be using brackets and I've got that open here on the left hand side within the screen s Oh, this is an open source editor from Adobe, and it's a really nice editor to utilize to build a Web sites on HTML content, CSS and so forth. And the really need nice thing about brackets. It's got this life preview. So what it does is it allows me to actually add in content here, and then I can see it displayed in real time. There's a really nice feature that's available within brackets, and I'm gonna also be utilizing this within the course. So another resource that I'm going to be using is I'm gonna be using Zampa now. You don't need to necessarily install this. This is only for the purposes of this course, and I've got it running in the background. And what essentially example does is it allows me to run a server in the background, and this gives me the ability to go to local host, which, when pointed to the correct directory, automatically displays that index page. So I am going to be using it. I throughout the course. It's going to just be running in the background. If you're interested in setting this up, it allows you to create a PHP environment with a database and all of the bells and whistles that you typically have on a server within your loan local machine. So it's available Windows, Linux and OS X, and it's got a lot of options to it. And as we know, when you're developing HTML JavaScript and CSS, you only need a browser to run, not code, so you don't necessarily need to install it. But it's a good thing toe have when you are developing websites. And as for the browser that we're using, we're going to be using chrome. And the reason that I'm using chrome is that it's got these Dev tools here. And what depth duels does is it gives us additional information about the Web page. So you see, we've got the box model here so we can select any element within our Web page, and we can get additional styling information. We can get some source code, have got style. We can see what event listeners we can see the dawn breaking points and we can see properties. So dawn properties from the website itself, and we see we've got all of these event listeners here. And essentially, what dawn properties are is they're utilized within JavaScript. And this is something the Domus something that's built by the browser. So when it goes over to your website, so for this instance index dot html, it reads through all of this HTML code, and then it renders out and creates what's called the document object that relates to the page. So essentially it's got all the elements, all the properties of every single element, and then in JavaScript we come along and we can manipulate that. So that's the browser that I'm gonna be using this chrome and I'm also going to be using some additional resources. Eso I'm gonna be using some placeholder images here because we're creating a parallax effect. So I do want to use an image because this is going to be the most visible part of that parallax effect. We're also gonna be using police hold it for images. So I find that with Loren pixels, sometimes the images load a little bit slow. S So this is where we switched to place. Hold it. So both do the same thing. They give us placeholder images and this is ideal when you're developing your website because this gives you the ability to create placeholders where if you don't have the image resources ready on hand, then you could just drop the's placeholders in, and you can develop your website around that and then when you do get the assets, you can just dump them into your website along the same lines as placeholder images. We also need placeholder text, so I'm just generating some Laura itsu text per bang dot DK has a really nice generator here. Eso there you'll find a number of these online and the ones that I always look for have our ability to display it in HTML. Source. Eso We see that some of them they don't displayed in each 10 most source, so it's a little bit annoying when you don't have that option. And that's why I usually choose thes ones thes generators that can display it in HTML. Source. We've got some options here for paragraphs, sentences, words. So these air typical options and it really just creates a nice effect, because when we add in this this just default blank text, it's a another placeholder for our website and makes our website look like a real website instead of just ah blank, empty campus. And also it's harder to design around this blank line and one of other resources that we're gonna be using. So I've used a number of different tools pretty much any image software you could do this in. I mean, this is where we create our wire frames. You can even take a piece of paper and write it with a pencil on. Just roughly sketch out what your website should look like when you're when you begin creating it. So create that mock up of your website s so that you can have a better outline. And when you're creating your website code that you can design towards it s O in this course in this lesson, I'm gonna be using this one here. Mockups dot com app dot mark ups dot com Eso this one, I believe s I'm just using a free version right now. Some not sure how much power I have with this, but again, it doesn't really matter which resource you're using if you want to use the same one that I'm using. So this is the website. You're gonna be able to see this up here in the left hand corner in the address bar. Eso that's it for the resources that we need in order to get started and then the rest of it is just HTML and CSS code, and we're gonna place that within our website and build out our basic website. From there, we're also going to be adding in J query and javascript in order to promote provide some additional functionality when we're scrolling. So these nice animated scroll effects and this is all available in a query. It's really easy and straightforward Toe ad So if you're not familiar with Jake worry I'm gonna It's gonna be really basic and straightforward and you can pretty much is copy and paste what I'm doing within the lessons as well. Eso this is optional part Your website will work without it as well. I It does handle the responsiveness of the website for the menus. So in order to add that in, this is a good thing to have within your website. So s Oh, this is gonna toggle that navigation bar and that's going to be G query. So gonna add in those G query libraries and set that up. And don't worry, I'm gonna show you how to do all of this html CSS and then add your bakery for additional functionality within the course. So when you're ready, open up your editor and let's begin creating our website from scratch 4. 3 Create Wireframe of Website: we're going to begin creating a website from scratch with an index dot html page and that's going to be a single page website. Eso we're only gonna be using index dot html. We're not gonna create any additional HTML pages, so all of the content is gonna be contained within this one file. Also, we're going to be linking over to style dot CSS. So this is optional because this is a one page website, but just form or readability and for cleanliness of our website and best practices, we link out to style dot CSS. So I've got that opened down here completely blank file and we're gonna be adding in all of the styling elements as needed as we progress through the different lessons. So the first thing that we want to do when we're creating our website is we want to begin with a plan. So in order to create a plan for a website, there's a number of different resources. You could use a pen and paper, write it out on a piece of paper, and just have an overall general idea to help guide you how you want your website designed now. You could go into quite a lot of detail in this, a swell you could label everything. If you're creating forms, there's a lot of options you could lay out how all of your pages fit together and so on. There's a lot of different options there on how you can create out your website. But I'm just going to do a rough outline for the presentation of this course so that we have a good idea of how we want our content to present. Now, this is gonna be a one page website, so it might be a little bit harder to sketch out here within the design. So essentially, what we're gonna have is we're gonna have a number of sections, so we're gonna have our main website which is gonna be visible within the browser. And the other part that we wanted to add in is, I wanted to add in navigation bar and this navigation bar. I want to make it responsive s. Oh, this is gonna be something that we can create that is gonna look different on a mobile device. So they've got a navigation bar here and we're probably going to go with five pages sounds pretty good to me. So we'll set up our original navigation bar up here some making it a little bit smaller, so it fits into the page. Now, you can also get really involved in how many pixels and what your dimensions. So if you write it, if you draw it in a grid like fashion, there's a lot more options and you could get really detailed into how everything fits together. But I'm just gonna create are essentially a fairly rough outline. Eso we're not gonna really go by the pixel with because we're gonna make this page responsive, and it's gonna be 100% across at most. Maybe will take up 12 80 picks on the larger screens and then down from 12. 80 we're gonna have just full with of the content that's being presented. So it is gonna look different on a mobile device where essentially I want this navigation menu to scale itself down and just be a clickable icon there, and then we're going to present the navigation menu. When it gets clicked, we're gonna present it horizontally. So we're going to present it like this on the mobile device. Without that screen. So maybe what I'm gonna do so we can have it all on one page is I'm gonna make it shrink it down if I can quite a bit more. And I had to shrink down that text there. The font size in order to get this to accommodate eso what I want to do Copy that paste so that we essentially have to screen. So this is going to be the death stop scream. And I can actually just bring out another rectangle. And this is what? How we want it displayed on mobile devices. And I'm gonna move this one, Teoh the top bring to front and so on a mobile device. We're gonna have our little menu icon, and we're gonna have a pop up, but this is going to go all the way across, and I should actually shrink down the width here because we want our mobile screen to be completely responsive. So essentially, this is what it's gonna look like on a mobile screen and quickly see if we have our little icon there for the mobile. It's gonna pop over to icons here and quickly take a look and see if we've got our typical menu icon so normally you'd have like the three bars. So there's two bars and just seeing if we actually do have a three bar here that's available and there it is. There's our menu icon saying a dragon drop this. So essentially, this is our mobile design eso It's a one page design, so all of the content is going to be there beneath. And then as we scroll, some of the content is gonna work in a parallax effect. This is the menu open. And maybe we can even show you moving up this menu up here right to the top there because I do want it to sit top left and then going out of their we're going to just do and we can go and add in a rectangle there to indicate where we're gonna be placing the content. So it's going to get rid of that and just add in another rectangle. And then this is essentially where the content is going to sit. And when we scroll that we're going to keep our menu here right at the top. So that's that's this basic design and this is essentially what we're going to get our website to look like when it's up and running and complete. So in the next lesson we're going to start designing this website. So essentially here is the content and then we scroll some of these images and we're gonna use background images and they're going to stay in the background to create our effect. So in the next lesson, let's start coding out our website. 5. 4 HTML structure create Navmenu: let's open up our editors and start creating our HTML. So in the last lesson we looked at how we can create a wire frame and essentially created a plan of how we want our website toe look. So the mobile view here on the left the desktop view where the larger screen size view here on the right hand side. So this is, ah, fairly basic. There's only really a few sections that are visible sections, and that's the navigation bar and then the rest of the content. And this is typical of one page websites where you would have just that one main content area and navigation area. So let's build out our website accordingly. So essentially when we look at this, we can see that we've got a head area and then a second div area. So second main content areas, so essentially two different content areas and then when it re sizes, we still have to content areas. We have our head and we have our main content. So this is fairly easy to do and fairly straightforward, and this is why wire framing is important because you want to be able to make your website to plan it out accordingly. And when u section these off, When you look at the two different essentially the two different sections of your website, you can do this fairly easily now. Another thing, too, that most websites will have. They'll have a footer area. So this is optional. Eso I'm typically not going to include it within my original design. I might put it at the bottom of all of the content because of the fact that when I've got my main navigation up here, I don't want to clutter my footer area as well with a bunch of content so I could have one of these linked to the bottom area and then not would pull up all of the footer content. And this is depending on how you want to design your Web site. There's a different different approaches to that. But essentially what I'm going to do for this lesson is I'm gonna work with this two main content area set up. So the first thing up here that we notice is that we've got a menu here and we've got a navigation bar and designing from the mobile first perspective, we see that we have our navigation icon here, and we have our main navigation. So we essentially have two sections within the menu. So let's go ahead and create those. So creating a diff and the stiff is going to contain all of the main menu content. So we're just gonna call it menu and close that off, and then within here, we're going to create another DIV, and this is gonna be the knave icon or the smaller icon that's gonna show up. So now by corn, And then here is where we have our icons. So for now, I'm just gonna leave a placeholder capital icons there and then I'm gonna build out another section and this is gonna be not our navigation section. So I'm gonna use the html five structure for developing websites where we, instead of using dibs, I can use knaves and we used header up here. A swell Seles are semantic names for elements, and this gives more meaning to the different elements that we have within our Web page. And typically when you're setting up a navigation menu for readability sake, we created in a format where we've got lists. So we've got a new ordered list, and then each one of the navigation items is gonna be a list item. So we're gonna have list items, and then they're gonna link out to different parts of the Web page. So we're gonna have different sections representing the different areas of our single page websites. Were not actually using h Rafto link out to another file. We're going to be just slinking out Teoh within the web page. So essentially we can name them or we could just kick caught, create them as sections. So the 1st 1 maybe we could caught we could just give it a name of home and just call this one home to be consistent, Okay? And I'm gonna just copy and paste them eso We might have something here we might have about so we can call this one a boat. We might also have something called services and portfolio. And then lastly, we're gonna add in our contact area, so I'm gonna change this to lower case just to be consistent. So essentially, that's our navigation part of our website. And I know right now it doesn't really look like anything. It's just a list, but we are gonna. When we add that styling into it, it's going to really take shape and start looking more like an entire website. So the next lesson we're going to continue to build out our HTML structure, where we add in the different sections for the content areas that we've created the links to up here within the navigation section, so that's coming up in the next lesson. 6. 5 Creating HTML sections: in this lesson, we're going to continue to build out our HTML structure for our websites. And the last one we looked at, how we can link Teoh Essentially, we're gonna link to different sections below within this div here. And I'm going to give this div on i d of Rocker. So this is essentially s so that I can link to it within the CSS. And I know that all the sections within the rocker are meant to be full sections within our web page. And this is how you gonna divide up all of these different areas within the website. I'm gonna name them as sections and then and include the content below that in in that section elements. So we're just gonna call it section and we're going to give it an I. D. And this is where we link to the particular I d that we've indicated up here within the navigation menu. So we're going to give it an I D. And I also want to give it a class so that I can again break those out and really be able to better select them within CSS. And this is one of the important parts about when you're creating your website and your selection process within the CSS that you do do have the ability to make those selections and make it fairly easy on. Of course, as you progress with CSS, you can get more complex in going down and traversing through the parent and going down and isolating out all the different elements that you want. Apply styling too. So within the section within the home section, we can create a number of different smaller areas, smaller sections. So we might have something like we might have a heading area there, so maybe we just call it home for now. And then we might have but article eso first article, and we've got a bunch of content in here blah, blah block. And we're gonna update this with some default content later on. So I saved that, and we might have another pair another another article there where these could also be paragraphs as well, or we could have paragraphs within the articles and so on. So all depending on what type of content you want to present within your website. So for now, what I'm gonna do is and also gonna throw in a hyperlink in there just to make it more interesting. So this one here is gonna actually hyperlink out s so we got some. So now I can copy out thes sections and I need to create actually five different sections that are going to make up my website, and then we're going to be able to scroll through them as we progress to the website. So this one over here is going to be about, and I'm gonna update this to a vote. And maybe this one only has one article, and maybe it has a few paragraphs in there. So I could divide this up with paragraphs and divide this up with a paragraph, A swell. And this is what brackets is doing here. It's automatically closing that off. So if you're wondering how it's closing off automatically adjust brackets that's doing that . Eso next section we had services, so maybe just call it services up here, and we can have some information of it services that we offer on our website s Oh, maybe this one has a whole listing of a bunch of different services that we offer next. We're looking at our portfolio. So maybe this could be a Siris of images or clickable links, and so on. So poured, full deal and just give it the same naming convention portfolio. And so here we might have a Siris of images. So image and is gonna leave this right now is a placeholder. So we might have a u. L and a bunch of list items, and each one of these list items is an image. So I'm going to just copy this would here and listed it there. So that's that's our portfolio area here. And then, lastly, we need to create our contact section s Oh, this is gonna be another section similar to what we've done before. And in here we might have a contact form or something like that. So maybe it's just a paragraph or a div and contact us contact form, and then we can add our contact form html within their So now let's go back out to our Web page and refresh it. Essentially, we've got pretty good layout of how we're presenting our website, and the next step is gonna be turning all of this into an actual functioning one page single page website ISA turning our HTML structure into a Web page, and that's coming up in the next set a lesson. And of course, we're gonna add in content as well. So all of this is coming up. 7. 7 Placeholder content: in this lesson, I wanted to just update our basic HTML page and add in some some additional content because right now we've just got some blah, blah, blah, and even when we transform it, it's not gonna look exactly right. So let's open up our browser here and let's create some images. So I'm gonna copy what the's placeholder images in here. So these thes will be indicative of maybe different portfolios. It's a different websites we have that we wanted to showcase. Maybe we even have some content in here under services. So we haven't image here, so I'm gonna transform that 600 by 2 50 on Also, I'm gonna need some dummy text. So going over to my generator here s I'm gonna make it shorter. Generate it and we're gonna copy and paste this and eso instead of having all of this. We'll just add in that emit that content s another one here that maybe we want to generate out two paragraphs, maybe medium. So generate that one out. Okay, That turned out a little bit long, but eso no, we've got our two paragraphs. I'm gonna cut it down a bit because I think that that's maybe a little bit too much for what we needed s We've got the about section, so I'm gonna just have two paragraphs going to keep them short and just generate this out and a copy of my hyperlink there, get rid of that and then add in some random hyperlinks here throughout my page because hyperlinks is another thing. When you're designing that, you should always include within your design s so that you can just get a better feel of how your website content is going to be presented. So let's now take a look at our website and well, it looks totally different. We've got a lot of stuff in here and it looks more like an actual website. So we do have some spacing issues there between the those anchor text. So I'm going to just take care of that right now. So going to do a find and replace on that, and I'm gonna replace it with a space there so it presents a little bit better. So that was one thing that I missed there in the copying. So now we've got something that looks more like a website, and this is what I met by having this place holder content because it really does help out with structure in your website and in the next lesson, weaken jump into our HTML and actually start building the suit and having it represent as it would when we have our completed website. And then all we would have to do is create that content update all of this place, older stuff with a real content about our website and then we'd be ready to go and launch the website. So the next lesson we're going to get into the more interesting stuff when we apply CSS styling to our website. 8. 8 Apply CSS to HTML: So this lesson I want to focus on our HTML and build out our website to make it actually looked more like a website. So let's open up our CSS file. And remember again, we've linked it up here at the top were have done link rehl style sheet style dot CSS. So now whatever we do within the style sheet is gonna propagate out to our main index dot html page and any other page that actually links to that style sheet. So first of all, we wanted look at our header and apply some styling to the header. And the way that I usually work with CSS is I'll start with the talk level tanks, so body. And then maybe if we had some hyperlink stuff, we had some basic paragraphs and so on. We could set all of that styling up here. You also a lot of times just see people set their H tags. They're heading tags. So the H one h two and so on. So all of this could be done here at the top. Eso for now. I'm going to just keep this as just blank right now, and I'm gonna update those as we go through the course. So right now, nothing in there right now. And also, I'm gonna add in some spacing here so that our new styling doesn't actually automatically shrink to the bottom when we when we save it. And this is something that brackets is doing again cause it's beautifying the code as we save and we type it there. So now let's start out with our header area S O r header. We only have one main header. Eso I can access that header. If you're reusing header anywhere within your website, then maybe give it an idea. So just so that we can reuse header if the need is there. So let's access header and apply some styling to the header. So maybe we can give it a default height because we want it fixed to the top. So this is where we need to specify the amount of pixels. We want the header to take up. We want a position it so position is fixed. So this is going to keep the header at the top, no matter what are with. So we said our height and we want our with, so we want it going entirely across the lead page and because we've got a fixed position, So just gonna update these so that they're together. So when it comes to fix position, weaken set where we want a position that eso we Ideally, we wanted to sit at the top zero picks. We wanted to sit left zero picks and s So this is where we're positioning that header, that header. So let's refresh it and we see that's pulled over there to the left hand side. And right now, immediately, there's not much that we can see with the header because it's just taking up that height and with So let's give it a background color so that we can see it where we had even given a border for now. And we're probably gonna want to remove this as we progress. But for right now, let's just out of border around it so that we can actually see where our header is sitting . And also I got to give it a background color so background color and I had a work off of agree scale s. So this is one of the things that you can do when you're designing your websites to work off of a grayscale color schema so that when we are when we are applying our styling that we do see that we can add in the colors and the shades later on out. Let's save our header. So don't forget that we updated our HTML file. So we need to say that Ritz refresh it and now we can see what it looks like. So not exactly like the header from our design, but it'll get there. I do promise you that we are going to make it look exactly the way that we want it within our original design. So we need we toe update how the navigation menu is presented because we want ultimately, we want to hide the icon. We want to pull it over to the right hand side and we want a style. All of these lists items into a more presentable fashion. So it actually looks like a navigation menu. So that's coming up and applying that CSS, we can magically transform it using CSS. And this is coming up in the next lesson. 9. 9 How to create a Navbar from UL: in this lesson. I want to tackle our navigation bar. So we do have a new i d hear of menus so we can work off of that in order to identify that whole container there of all of that menu content And this is where we can apply some menu properties in there, So working down from body header and we've got our menu there. So for now, what I want to do is I want to focus on this navigation. So the nav car, the now icon, is actually something that we need to hide, and we're gonna work from from that down. So let's take a look at this first. So classic now icon. So we select classes with the period, and what we want to do is we want to display none on it. And we also want to make the font size fairly large because we're gonna use on icon there and eso by default. It's probably not gonna be too big, So maybe we could use to e. M. So this will help resize that. But I did display none. And by default, I don't want it displaying when our screen is large and over writing on this menu. So when I refresh it here and I need to save this as well and I just quickly need to add in a space there as well Eso Now we see that that's disappeared and we can go on to build out our navigation bar in the menu. Eso this is just gonna be accessed via knave and we're gonna float the knave over to the right hand sites. We're gonna use floats. So this will pull the navigation menu over to the right, and that's exactly where we want to position it. And now we're ready to start applying some styling. So what transformed this? Get rid of these list items and transform it into an actual navigation menu? Eso Let's look at. So I'm gonna select it this way again. And you l So Travers all the way down. And of course, I could give the Knaven idea. I could give the u l I. D. And access that that way as well. It's a number of different ways to access eso by default. Your A Norden list is gonna have some default properties to it, so I'm just going to remove those I would get rid of those margins. Probably not going to see much of a difference right now, but they are getting rid of these default margins. So if you had pulled it over to the left, we'd probably see that now it would shift over and we're getting rid of those defaults. Eso the next one that we want to take a look at is the list items. So now, uh, list items and we want to set some properties. So this is where we actually do all of that transformation of how we want to present them. So if we want them to stack to left of each other, I can float them over to the left. I wanted to update that list style, and I want to get rid of the list style type, and I'm gonna set it to none. So those are those little round dots there. So once we saved that and refresh it, we see that now we've gotten rid of the dots we've gotten rid of. We floated them over to the left, so that's aligned them horizontally instead of vertically. And now what we need to do is maybe add in a border so that we can differentiate them. And this might be against something that we might want to get rid of at some point s. So it all depends on how you're styling your website. So now we've got a nice need presented menu, and there's a few things that still don't look right. And because we've got all hyperlinks in, there s so we can actually access that and apply some styling to those hyperlinks. And this is probably the best way to do it because this applies that property directly to this element. So not to the parent, but the one inside. So we like to work with the last element that we wanted to utilise and all the way down. So we want to display it as a block, and this will give it more of a box feel and look to It s so not much of a difference. That's a noticeable difference. But it does help with the styling eso whenever we're gonna add in padding as well to make it pop out a little bit more so text decoration. This gets rid of the underlying. So when I refresh Okay, so I think that there is a problem there with the life previous side to re link that. So now we've got text decoration. None got rid of that underlying. Let's add in some potting media go with 10 picks, potting. And now when I say that so now it's starting to look more and more like an actual navigation menu s. So another thing that maybe we should apply is a background color, so that stands out from the rest of the navigation bar. So let's stick with our defaults here, default color schemes and maybe go with a dark color and then will transform the color of the fonts to a white color. So now we've transformed those list items, But one thing is still missing. It doesn't really act like a navigation menu. When you hover over it, you can see that they are clickable, and it is actually going to the different sections. But the problem here is that they're not really. Usually whenever you're you see something that's active on a Web page, something happens when you hover over it so we can add that style in as well. And this is really easy to do to add in these really nice dynamic effects and make something interesting happened for your user when they're coming to that when they're hovering over. So here, Usually what I like to do is reverse the colors. Eso make a fairly drastic change. Maybe make this blue or something like that. So it really stands out. I know I said, great scale, but it depends on how we want to present it. Maybe we could in fact present it as white or make this off weight. And then whenever we hover over it, make it more white. So maybe let's do that. Let's reverse these out. And instead of white, I'm gonna do it on off white. So this is a shade of white Dee dee dee. Maybe so. They don't immediately stand out, but when whenever we hover over them, they do stand out. But we can also bold the text if we wanted to as well. It's a number of different options here that are available to us whenever we hover over them. It does now look like an actual menu. So the next lesson we're going to continue to build this out and we see that it's already functioning whenever we click the links. And this is what I meant by when we don't even before we apply the JavaScript, we see that we've got this nice functionality when we click, it automatically brings it over to the anchor, and this is all by default within the HTML. So there's nothing, uh, really happening here other than the street HTML, where we're linking to the hyperlinks and the Web Page is smart enough to know that whenever you click this by looking at the hash and knows that we're looking for a Nye deed element within the Web page and then it simply goes to that it's grows it to the top. So when a cook about, we see that the top of about is hitting the top of services is hidden, so we'll have to make some adjustments to that. But we see that we now we've got some functionality within our Web built. So the next lesson we're going to continue to tweet this and build this out and really make this into a nice, responsive website, add in some background images and add that parallax effect that we're looking to present within our website build. So all of this is coming up in the next set of lessons 10. 10 Full page size sections and background defaults: So I'm just looking at our navigation bar that we built in the last lesson. And maybe I want a bump it over a little bit to the left. So I want to add in some spacing, some margin spacing on the left hand side. And so we can do this because we can actually isolate which whatever one is the last child . So we can do this by a pseudo style selecting the last child of the list items. And from here, we can add in a margin into that. So I'm gonna go ahead and do that and I'm gonna add in margin to the right hand side. And we can set this margin to whatever we want and we see that it shifts it over a little bit. And this is useful because I don't want it exactly hanging right to the end. Eso I did want to place a little bit of spacing. We can even add in some margins in the top if we wanted to do all the list items and so on . So there's a lot of different options on how we can present this content. We can even shrink down this navigation bar, maybe 2 50 picks. Eso It's not taking up much space where you even shrink it down even more if we wanted to. Eso not a different options here that are presented to us eso Now, within this lesson, I want to take a look and jump into these sections. So typically, when you have a one page website, we like toe, have that entire section take up the whole available space. And so because I have named them so going down here rapper section I can isolate out all of these different elements within my Web page so I could just call them. I've given them all classes of section, so this is how I'm going to identify them and make selections on them within my CSS. So what I want to do is I want to give them a minimum height, so maybe I want to give them a minimum height of 100%. So let's refresh that. So also, maybe it's even better just to set it as a pixel height. So, depending on what size images I have in the background, I want to maybe set on 800 picks minimum height, so the difference between setting percentages and actual wits is that when I'm setting a percentage, if somebody opens it up on a smaller screen, they might not generally get that same effect. And if they re size it so again, depending on how you want your website to present, this is how you could present the different sections. I want to add an overflow, and I want to hide all of the overflow. So what this does is this will hide any content that is hanging over the edge of the section. So you see now that this image, because it's hanging over the edge there and I'm gonna take care of this as well when we make it responsive. But right now it's hanging over the edge because it's a larger size so we can see that whenever we re size, it just gets hidden. So that's a way to prevent your content from actually hanging over the default edge. One other thing that we need to add in is a patting at the top, and so this is gonna be essential because we want to create that spacing up at the top for the different sections, and we saw how earlier when we click the pages, we weren't We didn't look like the pages were actually coming to the top, because remember again that we do have 50 picks header space here reserved So we can, depending on how much is patting we want between. We can even go with something like 60 picks. And now whenever I click, these links were not hiding the content underneath that navigation bar. And this is important because this is one of the things that sometimes gets overlooked whenever you hide that content. So you don't want to ideally be hiding any of your content. Eso also we want a position it So I want a position at relative. So give it a relative positioning to to the rest of the content. And this is gonna be useful when we're creating a parallax effects. And for now, maybe we want to add in a border so that we can actually identify where the end of each one of these each one of these sections is. So you get a black border and just refresh this the problems now because I've made it relative and about it in this border, we can actually see where the contents of the section are. So whenever we're over here were actually clicking on where The end of the pages. So we're not presenting it properly. Eso maybe for now, What I'm gonna do is I'm going to remove out this'll relative, and I'm gonna update this later because we're gonna need this effect whenever we're creating our parallax effect. So right now is throwing off the way the websites working. So we're just gonna comment that it for now and add that in later as needed, and you'll be able to see the different effects when we add that in. Let's also take care of our background size so background size is cover. So this essentially gives us stability. Cover the full background area with a background image. And for each section, we want to add in different images and maybe even different colors and how we want to represent it. So I'm gonna add those in section by section eso for the whole men and so on eso Another thing that we want to do with background we want to set our overall background position us well in a position at centre and centre so It's absolutely positioned in the center, so it doesn't really look like there's any changes. But when we add in some background images, you're going to be able to see what what we're doing here with the background size cover and center center eso the next lesson. We're going to continue to build out thes sections within our website and apply different styling to really make them come to life. So that's all coming up in the next set of lessons. 11. 11 Add background images: So in this lesson, I want to take care of the different sections we noticed that we had I d we had about and so on. So we can add in different styling for each individual one. And this is ideal when we're creating that parallax effect because we probably do wanna have a different background image for each and sitting up that background image. So set up background image. You are l. And now we need to specify the u R L that we want to create and added as the background image. So let's pop over to our Laura ipso generator or Laura um, pixel generator and take a look at a basic background image so we can specify sports if we want to. So I'm gonna copy that link. So maybe if we had a sports themed intro page, so maybe we would want one of those. So let's open this up. And I didn't know that you are l. And we want to make it large enough so it takes up the space so hopefully this doesn't load too slowly. And maybe we want to set the absolute with of our wrapper to a Max with So let's identify Rapper here, and we're going to give it a max with of 1200 pics, so we don't want our website to go bigger than that. So even if the user has a huge page, we don't want it to go bigger than that. So we can see here that as we're scrolling down eso their home page now has this as our background. And of course, we still need to apply some styling to the content there because now it's not really readable, and we've got an image in the background. So what? So let's go ahead and add in some others other background images to you. Some other pages and we can also set some background colors. So some default colors as well so I can make it really nice and colorful. And this is again done through brackets where it's giving me my default colors that I can select. The next one was about, and we can even use another image there since that a sports, I think another one, this city or something like that, and let's update the color as well so it won't actually see the colors if we actually are getting the images in. But because these air fairly large images, they might take a little bit of time toe load. So the next one is services. So maybe for this one, we're not going to use a background image because we want to the user to focus on our content instead of what's happening in the background. So let's just do a dark blue And next we've got our portfolio. So again, maybe we don't want to have any, uh, so portfolio. And we're going to get rid of that background image. And for this one, maybe we're gonna have more of, ah, grayish background and you could literally set, however you want it, toe look. But we see that now, as we scroll through there, we get all these sections that get divided out, and we can actually begin to see the division between all the different sections. And for this one, I'm gonna add in another image. Maybe so quickly check here, and so we've got people's. Maybe we'll add in people because it is a contact me section and we'll just keep our doc brown color toe white. That's in case the image doesn't load. So that we can actually see a difference between there and something happened there, but yeah, that was because I didn't add in the contact area. So we're adding it in the portfolio. So let's ah, support Folio. And actually, what's happened here is I haven't identified it as a separate section. So we've got need toe, identify That's contact. So now portfolio. So we've got home about services portfolio and contact section. So we're ready to go to continue to build at this website and add some nice functionality. So we notice that the text is hard to see, So I'm gonna take care of that as well and s we're gonna apply some different styling now to the text and really to bring it out. So it's more presented and better and easier to see within our website. So all of this is coming up in the next adolescence 12. 12 Make your text standout: in this lesson. I want to focus on styling this text because it's not really readable like this. I know we've got some nice background images and we don't actually have control over which background images because they're just coming in randomly. Eso I do want apply some styling to that s O that it actually is more readable and also to the H twos. So we had the format relatively ST Ford and only one that I didn't have. That here is the article this contact section. So I'm just gonna update that and styling that I'm gonna use is I'm going to go down through section and article so it's gonna be section uh and so we can use the class sections that we were using before. So maybe I'm gonna put it right here. So class section and any of the H two. So we're gonna apply some styling there and section and a one apply styling to all the articles as well. So what I want to do for these ones and we can see that sometimes the text is pretty hard to read. So let's just add a background color and we're going to do an RGB A which allows us to create an Alfa color. So I'm gonna do it to 55 to 55 to 55. And this is where we set our values to maybe try something like a 0.7. So let's refresh that. And we see that now we've got some or the paragraphs are actually standing out and we can actually see the content on there. So even if there's an image there in the back, we can actually see them popping out. We're going to do the same thing for these headers, but maybe for the headers, because we want them really to pop out. We're just going to do a background color off white so that they can really pop it there. Okay, so that each twos are all going to really stand it, so still need to add in some additional formatting. So let's add in some padding here to maybe 10 picks patting, so it brings the text in a little bit from the sites, so refreshing it, so it presents it a little bit better. Maybe this one we can be patting as well eso we do, patting all the right around five picks of padding. We can also transform or weaken Set Ah fought style s weaken Set it to different to stretch today. What size it and so on. So this is something that maybe we want to care of that we want to make it really big and really pop, it's a to e m. So see how this looks on Also, we want to do it text. So we've got some options with text. Let's do a text, transform and change them all to upper case. So that'll be a nice effect for any of those h twos. They're those H two sections. Eso bringing that out. And also maybe another thing that we want to do to the text is maybe we want to center. It s Oh, I'm not sure how this is gonna look, but we'll just try it out. And we can always remove it if we don't like it. So we can center all of these sections so that they're really highlighted and they stand out. Uh, so now we can also, if we wanna make this even more visible, we can change it to an eight, so that will bring it out even more. And sometimes for older browsers, maybe you want to do something like this just to ensure that where we are taking care of the background color. So in the older browsers, it's going to take both properties and the ones that don't understand rgb a are just gonna be playing white. So this ensures that our text is always gonna be readable. But I usually like this effect where we can see a little bit of the background images, best room because thes types of websites air really image heavy in the really image intense . So the idea really is to present those images really nicely to the Web user. So this is our website so far, we see that whenever we're re sizing, So there are some issues here when we're re sizing. So we need to set that rapper we need to center that. So that's one of the things that we can see when we really scroll it out in larger sizes on . Of course, we still need to make it responsive because our menu doesn't look, doesn't stock mace and a few fixes. We see that the images eso some of these images are too large for the sections when we shrink it down. So all of this we need to take care of to make it responsive and available for any device, any device size screen. So all of this and these tweaks and transformations air coming up in the next several essence. 13. 13 Tweaking the navbar for responsive effects: It's a few other things that I wanted to add in and going back to this article. I really like the border radius option, and this allows us to make rounded corners. So this is a really need effect. And this is something that I always love putting into Web pages, especially. We've got content presented like this. Making them rounded really has a nice effect. And also what I wanted to do is add in margins. So maybe you wanted to add in margins all the way around so that it does have some additional spacing and we can see some spacing off from the sides. Maybe we want to do even margin 10. Or we want to maybe, uh, do zero for top and bottom and then 10 4 left and race. We'll see how this looks. So now we've got all of our sections and it looks a lot nice and Niedere. And this is why I like these rounded options because it's kind of a really nice effect that you can have within your Web page. Eso we see here that it's rounded presents itself really nice. We do have an issue up here because we use article twice. Eso Maybe what I'm going to do is just update that and remove out and only use the article once, or we could remove the rounding and it's could get a little bit more complicated. So what I'm gonna do is I'm just going to simply remove out that article the two articles there, and just have them as separate paragraphs. So it fits in better with that rounded styling, so just refresh that, so that presents itself better. So now we can see our content much clear. We've got the rounded corners, which is something that I really like on. And we're ready. Teoh, continue to build out our website s. Oh, now let's look at making it responsive and responsive Websites is a pretty much a must have . And the way that responsive or what websites work is that we can. So I'm going to just get it up here. So one of the things actually forgot before we continue is I do on a center center this, uh, this rapper let's give it on automatic margin from left to right of zero and our top to bottom of zero and a margin of left and right of automatic and this will center it actually , So margin And this has usually been see assess the best way to make your content centered and we see that right away we get that content center date and we could also even wrap that entire that entire header areas Well, so maybe that might be a better idea. So have the rapper for everything and then have a maximum with their for the header area so we could bring that in line with the rest of the website. I think I need to save that so in the reason why this isn't falling into place is because we've got it as a fixed position. So let's just move that back and keep it as it was with the rapper there. And this is something that we could adjust as well. But it does get a little bit tricky when we try to center a fixed position item. Eso For now, let's just leave this at the top as is, and we'll work with our navigation menu from their uh So now this is our website. We see when we click, we can go to the different pages and so on. So I'm also going to show you, I guess quickly how we can update. That s so this is the problem here. Is that this navigation menu? Eso This navigation menu is in a fixed position and it is rather hard to center these fixed position navigation menus. But there is a way eso let's make some updates to this. And this is something again that could be optional here, So we need to set a rate of zero. So we've got a left of zero, a rate of zero. So let's refresh that. I also want to clean create that Max with. So it's just gonna be the same thing that we had here within the rapper. And of course, we could remove that over if needed as well. So let's just save. That s now we've got our max with but still shifted over there to the left hand side. So this is where we need toe. Add in that margin zero and auto so that it automatically centers same thing that we did with the rapper. And there we have it. So we've got a centered menu now. Eso This is working out more as a central option within our website. So let's open up our website right now. We're going to take a look at it and we're going to see. So the nice thing about chrome is it's got this responsive capability where we can simulate different iPhones and different sized screens. So this how it really helps us with our mobile development because this really gives us a better idea of how it's gonna look on mobile devices. We can rotate the screens as well. So really nice effect. We can build a different size devices eso 6 80 buy whatever we want here by the height. So when it comes to mobile design and being responsive, we need to know where we want to set these breaking points. And we see that once we get to a certain size, so once we get literally below 400 picks, our menu doesn't resize Well, so ultimately, I do wanna have some additional space and maybe whenever we break below 600 pics, we want to adjust this navigation menu. So we want to pop up our icon and then have it present as a drop down option. So let's open up our CSS. And this is where we can add in the media screen option, which allows us to set those breaking points within our website designed so media screen and and we're using from desktop down. So we're gonna set a max with and let's do it at 6 40 So this is gonna be our breaking point. And once it hits this breaking point, then we're going to display it differently. Eso we want toe actually show our nav icon. So let's instead of hiding that it's now going to show that So we're going to do display block you could. So now let's refresh the page. And whenever we re size down, whenever we get to below a certain point, we're going to see that we're gonna get that icon showing up again. I think we have to refresh that and save this. Maybe we're gonna pop into our now bar and just hide that one for now. So our menu knave. So we're gonna hide that entire navigation menu because I think that's what's interfering as well, with us being able to see it. So we're just going to do a display none to it and will give it a width of 100%. Okay, so let's refresh that now again. And we can see when we hit our breaking point that our navigation menu is going to disappear and are icon should be showing up there. So we need to apply some styling for that to really make it function and work properly. So believe that whenever we're looking at this, So our menu is there are nav icon and our menu nav is being displayed. None, but this one should be displayed, block. So we're gonna look into updating this as we go into the next lesson. So it's coming up. 14. 14 Responsive Updates and Fixes: in this lesson. I want to finish up and add in some additional tweaks into the CSS to really make our website effective. So we see that when we come into the website, we've said it at a minimum, knocks height of one of 800 pixels. Eso I want to make an adjustment for this so that it's actually taking up the whole available screen size area, and this is really easy applied within CSS. So we just need to select that section area so section and we've got. So we have our men height to 800 so we can set our default height to 100 VH. And so that just means vertical height. So 100% vertical height and we see once we do that, then we're actually taking up that full available space. So, depending on how much vertical height is available on the screen when we re size it, it's going to take up the 100% of it. So if we have a smaller vertical height, we can see that it adjust their appropriately so whatever the vertical height is, then that's what it sets its automatic size too. And this is gonna work out really well because this was one of the things that was not working exactly rate whenever we had different screen sizes. Eso this addition is going to make it a lot more effective and responsive when we're dealing with different screen sizes. The other thing that I want to go back and I want to look at the body and the HTML so within the body and html I want to set a default fought family and I'm going to go over to Google Fonts and I'm gonna pick out a Google thought to use within the website. Now Google Fonts is a service offered by Google that allows you to really easily bring in fought styling into your website so you can go over here to fonts dot google dot com. They have 800 need different font families, all ready to go. So all you need to do a specify what type of fun you want. So right now we're asserting it by trending popular and so on. And you've got a lot of options here to kind of sort through and really find that fought that eyes gonna make your website stand eight eso the a lot of different options here on making those selections. Eso maybe will take something that really is going to stand out. Maybe we're going to do it as selecting the font as this written fought. So it's gonna make the biggest difference. So when we click it, we get this font family selected, and now we can embedded into our website so we can either bring it in, as we do with a style sheet and bring it into our Web project and then utilize it within our CSS. But the better way to bring it in is actually to import it directly into the style because we've got a linked style sheet. And this is useful if we're linking to the style sheet from other Web pages than we can link across multiple multiple style sheets. So I'm going to just open that preview over there. And as soon as I put in the default thought family, we see that right away we get this thought brought in to our website. That's how we set our font family by default. And I think that this isn't 100% where it is 100% s Oh, there we go. So that so we could bring in the front. And of course, if this Pont isn't exactly what we're looking for, we can pick another one really easily and make an update. Eso maybe that one. It's not coming out as clear as we wanted to. So I can select this fought family, and I can see some more details on it as well when I click it and I could actually access it. So select this font. So now I've got that font family selected, and we can actually bring in both font families as well. So doing that import. So maybe what I'm gonna do is I'm gonna import both of them and I can utilize it in different places. So I kind of like the way that this looks for the not or for the section head area. So maybe I'll leave it at that. But then for the rest of the website, maybe I just going to use this regular default fart within the body in the HTML. So let's take a look at this and see how that turns out. So that actually looks quite a bit better. It's a lot more readable and we see how our font is being presented. So that's really nice. And that's got a really nice effect to our website. So one of the other things too, is that I use the lake to set is I like to set the actual the hyperlinks s. So this is something that usually we set by default within the website. So I'm going to just update the text decker, the text decoration, and by default, I'm gonna have it as none. And then whenever we hover over the hyperlinks, then I can add that in two text decoration and I can add it into underlying. So if I want it on Lee to show up whenever we hover over it, then we can do it within this type of effect. Let's see how this works out. So now whenever we hover over it, we get this nice effect, Teoh our hyperlinks and this is a more modern styling toe hyperlinks than what? But the defaults are within html and we can also add in our colors. And I talked about color schemes before, So this is something that we can add in with the font families. So depending on what type of color scheme were using. We can utilize that. So if we wanted to have dark blue and maybe we wanted or dark blue and a red whenever they get hyped, hovered over, we can see that now we've got a really nice effect. And of course, you need to customize this to your color scheme. Eso. One of the other tweaks that I'm looking at right now is that these images eso they're not responsive. It's not re sizing properly, so I do want to take care of that as well. And so I'm going to just set an image, and I'm going to do Max with of the image and set it to 100%. So what's gonna happen now? Whenever I resize, we see that the image now it re sizes along with the available spacing within that element so we can shrink it down. We can make it larger when it gets over the size. This one is at 6 50 eso. Whenever we're getting over that size, we see that it's just sitting there and it's it's not. It's not taking up or going over the available spacing that's available for our website s 01 of the other things, too. We gotta fix up this navigation menu because it doesn't seem to be really working. Well, it's working on that response, but whenever we're, uh, shrinking it down, we're not actually seeing our icon menu. So that's something else that needs to be fixed up with the knave icon s whenever we're showing it and displaying it, we need to update this to display the nav icon. Let's add that in over here. We're gonna do a display. None. And then we also have to set a fought size so set that fought size, too, to e. M. As a size so display, none on the bigger screen. And then we want to display it as a block on the smaller screen. And when we apply the javascript that not so we're going to get that functionality where we're updating the menu on different sizes. So for now, when we're working on this menu, let's let's get rid of this display none. And we're gonna style an update. Our menu toe actually show up because we need to resize it whenever it shrinks down that it's gonna take up that full space, it's gonna go horizontal and eso it could be, Ah, horizontal drop down menus. So I'm gonna show you how to do that in the upcoming lesson, and we're gonna have to remove out some of the styling that we've done on the larger screens. So that's coming up in the next lesson. 15. 15 Navbar for small screens: So this lesson. I want to tweak and finalize this menu and just update it and see how it's working in preparation for our not for our javascript addition. So one of the things that I did notice is that not now icon isn't showing up properly. So the problem here is I'm not sure if you could spot the problem, but originally I had called it Now icon and have set some properties over there. So one important thing to remember is, when you are creating these styling and you're using the media query, make sure that you're defining those properties within that same format. So now we've got the knave icon, and this should work better. Eso Now, when I refresh it, let's just check it out and see if our icon shows up, which it does so exactly what we need toe happen. So one of the things now we need to do is we need to style and set up our menu here to drop down to the right or to the right and be full with. So let's take a look at the list items for the naff and update those now. So we're gonna do menu now list items, and we're actually going to do the UL. So the UN ordered list list items, and we're going to get a width of 100% that's available. So let's see what what that does when we refresh it. So now we've got the menu set up exactly the way that we want it, and we can also have an option to center the text if we want. Sometimes this is a good idea to center that text for the knave icon. Maybe we need to pull that over to the right to float it over to the right as well, so we can add that in Esso float, right? So we're just refresh that. So that's still sewing up within that same spot. So whenever we're re sizing, we see that we get this, the icon showing up there, and maybe we can even make it disappear. If we want eso, we see that the links are still the same thing, so it's still going to the same pages, and this is exactly the way that we want the Web site to perform, so just gonna refresh it, So to get rid of that Uh oh. Pay city right over. It s so what we ultimately know what we want to do is we want whenever one of these links gets clicked, we want it to actually close that menu off and so on. So there's a number of things that we want toe happen now within our website whenever we're responsive. And, of course, if we like it this way, if we like our menu like this, we can leave it like this. We can even get rid of that icons. We don't even need to have a clickable icon that opens and closes the menu, and so on, a lot of options at this point that are being presented to us. But when we bring in that J query, it's going to really make some nice effects within the way the websites being treated. So I think that you're probably gonna want to keep all of this stuff in. And another thing that we're just looking at now is that we need to style the portfolio as well to present this in a better fashion. Maybe we can get them to take up a full square or something like that and add padding around those. So it's another thing that we need to update and tweak eso. We're gonna be going into that in the next lesson and updating that. 16. 16 Adding Footer and updating sections: this lesson. I want to update the portfolio and how that content gets presented. So we only want these effects to take place under the portfolio. We might want to use them somewhere else. It's a number of options there we could add in classes. But for now, what we're gonna do is where he's gonna select accordingly to the portfolio. So we've got our portfolio there, and here is where we can set some additional styling to that element. So portfolio and I want to apply this to the UN ordered list and the list items under the portfolio element. And what I want to do is I want to display them in line. So we're gonna rewrite that. So display in line. So see if what difference that makes so that already right away presents it. Much better s. So we can also even add in some padding as well. So I'm going to do adding in some potting eso to present the UN ordered list a little bit better as well. So maybe we need some padding and some margins and so on. So let's just add in padding of 10 picks and I'm going to do list style type just to make sure that we're getting rid of that there is going to set it to none, even though those aren't visible anymore. And we can also update the portfolio. The list items so each and every list items weekend update those so we can add some padding around them. So see what this looks like now. So it's added a little bit of padding. There s a breaking out those elements and we can also set eyes margins on top margins on the bottom. Sometimes you might have some text here as well, so I can add in some text there. Maybe we can make this as a paragraph or something so that we have some kind of information they're about. So typically, I guess the image would be on top. Let's see how this works out. So now we've got that same effect. But we lost our in line styling because we've got the padding there, and now we've got the list item text. So if we refresh this than we were still listing it out and if you actually like it this way, then you can keep it this way. Eso you don't generally need toe update it. But let's bring back our potting to it. And I'm gonna also adjust the size of the list items. So maybe we could even do it at 70%. And we could make some adjustments as well. Probably the best thing to do is actually to add in a border there so we can see what we're working with. So this will give us a better indication of where our borders are. We see we've got a width, we've got height. So maybe we even want to set some default heights so that they are taking up a certain container size and I still need to change this to in line block. So I changed it in blind block here. We can see that now. There's a difference in that s So we are taking up patting here. If I do want to make patting zero, I can update those. So I'm not sure why have that when I can actually remove that one on weaken? Set it, Teoh. 45% if we want, and we can see how this displays out. I think if we go 50 we should be the okay for this one as well because we've removed at the padding. So sometimes it is a little bit tricky with working with the padding to get all of those percentages, right, Because it's got some built in padding there. So you can see if we go to 48th and we're pretty good with that. Our default heights, maybe an issue as well. So that's something that we might want to just as well. So maybe we want only stick with a 200 or a minimum height of 200 about that. So update that so no matter what, it would be a minimum of 200 eso, no matter how much we resize it. And then another thing here is that maybe when we do resize it, we want to update the withs s so we can go down to our media query here and update those wits to be 100%. And we don't need any of the rest of this stuff here and we'll see how this turns out. So now when we re size, we're taking up those full withs eso a lot of different options. It depends on how you want to present your content and your portfolio. So this is just a quick fix for that annex. I do want to get rid of that border because I don't like the way those borders of being displayed so quickly going to get rid of those and remove the lizard. Of course, we could make it a grayscale, a swell or you could do it dotted. But either way, s O, this is our portfolio now, So that's content is being presented a little bit better. We can also add in Ah, footer here a the bottom. So this is something that we can add in underneath the section and keeping it within that Div. Thanks for visiting. So usually have a copy, right and stuff like that within, not footer s. So let's take a look at that now. So the copyright there is at the bottom. Now we need to add in some styling for the footer s so we can go in here and update that footer and again, just like the header. If we're reusing Hatters were using footer elements were using those tags. We should give them ideas to identify them. But I'm not gonna be reusing the foot or anywhere. So I'm just gonna set it as the footer and color and give it maybe a black color. So it really stands out. Fought can be white text align. So usually they're going to be centered on band to see how that's gonna look. We should also set height for it. So this can be, ah, height of 200 pics because we do want to take up some real estate eso thanks for visiting copyright and blah, blah, blah whatever content we want to put in there. So we can also probably better off to do it as paragraphs as well. And I just got a copy and paste paragraphs in here. So there we go. So now we've got our footer set up. We've got all of our content set up and we're ready to go and add in RG query. And this is what's going to make the really mace cool parallax effects and not moving effect. And what parallax is is It's essentially when the images are moving at different, different, different times, so they're not actually tied to each other on this is where you get this effect where maybe you have an image and you're scrolling down. But then this image I's gonna go static eso It's not going to scroll anymore when it hits the top and so on. So that way, whenever you're scrolling down, these images will have a really nice effect in the background. So I'm gonna show you how to do all of that in the upcoming lesson. 17. 18 Adding jQuery create event triggers: So now the part of the course that you've all been waiting for, and this is when we add ghee. Query. So G Query is a JavaScript library, and it essentially it makes adding JavaScript and doing common JavaScript functionality a lot easier. And this is the mean thing for J. Query is because main reason that people use it is because it's really easy. It's intuitive, and it just makes sense. And if you're familiar with CSS than Jake Worry and adding G query actions is very similar to CSS because you're calling the elements in your HTML page with in a similar fashion and in orderto odd J quarry. So Jake worry is a JavaScript library, so it's just a Js file, and you can either download it, link it to your website locally, where within your own domain, or you could use the Web Cdn. So I'm going over to hosted libraries from Google, and they give us a new option here to copy out the G query, library, source files and location files, and we can simply link to this online version of J Query. And, of course, if you're developing locally and if you don't have an Internet connection than you need to download Jake or in order to get it working on your website and be able to tested eight. So it's a simple as copying this, pasting it in and you're ready to go and ready to add ghee, query and J query functionality into your website. Now every website, every Web browser understands JavaScript, and that's why you don't really need to load anything. Additionally, into your application, you don't need to compile anything. It's all there ready to go. And Jake worry is just a way to simplify adding JavaScript into your website. And for those of you that are familiar with Jack JavaScript, you're gonna understand all of that potential that is available within J Query and J. Query is it's just a simpler way of adding JavaScript, and you can do all of the same functionality in javascript as well. So it's not necessary that you can do you that you can't do it in job JavaScript, but it takes a little bit more effort. Uh, and we don't want a base too much of this course around JavaScript, and that's why we're gonna bring geek Worry and s O. This is the latest men ified version of G quarry, so M I n is a min ified version. Men ified Immersion essentially means that if you go to this Web page, it's gonna be without any spaces. So if I go over here to the website, we see this is the J Query Library, so it's compressed and it's ready to load quickly into your Web page. So in order to add JavaScript, we use the script tags. So script opening and closing and then between. Here's where we add in our JavaScript or RJ query. Now, in order to access Geico, R E J Corey functions off of the dawn. And this is the document object model, which essentially means that this loads up whenever your website whenever your Web code loads into the browser. And this is what's called the document. This is something that is rendered out and created by the browser, and J. Query and JavaScript have access to all of the elements within the Web page. By accessing the document object, it's a document ready just essentially means that whenever the browser has finished loading the website content and the document is ready to go. Then we can fire off and start taking action with RJ Query. That's all this statement means here. So one of the things that we want to do with the navigation icon is we want to make it clickable eso. Right now we have our navigation icon and whenever we shrink it down, well, it's not clickable and eso In order to make it clickable, we can do it with JavaScript and J. Corey, and I'm gonna make a clickable via G query. And because J. Crew is just so simple to make actions and events, hot trigger events, I just need to select the class, go down into my script file, and we start everything off with the dollar. Sign there to indicate that this is an element that we're grabbing the same way that we distinguish between classes and I ds is the same thing we can do in Jake worries. We do adopt for a class ah hash for, uh, I'd element and also weaken indicate the taggers well and so the functionality that we wanted toe odd. We want to add an event listener, which is a click. Essentially it Boynes the event handler click the JavaScript element to the elements whenever it gets clicked, then it's gonna fire off and run this function. So functions are self contained Pieces of code in javascript eso we don't need toe create a separate function. We can just run that function within that click event s. So this is something that we can do if wanted to. We could simply just simplify this click functionality. So now what's gonna happen? Every time that gets clicked, we're going to run and initiate this function. So what do we want this function to do? So we want to actually run a built in function in J. Corey. And this is what I meant by when Jaqui makes things easy that we want to just simply toggle that entire navigation bar. So let's go back up to our navigation bar and maybe even give it a class so that we can easily identify it in Jake work. And this was just to simplify things. So just give it a class of knave and then so we can identify that particular element when we want to utilize it in the code. So everything is already built in and set in the dawn. So whenever that loads, we have access to the knave. In the same way that we've added that click functionality we're gonna add in a built in function called slide toggle, and this will display or hide the matching elements, depending on where it's positioned. Let's take a look at this now and see what happens. So now when I click it, we see that we've got this menu opening and closing. And so this is gonna be really useful functionality because this is our click menu. The only problem here is that whenever I size at larger, it's actually disappearing. So this is definitely a problem here that we need to update as well, and we can update this eso. Normally you wouldn't be re sizing your browser window, so this typically doesn't activate as a problem. But we also want to make sure that we're not hiding it the menu at any time. So we don't want toe end up in a situation where someone inadvertently clicks that and then resize, and then they have no menu. Eso This is something we're gonna look at in the upcoming lesson, how to deal with that and how to up date that 18. 19 jQuery binding window events: in the last lesson. We showed you how we can make a click event a trigger there. But we did find that there was a problem when we're re sizing. So we click this icon, our menu disappears and we try to go to a larger screen. Then our menu is still gone. But luckily, J. Cory has a solution for that and these same way that we did this, where we selected the element. We can also listen for window events and windows are so it's different than the document because Windows is that browser window and we can listen and bind somethingto happen when a certain window event happens. Whenever the user resize is their browser, we can do the same thing over here that we did and we can fire off a function. So whenever they re size it, we can create a function, and this function is gonna be another one of these self contained ones. So whenever the person resize is the window, we can run through this function, and this is where we can check to see if this now icon is hidden so we can do a conditional statement, essentially a conditional statement is. If this is true, then do this. And if it's not, then do that. So novel icon. So we know that we have a value for it. We have a CSS value for it and we can look for the display property so we can essentially see if this is true or false. Or if we can see that the value of the display property what its value that So we're going to check to see if its value that none. And if it is, then we're gonna do some type of action. And the action right now is gonna be toe actually show so another built in J coury function and I didn't see it makes it a lot easier. So it's got these built in functions to hide and show elements. So I have to do is do the show and the curly brackets. So let's check this out now and see how this works so we can resize and remember, now we've got it hidden. But see, when I'm re sizing, it's actually checking to see if it's hidden. And if it is, then it actually toggles the view off that knave that now element and re shows it. So now we see that we've got this really nice interesting effect where it doesn't matter what state were at. Whenever we re size, it closes up that menu and we can utilize this a swell whenever any of these get clicked that we want to hide the menu as well. So it's something that we want to do and we want to implement as well. So let's take a look at this, and we can check to see what the status of this is as well and hide and show as needed. So all of this is coming up in the next lesson. And also, I'm going to get rid of this word icon, and I'm gonna actually replace it with a more more visible type menu icon. So that's all coming up in the next set of lessons. 19. 20 Adding icon library: in this lesson, I wanted to add in an actual icon, Stover it writing icon. I wanted to actually display a certain icon, and this is where I'm going to use the font. Awesome library. So this gives me the ability, just like I did with the Google fonts to bring in a CSS library and get access to all of the goodies available within the CSS library. And there's quite a lot of them available within front. Awesome. And essentially, what it does is it really just makes you gives you the option to access and and be able to access all of these icons so it gives you access to 634 different icons. Eso We've got examples of the icons here, and we can essentially just simply click it and we can see the way to bring that in. So the one that I'm looking for is gonna be a menu icon. So see if it's called that or maybe it's maybe it's just called bars s. So this is the one that we're actually looking for. So you probably recognize this that this is that the standard icon used for Menu Bar so all I need to do is grab that code. Now that I've got to find possum, I have access to all of these icons eso this, saving that and going back into my Web page. Then when I refresh it, we see that now we've got a standard menu icon, and I see it's still over a little bit to you, the right hand side. So I do want to take care of that, and I want to give it a little bit of a margin there on the right hand side. So I'm going to give a margin right and give it a 10 picks. So just to bring that over so that it's not hanging right at the site there, we might even want to bring it over even, maybe 15 just so that it's not hang and right over to the site. So see, that works really nicely. Whenever we resize the menu, we've got a regular navigation menu back and we see that everything is working nascent properly. Eso now we can add in some G Koury effects. We can add in that an immediate effect where the automatically scrolls to the page and this is all done in G query, and this is all coming up in the next lesson. 20. 21 Animate Scrolling with jQuery: this is gonna be the lesson that you've all been waiting for. And this is the lesson where I'm actually gonna animate the Web project. And I'm gonna show you how easily and how really nice and cool effects that you can add just by adding this a few lines of G query. So just like what we did before, where we we're working on that menu icon, and whenever we click it, we can listen for those click events. We're going to do the same thing over here where we're gonna listen for any cliques within that menu so we can identify it much like we do with any other with CSS, where we can identify different elements on her Web page so I can identify it by now because I've given it the class of now list item and any anchor text that gets clicked. Then I want to run this function and the same thing that we did up here we're going to do down here and now when you sneak to give it a set of instructions of what we actually want to do, and one of the things that I do want to do is I want to prevent the default because whenever we have a default anchor, that means that by default it's gonna move the website down. So let's just see what this does. So now when I click it, we actually don't see anything happening whenever I click those pages. And this is because I've prevented the default. The default action is that automatically scrolls down to that page. So now that we've removed that action, we need to add that back in. So let's take a look at the target, the intended target that we set up within the typical action. And we want to pull out where we want what paid what part of the website will actually want to scroll to. So this is important and this is something that we do need to pick up. So maybe we can get Section I D or something like that. And the good thing about G Query and the Dawn is all this information is contained within this click. So whenever anybody clicks it, we actually get event information so I can output that there, and I can actually show you what's contained within here as well. And so we want to get the attribute h ref and get that value and place it into section I D . And I'm gonna console log out this information s so that we can take a better look at it. So this is called Section I D Console Log is a built in function in javascript. It allows us to communicate back and forth from the browser from the code to the browser. And also, maybe I can console, log or Consul directory out that event information. And this is something that we can get and we can see whenever we're looking at the dawn. So let's go over to our Web site and refresh the page, and I'll just show you where the consul information is gonna show up. So just like what we were looking at earlier with chrome. So we've got this ability where we've got this pop up box here and you can actually toggle where showing up a swell so doesn't necessarily need to show up there. We can put it on the right side of the screen, so maybe that's a better place for it. So now whenever I click, we see that we're actually picking up the location, the target where we wanted to go to. And we've got this an event eso the an event Essentially is that event object And you can use any one of these variables within your Jake worry formula. Eso We've got our target there and we've got our location here. So when we indicate that we want to pick up the attribute of the event, we can pick that information up from our click event. We also know where the page where the mouse is located and there's a whole bunch of really useful information here. So we can actually utilize any any piece of this information that we want and we see there we've got the h rough there, we've got the inner text. So we know what's what inner text is there and just really everything we've got about outer html and pretty much anything that we want. We've got information on it. So now that we see that whenever we're clicking, we're getting that i d. And this is essentially what we're passing. We need to calculate how much off how much the difference is how far it is off the top of the Web page and we can do this again using offset property of the target. And we see here within all of this information we can pick up on offset. So we know that the offset essentially is, uh, no America pixel value of where it's located on the positioning of that particular element that we're looking for So we can pick that off and it's not actually listed here because this is only it within that event, and we're picking up that information, and now we're gonna look back into the dom and can't make that calculation. So let's calculate that offset. Maybe I'll just call it from top. So that makes a little bit more sense there. And this is where we do our calculation, or J. Corey does their calculation for us where we're gonna pick this particular element. So whatever that target, So whatever value section ideas there, then we just need to calculate that offset and what it is off the top. So just to show you so I'm gonna get rid of that and refresh the page and show you what our output is. So we know where that section is located from the top. So that's how many pixels. It is sitting off the top. We see the about section is well, home is the first than about then services, portfolio and contact. So there's roughly about 1000 or 1100 difference or 1089 difference or 1081. So depending on how you're looking at it, So this is what the difference is. And this is what we can use now to actually animate our scroll and let G query move our scroll bar for us. And this is another. This is the cool effect that we've all been waiting for within this project. So here we go. So now we need to identify that elements within our HTML. So we're going to just identify HTML and body, so just like we would with CSS and we're gonna use the built in function within Jake Worry Enemy. So performs a custom animation set of CSS Properties, which is gonna add and mathematically calculate how to make this scrolling work. We're going to use the option of scrolled talk, and so this is the command that we're going to use. And then here we just need to pipe put that value in. So we could also put a numeric value. But because we're calculating it up here, this is the fact that we want toe happen. And then we have another option built in within this function is we can set it to specify how many milliseconds this animation is gonna take. So now, 1000 milliseconds. So that's one second that this animation is gonna take. So let's check this out now so you see that it's automatically scrolling. We've got our scroll happening again, and it's just a really nice, neat effect that we've added on our website. So no longer is that automatically clicking to that particular part of single page website . It's scrolling to it. And this is much more appealing to users when they see this scroll happenings a really nice , really nice cool effect. So in the next lesson, we've got some still some updates to make because one of the things here is that we're not closing off this menu, so we need to slide the menu up whenever it gets clicked. So we need to take care of that as well. So that's coming up in the next lesson. 21. 22 Slidemenu up jQuery: this lesson. I want to update that menu. So when we toggle the different devices, we see that we've got this menu. Now it's open, we scroll. But ideally, this menu should actually toggle and close up whenever we're doing our animation. So this is again this is gonna be added in here Within this click function, I can get rid of this consul stuff as well, so we don't need it. Really need to be looking at that right now. And let's add this in where we're gonna close up our menu bar if it's opened, if it's some if it's not being displayed or it's being displayed as a bloc s so we can close that up and will slide that up. So this is where we use conditions. So we're gonna do a check to see if our Daph icon, if the CSS is, has a value of display. And if it does just like up above where we're gonna check to see if it's a block, actually, and if it is, then we're going to fire off this function, and what we're gonna do is instead of slide, toggle so essentially a pretty much the same function that we're using up there. We're just gonna slide it up because we don't have to worry about toddling. We don't want to slide it down and so on. So let's take a look at this. I gotta refresh that page. So now whenever we click out So something's not firing off well, and I can look in our console there. So we do have a problem there with the knob icon. So there is something problem there, and it looks like I missed the period there, and this is another use for console. So it's kind of good that that issue came up, that error came up because it gives you a better idea of how we can utilize that Consul. So now, whenever we have the menu open and we click something, we see that now it closes. We do that whole scrolling effect, so really need really nice functionality. So we still aren't done yet with this website. Even though everything looks pretty good, everything's functioning. I still want to add in that parallax effect that have been promising you throughout the course. Eso We're gonna take care of this in the upcoming lesson and we're gonna use J. Corey for this. And the way that this is gonna work is it's gonna check to see where we're off set from the top from that school, and we're gonna add a class in and remove a class, depending on the position of the scroll er and the position of the particular section we're looking at. So essentially, we're going to make it stick, and we're gonna make thes images no longer. We're gonna let the rest of the contents scroll, but we're gonna hold the images in place as we're scrolling up, and that's gonna add a really nice effect. So that's coming up in the next lesson. 22. 23 Add Parallax effect: in this lesson, we're gonna update and create a parallax effect within the website. So one of the things that I did notice is that whenever we click here, whenever we come into the page and we're on small than the menu is already open. So we don't actually want that. And this is something that when I'm looking at this cord, we had actually commented that out before so that we could work on that navigation menu, so that should fix that problem there. So now whenever I come into the web page, the menu is closed on the small screen and everything works just as we wanted to when we got the scrolling effect taking place. And we also need to add in a contact form as well. So I'm gonna do that in the upcoming lesson. So for now, what I wanted to do is update the website and have I want to update the website and include our parallax effect. So, in order to do this, I want to swap. I'm gonna use J query, but I'm also going to swap out, and I'm gonna create a class here, fixed point or fixed point and for this particular class. So anything that has this class is gonna have a background and background attachment is gonna be in a fixed position and with geek worry, I'm gonna update that. And I did not fixed point and remove it as where, as we're scrolling through. So whenever we're scrolling, I want to fire off another event and my J query. So I'm gonna just do this down here and we're going to use that window object again. So whenever a scroll, that's whatever the window scroll is happening. So we're binding it to that event, so we bound it to resize. Now we're just finding it to scroll Whenever scroll takes place, I want to fire off a function, and then this function is gonna add in that section and update that class. So first of all, we need to take a look through all the different sections. And what I want to do is, while we're scrolling, I want to set that property to add a class if depending on where the scroll position is, so let's update this and select A with all of the different sections that we have. So we're going to select the sections, and we're gonna loop through each and every one of them and run through the different functions. So this it's probably getting fairly complex here on the J. Crace. I'm trying to keep it. A simple ast's possible eso again. We're going to do that calculation that we did over here, where we offset from the top. But because we're looping through the different sections, we can get that information. So we're just gonna use this again, and we're going to get it from top. So this is another variable, and I'll show you what the value from talk is while we're scrolling. So just to also to make sure that it is actually firing off. So let's refresh the page. Take a look at our console and we're going to see as we're scrolling, we're finding out where we're doing a quick search, and we're seeing where every section is positioned. And now we can use these calculations and determine where the scroll bar is and on what image we're looking at and make a quick condition to see if our scrolled. If our squirrel position is on that image, then we can apply that otherwise will remove it. So this is gonna be a really interesting effect, and it's probably a lot easier just to do it and show you the results on its explaining. It is getting fairly complex. So I'm just gonna do conditional statement here. We're going to check to see the window. Remember? With the window object is we can see where our scroll position is, so you can see where scroll why and squirrel y returns the number of pixels that the document has already scrolled vertically. So we're gonna know what how many pixels we've already scrolled. And we're going to do a quick condition to see if the scroll position is how much. It is different from the one from the taut. And I gotta add in the size of the menu bar as well. So we gotta take that into consideration. And if it matches this condition, then we're going to select this and we're gonna add in a class to it. So the class that we're adding in is going to be that brain you one that we just created. So that was fixed point. So we're adding in the class of fixed point, and if it doesn't match that scroll position, then we're going to remove that class. So this is just going to ensure that we're only applying the class to the section that is appearing within that school area. So in summary, we're applying it at certain points, depending on where we're scrolling. And now we can see that we've got this parallax effect that the images air actually moving at different points. So if we had a number of different images, we can see that a some points they go static and then at other points, they actually mobilize and move. And this is that parallax effect that we were looking for s a number of different options. Here is well that you can utilize within your website eso you can really play around with this and get some really nice cool effects with It s so we're just toggle that off and we can see that same thing is happening now on the larger screen where we're getting that complete parallax effect within the website. So the next lesson we're gonna finish off what we were looking at with the with the contact section. So I'll just do a quick contact form on ADOT in s. I'm not gonna link it to any back in, but just so we got the formatting for the contact form and take care of any other tweaks and odds and ends that need to be done in order to complete this website project. 23. 24 Create a Contact Form: in this lesson. I want to play a quick update to the website. So I noticed that whenever we're on a smaller screen, so if I toggle the device size and we go down to portfolios so I'm gonna go down through the menu bar, we see that part of our portfolio content is being cut off. So we don't want that to happen. And this is something that we need to update in our source code. So never it's on a smaller screen. It appears to cut off. Sometimes images show up, so we want toe. Make this automatically adjust eso. This is available within that section. So I've already got that min height set to 800 picks. But better yet to set the min height to 100 view height. So this will ensure that we always have 100% available height and whenever we re size, then the size of the containers resize isas Well, eso. Now we're able to see all of that content that's contained within that portfolio. Eso just with that fixed there. So let's jump back into our HTML and make some updates to our HTML code, adding in that contact form. So open up. Our editors go over to our HTML. So we're not gonna be looking at the JavaScript right now. We're just looking at HTML. So what I wanted to do is I want to add in a contact form, so I'm gonna do it in a paragraph here and for a form. So we've got our typical form there, and we've got I gotta just use dibs to separate out all of the form fields. So maybe I can even give it a class of role or something like that so that I can distinguish between them adding labels for each and every field s We need to indicate for what field? This is going to be four. So I'm gonna create a field called name and then within here. I'm just gonna ask for the name close off the label and then here going to do an input. Eso the i d is gonna be name the name of it is gonna be name, and the type is going to be a text field. Now we can even do something like a police holder as well and type in name, of course, in there. So that is our basic format for each each piece of our form eso the next one is email. So typically you gonna ask for name, email, mess, email, address. So all of these we need to update Teoh email And here, instead of type text, we're gonna do tight email. So html five will take care of checking to make sure that that's an actual email address. And then lastly, let's add in one more, and this one can be the message, so we'll just do message and tape in message instead of an input. So I'm gonna make this one a text area, and I'm gonna given an I d of message, just whatever makes sense here. Name of message type we don't have to worry about. But we do need to specify within the text area how many rows we want it. So some styling there's weaken. Spect specify the rose. We can also specify the columns. So how many columns? So how wide it's gonna be so maybe 2 50 and then close off text area and brackets added in an extra one in there for me. So I'm just gonna fix that on and then lastly, let's add in one more row because we need a submission buttons. So we're just class and maybe you could do roll again and then in here we're just gonna add in a button so we can do type buttons. Well, tape equals submit. So this is gonna be a submit button and send your message. Let's take a look and see how this looks in our website. So going down to contact So there's our contact form looks OK, not ideal. So let's make some updates to that and style it a little bit better. So let's, uh I gotta open up a new window. Here s so you can take a better look and see what it's gonna look like as we're adding styling. So everything happens and all the magic happens within our styling. So what I want to do is I want to add my styling here up at the top eso where we would have all of our body content. So I want to add in the styling for all of our forms within our website toe Look the same. So any forms are gonna take these properties, I'm going to give it a margin off zero and auto so that we center that form automatically. So that adds in some nice properties. Maybe we want to do a max with because we don't want it to be going too wide. So maybe Max weeks of 600 we're gonna add in some padding eso How about one AM patting and maybe even add in a border so that we can see, see where the mess where the form is solid and do it'll really late border just like that? So let's take a look at see how it looks now, So it looks a little bit better. We still need to worry about how the labels and so on. So let's take a look at that. Maybe we even want to make around it. So Border radius. So just like we did with the outside forms, we're going to make it one. So now we've got this nice, rounded border around our forms, a nice, neat, interesting effect to the form eso. Now we've noticed that all the labels air kind of out of whack there. So let's take care of labels within our website, and this is going to go propagate across all of them display and we're gonna display it as a block spelled display wrong there. So display as block. So see if that s the right away. This makes it much better formatted form. Maybe we want to do it with of 100%. Just to ensure that we're taking up that full space text, we want to maybe aligned the text so text align to left, align it. Uh, we can set our margins as well if we want. Maybe we just leave it at dot right now, so it looks much better. We can also style the input areas. So if you want the input and the text area to be the same So generally this is the way that we do it where we start them both the same and we apply all of the properties there. So this is where we can set a width so maybe would do 60% with on them. So see what this looks like. So now they're all the same with we want, want to center them. We might want to give a margin eso all depending on what he wanted to look like. We can do a border as well, so that we can really bring out that border and touch some kind of border color. So let's three sevens and see what that looks like. So I'm not sure what that s Oh, that's looking a little bit better there. Um, we can also set the foot size. So the font size that's going to be there when you enter in text in there. So whatever that fought sizes notice that. So I do have some extra spacing there that I need to get rid of. Definitely got to get rid of S O. That was one of the problems there when we when brackets added in that extra formatting there and we can also another really cool one toe add into forms is an input. And whenever we focus on the input and that's to text area, focus. So whenever we're selecting a particular element, we can update the border color. So let's do border or we just gonna set the property of the border color. So if we want to make it red or something like that, so that we know that we've selected it, let's take a look at that now. So whenever we're selecting it. We see that the colors changing whenever we focus on it. And so that's it. There's a lot of things you can do with your forms, but essentially this matches all of our needs. So we've got our fully developed, single page responsive website, all fully functional with G Query and JavaScript. We've got this parallax effect to the images. Whenever we're scrolling up, we see that. And if we actually had some backgrounds and these other sections, we'd see some really nice effects there as well as we're scrolling up. And we're kind of stacking all of the images. It kind of looks like we're stacking them one on top of other as we're scrolling up. 24. 25 Single Page Parallax site summary: Now that we've completed our website project, it's always a good idea to check through your website and make sure everything is functioning the way that you intended it to function. We can also go back to our original design and just to make sure that it actually looks the way that we wanted it to look when we designed the website. Essentially, there wasn't really much to the design work of this because all of the really nice stuff that happens is handled by G. Query. The only thing that we're really looking at here within the design is thumb when you and how we're laying up menu. And this is typical for any modern website where we've got these menus and we re size them and it presents differently on different sized screens. So fully functional menu here opens and closes, and so on. Eso we've got our contact form are about me section our product portfolio section and you can really customize any one of these sections to suit your needs. Update the images as required. You can even play around with that parallax effect, applying it to different sections and just seeing all the really neat things that you can make happen within J using J. Corey, HTML and CSS. Together, all of the source code is going to be provided within the course as well as the resources that I have used to create this Web template. You can take the source code and create your own version of this Web template on and really utilize it to see what you could build out from from the basics that we've gone over with in this course and applying your own styling and your own CSS. It's actually really interesting to see the amazing changes that you can do with just a little bit of cold with a little bit of CSS and then applying like J. Coury and JavaScript all amazing functionality. You can add in so many things you can remove out and update as needed. So to really get the effect and the look and feel that you want for your website and the main thing to take away from this course and this settle essence is that there's different ways of designing websites and we've shown you how you can essentially design a full website from scratch and single page modern website already to go. And I just noticed here that we do have a issue here with the content s O. That was because I had resized and refresh that. So it's not hanging over. But that is something as well that when you're checking over your website, just make sure everything is functioning properly. And if you do have any overflowing text, you can always hide that overflowing text. You can set those maximum width and so on and make updates as needed. So that was only something that was lagging from the browser. So it's not always happening. Eso Those are just different things to take a look in eyeball what's happening with your website as you work through it. So I do encourage you to take away what you've learned within the last set of lessons. Try it out for yourself, practice it and see what you could make happen using HTML, CSS and Jake were