Hand-craft an 8-bit style website

1. Intoduction: Hello and welcome to designing an eight bit Web page with me. Caleb. Colleen, I am going to be showing you in the next hour or so. How do you create an eight bit website like this with a custom grid system using an eight bit library. So everything looks really cool. Retro. This way. I'm going to be creating a resume type website, but you might want to create a hobby based website or a portfolio based website. Either way, you can adopt everything in this course to your needs. So if this webpage looks pretty exciting to you, come join in. I'd love to show you exactly how I did it, and we'll get started in the next video. 2. Installing 8-bit: all right. Hey, thanks for joining me here. We are going to get started creating this page from scratch. So the first thing we have to do with any Web development based project is we need to open up our editor. So I'm using an editor called V s Code. It's completely free. But if you're using a different editor, you can also use something like Adam or sublime text. Or, you know, if your little more old school no pad plus plus even Dreamweaver is cool again, it doesn't really matter. Brackets is another popular one for this. I'm going to be using V s code now. First things first, we need our HTML template, but we need to save this file first. So I'm just going to create a new file and save this as a pit dot true Nazi SS start HTML. We want an HTML file, and I am simply going to create a brand new HTML five Template V s code comes with a nice little shortcut. It allows me to type html Colin five hit tab, and it feels all this stuff out for me. So I'm going to call this Caleb's resume something like that. It doesn't really matter what we call it. It comes with some automatic mobile first content, so basically, this will work on your mobile device. That's really nice. So let's go ahead and open this file in our browser. I'm just using Firefox. You can use Chrome's a fiery Anything you like, and we see a boring basic page. There's nothing noteworthy in here, so we need to install nest dot CSS. So let's just go ahead and Google nest dot CSS and it's gonna bring us right here. This is the page that we want. We want to click on the Read Me so that we can see how we install it. Exactly. Google cool all the stuff. Here's the one we want. We want the latest. So it's copy that Put that inside of our head and just as an example, let's go ahead and let's go ahead and, ah, let's just copy some of this code so we can see that it is actually working. What does something really noticeable here? Buttons, buttons or noticeable? So let's go ahead. Copy all of that, and I was going to paste this into my body here. Refresh my page and ha ha! Look at that. We have some eight bit styling already, So within just a few minutes, our site is already starting to look very eight bit. This is really, really cool, but it's not exactly what we were looking for. So go ahead and make sure you have nest dot CSS installed. I'm just using the men ified version of latest versions that we get the latest updates once you have that installed head on over to the next video and we're going to create in navigation bar. 3. Navigation bar: All right, welcome back. In the last lesson, we added a bunch of buttons to make sure that our styling was working from nest dot CSS. Now we need to create a brand new navigation. So that's type. Now let's give it some basic styling here, so this is just in line. CSS. This is kind of ugly, but we can also move this out into something a little more manageable a little bit later. Let's do a border bottom three pixels. Solid C C C and let's do a margin bottom of I don't know, 60 picks or something like that. Let's save that and refresh our page, and we've got a boring NAFO. But look at that. We also have a nice little cursor there that looks pretty cool. Let's go ahead and add the name of the site in here, so it's creating H two elements. And let's just call this Caleb Holley, and you would call it whatever your name is or whatever, you really want to call it mine. Just going to be a little bit of a resume looking website, and so this doesn't look like it's really doing anything, and we really want that nest font. So how do we get that nest font? Well, if we go into the read me again, it tells us exactly what we need to dio. Let's go ahead and grab this line here. And this is simply going to install the desired formed from Google Funds. So hit Save head on over to our resume page. You look at that. That's looking okay now, isn't it? Now, if we go in here, we also have some icons. I looked for icons and find the one I was looking for. But let's say I wanted the coin. I would inspect element. And this is the HTML that I want with that class. Maybe not the large classes large, but this is the one that I want. So let's go ahead and add that into the header here. DIV Class. Let's at the classes in there and that's actually not supposed to be a dip that's supposed to be in. I put that on separate lines. This becomes a little more readable. Save and refresh. Let's take a look at what a page looks like now. Okay, we got this huge coin. It's too big. Ah, we also have is medium. It's still too big. We have is small too small, and then we just have default Coin. That's the one we want. Right there. Now, this point time, we kind of want to center this, but we don't really have a way to center this. So in the next video, we're going to add a grid system. 4. Adding a grid: all right, We need to install a grid system. So let's go ahead and hop on the Google machine and type in flex box grid and this is going to give us. Basically, you can see if you're familiar with Bootstrap. It gives us bootstrap like columns, and all we have to do is add a little bit of CSS. Do we want to download? No. Let's go to get Hub. Let's see what the read me has for us in here. Ah, we have a cdn, a content delivery network. This is the one that we want. Let's go ahead and copy all of that. Let's throw this in the head of our page as well. Let's make that just a tad smaller and I move this over just a bit. And so now we have nest out CSS. We've got our forints in there and we have a simple grid system. Now. What this grid system allows us to do is if I just click back here, we can create little columns like this. We can create up to 12 columns and we can tell them what order they need to be in how wide they need to be in there automatically responsive, which is really nice. So if you're interested in a drop in grid replacement flex box grid is amazing. Why the way you can nest it too? That's a big one. We're gonna work with us a little bit, Um, s So if you're not familiar with that, that's okay. You can always go to flex box grid dot com. Let's go ahead and refresh your page. We see nothing has happened. So if we open up visual studio code and just inside of our knave here we add a container elements. So this is just a div, and this is simply going to add some padding for us or really just sent her a content the way we want. So it's refresh. And there we go. Our content is centered. So that's adding flex box grid 5. 8-bit welcome balloon: All right, let's go ahead and add a little introductory. A little photo of myself with a little bubble saying Hi. My name is Caleb something, something. Something. So we're gonna create that first top heard that we originally saw. And in fact, this is what the final website is going to look like. So we want to create this section here with the little faces says Hi, I'm Caleb. This is everything about me with the little heart. Emoji, let's go ahead and create that now. So if we open up our code and underneath our now we're going to want to create a new container, This is going to keep all of our content contained in the centre formatting. So if we look how everything is sort of aligned left and everything is aligned to the right , that's going to be our container. So now we need to add a new row. This is from our flex box grid. This is the drop in grid replacement. We're going to add a column in here. We're going to add one more. Call him in here. Let's say this one's going to call him the span. A small span of nine. Ah, and maybe a column with an extra small span of 12. And let's take a look at what this looks like left right, and let's take a preview here, left and right. So, you know, no big deal here. We can see that we have a nice little Funt taking place, but it's not actually doing anything that we need. So now we need to go and find an icon in here. Not really an icon. I guess it's this happened, This fellow right here, let's go ahead and inspect him, and we can actually just look at the source code here on, and we can just take that. That's what we need right there. Let's go ahead and just add that in there and refresh our official page one we're working on and we have a little dude, so that's pretty cool. And then we need a balloon in here and we want basically just this. So let's go ahead and copy dressed those lines. Put that in the right section, and this is going to say hello, Nesta at CSS. That's pretty cool. Look at that. We're getting somewhere, but we actually wanted to say hi I'm killed. This is everything about me. So let's go ahead and add that in. Here's let's say I'm Caleb. This is everything about me. But we need that heart icon. Where is that heart icon? So I know it's in here somewhere. We can just right click, inspect or, you know, we just go in here, grab this heart icon Pace That hard icon in there, this one isn't is large, I think, actually want is small. This is going to have to be pretty small looking to match your font size here. So ha! There it is just like that. Make us one step bigger as well. And that's how we get this little top guy here, this little bubble. And don't forget, you can update your skill share project with your current progress. Show me how it's coming along. I would love to see your progress and help you out if you get stuck anywhere 6. Two column layout: okay. Next we need to create a two column systems. We have our left columns here and then we have our right column here. So in the left column, we have things to do. Know where these my socials and right column We've got front and knowledge back and knowledge, build tools and previous experience. Let's just go ahead and set up our layout first. So for this, we just want to open up our file. Let's go ahead and create a brand new container again, because why not? And in here we need to create a new row. Because if we look at all of this in here, this is one row going right across, and it happens. Have two columns. So we're going to create one row with two columns in year. That's Ah, let's make this first column A medium of four and maybe a column size when it's small, is 12 and column extra. Small is also going to be 12. And just so you know, all I did was type the CSS selector and envious code. I could just hit Tab in and automatically fills it for me with a diff, so that's pretty cool is a shortcut there, and then here we need to do basically the opposite. We need column medium eight. So we want to do a span of eight across for a total of 12. So that's four here, eight year for a total of 12. That's how big our grid system is. There's 12 columns in our grid system and in here we also want to do cool as them 12 Coal excess 12. Dash 12. That's a right, and this is going to say left. Let's go and view our page. There we go. We have left and right. 7. 8-bit sections: all right, We want to add a little section in here that says things I do. And for you, this might be different. So for me, I'm a web developer, Web designer and a teacher for you. You might just strictly be, ah, Web designer. Or maybe you're a manual machinist, and you just like eight bits sort of styling. Whatever it is, you can place the content the way you want. I am going to be making my own resume. But, you know, Taylor, yours toe to suit you, the way you wanted to show up. So you do you Let's go ahead and add that No. So in her left section here, I'm going to get rid of the word left, and I want to add a ness container with the title. This is very were mostly name. So this is really nice h three. Let's also tell it that it's a title and say things I dio I just like to see sort of where I met. So I make these small little increments and refresh my page. So it says things I do. We'll work on spacing and all that stuff a little bit later for Now it's going to look a little bit tight, but we'll space it out at the end. So we have a title in here. Things I do. Let's go ahead and create a new Devyn here, just sort of as a container, I suppose, And it's creating new list. And so we're going to say this is, uh, lists. And then let's give it a nest list and the is circle type, and where I'm getting that from is, if I just go back to the documentation here, we've got list somewhere in here. Where are you lists? There you are lists, and so classes. Lists about A UL in here nest list is disk and then just regular allies, and you can actually see that I made a mistake here. That those are supposed to be UL is not dibs. And let's just go ahead and create a regular ally. So I'm gonna say my first point, I'm a Web developer. Another Ally list item. I'm also a Web designer. Let's create another ally. I'm also a teacher. Go back to our page and give this a refresh. Didn't quite turn out the way we were expecting. Something is wrong in here. And this just means I have a type of somewhere is circle. That's the one little table there. Hit. Refresh. There we go. We've got little circles. 8. Dark 8-bit sections and icons: All right, Next, let's go ahead and create. Noteworthy is in here. This one's going to be is dark and has a little extra stuff in here. So let's go ahead and change the styling. So instead of using a white block, we're going to use a black bloc, and we just want that to be right under things I do. So we're still in the left column here. What I'm gonna do is just collapsed this here and I'm going to create another nest container with titles. This is just CSS is dark hit Tab Auto feels for me. That's pretty cool. Let's go ahead and give us a title. So H three dot title and say No Worthy's Hey, look at that. So we've got a black section again. The spacing and here doesn't really look very nice, but we're gonna fix that up at the end, go ahead and create another container just for the sake of container rising things. Now I want to create ah little icon in here, so it's do I ness icon. Dot is small because I want a small one and I wanted to be a heart, and I am a way tell CMS core member Wait tell is Python's most popular and most used content management system, and I am actually on that court team, so that's pretty cool. Little noteworthy point, I guess. Ah, and if I wanted another one in here, I could just do another div. I get, say, give me an I element. It's also going to be a nest icon. It's going to be it's going to be small and I want this to be a star and let's just say 250,000 students worldwide something like that. So these are little noteworthy is about me, actually don't want that inside of the eye that I element is by itself. Refresher page Boom. 250,000 students went toe CMS member with nice little eight bit icons 9. 8-bit social icons: all right. Next section is the my socials. Let's go ahead and create little social icons. And by the way, if I'm going a little fast for you, don't forget. You can always reference flex box grid dot com or nostalgic Dashti assess dot get hub dot io slash nest dot CSS. I honestly just Google this year because that one's a little hard to remember, and it is all available to us in here. So let's create a little social links section where people can go and I guess, look me up. So what I'm gonna do is just close that up. That's OK. Div Ness Container. It also has a title. Let's give this a title three dot title hit tab, and it just creates the entire element for me. Call it my socials. Then here I'm going to create another container just for the sake of creating that container. Doesn't hurt to have that that one extra layer in there, and I'm just going to create a link. It's not going to go anywhere in particular right now. I just want this to demonstrate its want this to be a link that will demonstrate that I have a Nikon in here. So Ness icon Twitter, Tweeter. There we go. Refresh a bam! There's Twitter and we could do this over and over and over again. So I just copied and pasted that four times. And if I want a Facebook in here, So let's change this to Facebook. This one's going to be my get hub, and this one is going to be YouTube. Let's go ahead and refresh their We have icons. Now, if you're looking for other icons, there's a ton of icons in here. Where are you? But the bump of, uh, here you are social networking site icons. So we've got Twitter, Facebook, insta get hub Google Gmail, medium Lincoln, all sorts of other ones in there. So you can use all of these and again if you're not sure what they're called you just open up that source code by clicking this button and just viewing the one that you want a copy and paste outline and it will work exactly for you. And so now we have socials 10. The right column: All right, now we need to work on our right column. So 1st 1 we have here is front and knowledge, back and knowledge build tools than previous experience. Let's just go ahead and create one at a time. So its creator, front and knowledge for you, this could be totally different as well. This might not be front on knowledge. This might just be your favorite board game, a list of family members or anything you like. But what I have set up here is I have a particular skill and how good I am at that skill. So html five, I'm like 95% good at html five. I think CSS three. I think I'm like 90% good. A CSS three JavaScript. Maybe I'm not too good a JavaScript. So we have these health bars here to sort of tell us how good I am at a particular skill. Let's just go ahead and create the first front and knowledge section. And again, this is totally up to you. I'm gonna collapse this section. This is totally up to you. How you want to design this with a content that you like. So first things first we need a ness container with title, we could go ahead given age three of title front and knowledge. Just things I'm you know, Okay, at and here we need to use more of our grid system. Let's go ahead and create a new row. And in this row we need two columns we need. Call small four, just four columns to the left and let's say when it's on extra small spent all the way across the soup column, extra small 12 was going to take up the full width. And you know what? Let's put this on one line, because I think we can get away with that html and then just as five call sm, then we have to do the opposite. 12 minus four is eight cool excess 12. And in here we want to create a progress bar, so progress dot nest progress dot is success. I'll show you where I'm getting these in just a second and in here let's put this on separate lines as well so that we can read this. We are allowed to have all this white space might as well use it. Value is equal to 95 and the max is going to be 100. Let's just go ahead and see what this looks like. Ass Put that on one more line. Justice that looks ugly. Beautiful. Refresh my page HTML five not bars. A little bit big. We're gonna change that a little bit later. And now all I'm going to do is take this entire row and I'm going to copy it two more times . So there is one. And there's too. And I want the 1st 1 to be not html. I want this to be CSS three. Progress is going to be 90. Is success. Yeah, I think I'm pretty good at it. Let's say this one is going to be JavaScript, and this one's going to be a warning. I'll show you where I get that style in just a second. That's I am only 60% get a JavaScript. That's actually very wrong. I'm quite good at JavaScript. But, you know, for demonstration purposes, it's good to have a little yellow bar. And there we go. Just like that. Now, where I'm getting these styles from is progress. Progress, progress. Where is the progress? Bar Progress, Progress, Progress. We have got quite a few of them we can choose from here. Let's just toggle that eso we've got nest progress. That's the black one is primary is blue is successes. Green is warning his yellow is error. That's our red one and is pattern because sometimes you just want a Mario kart like pattern . So that is our front and knowledge. I'm going to fix up that type of there and then we'll head on to the next lesson. 11. Large dark 8-bit section: All right, let's go ahead and create back in knowledge. We've got a black section here, so this has to be dark. Caleb, where you getting dark from? Yeah, that's a great question. Anywhere you see a dark section in here, we can just do enable It was dark in here. There's a dark section in here so we could look at that source code. Ah, we can also just take a look at the containers we've got. Container is centered. If we want to send her title, we're not going to do that is dark. Just makes a dark background with a white border. We can always look at the source code to, and this is the one we want in here. So I'm just going to copy that head on over to visual studio code, and I'm gonna collapse this entire second. I'm working on just to make my code look a little nicer. Let's create a new Devyn here. This one is also going to have a title. This title is going to be back end knowledge. And there we go. We have back end knowledge. And again, that's Basin will fix up near the end of this this course eso next. We need to create basically these three sections again. But this time we want to put Python PHP and no Js. So what I'm gonna do here is go ahead and again, just create a new row. This is from our drop in grid replacement called flex box grid. That cool sm four. This is the exact same as we did in the front and one cool access 12. This one's going to be python three. And instead of writing this over and over again, what I'm gonna do is simply copy it just a little warning. When it comes to copying and pasting, Don't forget when you copy and paste things, you have to change all the values and their Sometimes we forget to do that happens to all of us. Just don't forget to change your values. This one, I think, is good, though, So let's go ahead and refresher are actual working demonstration here. And look at that. We've got Python three now. I'm gonna put these on one line just once more. Now I just put those all on one line because I want to go ahead and create another row trying to create two more rows So paste one more in there paced one more in there. Fix up the terrible inventing from V s code. I have no idea why it does that. Let's go ahead and type huge p seven and I'm pretty good with PHP. So it's a 90 the other one is going to be node Js node.js. I'm honestly not very good with no jazz and I don't want that to say success. I want this to be is error. This shows that I am not good at it. And so we've got a little red bar here that says I'm not good with no jazz. The health of no Js is pretty low. 12. Large light 8-bit section: all right. Lastly, we have our build tools. This one's going to be super easy and basically is going to copy over front and knowledge and change some of the values. So let's head on over to V S code, and I have is currently collapsed. Some is gonna select all that. Copy it, paste it in there. And now we can see we've got one section of dark section, and this one is going to be build tools, build tools. Let's go ahead and add Web packing here. What is my Web pack at? I'm going to say Web Pack is at not 50. It's at 60%. Ah, and it's yellow. Let's go ahead and add parcel dot Js. This one is also going to be yellow, so we're going to make that a warning. This one's going to be at 50 and then we have gulp, which I havent used in a long time. So this one's going to be an error, and that just means the bar is going to be read and let's say it's at 30%. Let's go ahead and refresh our working page. There we go. We've got tools in here, build tools Web packed parcel. Dutch. Yes, and gulp. And remember, you can just go into the documentation and at any point in time, I feel like I while I don't want to use is error for the red one. I wanted to be patterned. You can use his pattern or you could just use none of them. So just nest progress to default to black, whatever works for you. Remember you, do you? 13. 8-bit profile section: all right. Lastly, we have previous experience. This is a larger section, so let's just go ahead and get rolling on this. I don't have any actual business names in here. You might want to use your actual business names. If you're creating a resume or if you're creating a portfolio, this could be links to projects that you have on on Get hub or their websites or anything like that. So I'm just gonna scroll up here and collapse that as well, because we don't need that. And let's go ahead and create Ah, brand new topic title. So topic title. And then here we want i dot ness icon dot star and let's call this previous experience when we refresh our page Ha. Previous experience will fix up the spacing in just a moment. We're getting really close to it. And where I got that title from this one was a little trickier to dig out. What I had to do was go down here and I just right click inspect element, and when I hover over this, you can see that I've got the whole core team and I've got a topic title in here. And so all I really did was just take that class that H three topic title. You've got an icon in here and then regular text, so I just did the same thing. Next we need a new containers. Let's create a DIV nest container that is dark. We want a dark one. We don't want this to have a title. All these other ones have with title. Not this one. This one already has a title outside of it called Topic Title. Now we need to add in our row system again. Some is going to add a div called Roe. We need to add a column in years. A coal access to I don't ever want this to collapse. That's why I'm specifying extra small, cool excess 10 120. That would have been a pretty big one if it went that high. So two under 12 columns on the left, 10 out of 12 columns on the right, and we could put an image here and we could also put text here. Let's just preview this, though, and it's going to look something along these lines. Image here text here. Okay, I was getting pretty close to the bottoms that's getting get a little bit hard to read. So why don't we just add a little styling to our page here? Let's go ahead and add some styling to our body. And let's just say padding bottom is going to be 50 pixels. There we go. We got a little padding at the bottom. It could actually be bigger than that. Let's go ahead. Make it 90 pixels, almost double what we originally had. There we go. We got some spacing down there. Hopefully you can see that. Okay, scrolling back down the page and I have an image that I want to put in here. So what I'm going to do is create a new image tag and already have this in my clipboard. So this is a strange you, Earl. You can go to Let's go ahead and actually open this in our browser. Let's go ahead and open it in our browser. Look at that tiny, tiny image. And if we wanted Teoh, you can see where says size is equal to 20. We could make that size is equal to 200 if we wanted to, but we want a special pixelated effect and so we're going to specify a very small image. And so here we're saying size of 20 pixels. And when I refresh this, this is going to look super tiny. Yeah, you can barely even see that. We need to add some special styling to this for this toe work properly. So let's go ahead and put this on a new line as well. Because we can style with the 100% height is equal to 100%. It's going to be auto. This just makes us a responsive image. It's refresher page, and you can see it looks a little blurry. But if we right click and inspect, we can add this cool little thing called image rendering. And we wanted to be pixelated, and we're also going to add another one in here just for Mozilla called most crisp edges. And so if I just toggle turned that one off, this one's better for chrome and for Firefox. If I just talking this on or no, if you can actually see that the image up here is getting pixelated, which is pretty cool. So instead of blurring it in trying to make sense of it, it's just going to stick with whatever pixels are currently there. So let's go ahead and copy both of those and put those in here as well. And we could touch up that spacing because we don't need it. It's refresher page and there we go. We've got a pixelated effect. That's pretty cool. And then in here, we need to go ahead and add some company names. We've got old company name. Been a paragraph in here. So what was my role? Maybe I was Ah, Super front end developer has created if container just for the sake of having separation, uh, to put in a Lincoln here. And this is just going to be, I don't know, maybe the nests icon. Forget hub. So maybe I've got get a project or something I want to share in their Let's go ahead and copy that again. It's right there. And instead of get hub, maybe Let's put Twitter refresher page. Boom. Look at that. So we've got get hub and we have Twitter in there. That's pretty cool. This is coming along real nicely now. We need to copy this a few times because we want three rows. So what I'm gonna do is take that entire row, paste it and paste it once more. And look at that. We have three in there, so let's just go ahead and touch up some of that content in there. Let's say this is a kind of old company and I don't know, maybe I was a project manager project manager, and maybe this one has a Facebook link. Very old company name. And maybe I was a super back end developer. And maybe there is no get home. Maybe this one is just Twitter and Instagram, I suppose. Let's go ahead, Refresh. That's looking pretty good, but our spacing is getting kind of gross. Let's go ahead and add some spacing in the next video. 14. 8-bit spacing: all right, We have a good portion of our page pretty much done. We just need to add some spacing in your cause. Our page doesn't look like this. Our page looks a little crammed. Things are basically like sections or touching each other, and it just doesn't look very eight bit. Looks to crammed to be a bit. So we just need to add a little bit of margin and padding to some particular places. Let's start at the top. We have this up here. It doesn't really look centered. If we just simply right click and inspect. We've got an H two in here and we can actually see that there's a ma ah, bottom margin of 0.5 rooms. We want to get rid of that entirely. So let's open up the S code. Let's go to our navigation here. I'm gonna cheat. I'm going to write this in line margin bottom zero, and that's just going to overwrite this. So let's go ahead and give us a refresh and watch this sort of look like it's a little more centered. It's gonna bump this line up so it's a little hard to notice because that margin. Bottom was 0.5 grams. But it does look a little more centered now, doesn't it? Next, we need to add some spacing in here because this this guy the the guy that says I'm Kayla, he's too close. So let's actually bump everything down from that icon. So we have the container here with nest BC rico, and I believe that's one of the creators of nest out CSS, actually. Margin bottom 50 p x. All right, so we got some spacing in there that's coming along. Ah, If we also look in here, we have a little bit of offset as well. We don't really like that. And you can see here that this has a margin Bottom of one Ram. We don't want that at all. So let's go ahead and find our lists and get rid of all of those. We've got a nest list in here. Style margin bottom is equal to zero. Let's find another list. Doesn't look like we have any. Okay, there it is. That looks a little better. Now we need some spacing in between. Noteworthy is and things I dio we also need a little spacing between my socials and no Worthy's. So let's go ahead and go down to know where these that's This section here says No Worthy's style margin. Top 50 pixels margin. Bottom 50 pixels and let's do the bottom one as well, my socials. We're gonna be a little preemptive with this one's action. That's just copy that. Why? Why type it if we can copy it And there we go. That's starting to look a little more spaced out. Then we have to add a little spacing between here, little spacing between here and a little spacing between here. So that's gonna be really easy. Let's go down to our right column, so call him Medium eight. That's this larger section in here. That's the right column. Let's click here and here and here. And let's do style margin top 40 pixels and let's refresh. Oh, that's looking better. That's looking better. Okay, this bar is still far too big target all of those together, I think. But before we do that, let's go down the rest of the page and we have some spacing problems in here with previous experience. So if we open up V s code, I'm gonna collapse this section again. Collapse, collapse, collapse. And so we have a first section or dark section, second section a title and then the one we just collapsed. Let's un collapse that. And in here we want each individual row to be targeted. Let's do just a second and third row. So style margin is equal to or margin top is equal to 30 pixels added. Just a little bit of spacing, I guess. Just so that doesn't seem so squished together. That looks pretty good. Actually, like that turned out better than I had expected. Usually I don't really guess good spacing on the first guest. But that turned out pretty well. And then lastly, we just need to touch up this in here cause this is just too big this progress bars two bigs. Let's take a look at the height Attribute. How tall is this thing? 48 pixels. What happens if we made this 25 or 36? That looks OK. That looks a little better and doesn't quite look center. Let's go ahead and say 25 picks is that looks pretty good. So what we're doing here is we're editing the CSS right in our browser and I want to grab this selector and modify that. So let's scroll back up to her page and where we have our styling, where is going to add dot ness? Dash progress. That's our progress bar. And let's say it's going to have a height of 25 pixels, and this is going to select every single one of them and give it a max height. 25 pixels. Let's go ahead and refresh your page. It looks like nothing happened with the CSS selector. We said selectable again. Change the height 25 pixels. 15. The footer: all right, we have one more section we have to add. This is just the little content section at the bottom. It's pretty hard to see, and that's okay. That's really just a copyright or whatever you want to put in their eyes. Put something funny, says ironically, I don't actually care for next games in 2019 so let's go ahead and create that. Open up the S code and at the very bottom. In fact, not quite the very bottom. I was gonna collapses container and create a new container, and this is basically just a footer. I want to give this a style, say margin Top 50 pixels font size. Let's make it smaller than the average font size. Maybe like 60% ish. 60%. There's the percent sign has given a row column extra small 12. So it's going to be 12 columns across, no matter what, But let's go ahead and centralised tech. So style text. A line is equal to center, and the color is going to be C C. C, which is a light gray color. And then in here, let's just put Ironically, I don't care for yes games in 2019. And let's change that. See to a copyright did you do to do and copy? Let's go back to our working file here and let's just scroll to the bottom refresh and let's get rid of that and says, ironically, I don't care for it s games in 2019. 16. Project complete: all right. That is how we create an eight bit website with a little CSS framework or library called nest dot CSS, which is open source. You can find it here. If you like it, you can always contribute to it. I would like to thank the creators of Nest Out CSS and contributors of Nest on CSS because this is an awesome little library. This is just fantastic. You cannot all sorts of buttons and stuff. It doesn't come with a lot to you're gonna have to use a few extra things in here, such as dialogues. You're gonna have to add your own JavaScript for that. But that's OK, comes with the styling, and that's the main part here. And then we used flex box grid flex box grid dot com, And this is just a drop in replacement for bootstraps grid system. So if you're using your own website and it's not using bootstrap or foundation or anything with a grid and you need a grid, you can just come here and use a drop in grid replacement. It's really, really nice. And just like that, in less than an hour, we were able to create my Web development resume or for you, it might be a portfolio. It might be a resume. Might just be a hobby website or something. That looks really cool. Thanks for joining me on this journey. This was pretty fun. Actually, I really enjoyed this one. And I hope to see you in another class of mine. But before you go, don't forget you can share your progress. Share your website, share this entire project you've made with skill share. Just click the new project button. Or if you've already started project, you're going to have to edit that project and just share what you have. Share what yours looks like. 17. Summary: Hey, thanks for joining me on skill share. Don't forget, you can follow me. So my name is in this course. You can just click Caleb hauling and then follow me on skill share. And that would give you notifications whenever I launch a new course. Another awesome course like this or I have some free material to give away. Of course, that's optional. And if you ever need a large developer support group, I have a group on Facebook with, like 25,000 people in a 25,000 developers. We're all learning to code together. It's called Learning to Code on Facebook. Come drop by, Say hi, Ask a question, Get some support, help other people. It's a community where we just help each other and it's totally free.