7. Home Page HTML & CSS - Part 1

[Music] hello welcome to this video i and in this lesson we're going to go ahead and slightly diverge from where i was originally planning on doing for the next three videos which is going to take out all the images uh in one video and save them in the next video do the html then do the css i'm going to do something a little bit different that's going to give us a better initial payoff where we're just going to basically tackle each section of this homepage design in terms of saving the images that are just relevant to the top portion and then doing the html and then doing the css all in the same video so this will be split up uh into several different videos but this way at least we get a payoff and we can actually see it start to function here in this very first video okay so the first thing we want to do is just save the logo and then we're also going to save the background as images so let's go ahead and get started i with the move tool select an auto select layer selected make sure we have the logo layer selected hit control a and then ctrl c and then we'll go to file new control v to paste it in there and also by the way if your background is not already transparent the way you do that is just go to file new and set background contents to transparent and that way when in the future when you open it up it will be set at transparent so we want that background to be transparent so uh we're going to go ahead to go to file save for web and i've learned the shortcut so i'll be using that instead of the menu from now on all right and doing that it brings up this dialog where we can specify the different types of files that we want to save i'm going to use png 24-bit for this and we'll keep it on transparency so i'm just going to save it now i've created a directory structure basically this is uh html and then in there we have images i'm going to create another one called css and then also js okay so we will obviously save this in the images folder and for this we'll call it logo and then just hit enter all right now we want to do the background uh so one thing i'm going to do real quick is just hide this and hide the logo layer as well that way we can kind of see a full portion of the background now what we're going to do is zoom up and use make sure that's normal we're going to use the rectangular marquee tool to select a portion here which will repeat and so i'll let that go and let me just zoom out till i can see the bottom and then just hold shift to add to the selection make sure you get it perfect and it's okay if there's well i can go ahead and hit alt and delete that one portion of pixels down there all right and if i zoom up i did get a little bit too much there so what i'll just do is hold alt and shave off that extra pixel now we'll go ahead to edit copy merged ctrl n and then ctrl v now save for web this time it'll be png8 and we'll call this top dash bg okay so let me go ahead and we're at 100 let me just zoom out a little bit and let's bring these back real quick okay so now we've saved basically two graphic files for the background which will repeat and also the logo up here this is the actual navigation but there's no images that are part of this uh so we don't have to worry about saving this as a separate image this will be achieved through html and css alone same with the we designed superior logos and the sub headline so that's the portion that we're going to focus on uh getting ready for this initial video so for our html and css we're going to use what's called bootstrap now this is from twitter um and what it is as it states here is a sleek intuitive empowered mobile first front-end framework for faster and easier web development now what this basically means uh it's basically uh portions of css that are already defined when you download it and it has a really good documentation on how to use it and it's all structured here to let you know uh basically how you can use this in your designs to speed up uh the process of developing responsive websites so of course our design is going to be responsive um but i'm not going to get too much into uh giving you an overview i'm just going to jump in and you'll learn naturally as we progress so the first thing you need to do is just download bootstrap and let's see i've already downloaded it but if i open it up here we'll see we have a folder called dist now remember i created those two folders css and js already and you just take the both of these files or just one and go ahead and extract them to your css folder here and then same thing with the bootstrap.js there now one thing that is kind of unfortunate uh is right now bootstrap 3 is relatively new and there's an option called customize up here but unfortunately it says until rc2 uh bootstrapper 3 customizer will be disabled so we're going to be customizing portions of the bootstrap build that we downloaded by hand usually it's made kind of a lot easier if this customizer were available but no big deal this way at least you'll be able to get a more solid understanding if you're new to css on how to tweak things yourself manually okay so i know that you've downloaded it and you've extracted those files now we're going to open up our uh code editor now i'm using what's called subline text too you can just google it and if you're interested you can buy it otherwise if you have no money you can use notepad just for writing out the code but this high formats the code pretty nicely and it's pretty popular so i again i've opened up the folder html and you can see if we open this up you'll see that we have the files in here i had to pause it real quick and add those because i didn't for the video i and so also we have our two image files so now we need to create an actual html file here so i'm going to go to new file and we'll just save this as index.html and so we're going to go ahead and get started with uh just hand typing out the code for the head so i i'm going to get started here with typing some html out and if you're already familiar with this you can just kind of fast forward just to get to the portion where you already see me typing this out i will go ahead and put the head here and if you're unfamiliar or you're new to html i i'm not going to sit here and explain every single tiny detail um but you'll naturally understand as we progress how you know everything kind of sort of works we'll give it a title look at design.co design and visual identity professionals alright so this tag here is important for making our design responsive make sure we don't have any spelling errors there all right and we also want to make sure we uh link our bootstrap css files here so i'm going to copy this and paste it into here and then you can just make sure you have the same exact thing uh so we have the bootstrap css linked here which is in this folder and then also we're going to have a custom.css file that will use for custom css for our site and then also we need to get the bootstrap js file linked as well so i'm just going to link that right here and also we need a copy of jquery so i'm going to do that as well just above it and i pasted this in here and if you need this exact uh link you can paste in you just type in jquery and google api and google and you'll be able to find that okay so that takes care of the uh head so now we need to put the body tags and this is where everything will go now if you're familiar with bootstrap uh bootstrap 3 is quite a bit different than bootstrap 2. so the way the scaffolding and the div names work and all that is quite different but if you switch back to the css area it'll basically tell you exactly what you need to know so let's go ahead back here real quick and the first div that we're going to add is div class equals container all right and inside here we're going to add div class equals row now what this class will be for this this div rather uh will be for this row up here so this is going to be div that will basically encompass these two portions the navigation the logo over here alright so let's go ahead and continue on and inside here we're going to add the link for the logo so ahref equals for now i'm just going to put the number sign and then class equals navbar brand and then the image tag here logo.png and close the tags up and so what this is this class here this is predefined bootstrap class for the css for navbar brand and what that does is just automatically uh adjusts the uh the logo right here based on the device that you're you're viewing it on so it's just a quick way to get some alignment going for the responsive aspects all right so now under here we have a little bit more uh html to write out here for the nav bar so let's go ahead and get started with that there's a div class equals navbar and this is also a predefined bootstrap css class all right and inside here we're also going to have a container and inside the container now we're going to have a html5 element button type equals button class equals navbar toggle data toggle equals collapse and data target equals navbar responsive collapse now basically i took this html i just copied it and pasted it uh when i initially went to set this project up before recording and that is right here once we go down to components we have navbar and then we have responsive nav bar so this is where this code come from right here that we're about to type out so what this does uh the response of navbar is you'll see pretty shortly uh once we progress in this video when we scale in the width of the browser the nav bar will automatically transition from looking like this and then into a mobile friendly version which will drop down so let's go ahead and continue and i'm going to go back here and just copy this portion all right and actually i'm going to delete that portion okay and then underneath there i'm going to copy again actually i'm going to do it from a different file off of my other monitor i'm going to copy and paste and then i'll quickly explain what's going on here all right so now we have a diff class uh equals in this is basically this line right here and let me go back and then we have a an unordered list which actually serves for the html for the menu and what we have here so the the diff class is nav collapse and then we also have a secondary collapse and then a nav bar responsive collapse now when we're talking about the data target the target is the same class name as this so this basically means is the links inside are not the links rather but the the list item that uh the menu will automatically be turned into a button basically for uh mobile and so we also have ul class we have nav nav pills pull right and then also my dash top dash nav now these are all these three right here are also bootstrap predefined css elements and if you explore just a little bit in here you'll see for example if you hit ctrl f [Music] and we put in pull right well then we can see that what happens when we add these so add pull right to a drop down menu to right align the drop down menu so we want to do that because we want this to be right aligned over here all right and then we could do this further with uh nav pills so what exactly is that well we can control f nav pills so we could take if we look up here uh we have ul class nav nav tabs or we can change this to uh yo class nav nav pills and that gives us basically this uh container outside of the actual menu or the links rather and we want the nav pills because in our design we have basically the same sort of thing going on all right so then we have the actual links right here which is portfolio testimonials log in and get started and when you add ul class equals active and again this is a j or a bootstrap we could see that adding active to a specific link makes it uh basically let me see here uh it gives us this effect right here all right so let me go ahead and make sure everything is good to go and it looks like it is i for that html so now let's go ahead and create a new file and we'll go ahead and save this in css and call it custom.css all right and now we're going to do the actual css for the background pattern all right so the first thing i'm going to do is add a comment up here custom logo design.co css and and that all right so the body tag is where we'll specify the background repeat dash x means it will repeat horizontally i'll go ahead and save that and now let's go ahead and view what this looks like so i'm going to open containing folder and double click this all right so now you can see we have uh this is obviously incorrect so we're going to have a little work to do in order to get this looking like this but we can see definitely already we have the background working for us at least back here all right so now what we want to do is do some custom css specifically for my top nav now remember my top nav is basically this portion over here and we're going to make the links white and a couple other things so let's go ahead and custom css get some lines to work with here and my dash top dash nav and let me add a right here for the link so this will allow us to style the link specifically and color ffff is white and then also i'm going to change the font size to 1.7 em now if we save this and refresh see that they've been added they've been a little bit bigger and they're not white so let's go back i'm going to copy this and then also add some css for the hover state when you hover your mouse over it and the specific color will be this color code right here which is a blue alright and then i'll paste this again just get rid of this my top nav margin 15 pixels zero and so let's go ahead and view this alright so now we've got the hovers working all right okay so basically if we bring back our browser we'll see that we have this basically this gray color this that's going around now this is real important basically if you need to figure out and troubleshoot you know exactly which css element you need to change in bootstrap in order to do something in chrome if you hit ctrl shift i you'll get this pop-up right here now i'm just going to drag this off the screen you're not going to be able to see it but if you select this little magnifying glass down there you'll see that if you hover over anything and also firefox has a very similar tool uh so you can research what exactly you need to get do but what shortcut it is that you need to do to get that up but it works the same way so if you hover over anything and then click on it in that window it will automatically select the html element so we'll see that this right here is div class nav bar okay and then on the right hand side you'll see that it shows all of the css properties for navbar and we can see right here background color has the color right there so that's where we want to go and remove from the bootstrap css file so if we go back to our editor click on bootstrap we can do a control f to find navbar and you may have to find it several times to find exactly where we want to go and we'll see it is right there so if we delete that and save it and go back to our browser here we'll see now we have the actual design all right so now if we scale this in we can see it begins to slightly start to work i do a couple more times and we will be adjusting these further so now what we want to do make this background here to get started uh white and then also invert the get started text to this color down here so again we can use the dev tool here by hitting ctrl shift i and we'll use the finder there and then just select click once there and that gives us this right here so it's in li class equals active and then the link is a so the css is right here so the background color is set to this blue color and then the color for the text is white so if we want to find that real quickly we'll just copy that and then in bootstrap will find right here and then for the color well for the background first we're going to make it white and the color we're going to go to photoshop and take the eyedropper tool and select that right there this is our color code down here and then we can paste this in for color and save it and now we have something that's starting to resemble uh what we have in photoshop at least okay so now what i want to do is go ahead and make the actual links uh the text we want it to be a different font than this so what i'll do is we're going to use a font again that is called source sans pro and it's a google web font so if we go here to our editor i have the html already that we can include for that specific font and i'm just going to copy it and then paste it right there and the way i get this is if we go to google and we just type in google web font we'll see that i we have sources pro right here but if we go here we have all these fonts that we can use in our website so if we just type in source and we click this quick use button we can have the option to choose all these different styles so i chose a three or chose a 300 and a bold 700. and when you do that it automatically updates the html down here and we can copy that and add it and it gives you instructions and how to use it into the css so that's just a quick tip so now let me go to our editor here and now that we have it included in the html up here now we have to specify it in bootstrap uh to use this uh new font that we have so if we go to our editor here and we go to bootstrap.css and do control f and just type in font-family we'll start it up here all right and do it a couple more times right here for body we have font dash family helvetica new well if we change this to source sans pro and hit control s to save we'll see it does get slightly changed um but if we want to let me experiment real quick font dash weight 300. okay that doesn't update that because that's text let me go down here and i made a statement mistake so i had to pause it real quick uh this should be above so that we can uh it can get loaded first before we reference it here in these files so that's why for refresh this will change to the correct font uh okay so let's go ahead and see what this looks like so far if we scale it down and we're gonna going to want a outline of this so we're definitely not finished yet but let me scroll out here and i want to put some margin basically between these elements so i've hit ctrl shift i to bring that back out you can't see it yet and we just select once and we could see in here i be my top nav for the class that we could uh specify here so let me see real quick if we go ahead and see here that we have uh the right here is what we want to copy go to bootstrap control find that sorry about that changes padding down from the top here from to from four to eight and then i want to do a search for nav pills and where it says margin left two we're going to change to 30 just to give them more space in between all right just like that okay so now i let me just drag this in to see how everything is coming and we'll have to adjust that okay so when we hover over these we could see that they are not quite white they're still like this gray color so basically we have to search for a hover state so let me hit ctrl shift i and we go here we'll see it is nav ally a so let me do a quick search hopefully i can find this real quick and we have li on the hover we have background color right here just change that to white see if that affects it correctly and it does okay so let's see if we look at our version we have a more rounded uh basically container here so we have to increase the border radius of this portion right here so i believe that is class active so we just do some finding here and one thing we could do is uh do a search for border radius this may be it right here now nav pills lia let me just experiment and see if it is or not i'm going to try 30 pixels just to test and it looks like that's it so that's good all right i okay so let's see what we have here we see that it is breaking right there so we have to definitely address that uh and so we can find out the exact portion of where it is breaking uh just by these rulers right here is by taking the font size here for these links and scaling them down uh in that way it will prevent that this issue from occurring so let's go over on to our editor here and we're going to look in bootstrap for a specific uh line here and i'm just going to type it in at media min width and it is right here so if i just copy this and then paste it into our custom close it up over here basically if you're unfamiliar with media queries uh this is basically what makes something responsive so if the viewport is within 768 pixels and 991 pixels then any of the css that goes here will override anything that's up here so we just want to change the font size of my dash top dash nav a to font size 1.4 em and we can add important to make sure that actually works and font size up here by default is 1.7 but if we change to 1.4 and we refresh [Music] now we can see that it scales down slightly so you can see how it kind of changes and that's the point where it scales down and then this portion is when the menu is changed for phone cell phones basically or any other small device all right so now what i want to do i is get a bar that shows up here so if we hit ctrl shift i and make sure this is selected and we click right there we see we have div class navbar now we removed where it said the background color but we can specify it in our css specifically for this size to be a certain color and so if we go to our editor we're going to i'm just going to copy this real quick delete this stuff in the middle and this one is just going to change to max width 767 so any of this anything inside this portion will pertain to smaller uh viewports so the css for that was navbar and let me delete that background dash color is let's just do white see how that looks and now we can see that it is now white and of course these are not showing up correctly either so we can adjust those and so let's go to our source here and since the colors were white for the links all i have to do is my actually i can just copy and paste this real quick the color is should be the blue color that we have and if we save that we can see them all now but we don't want them to be right aligned i want them to be vertically stacked so the way we can do that is to take my top nav ally display block clear both and now they are also kind of right aligned so let's go fix that and this will just be my top now just that container and this will be float left important all right so now we have an issue where these are kind of to the right so let's go ahead and fix that so if we hit ctrl shift i real quick we'll see that we have nav pills li plus li we have margin left 30 so that's where we need to uh that's what we need to fix so if you just control copy that and put it under here margin left 0 save it refresh and now we see that it's uh updated all right and then one final thing is i want to create some basically margin here i don't want this going straight up against the side of the device or the browser so what we can do is ctrl shift i and the very first uh container or the class the div that we have is container and so that's what we can adjust here so if we select it we'll see what the current uh css is and all we have to do is go into here bootstrap and we found it right here and i'm just going to put margin [Music] or padding rather sorry and now we get that gives us five pixels but hey let me want to do it just a tad bit more than that all right and that's a good portion i guess a good place to stop right there so in the next video we will continue on uh with doing the let me zoom out here the headline in the sub headline and then we'll also start with this section down here all right i'll see you then