 Hello everyone, and in this course I'll be showing you how to create a website using NuxJS. And NuxJS is a VueJS framework that builds static websites using VueJS. So basically what Nux does is it creates the static files of your website, so then search engines are able to see all of the content of your website. So regularly this would be loaded in from a server and then it would be loaded in onto the client. So this search bot wouldn't actually wait long enough for the content to be loaded. They would just look at the plain HTML. The most websites they don't have server side rendering, which is what NuxJS does. So they aren't actually placed high in the search ranking because the search bots can't actually see their content. Well with NuxJS it just generates it so then all the search bots can see all of your content. So since it's plain HTML the websites are easily able to see your website so then it loads in very fast. Some of the websites that were made using NuxJS is Fox News and Upwork. And this is just basically a freelance website. So if you like this is the website that we made during this that we're going to make in this course. So you can see I have page transitions using the router it actually changes the URL but you aren't able to see because there isn't like a flash with the CSS loading in. And you can see we have transitions and if we reload the page you can see that we should have a scroll bar when we refresh the page. So I hope you guys continue this course on how to create websites using NuxJS. Hello guys and in this lecture I'll be showing you how to install NuxJS which is the VueJS framework that we're going to be using to create our website. So now what we have to do is go to the guide and we have to start our NuxJS project. So before we can start it we need to have NodeJS installed so then we can use NPM which is just a Node package manager. So we just go to NodeJS.org and then we should be installing the LTS version which is the most stable build. So once you have NodeJS installed you must make sure that you have a later version than 5.2.0 of NPM. So to do that we can just go in here and then we can do NPM as such version and this is in your terminal or command prompt. And we can see right here I have 6.13.1 so if you don't have a later version then you have to update that. So now what we have to do is create our Nux app. So to do that I'm going to use npx and we can just copy this code right here and put that into our terminal. So we're going to do npx create Nux-app and then we're going to name it. So we're just going to do website with NuxJS and then we can just hit enter and it'll create our application. So once this is done we're ready to start navigating through the world of NuxJS. Okay so now that this is done loading we just have to answer a couple of questions. And so we're just going to do the default project name. We'll just do the default project description and then name of author. I'm just going to put it my name and then we're going to use NPM. And we aren't going to use any UI frameworks. No custom server frameworks. None of this. None of this. And no test frameworks. And we're going to you need to use the universal app not single page. These universal generates a static website which you can use for shared hosting. So you don't have to pay for really expensive hosting because it generates static code for you. We're just going to hit enter on universal and then we can just skip this. So once this is done you can continue to the next lecture. So now that we understand NuxJS's directory structure we're just going to actually start running our development server. So then it'll automatically reload our website every time we save. So to do that we can look at our command in the package.json. We can see that dev for development. All we have to do is NPM run. And then you can run any of these but we're going to just be running the development command. Which should start our server. And make sure you're in the directory of your project. So it should have all of these files in it. And then we can just click on this link and copy it. Or you can click on it and then we'll just paste it into the browser. I can just close these tabs. And you can see this is just the boilerplate loaded in for NuxJS. You can have a link to the documentation and the GitHub. So now we're just going to completely rip up everything that the boilerplate has because we just want to start from scratch. So we're just going to get rid of all of this inside of the index page. And the index page is just at the root of the website. So I can just put in index page. We'll just leave that class of container. OK. And we don't want any of this default styling. Let's just exit off of that. And we are going to be using any components right now. But we might be using it later. So actually, we should probably just comment that out. I can just log out. OK. So now we are just going to put in some code for index page. So we are going to have a header. And then we're just going to open that up. And then we're going to have a, we're just going to have an h3. And then we'll have that logo class on it. And then we're just going to put it next website. And then we'll have a UL or an unordered list. We'll have li. And then we're going to go inside of that li and put an a tag. Well, actually, we want li times 6 or 3. And then we're going to have an a tag inside of that. And right now, we don't have these links. Well, sorry. Actually, this is going to be a nux-link. Because that is what you're supposed to use with nux for your links. So I'm just going to open this up. And then we'll just put in home, about, and contact. Oops, I left that wrong. And then we're going to have a two attribute, which is basically just the href. And then we're going to make that go back to the home directory. So now that we have this done, we should not see this, I guess. Maybe we should actually just add in slash. OK, maybe this. What is our error here? OK, there we go. Now it's working. So we can see nux website, home about contact. And we can just add all the selling for this later. And you can see that we're on the home directory for our website. So now we're just going to add a main tag for the main content of the website. And then we'll just have a heading. And then we're going to say this is a website made using nux.js. And then we'll have that. And then we're going to create a p-tag. We're going to say warm. And then we'll just do like 30. OK, so now we have this index page. So now let's also create our about page. So we're going to do about.view. And then we're also going to create a contact page. And then we're also going to be creating another page and we're just going to donate that view. So now let's just copy all of this code. And we'll just save it all. And then we're just going to add in a different lore. And we're just going to change the heading for the about page. Contact us. And then we'll get rid of this lore right here. And then we're going to have a donate heading. And then for the about page, we're going to have about. And then we're going to get rid of this p-tag. But wait, we copied all of this code when we didn't have a donate page. But now we have to add in this link for it. But then we'd have to copy our code and then replace it again into all of these pages. Now, since we only have four pages, this wouldn't really be that bad. All we'd have to do is have an li. And then knock, stash, link. And then we could just put in here donate to. And then we just have donate. But if we had like a million pages in your Google, this would be terrible because then you would have to edit all of those pages. So then in the next lecture, we're going to be learning how to use partials inside of our layouts to have a header that will automatically be added onto every page. So we can see the website that we made from our previous lecture right here with all this terrible selling in the website looks terrible. So now we're going to be learning how to add in a nav bar into our layout. So before we were just adding this header into every single page, what we can actually do is cut out this header code. And then in our layouts, we can create a new folder and then partials. And inside of here, we can have our header.u. You can just paste it or no, actually, we have to create a template. And then inside of here, we're just going to have our header. We should probably actually change all these links. So home that's right about this is slash about. And then inside of here, we're going to have slash contact. So then what we can do, since this is the default layout, every single page is being inserted into this Nux element right here. So we can just add in our own script tag. And then we're going to have an export default. And then inside of here, we can just go into our previous page and we can see our example of loading in a component. So we're just going to go back into our default. And we can just paste that in there. And then we can uncomment this code. Or we're just going to change that. I can do control D to edit multiple iterations of a certain string. So I'm just going to edit the logo. And then we're going to have header. And this is actually the wrong directory. It should actually just be into the partials element slash header. And then we can just put this header just right above our Nux, which is where our page is being inserted into. So all of this code right here is being inserted into our Nux instead of our layout. So if we actually go into the wait, I have to delete our previous headers instead of our other pages. I'm going to delete all of these and delete these. And that should be all of them deleted. OK, so now we can go into all of our different pages and see all of our content and all of our pages that looks like they work. So now all we are going to do is we are going to learn how to edit the head of our pages so then we can actually have this right here, our heading tag, as the title of our website. So we're going to learn that in the next lecture. Now in this lecture, we're going to be learning how to edit the head of our document so then we can change like the meta info or the title, which is what we're going to be using in this case. So all we have to do is inside of our index page, we're just going to add a comma instead of our export default. Then we're going to have a head. This is a function. And then we're going to open that up. Then we're going to have a return. And this is an object. So the side of here all we have to do is title. And then we're going to have our next website. So then if we go back to our home, we can see the title is Nux website. So we can just copy this code right here and add it into all of our pages. Contact us and donate to us. And finally our above page. And we should be able to go to all of our individual pages. And you can see that the top changes with it. So to have like a link tag, if you wanted to link to a font, like a Google font, you'd probably actually want to do this in the layout. So then you wouldn't have to add that into every single one of our individual pages. So we can just go to our default layout inside of our layouts. And then we can just add a comma after our export default inside of our components. And we can just have our head. And then we're going to have a link. So this is actually made for having multiple link tags. So you're going to have an array. And then we're going to have another one. And then we're going to have, it's going to have the attributes of this link tag that we're generating. So we're going to have a row, style sheet, and then a treff. And then we can just go to font.google.com. And we're just going to load another font. So I think we should probably just use later. So we can just copy this href code website. And it should be automatically loading this into our website. So if I just hit View Page Source, then we should be able to utilize that font inside of here just by going into our HTML right here. And we can just delete all of this. And we can just put it in here later. Hopefully this will work. OK, actually, I don't think this is working right now. So it's using serif. So it's not loading it correctly. So link, row, link of style sheet. We should try to refresh. Oh, wait, we have an error here. Oh, wait, that's way towards the top. We should just try to restart our server. OK, hopefully this works. We have our row, style, sheet, href. That's this. Is there anything inside of the documentation for this? OK, head, meta, return. Oh, we need to have a return function. Sorry. OK, now this should be working. Oh, my gosh. Sorry about that. So we can see that it has all of our fonts loading. So I've been kind of just ignoring this for now. But in the next lecture, we're just going to add in all the CSS for all of our website. And you can just skip that one, because this is kind of supposed to be just a Nuxt.js tutorial, not a CSS tutorial. But so I'll see you guys in the next lecture if you don't really want to do the CSS, just skip it. Hello, so in this lecture, I'm going to be showing you how to add in all of our CSS for our website. So actually, we are going to be using SAS, which is a CSS processor. So to do this, we're in our header component right now, because I'm going to be adding the styling for the header. So I just have to go under our template style slash style. And then we can just go inside of there. And then to add CSS, which is the version of SAS we're going to be using, I can just do lane equals scss. But you wouldn't have to do this if you're just doing regular CSS. Also, we're going to be using the scoped. So that makes sure that all of our CSS only targets elements inside of this individual component or page if you're doing that. So I'm just going to do our header. I guess the scope doesn't really matter, though, since we're doing SAS. I can just add in the elements inside of here. And I'm just going to be using SAS for the variables and the nesting, which basically I can have a header here and then an ally. And it'll compile this into header. And then I'll have the code inside of here, code. And then I'll have header, ally. And then it'll add in the code from here. So it's just nicer to use because you structure it like you're at HTML. So I am going to be using a website called coolers.co. And this just helps you generate color schemes because you just press space and it generates new colors that match the other. So we're going to have a background of this glitter and background. Sorry, actually, we're going to have a blue. I'm going to say blue. This blue, whatever that's called, arrow. So that's a nice color. And then we're going to have that color of it. And we'll make it that white. OK. So now we're going to have width 100% height. We'll just do 8m. And then we're going to display flex and flex direction row, justify content. And then we're just going to have space between. So that makes them go to the sides. And then we're going to have some padding at the top and bottom. We don't want any. And then on the left and right, we're going to have 5m. Actually, let's make that a little bit bigger, 7m. Yeah, that looks about right. OK. So actually, I think we probably need more contrast versus our white color for the text. So let's see if it's black. Yeah, that'll probably do better. So also, we're going to center our elements because the space between makes them go as far away as they can. So all of our space is between our elements because our main elements is this heading and this UL tag, or unordered list. So we're going to do online items center. That should center them up. And then we're going to go into R. I think it's an H3. Yeah, H3.logo. And we're just going to make this font size like 3m. That may be too big. OK, that looks good. Font weight, and we'll just do 300. OK, yeah. I sometimes don't like it to be too bold. Now we're going to have our unordered list. And there's default padding and margin. So I'm just going to remove that. And we're going to have no list styling. And I spelled padding wrong. So the list style is just these bullet points that are before the list items. And then we're just going to have display flex of this and flex direction row. So I just put some next to each other. Now we can just go inside of the LIs and the ATag. And we are going to, for the LI, we are going to access the LI. So the AND is just like this, the this operator in JavaScript. And then we're going to also edit the ATag. Because the next dash link, it's actually an ATag once it's generated into the page. So we're just going to use an A to style that. And we're going to have padding. And we'll just do 1m and see how that looks. OK, that may be too big on the side. So we're just 2.5. OK, yeah, that looks about good. And then inside of here, we're just going to have color inherit. So instead of using the default A color, which is like a purple, it will just be using the color that is inside of the parent element, which is right here. And then we're just going to have texture creation none. Then I'll just make our text look like this. And we can probably increase the font size to a maybe, maybe a little bit bigger or smaller. Yeah, that looks about good. And we aren't going to add any of the hover elements for it. So now we're just going to keep in mind that our layout is going to be used in all of the pages. We're just going to have an h1 and a p tag. So instead of our default, we are actually this default CSS that is already in here. And this is just going to be loaded onto all of our pages that are using this layout. So we are just going to get rid of all of this. And to think that probably, and body, oh, we actually have to edit or make sure we're using SAS. We're going to open this up. And then we're going to do with 100% height, 100 VH, margin, 0, padding, 0. So what that basically does is it makes the HTML and the button. We have some overlapping. OK, so our header is actually taking 100% of the screen. But it actually also has padding on the left and right, which is 7M. So we need to take in the 7M and subtract that. We can count. And actually, we're going to subtract 14M because this is on the left and right. So 7 plus 7 is 14. Hopefully, you should know that. So we can see that now we don't have any horizontal scroll bars, which you never want inside of a website. So we're going to go back into our default view. And we're just going to go out of here. And we're going to have our container, which if you remember, we have that inside of all of our pages. And then we're going to go inside of our main. And we're going to have our container with 100% height or 100. Wait, I think this should be auto, actually. OK, now inside of our main, we're also going to have width 100% height auto. I think auto is actually the default value, but whatever. We can just leave it for right now. And then we're going to have an h1 tag font size 3M. OK, yeah, that's good. And we're going to have this display flex. And then flex direction column. And then we're going to justify, or wait, no. I think we're doing justify center. Nope, that's wrong. Align item center. Yes, that's right now. So actually, I don't really want this to take up the whole width. So for the main, we're just going to do width 80%. Well, actually, we should probably just add that into our container. I'm just going to do 80% and then margin zero auto. So automatically put that into the center of the screen. OK, so that looks a lot better. I think that we can actually also do for a p tag x intent indent. I think that they add that. Yeah, they did. So I think 3M, that might be good. Yeah, that looks about right. Font size 1.25, maybe. And line-height 1.5. Now we want to decrease the padding on the top. I think that's actually immersion. Yeah, that looks about good. So now we have this on all of our pages. We should probably actually add some content for all of our other pages. So we can go inside of our contact. Then we can just add in. So the first one had 30. So we'll have 40 in this one. Then we'll have 50 in this one. And then we will have 60 in this one. Wait, didn't that just do 50 in the other? I think I have 60 now. OK, so home, about, contact, and then dummy. So now we can tell between them. So this isn't perfect, all of this styling, and we're also not going to make it responsive. So it looks bad like that. But this is just like setting up a boilerplate for. You could turn this website into an amazing website with just different styling. It's just that we know how to create our static website now. So in our next lecture, we're going to be learning how to have transitions. So then when we go to the different pages, it looks like it has a different transition besides this just changing the content inside of it. So I'll see you guys in the next lecture. Hello, guys. And in this lecture, we're going to be learning how to create a loading bar. So then on the top, it shows a white loading bar that corresponds to loading in all of the assets for the page. So this would work if you have a ton of images that you're loading into your website. It would, it may take longer or less. It's just nice to show the user that you're still loading stuff in. So if I reload, you can just see that it just shows the page. So what we can do is we can go to the web's, the Nuxchance documentation, and they have a loading property. So all we have to do is add in this mounted into our export default. So we're just going to add this into our head, or actually our export default of our layout. So every page is going to be used in this. I'm going to save that. And we can just reload our page and get you to see that we have a white loading bar. So if you wanted to change the color of that loading bar, you can go into our nux.config.js, which I have opened there. Or you can just look in the root directory of our project. So nux.config.js. And then you can just do control F and then progress loading. And inside of here, you can see our color property. And it's set to a color, or hashtag FFF, which is hex and it's white. So we can see that it's a white loading bar. If we wanted it to be black, we could do 0, 0, 0. And we should be able to reload this. And it changes the color. And we can change it back to white. Now you can also see here that they have default things that they're adding to the head of the website. So this is added onto every single page. So you can see we have default meta. So the char set is character set is automatically utf-8, the viewport, the description is automatically set to the description of the package, which is inside of our package.json. So it's this description. So you should make sure that you actually put in the right information in here. I just kind of put in the default stuff. This is just a tutorial. But instead of loading in our font inside of our layout, we could actually just copy this. Actually, we should copy the object. And we can just paste this in here and then remove this from right here. And we should be able to use our font still. So that's just something that I noticed when I was inside of the next config. Also, we can have global CSS. So if we wanted a main or remove default that CSS file, we wanted to add that in. Well, if it's inside of the assets directory, we would have remove-default.css. And then we would just have hml-body-margin-0-padding-0. And you could just add in all of the UL, OL, all of the things that have default padding and margin. And you could just add in. Well, actually, you could add in any CSS set here. It would be automatically applied to all of your websites. But actually, this directory right here wouldn't work. You actually have to do that. Hello, guys, and in this lecture, I'll be showing you how to create transitions between the pages so that it doesn't just change the content every time when you click a different link. So I have my code right here automatically. So I'm just going to copy this, and then we'll discuss what it does. So basically, I'm just creating an animation bounce in. And first, it's going to start from zero. So it's going to start from nothing. Then it's going to make the content a little bit bigger than it should be, so 1.1. And then it's going to go through how it should be or transform scale one. And then when it's bouncing out, so when you click on a different link, so if I click on this, it's going to bounce out first. And then it's going to bounce in the new content. So bounce out, it starts with the regular size. Then it goes to a little bit bigger. Then it goes to zero. And we're just making this 0.5 seconds long for bounce out and 0.8 seconds long for bounce in. So I just think that this adds more character to the website. Instead of just loading in the content, it does this. So you can actually refresh it. And it won't do the transition, but once you do, change the page it does. So you can just play around with this and see if you can create any different transitions, like with opacity or any different type of transition. And I actually added this into the default CSS that we were loading in via the nux.config.js that's inside of our assets folder. And actually, if you wanted to have this CSS file inside of our static, which we can access just by adding it into our static. And then we actually have to change this to instead of the tilde. We should be able to do static. And then if I refresh this, we actually, oh, sorry. We have to get out of this folder. So for outside nux.config, we should be opening up the static. And then we should go from here into the static file. So I hope I'll see you guys in the next lecture. Hello, everyone. And in this lecture, I'll be showing you how to build your application so then you can actually host it on your website. So I'm just going to cancel our development server. And then if we go into our package.json, we can see all of our commands. And we can just run npm generate. Or wait, npm run generate, sorry. And once this is finished, it should have generated our website, all of our static website files, that we will be able to add onto our hosting provider, if it's HostGator or Hostinger or anything. And it should be able to show our website exactly how it is right here. And it should have all of our content inside of our page source, as you can see right here. So then our search engines will be able to see everything. And we will get ranked way higher than the other people. Also, our static code will be able to load in way faster instead of running a server and having to do a ton of stuff on the client side. So if I just reveal our project in my file explorer, you can see a dist folder, which is just distributions. And we can open this up. And inside of here, we can see all of our different pages generated. So you can see how the routes were generated. So we have a donate page, and it's a donate folder. And then we have an index.html. So this way, if we go to our website, slash donate, slash contact, slash about, it will automatically load in those websites. And we have our favicon, but I actually didn't have that added in. But if you're actually publishing this, then you should make sure you have a favicon. And to host this, all you have to do is just drag in all of this code, or all of this files. And then you should be able to host it. And if you're doing with Netflify, you would actually just drag in your whole project, except for the node underscore modules, because then you would just specify that you are using Next.js. So that's it for this course. I hope you guys learned a lot from this. And hopefully you create some amazing websites with Next.js. See ya.