Build a web page from scratch! HTML5, CSS3, JavaScript Tutorial

hello everyone in this video tutorial we are going to be building this page from scratch there will be no frameworks no libraries this will be just html5 css3 and a little bit of JavaScript so it's a standard home page look and feel we got a logo top nav links few different sections here a map in a contact form this map is just going to be a static image for this it's not gonna be a full-on interactive google map or anything that's a little bit out of scope for this so static image here and then we have a contact form which will also be static but real input boxes it'll also be completely responsive so just to give you an idea of what it will look like on smaller devices first off we have this hamburger menu that one clicked you will get your nav links and a little drop down one clicked again they're gone and then everything else kind of scales down to look and function well on smaller devices so without further ado let's get right into it you can see I'm starting here with a completely blank directory I'm gonna be using Visual Studio code so let's go ahead and open this folder in our code editor so file open folder let's code this select folder expand I'm gonna create a new file here and this is gonna be index.html it's gonna be all of our HTML code I'm gonna create a directory call it CSS and then inside of the CSS directory I'm going to create a file style.css and this will contain all of our style rules okay so I'm just going to drag this over a bit and you can see here there's the index file inside of the CSS directory we have our stylesheet excuse me hmm let's pull this over a bit get us a little bit more room to code and let's go right into it so first thing we need a doctype and then HTML tag head tech I'm gonna be moving a little bit quick so feel free to pause the video if you want to catch up I'll just say let's code this episode one for the title of the page and let's set a meta for the viewport this will be for the responsive aspect with will equal device width and I encourage you to look into exactly what this meta tag means if you care to one zero maximum scale one point zero oops close that next we're gonna need to link to our external stylesheet so that will be a link tag with an href of CSS / styles dot CSS because that's where the file is located it's a stylesheet type is text oops text / CSS close the tag and then that's it for the head create a body tag and then I'm gonna go ahead and just wrap the whole thing in a div called wrapper and then let's start with the header so I'm gonna scroll back up on our finished product here and so we're gonna start with this upper section we're gonna put the whole thing in a header tag and then we have the logo so let's go ahead and code that out well first off I say we have a few things here kind of laid out in line right we have a logo on the left and then a collection of links on the right so there's a a few ways that we can do something like this you can use float left float right you can use tables or you could use flexbox in this tutorial I'll be using flexbox to handle all kinds of alignments such as this so let's first create a Flex container which will just be a div with class of Flex inside that our first flex item will be the logo which is on the left hand side so div classical's logo and I don't have a static image for this so I'm just gonna create it as text it'll be a link it's not gonna link anywhere since we're only building this one page Acme and then if you notice that the word company is different colors so I'm gonna wrap that in a span tag so that we can call out and change the color of just the word company I'm gonna pull this over a bit more so we have more room to code and there we go so a commute company then under that let's create a nav tag and this is going to be for the nav links over here also remember we had a hamburger menu which is a button so let's go ahead and create that button nav toggle class equals hamburger menu this is when we're on small screens and then inside we had the strip so let me just pull this over again so we can see what it looked like oops so hamburger menu has three white strips inside of it so let's go ahead and just create those as spans and I'm gonna give each of these spans a class of strips so I can just go ahead and copy this two more times there we go pull this back out so we can go and look at the desktop version again next will be an unordered list for our links nav menu container and then we have some list items inside each of them is a link so it'll be a anchor tag again they're not linking anywhere because we're only building the one page about and then I'll go ahead and copy and paste this a few more times services projects clients and contacts let's go ahead and update the text services projects clients and finally contact div header and that should do it for the header section yep that should do it so next let's put a main tag here and this is going to kind of be for all of the main content right this hero image section with this floating kind of marketing bar with some text inside of it and all these sections here will all be inside of this main tag so the first section inside this main tag is going to be our hero image so I'll just say section class hero image and that's gonna represent this entire upper part here including this floating bar and I'll just create an image tag for that large image I'll say all Acme company hero image and I already have a link to an image I'm going to use so let me just copy and paste that into the source attribute here next we have pulled this over some more next we have this floating bar with achieving growth and developing innovative strategy so let's create a div class equals hero marketing bars what I'm going to call it inside of it we have some small text but it's still a header text so I'll create an h3 tag and this is developing innovative strategies next we have some large text achieving growth and put that in an h1 tag it's a little bit larger and that should be it for the hero image section so let's move down to the next section which is these three boxes so let's create a let's see here yeah let's create another section I'll give it a class of marketing boxes and then again we have three items here kind of laid out in one line so I'm gonna use another Flex container again you could have used floats or tables but I'll be using flex flex box for this tutorial so create a Flex container and then inside is where we have each of our boxes so I'll just write a div with a class of box inside of the box we have some header text and notice how it's not quite as large as achieving growth but it's larger than developing innovative strategies so let's use an h2 tag for that services and then we had a paragraph tag underneath each of the headers and I'm just going to go ahead and copy this text I'm not going to type it out so ctrl-c ctrl-v okay and then we have a button underneath the paragraph so we'll create a button we'll say more info and we have three boxes so let's just go ahead and copy and paste our boxes two more times oh that's just messed up the indentation to fix that bear with me here this is projects and this is clients I want to keep the text the same and that should do it for the box is section yes I should do it so let's move on so next we have scroll down we have the about Us section so let's create another section tag class equals about us and then notice that we have a large header which is the exact same style and size as achieving growth so this will be a h1 let's go ahead and create that and that is about us and then we have a paragraph so I'll go ahead and copy and paste role C and then for the spacing underneath each paragraph I'm going to go ahead and just use two line breaks here there's a few ways you could have done something like this I'll just choose to keep it in one paragraph tag with a few line breaks okay and then underneath that we have a read more button so let's go ahead and create a button oops button read more and that should do it for the about us so moving on we got the contact us section so another section tag class it's contact us and I'm gonna zoom in a bit here I hope that codes not too small okay let's zoom in I'm gonna go and pull this over it's probably easier to read I apologize if it's been too small I will have all this code linked in the description of this video so don't worry too much about having to type as I go all right so section class equals contact us so we have a map on the left well first we have this header text so let's go ahead and add our h1 contact us then we have the map on the left and the contact form in the address on the right so this is another chance to use flexbox so let's create a Flex container and then the first one is gonna be the map so today I'll give it a class on the map again this is just a static image alt text of a map I'm gonna go ahead and just copy and paste the image that I'm gonna be using for the map into the source attribute and then whoops that didn't work okay let's do that then next we have the contact form in the address so underneath this map div let's create a div with class of contact form and an inside the first thing we have is the address so we'll put that in an address tag and let's see what it is one two three four Evergreen Terrace I'll use a line break to wordwrap Chicago Illinois four and nine three four three another line break info at Acme company comm another line break and finally the telephone one two three four five six seven eight nine zero all right that's the address underneath the address we have a contact form so let's create a form tag and inside we have some text boxes so input type equals text give it a name of name cuz we're looking for the name ID name placeholder capital n name the reason placeholder is a capital N is because the placeholder text is what is going to appear to the user in the text boxes before they've typed something so as you type kind of replaces that placeholder text with whatever's typed and then when you get rid of it the placeholder text comes back so let's go to copy and paste as a few times for email subject so change this to email the next to subject and then I'll go ahead and copy and copy subject and then I'm gonna capitalize the s of subject and the e of email okay and then we have this large text box which is a text area I'll give it an ID of message placeholder we want type your message here and close the text area and then we have a button submit okay and that should do it and since we're not going to be since this is just a static form and we're just doing the HTML and CSS we're not gonna have any action attributes for the form it's not gonna actually be submitted so it's just a plain static form we're just learning to master HTML and CSS in this tutorial so that should do it for the contact us so the last piece would be the footer so I'm gonna put that outside of our main tag here so let's create a footer tag and then if we look at our footer we have some copyright text on the left and some social media links on the right so once again that kind of lends itself to a flex container and then we have some small text so we'll put in a small tag let's see and if you want that copyright sign you can do an HTML code which I believe is ampersand copy with a semicolon 2019 Acme company proudly created by Acme company and then underneath that let's create an unordered list for our social media links so then we have a list item and these will be links that don't go anywhere but we'll put them in an a tag and then image I have small image icons for each of these social media links all of Facebook and four icons small like this I would recommend using fun awesome but for this tutorial I'm just going to be using static images fun awesome would be a little bit easier but that is technically a library that you have to include in your project and we're not using libraries in this tutorial this is all from scratch so let's go ahead and copy this list item for the next one which is Twitter just fix that indentation so the next one is Twitter so let's update this to Twitter and I have another image here I'll be pulling in for the Twitter icon so I'm gonna go ahead and copy and paste that in here okay and that should do it for the HTML so let's go ahead and I've already have the page pulled up here I'm gonna go ahead and refresh and there it is so this is our page with just plain HTML there's no CSS no JavaScript so this is what it kind of looks like as you can see it looks terrible so CSS is very powerful and that's what's going to come into play next so let's get right into that let's go to our Styles dot CSS file and we will start putting in our style rules so I like to keep my style sheets very organized so I'm gonna say global style rules first I'm gonna put a comment let's first off take away the default margin that the browser applies so if you can see this little spacing around the entire page that is the browser default it's gonna be added that on so let's say margin zero on the body and that'll get rid of that so if I save this refresh nope what happened okay clearly I missed something did we link to our stylesheet CSS Styles dot CSS link CSS Styles alright so next thing I would do is do an inspect to see what I missed let's pull the inspector over a bit and go to the body we don't have any Styles being applied to the body what we want is a margin:0 which will do that it'll take away that default spacing but somehow I missed something Oh style dot CSS it should be styles.css there we go save that refresh there we go now when we click on our body tag in the inspector we can see our margin of zero is being applied from styles dot CSS sorry for that hiccup there's always small issues here and there so let's go back to our style sheet and continue so next thing we want to add some custom font so if we compare our finished product the way the text looks compared to our plain HTML you can see it's using a completely different font so let's go ahead and use Helvetica with a sans-serif backup all right next if we look at our finished product again notice how all of our header texts are centered on the page they're pretty light but they're not like a bold font weight and they're all uppercase so we can go ahead and target all those in one style rule so h1 h2 h3 will say text-align:center and that will basically Center them on the page like so then we said that there are pretty light font weight so we'll give it a font weight of 300 which is pretty light we're going to get rid of the margins which the browser provides by default so if I inspect one of these you can see that there's yellow spacing above it and below it that's being applied by default from the browser so putting a margin of zero and I hit save now it's gone so now that there there is no default margin we're to handle that ourselves so next would be their upper case so the text transform upper case and that will force them all to the upper case now I could have just wrote them in uppercase in the HTML code itself but I wanted to show you guys the text transform property next let's just target the h1s and let's sent them a font size of 4 m/s it's increased as a bit the h2s will be 2 m/s and the H threes will be 1.2 m/s next let's target the hyperlinks so again just really quick let me close the inspector here if we see our hyperlinks are blue and they have a default text decoration of underline in our finished product they do not have an underline until you hover over them so let's go ahead and fix that now so by default we want text decoration to be none and then on hover we want text decoration to be underlined and if I save that refresh now we can see that on hover we have the the underline next let's target our Flex containers and we're gonna make them all flux boxes so display flex let's set a max width of eleven hundred and fifty pixels to kind of give them some constrain the width of it so it's not completely as wide as the page in case there's very large monitors and then we'll say margin:0 auto which is a way to center something on the page to center horizontally an entire container it's shorthand for saying zero pixels of margin on the top auto on the right auto on the left and zero on the bottom okay so next that's it for the global style rules so now let's go to the first section which is header style so I'm gonna say start header styles and then end header style so let's keep our stylesheet' very organized so the first thing in our header styles let's just go ahead and target that header tag because if we look back at our HTML here the entire header was wrapped in a header tag then we got a flexbox then we add the logo and the nav container which had our hamburger menu and our links so the header we're gonna set the background color because if we look at our finished product it has this dark blue background colors so I have that and that is 0 C 3 C 16 yep there we go let's give it some padding of 20 pixels which will give us some spacing around and then it'll set it to position of relative we'll see exactly why we're doing this a little bit later it has to do with the responsive aspect of the nav menu when it's invoked from the hamburger menu next let's target the Flex container inside of our header and display flex and justify content space between so just on my content space between well basically if you have only two items in your Flex container which if we look back at the Flex in our header we have two items right we have the logo div and the nav container item so space between we'll just say the first item goes to the far left and the last item goes to the far right which is exactly what we want right the logo on the left the nav links on the right and the hamburger menu when it's visible on small screens will be on the right as well so just like on dead space between and then let's target the little logos hyperlink we'll set it to a a color of white if we look back it's it's white but the word company is not so we'll handle that in a second text transform will be uppercase and now let's make the font size 1.25 m/s logos a little bit larger so set that and then also on hover of this logo which is also a hyperlink we don't want that underlined so we'll say text-decoration:none so we don't want it to look like this we want it to be like a logo so no underline on hover is what we're doing here okay so next is the span tag which if you recall I wrapped the award company and its own span tag so let's target that in the CSS and we'll give it the color which is like a teal so I have the hex code for that as 7dc a c3 yep all right that's that and then let's start working on the hamburger menu so the hamburger menu will set the background color to transparent since all buttons have a default background color that the browser gives it so let's just get rid of that we'll set the border to 1 pixels solid and white because if we look back and what our hamburger menu looks like it is white border with white strips inside pull this back out so there's the border let's give it some padding 3 pixels on the top and bottom and 5 pixels on the right on the left let's give it a width of 30 pixels I'll say cursor:pointer which will turn the the cursor into like a clickable hand look when it's hovered over so that it gets the it gives the user an idea that it can be clicked on and then by default this is going to be hidden so display will be none so next let's target the strips inside of the hamburger menu which were all span tags with a class of strip these will be display a block give them a height over 1 pixels and set the background color again to white and then give them some top and bottom margin of 4 pixels and right and left margin of 0 pixels margin for pixels at 0 again that's shorthand and then next let's see next we have the unordered list which has our nav links up here let's target that we're gonna say list-style-type:none so what this is gonna do is if we go back over here you can see that we have these black bullets here so if you set the list style type to none whoops save the work refresh kind of hard to see what those black bullets are now gone so that's list-style-type of none and then padding:0 margin:0 since unordered lists by default or given a margin and padding by the browser so let's just wipe those out by setting both of those to zero next let's target the list items inside of our an ordered list will say display:inline-block and this is going to make them instead of stacking one on top of the other in line block we'll have them sit on one line with each other we'll set the font size to 0.75 m's to bring that down a bit and then zero margin on the top and bottom and 12 pixels of margin on the right and the left to space them out from one another or horizontally next we'll target the links themselves so now have ul Li a and we'll give them a color of white so if we go ahead and say this again now our header is kind of starting to come together so let me drag this over a little bit whoops drag this we get as much ruin them CSS okay and I think that should do it for the header styles yeah let's move on so the next section was this hero image section so let's go ahead and say start hero section styles and hero section styles and then the first thing we'll target if we look back at our HTML let's see here scroll down a bit so here's the hero image sections so it's got a class of hero image we have an image and then a div with hero marketing bar and that's gonna be this floating bar that floats on top of the image so if we go back here let's target a hero image section tag I'll give it a position of relative and I'll explain what this means in a second set a max height of 650 pixels so that it doesn't grow too high on wider screens this is a pretty large image so if I go back to the prototype that we're still trying to build you can see on wider screens this image is pretty tall so let's constrain this whole section to not grow any larger than 650 pixels and anything that overflows outside of that we're gonna hide it so it will be covered up give it a margin bottom of 90 pixels and that'll be if I go back to the finished product that's this spacing here so margin bottom of 90 and then let's target the image tag itself inside of the here image container and we're gonna say with a hundred percent and this is going to make sure that the width of this image is not any larger than its parent container which is the section tag of hero image so if I just refresh our prototype here now we can see that the image kind of got smaller right so now it's its width is constrained to how wide the screen is really whereas it was pretty large because it's a larger image so he kind of stretched out further than the size of the screen all right moving on so next we have the hero marketing bar so let's go ahead and target that so hero marketing bar will give it a position of absolute and this is basically absolute means that this element is is going to be pulled out of the flow of the page so it's not really gonna be taking a space per se it's kind of just floating up there in space and that's how we're gonna get it to kind of float on top of this this image and then you can kind of see through it and see the image behind it which is a pretty cool little effect here so position:absolute and if you're not too familiar with positioning especially as relative relates to absolute I would encourage you to read up on it but basically whenever you have an absolute position element inside of a relative position container the positioning of the absolute element respects the the relative position container that probably doesn't make a lot of sense so reading up on this is probably pretty valuable but let's continue on so we're gonna give it a z-index of two and that's gonna ensure that the hero marketing bar stays on top of the image and not the other way around and then to get that kind of see-through look we're gonna use a background color of rgba and we'll do 255 255 255 which is basically just a white background and then the last value that you can pass in here is the opacity so if you set that to 0.65 that's kind of like halfway see-through if I had set this to a value of 1 and it would be completely white and you would not be able to see through it if it was a set to zero it would be completely translucent so somewhere in the middle of 0 & 1 is a pretty good value for the translucency and then let's position it bottom zero and what this means is stick this hero marketing bar zero pixels away from the bottom of its relative positioned parent container so it's going to stick it right to the bottom which would be right where we want it right down here right and then we'll say left zero which means zero pixels from the left-hand side of that relative positioned parent container so that's going to be zero from the left and zero from the bottom and then to make sure that it's stretches all the way across set the width to hundred percent and then it'll give it some padding 30 pixels on top and bottom and zero on the left and right next let's target the H ones or the yeah the h1 and h3 whoops h1 I cannot type h3 so now we're targeting the text inside and we'll say color which was that I think was that blue color so 0c 360 and let's refresh and see what we got here there there we go it's starting to come together just one more thing I want to go and copy just the h3 here paste it down here and we're gonna add some spacing below it so margin bottom 10 pixels that's gonna give a little bit of spacing in in between these two because if we compare it to our finished product there's a little bit more spacing there so refresh there it is that should do it for the hero section styles so next we have the marketing boxes so I'll say start and in marketing boxes styles as comments to keep our CSS organized and then let's go ahead and look at our finished product so we have three boxes they have that same dark blue background with some off-white header text and some white paragraph text so let's get started so first we will target the section container which was a class of marketing boxes and give it a margin bottom of 90 pixels and that's going to be the spacing down below it and then let's target the Flex container inside of our marketing boxes section container and justified content space between this is going to space them out as you see here the left one will be on the left the middle one will be kind of evenly spaced in between and the third item in that Flex container the third box here will beyond far right so that's space between and if we look at what we have for our boxes right now not very good so let's keep going here so now let's target each box will say background color which will be that same dark blue 60 give it some padding of 40 pixels to add some spacing set the the color of the text to white and Center all of the contents of the box because if we look at our finished product everything is centered okay and let's target the h2 inside of the box say margin bottom of 25 pixels and set the color to a little bit of an off-white you can see that it's not quite white it's like a very light bluish gray that's got the hex color for that right there and then let's target the paragraphs inside of each box those we're going to say lion height of 1.5 M's and that's going to give a little bit of spacing in between each line of text so if we look at our finished product again there's a little bit more spacing in between each line alright so line height of 1.5 m as will give us that then we'll set some spacing underneath the paragraph tags which would be margin bottom of about 40 pixels and then let's put the font size to 0.85 M's okay next we have the button the more info button so let's give it a background color and let's see what was the background color it was this kind of light blue with white text so the hex for that light blue 6 PA for CA let's get rid of the default border which is given to all buttons by the browser so we'll just say border none to get rid of that give it some padding 8 pixels on the top on the bottom and 30 pixels on the right and the left set the text color to white and increase the font size a little bit point to five M's and save it and I think that might do it for let's see refresh there's our boxes okay so we need some spacing okay what did we forget here so we got some spacing here we don't have any spacing here so I guess what we can do is apply some margin some left and right margins to be second box projects let's go and do that so I'm gonna go back to the HTML here and I'm gonna add another class to the second box so let's just call it box two and then in our style sheet let's put it up here after the first call to box let's just target box two only and we'll say margin:0 on the top and bottom and 30 pixels on the right in the left that should probably do it there we go now we have some spacing in between our boxes so that's it for the marketing boxes section let's move on to the about us so start about styles and styles so the first thing let's go ahead and target the about Us section container let's give it the background color let's see what was the background color it was this kind of light grey blue background color so let's do that I have the hex code for that DB that should be it and then we'll set the color color of the text it looks like is the headers dark blue and installed that same dark blue so color 0 C 3 C 60 everything is aligned in the center and there's a lot of spacing in the form of padding so we gotta watch the spacing up here on the left on the right so it's good padding of 75 pixels on the top 10 pixels on the right and the left and 60 pixels on the bottom so this is shorthand if you only apply three values it'll say this is the top value this the right and the left and this is the bottom value so next let's target to the h1 I'll give it a margin bottom of whoops margin bottom of 50 pixels and that's the spacing right here and then let's target the paragraph paragraph tag and we'll say max width of 640 pixels so that it doesn't expand too far out I'll constrain that width and then give it a font size of 0.85 MS and then margin:0 auto 80 pixels which is 0 on the top auto on the right and the left so that it's horizontally centered and then 80 pixels of margin on the bottom which will be this spacing in between the paragraph and the button and then lastly let's increase the line height 1.5 m/s similarly that what we did to the the other paragraph before next is the button so let's target that and we'll say background color and same thing zero C 3 C 60 and then the color is white oops get rid of the border I cannot type apologize border:none font size will increase to 1m and we'll give it some padding 8 pixels on the top on the bottom and 30 pixels on the right and the left and I think that's about it for the about Us section if we go back to our prototype here this is what it looks like without the CSS if we do a refresh and boom there we go it's looking exactly like our finished product let's move on to the contact us section so start contact us styles and contact us styles and then the first thing we'll do is we'll target the contact us section container contact us we'll give it a background color if we look at our finished product again it has this dark blue background color so zero c30 c60 it's got a bunch of spacing in the form of padding so 75 ticks a little top zero on the right in the left and 60 pixels of padding on the bottom next let's target the h1 tag which is white so I'll give it a color of white or a color of FFF which is white margin bottom of 50 pixels to give it some spacing underneath it as we see here in our finished product and then next let's target the Flex container inside of our contact block or contact us section if I go back to the HTML code let's scroll down to the contact us section here we have a Flex container wrapping the map and the contact form so we'll target that flex and we're going to say justify content space between to push one to push the first item to the left and the second item to the right and let's constrain the width of this whole flex to 900 pixels and that way on larger screens the spacing in between these two items won't get too large it'll stay they'll stay pretty close to one another which is kind of what we want so max width 900 pixels so next let's work on the map we'll give it a width of 450 pixels and a height of 400 pixels padding-left of 10 pixels okay and then the contact form div give that a width of 400 pixels and padding:0 padding on the top 10 pixels on the right zero on the bottom and 40 pixels on the left so top right bottom left okay so the next thing is our address inside of the contact form div so contact form address it's white text let's set the font size do a little bit larger than 1m so one point zero five M's it's aligned Center so text align Center and then if I go back to the prototype here and we scroll down notice how by default all of the text inside of an address tag is italic and we want it to be not italic so one thing we can do font-style:normal and that will remove the italic and then let's give it a font weight of 300 since it's not bold or it shouldn't be bold that's a pretty light font weight and then margin bottom of 40 pixels which will be the spacing underneath the address that should do it for the address so next let's target the input boxes and the text area inside of our form tag so if I go back to the HTML to scroll to the right a bit here so we had a form tag three text boxes and a text area and a button so we're going to work on that next so right now we are targeting the three input boxes and the text area so first things first if we go back to the prototype notice how the input boxes are sitting horizontally on one line right so we can get rid of that by giving all of these display:block and that will make them take up a hundred percent width and automatically stack one on top of the other and let's say margin 0 on the top 0 on the right 20 fixes on the bottom and zero on the left and then padding 8 pixels on the top and 12 pixels on the left and right and 8 pixels on the bottom will set the color which was a little bit off white and I have the hex code for that DB 5 I think that was it increase the font size 16 pixels set the width to 100% take away the borders which are given by default by the browser and we're gonna set the box sizing to border box if you don't know what border box means vs. content box I will have a quick CSS tutorial kind of explaining that so feel free to watch that video tutorial to kind of see why we're using border box here for these input boxes okay so next let's just target the text area itself and we're gonna say so if we look at this by default we have this little draggable resize functionality this is something that is given to it again by default by the browser but we don't want to allow our users to do this if we look at our finished prototype we cannot resize this box so the way to get rid of that as you say resize and none easy as that and then let's set a height of 110 pixels for that text area and that should do it for that next we have the button the submit button so let's set a background color on it because if we look at our finished product it's it's kind of a light blue background color so let's see that is 6a CA let's get rid of the default border set the color of the text to white 8 pixels of padding on the top and bottom 40 pixels on the left on the right and we're gonna float it to the right so it's right justified so we're gonna say float right to get that thing to the right hand side font size 1 m to increase it a bit and the next let's target the placeholder text inside of the info boxes so we can do that with a pseudo class of placeholder and the color would be 5 9 7 DB 5 and I think that should do it for the contact us section if i refresh our prototype here there we go it's starting to come together we got the map on the left the contact form is styled and looking pretty good submit buttons on the right the address looks good okay so let's move on to the footer so let's come down here start footer styles and put our Styles keep everything organized so first thing let's target the footer tag itself let's give it that background color 0 C 3 C 60 give it some padding 75 takes a little top 10 pixels on the right and the left and 60 pixels on the bottom and set the color of the text to white next let's target that Flex container inside of the footer we'll say max width of 900 pixels same as the Flex container right above it this way that they will line up horizontally and it will look cleaner so max with them 900 and again justify content space between next let's target the unordered list which is our social media links we'll say a list-style-type:none and again that's going to get rid of these black bullets here which are added by the browser by default list style type none let's get rid of that also the default padding and margin this could have probably been a global style rule for all of the unordered lists on the page so that might have been a quick CSS optimization that we could do but I'm gonna just keep going with what I got next let's target the list items inside of the unordered list so we're gonna say again display:inline-block so there instead of stacking on top of one another they will sit horizontally on one line with one another and then margin left 20 pixels to give it some spacing and I think the footer is pretty simplistic that should probably have done it so refresh and yeah there's the footer so comparing it to our prototype here we're looking pretty good now so the next thing we need to make this responsive so if I take our prototype and I collapse it down to like the size of an iPhone things are pretty bad all right it's it's basically unusable the text is still pretty large you can only see one and a half of the marketing boxes I mean it just it looks pretty bad where'd our contact form go right so let's fix all this so that instead it looks like this we've got the hamburger menu we can read all three boxes they kind of stack on top of one another we got the map and the contact form this is actually pretty small this is probably more realistic of a mobile device all right so come back over here I'm gonna leave this kind of at this screen width so we can kind of work to build these media queries so let's say start media queries so the first one so the way to write a media query is you use at media and then you're going to give it some kind of constraining width or height or something so I'll to say max width 767 pixels and 767 pixel is a pretty common break point and what this means is only apply the style rules inside of this block only apply them at screen widths at that hour 767 pixels or smaller so that's what this means so the first thing we're going to want to do is we're going to want to reduce the font sizes of all of our headers right so let's bring the th ones down to three M's instead of four M's let's bring the h2s down to 1.8 m/s instead of 2 m/s and let's bring the h threes down to 1m instead of I believe it was 1.2 and then we're gonna change our flex containers back into regular block-level divs block level elements because we we want their items to stack one on top of the other so on smaller screens we're no longer going to be using flexbox next let's work on each of these marketing boxes and we'll say on smaller screens make the width 100% and we'll give it some margin on the top and bottom and 0 on the right and left and we're going to use again box sizing border box again please watch my other tutorial to understand what that means then we'll work on the map let's give the map a width of 90 percent and a height of 300 pixels and what else margin:0 on the top auto on the left on the right and 60 pixels on the bottom and we'll say text-align:center and then let's work on the image inside of the map container which is the image of the actual map itself since we're not using a real google map it's just a static image it's at the height to 100% and this way the sizing of the image will not be larger than its parent container which is this map div so the height will be 100% of its containers height and then let's see what else do we want on 767 pixels breakpoint we want to look at the contact form which we couldn't even see or which we can't even see right now if I scroll down to it it's probably hidden over here to the right somewhere up there it is so a contact form we're gonna say with 80% zero margin on top and bottom and auto on the right and left so that it's horizontally centered and let's get rid of all padding and next we have the footer tag let's just say text-align:center because if we look at our finished product the footer has everything aligned Center and what else so the unordered list which has our social media links let's give it a margin top of 30 pixels and that's gonna be that this spacing in between the copyright text and our social media links and I think that should do it for the 767 pixel breakpoints so let's move on and let's do let's do a min width of 651 pixels so the magical breakpoint if you will where the hamburger menu appears and dissapears is going to be 650 pixels so if the screen is 651 pixels or larger then we're gonna show the user these links just plain on the page if the screen width is 650 pixels or less we're gonna collapse them into this hamburger menu so let's create a media query for the screens that are larger than 650 in other words we'll display these links as we see them here so nav ul and that is this unordered list so if I inspect this it's this unordered list here inside of our nav container we're gonna make sure on screens that are larger than 650 pixels that this thing is visible no matter what so we'll say display:block important so it's an important rule no matter what if the screen width is larger than 650 pixels we want this unordered list to be visible on the page all right now let's do the opposite let's create the other end which is 650 pixels or less so all screens that are 650 pixels or smaller and we have quite a bit to put in here so let's just start with the header text so let's bring in the h1s down to two M's eh twos down to 1.6 m/s and the H threes down to 0.8 m/s so we can bring those down a bit so that they look a little bit better on small screens next let's target the unordered list inside of the nav container so we're targeting the container that holds these links and we're gonna do some work so on these small screens by default this whole thing is going to be hidden so display:none we're also going to give it a absolute position and this is going to tie back into when we set relative positioning on the nav container so if I scroll back up to our header Styles good thing we have our comments right so here's our header Styles if we look at our header container its position relative position these links to sit with respect to the nav which is positioned relative so I'm going to be releasing a CSS tutorial kind of explaining this so or you can kind of read about it it's a little bit confusing at first but once you grasp how it works it's it kind of makes a lot of sense so position:absolute and then we'll say write 0 which is spacing it out zero pixels from the right side of its parent container and then we'll set the background color to that same dark blue so that it will blend in with its parent container when it kind of slides down and slides back up and then we're gonna say put position it a hundred percent from the the top of its parent container and what this is gonna do is basically if I bring this back down it's going to 100% from its parent container from the top of its parent container means it's gonna sit flush with the bottom edge of it so it sits perfectly below the parent container just like that so top 100 and then we'll set the z-index to three to make sure that this sits on top of everything else when it's visible and then we'll give it a width of 100% and then next let's target the list items themselves display:block text-align:center margin:0 on the right on the left give them some padding 50 pixels on the top zero on the right on the left and 5 pics a little bottom and then we'll set a top border of 1 pixels solid in white and that's to give it some dividers here from each item and then let's see next let's target the links themselves and we're gonna increase the font size a bit to make them easily clickable on touchscreen devices at 1.5 m/s for the actual font size and then the next thing is we want the hamburger menu to be visible on small screens right so display block for the hamburger menu and then hero marketing bar we're gonna say 15 pixels of padding on the top of the bottom zero on the right and the left so that's just to bring the spacing of this hero marketing bar down a bit so that it's not as as high in so its height is not as much right so on smaller screens we're gonna bring it down a bit so 15 pixels of padding on the top and the bottom and that should do it for the 650 pixel breakpoint so next we're gonna do the break point of 400 pixels this is gonna be even smaller screens so screens that are 400 pixels wide and less we're going to once again start bringing down the font size of our headers one point two M's for the h2 and 0.75 m/s for the h3 and then we'll change the hero marketing bar to B position static and this is basically removing the absolute positioning so static is the default positioning given to all elements unless told otherwise right so on larger screens it's positioned absolute so that it's floating on top of this image right but on very small screen so if I bring the finished product here down it kind of hops down so this is greater than 400 pixels once we go less than 400 it hops down below the image so that it's no longer covering it we can see more of the image so position static should accomplish that and then I believe that does it for the media queries so let's go ahead and go back to our prototype here so here's how it looks before adding all this responsive media query CSS right looks terrible if i refresh look at that so now we're looking pretty good here the content is readable the map is on top of the address which is on top of the contact form the footer is aligned in the center with the social media links looking good below it and we have our hamburger menu but if I click it nothing's happening right so I'm clicking it and we're not getting our drop down with our nav links if we go back to a larger screen though we're getting our nav links here so all we need to do is add some JavaScript to make this click work all right so let's do that next and since it's such a small amount of JavaScript I'm just gonna go ahead and put it in the HTML page itself normally you'd create a external javascript file and then kind of link it to the page similar how we did the CSS file here right and we have a link out to our external stylesheet normally if you had a lot of JavaScript code you'd want to do something like that create a J's file but since we just have a little bit just one click event go ahead and create a script tag down here at the bottom of my page and we're going to just say document dot get element by ID we're going to get the nav toggle which I believe was the ID of this hamburger button let's just inspect it to make sure yep id NAB toggle so we're gonna get that element by ID let me just drag this over a bit so we can see the code more and then we're gonna say add event listener it's gonna be a click event and then we're gonna run an anonymous function on that click so let's drag this all the way over so we can see what we're doing here so we grabbed the hamburger menu by its ID and we attached a click event which when clicked will run all the code in this anonymous JavaScript function so next let's create a variable here of nav menu and let's say a document dot get element by ID nav menu container and the nav menu container if we go back to our finished product here now let's just see yep it's right here the nav menu container is just the unordered list that contains all those links so it's hidden right now because we're on a small screen so that's what we're grabbing here and we're storing the reference to that inside of the nav menu variable now we're just gonna simply set the display of that and we'll use a little bit of logic here so if the offset parent is equal to null that means it is currently hidden and we need to display it right so we'll set the display to block if the offset parent is not null so now we're in the else block will say display none which is going to hide it so each time you click this it's going to either show it if it's not already shown or hide it if it is currently visible let's go ahead and save our JavaScript here go back to our so this is our prototype which is not currently working if i refresh let me just drag this out a bit here now if I click it there's our menu click it again and it's gone and that's pretty much it for this tutorial so we've got a fully responsive homepage here there's a lot of tutorials for how to embed a real interactive google map they're pretty easy to follow you just need to sign up for a believe it's a google developer account and then they'll give you a an API key you can basically just copy and paste some code to render an actual map and yeah that's basically it I will have a link to a code pen with all of the HTML CSS and JavaScript so that you guys could see it with a working prototype and I hope you enjoyed this tutorial if you did please leave a like and I will be releasing tutorials like this pretty regularly so stop back for more and thanks for watching

Channel: OnClick Media

Views: 7,035

Rating: 4.9337015 out of 5

Keywords: HTML5, CSS3, JavaScript, How to code, HTML5 Tutorial, CSS3 Tutorial, HTML and CSS Tutorial, Build a webpage, Build a web page, Front End Development, Front End Web Development, Web Development, JavaScript Tutorial, Responsive Design, Responsive Web Design, Media Queries, CSS Media Queries

Id: Q4eIw35LtAA

Length: 65min 18sec (3918 seconds)

Published: Thu Mar 07 2019