Svelte Tutorial for Beginners #19 - Header & Footer Components

Key Takeaways

okay let my friends so in this video I just want to focus on fleshing out the header component and also the footer components at the top and the bottom of the website essentially but first of all I'd like to also do a little bit inside the root component just a tiny little bit so first of all I'm gonna do a paragraph tag and then just type out some lorem here and that's just so we have something to play with on the screen so let me save that and preview over here and we see this paragraph going all the way from the left to the right now instead of the content spanning all the way across I'd like to create a column of content which sits in the middle which has a maximum width of about 960 pixels and then the margin is auto left and right so we have space on the left and on the right so to do that I'm going to target the main tag or right here and I'm going to say that the max width will be 960 pixels and I'm also going to say that the margin can I spell this margin is going to be about 40 pixels top and bottom also left and right if I save this now you'll notice that the maximum width is this right here it still looks quite wide but that's because I'm zoomed in if i zoom out a little bit see it 100% we can see now we have this central column right here and we have a margin on the left and the right so that's all I wanted to do really inside this Aptos felt component now then what I'm going to do is create a new folder and I'm going to call this components I'm just going to stretch my code a little more than we did in the previous tutorials so this folder right here is going to be for our components like the footer the header the pull form the pull list etc now you can structure your code differently that's absolutely fine this is just so we can stay organized for now and generally in bigger projects I would have different folders for each feature or section of the website but in our case that's a bit over the top so this will do for now so now let's create a header component we'll call this header dos belt and inside here first of all I'm going to do a script and then at the bottom we'll have some of styles so style tag as well and then let's flush out the template first of all so the head of its is just gonna be a header tag like so and inside the header we're gonna have an h1 and inside the h1 not some text but instead an image and in fact you know what we don't even need a script because there's going to be no kind of logic or data inside this component so let's get rid of all of that and just have the HTML template and some Styles now the alt attribute is going to say Paul ninja logo and we now need to add this image right here so we're gonna add that inside the public directory and it's gonna go inside a folder so new folder called image so I already have this image prepped it's an SVG and you can find this on the guild repo for this lesson I'll leave the link down below so this is the SVG preview but you're gonna see what it looks like on the screen when we add it in right here so we want to go inside the image folder and then forward slash Paul underscore ninja under school logo dots SVG so if I save that and prove your then if we refresh okay we can't see that that's because stupidly I've not actually imported the header components into the app component right here so let's do that now so imports header from and it's docked forward slash going to the components folder and then header dots felts and now we need to choose where to put this on the page it's gonna go above the main tank right here so let's do that header like so save it and now we should see that over here on the screen okay so that's the logo however looking pretty stupid and rather big so let's now add some styles to the header so first of all I'm going to target the header tag itself the background of this is gonna be a really light gray so that's going to be f7 f7 f7 and it's more kind of an off-white now I also want to apply some padding to this of 20 pixels all the way around now let's move on to the h1 and the h1 is going to have a merchant of 0 so we're just stripping out the default margin of the h1 in the browser and then we're going to say text align is going to be Center that so the image is centrally aligned let's have a look so far okay so looking a bit better but now we need to reduce the size of this image so I'm going to come down here and say image and the max width of this image is going to be about 180 pixels okay so save that and that is looking a lot better so I'm just going to inspect this at the minute because I can see some kind of border or margin around the body it's the padding so I think that's in the global stylesheet I'm going to actually remove that so let me go to the global style sheet which is here Global CSS and you can see we have some padding right here let's get rid of that we don't want that save it and that looks a bit better so it now sits flush to the top left and right okay so the next thing I'd like to do is a footer component just to add a copyright notice or something down at the bottom so let's create that we'll get rid of the header for now create a new component inside the components folder called footer dot svelte and inside here we don't need a script again let's just do a footer tag for the template and then a div with a class of copyright and inside here we're just gonna say copyright 2020 Paul ninja all right sir now let's do some styles and before we do any styles let's just take this component and place it inside our app file so I'm going to duplicate this line and change this and this to footer instead and we're going to output the footer underneath the main tag so footer like so save it and preview and we should see this copyright notice right here now I want to centrally aligned that so let's go to the styles and I'm gonna say footer first of all I mean side that will give this some padding of around 40 pixels I'm also going to say text align is going to be Center now I want to style this as well copyrights but before we do that let me just spell this correctly so down here I'm going to say copyright and then inside the color this is going to be kind of like a light gray instead of black just to make it a bit more subtle so AAA and then the font size there's going to be 14 pixels their display is going to be inline - block and the padding is going to be 20 pixels all the way around and then finally a border top of one pixel solid and a lightish gray color DDD so if I save that now and prove here over here this looks a bit better now when we have more contents in the center it's gonna look better because this will be at the bottom of the page but for now that's looking pretty good but we have this padding back at the top I don't know why that is oh it's because we're loading old styles just hard refresh over here to get rid of that padding if it's showing up on yours okay then so that is the basic template done now we have the header components and we also have the footer component and we've styled the content in the middle a little bit as well now we don't need that so we can get rid of the paragraph content right here that was just so it could style it properly now in the next video we're going to create some tabs for the top over here so we can switch between two different views we have one section for showing the polls and one section for adding a new poll or form so we're going to create some tabs in the next video to switch between two different components showing on the screen