 Welcome back team. It is your biggest fan the real Casadero and in this session We're gonna be building a full web page. Well, not a full web page. We'll be I'll show you let's get into a team All right team. So what I have behind me here is the supreme New York website. So as you can see they have supreme in the background of a full page Background image down here. They have a clock. It's kind of hard to see I'm gonna hit control and zoom and scroll up to Clock right here links when we roll over the links. They turn red. Then we got our social media icons now here And that's pretty much it team But what we're gonna do is we're gonna build this and it's gonna be our own So by the end of this video, you will be able to build your own website. You will have an understanding of HTML CSS JavaScript Positioning things on a web page all that stuff. So let's roll team All right team if you would like to follow along You're gonna need a few tools one of those tools is PowerShell core PowerShell core operates on Windows Linux Mac and then a bunch of other operating systems. All you have to do is head over to github dot-com Ford slash PowerShell Ford slash PowerShell in that will take you to the PowerShell GitHub page where you can scroll down and read these instructions and they will tell you how to download and install PowerShell on your System team again that website is github.com Ford slash PowerShell Ford slash PowerShell Team every web developer needs a tool. This tool is visual studio code This code editor will enable you to build just about anything you want to build now It's not gonna do all the work for you But it will give you tools and features that make it a little easier and as you follow this tutorial today You're gonna learn what some of those features are like multiple cursors the ability to add multiple lines the ability to navigate Very easy with the keyboard. There's plug-ins for live servers. There's plug-ins for ways to see your code There's plug-ins for all kinds of stuff team if you would like to follow along here today What you're gonna want to do is go grab yourself a copy of visual studio code And you can find that over at code dot visual studio Dot-com and you just click the button select your operating system download Install and you are on your way team team every developer needs to keep track of their software the track of what they're writing Track of the versions what get does is it enables you to do that? And if you would like to follow along with this tutorial head over to get dash SCM Dot-com where you can download your very own version of get and get that installed on your system So you can follow along here right here. There's a fantastic user manual It's pretty big team and I don't recommend that you go off and try to become a get expert right now But as you progress depending on how much code you want to write and what you want to do Get is gonna be a very valuable tool and you can learn about it today in this tutorial team So grab yourself a copy of get All right team now that we have all that stuff out of the way we can get started So we're on our desktop I'm gonna hit the windows key and I'm gonna type in pwsh and open up PowerShell core Now I have some commands in here that you guys are probably not familiar with and They won't be Pre-installed on your system and the reason for that is is because we can have custom commands in PowerShell I've made a few videos on my channel that show you the basics of programming the basics of using PowerShell just go back and check those out team or You can check out the code at three six five Startup lab team and over at the code three six five start up lab There are free courses that will introduce you to web development The tool kit. This is where I talk about get visual studio code stuff like that the HTML Primer the visual studio code primer the PowerShell primer all these things are designed to introduce you To the tools that you need to build just about any website a web application that you want team So team what I'm gonna do now is I'm gonna create a project folder for us to work out up So we're gonna do mkdir and this folder is gonna be called the Superior Ior the superior project We're gonna hit enter and then I'm just gonna double-click this and right-click and we're gonna do a CD and we'll right-click again And we'll end up inside of that directory. I'll do a dir now We're gonna make the files that we need so we're gonna do a mkdir Now usually I have a script to do this, but I want to show you guys how to do this from the ground up So you understand everything So we're gonna do a mkdir. We're gonna make a CSS directory. This is gonna house our styling for our program we're gonna make a JS folder and we're gonna make a image folder. We'll also make a docs folder So the docs folder is gonna hold any documentation associated with the application that we build the image folder or hold all of our images the JavaScript folder or hold all of our code for our JavaScript all of our logic CSS is gonna hang on to all of our styling how our page is gonna look how it's gonna be presented and then That is it for our folder structure We're gonna put a semicolon and now we're gonna start a new command that command is gonna be new dash item And we are gonna use new item to make the files that we're gonna be using in our application The first file we're gonna need probably the most important is the index.html We are also going to need and notice I'm putting commas in between these this just tells PowerShell Hey, we are we are gonna be making multiple things And then I use the semicolon right here in order to tell PowerShell Hey team, we are going to be starting a brand new command And if you see me turning away like I'm like I'm crazy or something team It is because I'm trying to keep from breathing in the microphone in the in just making the audio sound not good All right team so driving right along we're gonna make our index dash html and then we're gonna make a CSS dash and actually we're just gonna put C Here's the deal. We need to make these other files inside of these other folders, but these folders don't exist yet So if we try to make them there, we'll get we'll get an error. So what we're gonna do is We'll just make our folders right now. So we'll go back. So we'll make all of this stuff right here Now we've got our core folders and we have our we got our core folders here And we have our core index.html right here team So what we're gonna do now is we can create those other files We're gonna create a main.js and a main.css. So we'll go new dash Item and now when we do CSS we can hit tab and it'll show us that directory and then inside of that directory We can just put main.css We'll hit enter and do that we'll hit up and what we'll do is we'll go back and we'll make this CSS a JS and This is so we can make a main.js JS inside of our JS folder. So we'll do JS enter Now we have our main.js in there and everything now you can't see all of these folders So what we can do is if we type clear and we do a dir and we do a 4 slash recurse This will show us Everything that's in this directory and everything that's inside of the directories inside of this directory So we'll go through this real quick team So this is the directory that our project is in the superior project and inside of that director We have three folders three directories CSS docs IMG and JS then we have our index.html if we go down here superior project in Our CSS folder which is right here. We have main.css and in our JS folder, which is right Here we have our main.js team Since we got all that stuff typed team I just did a clear and got rid of everything the next thing we're going to want to do is initialize a git repository We do a dir we have all of the files and folders We need to get started and even if we don't we can add more later on But this is the baseline setup that we are going to need in order to go out and build our application So right now what we're going to do is team We're going to initialize a git repo. So just follow along with me here and this will make sense as we go So we're going to do a GIT space INIT and it's going to tell us initialize empty git repository And what we're going to do is we're going to use this git repository to track All of our code as we write it and we will be able to walk back and forth through the different features That we have implemented and keep track of everything that we have done while writing our program So once we have initialized everything we can do a git status And this is going to show us. Hey, this is what you have that we aren't tracking Now the reason why git isn't tracking everything is because not everything contains something We have our main file, which is index.html which git is going to track But then we have these folders that don't have anything in them like our doc in our images So to get these are pretty much nonexistent. There's no reason to keep an eye on these But we do have our css in our js, which we see down here and that is because inside of css We have main dot cs cs and inside of our js folder. We have our main dot js So team what we're going to do now is we're going to add all of these files to what is called a staging area Now i'm not going to be super precise in my language in this I would like to be but it would take Forever in order to to get everything absolutely positively correct The goal here is to show you how to build your own websites and web applications So you can go out and you can build things For fun and profit. So team Let's add these files. So we are going to do a git add Dot and this is going to add all files and there's another command we can use it's called dash dash a l l And so again, we're just adding all the files to our staging area and we can do a enter and now if we do a git I forget these commands sometimes even while i'm talking about if we do a git status We can see that now all of those files have been added So what we can do is like say for instance working on something and we want to add something We can add that but we don't have to add everything team All right, just to just to let and you'll see how this all goes So right now we've added all of our files in our project to the staging area that all the files that we want to track Now we're going to commit these files. So we're going to do a git commit dash m and then we're going to type a message and we're going to call this the initial commit And now we have made our initial commit if we do a git status is going to tell us that our working our working tree is clean So what this means is this means that all of this code everything that we've typed so far Has been preserved and we can go back and we can access it any time we want and from here We can build on top of that foundation if we get something wrong Then we can just go back to a previous version team Now we're going to check out another branch. So if we do a git Branch we can see that we are on the master branch. So what we're going to do is we'll create another branch for each Different iteration of of software that we want to create to you So right now we're going to run the command git Check out and we're going to do a dash b That means hey, we're going to create a new branch if this branch doesn't exist And we're going to name this branch. We'll put it inside of a double quotes We can put it inside of single quotes as well. We're going to name this branch to zero zero dash initial html And then we will hit enter and we'll save that and now we're on this new branch if we do a git branch Boom, right? So we see we're on the initial html branch So now whatever code we write is going to be on this branch And I'm going to show you guys a cool trick to go along with this team So what we're going to do right now is we're going to open up visual studio code and to do that So we just do a dr We're inside of our project directory where all of our files are and we want to open this project directory in visual studio code So we're going to type code dot And we'll hit enter and now we're inside of visual studio code and inside of visual studio code We're just going to click here in this welcome screen We're going to hit control w to close that out and now we can see All of our directories and inside of those directories We have the files that we created and we also have our index dot html So what we're going to do now team is we hit the windows key Actually, we won't hit the windows key We'll hold the windows key and we'll hit left and we'll move that window to the left and now it to access Hey, what window do you want to put? Over to the right We're going to say we just want to put this one over to the right for now But what we're really going to do team is we are going to open this index dot html by clicking there And down here at the bottom I have this button that says go live now I'm going to switch my screen real quick so you guys can see more of the actual desktop And we will do that let's see there we go All right team So now you can see more of the desktop we're going to hit control b To close out this sidebar So we'll click inside of visual studio code control b to close that sidebar And now down here you see this go live If you click on these boxes right here click on those open those up and type in live Server you're going to get a piece of software that pops up here at the top This is an extension that will give us the ability to run a live web server on our local machine So we can view our website as we make changes to a team So just click on live server go over here and install that and once it's installed You should have this icon at the bottom So I'm going to hit control w to close that out And we're going to go back up and click on these two pages to bring back our files We're going to our index.html and then we'll start up live server team Now when we start this up, I'm going to hit the windows key I'm going to hit left to bring this off to the left side of the screen So now when we hit alt tab we can tab through our three windows team And if there's more windows here, but we're only working with these three So we'll be able to tab back and forth and do what we have to do team Now that we're in here what we're going to do is we're going to go into our browser We're going to click this plus sign and we're going to type in supreme New yoke and what we're going to do is we're going to be going back and forth and we're going to have different tabs We'll have our main page and we'll have other tabs up here that we can use in reference when we got to find stuff Out on the internet and in whatever else we have to do team So what we're doing now is we're just looking over the page structure right and I can see right here We have this logo then we got a clock and we have this navigation with all these links And then we have our social media links and this right here is giving me a little bit of an indication Of how I want to lay out the web page and what kind of html i'm going to want to use team So what we're going to do now team is we're going to hit control b Well, we're going to go to visual studio code hit control b to close out that sidebar And we're just going to style this up in some html really quick So in visual studio code if we hit shift Exclamation point and we make sure our language if you go down here to the bottom and make sure our language is set to html And to get to that menu even quicker you can hit control plus k at the same time And then hit m and this will bring up a menu and you can just type in the language that you want to use team And i'm going to show you a bunch of more tricks in visual studio code as we go along So you enter the exclamation point and then you see this one it says emit abbreviation and down here You see this three it says emit abbreviation if we hit tab there It just gives us a regular old dock type and then we can go and type all the rest of the stuff we need or We can hit control shift k delete this line hit shift exclamation point to bring that back And on this one exclamation point if we hit tab it will give us a template of a html document And i'll go through this real quick team. So right up here in dock type So what we can do now inside of visual studio code is we can type an exclamation point and with one exclamation point If we click that it'll give us a full page template and if we go back we'll do a control We'll do a control shift a i mean a control alt a Ah, geez control a to select everything backspace and then we'll do a shift exclamation point And if we select these three it just gives us the dock type now sometimes all we need is the dock type We don't need the other stuff, but in this case we need everything team. So we'll hit control I mean we'll hit shift exclamation point and hit tab and now this will give us our our Base html layout and i'm just going to go through these right now and tell you what every tell you what everything means team Here at the very top we have the dock type and we're just telling the web browser whatever program is going to be reading this web page We're telling the hey, this is a html document. So you're going to parse it as a html html document So that piece of software is going to be looking for particular tags Now if we go down here, we got a html tag and we're saying hey We're using html and the language that we're going to be using is going to be set to english So this tells the browser hey, we're using english characters When we get down here into head this whole head section tells the web browser or whatever software is looking at this document It tells it What this document is all about and inside of the head section we have right here our meta char set This just says we're going to use the character encoding of utf 8 Which gives us access to all of the characters for all of the the human languages plus all of the emojis and some other stuff When we get down here into Meta name Viewport in the in content with device What we're saying is we're telling the web browser Hey When somebody open or or any other kind of software because we can make user interfaces for other programs using Hypertext markup language So when we get down here and it says the viewport is is saying whatever device is looking at this code We want you to set the viewport And that's the the place where people can see We want you to set it to a width of 100 and we want you to set the Well, we want you to set we want you to set the width to the width of the device And we want you to set the initial scale to one So basically all all this saying is saying hey The screen size is going to be whatever the width of the device is and if it's a browser Then the screen size is going to be whatever we set the width of the browser to And then we're saying make everything on this page a one to one scale Based on these initial settings and this is going to make our page responsive So as you can see like when we go and we double click Supreme well when we click the supreme website when we resize this like the background changes things move around This is a dynamic website. So it's going to scale up and down From desktop to mobile now It's not like other sites like you see like when you go to amazon or something like that Because it doesn't have a lot of content on it But once we understand the core concepts of all of this stuff you can build anything So you can go from building something that looks like this to building something that looks like amazon.com And amazon.com uses the same Setup to scale now it doesn't scale all the way down But you can see the page makes changes as we move around as it's a huge site And it has a lot of different things going on But don't get wrapped up in that stuff What i'm going to show you is i'm going to show you the foundation the fundamentals team. So let's roll So we're going to go back to our Page that's being served up from the server and we're just going to go over here And if you look up at the top you can barely see it on my screen But on your screen if you're following along if you look at the top You're going to see this ip address one two seven zero zero one five five zero zero Index.html this right here is the tab area and the browser when it reads in a web page all browsers do the exact same thing They look for the title of the document and they're looking in the metadata They're looking in the information section of the document that tells What the document is about and so they go in here and they find the title and then that title They will put up here. So if we save this We can't It it hasn't changed yet because we just have document, but if we do this if we say something like Superior superior save And we go over here and we refresh our page at the top we have superior because we have just Told the browser like hey the title of this document is going to be this Now inside of here We can also add some more information team and that information is called metadata and this metadata Is used by search engines in order to index websites So if we hold the windows key and hit up a couple times We'll make visual studio code full page and what we're going to do is we're going to add some metadata up in here Just to give you guys a super quick introduction to the kind of stuff that needs to be on a web page That's actually going to get it found on the internet There's a lot of courses and tutorials that teach us how to build websites and stuff But they don't show us Some of the fundamentals and a lot of them don't even explain what this stuff is So let's let's let's do this team. So what we're going to do is we're just going to put our cursor on this line right here We're going to hold down alt and shift. I'm going to hit down two times and over here where it says viewport We're going to change this to key words And then we're just going to select everything inside of these Quotation marks and we're just going to delete that and over here. We're going to put a description And we'll go back and get rid of this space and we'll get rid of this one right here So we got a description and over here is where we will put our description and we're just going to put learn to build websites and applications using html css and job script And then up here for our keywords we would use whatever keywords, right? So we got html css control c We'll paste these up here and we got to separate them with a comma So we'll just put a We'll put a comma here back and we'll go to the end of css And we will put a comma there and then we'll grab javascript c and we'll paste this here v and then We're looking for keywords. So uh learn to build so we're going to say learn to build websites control c control v And we'll put learn to build applications as well. So we'll put a comma and we'll paste that again and we'll go here and we'll put applications And let's see what else we got using html and we could so we could say learn html learn html learn css learn javascript And so on and so forth. So you guys get the point, right? So we're just putting we're just putting keywords in here and these keywords are related to what our webpage is actually going to be about team What we're going to do now is we're going to add some html So you can see how this thing is going to start out So what we're going to do is we'll just control s to save this I'm going to hit the windows key And hit the the left arrow. Actually, I think I hit the f11 key and made this full screen by mistake So if you ever want to go completely full screen get rid of all the bars and completely focus on your code Just hit f11 and that will make everything go away and it's just you and your code editor I'm gonna hit f11 I'm gonna hit the hold the windows key and hit left to bring that off to the left side And now we have our web page over here And that's being run off of our live server. So what we're going to do is we're going to grab this supreme right here We're going to drag this down and we're just going to hold the windows key and hit And hit left and then we're going to hit down and this is going to move this down And now we got our page and we're going to hit left Again until it comes back over here and then we're just going to hit up And so now we have everything laid out So we can see our web page as it updates and we can also see The our our example now typically instead of having like another webpage down here We have a mock-up that we created and like photoshop or some other application But because we're doing this right here this way right now We don't need that. We're just going to go by this right here So hop back over to visual studio code and put your cursor right down here in this body section And this is where we're going to start to write our html So I'm going to scroll up here and I'm just going to walk down this page And I'm going to put this in html format in just a way that I can understand right right now team So the very first thing we got is we got we got supreme and so for me This would be the h1 of the website. So we're going to type superior rior And then underneath that we're going to put a h2. So we'll hit control enter Actually, yeah, so control control enter to go down to the next line. And we're going to put a h2 And inside of there, we're going to put this date format that they have. So they have one zero dash One zero dash zero two dash two zero one nine And we've got the time format zero four 41 We need a semicolon. I will we need an actual call in there and then we'll put pm and they have nyc What we're going to put is we're going to put pnw for pacific northwest team So now we've got these two elements. We'll go down another line and we are going to put in a We're going to put in all of this news and stuff. So we're going to create an unordered list And we'll hit tab and then we're going to create a list item And what I'm going to do is I'm going to create a list item for each of these So we will go inside of this. We're going to type it news And then we'll if we hit shift and alt and go down We'll duplicate this line and we can just hold shift in the left arrow to go back to the beginning of there And now we can type the next thing. So we'll type fall dash And we'll make this so in case fall dash winter two zero one nine Preview and then again, we'll do alt shift and go down and now we can change this preview to look Bam and then we can go back up here and grab this news and we'll go hold control shift and hit down And now just hold the I mean not the alt not the control shift But the alt shift and hit down to duplicate it Now take your finger off a shift and just hold alt and you can move this all the way to the bottom And now we can do the same thing. We can go back here And we can change news to shop and we can duplicate that and go back And we can change shop to random You got about Outstores contact And we've got mailing list MAIL and g mailing List All right, so we've got all of those and now we need our social media. So we are gonna We're gonna add another UL so we'll go UL tab And inside of there will go li and they have A facebook li so they have facebook And we'll just shift and select these and if we hold Shift and alt and go down we can duplicate that and then we'll go here and we'll change this facebook to instagram And we'll do the same thing again And we'll change this instagram to I think that's the app store. So we'll go we'll go app store app store We'll save And now we've got our basic structure up here. So you see we have our Just like These guys over here We have our name. We've got our clock. We've got all of our Navigation deals here and then down here. We have our social media and this is what the basic HTML of this page is and if we go back and we investigate this html Just a little bit what i'm gonna do is i'm gonna hit control a and i'm a right click and i'm a go format document In order to just line everything up And we will take this over here and we're just going to scale it down a little bit And we will bring so we'll drag that oh come on. Let's see. All right, there we go And so now we can see more of our More of our code. So what we did is we used some basic html structures Now we're going to make this page a little more complicated going forward But i just want to give you a basic layout so you can understand how things are going here right so the body Is the body of our entire page and so everything that goes in the body is going to be what the user sees Unless we explicitly say we don't want them to see something And everything is going to be laid out on the page in the order that we type it But we can explicitly Position this stuff anywhere on the page that we want we can move things all around It doesn't it doesn't matter what we say in the code does not matter We can completely manipulate everything we can move news to the bottom We can move mailing lists to the top we can put this ul above this ul We can put the heading at the bottom. We can do whatever it is we want team And so that's one of the hard things for people to wrap their heads around when they're going out and they're learning this stuff so Inside of our body we have some tags and right we're using the h1 and h2 and these go all the way to h6 And what h1 means this means the most important thing on the page Without going too deep into this right now what we want to have here in our h1 tag is not necessarily the The title of the page or the title of our business or the title of whatever we want to have what that page is about now when we typically when developers And designers are creating this stuff. They're writing html. They're thinking about The logical elements how this is going to look on the screen So we know the default styling that the browser applies gives these things certain priorities. So the h1 is the biggest H2 is going to be the second biggest and then we have our list items Which have these bullets next to them So the browser is giving it this basic styling and because this is the the most basic styling in the standard For for laying out html documents and now there's a bunch of more elements that we can use for all different kinds of stuff But just to give you like an overview of it Using these these main elements Browse, I mean not browsers, but developers and designers. They think logically like this They go, okay the h1 that's going to be like whatever we want to be the most dominant on the page And then the h2 will be the second thing when really That's good in order for the way the page is going to look to people viewing the page But it's bad for search engines because the search engine while we have up here in our keywords in our metadata We say html says javascript. We have all this stuff and then you get down here You have this word that's completely unrelated to any of this stuff up here So a computer doesn't know what any of this stuff means a computer has no idea what superior is It doesn't know why there's a clock here. It doesn't know what this list means It doesn't know any of this stuff and none of this stuff references anything related to anything in our keywords or our content And so when people talk about seo They they they're typically talking about they're talking about this kind of stuff, right? Like putting on our web page things that are related to what the page is supposed to be about but At the same time, we don't create layouts like that or like we don't think through this process when we're Design and stuff so we what we end up with is we end up with a bunch of really nice websites on the internet That nobody ever finds because the search engines don't show them to them because the search engines don't know how to properly Categorize these things So like in this case like if we just if we give it like a critique of the superior web of the supreme website The question would be it do they want traffic? Do they want people who do not know what the brand is to be able to find them? and if so Then how can they build this web page in a way that people because people They aren't going to go online and just be like supreme like when they think about clothes They're going to go to google and like i want to buy some pants or a shirt or a hat or what's the like The best luxury brand or whatever they're going to be looking for stuff like that in the search engines That's what they're going to be indexing based on And so when people do those searches, they'll find them But based on what we have here when people do a search, they'll never find this page In relation to to code right bro for me is code but for these guys for superior is code But for supreme is clothing. So nobody's ever going to find them Based on that thing unless their keywords match and then the the rest of the website sort of falls in line And then they build authority through link clicks and stuff like that So anyway team that is that that is a bit ways ways off But just to give your overview if you want to know more about html and how to build not only web pages that look good But also how to build web pages that that get found in search You're going to want to check out the code 365 startup lab team here at the code 365 startup lab There are free courses that will introduce you to web development the tools you need in the basic languages We don't have javascript here yet, but javascript is coming And also if you want to support the channel and you want to go deeper into any of these topics I would register for the code 365 startup lab inside of here There's already a bunch of content, but we're going deep on html css and javascript I'm uploading new videos on a regular basis team And all of the stuff here is designed not to teach you a particular technology per se But how to think through the processes and use the knowledge The deep knowledge of the very basics of web development and application design and building In order to be able to go out and build your very own stuff and right now for a limited time team You can get a lifetime membership for $99 lifetime membership This is access to everything that you see here already Plus some more stuff and we got more courses coming down the pipe And i'm going to be uploading tons of information more examples more more Tutorials on building particular websites Building particular different types of applications I'm going to be uploading templates resume templates all different kinds of things team So if you want to be one of the first people to support the code 365 startup lab Go over here sign up for a membership team And if you just want to check it out, you're not too sure about the $99 for life Then you can sign up for the $20 a month plan and just check out everything And then if you don't like it you can cancel it and if you do then you can upgrade to the $99 before the price goes up team So what we're going to do now is since we have our basic basic structure team We're going to go back over into power shell Wherever where where did you go and we got power shell right here? And we are going to do a get And actually let's clear the screen to make this look decent And I apologize because my uh This name thing up here is in the way. So let's move that out of the way real quick All right team. So hopefully you can see right up there at the top of the screen And actually I'll just drag this down a little bit and what we're going to do is we're going to do a get status All right, let's try this one more time. We're going to type clear boom and we're going to do get status All right So we've modified our our index.html and it's telling us that and if we do a get diff It'll show us the changes. So if we hit space we can see everything in green Is everything that we have changed so we've added all this stuff and the only thing we've deleted is this one Space right here. So this is all new content. That's what this is telling us So if we hit q we can get out of there. We'll type clear and we can do a get add all We'll add everything and now everything's add if we do a get status We see that modified his turn green now we can do a get commit dash m and the message is going to be Wrote the initial html code And we'll hit enter and now that has been committed now. This is where get gets cool. Let's say for instance We've done all of this basic stuff But we want to go back and we want to try and lay this out in a different way But we want to keep all this same Styling we could go back to master so we could do a get check out master And we go back to the master branch and our page over here disappears And that is because inside of our original html There is no there is no um, there is no code like this code doesn't exist. So we'll do a get check out Actually we do get branched so we can see the branches And then we'll go here. We'll select zero zero initial. We'll copy that by right clicking and then we'll do a get check out And we'll paste that back and we'll hit enter And let's see switch to branched zero zero initial html if we go over here We hit refresh then all this stuff comes back now What I want to do is I'm going to save this and if we go back and we do a get status now It's going to see it's going to say that that file has been modified So what we can do is uh, let's say we let's say we change something in here, but we don't know we can do a get reset Dash dash hard and it's going to go back to before we made that change And so now we can see Is back before we made that change But that was the only change we made was we repositioned everything on the web page So if we go back over here, we can do a get status and it's going to say that everything is clean So what we're going to do is we're going to select all of this again We're going to right click and we're going to go format document now everything's laid out nice and neat We'll save that we'll go back over here and if we go up a couple times and check out get status We can see that a change was made. We can do a get diff to see what that change was And we'll do space and we can see all these different changes the red is everything that changed and As we know we just moved some stuff around we didn't delete anything All right, so we'll quit to get out of here and we'll do a get add Dash dash all actually we'll do a get add dot and then we'll do a semicolon and we'll do a get commit dash m and we'll say Format it The html So it Can be read easier So we'll hit enter and that's been committed and now when we do a get check out if we do get check out master Everything goes back to the way it was before All right, so there's no code here. We didn't type anything out and we can start from scratch all over again Or which is what we're going to do in this case. We'll do a get branch To see our branches. We're going to select this one right here again. And actually we can just scroll up And let me make this window a little bigger We'll we'll clear we'll clear all this out clear And then we'll do a h and we can see the history of all the commands that we've run before So we've done this get add all we've done this get check out before so look get check out 00 initial so that's 44 we can type r which means run 44 so we're going to run number 44 from the history And we go and we switch over to that branch and like here is telling us something in line char one I think it's just we we gave it a switch. So if we do a get branch So we we added something in that command that power shell didn't understand the branch All right, so now we're on this initial html branch and we can go from here And if we go over here, we fresh our page all of our content comes back Now we can use this as a baseline to go to the next level of our project. So The next level is going to be a get check out Dash b and this one is going to be 01 and is going to be our initial Styling STY LNG And now we're on this initial styling branch and on this initial styling branch We are going to begin to go and style our code to match the This layout right here team Now before we go down that road, I want to take a closer look at this html because there's some things We can do that are going to help us out in the future We can take we can use some other html tags to group this html In ways that will make sense and make it easier for us to code later on So let's get started team. So the very first thing we're going to do Is we want to be able to style this entire page. So we're going to make a wrapper So we're going to do a dot wr actually is going to be a hashtag Wra pper and we're going to put a tag tab To complete that and now we have a div with the idea wrapper and inside of this wrapper We're going to put all of our html. So if we go down here and we grab everything after that div All the way to the end of our page Just before the body and control x and go back up here We can paste this all inside of this wrapper div. So now we can style this wrapper And everything else is going to be inside of there now inside of our wrapper div I'm going to add another container and that container is going to be our content container. So we're going to go id content container So we'll do dash container Tab and then we'll hit enter and inside of our content container We're going to put all of our content. So everything underneath here again all the way down to this ul We're going to cut control x and we'll go back up here and we'll just paste that right there. So now we've got We've got these two containers. So we've got a wrapper Which is going to be the whole page and then we've got this content container Which we're going to use just to to sort of group and wrangle And style this content that's inside of there and now we're now that we're in here We're going to Further group this content some more. So what we'll do is we'll go down here and we'll make a div and we'll call this the the The header section. So we'll go dot Actually, we'll go asterisk header And then we'll hit tab and we'll hit enter and we'll go down and we'll shift Select these two and if we hold alt we can move these up and go down control shift k to delete this line And now we have this header And down here this first you this first ul is going to be a nav element Because it's navigation. So we're just going to say nav And inside of there, we're going to put this first ul And what we're going to do is because we're going to have multiple navs We're going to have another nav down here. So we'll enter here We'll put nav and put a tab and then we'll hit enter and we'll grab this ul and we'll put it inside of this nav here And because we're going to have multiple navs, we can give these both a class of nav So we're going to grab this one and we're going to hold the alt key And we're going to put our cursor inside of this nav and now we'll put a space And we'll go class and we'll give it a class of main nav main Dash nav because this is going to be our main navigation Now what we can do is if we hit escape we'll go back to one cursor We'll copy this class control c and go down here to our Our other class will actually we don't have to copy it. So we've got main nav. So we've got one main nav here And this is going to be our secondary nav. So we'll give this a class of secondary And this is just so we can style these Later on so we've got main nav and secondary nav But we're also going to give these both a class of nav So now we can style both navs at the same time With whatever styling is going to be the same between the two And we can style them individually by using either their uh by using their individual class names Now these could also be id's too So we could have an id of secondary nav and id of main nav and that might make it easier for us to lay this out Or think about it in our head. So we're going to cut this one out So we'll control x and we'll go over here and we'll just put id And we'll paste that right in there and then the same thing we'll do this here. We'll cut this control x And we'll go back and then we can do a control v We'll actually do Let's see nav uh id tab and then we can paste that in here now the deal is with classes Classes you can have multiple classes, but id's you can only have a single id So we can't have multiple id's in here, but we can have multiple classes. So say for instance We wanted we wanted to style these exactly the same But we wanted to target them individually We would use that other method where we had the main nav class and we had the secondary nav class Now if we're going to have a id with that name We don't want to have we can have a class with that same name But we don't want to have a class with that same name team because we will begin to confuse ourselves So the best way to think about it is if I want to control the look and feel of multiple things Then I give it a class and I can call Call call it by that class name and then I can control all these things or I can give Um an individual id where I can call them just by their id So when we call main nav, we're just talking to the main nav Nothing nothing else out there We can we can touch and what what this does is it makes it easier because We can target Individual items right normally we could just target the html, but maybe we don't have maybe there's no tag to to signify What exactly it is we're doing and so or we want to want to make our code Useful in some other application of some other form somewhere Then we can add this additional information in the form of classes. All right team And this also lends itself to ways we can do this stuff kind of Programmatically too. So like let's say for instance We have this class down here and we got it set to nav If what if we gave it a class of social media and then we wrote some code that said hey Whenever an element that is a nav has a class of social media We're going to look in the li's and we're going to read this text and whatever this text says We're going to replace it with the icon So then we can build this whole library Or this whole framework to build applications like this So we could literally go in and have all of this stuff set and we can say hey Right when whenever an element contains whenever an element contains some particular information Then we're going to do a particular kind of thing So we could build a program that literally says hey like when we write some code that has nav And we put these li's and we put you know, whatever in here When that code comes out these are not going to be text. They're going to be icons Or or like this up here. It won't be the word news It may actually put in like the the first page top news story from cnn or something like that So that's how you can begin to think about this stuff in sort of a programmatic way Now if we have li's and they're all li's if we target a li to do this Then this what happened with all of these pieces. So how can we break this down so we can control Individual parts. So we're starting with the nav and then inside of the nav We've got this main nav So now we can target that and then we can target main nav UL or main nav li or main nav li that contains, you know fall winter to 2019 or whatever So that's a way to think about code team. So now I believe we have our basic structure here What we're going to do is we're going to control s And then we are going to go back and we're going to do another get commit And we're going to call this we're going to do a get add all And I'm just looking all right So we'll do a get add all we'll add a semi colon and then we'll do a get commit and we'll say Added Additional structure To the html html to make it Easier to style We'll enter that and now we've made that commit and we can go And we can carry on to the next step in this process team So what we're going to do now is we're going to type in clear to clear the screen And then we are going to do a get check out dash b actually Let's uh hit escape to clear all that out We're going to do a get branch to see what branches we have now and now we're going to do a get check out dash b And we're going to name this zero one and we're going to call it initial Styling sty li initial styling Then we'll hit enter and we'll do a get now we're now we're on that branch if we do a get branch We're on this branch now we can go do our initial styling team and actually team I changed my mind I don't want to do initial styling. I want to do Some structure so we need to add more structure to our page just so we can be able to style this right now We have our ul's and our li's But I want to group some things together and I want to add some id's and some classes to them So what we're going to do is we're going to hit the up key to bring back that get checkout command And instead of initial styling we're going to put um add Adding a dd adding structure And so we're just explaining to ourselves what this branch is is supposed to be for And I'm numbering them so that I can see them in order and I can see the process that I went through all these things Now you don't have to do it this way. I don't know if anybody does it this way But because of the way I do tutorials I would like to to sort of track how I go through things in case I need to go back I can just get rid of everything I did and go back to the last place the things were working So and this is just and this is also Format in a laid out in a way in order to show you how get works and how you can use it and give you some Ideas on what what this tool makes possible. All right, so team. So we're going to create this one and then we are going to do a get Branch and it's going to show that we have three branches and now we're just going to go back and we're going to rename this initial styling We can name this We can make this branch Zero two and so what we'll do is we'll copy this to the clipboard And over here, we'll do a get branch And a dash m for modify and we will paste in This and then we want to change that so we'll paste it again and we'll paste that to uh, zero two And now when we do our get branch After we hit enter, of course, and when we do our get branch We see that we have this branch this branch in this branch now zero two Is going to be based on A branch that is older that so right now when we go in and we add our structure when we go into zero two It's not going to have any of the structure that we added But i'm going to show you how to fix that team and how and how we can just keep driving along But for now what we're going to do is we're going to stay on adding structure And we're going to go back to our html and actually we can do a get the status and we can see that nothing is We haven't made any changes and now we're going to go in and we're going to make some changes to our page. So first We're going to make a wrapper And this wrapper is going to go around our entire page. So we're going to call this uh app We're going to give it an id of a wrapper And then after the r if we hit tab it'll just complete and i put a e there So we'll put a r and then we'll go down and we're going to grab all this other code And we're going to put it inside of our wrapper So we'll just grab all of this h1 all the way down to the bottom of our page to this last ul control x Go up here and control v. So now we have our wrapper and inside of that wrapper We're going to add another container that's just going to contain all of the content on our page So we can give this a width and then center it in the in the middle of the page So we'll give this an id of We'll go and actually we just type id. Well, we can't type id. We would have to type like a html tag or something but using email if we just type this Normally we would have to type div and then Inside of that div we would go id and then we'd hit tab and we would give it an id and this id is going to be content container And we'll hit enter here and actually not there We'll put Enter here and then we'll grab all this content again So we'll just go all the way to the bottom of the page control x And we'll go back up into this div and we'll tab and we'll paste this in there And now we have this container that'll contain our content and we have this wrapper that'll contain our whole page Now let's create some containers for this other stuff. So we will call this the header h-e-a-d-e-r And header is an actual built-in Tag for html And what it does is it just tells other software browsers, whatever that hey this part of the page contains all of the The description and information about the rest of the content on this page. That's what this is That's what this is intended for But a lot of people don't use it that way and we're going to use it our own way too So we're going to give it an id and we're going to call this the header Save and actually we don't even need to do that because there's only one header. So we don't even need an id But we can give it a class of a header if we if we want and then that would Enable us to style all of the headers on all of the pages across our entire website the exact same way So anyway, we're just going to leave this as header and then down here This is going to be a navigation. So we're going to give it a nav Which is a built-in html tag and we'll hit enter and we'll put this ul inside of this nav So we'll control x and we'll paste this in here And we're going to do the same thing down here. We're just going to make another nav And we'll take this and we'll put this inside of that nav control x and control v Now if we want to style our navs All we have to do is grab the nav tag and then we can style our navs now All of our spacing is all kind of messed up right here. So what we're going to do is going to do a Right click and we can do format document and it'll fix all of our spacing really quick So now that all of our spacing has been quick I mean all of our spacing has been done what we can do is we can We can add some additional information in order to style these things individually. So we have two navs So we we can style both navs that we need to but we should give them individual ids in case we need to style each One individually So in the inside of this nav we'll go id and we'll give this id of main dash nav And what i'm doing is i'm using a A dash in between these just so I can remember in my mind that When I go to style these and over in the css That um that I use this sort of naming convention and it'll be easier for you to remember Okay, the main nav it has an id of main nav So I'll just grab that and then we'll have this id and we'll give this an id of Well, we we could call it secondary nav or we can call it social. We'll call it social media nav So now this has an id of social media nav And now we can style that any way we want and when we really get into like and not necessarily in this course But when you get into javascript And you start to think about how applications are structured you begin to think about how all these things go together And so if we can reach out and we can grab the navigation that has an id of social media nav Then that means we can grab all the content inside of it So we can loop over this content and we can say hey if the li contains a particular keyword Then we're going to replace this with an image And so we could write a program that makes it super easy for us to add social media icons to any web page Just using a javascript library that we create That says hey right if they if I receive uh this input and it has this element or it has this tag And it has this id Make controls because I made a change there and it has this id then Look and see if it's a part of a list and if it is look at the list item and see if the list item matches a word in this database And if it does then replace that word with this image of this social media icon And and and once you realize that like you can begin to make all kinds of stuff for all different kinds of Of uses and applications and programs or whatever team. So there's just another way to think about this So we're going to give this social media nav And now we have these two nav. So we've got our wrapper which we can style. We've got our content container which we can style We've got our header which we can style And then in here we're going to give this an id of logo text And this h2 we're going to give this an id of Clock And so now we have our initial structure and we can go in and we can begin to style all this stuff So what we're going to do now is we're going to save by hitting control s And if we have multiple documents open and we want to save everything We can hit control plus k and then s and that'll save everything We're going to go back over here to our power show window. We're going to clear this all out We're going to do a get the status and we will be able to see what has changed and if we do a Clear and then a semicolon and a get diff It'll run the clear command and then it'll run this get diff command and we can see the differences And if we hit the space bar, it'll page it down and it'll show us The changes that we've that we've made and so we can keep doing that and we can see everything that we've changed So you can see like we've got all this code here And it's showing us that we've gone and we've added new code So we can hit quit we can hit q for quit and we'll clear this all out and we'll do a get Add dash dash all semicolon and then we'll do a get commit dash m for modify and we're going to add that message in here and our message is going to be added More structure for better Page styling and we'll hit enter and that is that another get the status Boom and now we have our initial actually i'm sorry get status Now we have our initial page structure saved so we can go on to our other branch now if we go get branch And look at our branches and then we do a get check out and we're going to check out zero two Because that's where we're going to add our initial styling so we'll put a space and then we'll double click Right click and right click again and hit enter now we're on this branch and you can see on this branch We don't have any of that initial styling I mean not that initial styling, but that added structure that we had before and that's because When we made that branch that stuff didn't exist So what we can do now is we can bring in all those changes so we can do a get Merge And we can merge in the changes from this from this branch So we'll grab our added structure Our adding structure and then right click and right click again So now we're going to merge our adding structure. Well, actually we're we're on adding structure. Hold on. Let's let's Let's double check this right. So we're going to do a get Get branch. All right. So what we're going to do is we're going to check out All right, so we're on initial we're on initial styling So we're good. So if you're not on initial styling check out initial styling And what we're going to do is we're going to merge in adding structure So we're going to do a get merge and then adding structure. We'll double click right click right click and then we'll hit enter And it'll bring in all those changes and now we can when we do a get status is going to say we're on a clean tree So now we can go on and we can Add our initial styling and we have all the structure that we had from that previous commit So what we're going to do now is we're going to jump into our main that CSS and I have that open here But I'm going to close it so I can show you a trick So I'll close main that CSS and what we can do is we can hit control P and we can type CSS and it'll show us all of the files in our project that have CSS and if we want to do HTML We could do the same thing or we could do JS it doesn't matter So we'll go CSS and that's how we can quickly move between files team so what we're going to do now is we are going to call the The ID wrapper and we're going to apply a style to it So we're going to call up a wrapper and we are going to put some curly brackets and The with the style we're going to place on it number one is display flex This is going to say all of the content that's inside of the wrapper We're going to display flex so this means we can use flex properties for centering and Aligning all of our content Now we're going to set our width for this to 100 view widths and this is just going to say hey Center this across the entire page and actually before we do that what we'll do is we'll comment this out and we'll do a control Enter and to make a blank line And we will put a background color background color of Black Well actually we'll put dark gray dark Gray So we'll go dark slate gray and we'll save and if we go over here and refresh Let's see our wrapper display with Okay, so it may not be showing yet because We haven't given it a a with attribute so let's see so we'll go back and put our width here and we'll go save and It's not showing which tells me that something is not right actually. Let's check this background We'll go dark Gray again, we'll go dark slate gray and we'll save that and Here let's do this. We'll close out our live server. We'll Close that and we'll open it again We've got live server back. All right, so now I know that the problem that I'm having is because of my HTML and CSS and I think we need to set the height to so we'll go Height actually what we can do is we'll just control Well, well now that we're on this line We'll alt shift and we'll just go down and we'll set this for view height and we'll change the width We'll change this to height hight and we'll save and still Nothing what is going on here? background color with height So I see what the problem is if we go back into our index we haven't added our CSS so we're going to do a link and Hit tab and then in this where it says hreff. We're just going to put a dash We're going to put CSS and we're going to put main dot CSS and when we save we get this background Now we've got this white border around it and we don't want that white border So if we go back over here to our CSS if we go up here to the body vo dy and We do a padding Zero and a Margin zero and they are gin Zero set those and we'll hit save those both go away Now we have this initial styling that's still set by the browser We can leave that if we want or we could set everything so we could go here and take body We could set everything to zero and then we could just start and style everything ourselves So this is what we'll do team. We'll just leave this like this and we'll style Everything from here on out on our own Now we're going to go down to the next line and we're going to add an align Items and we're going to center those items and we are going to do a justify Content and we are going to center that content now What the align item does is it takes the items and it aligns them center on the page And I can't remember if this is from left to right or from top to bottom But it's one of those two and then justify does the same thing I think justify will move our content down on the page So if we go here like this and we hit save actually so justify moves it to the center But there is another way like if we were to go instead of the if we set display flex and we set flex direction to column Then that will move it down to the center of the screen So we'll leave that like so we'll get rid of this flex direction Control shift K and we'll save and now it just goes over here to the center and we add our align items Is going to move down to the center of the page and so flex direction would do the same thing So if we go back here and we do a flex Direction and then we go column save it would still be in the center is just that the axis would change So now our align item which uses the Which uses one axis it would be shifted to the other and justify Content center which uses one axis that would be shifted to another. So that's it's a little bit confusing team But if you want to dig deeper into flex box I would definitely check out the code 365 startup lab dot com Where I'm making courses that go deeper into that stuff team. So now that we've got our wrapper in the center of the page I mean not not our wrapper but now that we've got our main container And so what we can do is we can go down here and just to show you guys We can go grab our words that are get our content container So we'll double-click. Well, actually we'll select all of this control C. Go back to our main.tss add a asterisk control V and then a couple opening and closing curly brackets and inside of there we can put a background color of We'll just go orange or our A and G E orange red and Semicolon save and now you can see we've got this background color here behind our content now notice that the these these uh The the dots for the unordered list they fall outside of this content because they don't fit with the The margin in padding of the individual words And so it's kind of it gets kind of complicated to explain But if we wanted to encompass these then we would add some sort of padding so we could go padding One pixel or something like that and then it would move over a little bit But like we want to encompass them all so we would set our padding to like let's go five pixels and see what happens five and still not enough so we'll go 10 and that's not enough so we go 15 and That's just enough and we can go a little wider just for comfort and save And so now we've encompassed all of this stuff and what we're doing is we're styling this Container in the background and because we gave that container because we gave this a Because we gave this a display of flex What it does is it takes this content in here and because we removed our padding on our margin from everything in the in the body so like all these major all the major HTML elements Then what happens is we get this we get this this little container And actually if we go if we go up here and we take off our line items this box will just move up To the to the top of the page and so what we're doing is when we say display center We're saying hey right we're gonna we're gonna take control of all this additional space And we're just not gonna have it there And so that's like when we that's when we when we add these styling these styles This is what's happening, right? We're just telling it. Hey, right? We're gonna we're gonna make this a container and we're gonna center and we're not gonna take up any extra space All right, and so that's why we get our content container down here at the center of the screen Now to make this match a little more to the design that we're actually creating what we're gonna do is we're gonna take This background color and we're gonna make this We're gonna make this black and we're gonna give it a opacity of point seven Save and now it's a little gray and actually that's not what I want. I don't want that opacity So we're gonna take that out We'll go control shift K and we'll save that so we'll just have a black background for now And then later we can replace that with the image and then we've got our this area here what we can do is we can take off this color all together and Hit save and now we can't see any text, but we can give this a color of White and that's gonna make all of the text white. So just go here color White and save so now all of our text is white and then we can do a I think a Content a line Center and I may be I may be wrong what I'm thinking about is how do I get all of this other stuff center? So let's do let's see if we can do a text line and then we'll do a center save and now all of the text Is moved to the center, but we don't want the navigation to be Aligned to the center. So we'll have to come up with a different way to style that So for now, what we'll do is we'll go down here and we can say header And we'll hit save and nothing's gonna happen, but we can take this text a line and we can move this down We'll get rid of this blank line and we'll go save and now our text aligned art Not our tech the line, but now our our our heading group is aligned to the center But our navs are still not in the center So now we're gonna go up to our content container and we're gonna set the content container display to flex and what this is gonna do is Initially when we set something to display flex it set it makes it so all of the the content is laid outside by side For the content that's inside of that container. So if we go back and we look at our content container It contains a header it contains this nav and it contains our social media nav So it contains all those things. So now they're all lined up side by side. We got our header up here We've got our Facebook nav. I mean if we got our main nav here and then we got our social media nav So what we're gonna do is if we go into our CSS we can change that direction. So if we go Into our content container, we can say flex direction and this is what I was talking about before Flex direction and we could change this to column and now our direction is gonna go up and down So if we save that now everything is up and down if we look over at our page We can see right now Everything is lined up But when we make this bigger The the text is indented just a little bit and that's because this is based on some sort of Width that they have set and then as the window gets smaller That text sort of moves over until everything sort falls into the same Position so as you can as you see like when we move at this point There's a break point right here that says hey, we're gonna remove whatever margin we have on this text And we're just gonna move it. So it's directly underneath everything else. So we want to get that. I'm not really Sure about how to do exactly what they've done, but we're gonna we can produce something that is Will work just as well if not even better So what we're gonna do team is if we go down here into header because we've changed our flex direction What we can do is we can do a justify. I think it's justify content just if I content and Actually Not in not inside of our header team So we'll get we'll get rid of this line by hitting a control shift K And then we'll go back up here and we'll do a justify content and we'll do a center Save and that didn't work. So let's do I think maybe a line content or content line content Yeah, so there it is a line Content center save and still all right. So we've got content container. What's going on. So display flex All right, team. So I got rid of that entire line and what we're looking for is we're looking for justify content All right, so we'll grab this control C go down here control V control s Justify content. No not justify content team. It is a line item. Let's see. So we'll go back here Lig in Dash items save and now we've got our text that's moved over just a little bit now if we go and we go out And we move this around Everything everything sticks in place. It doesn't we don't have that break point But if we want to add that break point where that this this indentation goes away We can't another thing that you see is that down here This nav is indented as well and that the reason why that happened is is because of the the the The social media nav is outside of our other nav and this other nav is wider than the social media nav So this goes over further. So what we can do is we can take a look at that here If we go here and we do a nav and We add a white border Around everything so we go border one picks solid Actually, we'll do like we'll do dotted dotted or dash dashed And we'll do like a light blue light and blue save and now we can see like we get this border around these two and this This social media navigation isn't as it's not as wide as the other one So we end up with this issue where this gets centered. So what we can do is we can take off this kind We can take off this inline item center And we can save and now everything goes back to the left. But what we can do is we can add padding PADD ING padding left of Of and we'll put like 25 we'll put 30 pixels 30 pixels and save and actually Oh, that's And we will move this down here into our nav and we'll hit save and now all of our nabs are moved over And we can do that again. So let's do it like we'll go Let's go 40 pixels save and so now they were all saved and since we're in here Let's do this. We can add a list style type and we'll make that none and we can save that Hold on. Oh, I know what it is team. We got to add it to our li So it is going to be in our nav Uli so what we'll do is we'll go down here and We'll move we'll just move this header up here closer to the top So it makes so it makes sense So it's like sitting in a place where you'd expect to find something with the name of head So we'll shift all the way to the end of this. We'll move this up to Like right here, I think and we'll move it again if we need to But we can go back down here to our nav now. We'll save that and as you can see nothing's changed over here We'll go back down and We'll go and we'll create another one down here and we'll go nav Uli and then inside of there. We'll go We'll take this list style type. We'll move this down here control shift k to get rid of that line and save And now all of those go away now. We need some spacing So if we go back and we look at The actual supreme website, they've got some spacing right underneath this header And they've got some spacing right underneath this nav And so what we can do is we can do that too. So we'll go back over here to our html And we've got our Let's see up here. We've got our content container our logo text We've got our header So we'll go back into our main and right underneath. Well here header text the line center. We can go margin bottom b o t to m and we can set that margin bottom to let's say We could go like 25 pixels And we'll save and now we get this Space underneath not a lot, but let's see We can break this out and we can move it right here and we can grab our css And let's break this out. So we just grab this window down here and we can resize it over like this And now we can just see all of those at the same time And so we can add some more spacing. So if we go up to our header, we can change this to let's change this to 48 And save let's go 66 save And as you can see like our box is kind of moving up as we do this So this is lined up, but this is getting further away and that's because we have our center set by Is is basically determined by whatever the height Of this element is so we add more space the element gets taller. So let's try this. Let's try 100 pixels 100 pixels Save All right, and so that's a little better and then down here under our social under our nav we can do Main nav so we've got our nav and we'll go main dash nav And that has the id so we'll use that id Let's go back Control shift enter to put a line there and we'll add our opening and closing curly brackets And we can go margin Bottom and we can set that margin bottom to let's do like uh 50 pixels 50 pixels save and now We've split this up kind of like how they have it and let's go back. We'll make this 33 save And then now a little a little a little better team Now if we looking here inside of our main nav, we've got All of our text, but it's it's spaced out In the in their site. So what we're going to do is we're going to go inside of our main nav And we can do a we'll go down here. We'll go main dash nav We'll go ul and li And we can say padding Well, actually we can go Let's see. Let's see. We can go padding top padding Top And we could go like uh, let's go 10 pixels 10 pixels save And now We get this spacing and I edit the padding at the top because I didn't want to create any more padding at the bottom But we could ideally I mean we could go padding top and bottom so we could go padding top and padding bottom 50 I mean not 50 but five so we can go padding And then we'll just set all of the padding at one time and we can say we want our top to be Five pixels And we want our bottom to be five pixels and then we want our left and our right to be zero pixels And so we're not worried about padding to the left and the right and now we get we get the same effect Only there's five pixels at the bottom of this one a five pixel at the top of that one and then we'll have 10 pixels In between because we're using a combination So if we go here and we set this to 10 save Now things are spaced out a little more along the lines of what they have over here team And also what we can do down here Is in our social media nav and let's see if we can go back. I don't think we've made one yet So if we go down here, we got our main nav. We got our nav. Let's move this nav up here Just so it's in a place where the other nav's are so when we start looking We aren't confused and then down underneath this. We're just going to put a social media nav So we'll go down here asterix and we'll go social dash media Dash nav And our opening and closing curly brackets and then here we are going to do a display di spla y And we'll go flex flex Save and then we'll go flex direction flex Direction. Oh, no, not flex our flex direction and we'll set this to uh What is it column Save and I may be I may be doing this wrong. Let's see I just want to see something real quick. Yeah, so what we need So not in the social media nav. Where is it? So let's go back here and look let's look at our nav social media nav We have our ul. We have our li's. So actually we want social media nav ul And we want to set that to display flex control shift k save and now everything is lined up and if we add social media nav ul li So we grab this we go down here We put a space in here. We can go We don't want it. We don't want to display. We don't want the ul. We want the we want the ul li And it doesn't need to be displayed flex, but we want padding so we can put padding on the left and the right so we can go padding Is equal to zero for the top and bottom but on the left and the right we can say we want to put 10 pixels of padding And now everything is sort of split up Team so this is how we can space things out, but also in addition to that. So let's see. We've got zero one zero We've got This this area over here. So let's take a look at that. So if we go back here and we bring this all the way up and we do a control Shift i We can bring up our dev tools and we'll We'll just refresh this page actually control w control r to refresh We'll move this down. So maybe we can see a little better We grab that all right And so if we grab this arrow right here and go over and just sort of scroll over our page We can see we got this nav social media and there is this What looks to be like some sort of margin of padding. So we've got this padding of 40 off to the side And so in order to make this Be centered we can Go back over to visual studio code and in here we can set our padding On the so we've got our top and our bottom So we can go zero top is zero and then now we would say our left and our right are zero But we don't want that we want How is it how do I put it team? So let's go padding left padding dash left and we'll set that to Zero Save and now that padding on the left is now we go now we do our padding Actually, let's do this. We just go padding right Is 10 pixels Oh, we got we got the gc save and now Uh, it's it's it's centered with the rest of our text kind of kind of sort of team and so we would have to mess around with this in order to Get everything exactly like we want but let's go back into our dev tools and take a look at this again And see what's going on. So let's click this All right social media nav social media nav ul social media nav So we can do is actually not down here in the ul if we go to social media We have a social media nav ul. Let's go and let's just make a social media nav So we'll copy this and we'll alt shift and then hit up And then we'll go down and we'll add a space there We'll go up here control shift k to delete those lines We'll just make this nav and then we're going to turn off this padding. So we're going to say padding Left is going to be zero and save and now this moves all the way to the side And what we can do inside of here because we have this display Because we have our ul set to display flex. We can do something like this We can do a justify content space around And then enter nothing's okay. So nothing happens there What we've got to do is we've got to move this up to here And so it's now inside of this ul and it's saying all of the content inside of this nav inside of this This ul element which is here We are going to justify it by putting space around it. So if we do like that now we get this Now everything is centered And so Down here they have icons. So what we're going to do is we're going to replace this text We're going to replace with icons at some point, but we still got some more styling to do team But we have already come so far and we've made a bunch of changes. So let's go back over to PowerShell and do a get add all Dash dash actually get add all semicolon and then we do a get commit dash m and we're going to call this Added all positional Styling Enter and now we have that done So we have our initial styling and we can even change the name of this branch if we want to positional styling So we'll do just that we'll hit clear put a semicolon and then we'll do a get branch So we can see the name of our the names of our branches And then we'll hit enter and we are going to rename this Initial styling we're going to rename this to What was it what was it called? Let's do a get log and look at our log And we can see our initial commit added all positional So we're going to rename this positional styling and look I have a typo in here And we can go back we can actually change these two, but I don't know exactly how to do that So we're not going to worry about it right now, but we're definitely going to change the name to positional styling. So we'll Hit q to get out of here and we'll clear So we'll do run the same command. We'll do the clear and we'll do get branch and then we'll do a get uh Get get uh branch Dash modify and we're going to take our initial styling Double click double click and right click to copy it to the clipboard right click again to save it And then we just need to make sure there's a space back here and right click again and we just change this from Initial styling so we can go Back back back. We're going to change it from initial styling to What was it called again guys? I can't remember. I can't remember initial styling to Positional styling so we're going to go back and we go p os itio in al positional styling enter And then we do a get branch Now we have this positional styling. So what we're going to do now is we're going to do a get branch Dash be at well actually hold on let's do a get status to see If there are any untracked changes, so we're good. So now we can do a get check out Dash be And we can name this one We'll just double click this and right click and right click again to paste it in there and we're going to call this one zero three And we're going to give it a name font styling so we're just going to go Uh right here and on the on my keyboard I'm going to hit the delete key to get rid of all of that up to positional And I'm just going to type in font and now we have a font styling So now we're on this Section here and we can go and we can style out our fonts as you can see They have a slightly different font than what we've got going on here So we're going to find some fonts that match what they have team So what we're going to need now is a font so we're going to go out to google font So we'll just open this tab and drag it out and double click it and now we're going to go to fonts dot google dot com And we are going to find a font that matches sort of our supreme font and I think be Viets nam is pretty close if we go here And we type in actually let's go back And we click down here. We can type in Our title Which is going to be soup here rio or soup here Rio All right, so we'll set this to uh Extra bold All right, and so this looks this looks pretty good. So we'll add this And then there is another font that we need That looks more like This type that they have and I think that's like close to courier but I'm not positive and I'm sure there's a font in here somewhere So I'm just going to look through these fonts till I find one And what we can do is we can go over here and we can just grab well, we can't grab that but we can grab Let's let's go to our page. Let's go to our html And we will grab Right here. We'll grab this clock Control c and we can go back to font to that google and up here at the top We can type in that and it'll show us What that looks like in all these different fonts and now that'll make it easier for us to find a font that matches The one that they have here So we'll go back And I'm going to look until I find this font So after a little while of searching I found this one go to goita And let's see we've got regular And we should be able to adjust this font size So we'll add this one here and if we click down here in this corner We can see both our fonts and then we can see this font family So we'll grab this font right here and we'll copy it Control c and then we'll go back to our Our actual code visual studio code And we will paste this font up here where our style sheets are so we'll go let's just make this big And we'll go right underneath here. We'll hit control enter and we'll paste this in so now we have that font. We'll save it And we'll go back over here And we will add these fonts at the top so we can go We can go back over to google fonts and we'll grab both of these and we'll go control c And we'll go back into our style sheet and here We'll just go we'll just paste these both in right there and we're going to separate these and we'll name one We'll name one like logo text. So we'll go Actually what we can do is we can do this we can go over here and we can look and we can see we've got our logo text So here. Yep. What we'll do is we'll go ID of logo Text And then we can put Our b supreme font. I mean our b Vietnam in there and then here we can put our Link text And we'll just give this a style of I mean, we'll give it an ID of link text And then we'll go here and we'll go like this and actually our link text We're going to give this an ID of we'll give it a class of link text So dot link text And now we've got our logo text and we'll give it a class of logo text. Well, actually we'll leave this We'll just go logo text dot Save and now we'll go back over here and we'll make this smaller And we will minimize this window and now we can see all three of these and we can see our site right here In the middle and what we'll do is I'll just zoom in a bit so you guys could see That font size and let's scroll up. Can we scroll up? We can't scroll up refresh Actually, we'll close this developer tools and so now it's a little bigger and we can see all of this stuff fly by side Let's zoom out a bit. Right. So what we'll do Is over here where we have this idea of logo text. We'll give this a class So we'll go class is equal to logo text and now Our class up here changes and we can also Go down into our Let's see our main that will actually our clock We can give a class of different a different kind of text. So we'll go This is our clock and we'll give it a class of This is going to be our link text so link and text and save And now uh-oh something has gone wrong. Let's check this out. Let's go back and we'll look at our link text fighting family Let's go to sans serif So let's go back and look at our index dot html and well actually let's go back here. We'll look at our logo text Be vietnam sans serif. Okay. All right. So let's see. We got logo text link text I'm confusing myself guys. I'm sorry. So we got class link text and Our clock is styled as a link text, but it's styled as a h2 Which makes it extra big an extra bowl and we don't want that. So what we're going to do Is our h2 is we're going to give it a different actually we can we can take this out And as you can see The We can make this like just a regular p tag And we'll go over here and we can make this a regular p tag as well p Save and that styles it in a smaller font because that's what the the p tag is using So what we can do is We'll control z and we'll just set this back to h2 and then we'll save and if we go over here into our Our style sheet we can set our h2 to be We'll set our h2 and we'll set the font size to font size And we'll set this to 1 rem And that should set it to a default base of 16 percent Or or six or a font a font size of 16 So let's see if we do like font size 16 pixels one six px save It's got 16 pixels is typically the default for for web browsers Now we can make this smaller like we can make it a 10 and it'll get smaller We can make it a 15 and it'll be a little bigger and then let's add the font weight So we'll go font dash weight And we'll set this to the smallest font weight possible Which is 100 and now it gets a little thinner and let's make it smaller yet again, so we'll go 10 pixels save Not one pixel 10 pixels save and now it's even smaller And so I think this is about the size that they have it there So we can go down some more and like we have our nav down here So we'll just set our font size for all our navs. I mean not our font size, but we'll set our Our font family for all our navs. We can set that to link text So actually How do we do this we can go back over here? in inside of our Content container We can set our font family. So we'll set an id. We'll set a class of link dash nav save I mean not link nav, but link text save And now we get that same sort of set up over here, but the um Is too big so we'll go back over here and under our link text We can change this font size. So the same thing we did for our h2 We can do for everything else. So we just go grab this Control c and we'll go down here to our link text And we'll paste that here control v control save and now everything gets a little bit smaller And actually we don't even need this h2 anymore if we go comment this out and hit save Everything is still the same team. So we can go get rid of this h2 right here and save And now we've got something that looks a little closer to what they have our font still aren't all the way on I think Oh, it's because our let's see our link text we have set to go to And actually this still doesn't look the way we want. So let's go back down here to nav and let's try a different font family So we'll go font dash family and we'll set that to courier And now that looks a little better. So let's try this. We've got courier here. Let's go up here to our Not our logo text, but to our whereas it h2 not h2 to our link text And let's comment this out and let's set our font family To courier And save and now that looks a little better It looks a lot closer to what these guys have going on here So what we'll do is we'll get rid of this font family control shift k And we'll save that and now we're a little closer to where we want to be team So what we're going to do now is we're going to go back and we're going to make another commit So we will go over to power shell by hitting alt and tab And we're back in power shell and we will scroll up and see if we could find a get add all and then we've got a get commit And we will say added Fonts and font styling Save and now we do a get status is going to tell us our working tree is clean. We get do a get branch branch And now we can see what branch we're on and we are going to create another branch So we're going to do a get so we just scroll up till we find a get Check out so we get a get check out. No All right, there we go get check out dash b and we're just going to take this three right here double click this Right click right click and we're going to change this to four and we're going to say We're going to change this to logo styling So l o g o and we'll save that actually not save but we'll hit enter And now if we do a get branch, we can see that we are on another branch where we are going to be styling our logo So let's go back to visual studio code and we'll go over here And so we've got our logo and we've got our logo text. We've set our font family for it But now what we need to do is we need to uh This is this has a red background. So let's see if we can give this a red background Let's take a look at our index.html and we've got our classes And we've got our logo text. What we're going to do is we are going to add a id So we'll just do number Or or hashtag and then we are going to call this the uh logo container i n e r and we'll hit Tab enter and then we'll put this inside of here and we'll go control shift k and we'll save And then in here we're going to make a clock container. So we'll do an id and we'll go clock dash container Tab enter and we'll put our clock in here control shift k to get rid of that line Save and now you see nothing has changed but check this out and if we go over into our main.css And we go up here and we can put this anywhere in our css. It doesn't matter I'm just sort of placing this stuff where it seems logical to me And we're going to put a hashtag logo Dash container and we're going to make the background We're going to make that red Save and now we have this red background team. So if we go back and we take a look at this There is some space underneath this obviously. So what we need to do is we need to add some margin This is going to add some margin underneath our logo container And we'll just add 25 pixels for now And if we save now we get this space between our logo and our clock and actually let's make this A little less we'll go like 18 pixels Save and that's close to what they got going on here. Now we've got some space Out here around our container. What I want to do is I want to try something. Let's try logo text and let's do a background of We do a background color of red color and then we'll go red Save and we don't see any change, but if we go here and we comment this out and save We get pretty much the same effect. So let's try So what we're going to do now team is we're going to take out Let's just let's think about this. So we got our logo container. We've got our margin set to 18 Let's turn this off control save We'll get rid of that margin and then let's set our width We'll shift k control Control z control shift Enter and we will set our width w id th. We're going to set our width to Uh, we'll set it to like 100 pixels save and now Uh, things are a little smaller. All right, which is good. Which is good. So now what we can do is we can say we want the margin to be auto save And now we've got some Issues here, right? So we've got so we've got our margin set to auto But it doesn't it didn't move back. So let's take a look at our logo It's because we're inside of our logo text. So what we'll do is we'll go up to our logo container and we'll save And now that container is centered, but we still need more margin. So we'll go margin bottom bo to to m And we can set that to uh 50 pixels again Actually, it's going to be 25. I think px and we'll go back to five save And oh This should be like this And now we've got that margin back and we've got a little bit of uh A little bit of of of padding Still on the top so more than on the bottom So now we have to fix that issue. So what we're going to do is we're going to go down here And we're going to move this background color up to our logo container We'll save and then we can set the height of this logo container To whatever we want so we can say height. It's going to be equal to 100 pixels Save and now that's too tall. So let's make it like 50 Save too tall. Let's go 10 too small And let's try 15 and too big 15. All right, there we go. So 15 to too big, uh, let's try 20 save and 25 And 30 let's try 30 30 zero save Uh-oh back here and 30 save and Let's try 27 27 save and so now We're a little closer to the size we want it to be but our text is still in the wrong place So what we're going to have to do is we're going to have to move our text up So we're going to have to do is set a Margin not not a margin. Let's see if we go padding padding bottom We let's try 10 pixels 10 pixels And save and so this isn't doing what we want it to do So we're going to have to position this in a different kind of way So what we're going to do is we're going to control shift k and delete this padding bottom. We're going to go up here We'll hit save and nothing's changed. We'll set our display For our logo container. We're going to just set that to flex. So now we can use flex styling And as you can see our text has gone down to the bottom in the left So we can do something like it justify content and we can justify that to the center And we'll save and now our content justifies center and we can align Alig in we can align Alig in item And we can align that to the center and save actually. Let's see align Content let's see How does it align? Align items centered and still not quite where we want So what we're going to do is we're going to go down here to our logo text And we're going to go position Relative and this means we're going to position the text relative to itself And we are going to set the bottom About five pixels px save and this is going to move this up. We can set this to three So basically what we're saying is that hey take your current position And then relative to yourself, right? You're going to put three pixels underneath you and this is going to raise you up So that's why we're putting this on the text and we could go 3.5 3.5 Or we could I mean we could do whatever the sky the sky is really the limit team So what we can do another thing we can do is notice that this is a little closer to the top So we can set this to like five pixels Uh, let's go six pixels save And now it's really close to the top and we can go up here and we can make our background We can make this height and we can make this like 25 and let's see Let's go Let's just go 20 and see what happens And then we'll go down here and we can move this back to like three save And let's go four save and now like we're we're getting we're getting closer And so since we're inside of this local text what we can also do here is we can raise the font family too So we can say font dash family No, not font family font size And we can say let's make this font size, uh Gotta put a s here first. All right So we can say let's make this font size like a 32 pixels or something like the 32 and px and save And now our text gets bigger, but then we'll have to go and we'll have to adjust our box for that for that text Which is I mean, you know, it is what it is So anyway, so I but the reason why I wanted to make this bigger is so it better matches this So we're going to change this to 30 30 30 save Uh-oh Save and now it's it's a little bigger and we'll go up here and we'll change our height to we'll change our height to match it So we'll go 30 And save and that's not that's tall enough. Well almost tall enough. So we'll go 35 and save And here for our width We need to set that a little more. So for our width, we'll go like 120 save And let's go 125 and let's go 150 Save and so now that's a that's a little better. So let's change this to like 140 And that is so we're getting there team. We're getting there now We need we just need to make this a little taller. So we'll make this a height of 37 And we need to move our text up a little bit. So remember down here. We can go let's go six And we'll go five and save and so now I think that's that's that's about right team We're about good and we've got our clock in there And actually I'm looking in there. There is a little bit smaller than their actual clock area Now we could fiddle around with this all day and make it look exactly like that But there's really no need to team now What we're going to do is we're going to go grab this light blue borders that we have and we have Them down here. We'll control shift k to delete that and save And now we have this fully centered page with our What is it our our navigation links are a little bit off down here, but we can fix all that stuff team So if we hit a control zero, this is what our page looks like now and we hit a control zero there This is what their page looks like. So still pretty close. We got some work to do team We have to add our social media icons and we have to add our background. So let's carry on But before we do that, let's go over to Power shell again, and we're going to do a git status And as you can see the same thing before we see all these changes We made changes in our index and all these other places So we're going to go grab the command the git Add all and then we're going to do a git commit And in this one, we're going to say style The logo style of the logo and we will hit enter and save that Now we're going to get ourselves another branch. So we're looking for a git checkout dash b We're going to change this to a five And we're going to call this The social media icon so we go social media Icons All right, so we'll go styling styling social media icons will hit enter And now we are on a different branch. So we can do a git branch To see where we are and now we can drive on with styling our social media icons team So we'll head back over here and the first thing we got to do is we got to go out to the internet We got to grab some social media icons. So we can go here and we're going to go out to I think it's flat icons flat I actually we'll hit control tab to open another tab type in flat icons here And let's see what we get. Yep, free vector icons. We're going to drop this down here And here we're going to put a we're going to put our social media icon. So just going to put we're going to put app store store And let's see what we find here and we aren't going to find the exact same icon So we're just going to grab some icons that we think will work with what it is. We're trying to do team So we will grab Do do do do do do do do do do do do do do all right, so we'll grab this right here And I know it's a colored icon But it just is the way it is. Well, actually we can't grab that one. So let's go back Uh-oh, something is broken. So we'll close that and we'll go click here What has happened? Let's close this all right, let's Let's try this will go font awesome They have icons as well And they have they have most of the icons that we're going to need so let's see if we can find a facebook facebook All right, so we got a facebook icon here What we're going to do is we're going to say start using this icon is going to ask us how we want to use it We do not want to sign up for anything. So it says Don't have a project set up and get started here Uh Yeah, so we'll do that And let's see. Let's see. Let's see see the empowered kits of lines of code live in another one minute All right, so it says we can start from free enter your email to crew out So we don't want to create a kit team. We just want to use these icons. So let's go back and just grab Icon so let's go. All right. Let's start again app store And look there's two right here. I think this one might be well, we'll try this one So we've got this one right here and let's go in the wild blah blah blah blah blah blah blah All right, let's see Brain style and oh we can download the svg And if we download it, we have to agree to their licensing terms and services So we're going to agree to their terms. We'll hit agree and that's going to ask us Where we want to download this to we're going to go to the d drive We're going to go to the real casadero. We'll go to our project folder This is a superior project. We're going images and I've added this folder social media icons And this is where we're going to save our icons to team. So I'm going to save and already have those Let's see app store. Nope. So we'll get I'm going to hit cancel here. So I already have this one I've got the facebook icon and I've got the instagram icon if you are following along Go ahead and grab those and we will carry right along team So we'll close this out with a control a w and now we are back over here in all of our our Everything that we're working on here team. So we're going to do is we're going to go over into index I'm going to grab those images and we're going to play some right in here. So we are going to go img And this is our index.html. So we'll go img and in our source We're going to put a dash and we're going to go images social media icons And for this one, we are going to put facebook and then let's just hit the windows key and hit up to make This full screen and over here and this helps with this helps with sco as well because we have these images And google doesn't know what they are google or the search engines. They just go buy whatever we name the image So one we want to name the image something that a search engine would would pick up if somebody was searching for something So we could even go as far to say Like we could aim we can name this image like learn to code facebook icon or something like that And then so and I mean like we could do this. So what we can do is we can go right here. We can click here Excellent if we go Let's go control. So this is the svg file We'll control here and if we go control b We can go into our images and we'll just change the name social media icons and we'll find our facebook And we'll go rename and we'll at the beginning of this we'll put Learn to code And then we'll save and then what we'll do is we'll just copy all of these so let's close this one We don't need to open it And we'll go Rename and I I say copy it, but I didn't copy it. So we'll just put learn To code Oh, and let's rename that again. So we'll go rename one more time and let's go. I forgot to put a uh A hyphen behind here learn to code enter and then we'll do it one more time up here under the app store We'll go rename and then we'll go back over here and we'll go learn dash to dash code And so this is just one more thing that the search engine is going to pick up on that say code in this webpage And so there we have in our image titles We have that and now all of our image titles don't work. So we're going to have to go back and fix those So under Under facebook we'll just go dash and then we'll go and we'll grab the learn to code facebook and then under here Let's see we got all right. So then now we'll copy this Control c we'll go down here underneath the instagram control v and we'll paste we'll put in We'll take all of this out and we'll put a dash and then we'll select the instagram and down here We'll do the exact same thing. So we'll just go underneath app store control v We'll paste that in and then we will go and replace this with the dash and we will select The app store brand there we go. So now we got that and over here in the alternate text. We're going to put Learn html icon. Hold on learn html facebook Icon image And now and then down here, we're going to put learn and and so we're just sprinkling this seo data all over our website And as long as it's relevant To what to what the whole web page is about will be okay. So we'll copy this right here control c control v Control v we'll paste that and so here. We'll put CSS and then down here. We'll put java script right And so then let's go back over here So if we hit save and we'll hit the windows key and hit the left and put this back off to the left side of the screen So now we should have these social media icons in our page But we can't see them and i'm pretty sure we'll hit control b to get rid of that sidebar I'm pretty sure we can't see them because our background is black So if we remove our background and we save it now we have our social media icons So we'll go back up to our index And if we look these these are big we need these to be smaller So what we'll do is we'll give them a class and so under here. Let's see Actually we'll go we've got I've already added this class of social media icon image size So what we'll do is we'll copy this we'll go into our main.css. We'll go down to the bottom Control v and we'll hit the start and put a dot in here for class And we'll go back to the end. We'll add some curly brackets and inside the curly brackets We're going to put font dash size is equal to what we're going to put font size and we'll set that font size to Seven pixels and we'll save and now things get a little smaller. We can set them for five Let's set them for three And here we'll go back up to two And we'll save okay, we'll set them for four save and so that's a pretty decent size And now they're they're spaced out like this because of the spacing that we have on our text And so actually we don't even need our text anymore. We can go back here and we can just delete this So we'll put our cursor here. We'll hold the alt key We'll go here in here and now we'll do a control shift to k and delete all those lines control s to save And now uh-oh what has gone on team? Let's see. Let's see. So let's go back over here to our main css And we're going to turn our background back on by hitting control and forward slash Save and now our icons are gone. So we'll control z And set our background back to white. Let's go back over here And let's see what we removed that made our icons disappear. Did we remove anything? Interesting. All right, so let's do a control z and bring those back control s And then let's go back and turn our background back on control s So our text is there. It's just tiny But when we remove the text the images go away. So let's see what's going on here team. Let's go back over here So I figured out that the problem is we set our size based on our font for our icon So what we got to do is we can delete all of these So we'll do that again alt alt and alt holding alt and clicking we do a control shift k Save and now all of that stuff is gone away And what we're going to do is going to go into our main dot css And here we have this set for font size But let's go back over here and take a look at this social media icon Social media icon image size. So we have this li So what we can do is we can give this li a width so we can say w id th And we can say we want this width to be 20 pixels 20 pixels Save and now our icons come back because we've just set the width on those li items And then when we want to move them closer together, we just have to restyle them Now the problem that we have now is our background is too dark Now we're going to add a background image So we don't really need to worry about what background color to choose So let's go and find ourselves an image but after After team we go over to power shell and we hit the We type in oh geez i'm going to hit clear to get out of here And i'm going to scroll in so you guys can see and in the project of your folder we're going to do a get branch See what branch we're on so we're styling the social media icons And we're going to do a get status and we can see all the stuff that we have changed And then so now what we're going to do is we're going to clear this out and we're going to do a get We're going to scroll up and see if you can find a get commit somewhere So we got to get at all and to get commit we're going to replace this width Uh actually hold on let me go back Because I did this once and I messed up and I had to go back and do it again Added social media icons with initial sizing All right, so we'll use that And then we are going to do a get Commit so let's see And another thing we can do in power shell is if we do a history We can see all of the history that we've typed and then up here We've got command line so we can do get I mean so we can do h and pipe that to Where command line Command line is like and then we can give it a Wow card so anything That is that contains this string of characters so we can say, uh, what was it an added initial commit? What are we looking for so we're looking for a, uh Anything in the history that has committed it So right here we got 38 so we can type Hashtag 38 And then hit tab and that is going to bring that out like that team So we'll hit enter to make that commit. All right, so we got nothing to commit now. We can do a get branch See our branches and we're going to do a get checkout and we are going to add our image size So what we can do is we can do that same command we did before where we did the search for commit and we can do a Check we can look for everything that has checkout in it and we see we got these And in 27 we actually did a checkout so we can do a Star 27 and then tab and now we can go and we can paste in we've got this five here So what we can do is we can just replace all of this so we can go six Dash and we can go adding a background image and we'll put a Quotation mark at the end of that and we'll put a quotation mark at the front of this And we'll do a dash b and so now we're saying we're going to check it out We're going to create another branch and we're going to name that branch this Six adding branch background rich is not a valid branch name Because we have spaces so we'll remove these spaces and I'm going to use camel case so it'll be and All right, so we got adding a background image Adding background image so we'll go enter And now we've switched over to that new branch if we do a get branch You can see that we're on that other branch and now we can add our background image So team what we're going to do is we're going to grab this And we're going to do a control in to make a new window hit the windows can hit up and we're going to go out to art station.com and we're going to find an image of a white rabbit And we are going to scroll down team until we find a white rabbit We believe is suitable enough for the project that we are creating here team So what we will do is find an image So we've got this guy here and we're going to hit the download button And it's going to ask us where we want to save this to we're going to say we want to save it to the D drive the real casadero in the superior project under images and then we're going to right click We're going to go new folder and we're going to name this background images And we're going to double click on there and we are going to Save and now we have this image saved We'll hit control w to close that out and we will go back into our power shell I mean not our power shell, but our visual studio code and we are going to find where we had that background color set Going to go in here and we're going to type background image And the background image we are going to specify where it's at using the url And we'll put some quotes in there and we'll do a dash And now we can go image background image and we'll select our rabbit and we'll go over here We'll put a semicolon and we'll hit save and now we have this rabbit in the background But when we make it big we got two rabbits. We don't want that. So we'll go back over here We'll go back into visual studio code. Let's drag our rabbit all the way off to the side here And then we'll grab visual studio code there and we can go back here and we can set some styles for our rabbit. So let's Figure out where we put him. So he's here and what we're going to do Is we'll put our cursor right there and we'll just hit control enter to make a blank line underneath and we're going to go background size Actually, what we'll do is we're going to set the we're going to go background What is it called a repeat? I think it's background repeat. Yeah background repeat. So if we type re We can see right here background repeat. We're going to set that to no dash repeat Save and then when we double click here Boom right the bunny's here. There's no repeat, but we don't want that white spot right there So what we're going to do is put that back and under background no repeat. We're going to set the background size to cover And this is going to say hey no matter what size We're going to make this image big enough to fit And now we have the bunny's head here and this this is working out pretty good for us The next thing we want to do to make sure the bunny's always in the middle of the screen is we want to do a background Actually, it's a background. It is yeah background position background dash position and we're going to set that to center and We're going to set it to the x position. So if the bunny is on a tall screen I don't know when he would ever be but it won't try to center Uh, it won't try to center It'll just always put the top of the screen where the bunny's headed. So we'll go we'll set this to x We'll hit save And now no matter how big the screen is we always see the bunny's head Up near the top where our content is if if it depends right because if the screen is really really big Then our content will be smaller than it'll be in the middle. But anyway, this sort of works Sorry about that team that is uh Cortana wanted to have a conversation for whatever reason so we put this there And that is that but but now our bunny he is too bright We need to uh, he he's we can barely see our text So what we're going to do is now that we have our bunny saved we'll go back to Power shell and we're going to do the same thing we did earlier. We're going to do a get commit So we'll take a look at our history and so let's see well actually we can run that same command again that we ran before Where we did and so we're looking for checkout. Let's look for Uh commit c o m m i t and now we've got a bunch of commits. So let's do number 41 and hit tab And now we'll do a get at all get commit and we're going to change this to Added background image. So we'll go Added background image With positioning And we'll save that and now we are going to check out another branch So we'll go get checkout b and for this one is going to be seven And we are going to set this to adding tint adding background tint. So we'll say adding background Tint Enter and now we're on this new branch. So if we do a get branch And i'm just gonna b r a n c h I'm gonna hit the uh, I'm gonna hit the home key to take my cursor back to the beginning. So we'll go home And we will do a uh, we'll do a clearer screen and we'll hit enter And so now we can see we've got this adding background tint So we can go in and we can begin to add the tint on our background team So when we first built this thing we made our wrapper and then we made our content container So what we're going to need to do is we're going to have to put our wrapper inside of Uh Of we're going to have to create another another div That covers the whole page but doesn't cover Our content that we have in the front here So what we're going to do is right underneath our wrapper We're going to make a div and we're going to give it a class of a tint Tab so put tint and we'll tab and then that's all we got to do there and we'll save and then we'll go to our main.css And right up here underneath well above the wrapper. We'll add a class of tint And then we'll put our double dillies here and what we're going to do is we're going to position this Position and actually what i'm going to do is let's add a border. So we'll go border Uh five picks solid black save And so you can't you can't see it yet, but as we build this out like you begin to see this border So we're going to add this tint. We got this border five pixel solid black and what we're going to do is we're going to position Absolute and we're going to position it at absolute top is going to be zero Pixels or we could just put zero and we can put the absolute we can put it to the left At zero Save and so now we got this little dot at the top of our screen. That's that's this thing that we're making So now we're going to take this and we're going to set the width wid th We're going to set that to one hundred percent Save and now we got this black bar across the top and we're going to set the height to 100% Save and now we've got this border and because of the way borders work right now we get these now we get these scroll bars So what we're going to do Is we will uh We'll set our let's see. Hold on. I'm going to just check check something here margin zero And padding Is zero save All right, let's see. So now Okay, I thought that was going to change something but no it didn't And so the reason why we got these scroll bars is because we got this border if we take this border off They'll go away So if we save now the border is gone now the scroll bars are gone So we're going to add this border back and because essentially when we at the border what we're doing is we're adding 10 pixels on both side Plus whatever padding and whatever is attached By default from the html, which shouldn't be anything because we removed it all But i'm still seeing like this little gap over here and I don't know what that's from But anyway team what we'll do is we go back down to here and so we've got Yeah, so our tent so we've got our so we've got our height set And we can go ahead and we can turn off this border so we control shift k and save And now that border is gone and we're going to add a background color of rgba A and hit tab and we're going to set this to zero zero zero and point Seven and then we can save that and now we have our background Tent and we can make this a little darker. We can make this a point Eight and save and now it gets a little darker. So now we still can't see our icon So what we're going to do is we're going to go down to our social media icon image size And we're going to set our background vack background to We'll set our background color to uh to gray Save and now we've got this little background color here and let's make our height a little well actually let's do this We'll say we want our padding To be a zero pixels if all right and now we'll say we want our width to be we'll say we want our height to be Uh 20 pixels 20 pixels and save And so now our background gets a little smaller. So let's make it a little taller So we'll go uh 22 save And now we've got like this Let's go 23 save and then let's see height 23 padding Let's go 22 save and then let's padding uh two And so now we've got like these little borders around our uh around our icons at the bottom And now the next thing we're going to do is we're going to go and uh, well the last thing for us to do Is to add our our hover effects. Well, one of the last things team one of the last things We're going to move into our java script But before we do that what we got to do is we got to go back over to powershell And we're going to do the same thing that we've done before we're going to do a get Add all to get commit and we're going to say what we did. So we're going to say added tint over background image And added background To social media Icons save that and now we'll scroll up a couple times and we'll do a get check out actually get commit. Let's do a get status All right, now we'll do a get check out and for here we're going to put eight five six seven eight and we're going to put Add links and hover effects And so we'll save that and now we can go back and we can start adding our links and our hover effects So to get started We're going to go back to our main dot css And we are going to find our nav Words at it. So we got our nav right here and then we got our nav uli we got list style type none We're going to add a on we're actually going to go We'll copy all of this and we'll go down and make another one of these. Uh-oh control z Go back here and we'll say nav that uli and we'll put a colon and we'll put hover We can say we want the background Color To be red save and now when we hover over these we get this background color of red Now this isn't quite like What these guys have over here? So we're going to have to make some adjustments team So what we'll do is we'll go back to our page and as you can see we have our hovers And actually our list style type of none has come back. I don't know what's up with that. Let's Save and see what's going on here list style type Of none. Oh, and it's because we added this hover right here And let's see. So what we're going to do is I'm sure if k take that out and let's go Get this right there And control shift enter and already did this once but I went back and I erased it and I forgot to put it back That's why I'm putting this back a second time team. So Here we're just going to put the uh the hover and then we'll save and now We should have new uli Hover the style type the style type. Oh, we don't want this style type. Now we want background color So here we go background color His red save. All right. So now we've got this deal right here, but it's not like this one over here So we got to make some more adjustments So but before we do that, we're going to add in all of our link tags So we'll just go back over here to our index.html and all of these are going to contain links So what we can do is we can put our cursor right here at the beginning right after our first li tag And we can hold alt And we can well alt and alt and control and just go down And then we'll hit enter and we'll hit enter again Well, actually we'll go backspace. Well, no zz. All right, and then we are going to Yeah, we're going to hit enter one more time and then we'll go up And then we'll type a and hit tab and in here We're going to put an asterisk and we'll go over to our a tag hit enter again And now we'll go down to where we have our news in this This li right here We'll actually grab this li and shift up and now we'll put both these inside of here We'll move our cursor And we'll go let's see. How do we do this? How do we do this? All right, so let's get our cursor back down here to a place where it makes sense. Okay. There we go now We can grab our text and put it inside of this our li is all backwards So we got to drag this one up to the top We got to put the news inside of there and now we're good to go so we can control z and we'll go back Oh, come on guys Now we can go back and now we can save and all of these become links So we'll hit escape and that was nerve-wracking. Let's go a format document And but now the problem is is that all of our links are Are uh They're blue so we can't see them and also we have like this blank space up here That when we go to like there's there's nothing there. I don't even know what this is So we'll have to if we do a control shift i we can bring up our dev tools and we'll hit this arrow And we can scroll through these and see what this is up here and it's just the empty li element So that's this one right here where we have this href. So we'll delete that And we'll save and now We've got news but news doesn't have a link. So we got to put a link back here So we go a tab and then we'll put this hash symbol Look over here a and then we'll drag this li into this a control shift k to delete that empty line And then we'll do a Format document and everything should be formatted. So we'll save now And now we need to change our links so they aren't white. I mean so they aren't blue So we'll go back to our main.tss And we will just put Over our a tag so right above our nav and we can put this anywhere it doesn't matter I'm just putting it above our nav because nav's have a tag them So we'll go a and we're going to go color is equal to white We'll save and then if we click on a link It's not it's not going to go anywhere but say but say it does let's say for instance like we go back And instead of here, we're going to set this to go to a website. So we're going to set this to go to Hacker news. So we'll go hacker news Boom and we'll grab this hacker news right here. Copy this control c And we'll go right there boom and then We'll save it. Well, actually that's not going to work z z z z All right, let's see. Let me double check this again. So we've got our main href All right, so this is where we're going to put our hacker news We're going to put it right here in the href control v and we're going to save that and then down here We're going to say fall winter 2019 preview. We're going to go over to code market sell. So we'll go code market No, not code market. So we'll go right code drinkcoffee.com And we're going to go down here to gear for coders and we're just going to click on a shop now And grab that come on man All right, and so we got the store and we grab this control seat And we will put that here for the fall winter preview v And down here for the fall winter lookbook. We're going to do the same thing v And then down here for shop. We're going to do the same thing v and down here for Random we're going to send people off to some cool computer Programming related website. So actually We're going to send them over to the code 365 startup Lab.com and at the beginning of this We're going to put https semicolon 4 size 4 size www. And then under about we are going to send them to Our youtube page. So we'll go actually we'll go. Yeah, we'll go to the youtube page. So we'll go https 4 semicolon 4 size 4 size www.youtube.com 4 slash the real cast Darrow S a d a ro and then down here where we have the stores Hmm for the stores, we're just going to have we're going to have an amazon link. So we'll go amazon So this will be what what we'll do Is we'll go over to amazon amazon.com And we're going to pick a book that we like about coding and I like uh Eloquent java script is good learning java script is good, but there's something else more more more super interesting Who'll go the art of programming? All right, and so the whole box set is 185 bucks. So this is what we're going to grab this link So we're going to grab a text link from here We'll copy this control c and then we'll paste this right down here Bam and so this link will send people over to amazon And then we're going to have our contact in this contact link will send people to a contact list So we will send them over to Let's try code market sell dot com And we will go to the contact page contact us And we will see All right now I don't want to do that. I haven't even I got this website, but I haven't even set it up All right. So let's see. Let's see We'll go to write code drink coffee dot com. We'll go down to I thought I had a contact page here No contact a page of that. So let's check out the code 365 startup lab And let's see if we've got a contact here Let's see resources log in sign up. No contact. There's no contact of anywhere All right. So what we'll do is we'll go Contact and we'll have it go over to twitter. So we'll go HTTPS Ford slash four slash twitter.com Ford slash the real Casadero And down here under mailing list. We're going to put the hacker newsletter. So we'll go hacker newsletter.com and these Some of these links are mines like a Everything but the y-combinator and hacker newsletter So we'll click here on the hacking newsletter.com control c And let's see we'll go down here to the newsletter link and we're going to paste that right Here control v and save so now we have all these links that go somewhere So if we go back to our page and we click on one of these links, it'll this will take us here But when we go back, ah, so it does exactly what I wanted to do now. We have to get rid of this underline so if we go back to our Main dot css and we look at our a we're going to go text style Or text decoration and we're going to set that to none and we'll go save and now our underlines are gone And also we get this um because these are set as links to we get these turned red when we hover over them Now one more thing that we want to do Is this isn't quite like these guys like if we go over here and we hover over these The red is wrapped around the text and then down here these turn white So what we'll do is we'll go back over here and instead of putting that style on top of The li element we'll put the style on top of the actual Text that's inside of it. So we'll put it on top of the a element. So we'll go So we'll change this from uh, we'll we'll leave this as li and then we'll just put a and we'll hit save And now what'll happen is uh-oh Refresh, let's go back. All right. So I've broken something. So let's see what I've done wrong team Ah, so I see what I did wrong team. I put the um I put our a tags in the wrong place. So if we if I zoom out control minus minus And actually well, we'll just make this full screen. We'll make it full screen. I'll go control plus one time So if we go to our li's where we have our links I put the links, but then I put the li's on the outside of them. So I messed that up So what we got to do is we have to we have to put our links inside of our our list item elements So how can we do this and I've got it all messed up team. So what we can do is let's see we'll go We'll do like this. So we'll grab these a tags So we've got this a So here All right, we'll move this down and then we'll grab this li we'll move it up We'll move this one down and then we can get rid of that We'll do the same thing over here Then we got this li right here. This li needs to be down there And we'll put a space in between here And let's try it. Let's do a um So here we got this ending a tag. We don't need that. We can get rid of this. So control shift k To get rid of that one and now we'll delete this blank line And we will adjust our spacing. So if we right click and go format document now our spacing lines up there And we just have to do that for the rest of these. So I'm going to fix all of these Now I'm going through and I fixed all of that stuff and now when we scroll over these It just selects the text. So we're good to go team But now we've got one last thing we have to do we have to style our our social media icons So when we hover over those they turn white. So what we can do is go back to our main.css We can go over to our social media icon nav dash ul And we'll go down Well, actually we'll we'll select the whole thing And then we'll hit shift and alt and hit down and then we'll go back here We'll put a space in between social media nav ul And then we'll go li and a And then we'll put a hover And we will make the background white. So we'll control shift k to delete that into delete that then we'll control shift enter and we'll put background color white And we'll save and now we go back over here It still doesn't work. What's going on And the reason why it's not showing up is because we haven't added Our social media we haven't made these links. So we got to scroll down here What we're going to do is we're going to hit the windows key We're going to make visual studio code as big as possible So we don't make the same mistake that we made before team now inside of here We're going to wrap these well actually we need to look and see where exactly we put that styling To make these images I mean well to make that background. So if we look through here, we find white content container color white color white let's see So if you got background color social media nav Okay, all right, so we set this A tag to hover but let's see We have the the gray background is set for image size So what we can do social media icon image size We'll go social media icon All right, so we got social media icon image size hover We'll save there and let's see we'll windows to the left And let's see let's see social media icon image size Oh, I see it is a class. So we'll go back here at this is a class save And still nothing what's going on here? Let's go grab this social media image size control c And let's paste this right here control V and save And now when we hover over them they turn white. I had something I must have had it It's hyped like really wrong. All right, so we save now we hover over these We get this white background and all we got to do is go over here and inside of this We will just add some a tag. So we'll just go We'll put We'll put a cursor here We'll put one here and we'll put one here and we'll hit enter and then we'll put a tab and we'll put a asterix And we'll go over and hit enter and then we'll grab these a's and we'll move the a's all the way down underneath These l will actually let's go back and take a look at this a bit closer All right, so we've got our a all right So we want to go below our images and we'll go back up and delete these lines k save And now these are going to act like they're links But as you can see when we hover over them, we get this background. So what we do now Is we go back to our main.css And we find where we have this a and our a is set to a white text decoration And then we have a somewhere all right. So nav ul lia the background hover is Red so we're going to set this to just this Up here So we will go back and we can say main nav. So we'll go back over here and we'll say Where is it at nav ul lia hover? So we'll go instead of nav. We'll go main nav main dash nav save we have to put a Dollar sign not a dollar sign, but a uh a hashtag there All right, and so now those are done and we go down here when we hover over those Those are just white because now they have a different style And we get the pointer because they're links So all we have to do is set up the links now. So if we go back Over here and we scroll down to our social media links This first one is going to go to facebook. So we'll go to facebook h https semi-colon 4x4 size www.facebook.com forward slash Right code Drink coffee. I don't even know if that page exists or if it works All right, and then for the instagram we're going to do the same thing So we're just going to copy this control c and we'll go down to social media icons and our second one is instagram And in our link, we're just going to paste this here v and then instead of facebook We're going to put in the i n s t a gram We'll save and then down here for what's this last one the last one is for the app store We're just going to link that over to the the code 365 start-up lab So we just double we'll go and grab this right here and we're just going to go https semi-colon 4x4 slash www.rightup.v code 365 startup lab Dot com and we'll save that And now we can close this when we go click these links They are each going to go To their web pages spam and so we got this one here And we got this one here And that one doesn't oh, there we go And so these other two i'm going to set these to go to instead of facebook.com. We're going to set them to give to Real Casadero save And we'll close this we'll close that we'll close this we'll close that and let's go local host 5500 save All right, so let's see We've got this set to go to facebook the real casadero. We've got this set to go to instagram and here we'll go The real casadero and then down here. All right, we'll leave that one the same save and now let's go back facebook And all right, so this one finds me and let's see we'll go this one And this one finds me And that is its team We have successfully built the supreme website Well, well we built we built superior, but we have successfully built this thing from scratch team It is done We can take this drag this up here and hit f 11 for full screen And that is how you do it team that is the process that you go through and there's a bunch of other stuff We can do a bunch of other stuff. We can add there's a bunch of things we can fix Like say for instance this clock right here. This clock actually gets the correct time from Either the user user's computer or a server somewhere And so what we can do is we can use javascript to go in and program this clock If you want to see how I use javascript to go in and program this clock So it actually gets the time team what you want to do is subscribe to the channel And or head over to the code 365 startup lab where you can sign up and you can learn html css and javascript Now I will tell you right now. I'm only on the html portion But I do plan on releasing the javascript portion by the end of the year So right now lifetime membership at the code 365 startup lab is set at 99 bucks You can sign up and you can become a part of the code 365 startup lab community For 99 dollars and as new features are added as new things are built and placed on the site as new courses come And as I complete new content, you're going to have access to all that stuff Lifetime for 99 dollars and if you're not sure that you want to Fork over 99 bucks right up front then that's absolutely cool inside of the code 365 startup lab There is a month-to-month subscription so you can subscribe for 20 bucks and go in and you can check out all the content And if the next month you decide this isn't for you Just cancel your subscription and you're off and on your way team But for 99 dollars you can't beat that right now We're going deep into html css so all the stuff you saw me doing off the top of my head here in this tutorial Is all stuff that you can see that you will learn how to do in the code 365 startup lab Now if not this isn't just the course where you go in and you take it and then now you're Instantaneously a genius you're going to have to practice this stuff You're going to have to build things and inside of this course after I get finished with the html portion And it's all complete the the exercises for the html portion are going to be building actual websites So the exact same way that we went out and we built A clone of this website here You're going to have to do that too and you can go off and you can do that stuff now You can start building now But if you want some sort of accountability with the future potential to be able to Communicate and network and work with and build applications for fun and profit with other members of the code 365 startup lab team This is where you want to be all right team and also also If you want to support the channel if you want these free videos to keep coming just like this and you want more of them team And you want just more content to keep you inspired and motivated on your journey Think about it think about subscribing to the code 365 startup lab because all of that money goes to support the channel and support new content and support me helping aspiring developers Wrap their minds around the fact that you don't just have to learn the code to get a job You learn to code in order to build your own stuff for fun and profit team So that is it team. It is me your biggest fan the real castadero I don't know you I've never met you, but I know you have greatness within you team Go off and build. I look forward to seeing you in the next episode