Part 6 - iPhone Breathalyzer - HTML/CSS Part 2

[Music] hello Gary Simon of designc course.com today is January 30th with our 30th video of the year and today we're going to start writing our HTML for our iPhone breathalyzer homepage so as always the project files are available for free in the description below this video and also at designc course.com and if you haven't yet check out designcourse docomo there and subscribe here on YouTube all right let's get started all right so let's go ahead and get started here so basically let's revert back to photoshop here uh and look at our layout basically the first thing we're going to tackle in terms of writing uh for the HTML is going to be for this background image right here and so I want to go ahead and open that and that is right here so uh if we go to image image size we can see the width is 1280 and the height is 644 so the height is what we want to pay attention to that's the number that we want want to remember so let's go back into our editor and I'm going to give it a div ID equals home dbg and and then I'm going to immediately close it so if you've never touched or typed uh HTML before basically a div is kind of like a container and you have two types of ways to identify a div or any other type of HTML element uh one is ID and that means it's a unique ID this is uh something that won't occur again on the page and then you have what's called a class you could also call this a class and a class basically allows you to give the same type of class name or style whatever you're trying to sty style to multiple different HTML elements so we know we only have one of these those images which is at the top so we're going to give it an ID and then whatever you want to name it that's up to you so obviously something relevant that you'll you'll remember so I'm just going to save this and we're going to go back here oh one one thing I messed up on last tutorial the correct file name is 1140 CSS not 1140 PX that wouldn't have worked um so I'm going to save that and I'm going to just going to click I double click this I'm going to go to file new file and save something called custom.css and I'm going to put my custom CSS in a separate CSS file just so everything you know you can really just follow along a lot easier than trying to do everything in this massive document so so uh so now your file structure should be you know two different files in your CSS folder and then we have to go back here and just link to that new CSS file so we'll copy this and underneath it we will put custom. CSS and then save all right so I let's go ahead and get started up here so basically the way you reference I an ID in CSS is a number sign and then the actual name uh a way you do for class you just change it the number side to a period and that is uh that denotes a class so I'm going to start off here with home BG then you have your brackets and you know my editor kind of just creates The Second One automatically so it be it becomes a little bit more handy if you're using notepad but no big deal you can create that manually and then inside is where you have all your various CSS properties that you can specify so you have your property name such as font and then my editor also gives me you know this different CSS dropdowns or whatever so like font style and then you put a comma let me delete that real quick and so basically it is the CSS property name comma and then your value your value right here could be you know aial for instance and then you end it with a semicolon and so you can You' only have to put one if you want or if you want to put a ton you know the multiple Styles or way to arrange it then you just put a new line uh or you can put it right after it doesn't matter uh and you separate these by the semicolon that's just a quick rundown of how this will work so basically for our home BG we know we want the height to be 644 I believe if I look back it is 644 the width we're not going to specify 1280 so I'll show you why here so width 644 PX now we also have to put in the actual image so background URL and we going to put two periods in a forward slash which means it's going to back up out of this CSS folder and then go into images and then put the actual name which is bg.jpg all right just like that and then I'm also going to put let's see here yes with 100% just like that oh man what am I doing I meant height I'm sorry so that top that top one needs to be height not width all right so uh if we go back here um let's see if we we want to view this basically open it up in your in uh your folder or whatever if I right click I can open containing folder it's off screen in my other monitor if I double click this it's going to bring up the actual file um in the browser so this is what it looks like so far now if I were to take this I'm going to drag it off the screen you can see that it is looping it it's tiling the background and so that's that's standard and so the way you can turn that off by default is if we go back here to uh our CSS we put no- repeat and we can also put Center because we want it to be centered otherwise it will just stay to the left of the screen if we say that save that and go back we'll see if I pull it it's not going to repeat anymore but the background here is white which is basically the white background uh of the website which is default so to fix that we go back and we'll specify right here 0000 for the color code and that is black so now if we refresh it is black and it stays centered and it does not repeat and you also see no hard edges because we fixed that uh in the previous lesson or tutorial rather all right so so far so good pretty simple um let me go ahead and let's continue on with our HTML so let's go over here basically I in HTML 5 there's a a HTML element called header and we're going to give it a class equals clearfix and that is a class that came with our 1140 uh. CSS and and basically it fixes an issue where you won't be able to see the header based on the content inside of it so clear fix will push that out and I'll show you basically we'll remove this and see what you know happens and so you'll see the actual reason for it uh so I always just like to close this real quick so then inside of it we're going to start working on adding our actual uh the logo in the navigation so real quick we first have to put a div class equals container 12 and then close it so what is container 12 container 12 is also one of the classes that uh comes with our 1140 do CSS so if we do a uh a search for that we'll see it's referenced a whole bunch of different times but basically it structures it so that that if we revert back here it's going to create a container that goes the width of 12 of our columns all right so let me go back here we'll go back to yeah right here we'll go inside container 12 and inside there we're going to put in our column Arrangement so if we go back to our Photoshop we turn on the grid we're going to look right here and our logo basically will span the width of two columns because it kind of goes after this and so we're going to have two columns and then we're going to have let me see what I did before just to be certain then we're going to have 10 so that they'll equal an even number uh 12 basically at the end so let me go over here so we have container 12 div class oops we need to put the uh div class equals container sorry column two div and then down there div class equals column 10 and then close it up all right so we have our container 12 and then inside of it are two columns which me equal 12 basically all right all right so now inside of column two we're going to put in the logo so we want the logo to be a link ahre I usually make it just point to the homepage so the ahre right here this is wherever you want it to go a number sign just means basically nothing it's not going to go anywhere um so then what we want to do is put in the image inside of that so IMG Source equals images logo.png and we also going to give it an ID so we that we can uh control it through CSS if need be so ID equals logo I'll call it end it and then end the a tag right here all right so then we'll come over here into column 10 and we're going to have we'll do this afterwards actually let me just start off with the me the menu which is going to be a UL on ordered list and we're going to give that an ID of of nav and we're also going to give it a class something called flr which is just something I came up with uh float right and also Omega which Omega is also a class that came with 1140 and real quickly if you want to see you know what all those classes are if we go here to 1140 px. comom when we scroll down it shows you some of the classes that came with it so Alpha removes the left margin Omega removes the right margin so just a tip right there and of course you know if you're if this is going over your head just just follow along you it'll eventually come to you so uh inside of the unordered list we have to put our actual uh navigation menu items which I think we had five of them so Li and then we will put ahre for a link and then we'll call the first one I believe was shop and close it and then close the Ali tag as well all right so that is our first link so if we go back here turn this off that is this link right here and so we will continue on let me go to now I'm going to copy this and then paste it five times or four times rather so we have five different links so those links are after shop we have details fact help and contact all right so we'll save that now if we view this in the browser if we go back to you know Chrome or whatever we're using uh and we refresh that we could see that's where the hell did it go right so it's down here and that's because we need to use some CSS to uh make some adjustments so that this will go up there and let me start doing that so let's go back here what we want to do is go to custom we want to change we want to add a a property called position absolute so if we go back here and we refresh this we can now see our logo along with our menu now this is the default menu there's nothing applied to it in terms of CSS so that's what we need to do we need to adjust a couple things to get this working properly all right so uh let's go over here and inside of container 12 just after the opening tag we want to add another one and that is going to be for that black bar at the top that kind of contains the logo in the menu so div ID equals fade BG as in fade background because it's going to be slightly transparent it's not really a fade it's like transparency and then we're just going to immediately close that as well just like that all right so right now of course it doesn't it's not styled nothing it'll it'll still look like this you know so we have to go into CSS and style that specific tag so I'm just going I'm gon to enter down a few times just to give myself some room here to click and for fade BG we're going to type in remember it's an ID so we use that number sign all right so the background we know we want to be black so background color code three zos and we know we also want the position to be absolute and we know we want the height to be 100% with 100% And we want to give it a transparency as well so right now we can't see anything so let's go back here the transparency uh when it comes to different browsers sometimes you have to do an alteration few times of the transparency code so filter Alpha and then parentheses opacity equals 60 that's for iie and then Mose Das opacity 0.6 that's for Milla and then opacity 0.6 so if we go ahead and go back to the browser we could see it has that very slight transparency and everything inside of it though is also transparent as well so we have to make a fix to that so that these items and and also you can't click these either so we have to make a fix for that the way we do this is come back to our HTML and we kind of look at what's going on here so header we want to make in reference in our CSS and when it comes to reference ing entire blocks of uh HTML if it starts off like this or if it start starts off like that and you want to affect all items that say div or header or whatever uh or or all UL items or links or paragraph tags or anything you just basically start off by stating you don't denote it by any type of character so header and we're going to make that position absolute with 100% and let's come back here and that didn't work correctly because I just realized I have that um piece of HTML in the wrong location so let me go back this fade BG needs to be removed from there I did not mean to do that it need to be right after header the opening header tag so paste that there sorry about that we'll save it and then we will right click and now it comes back to where it needs to be all right so by default this right here like I said is the default rendering for unordered list items so we need to go ahead and work on that in the CSS so UL ID nav that's what we need to remember so let me come down here so what we want to go do below header we'll click and we will there's a couple ways you can specify uh HTML elements in CSS so if we just want to do nav you could do that but I like putting UL nav and then that way we know real quickly by looking at it and at a glance you understand where everything is going so right here inside of that we want to put list style type none and what that does if we go back here if we hit contr a before we see these little dots now we do it I refreshed it takes those dots away so that's just one of the many different types of uh properties you can apply to the list so let's go back here continue on with this we're going to close that I'm just going to take all this copy it paste it below and now we want to be able to style the individual list items so you put Li after that all right we'll remove that and now what we want to do is make them all go on the same line right now they're all vertical from each other so display in line float left so by default it's usually display block we we're making it in line and then they're going to float left left of each other so if we go back we'll see now they're all scrunched up so we're starting to get you know the basic idea even though it's uh not looking at all good so let's just keep on working on this let's go down a second time because we also have within the LI elements an actual link and so we just put a right here so this is going to style all the actual links themselves and so on here we're going to put display block and then padding 20 pixels by 30 pixels so when it comes to specifying padding or margin you can put for example just 20 pixels and padding by the way is basically the space between the element itself like the text and the container so 20 pixels would be 20 pixels I from the top right left and bottom so if we just save that and refresh it we can see now that these are all pretty much evenly spaced so let's go back to here if we wanted to widen these though a little bit further and space them out from each other a little bit further what we would do is put space so that that the the first value is usually just the top so if we want to affect the right we put 30 pixels and whenever you put in just two of the values this means top and bottom and this means right and left if you wanted to control for example top right bottom maybe for some reason you only wanted to put five pixels at the bottom and then maybe uh 10 pixels to the left this that's how you would do it oops I just loaded up my uh pre-recording intro type thing uh but no this is uh basically how that affects but for our purposes we want to go back and just change this to 20 by 30 so 20 pixels on the top and bottom and 30 on the right and left so if we go back there there and there we go the problem is we see a couple problems obviously we want this to move over here to the right side of the container and they obviously need to be styled differently so let's keep on working so we want to make the color white we know that so we'll specify that's the color code for white and then we can also go ahead and specify text transform uppercase so that takes it and makes everything automatically uppercase so let me go back here there we go we want to get rid of the underline so that means text decoration none you'll see how this is beginning to take shape and we want it to float right and so where is this at remember flr and we have it applied on our list we need to reference that here float right and the reason I would give it its own separate class instead of just putting here is because we may use this multiple times so that's what that means so let's go over here there we go starting to take shape now over here this is like kind of just smashed up there to the top it has no margin or padding so what we want to do is reference that logo the ID here is logo right there and so all I have to do is logo margin-top 20 pixels because remember this is also 20 pixels from the top as well so let's go back and look at that all right good stuff now we have to adjust the actual font so I'm going to make this one aerial font family aial and I'm going to take down the size a little bit so font size font size I think 0.9 em there all right so let's see what happens to this thing when we scale it in okay so as it's scaled in it's uh you know this is part this around this width would be for kind of like an iPad or a tablet and then you get into this this area and this is where you're getting into the phone range so we're going to work on this a bit so that it becomes a little bit better in terms of usability so I if I hit on Chrome I know Firefox has the same thing for Chrome the shortcut is control shift I I think it might be the same thing it loaded up off the screen um let me see here when I do that though you can see when we drag in and out the window we'll see that it shows us the exact width right there and so when we go down right around 768 and seven that's when things begin to move and the reason it's doing that is because of our 1140 docss so if we scroll down we'll find what are called media queries this is the first one and basically they're kind of like if statements you know if the minimum width is 960 and the max width is 1160 then apply this CSS everything inside this bracket right there and then you have media only screen and minwidth is 768 and if the max width is there then only apply this and so instead of working within this document to try to you know fix up our menu a little bit better I will to Simply copy and paste some of these media queries real quickly so let me go ahead and we'll take this first one so we have Max withth 767 right right there so let me just go down and right around here paste that in and then close that bracket and then inside of it so what this means is I if the viewport or whatever device you know whether it be on a mobile device a tablet or or a PC uh if the width is less than 767 perform or render what is whatever is inside of here basically all right so we're going to adjust when we come in here right around here I wanted to adjust this so that the the the padding between these shrinks a little bit okay so let me bring that back out but I'm not going to specify in here we're going to go back here and grab this top one right here I'll put it uh at the top of it close that bracket and basically if the width is between this value and this value then execute what whatever is in here so what we have to do is take real quick I'll just copy this for our a elements and then I'll tab all this in what we'll do is we'll get rid of this the only thing we want to it to affect is the padding so we could take this down from 30 pix pixels and cut that in half to 15 hit save we'll refresh that and right now we are outside of that area that's going to affect from the CSS we just added and then right there you saw that it came down a little bit so you can see how it just kind of goes from 30 to 15 all right so let us continue here now what I want to do is when this is scaled in all the way to the phone like the 767 and less instead of dropping this down like this which really in terms of VI on a phone it's going to push down all your content you know you only have such a a limited area vertically to display content we want to hide this and instead put a little toggle menu so that kind of like this actually it's going to be exactly like that uh just three dashes to denote that there's a menu that you can basically click on and these will fall down as you do so uh but before I do that we want to style this so that when we get to this point within 767 these will go back to their default state where they are stacked on top of each other all right so let's go ahead and do that and we're going to specify all this right here within the brackets of the 767 media query all right so what we want to do first is put UL naav Li and we want to put display block remember we we specified display inline float left now if we do block you'll see what happens if you save this and refresh and go back or not that's because I forgot to put float none also put width 100% as well okay and then now of course they're floating to the right still so we need to fix that and it's because we have the UL nav itself we we had that class at added to it actually where it's float right I'm just going to specify float left I'm going to put width 100% here and save that all right and then if we take this I'm just going to copy this just to save myself from typing specify the a and what we want to do there is make this dis we'll keep display block on this as well we'll put we'll change the padding a little bit pading apx and zero so the apx on pixels on the the top and bottom and then zero for the left and right and so if you save this now it kind of shrinks it a little bit and the 100% extends the portion which we can click and we'll style this a little bit later but for now that's pretty good so if we go ahead and scale this in we can see how it reacts so that's good all right so now what we want to do when we pull this in is by default we want to hide it so what we need to do is come over here for the UL nav we want to hide the entire nav so what we do is put display none all right so now this will drastically change it bye-bye so uh we'll have that and then it comes in So at the same time that disappears we want a little icon to show up here something that is clickable all right so let me go ahead and go into Photoshop and create a new layer at the top of our document and I'm not going to hide this I'm just going to put it right here in the center and I'm going to use the rounded rectangle with a three pixel border radius and I'm going to hold alt to drag out roughly around that size so w width is 50 and height is five then I'm going to duplicate it control shift d duplicate it again hit control 1 to see what that looks like it's a little bit big so I'm going to take those three layers h control T and hit apply I think that's good all right so I'm going to merge those right click rasterize themr a and then contrl C crln for a new document enter contrl V to paste and then save for web file save for web and we'll change it 24bit transparency uh PNG file and I'm going to back up here going to save this as toggle all right so let's go back here to this area and we need to add in the HTML for that toggle switch button sort of thing all right so the area that we want to add that is going to be just before the unordered list so it's going to be a link so ahre equals put the number sign there ID equals toggle-switch and the ID will be important for uh in a later tutorial where we're actually going to get this thing working and toggle menu and then end it right there so now if we just save that it's going to show that on every single uh View simply because we haven't adjusted the CSS yet so what we want to do is go back into our custom.css and by default everything outside of this of these media quers is basically Universal you know regardless of whatever viewport you're in so by default we want that toggle switch to be hidden unless we're in this width right here for the viewport so the uh ID was toggle-switch display none all right so now we don't see it by default but I'm going to copy that paste it in here and then what we want to do for our CSS is put display inline because we do want it to float to the right and Float right now let's just save that and see oh actually first we have to yeah I know that's not going to work we never referenced the actual image so let me put that up here background URL images toggle. PNG we also have to get the width and height of that so go to image image size here in Photoshop mine is 37 by 22 so width is 37 pixels height is 22 pixels and we don't have to put no repeat on this because we're specifying the exact width and height so that's not an issue and then also we did have if I go back here we're going to want to put toggle menu and then we're going to want to hide that text so text-indent hides it so let's go ahead and refresh wow why are you showing up all right one second I think I messed up the CSS and yes that was uh kind of stupid I already had put this in over here and for some reason I thought that was the HTML so that was the logo that's why that's showing up next to the logo oh my it happens so now that's gone okay good it was ridiculous okay so now we could see if we drag this in we see our menu but it's down here because it's in a separate column container so uh what we got to do is go into our CSS and we're going to move that toggle switch up here so let's go back here and you can give it a negative margin basically so the first value remember is uh the top -20 pixels and then I'm going to put zero and then also well I'm going to leave it right there just for now and also you can specify a top only for the property uh for the CSS property so if I just put -20 pixels for the top come over here we can see it is basically coming up a little bit more but if you need to come up more we can go ahead and let's try just some other guess work try 40 and that looks pretty good then also if we want this to come up a little bit we can get rid of the Top Value um or the dashtop and put zero here for right we we know we don't want to mess with that but for bottom -10 and then zero and I forgot the one thing that's uh pushing this down isn't that necessarily or we can't bring it up by doing that there's a margin by default on the column from our 1140 PX PX over here if I hit control shift I brings up this window I I'm going to I kind of have to move it off screen to use it properly there's a little this right here this thing if you click on that in Chrome at least you can click on any element and it'll automatically specify or click on to show you where it's at in the HTML so once I clicked on this it brought this up and this right here column two you see that it has this uh it's pushing down so what we want to do is go back into our HTML and where it says column two we want to give it an ID because we only want to uh affect that specific uh basically HTML element and so I'm just going to call this header and C2 as I'm column two and then come over here and reference make sure you're within this portion header C2 margin bottom zero and then because we took off 20 pixels because the margin was uh 20 we're gonna have to adjust this back down to 20 as well so now everything's lined up properly so if you're confused that you're new to this don't worry that's it's expected the only way you're really going to get conf confidence just keep on doing keep on following along and keep on following uh these tutorials all right so basically we have the header done um obviously this doesn't function we're going to take care of that when we're done with all the other stuff so I'm not tooo worried about that part and then we're going to come down and continue on let me go ahead and get up Photoshop we're already at 40 plus minutes wow it's going to take a while all right so we come back here you see the next thing we need to take care of zoom out here is this and this I think I'm only going to focus on this for for today uh so what we want to do is get up our grid and kind of see how many Grid or columns whatever you know that this goes across and this will be centered between five and then this one starts over here and so this goes the distance of six and we're going to move it over with some CSS by one grid all right so to do that let's go ahead and get that HTML started and so after header we want to put in div class equals container 12 we have to do that otherwise if we let me put something outside of there and save this and just show you oh actually it's all up here in the background forgot about that uh but basically it it would just be sitting to the left of the very of the viewport so we don't want that so container div class container 12 12 div class equals column 5 because we wanted that that first one to be five columns div and then inside of it we want to put IMG Source equals Images slash I think we called it breathalyzer dt. PNG ID equals phone dtop because we also want to reference that in CSS and then down here we have div class equals column 6 prefix one ID equals I'm just going to call this top one div and what that prefix does that's from our 1140 PX website right here prefix 1 through 15 pushes the column to the right hand side by the width of X column so we just wanted it to one all right and let's see here going to give this a second class so you can actually give a div or any other type of HTML element multiple classes I'm going to call this ALC just for now we'll get to that all so let's just save this and we're going to see our iPhone image or not the breathalyzer and it's going to be automatically at the top so we need to position some things around so this does not happen all right so let me come out here let's go to our custom CSS and the ID again is phone dashtop so I'm going to come up here outside of the media queries and I'm going to give it a margin oops phone dtop a margin-top of 110 pixels all right so now we refresh and it's good to go and so you can see when we scale this thing in it's changing the size of the actual iPhone or why do I keep doing that breathalyzer and it's doing that because of the responsive framework stuff that's inside this 1140 PX and one thing I don't like is it's kind of not centered so we got to Center that so let's go ahead back and that's what that ALC class was that we applied on the containing uh div for the phone top ALC is align Center we'll just put text-align Center even though it's not text and now it lines that in the center all right now also if we go over here to the HTML for this column six that is where all this stuff right here will go and so I think that's a pretty good part to stop um real quick just to show you if I put uh H1 is uh let's see here want to see what the uh thing was the first iPhone breath lier I'll just copy this just to show you where this is at and how this will work it's up here because this is all absolute position stuff so things will overlap each other what we have to do is let me go back out here into our custom remember we gave the ID top one to the containing element of all this content that's going to be here so if we go to top one we have to specify over here margin-top we want it to be a little push down a little bit further than that phone image so I put 200 instead of 110 and now we see it's right here and if we obviously it's completely wrong in terms of font and all that but if we come down we'll see now it's pushed all the way down here because it still has 200 pixels so that's what we would fix in here with our conditional media query media query stuff so I think that's a good portion to end it's already 46 and my voice is like going out it feels like so tomorrow we're going to focus on probably let's see here um on getting done this stuff right here and then also you know making sure everything lines correctly for tablet and uh phones and then probably this here as well although who knows it it I'd say the hardest stuff was up here when it came to creating this stuff in terms of creating all the CSS this stuff will be probably quite a bit easier so we might be able to finish tomorrow we'll see um but yeah uh so definitely check out designc course.com if you haven't yet already and subscribe here on YouTube and I will see you tomorrow [Music]