HTML & CSS: Building Responsive Websites For Beginners

2. Web Fundamentals: - Hi. - Welcome to the first set of slides, - HTML and Web fundamentals. - Sit back, - relax and we're going to discuss how the Web works, - the development process, - workflow habits. - And then, - later on, - we'll do an exercise to get to know some different HTML elements. - First, - let's talk about how the Web works, - and hopefully this will give you an idea of how what we're learning fits into the larger - picture of the Internet. - We're gonna talk about requests in response, - rendering in the browser, - local verse remote and some differences between front end and back and development. - First, - let's talk about request and response. - So imagine that you are sitting at home and you get in front of your computer and you say - I'd like to go to this website so you type in the domain name into your browser how stuff - works dot com and then you hit return and your computer connects to the Internet, - and it talks to this guy over here, - which is a DNS server, - D n A. - Stands for domain name server Dina service. - We're kind of like operators of the Internet. - They don't actually hold any website files, - but they will tell you how to get to the specific computer wherever it may be in the world - . - So that way you can connect to it and then get the website files you're looking for. - So DNS servers. - They talk to other DNS servers all day long, - and they're keeping track of associating a domain name with something called an I P. - Address. - Um, - and I I p address is very similar to the address that you have on your house. - It's basically a way of identifying the location of a computer wherever it may be anywhere - in the world. - Eso any computer that's connected to the Internet has an I. - P address. - Even the computer that you're on right now has its own I p address. - So when you type in how stuff works dot com, - you ask the DNS server. - If it knows the address of that hosting server and this domain ing actually doesn't, - it says, - Well, - it's not in my database, - so I'll ask another DNS server. - And this one does know it says, - Actually, - yes, - that's in my cash that maps to the I P address. - 70.42 point 251.42 So this first DNF server says thanks all cash that information as well. - In case someone asked me again in the future, - Then I'll know what to tell them, - and it sends you that information. - So now your computer knows the specific address of the server that you're trying to connect - to, - and that's his green arrow. - Here is showing that connection between your local computer and this remote hosting server - and hosting servers, - which are represented back here by these blue towers. - These are the computers that are holding the actual web files, - the content that is then being, - you know, - downloaded to your computer and rendered in your browser. - So whenever you have the i P address, - you're making a requested into that specific hosting server and it sends back a response. - And this starts a conversation back and forth between your computer and the remote server. - So you ask, - you make an http request and you ask for something like the home page, - and the server sends back a response in the form of content. - And this is text code, - that is either html CSS or JavaScript. - So in this class, - that's what we're gonna learn. - We're gonna learn to write the HTML and CSS code or the content that's passed back and - forth between the remote server, - the Web server and the viewers browser. - Let's talk a little bit about local verse remote now, - so the term local refers to the computer that's in front of you right now. - Local computer is something that you can touch that's right before your eyes, - and that's supposed to remote. - Where remote refers to a Web server that's a remote location somewhere else in the world. - So whenever we're, - you know, - producing whenever we're in our our production phase, - we're always working on our local computer, - and we're previewing it in our browser on our computer. - So we're working locally. - We're previewing it locally in the browser, - checking our work. - This way we can make sure everything is exactly the way we want it before we publish it and - put it up on to a remote server. - So you're building your website on your computer, - your writing HTML and CSS code. - You're previewing that code in your browser and you're making sure everything looks the way - you want. - Maybe you're correcting typos, - changing colors, - things like that. - Then you decide OK, - I'm ready to put this up on the the remote server. - So then we're gonna use a process called FTP, - which is file transfer protocol to put those files or upload them onto the Web server. - And now, - because this Web server has a specific domain name, - an I P address associated with it, - people from all over the world now can view and access those files. - And then, - at any point, - if you'd like to change or modify those files, - you can always get them down off of that Web server. - So you have the newest copy on your local machine as well. - And you can do that by downloading or getting the files, - bringing them back to your local computer. - Let's talk a bit about the differences between front and Web development versus back end - Web development. - So in this class we're going to be doing front end Web development only. - We're going to be learning to write these 1st 2 which is HTML and CSS. - Now. - The main difference is that thes front and program programming languages are actually - guests. - We should say markup languages HTML and CSS are all being rendered client side, - which means that they're being rendered in your browser. - Your browser is interpreting that code and then rendering it, - which allows the website to appear now. - That's in contrast to back and Web development, - where all of the programming languages on the back end are being interpreted by the server - on the server side. - So, - for example, - ruby, - PHP, - python, - Java and node, - which is a version of JavaScript on the server. - All of these programming languages are working to update objects. - Um, - you know, - interact with the database and eventually render the HTML and CSS files that air then - passed to the front end that air past your browser. - So that's the main difference between front and development and back end development. - So as you start out to make your own projects, - a good start to creating any website is a brainstorming process. - So along the way, - feel free to grab a piece of paper, - a pen or a pencil, - and just start sketching out the ideas of what you want to build before you actually start - to code. - A lot of people like to make a flow chart or flow diagram where you basically map out what - pages will exist and how those pages will link to other content. - This is a good example of a hand drawn mock up, - so you can also take and draw out the individual pages and sort of make decisions about - where content will go. - And this is going to save you a lot of time. - Because instead of having to move code around or add or remove code, - you can make up your mind about the overall layout and what content you'd like to exist on - a piece of paper on. - And it's a lot faster to erase something or redraw it than to make a lot of changes in your - code. - So I think it's a good idea before you start any project to kind of make a mock up of what - you think that the site pages will hold and sort of where you imagine that you'll be - positioning this content. - There's also digital mock ups you could make online. - One site I like is called Mockingbird, - and these sites will allow you to make mock ups that air perhaps more suitable if you need - to present this information to a client before you start coating, - there's even templates in mock up sites specifically for tablets and mobile devices as well - . - One of the first things you want to make sure when you get started on any new project is to - create a folder that's dedicated to just that website or that Web project, - and we're always going to keep all of our files and sub folders that are related to that - site in that folder. - So we always call that a parent folder or a root folder. - This one here is named site. - Normally you'll name this. - Whatever the name of your project is. - For example, - if I was building a website for a waffle factory, - I might call this folder something like Waffle factory dot com or something like that. - Now, - inside of this main parent folder or root folder, - this is where all your sub folders will be. - All of your images for your website will be nicely organized into a folder. - Any special fonts you might be using could be organized. - There is well, - all of our CSS, - which is going to be the style of our website, - is gonna be located in a folder, - and all of our Web pages are HTML. - Pages will also be inside that main parent folder there. - And this will keep everything nice and organized on, - and we're going to try and avoid ever having ah, - file for our website existing outside of that main folder. - So in the next exercise, - we're gonna jump in and talk about HTML syntax. - We're going to look at document structure of building a basic page. - We're gonna learn to create text elements, - and we're gonna learn to create images and then links between our pages. - So go ahead and move on to the first exercise. - Feel free to browse the rest of these slides using the pdf link below, - and it will have content that will review all of the things we go over in the exercise. - Thanks. 3. Getting Started: - Hi. - Welcome to the first exercise 1.1. - With any exercise, - you're always gonna want to start by downloading the zip file I provide for you. - And that's going to be the source files that we're gonna be working with for each exercise - . - So just for this first time, - I'll show you how that works. - So I've I went ahead and downloaded that zip file, - which is called 1.1 dash html dash fundamentals dot zip and I had to un compress this. - So is it file is a single file that's compressed, - kind of like smashing a bunch of files and folders in tow. - One file, - and then we had to un compress it here. - I just double clicked on it on Mac toe un compress this and it spits out a folder like this - You may need to, - depending on your computer, - your operating system meaning toe like right, - click on it and say something like un compress or on archive or extract might be another - way that might be written, - but at any rate, - you have tow, - unzip or un compress that file, - and that should turn into a folder like this. - Um, - and this is all of the files. - The source files that will need to start this exercise. - Basically, - this is just containing some images here, - which are some images of some shoes. - Why? - Because the first, - um, - project we're going to build is going to be a she website. - Okay, - so I went ahead and move this into a folder on my computer. - You might want to decide where your files for your for this class will live. - You can even put them on the desktop if you don't have a suitable place. - What I did was I like to put all of my website files in a folder here. - I have my sites folder here, - and I went ahead and created a folder name specifically for this class HTML and CSS from - scratch. - And you can see inside of there. - Is that that un compressed zip file there by 1.1 dash html dash Fundamentals folder. - And inside of there, - we just have some images, - as I said. - Okay, - so that's a good start is to move these files to a location where you'd like them to live - on your computer 4. Document Structure: - And the next thing we're gonna do is we're gonna bring up our code editor, - So I'm gonna go over and I'm gonna launch sublime text. - And when sublime text starts, - we just haven't untitled file here. - And what we want to do first is we're gonna want to open up something called The Sidebar, - which will on the S enable us to see our project files and folders. - So I'm gonna go up to the View drop down menu, - and I'm gonna go to side bar and show sidebar again. - That's under view. - Sidebar, - show sidebar. - I go and click that and that will bring my sidebar up here. - And the nice thing about this is that I can drag this folder that I had you guys download - 1.1 html fundamentals. - You can drag that and drop that into your sidebar, - and you can see there that here is my images and that that particular folder. - Okay, - so to start off with, - we just want to create our home page. - So I'm gonna go up to the file drop down menu and say new file, - and that's gonna create an untitled file like that, - and we're gonna just save this file right off the bat, - I'm gonna say file safe and we're going to name this file. - Something very specific. - Now, - all the other files on your website, - you can really name them whatever you like. - Um, - this particular file, - which is the home page, - we have to name this index, - which is all lower case I n d x, - and we have to give it a file extension of either dot HTM or dot html. - Either extension is fine. - So the reason why we have to name this index is that whenever ah person who's trying to - view your website is making a request to that remote server, - the remote server by default is going to pass back the file named Index to them. - And that's why they'll see that first. - Hence why this becomes the home page or the splash page. - Some call it so we want to make sure that we save this in the correct location. - Remember, - we always, - always, - always want to save all of our site content into that single root folder. - So in this case, - I've created a folder here, - mines under sites, - and then I have one for the name of the class HTML and CSS from scratch. - And there's my 1.1 folder and I can see my Images folder sitting in there. - Some of the name this index and save this right into that exercise folder like so out. - We can see that the index pages sitting inside of that folder Okay, - so index dot html, - we're ready to go. - So let's start writing out some HTML code. - Let's just dive right into this thing. - If you'd ever like to make your text larger, - you can use, - um, - control plus and minus on windows or on Mac. - It's the command key, - and the plus or minus key will make them larger. - So if you're typing text, - you can change the size of it like that. - I'm gonna make this tax nice and large for you guys, - and this will help with ice strain. - Also, - if you're coding really late at night or for long periods of time, - um, - and you can save your back posture in your eyes by making the code a lot larger. - Okay, - so first thing we're gonna do is we're going to learn about html syntax, - So html stands for hypertext markup language and mark up language is what they do is they - provide a series of elements that surround content and then define that content for the - browser. - So we have to tell the browser, - Hey, - this text is a heading. - Hey, - this text is a paragraph. - This is an image and this is a link. - So to get started, - let's learn a very important element called the HTML element. - Now all elements are made up of starting tags and ending tags. - Some elements actually only have a starting tag, - but most of them oftentimes have a starting and ending tag. - We'll talk a little bit more about that later on. - So all of these tags are made up of angle brackets, - which is a less than symbol. - And then the name of the tag and then a greater than symbol like that name is the opening - tag. - Except they have afford slash in front of it, - like so. - So what we're looking at here is something called the HTML element and the HTML element. - What it does is it tells the browser that all of the code came between these tags. - Here in the middle is HTML code, - so you can see here. - This is the HTML element, - and it describes the content in between these tags as being HTML code. - This is called the starting HTML tag, - and this is called the ending HTML tag. - So again, - the starting tag is the same as the ending tag. - It just has a Ford Slash in front of it like that. - And that's very common. - Okay, - so that's a pretty good start. - Basically, - Now we know that we've told the browser were starting to write some html here, - and we're ending our HTML here, - so everything that goes in between will be the rest of our document. - Now, - I'm gonna add one more tag right at the top of this. - Um and this tag is also an important tag. - This is a very unique tag, - and it's called DOC Type. - And to write the doc type tag, - we do less than symbol exclamation mark. - And we write the word doc type like that. - Now, - what Doc type does is Thisted AG is going to tell the browser which version of HTML were - running. - So the way we tell this, - the browser that we're creating not just a HTML document, - but in html five document is we put a space after the word doc type and we write HTML like - that. - And this says to the browser, - this is an HTML five document. - Now, - if you look back at previous versions of HTML or X html, - you're gonna notice that these doc type tags can actually be quite long and lengthy. - They can actually go on and on. - Um, - sometimes, - for example, - in html four or three. - These were, - um, - almost a sentence long to describe to the browser that the particular document was, - You know, - that mark up version for HTML 51 of the inclusions of it, - which is a nice new features that it's very simple. - We can just right, - doc type html, - and it sees it as an HTML five document. - Okay, - great. - So now we've told the browser, - um, - this is an HTML five document, - and here is the start of my HTML code. - And here's the end of my HTML could next. - Let's talk about the two main parts of any HTML page. - So every html pages broken into two main sections and one is called the head like this - slash head will close it and then another one is called. - Another part is called the Body. - So we have the head and the body, - just like you and I have a head in a body. - So inside of the head section, - what specifically goes here is content that's meant for browsers, - search engines and devices. - So this is like machine code that goes here. - This is information, - metadata and content links that are related to, - um, - how this page should display what sort of search terms should be associated with this site - , - which we'll talk a little bit more about later on. - But mainly everything in this section is going to be things that we don't actually - physically see in the page. - They're just things that are meant for other machines and devices. - Now, - that's in contrast to the body now in the body section. - We actually have all the physical viewable content of the page to go ahead and leave a note - to herself about this to teach ourselves about this. - Let's actually learn another element called the comment. - So this tag uses thelancet than symbol exclamation mark and then dash dash. - Okay, - it starts off looking similar to the dock type, - but actually has two hyphens that follow it. - Um, - and you can see here that all of the code now below this this opening comment tag here has - been great out. - So here we can write. - This is a comment, - um, - on Lee, - I Well, - I'll just say I can see it, - uh, - in the code, - but this will not appear in the browser. - So a comment is a great way to leave messages to ourself. - Sometimes people even use comments to disable sections of code on the page and these air - Really? - Ah, - good habit to label things and sort of, - um, - leave messages and comments About what? - Certain parts of the coder doing. - So now that we've learned to create this comment, - which again? - This starts with less than exclamation dash dash is how you start the comment the way we - end the comment as we use dash dash greater than you actually notice if I forget to include - the ending tagged there that it actually comments out all the rest of the page. - So I have to say I'm done. - Say, - hey, - browser. - I'm done making a comment by saying dash dash greater than this is a unique tag that - doesn't have the slash in the closing. - It just ends like that. - But this guy is really the only one like that. - Okay, - so now that we've learned to create a comment, - let's write a little comment to herself about what happens in the head section. - So let's go ahead and write the head. - The head section, - uh, - contains info for, - like, - search engines and the browser and is not seen by our viewer, - and we'll end that comment there. - Now. - These comments can be single line or multi line. - They can be on a single line like this, - or you can hit return, - and you can actually make these comments span to multiple lines like so Okay, - let's also write a comment for the body section. - So unlike the head section, - which we don't actually see ah, - the body is the entire viewable area of the web page. - Um, - you know, - for example, - in this section, - um, - we can actually see things like texts, - uh, - links images and all types of media. - So in that comment there, - so these air the the main sections of in HTML pages the head and the body. - Let's just learn, - um, - let's start by learning one tag that we can place inside of the head section and this guy's - called title so we can give our page a title here. - This particular website is for a shoe company. - So for the title, - I'm going to put the name of the company here. - I'll say Z H W shoes just kind of a generic name. - I made up, - and we'll put some information that will be kind of helpful for search engines. - Will say, - this is Ah, - bargain. - Um, - footwear wholesales like that. - And this page is the about page. - My home page is going to start off with information about the company. - So I'll just go ahead and say about us. - I think that and we will close this out slash title. - Okay, - so this is going to do a few things. - Um, - number one search engines can see this, - and they're going to say, - Hey, - this is a site that has content about shoes, - um, - and for wholesaling footwear on. - And this is also a page of about them or about the company. - The other thing that title does is that it's also visible on the browser tab. - Let's actually take a look at this. - I'm gonna go ahead and save this page. - So we're gonna say file save or you'll probably get in the habit of doing. - Um, - command s on Mac. - Or you could do Control s on windows to save. - All right. - And let's go ahead and bring this up in the browser. - And we can just drag this guy into chrome here. - We'll go ahead and find that file. - It's called Index, - and I'll just throw that in there. - Okay, - So first of all, - this page is white. - It's totally blank. - I haven't put anything in the body sex and yet, - but one thing we can see from the head is up here at the very top of the browser tab, - you'll be able to see the name of the website, - and it runs out of space. - There starts office, - huge W shoes. - Bargain footwear, - huh? - Cool. - So that's a good start. - So that's one thing that we can see in the head section. - Is this tab here? - Aside from that, - you're not going to see physically see anything else from inside the head section. - In fact, - this little white rectangle here that is my browser window that's the body. - That's where we're going to see things that are located in the body. - So let's jump back over to the code then and let's write some more and you will zoom out a - tiny bit like that. - Okay, - so this is a really basic HTML page is we have the doc type of the top. - Then we have the HTML tag and then nested inside the HTML tag. - We have the two main sections of any Web page. - We have the head in the body, - so we already saw that we can place the title in the head. - Let's go ahead and write something in the body section and see if that shows up. - Let's go ahead and write Hello world here inside the body. - So I'm gonna go ahead and save that And I did a command after you can go file save and I'm - gonna come back to the browser and important thing is I need to refresh always need to - refresh because I'm saving the code and then in order for the browser to see it, - we have to reload it. - So I'm gonna go to this little refresh arrow here to reload the page on Mac, - You can also hit command are to reload the page and more than likely on windows in your - browser is gonna be control. - Are control and the R Key. - So hit command are. - And there we can see the word Hello. - World appeared there in the corner of the browser window like that that a little larger - there. - There we go. - So it's nice and easy to see. - Okay, - Excellent. - So this demonstrates that the body is where we can physically see content in the page. - So we learned about Doc type HTML tag the head in the body on. - We also learned to write comments in the code, - which only we can see. - You'll notice it. - This comment here that says the body is the entire viewable area. - The Web page. - We didn't see that when we went to the browser. - We only saw the text we wrote outside of the comment, - which is hello world and sublime Text agrees this out for us so that we can see clearly - that that that this code here is a comment 5. Text Formatting: - Let's do another experiment. - Let's go inside of the body section and I'm gonna hit return a few times and I'm gonna say - hello, - Moon Next. - And then we'll go ahead and save and will come back to the browser and see what that did. - Okay, - that's interesting. - Um, - let's look here at the word. - Hello, - Moon. - Hello, - world. - How come when I wrote it in the code here I hit return and I put this one on top of this - one. - So world hello World should be above hello Moon. - But then, - strangely, - in the browser there appearing side by side. - Well, - the reason why is that the browser ignores Whitespace. - It's on Lee really concerned with the relationship of these tags, - right? - These each Timo elements made up of this starting tag and ending tag. - They are surrounding content and they're describing to the browser what that content is. - So this title tag us describing to the browser that this is the title of the page. - It surrounds this content and tells the browser how it should interpret it. - So if we want to make this hello world and hello moon appear side by side, - we would have to use a specific tag, - and in this case we actually want to make them appear one on top of the other. - So we'll have to use a specific tag for that as well. - So if I want to say that this is one paragraph and then below it, - there is a separate paragraph. - I have to surround this content with the appropriate element. - Okay, - so let's go to use the p tag like this. - So the paragraph element is made up of this opening p tag and ending p tag like this, - and it surrounds this content Hello world and tells it to be a paragraph. - So we'll go ahead and add an opening and closing p tag to There is well, - and then we'll save that and we'll come back to the browser and refresh. - Awesome. - So now hello, - World is on top of Hello, - Moon. - It sees this as one paragraph in. - This is a separate paragraph. - So html involves, - um well, - a decent amount of memorization. - We're gonna have to learn at least these common tags. - I'll teach you that you'll get quite a lot of use out of high frequency HTML tags to - surround content. - Okay, - so that's a good start. - We've learned to create paragraphs. - Um, - perhaps we'd like to create headings on different size texts around the page. - So let's go ahead and start off by creating heading here at the top of our page on. - And this is going to be the largest size heading, - which is an H one. - And we're gonna go ahead and give this the title of our company, - which is easy. - H W is the name of our shoe company, - and we'll also create kind of a subheading, - um below that a little bit smaller text and we'll say shoes. - So the company is CHW shoes like that. - So let's go ahead and save, - and we'll come back and refresh and check. - Check that out. - So there you can see the heading for the page, - the H w ah, - the subheading shoes. - And then we have two paragraphs here. - So headings air really important. - Not only do they actually physically change the size of the text, - but also search engines semantically see these as being having mawr importance because this - is a heading for the content below, - then the search engine gives extra importance to the level one heading. - And then h two, - which is a Level two heading, - which is slightly smaller, - has slightly less importance to a search engine. - Now there's actually six levels of headings. - There's H one through H six. - Um, - oftentimes I really Onley end up using, - you know, - age 12 maybe h three or H fourth the most. - But there are six possible sizes and levels of importance for headings starting at each one - , - which is the largest and the most important, - going down to age six, - which is the smallest and least important of the headings. - So we can create headings. - We can create paragraphs. - Let's also look at, - um, - place filler text. - So let's say that I'm building this website for my shoe company and I don't have any, - um, - any actual tax to put in there. - Maybe I'm waiting for my copywriter to bring it to me. - Or maybe I personally haven't written it out yet. - So what we can do is we can actually play some filler texting. - They're using some warm ipsum text and sublime text has some tools built right in to do - that. - So I went ahead and just erased the tax and place my cursor in between the opening and - closing P tag there, - and we're gonna go up to tools and two snippets, - and we're gonna go ahead and go to this one that says warm ipsum and click, - and you can see what that did. - Is it place this kind of nonsense type in there? - It's sort of just place some filler text in there for me, - which is a nice way to get started. - And if I wanted have two paragraphs, - I could go ahead and paste those there like that. - Okay, - excellent. - So let's go out and save this and let's go back to the browser and make sure that worked. - And there you can see my heading. - We'll make this normal size again. - There you can see my heading and you can see Ah, - thesis subheading and the two paragraphs here, - which have a space in between them and then now are containing that place filler text. - So you'll get a lot of use out of these paragraphs and headings. - Um, - so we know that paragraphs put a full line space between lines of text, - But what if I just wanted to go down a single line for example, - what if, - after this word here, - Laura MIPs Um, - what if I wanted to push everything else down? - Just one line? - Well, - I can do that using another tag called the BR Tag, - which creates a line break, - which looks like that now this tag does not have a opening and closing tag in the way that - P does for paragraph B, - R or line Break will simply move everything after this PR tag down a single line return. - Let's take a look at this and make sure that worked there. - Let's go ahead and save this and we'll come back to the browser and refresh. - And you can see there that all of the tax jumped down after the word Laura MIPs. - Um, - it just moved down a single line, - whereas between these paragraphs here, - we have a full line in between. - All right? - Not terribly. - I I'm not terribly exciting, - I realized, - but the's air, - all the basic fundamental building blocks. - So this will be really important as we move forward. - Okay, - so that's good for this page. - Let's call it a day on this index page. - We have the name of our company and some paragraphs. - This will be some information about our company, - but let's go ahead and move on to some other text formatting elements. - So let's create another page here. - Let's say, - for example, - that aside from my home page, - I'm gonna have another page that's going to be a catalog of all the shoes. - So let's go ahead and say, - file new. - It's a new file here and let's save this right off the bat will say file save. - And we're gonna put it inside of that main root folder there for our website projects. - And I'm just gonna name this one catalogue like so we'll call this one catalogue dot html. - Don't forget the appropriate file extension. - So now that I have the index page, - all these other pages, - I can really name them whatever I like. - A few things to note here is that you're not gonna want to put any special characters. - Don't put any exclamation marks at symbols, - question marks and things like that because he's actually have reserved meaning in a - website URL So we're not gonna want to use any strange symbols. - Um, - overall, - you're just gonna want to use, - um letters and numbers lower case or upper case letters and numbers. - Also, - we don't really want to put spaces in between, - um, - our file names, - for example, - if I wanted to call this one shoe catalog, - I wouldn't call it Shoe Space catalogue because that could cause potential errors later on - , - When we're linking two things, - best thing to do would be to either put hyphen, - shoe, - hyphen catalog or underscore shoe underscore catalog like that are perfectly fine. - In this case. - I'm just gonna call this file catalogue. - That will be good enough so we'll save that. - And now I have two files here, - and each one has a tab. - This one's called Index, - and this guy here is called Catalogue. - It's OK, - so let's see if you guys can remember the the file. - So feel free to shout out this first file that we always put at the top of every HTML - document. - What it does is it tells the browser what version of HTML were using, - so feel free to shout out the answer. - That's right. - This first tag is called DOC type. - And how do we tell it that this is an HTML five document? - We just say doc type html just like that. - Okay, - then we need a set of opening and closing tags to tell the browser that this is an HTML - code in between these opening and closing tags like that. - So we use the HTML tag and then inside of that, - what are the two main sections of any HTML page? - That's right. - The 1st 1 is the head. - This is the first part of the HTML page, - and the next one is the body like that. - And you guys have probably noticed that I'm in Denning. - Whenever I place some other elements inside of an element like this, - I always hit Tab in Dent like that. - Um, - now that isn't necessary for the browser. - The browser doesn't really care if you make the code pretty like this. - In fact, - you could even put all the code on one line in the browser would still render everything - because the browser just concerned about this relationship of what's inside of what and - what tags are surrounding what content. - But what I do is as a best practice. - I like to in debt whenever I nest or I go inside of another element like this, - and this makes a code much more readable and easy to see this relationship of what's inside - of what? - Okay, - great. - So we also learned an element for putting the title of the page so well that there will say - Title Um and this one will have a similar title to the last one. - Let's go ahead and call this one Z H W shoes. - And what did we right before we wrote? - Um, - bargain footwear? - Wholesales on this page is the catalogue page, - so I'll just go ahead and write out the word catalog like that. - And then don't forget to close the title element like that. - We'll see less than symbol slash title to close that out and then inside the body, - this is the viewable area of the Web page. - We'll put an H one in here that says E h W. - And we'll put ah subheading says shoes. - Oops. - Starting to type a little goofy there. - Okay. - And then inside of here, - maybe we'll have another paragraph with, - like, - place filler information. - You guys remember how toe add the place filler text. - Of course, - you could type out your own paragraph if you want to tell you about a paragraph about the - shoe catalog will go ahead and just go to tools snippets, - and we'll throw in a warm up. - Some snippet like that, - and I don't just make some place filler tax cool. - Um, - good to go. - Let's learn about some other text we can put inside of here. - Um, - let's go ahead and create a list. - So I make a little comment here, - and we'll just say that this is a list and the type of list this is actually is it's called - on a Nordic list. - So occasionally you'll have the need to create Ah, - a list of items and maybe items that are in no particular order. - Perhaps so, - for example, - will say, - Let's imagine that we're creating like an archive for our shoes so you can look up all of - the shoes. - So maybe I'll create a heading first for that, - and we'll go ahead and say shoe archive, - and then we want to create um, - just ah list of items that are going to to represent all of the shoes for a particular year - . - I'll make another will make a subheading here for the year. - Actually, - we'll go ahead and say, - um 2013 like that slash h three. - Okay, - so to create a non ordered list, - what I do is I use a specific tag called the UL Tag UL standing for a Nord erred list, - and it closes like that. - Slash UL. - Okay, - and then we're gonna go ahead and go inside of the UAL tag here. - And every list element here, - like this one, - requires that we put another child element inside of it. - We nest. - Another element inside of it called El. - I would chance for list item. - So here we can put some different list items. - In this case, - we're going to put all of the different. - Um, - all the different months for this year are going to be a list. - So we'll say that this will be for December and will make another list here. - Well, - just make a few months. - We don't need to make. - All of them will say this one's for November, - so this will be kind of like our blawg archive of all the different shoes. - Let's create another list item here will say another list item. - Here is the month for the month of October. - Okay, - great. - So let's go out and save this and then let's come back out to the browser and we have the - index page open up here and we haven't yet linked to our pages. - So what I need to do is, - if I want to see that catalogue page, - you'll have to drag it into the browser. - So I'll go back to that file called Catalogue, - and we can just drag and drop that here. - Cool so we can see there is the catalogue page and the index pages separate tabs there. - Okay, - so for this page, - the, - um, - the catalogue page here we have the shoe archive, - which has a year and then each year will have list items so you can see here when we used - the UL, - tag it in dense and creates a bullet for each L I, - which is list item. - We have December, - October, - November. - Okay, - so let's go back into the code and let's see some other things we can do with lists here. - Let's imagine that we want to sub nest another list inside of here. - So let's say, - for example, - if they click on October something like that, - we want to display another list inside of it So sometimes we have the need to create Ah sub - list of items related to that list item. - So what we're gonna do is open up the list item like this and go inside of it and we can - actually create another on ordered list if we like like this. - So I'll just go ahead and say, - slash ul and I'm nesting. - Just a be clear and show that this is all inside of this list item for October and inside - of October. - We're gonna make a sub list item for different days. - I won't do every day in the month will just do a few just to give you the idea So we'll say - . - Oh, - when we click on October, - we want to also be ableto click and refer to shoes for this particular date in October. - So we'll say that there's a list item for the 17th of October and another one here for the - 18th of October like that. - Okay, - so this creates that on ordered list. - Let's see what happened there in the browser. - If I come back and refresh, - we can see what happens. - There is we get further in Denning, - and now, - instead of filled in solid bullet points. - This sub list for the 17th of October 18th of October have this open lips here. - Okay, - so 2013 has months under it, - and then those month can even have specific days like that. - So this is a good example of some content you could use, - um, - appropriately, - with a non ordered list on order. - This could also be things like a grocery list. - You could put different kinds of fruit or meats that you want people to use in a recipe. - Something like that. - If it's something that doesn't happen in a particular order, - where you don't need numbering like 1234 and your content just to have a bullet point, - you can use that ul element. - Okay, - great. - So there's are on ordered list. - Let's go in and take a look at another type of list, - which is in a situation where you do want it to be ordered so we can make an ordered list - here, - okay, - down below, - so we'll make a different order list. - Um, - let's say we wanted to make a list for top of brands, - so I'll just make another heading here, - and I'll say top brands just to make some text above the list, - and we'll close out that Level three heading there. - Okay, - so to make an ordered list, - it's actually the same as the A Norden list. - Except that instead of using UL to make an unaltered list, - we use ol to make an ordered list like so. - And ordered lists also are filled with list items inside of it that break up each - individual piece of the list. - So we'll just make up some, - um, - make up some fake companies or some fake brands will say, - um, - Bradley, - Bradley and Brown will be the name of a brand. - If you want to use the and for sand symbol instead of a nd you can use shift in the number - seven like that now that is gonna light up pink and the code sublime Texas letting us know - that in this case for the symbol, - it would be most appropriate to use something called the HTML asking character that - represents this So we can do that by saying and symbol, - and then putting in some Limbert some letters or numbers that represent that ask you - character so we'll say, - and a MP semi colon like that. - This is a special asking term here that refers to the and symbol in HTML code. - So you might be curious what it what are these other asking symbols that are available, - and how do I know what to type for them? - If you go to your browser and we can open up another window here and we'll just type in - HTML, - ask E. - That's a S C I I it comes up with these different codes and references. - Now this is a table. - And, - um, - you can see here that, - for example, - to create this this double quote mark like this, - we can say and qu ot semicolon and it will create this character, - you can also say and pound Symbol 34 is a numeric code that will work for it. - So there's different ways you can get these guys to bring up most of these air. - Pretty common. - You could just copy and paste them from text, - like just literally copying your pacing and simple like that, - or finding, - you know, - using your keyboard to type them out. - However, - there are some certain specialized keys that you're goingto need the asking characters for - let's scroll down through and find a couple ones that are maybe a bit different. - Um, - for example, - this is, - you know, - you might have to make, - like the symbol for pounds or euros, - um, - or some other demarcation. - This one is like a little question mark inside of a diamond. - Some of these are symbols in mathematics, - and you may even see accent characters based on a particular language. - So here you can see different characters whom lots and NBA's, - um in different types of accents that will be used for different languages. - Here you have other things, - like the registered symbol. - So if you want to create the registered simple you can do and RG semi colon. - There's also things like copyright, - which is and copy, - which will take a look at a bit later. - So asking characters are nice if you have the need to create specialized symbols, - so this creates kind of like a little stylized and symbol there that's attractive. - So that's one of our brands. - You'll notice that one difference between the A Norden List and the ordered list is when I - used the ol tags for ordered list. - We get a number here instead of a bullet point. - Okay, - so let's go ahead and move on. - Um, - let's write some other list items here. - I'll just do a few more so you can see how these order So we'll make up some other brand - names. - Will see Sampson Travelers. - It's probably a good idea that I stick to my job and I don't try and make up brand names so - we'll make another one up here. - We'll just say kitsch. - Groove is another top brand that we're selling like that. - Okay, - awesome. - Good to go. - So here's top brands 12 and three. - So the nice thing about using ordered lists is that if we change our mind and we want to - stick another Brandon here, - in between Samson and Travelers, - it's just gonna re number for us automatically. - Okay, - great. - So these air some text elements that will be useful for you. - I'm not going to teach you every single HTML element, - but I just want you to know these high frequency ones to get started. - These air ones that you'll get a lot of use out of, - and I do encourage you to go through and check out the provided handouts in the links that - all place, - um, - all post for learning mawr HTML elements. - So there's dozens and dozens of HTML elements, - and it will be good for you to familiarize yourself with the different possibilities of how - you can describe content to the browser. 6. Images: - Now, - a few more elements that I think will be really good for us to learn about right off the - bat are in addition to style izing text. - We also want to learn how to create links in images. - So let's go ahead and jump back to the index page here. - And let's say that we want a place, - um, - an image here to represent kind of the the vibe of our website to show our logo any image. - So I've created a picture already for us, - um, - called intro pic, - and we're gonna place this into the site page and we're gonna place it underneath this - heading here that has the name of our company will say that we want this image to go - underneath are heading, - but before the paragraph. - So I'm just gonna open up some space in the code to do so Now, - just like the other elements here have specific tag names. - H one and H two and P images also have their own specific tag you have to use now an image - looks like this. - I m g. - Now the image tag doesn't have a closing tag name. - It just starts like this. - I m G like that and this image element itself when you just place it on the screen. - The browser now knows that we want to put an image there, - but it has no idea what image we're trying to load there. - So we actually have to tell it which image that we want to load now. - In HTML, - you can pass in options to modify and change elements by placing in something called an - attribute into the opening tag. - Now, - attributes are never seen in the closing tags. - The closing tag always is just a slash and a repeat of whatever the opening tag name was - like this. - But inside of these opening tags were free to put options and or attributes. - So in order to tell the browser where this image is located, - we're gonna go ahead and have to put a space after the name image. - And we're gonna use the attribute called S R. - C. - SRC stands for source were telling it the source location of the image and the way we - provide it with a value as we use the equal symbol and quotes to surround the value. - So this thing here that's in this opening I am G tag is called an option, - and this part of it here is called the Attribute name. - And in here we're going to place the value, - which is the location of the image that we'd like to load. - Now, - whenever I want to load an image, - I have to do some detective work. - I have to basically be aware of the file that I'm currently in, - which right now I'm inside the index dot html page and I'd like to load an image. - But I have to be very specific to the browser. - The browser is not very smart, - and we have to tell it exactly where that images, - and we have to give it locations from the specific file that we're currently in. - So right now we're on the index page. - Let's imagine for a moment that we are standing on this index page. - Imagine that you're two feet are planted here on the index studies TML page, - and if you look around, - what do you see? - You see that there's another page called Catalogue and you see that there's a folder called - Images, - but we can't see inside that folder unless we go into it. - Imagine that images is kind of like a building in this sense. - So we have to walk through the door of this building called images, - and that's like opening up the folder. - Now that we're inside the Images folder, - we can now see all of these images that we want a link to. - So the first thing I have to do is I have to tell the browser to go into the images folder - so that it can see inside of it. - So to do that, - I write the name of the folder. - I say images, - and then I make a Ford Slash and now we're inside of that folder. - Let's write a comment to remind herself that so any time we say a folder name slash, - this is the equivalent of going inside the folder. - Well, - what if I want to go outside of a folder? - The opposite of this situation is if I want to leave a folder, - I can see dot, - dot, - slash so dot dot slash is the equivalent of go outside the folder, - the current folder that you're in, - right? - Okay, - so these air really the only two things you need to know to navigate or to tell the browser - how to navigate from the current file. - You're on to another file or folder. - So we want to say, - Hey, - browser. - I want to create an image. - So we use I m g. - And then we put a space and we say, - And by the way, - this image is located inside the images folder, - images slash and the file we want a load is called Let's look it up just to make sure we - have the right name is called Intro pic, - not J. - Peg. - So this is case sensitive. - I have to spell it exactly the same in mind has an underscoring it. - So I have to say intro underscore pick dot j peg like that and that's gonna load that image - there. - Okay, - Now, - there is one other option that we always want to include inside of an image element. - And this is something called alternative text. - And we use the attribute Ault lt to give it some alternative text Now for the alternative - text. - We're going Teoh, - right? - Something I will say, - uh, - logo picture. - It shows a man with legs crossed, - so I'm giving a description of the image here. - Okay, - so What is this, - uh, - old text all about here? - So all text serves a few very important functions. - Number one, - if you're image link is broken. - If for some reason this is a misspelled and the images not appearing in the browser, - then this all tax will appear in its place in most browsers. - So if the image link is broken, - people can at least read what they were supposed to have been seeing there. - Which is? - It's a logo showing a man with its legs crossed. - Actually, - that's not too great of a description. - Maybe you could come up. - We could come up with something better later on. - But at any rate, - we're giving, - like, - a simple description of that image. - Okay, - so this intro picture shows this content the other. - The other thing that the all text is very important for is for search engines. - So search engines, - they don't have eyes, - they can't actually see the picture of the image. - But however they can read the whole text, - and that will be helpful for the search engine. - Now, - the last thing and probably the most important of all of these things is that if I'm a - person who is visually impaired or I'm blind or have some trouble seeing on the Internet. - What I can do is I can install something called a reader. - And the screen reader, - which is built into most browsers nowadays, - will actually read the text of the Web page allowed to the person who is browsing the - website. - So if I had some problems seeing the image, - then the browser reader is actually gonna read this text. - To me, - it would say out loud logo picture shows a man with legs crossed. - Okay, - so let's go ahead and save this image and let's come back and view this guy in the browser - . - So this one is on the index page, - which is index dot html. - If you don't have that up in your browser, - you may need to go and drag that file from your folder in there. - Okay, - there we go so we can see our images appearing there. - So we created a header. - There's my H one. - Here's my age to Here's my paragraph text, - and here is my image, - using my the I M G tag. - All right, - so that's a good start. - Let's look at some other things we can add to the image here. - Um, - these were some other optional things you can add inside of this image tag. - We can also add something called Title and Title will appear when we hover over the image. - So let's leave a message. - If someone hovers over and this is optional, - you don't have to have this year. - I'm gonna say, - Welcome to the H W shoes, - Something like that. - Lots of typos today on and then we'll go ahead and save that, - and we'll come back into the browser and refresh so immediately. - I don't see this the title, - but look, - what happens if I hover the mouse and leave it there? - It brings up a small little caption. - It says Welcome to the H W shoes, - so you may or may not want that there, - but you do have the ability to add that using title, - people often add these titles, - toe links or images to give mawr information about where that image might link to. - So, - for example, - you might have icons or maybe, - for example, - social networking icons, - and you can add a title to them so that when you hover over the little F for Facebook, - it will say, - Follow our visit Facebook page. - You can have the little T, - so when you hover over it says Follow on Twitter. - Something like that. - Okay, - Another common attribute people add. - That's a good idea for images is you can add the width and height of the image now by - default. - It party made this have the, - uh, - it already set this up to have the correct width and height, - but I can actually put in the number of pixels of the image here. - And that's going to be good if the layout changes. - Because, - for example, - let's say that this image link is broken or the images missing, - then well, - actually, - let's go ahead and show that if I collapse this if I change the sea to an X, - and I misspelled the image on purpose there, - this will actually break the image, - and it will change the content around it. - So if I refresh this, - then it collapses and this content moves up. - Now, - if I were to put in height and width here into the image that will then make the image take - up the size that it's supposed to. - So if you want to check that out. - You can go to the image itself. - In Windows, - you can right click and save properties on Mac. - You can go to get info, - and it should tell you information about the image. - So in this case, - it's telling me the dimensions of the image are 9 20 by 500. - Quite a large image, - actually. - For the intro page s Oh, - this is with 9 20 like that and height of 500. - So this link name is still broken. - I misspelled it on purpose. - There will come back and refresh, - and we can see the whole Texas appearing Their logo picture shows a man with crossed legs - and we see this little broken image icon which nobody really likes to see. - So let's go ahead and fix that. - But you can see the heightened with prevented the layout from changing like that. - Um, - so we'll change this back to intro pic like that, - which is the correct way of spelling it. - You can see our image pops back in there and a nice little spray paint logo. - All right, - that's a good start. - Now, - later on, - we're going to be building a responsively out so that this image will scale in size - depending on if we're viewing this on a desktop or tablet or a mobile device. - So we're gonna end up specifying this height and width using CSS a bit later so that we can - make it flexible. - So for that reason, - and for that reason, - Onley, - I'm actually going to remove the width and height off this image for now. - But I just wanted you guys to know that those are some other attributes that you can put in - there. - Okay, - So great. - We know how to create headings. - We now to create paragraphs, - we know how to create a non ordered lists and ordered lists. - Um, - we also know how to create comments and media in the page. 7. Links: - Now let's move on to creating links. - Links will allow our users to navigate between the pages. - So right now we just have the index page here, - which is our home page. - And we also have this catalogue page. - I think we're gonna go ahead and create a few more pages. - Let's actually create three more, - and then we'll have all the pages ready to go for the rest of our site on future exercises - . - So let's go ahead and just goto file and we'll say a new file and that will create an - entitled file. - We'll go ahead and save this, - and we'll make sure that this is saved inside of our site folder and we want to call this - next file. - Um, - I'm to call this one. - Contact died. - HTML. - This will be our contact information page, - and I'll go ahead and say, - save like that, - Um, - so we can start writing out the basic document structure, - which you'll remember from thes previous pages. - Here we have DOC type HTML head and the body tag etcetera eso for For this one, - I'm gonna show you guys a trick you can do. - Although it's good practice when you're starting out to type everything out, - so you'll remember it. - Um, - you know, - when you get to the point where you're comfortable on you, - remember, - you're confident you remember all of these tags that make up the basic document structure. - You can always use things like this, - the tools up here, - the top. - You can go to snippets. - And if you click the first snippet here that says html Look at that. - It lays out a lot of those tags there for me. - So I could just come in here and then put in the title. - And this one's the contact page saw just right Contact like that. - Okay? - And we also learned about the DOC type tag at the top, - just doing a quick review there. - So, - Doc type HTML is the external five doc type. - There's a few other things we can adhere that will also help the browser. - Let's talk about an attribute we can place inside of this opening HTML tag so we can - specify a language here like this. - We can say e en for English, - Um, - and if you're interested to know all of the language codes, - for example, - yes, - for Spanish, - fr for French etcetera. - You can go ahead and look those up. - You can Google that if you Google um html laying ice. - So I s o codes. - I so codes it will come up with a large list of different languages. - You can check out another thing that's nice for the browser. - Aside from telling it, - you know, - the version of HTML, - which we talked about before, - and giving it a language for the main content on the page. - We can also add a meta tag appear, - and meta tags oftentimes contain information for browsers and search engines. - In this case, - what we're going to do is we're gonna give another tag called Meta with a tribute of - character set. - And we're going to tell it that the text characters we're going to tell the browser any - devices interviewing this page that these text characters in the page are utf eight and - coded text characters. - So this is the preferred HTML five kind of set up there tonight to sort of have a blank - page. - Um, - I'm gonna go ahead and put in the things that will be the same on every page as with all - our other pages we have heading and we also have the subheading was shoes, - I believe. - And then we had, - like, - a paragraph. - So there's gonna be some different things will go on each of these pages. - This is the contact page in, - and future exercises will actually be placing in a contact form here and a embedded Google - maps of people can see the location of the company and things like that. - But for now, - we're just going to create a paragraph and we'll just write something in it just so we can - see a change from page to page saw just right, - contact here. - And that will work for now. - I'm gonna go and save this page. - We can just go ahead and duplicate this page a couple times. - I'm gonna go to file, - and I'm just gonna say, - save as And I'm gonna call this next one instead of contact. - Why don't we go ahead and save this one as pricing? - So we're also gonna have a page. - It's gonna be sort of a pricing chart. - We're gonna insert a table into this page and later exercise. - So it doesn't say pricing and save that and for pricing, - we're gonna change a few things here. - Well, - we'll write the word pricing here in the title and just so we can see the change on each - page enologist right, - pricing in the paragraph here and save that. - And let's see, - we have one more page will do a file save as, - and we'll go ahead and duplicate this page as well. - Um, - let's call this one sales. - This is gonna be a page. - It's going to, - uh, - we're gonna list all of all of the sales for our site. - So here will go ahead and change this to will say on sale for that and will say like, - um, - sales here for the paragraph just so we can see a change when we navigate between the pages - and again, - we'll be putting more content in here later. - This will be just enough to get us started. - Okay, - so those are all saved. - Um, - let's jump back to the index page here. - I just click on index. - You'll notice in sublime text. - If you just click on a file, - it will change that file. - And if you double click, - it will actually open up an additional tab for the file. - It's usually when I'm working on the site. - A lot of times I'll just go through and double click on each of the files I intend to work - with like that. - And then I can switch between all of these tabs up here, - which is kind of nice. - You could even drag and drop and move these around. - Another cool thing you can do is you can split the screen. - For example, - on Mac, - you can dio command option and then a number and the number you hit at the top of the - keyboard. - The keypad will determined how many times it splits. - So if I say command option to it will split the screen into two, - and that allows me to drag, - um, - these tabs from one side to the other so I could actually view multiple files at the same - time, - which is kind of nice. - So that's Ah, - command option, - and then a number at the top. - Your keyboard. - You can play around with that. - You can do command Option three. - It'll split three times Command option for will split four times, - although that's kind of narrow to read the code there. - But you could see you could actually have, - like four different files open in each tab like that, - which would be kind of nice. - And if you want to get back to the normal, - you just do command option one. - So that's command option on Mac on Windows. - I believe it's control option, - But you might have to look that up in order to Yeah, - you know what? - I'll go ahead, - and, - um, - I'm gonna figure that out, - and I will post that in the information underneath this video for you guys. - Okay? - So, - back Teoh, - back toe links, - though we want to do now, - is we want a link between all these different pages. - So I decided I want my links toe live just underneath this. - Heading here on each of the pages will have, - like, - a navigation bar we're gonna place here, - okay? - And we're gonna put some links here. - I'll just write a little comment that these air links up. - So the specific element that we used to create links is an anchor element. - It uses the letter A like this. - It has an opening and a closing A and anything that you surround with this opening and - closing a tag is going to become a link for example, - we're actually going to link to this texture. - First, - will create some text that says about and we'll turn this text into a link and by - surrounding it with this a tag. - So a stands for anchor link. - But if it's helpful, - you could also think of the of the word action A for action. - Because what this does is, - um, - it creates an action where when you click on something, - it changes to a different page. - Right? - Okay, - So aside from you, - no surrounding text with these anchor links these these a elements here, - we can also, - um, - we can also surround images. - So, - for example, - this image down here, - if I wanted this image toe link somewhere when I clicked on it, - I could also surround this guy with a tags like that. - This particular image I'm not really interested in this one linking anywhere, - So all erase it off that, - But just to show you that you can, - in fact, - you know, - just turn links themselves are Excuse me, - you can turn images themselves in the links. - Okay, - so for this first try, - we're just going to turn this text into a link so surrounding this text with this. - A tag tells a browser that it's supposed to be a link, - but we still haven't told the browser where we wanted to actually navigate to where we want - it to jump to when we click this link. - So in order to do that, - we have to add an option here into the opening a tag and this attribute is called H Ref. - A trough stands for hypertext reference, - Um, - or hyper reference. - Remember, - these pages are HTML pages, - which is hypertext pages or hypertext markup language pages. - So this is referring to referencing a specific HTML page if that makes it easier to - remember their H ref. - Okay, - so what we want to do here is we want to put the, - uh We basically want to describe to the browser where it should go, - and we have to do that, - you know, - relative to the page that were on. - Currently we're on the index dot html page. - So if I come over here and look in my folder, - I can see that I have Everything's inside this main site folder that's called HTML - fundamentals. - Um, - this time we're not linking to any images, - so I don't have to worry about the folder name there, - and it looks like all of these HTML pages are in fact just living side by side in the same - folder. - So since there just hanging out in the same folder, - I can literally just type the name of the file like that. - Now again. - If if these pages were in a different folder, - you could type the folder name to tell the browser to go into the folder and then find that - file. - And again, - if you wanted to go out of folder, - you could do dot, - dot, - slash, - which will, - which will exit the current folder and look for a file or another folder. - In this case, - we don't need to do either of those because they are just hanging out living in the same - folder. - Great. - So that's the first link. - That's all we need to do to get that one toe work, - and I'll go ahead and create another one of these will create one for each page. - That's H ref. - You'll get used to writing that a lot, - and I'll go inside here and we'll put some text. - Let's see, - the next thing we're gonna link to Is the sale page, - Saul, - just right on sale. - And then here, - the actual physical HTML page want a link to is called sale dot html Just like that. - Oh, - you know what? - Ah, - here. - I called it sale, - but here it's called sales Within s. - Now, - that's gonna create, - um, - a problem. - These names have to be exactly the same. - So this is actually gonna break the link here. - So if I call this sale here, - I better make sure to call this sale over here. - I think what I'll do is I will right click on this file and also rename and then down here - at the bottom, - I can erase that s and hit return, - and that'll fix it. - It's a good thing I caught that, - um, - when I did, - because that'll actually break the link. - Okay. - Nobody wants broken links. - That's no fun. - Okay, - so we're gonna go ahead and just make a couple more of these just to give you the idea of - how it works. - The next thing we're gonna do is after sale is the catalogue page, - which we already built, - and that links to catalog dot html Just like that. - And these are case sensitive. - Um, - so here in the file name. - If it was a capital C in the file name, - I would need a capital C there. - Sometimes the browsers is more forgiving locally on your computer, - on the computer in front of you, - you might, - you know, - accidentally use a different case sensitivity like a capital C Lower Casey. - And for some reason, - it will still work for you locally. - But then when you uploaded to the server, - it may not work. - So it's always good to be aware of the spelling of things and the case, - whether it's upper case or lower case. - Okay, - uh, - next let's move on to the next page. - So after catalogue, - we're going to link to a page called pricing dot html. - And the text there is called Pricing and we'll close whips will close that link there, - and we'll do one last like here. - I think that'll take care of all my pages. - I'll show you guys Ah, - shortcut also is. - Instead of typing out the tags, - you get used to them. - If you just hit the letter of the tag like the letter A. - And if I hit control space bar. - It comes up like this and I can hit return, - and it will Right that out. - For me, - there's some pretty neat shortcuts that you can do for code completion in sublime text. - Um, - let's see where we out here. - The last page is called contact dot html. - Like that, - and we will link to the Texas is contact. - Okay, - now. - So this demonstrates how to use a relative path to other files on your website. - You may be wondering, - hypothetically what if I wanted to link to another file somewhere else on the web, - for example, - What if I wanted, - you know, - to make another link that went to another website, - For example, - if I want a link to The New York Times, - I could put in the full girl, - which is why times dot com like that, - Um and why times now I'll probably end up removing this link in later exercises because we - don't really need our shoe website Toe linked to the New York Times doesn't make much sense - , - right. - But nonetheless, - I wanted to show you guys that if you put in the name of a file on your website as long as - the browser has a clear view of it. - You know, - if they're in the same folder, - you could just put the name of the file that's called the relative path. - Now, - if you ever want to link to something somewhere else on the web, - you can put in the full domain name like this, - which is called the Absolute Path. - Here. - This is the absolute your URL path each you do have to put the full http colon slash, - slash and then the full name of the website. - So now when I click this text and White times, - it's actually going to link to another website. - Okay, - so by default, - if you just use h ref, - um, - and you click on either an image or some text with the anchor tag set up like this, - what's gonna happen is which were all quite familiar with is that the screen will change. - We'll be looking at one page, - will click a link, - and it will switch to the other page now, - in situations where, - instead of changing the page that you're currently on, - if you'd like to force the browser to open a new tab, - a new browser tab or a new browser window. - What you can do is you can use another attribute in here, - which is called Target. - So I'm gonna go inside of this. - A tag here, - this last one for The New York Times. - And after this this age ref here, - I'm gonna go ahead and come in here. - We'll zoom in a bit and hit a space and will say Target like that. - There we go. - Target is the name of the attributes, - and then we'll go ahead and put some quotes. - Notice. - If you have multiple attributes, - what happens there is you just simply put a space. - We can even put this on its own line, - so it's easier to see. - How about that? - Okay. - So you can see here that if I have multiple attributes, - we have a single attribute here. - And then there's a space. - Um, - and then we have another attribute there. - Okay. - And attributes like these are only in opening tags, - right? - Never in the closing tag. - Okay, - so, - under target, - we can tell it to target a new blank browser tab by saying underscore blank like that. - The underscores important. - You have to put that in there too. - This is a specific value that the browser understands. - As instead of targeting self, - the default is target self, - which looks like this, - Um And that means that when you click a link it whatever window you're in, - you're gonna lose the view of that page. - But it's going to switch to the view of the next page or you're linking two. - Um, - and if you'd like to do that, - you really don't have to specify. - So for these ones up here, - I didn't specify a target. - So when I click, - the's just gonna change the page. - However, - for this one, - I specified target blank, - and that's going to open up a new browser tab. - Let's go out and save this. - And what we're gonna do is we're gonna copy and paste these links to all the other pages - here, - So I'm gonna highlight all of this code from Ah, - for me, - it's online. - 17 here. - All the way to line 19 line numbering may be slightly different for you on your exercise - code, - depending on how much you wrote or how Maney line returns you did. - But right here in this section, - I'm just gonna copy all those links we just wrote so I'm gonna highlight those and say edit - . - Copy what? - You can see the shortcut. - There is command See on Mac or control See on Windows. - And we're gonna go to the other pages on the site. - Let's go to contact, - and we'll go underneath the heading and paste those links there and save It's go to the - sales page and we'll go underneath the headings and paste those links and save and let's go - to catalog and we're gonna go under the headings We're gonna pace those links and save and - looks like we're all done there. - That's the Well, - this is only four pages. - It looks like I'm missing something there. - We don't have pricing yet. - That's what I'm missing. - Okay, - we're gonna go into pricing the last one and go under the headings and paste and save. - So now, - all fought. - All five of my pages have these links, - um, - pasted into them, - and we can then save you to the files and we can go back to the browser now. - And you can see on this tab your, - um, - on the index page and you can see our nice little image we created here. - Remember? - We always have to refresh the page to see the most recent changes we made. - So you're always saving your file and then coming back and refreshing. - Um, - don't be afraid to save, - because even after you save, - you can undo. - If you make a mistake, - we can go to edit, - undo, - um, - or command Z on Mac or control Z on Windows so you can always get back to where you where. - I can undo that like that and fix it. - Okay, - so we're always saving. - We're going back to the browser and we're gonna refresh. - And there we go. - I see my links here, - which are appearing beside my image, - will talk a little bit more about that later. - Why these air appearing side by side? - Um, - so let's go to test these. - So we'll go to on sale here. - I'll click that cool and it says sales here. - Now I'm on the sales page, - will click catalog. - There's the catalogue page we built with our own ordered lists and ordered lists. - We'll click pricing and it goes to the pricing page. - There we'll click contacts and we go to the contact page and then last but not least we'll - click on the Y times link which you can see, - opens up a new tab here and takes us to the New York Times website. - So because I said target blank, - Um, - like this that is causing a new browser tab open The thing. - The thing that's nice about that is that, - um I can still get back to this site. - I haven't left this site here. - I can just use that browser tab. - Right. - So again, - if I click, - this opens up a new browser tab here. - We can just close that and get back to the site. - Were already on. - Okay. - Good job, - everybody. - You just built your first web page. - Um, - your first website. - So this is really what Web pages are, - um, - websites are essentially, - you know, - linking between several web pages. - Um, - And although this one's not very attractive looking yet, - we're gonna learn more and more and push it further so we can build really professional, - polished looking sites. - Okay, - so good job. - What you're gonna want to do now is you're gonna want to move on to the first code - challenge where you're going to start building your own site pages 8. Validating HTML: - let's talk a little bit about validating our code. - I'm just gonna go to an example. - Page. - This is the pricing data you see and all pays that we just recently finished in the last - exercise. - And when you're working on these exercises and on future exercises in this course, - you may run into problems where things aren't displaying correctly in your browser. - Um, - or perhaps even when you go to build your own site project, - you'll be writing some code and maybe something won't be displaying correctly or things - won't be positioned in the way you'd like them to be on the page. - So a good way to check that is to validate the code and see if the code is actually written - properly. - So one way we can do that is we can use an online validator. - So what I'm gonna do is I'm gonna highlight all of the code on this page on the pricing - page here. - I'll just click and drag. - Or you can dio select all command a on Mac or control A on Windows, - and that will select everything. - And then we're gonna copy this code, - which is of course, - command. - See on Mac or control see on Windows. - And then let's go jump over to a browser and I'm gonna go ahead and search for validator - dot w three dot org's like that. - So this brings up validator dot w three dot org's and this is at the w three dot org's - website, - which is the W three c, - the World Wide Web consortium, - which sounds like a kind of like a creepy cult. - But actually these are These are people who are maintaining the HTML language, - so they're determining the rules and the proper way of writing and the proper usage for - HTML and CSS. - So if you ever I want to know for sure how to write something or how to use an element, - you can always come here and check up there, - check out their documentation at w three dot org's. - Right now, - we're just gonna be using their online validator. - You can see their several ways to validate. - One thing you can do is you can put in Anat address here so I could upload my site and my - site could exist in my domain name like my site dot com. - And I can just paste in that URL and have it validate pages from that site. - Um, - you can also validate by file upload so I could choose a file from my computer and I could - test the code. - That way I could validate the code from there. - We're gonna use this third tab here this says, - validated by direct input. - And you can see them. - There's a little box for copying and pasting, - um, - and weaken. - Do edit paste, - which is a command V or on Mac or Control V on windows. - And that'll paste your code in there so we can see the code we recently wrote, - and I'm gonna go ahead and click check. - And the good news is we wrote that correctly. - It says this document was successfully checked as html five. - Any time you get a green bar at the top than then you did well, - everything's working properly. - Um, - otherwise, - if you get a red bar here, - then it's going to tell you that there's something wrong in the code. - Um, - let's let's create that scenario. - So currently everything's written correctly, - But let's say that I was typing in a hurry and let's say I forgot to write this closing - slash so it kind of looks like there's an opening age two and then another. - H two, - this is a very common mistake. - Is Oops. - I forgot to put the closing slash here. - Another common mistake is for getting too close an element. - So what if I forget this closing tag on the paragraph like that? - So here's two errors thes air to really common errors that I see. - So let's go. - They re save this file and well, - copy. - This year, - I'll copy all this code, - and we're gonna go ahead and bring that back into the validator here, - all right? - And we're gonna pace, - and then I'm gonna click the Reeve ality button down here. - Oh, - that time it found errors in the code. - So it knows there's something's wrong. - Um, - so says Ares found while checking this document. - So let's go see what these errors are here. - Okay, - um and this is the area that I'm really concerned about. - Is this red text here that says output four errors. - So let's see where it's finding these airs at. - It tells us here online 10 um, - heading cannot be a child of another heading. - Interesting. - So it sees this age to tag. - Let's zoom in on that for secular. - This is the first air message. - It says that this age to tag here. - See, - this little red mark cannot be a child of another heading. - So it thinks we're trying to nest, - heading inside of another one. - And it's saying that that's specifically online. - 10. - Okay, - so we can go back to our code here, - and because I have line numbers, - I can go down the line 10 and I confined the issue and say, - Oh, - in fact, - I see what they're talking about here. - I need to have a closing slash mark here, - so I'll change that and then save and we can re validate. - And that'll solve at least one of the errors there. - And let's come back. - And I'm gonna go ahead and paste this code in here again. - I'm gonna race all of it and paste and revalidated. - Okay, - that was that. - I was cool. - That actually worked that time. - It looks like we got away with this p tag. - Um, - although really, - it should have thrown in air on that as well. - Um, - and of course, - if you ever visually see these things occurring, - you're gonna want to clean it up, - fix it up yourself by putting in that other closing tag. - So whenever you validate, - it's going to, - you know. - Usually it will tell you the exact line where it's seeing the issue. - But other times you have to go to that line. - It tells you to go to, - and you have to backtrack and check the code above it to see if something else previously - is disrupting the validator on that particular line of code. - So that is a good tool to use to troubleshoot and make sure your code is written correctly - . 9. Site Publishing: - Hi. - Let's talk about site publishing after all our hard work. - At the end of the day, - let's say we'd like to take our website files and we'd like to upload them to a remote - server. - That way we can preview the files or we can share the files with World from our domain. - So, - of course, - this requires going out and purchasing a domain name and Web hosting space from a - particular company. - And I've suggested a few companies that I've had good experiences with and then have some - reasonable deals in the 0.0 set up section in Module one so you can check out those - companies if you don't already have this set up and really anywhere that you can find a - domain name provider and Web hosting. - It's fine to use aside from being able to upload our files so the world can see it. - This also be helpful in this class so that you can post your projects and get feedback from - other people because they'll be able to just go to your website domain to check out what - you've been working on. - So to get started, - we're gonna go ahead and make sure that we have written down the three pieces of - information that we got from our hosting provider, - and that would be our FTP address our user name or user log in and password. - Typically, - most hosting companies will email you this information when you first sign up. - And if you weren't emailed this, - it's possible that you might have to call them or contact them to get this information. - Or they may have given you a user name and password to log into a control panel at their - website. - And usually once you log into your control panel somewhere in there you'll be able to find - this information. - And once you find that information, - you want to write it down. - And then the next thing we want to do is we're gonna launch this application called File - Zilla, - which is going to be our preferred FTP client. - So I'm gonna go ahead and launch file zilla, - and this may look a little bit different on Windows. - This is on my Mac here, - but it's pretty much the same from both. - Um, - you can see that this screen here has all these different windows up here in the top. - We have a window. - That's going to be the request and response information from that. - The servers giving us so it respond back, - like, - cannot connect the or it'll be like connection successful stuff like that. - And down here, - it'll actually tell you the status of a file. - If you're copying it, - you'll see a little loading bar toe, - let you know if the file is copied. - And in the center here we have split into the left and right side, - and the left side is your local file system. - So these air all the files on your computer just in the same as if you were using finder or - your file browser and then over here on the right side, - which is actually blank right now because we're not connected to any servers. - This would actually be the file structure on your server that you're connecting to so - you'll be able to see your local files and your server's files, - and we literally can just drag and drop files from the left side to the right side to copy - from our local files to our remote server. - So this is actually the equivalent of uploading is if you click and drag you know, - just in the same way that you can click and drag files around your computer, - you'll just click and drag your website files and drop them onto the remote server. - And additionally, - you can also click over here in the remote server, - and you can drag and drop files from the remote server to your local computer to download - those files so you can upload and download simply by dragging and dropping. - So we're not connected to any server. - That will be the first step. - We have to connect to our server. - So the first thing I'm going to do is I want to go ahead and go up to the file drop down - menu, - and we're going to select site manager And here, - under this little tab that says my sites. - This is where you can create all of the different settings for different servers that you - connect to. - So these air just different servers that I've connected to in the past. - I'm gonna go ahead and create a new site. - I'm gonna click this button here new site, - and it wants me to name it here. - It's it's currently called New Site, - but I'm gonna give it a better name. - C H W Shoes is the name of this site. - And then if I click on that there, - I can see that I can put in some settings and it will remember these settings for this - particular site. - So first thing I need here is my host. - And in order to connect to my FTP server, - I just put in the domain name that I'm connecting to, - which is Jonathan Grover dot com. - And of course, - this will be different for you and you'll have to again you'll have to check with your - hosting provider to know what you're supposed to put here to connect the FTP for the - protocol. - Here, - you can select between FTP, - which stands for file transfer protocol, - or SFTP, - which is secure file transfer protocol. - Eso sftp may be required. - Certain hosts or certain servers require that you connect with a secured connection. - My provider does not. - I'm just going to use regular file transfer protocol, - which is pretty common. - I'm gonna leave the port blank. - Sometimes you have to put in a certain port number here, - but most of the time you can leave that blank under encryption. - I'm just gonna say use plain ftp and here under law gun type, - I'm gonna change this to normal. - So I'm gonna change it from anonymous to normal. - And here where it says, - user, - this is where you put your log in name or your user name. - So this is where it's helpful to have this stuff written down somewhere, - and then you're gonna want to put in your password. - Fortunately, - you guys can't see mine because it's little dots. - Um, - and then there's a few other tabs. - I'm not gonna fill out anything else, - but just to let you know what these are. - If you go to the advance tab, - you can click, - browse, - and you can select a default local directory. - And what that will do is whenever you connect to this site, - it will automatically load a certain folder from your computer here in the local file. - Sometimes that's nice. - It can speed up the process so you don't have to search around as long, - and you could do the same thing for your server by setting up a default remote directory. - So that way, - every time you connect to the server, - it will go into specific folder. - You want to go into. - Sometimes when you connect to a server, - you'll just see a blank directory, - and you could just drag your files right into it. - Other times there's all sorts of folders, - and there you might see one that says, - Logs that just has, - like, - data from your hosting company in it, - like analytic data about who visits the site, - things like that information about how often you copied files and on what date. - And then sometimes there's another folder that says Public, - which is where you would copy your Web site files or other times. - It's called http or maybe even an HTML folder. - So if you see a lot of strange folders and you're not sure which folder to copy your files - and two, - you're gonna wanna ask your hosting company about that. - So for now, - I'm just gonna leave these blank. - But the main thing you have to have is on this general tab, - and that's your FTP host, - your user name and your password. - After I get that all set up, - I can click the OK button to go ahead and save that, - and now any time I want to visit the site, - I can always just go to file site manager, - and I can see that it remembers that information. - Whenever I click on the name of my project, - here's each W shoes. - It will have all that information there so I can go ahead and click on my site and click - Connect here and you could see up here these air all the commands and responses from the - server. - Fortunately, - mind said directory listing successful here when I connected. - Now, - if you see some red text here that says something like like error, - blah, - blah blah a little usually have ah, - number in some type of error message. - It usually will tell you things like user name or password Incorrect, - which will let you know you're obviously using the wrong password. - Or it might, - you know, - have some sort of strange air message that you just don't know what it means. - My advice is if you get an air message and it's not clear why it's not working, - highlight the air message and cops you're hosting companies tech support or call your - hosting company and read them the air message, - and they might be able to tell you why it's not connecting Fortunately, - mine was able to connect. - You're when? - When you connect. - You might not see this complicated of a file structure actually have all these crazy - folders in here. - But at any rate, - what I'm what I'm gonna do is I'm going to create a folder specifically to put this, - um, - this website in if you just wanted it to be in your domain name. - Like if I just wanted to go to this domain name, - I would just drag it into that root folder. - But I actually want to create. - This is kind of like a hidden site project in a folder that, - like on Lee I know about. - So I created a folder here called CHW shoes so I could actually go toe like Jonathan, - Grover dot com slash CHW shoes and see the files there, - For example, - let me actually remove this directory so I can recreate it again. - Show you how If I right click, - Aiken, - say delete. - Be careful doing this, - By the way, - you can't undo it, - and we'll say yes. - And now it's That one's gone. - Okay? - It's actually removing the files there. - It takes a while. - So if I want to create a new directory in here outside the window and say Create directory - and it's showing me where it's gonna put the directory. - And I'm gonna call this one Z h W shoes. - So I'm trying to make a little hidden director here, - and they're gonna say, - OK, - I should be able to find that directory in here somewhere. - Now, - there it is. - If you ever want to go into a folder, - you just double click on the folder. - If you ever want to go out a folder, - you just double click on this little dot dot folder. - There always be a folder at the top, - called dot dot and if you double click that, - it will take you out of the folder. - So I'm actually gonna go back into that folder right here. - Cool. - And what I want to do that is I want to select all these files over here in one way you can - do that is you can click on individual files and you can hold shift and select them like - that. - You can also select all files by saying command a on Mac or by saying control a on windows - , - and then you can once they're all selected like this blue. - You can just click on any one of them, - and it'll grab all of them that we can just drag this over here and we can drop it. - So by dragging and dropping from my local side to my remote server there, - I could move all those files in there and up here. - The top. - This little bar here is showing me where it's copying those two. - This is telling me if it's copying them successful and down here in this window, - when you copy a file, - you'll actually see a progress bar will show you how long it's taking to move that file. - For example, - if I drag the images over here again, - it asked me. - It says these files already exists. - Would you like to overwrite themselves? - Say, - um, - always use this action and say OK, - and down here you can see it's overriding those files or updating those image files now, - all right, - and once it's done, - it will say file transfer successful On this tab, - it says there were 39 successful transfers, - and if I click that, - it will tell me which files like that and where they were copied to. - If you see anything here under failed transfers, - that means something didn't copy. - And you can, - like, - right click on it. - And you can, - like, - tell it to retry copying it or something like that. - Cute files are the ones that should be like currently coffee. - All right. - At any rate, - you can see these are mirror images. - Now, - this is my local files. - And this is my remote server, - which has all those files mirror images of each other there. - Okay, - Since there's an index page here, - I could just find this folder and it will show me these files on the web now. - So I'm gonna open up my browser, - and I will go to my domain name and had I just thrown it into my my default directory. - They're for my domain name. - I could just go to the domain name itself. - I already have a web site here in the root directory. - So I'm going to instead go to my C h w underscore shoes folder like that. - And there are pups. - My website. - So you should be able Teoh, - upload your files to your server. - And if you don't want the world to see them. - You want to hide it a bit. - You can always create a directory and throw the files into their. - And if you copy and paste this directory into your your project page on skill share, - then other people can go and see the files and give you feedback and things like that. 10. Introducing Tables, Forms, & Iframes: - Hey, - welcome back. - This is slides 1.2 tables forms and I frames. - We're gonna be looking at some additional HTML elements that we can stick into Ah, - the next upcoming exercise. - So will basically be picking up where we left off for the last exercise, - but will be adding into that same site. - Some additional things such as tables, - forms and I frames tables. - You're probably all familiar with any time you have some data and it would be best - displayed using ah organized structure of rows and columns than a table is gonna be your go - to element. - The table element is and made up of this opening and closing table tags here and then - inside of it. - The first thing we do is we decide how many rows there are, - and we use this TR element here to create a table row, - so t r stands for table row. - Okay, - So this particular table we've only built to rose here, - which you can see. - Here's the first set and here's second Now inside of table rose, - we have TDs which divide the table into columns. - So this takes that this row here and it adds two columns to it because I have an opening TD - . - A closing TD makes one particular column and this other TD table divider here creates - another column. - We can also do the same thing up here, - but instead of using TD for this first these 1st 2 on the top row here we use th th dance - for table header. - Okay, - so that's going to enable us to style these guys differently. - So we can say, - Well, - we want the heading to have, - you know, - maybe thicker text and maybe be centered or something like that. - Or maybe the background color of this cell is a different color or something like that. - So we use the table element inside. - We have table rose t r. - And then we have th for table heading or table header and we have TV for the other cells. - The other columns we want to create below. - So you can see here if we if you imagine that we chop off all this stuff to the right and - everything below. - Basically, - we're just building these 1st 2 columns here in these 1st 2 rows, - and this one would be the th the table heading which this person has styled differently, - so it's clear that this is the heading on the top. - We have a darker color gray background to indicate that. - So here is name, - um, - as the first th and thread pitch in millimeters, - which is against the measurement for this particular product. - And then under that we have the next TR, - which is Table Road. - This whole guy here's a table, - wrote this first light grey bar. - And inside of that we have one TD making up this first column, - which is M four, - which is the name of the product. - And then down here we have the measurement for that product, - 0.7 millimeters. - Just look at that again for a second. - Absorbing taking it in. - Okay. - And then the next thing we're gonna talk about is forms. - So we're gonna be adding a contact form eso that the user can type a message in the form - and send it to us, - and it will show up at our email. - Okay, - so in terms of html will need to learn some form elements so we can build these thes form - input fields so that the user can send us information. - Okay, - so The form element is made up of this open opening and closing form tag, - and you can see that there's two required options that you have to put inside of that - opening form tag there. - And this 1st 1 is called Action. - So action points to the location of the file or the route on your server that's going to - accept the information it's expecting to gather the information or collect the information - that you're submitting in this form. - So, - for example, - in this particular case, - there is an input for user name and an input for password. - So let's say they type in the user named Bob, - and they type in the password French fries, - and then they click a submit button. - So whenever this for Miss submitted, - it's going to go to the action. - And it's going to send that information to this particular file, - which is called Log In. - So this log and file on the server is going to know, - then to check the ah, - it's gonna check the user name and password against a database to see if that user exists - as an example. - Okay, - so for ours and our exercise later, - we're gonna be building a contact form, - so it'll be a little bit different, - but we'll still have an action. - Right? - Okay, - So the action is essentially where this information is sent to. - Now, - the 2nd 1 that you have to have here, - Um, - and these can appear in any order you can write. - Method First action second, - but you have to include somewhere within that opening tag, - inaction, - attribute, - and a method attribute. - So method actually stipulates the method that it sends this information to this action - location here. - So there's two main ones that you will work with. - One is called get, - and one is called Post. - Um, - so get it doesn't hide the information. - You can actually see it written in the URL When you when you post using when you submit a - form using the get method, - it'll actually append to the Ural at the top of the browser window. - Those those ah particular values, - those parameters and what value the person typed in for their name and password. - So we'd never really want to use get for anything that's important. - Like, - um, - like, - for example, - you know, - credit card information, - passwords, - things like that you never want to use the method get. - It's much more common to use the method post because it's secure in the sense that, - well, - it's not encrypted. - But it's secure in the sense that this information is at least hidden. - It's not viewable in the http header it all, - um, - and you won't see it up at the top of the your El Bar either. - So this is our preferred method for things like Loggins or even our contact form we're - gonna build. - We're gonna use a method of post. - Okay, - So action is, - you know, - where we send the file Post is telling it the format that it's or the way sort of the - method for sending it there inside the form opening and closing form tags. - Then we have other types of elements that we can place inside their um and we're gonna take - a look at a few different ones as we as we move on. - So this 1st 1 here will talk about is called input. - So this guy has input, - has a type of text, - so each each input can have different types. - You can see this one as a type of text. - This one has a type of password, - um, - so text when you type into a text input, - the user just sees the letters that they're typing in. - So they click inside the input and then they start typing. - They see the text appearing. - Now, - password is different because actually password, - You see little dots. - So when they're typing in the password, - if there were someone who is maybe looking over your shoulder, - um, - it's a library or something like that in a public place at a bus stop, - people look over your shoulder when you type inside of a password box with input with the - type of password, - they see little dots so they can't actually see the letters of your password or the numbers - of your password that you're typing. - Okay, - so that's important is to specify the type of input that it is. - We even have a type down here of Submit, - which creates a button that's a submit button, - so we have type text typed password type. - Submit those air a few. - We'll talk about some more as we move on. - Another really important thing you need to do is add this attribute here called name Okay, - so whenever the person types into this input. - Let's say they type in. - Their name is Bob, - and we submit that it's going to post that information to this file. - Log in dot PHP. - Now, - when logging dot PHP receives that information, - the name Bob, - it has to have a with, - ah of identifying that piece of information amongst the other information. - So we're gonna be sending, - you know, - user name and a password. - Now be giving it a name. - Ah, - like user name or password. - What we're doing is we're labeling that information that we're posting to this file. - So this is basically essentially a variable name called user name that stores whatever they - user, - you know, - whatever the person the viewer of the site types in, - So they type in Bob and that that text string Bob is stored inside of this this variable or - this parameter user name, - which is posted to log in dot PHP. - So name is very important. - And of course, - the name between the different foreman puts have to be different, - Right? - Okay, - um, - this guy here is Ah, - fun friendly thing you can do with forms in HTML five is you can use this attribute called - placeholder and what this does is it will write something in the form and put initially so - you can give people a hint of what they're supposed to type their eso. - It'll actually say user name here. - So the viewer knows that they're supposed to type the user name in this box, - and then when they click inside of the box, - that placeholder disappears, - and now they're only seeing the text there typing there so often times the placeholder text - is gray and will indicate to the user what they're supposed to type their. - And then when they click inside the foreman put box, - the text color will turn to black as they start typing in their user name. - Okay, - and then we have type Submit, - which we mentioned is a button, - and this one has also an attribute called Value. - And that's how we label the button. - This will actually physically put the text log in. - It will write that text on the button that people see in the browser. - So these air some other types of inputs. - We looked at a type of text before um, - we also have a type of password, - which we looked at before another type we have is called T L, - which stands for telephone. - As you probably guessed, - one of the nice things about type tell that's that's useful is there's actually a slight - difference if you're on, - For example, - a tablet or another touch Ah, - mobile device smartphone, - any type of touchscreen device. - Most browsers now are compatible that when they see a type of telephone, - when the user, - um, - uses their finger on like a tablet to click inside of that input box, - the keypad that comes up will be a numeric keypad. - So it's easier for them to put in their phone number because it's all numbers as opposed to - a type of texts. - So when you if you're on a mobile device or any other sort of tablet touchscreen device, - if you click inside of an input with the type of taxi will bring up the Alfa pad, - which is all the alphabet characters, - and then when you click on inside a telephone box, - it brings up numbers. - Okay, - um, - we also have This is kind of interesting. - We have a type of hidden here, - okay, - so hidden when you put a type of hidden, - it allows you to insert a value that automatically gets submitted in the form. - This is, - Ah, - hypothetical situation. - We're saying, - Oh, - this is a person's user idea. - Maybe they're logging into their their bank or to check out their stocks or something. - And we need to know what's user number. - They are, - for some reason, - so we can actually store that inside of value. - So instead of them typing in that information like thes other input boxes, - they're going Teoh, - it's gonna be automatically inserted in there for them, - and we still give it a name. - This has a name of I. - D. - So it's storing this value inside of something called I D. - And because it sets a type hidden, - we won't physically see it. - So this won't be visible in the form, - but it's still passing information to wherever you're posting this form. - Okay? - And we talked about input type. - Submit. - This is also something useful to know about. - If you want to make a form input required, - an HTML five. - You can use this particular word at the end of any form field you want to make required, - and you just write the word required, - which is kind of different than we've seen before. - Normally, - you're placing in a value into an attribute. - This is kind of like just placing an attribute name, - um, - at the end here, - and that will make it required, - which, - actually in the browser will in html five friendly browsers, - that is, - you'll see. - An ah little message will pop up, - indicating that this form is required now, - in order to style eyes this Or to get this to work in an older browser, - we would have to abandon required and we would probably use something like JavaScript and - CSS Teoh validate the foreman puts and visually indicate the required fields. - But here, - if we're not too picky about the way it looks, - we can use the html five required tribute here. - We also have radio inputs. - You can say input type radio, - and this is an example of what they look like. - You have these little bubbles and you can select either male or female. - So it's only one thing for most people, - at least you're probably not gonna system will be able to select both in this situation now - that we're discriminating. - Of course, - in this situation, - we are probably going to select one or the other, - right? - So what we want to do here for this radio button is we want to make sure that they have the - same name. - So here's to radio buttons. - They both have the same name of sex. - But this one has a value of male, - and this one has a value of female like that. - So if I click on male, - then this parameter or this this variable name sex will store the value of male. - And if I click female, - it will override that. - So this way, - this name here will only be either equal to male or female. - That's the only possibility using a radio button. - So and this would be indicated by when you click this. - It'll light up blue inside that little radio box. - We also have check box inputs. - So, - as you can see, - we can say input type check box. - And we gave it the name here. - Um and we have different values. - So we could say, - um, - you can check a box that says I have a bike or you can check a box that says I have a car - so pretty straightforward. - You give it a value and you give it a name and make sure it has a type of check box, - and then you can check those boxes off on a form. - Um, - if for some reason you wanted it to be automatically checked, - for example, - sometimes sneaky people will create forms that have a little box at the bottom that's - already checked for you. - That says, - Sign up for my newsletter or agree to receive promotional things to your email, - something like that. - So if you wanted to, - for whatever reason, - you wanted to make this box checked automatically much in the same way that we use the - required attribute at the end here. - You can also write the word checked as the last thing before this greater than symbol or - this closing angle bracket here, - and that will make the check box automatically checked. - When the user first visits the form, - we also commit drop down menu select menus, - and that's using the select element. - Ah, - so this one here we give it a name and then nested inside of this select element. - We have all the different options, - so you would see a little bar like this and you would click on it And then when this opens - up, - you would be able to see, - um, - small, - medium and large, - and you would have to select a size there. - So the way we make small selected initially as you can write the words selected there, - just like the word checked for checking the check box automatically in the word required to - require any form field, - you can just say selected if you want small to be selected automatically, - so that will be the default in that situation. - Text area is useful for when you have to put in sort of multiple lines of text or a - paragraph of information. - If you want someone to really be able to speak their mind, - um, - or, - you know, - leave a comment, - some type of feedback that's gonna be multi line. - You're definitely gonna want to use a text area instead of a text input. - So this just gets a name, - and whatever people type in here becomes the value. - It's pretty straightforward. - So I frames is the next thing we're going to talk about. - We're gonna insert a Google Maps I frame on our contact page to show where our shoe company - is located. - I frames are also used for, - sometimes embedding videos. - Essentially, - any time you want to load some HTML content from some other place into a small frame on - your Web page, - you can use an eye frank. - So I frame stands for inner frame, - and that's exactly what it is. - It's a frame inside of your HTML page. - It's kind of like a window looking into some other HTML content. - So we're grabbing some H some code on Google's website, - and we're loading it into a small frame on our particular Web page. - So this is an example of an eye frame so you can use I frames toe linked to other pages in - your site. - This is an example of, - ah, - just linking to another page within our own site. - You can also link I frames to other people's content. - So some other you Earl using an absolutely girl like http colon slash, - slash etcetera, - and we can give this a width and height. - Um, - and you can also specify information about whether or not scroll bars appear. - If the content doesn't fit within the size of your frame, - let's go ahead and move on now to the next exercise 11. Tables: - for this next exercise, - we're going to be adding some additional content into our page layouts. - You can see here that for this starter code for 1.2 tables forms and I frames. - What I've done is I've added it's a little bit extra additional text and I've also gone - into some of the pages and also added some images in there now. - So feel free. - Teoh, - look over the starter code and see some of the things I have added. - There's some contact information down here and some links, - Um, - and some new images. - So what we want to do for this specific exercises, - we're gonna go into the pricing page and we're gonna add a table. - That's gonna be ah price chart. - And we're also going to go into the contact page and we're going to add a contact form. - And we're also going to embed Google Maps location based on using an eye frame. - Okay, - So to get started, - you've downloaded the code and unzipped it, - and you brought it up into sublime text. - I just dragged the folder in here and you can see the five pages we built for the last - exercise and first thing we're gonna do is we're going to go into the pricing dot html page - . - Um, - and you can also see that I've added some some new comments here in the code. - So, - for example, - before we have this heading here in the links and I've gone ahead and surrounded this with - a comment that says that this is the beginning of a header section on the page and this is - the end of a header. - So this is going to eventually be a bar at the top of our layout that will have the name of - the company and the navigation toe link between all the pages. - So before we learn about building layouts, - I thought I'd be good Teoh kind of show you guys where where we're headed by just creating - some basic comments to surround things. - So this lets me know here that I'm gonna be putting in a table right here in this price - chart section. - Okay, - So as in the slides, - we learned that the table element is used to specify a table. - That and then we can go inside of there, - and I'm gonna indebted to show where nesting and let's build a few rows. - I'm gonna build a table row here and let's build another table road just below that one. - And it looks like for this example, - we don't really have to get too carried away. - But I think I'll build three or four. - We'll make it four table rose. - So I can actually copy and paste this here like that. - There's my four table rose one here to three and four. - Okay, - so far, - so good inside of here. - We're gonna have a couple of different columns. - This 1st 1 we're going, - Teoh, - create a column that will hold the brand name of the shoe. - Um, - so I'm gonna use th which is table header just for this first row on, - we're going to see that here is a column called Brand. - Um, - I'm gonna make another column next to that called pricing. - They'll have the price of the shoe. - Oh, - let's see. - Will make another one here called tax tax. - All right. - And will make another one here to say whether it's in stock or not. - I'll just write in stock like that, - and I'll close that one out. - Now, - if these air easier to see, - um, - if it's easier to understand side by side that these Air columns you can write it this way - . - A lot of times people will put each of these on their own line because then it's a little - bit easier to see um, - without having to scroll sideways. - Quite a Sfar. - But I tend to put them like this. - It at least when I'm teaching it. - It helps me to understand that this is a row, - and this is a column because it's beside this column. - But you can also, - As I said, - you can do line returns and it'll display properly as well. - Omelets e So we hav brands pricing tax in stock. - And let's go ahead and just do one more Will do order i d. - So I'll make a heading here and we'll say order, - I D. - Says would be like an I d. - Number you would use to order shoes, - I suppose. - And, - um, - let's make these guys using the T d tag so we only use th for the 1st 1 which is the header - . - Um, - so this first column would be underneath brand right here. - We can turn off word wrap, - so quarter i d. - Goes out of there. - So this would be the first column under Brand. - And I'll have to make up a funky brand name. - Let's say, - um, - Fink Erstein is a brand name there. - And we could add another TV. - This one would be, - um, - don't forget to close it out. - This one here between the opening closing tag would be the price. - Um, - so these air quite expensive will make them $97.18. - And for tax will say that the tax is on a sliding scale of, - um, - 15 cents Teoh 30 cents like that. - And the next thing we have is whether or not it's in stock. - So we could say yes, - it is in stock. - Um, - well, - just put a why. - And then the last thing it looks like we have here is something called order I d. - All right. - And this order I d will just make up number. - I'm gonna say 11. - 70 is its order. - I d. - Number. - Excellent. - Now, - um, - I could just copy this and pasted below, - and I could just change the information to speed this up here. - I'll just highlight that and we can come down below and paste and I'll paste this again, - and then I just quickly going in change these values here, - um, - sees the next brand will make this guy called Dolby. - Hopes will be and Washington, - and we'll change the price here. - All right. - And this one will be 15 to just change the tax year to 15 to 32 cents. - Um, - are these guys in stock? - Um, - sure. - Why not those Aaron stock Also, - And then we'll change the order number here on the end, - and we'll just go down and make one more product throw. - Okay? - Warby, - Brixton. - And these This particular brand cost $111 and 42 cents. - I haven't been shoot shoe shopping in a while, - so I'm not sure how much she was cost anymore. - All right, - well, - make this one the same and will say this one's not in stock there to popular will say no. - And then, - um, - for its particular number will just make something up. - Will say 11. - 78 A. - Okay, - Perfect. - So I'll go ahead and save this, - and we haven't used any CSS yet. - We're not going to style this table quite yet. - We will do that in a later exercise, - so we're just gonna see the raw data, - but it should still be organized into rows and columns. - We can save and come back here to our browser and let's go ahead and navigates that page. - That's the pricing page, - and there you can see my table. - So this will look a lot prettier when we when we give these some colors, - each of these cells a different color and add some borders and things and spacing around it - . - But for now, - hopefully this gives you an idea of how to organize information you can see here. - The word brand, - which is a heading, - is centered, - but all of the TD text is by default. - It's some over on the left hand side of the cell, - but it is still organizing these into equal columns like that and Rose. - So this is four rows. - 1234 and 12345 columns. - Let's go ahead and look at the code again, - just for a moment to absorb all of that. - All right, 12. Iframes: - so moving on. - The next thing that we want to look at is we want to go to the contact page and we want to - go into the contact page here, - and we want to add two things. - We're gonna add a map in a form. - We'll go ahead and start off with the Thea embedded Google maps using an eye frame, - something to go inside here where it says in between, - you know, - map and end map on my code. - It is online. - 24 here should be for years as well. - And first thing I want to do is go off to to Google and grab a map so I can go to maps dot - google dot com and let's type in the the address of our company. - Could be anywhere. - Um, - let's say, - um, - well, - we'll say, - Ah, - Hoboken about that Hoboken, - New Jersey, - and probably for your business, - you would put in an actual address. - I'm just gonna put in this place and weaken, - basically zoom in to make this look like whatever we want here. - I'll zoom in a little closer and then I'll center this little A here that has this flag so - normally you would find your business, - and then you would select it, - Okay. - And then the next thing we want to do is we want to be able Teoh, - capture this information and embedded eso at least at the time of filming this, - um, - Google has a link here in the upper left hand corner. - And if you click that link, - the first thing it does is it tries to give you your a link you can link to on the top here - . - If you look down here in the bottom section, - it says paste html to embed in a website, - and they give you an eye frame here. - If you'd like to customise it and adjust the settings of this I frame, - your best bet is to click this link here that says customizing preview, - embedded map and that will pop up a little window like this. - And you can see here that you can select small, - medium, - large, - or you can put in a specific custom with and heights. - Um, - so this is fine. - We'll just leave the defaults here, - which is, - um, - medium, - which is 4 25 by 3 50 That's perfectly fine for the width and height for now. - And what we what will be doing later on is when we start getting into our responsively outs - for different devices, - we're gonna actually change the width of this, - depending on the device. - So for now, - we just go ahead and use this default setting here. - You can also switch between satellite view and Earth view and terrain view. - I'm gonna go ahead and select terrain view because I like that. - Why not? - And then if we come down here, - you can see there's code that you can copy and paste down in this section here so I can - highlight all of this. - It's quite a lot, - actually. - Um, - all this code all the way from here up to here, - and then I'll copy it. - I'll dio command see on Mac to copy or control see on windows. - And then I'm gonna come back in here, - and I can just paste this and here I'm gonna do command V on Mac, - which is, - of course, - control V on windows and paste that bad boy in there. - So that throws the I frame in, - and we can save this and let's go back to the browser and check that out and see if we had - any luck. - It's that guy. - So if I did this correctly, - I should see that map pop up. - Let's come back in here and go to the contact page, - and there it is awesome, - so I can show the location. - People can click this and move this around. - They can select directions. - They can use these tools to zoom in and zoom out and move about the map. - You can also click a link that that appears below. - This is view larger map, - which will take them into Google maps. - Okay, - so many sites give you the ability to use I frames to embed content. - Other examples are YouTube. - You can embed YouTube videos via, - and I frame just by copying and pasting the code. - They provide video as well as another good site for grabbing the video content, - pasting it into your site. - Um, - and there's all sorts of widgets for Twitter and foursquare in all sorts of social sites. - Okay, - so let's jump back to the code now. 13. Forms: - Okay, - so next we're going to create a contact form and you can see I've already created some - comments in the code here to show where that goes. - So go right in between those two comments online, - 30 there, - and we'll start off with our form element, - which is an opening and closing form tag like so Now, - inside the opening form tag, - we have to have two attributes. - We have to specify our method, - which is going to be post. - And the next thing is the action, - which is the file that is receiving whatever submitted in the form right now, - I'm just gonna put the hashtag or the pound symbol in there. - That's just shifting the number three. - This is just meant to be a placeholder. - You could even really leave it blank if you like. - Um, - so later on in a in a future exercise, - we're going to point this toward a specific file on the back end that's gonna actually - process this form and send a email to the desired person. - So in this case, - we're just kind of mapping out only the front end. - We're just doing the HTML involved in getting this form up and running. - So for now, - we don't really have to be concerned about the action. - We're just gonna leave this, - um, - as a sort of Ah, - placeholder. - Okay, - so inside of this form here, - I'd like to put some information I'd like to create a couple inputs, - Um, - so people can put in their name, - their email, - their phone number, - and also a brief message to me, - and then click the submit button. - So I would like to put it in put here they can type into, - and I'm gonna give this a type of text because I want them to put some alphabetical - characters into it. - I want them to be able to type their name here. - So it's important that I also give this in name so that when this when the form is - submitted, - it can store that information into some type of name. - Um, - and although it sounds redundant, - I'm actually gonna call it name because that's what they're writing their I'm giving this - input a name of name. - Um, - And the reason why is this is their This is their user name. - This is the name of the person who's sending email, - actually. - Is a better way of describing that. - And this one, - we're gonna also give placeholder text. - Let's say placeholder, - and we're gonna say, - um, - your name. - Well, - say your name. - Right? - So they know their name goes there. - Um, - how do we make this required? - That's right. - We say required we write the word required at the end there like that. - I think I'll take off word wrapping. - Just scroll over a tiny bit like that. - Okay. - And then we'll go down to the next line and let's create another input, - and we're gonna give this one a type of email. - Okay, - So, - um, - type of email is pretty useful when you're actually trying to get the person's email. - And the reason why is that in html five compatible browsers? - It will validate if it's actually an email address or not, - and it will prevent it from submitting. - If somebody type something in there that doesn't resemble an email address of some kind. - All right, - And maybe, - you know, - maybe email should be required to because we want to use this is like a contact mailer. - And how are we going to know who to message back Unless they're able to put that in? - All right, - let's do another input here. - And this one, - we're gonna do a different type. - Will say this one is a type of tell which brings up the No, - the numeric pad on different devices. - When you click inside this input, - it should bring up the numeric pad by saying type telephone, - and we'll give this guy a name also and to associate it with and we'll say, - phone is how we were worried. - That and then we'll say placeholder and for place older here will say phone, - And we'll also mentioned to them in the placeholder that this is optional. - They don't really have to tell us this unless they want to. - Okay, - and let's see. - So actually, - that's it. - After we have name phone, - email and then after that, - we want them to be able to put in their message. - So what I'll do is all create a text area like that's using the opening and closing text - area tag like so and then inside of this text area. - I'm going to tell it how tall to be. - I'll say it should be at least 10 rows of text. - You know you could hit return 10 times 10 rows of type will fit before we get a scroll bar - to appear, - Um, - and we'll give this guy and name also will say name equals message. - All right, - And then, - lastly, - we will add in an input with a type of submit and that will give us our submit button. - And in order to label the button so we can read some text on it will write the word send on - the button like that, - and that should be good to go. - Let's give this a save and let's come back to the browser and refresh Awesome. - And here we have the I frame map and then down below the form we just created. - So if I zoom in on this year, - you can see it's It's not stylized yet. - Um, - we're gonna beautify this and make it look lovely later, - using CSS. - But for now, - it's just kind of this generic like, - horizontally stacked form so we can click inside of here, - and we can type a name. - My name is Bob. - I can click inside email. - You can see the placeholder text there would disappear when I type, - and we can say my email is bob at bob dot com. - The phone numbers optional, - so I don't have to type that. - If I wanted to, - it would be something like this, - I guess. - And then I can type a message like Hello? - Something like that. - Um, - now, - some of these fields a required, - for example, - if I don't type in a name and I try and click send it says, - please fill out this field. - So this is that html five friendly required attribute that we placed inside there is - telling me I have to fill this out before will submit. - And again, - if you want to be able to stylized this a little more, - um, - you're gonna probably end up using something like JavaScript or J coury plug into stylized - these forms, - which we won't go over in this class, - but perhaps in a future class. - Okay, - so here we have name will fill that out again. - Let's do this one which this one has two things going for its validation. - Number one we have required. - So if we don't type anything and it should say it's required if we also put in an email - address, - that doesn't make sense. - Like if I put in like, - um, - fake out fake out sucka. - And then we try and send this. - It says, - Please enter an email address. - So we have to put something like bob at bob dot com. - I guess you can kind of still fake it, - but it's a little more work. - And then when we submit, - it would post this information in the form to the specific file that we list in the action - . - Attribute. - Okay, - so in this case, - we just put a pound symbol is a placeholder. - So when I click send, - it actually just refreshes the page. - Nothing really happens there. - But as I said a little bit later on, - in a future exercise, - we're going to all at least give you guys some back end to make this function. - So next you're gonna want to move on to the next code challenge and implement these new - elements that you've learned into your new site. 14. Video: - Hi, - guys. - This is Exercise 2.1, - and I've already downloaded the files here The source code, - and you'll notice that if you look inside the folder that there's a few extra things in - here that didn't exist before. - So we still have the same five HTML pages in our Images folder. - But some new things are the CSS folder now. - We're not going to do a whole lot with CSS in this exercise. - In the next exercise will be learning the fundamentals of CSS and how it works in this - exercise. - We're just gonna be making use of a pre written CSS script that's going to help our HTML - five elements work everywhere. - So we'll learn a bit more about this in an upcoming exercises. - So we're also going to imbed a video in this exercise. - So I've also provide provided for you a video folder that has a recording. - It looks like this of the artist Larry Hale playing a song, - Blue Shoes. - So we have both formats here. - We have an MP four file, - and we also have an O. - G. - V file. - So this should work in all the different browsers. - All right, - so to get started. - We can drag those files here into sublime text, - which you can see I've already done. - And I'm gonna double click on the index dot html page. - This is the only page we're going to need to work on that we're gonna be working in for - this exercise. - So to start off with, - let's go ahead and go down to the section of the page where we like to add our video and - I'm gonna go down here Teoh Line 44 in the artist's corner section and we're gonna go ahead - and start out by adding the opening video tag and I'll add the closing video tag there as - well. - Now the opening video tag. - It can actually accept some special attribute names. - So to pass in an option, - you can say things like controls. - Um, - and you can just leave it as a video. - But if you say controls like this, - then what happens is when the page loads, - it will automatically make the default. - Video controls will be visible as opposed to the controls being hidden. - Um, - some other options that you could pass in here is there things like auto play, - For example, - you can specify whether you want it to auto play or not. - And there's also loop. - You can turn on looping by saying Loop for this particular video. - I don't want it toe loop. - I only wanted to play once on, - and they would have to click play again if they wanted to play a second time. - And in terms of auto play, - I'm not a big fan of auto play because sometimes it catches users off guard if they go to - your page and they hear video playing somewhere and they're not quite sure where the video - is. - So I'm gonna go ahead and let the user find the video and click the play button themselves - . - If they're interested in watching it. - I think I will leave controls in there because I want to make sure my controls are always - visible. - Okay, - that's a good start. - So the next thing we need to do is we need to link to our source video files, - and you could see that I created the video folders I mentioned before and inside that - folder have two files Blue shoes and P four and blue shoes dot gv, - so I'll just go ahead and start off by creating the source element there, - and we'll use the SRC Attribute two point toward the specific location of the file. - So in this case, - here I am on the index dot html page and I have to tell the browser exactly where this - video file exists. - So remember when we were linking two images, - we had to tell the browser a browser. - I know we're on the index page, - and I want you to go inside the images folder and display a particular image. - Same thing with the videos, - the videos air in their own folder. - So I have to tell the browser first go into the video folder by saying video slash like - that. - And then I'm gonna tell it to play blue underscore shoes dot mp four just like that. - And we'll also specify the type Videophile here is video slash mp four. - Okay, - perfect. - So this is gonna work for all my safari devices, - right? - Like, - uh, - Mac computers, - iPads, - iPhones and Internet Explorer is gonna be taken care of with this first source tag. - All right, - So for other browsers like Firefox, - chrome, - etcetera, - I'm gonna need to link to that other video format. - So the other one is called video slash blue underscore shoes dot org v and the The file - type here is video slash o. - G is the name of the Kodak there. - Okay, - so the reason why the Kodak is called Ogi Theo ra and um o g has Codex for this format can - be both audio or video. - Um, - so oftentimes, - though, - for the audio extension, - you'll see oh dot org. - And, - um, - occasionally I'll see a video with this file extension. - But most of the time, - people named the video extension as dot gv hence why this is different here. - This is slash O g and the video files. - 00 gv. - I thought I would mention that in case you guys were confused about that. - Okay, - so here's where the fall back solution comes into play. - So for older browsers that air not supporting the video elements um, - I could embed some flash. - I could download a free flash video player if I wanted to. - And put that here. - I think what I'm going to do is simply write something here. - And this this is only going to I'm gonna write a message to the user here. - And this message is only going to appear if for some reason, - the sore spot one of these source files doesn't load. - So in other words, - if they can't play the video, - they're going to see this message. - So I'm just gonna say, - um, - that their browser doesn't support HTML five video period and will be as polite as we can, - so we'll say please upgrade your browser period. - Okay, - we can even be a little bit nicer, - and we can actually give them a link to where they can upgrade their browser. - So let's go ahead and wrap a link around this text here that says, - Upgrade your browser so that when they click on the upgrade your browser tax, - that will take them to ah, - friendly website. - That's going to let them download like a newer version of Internet Explorer or a newer - version of Firefox or safari, - if that's what they need. - So as you guys remember, - we use the A tag to create a link. - So if I surround this guy like this, - I can make the opening and closing a tag around the text that I want to be. - The link, - which is upgrade your browser and then inside the opening a tag. - I can specify where it links to, - so I'll go ahead and say, - um H ref, - And there's a really great site I like to use, - which is at http colon slash, - slash and it's called. - It's pretty easy to remember. - It's called browse happy dot com, - and you can see where this would take them. - Let me copy this and through this into my browser real quick. - We'll just go ahead and pace that. - So browse happy dot com takes you to this page where you can get to the newest version of - any browser that you're looking for and you can see it always shows the latest version - number down here. - Okay, - so people can choose, - you know, - a particular browser if there comfortable with it. - So as opposed to linking to flash, - um, - we're gonna go ahead and just give them access to upgrading their browser, - which hopefully they'll do. - Okay, - um, - let's also add one Last thing is, - I don't want them to leave my website. - I want to keep my website tab open. - So by saying underscore Blank. - You remember that this attribute target and a value of Underscore Blank will make it so - that when they click this link, - it will open up a new browser window. - So I go ahead and save that. - All right, - so let's let's test this guy out in the browser. - Then I can bring this code up here and we'll just drag and drop this guy into chrome. - So we're on the index page here. - I'll just throw that in there. - Cool. - All right, - so here is, - um, - my heading my images. - And down here, - if I scroll down, - this is actually my artist section on the page and you can see the browser controls are - showing and I can click play Awesome. - Thanks, - Larry. - So that's Larry playing his guitar, - and it turns out it worked. - Good job. - And this I can assure you this is gonna work in every different browser. - You can go ahead and test it. - This guy will work on all the different devices. - Okay, - We'll just move that off the side for a sec, - will come jump back into the code. - So that is how you would embed video. - And of course, - if you're embedding audio would be the same process except you would use the audio tag - instead of video and for the source file. - Of course, - you would be linking to a, - uh, - an audio file like an MP three and an O G. - Something like that. - And I'm just in the same way that there are JavaScript solutions for for making a single - video file work and all the different browsers. - There's also job Js players, - JavaScript players for audio elements as well, - so you may be interested to check that out. 15. Prep for HTML5: - Okay. - So for the next part of the exercise, - let's go ahead and include some HTML five semantic tags into our layout. - So the first step is to prep our document for older browsers. - So even though you know, - as we looked at in the slides, - most modern browsers support HTML five semantic tags, - however, - certain older versions of, - um Firefox safari and chrome and older versions of Internet Explorer like Internet Explorer - eight and below. - Um, - I don't have any support. - They're actually created before HTML five was created so they don't have support for those - semantic tags now. - It's actually pretty painless and simple to add that support. - So what we can do is we can go into the head section here, - and the first thing we're gonna do is we're going to add support for fire, - Fox, - chrome and Safari. - And we're gonna do that by linking to a CSS file, - and we're gonna learn a lot more about, - um, - CSS in upcoming exercises. - But for now, - we're just going to simply link to some pre written CSS code that will help these elements - . - He's html five. - Semantic elements display properly in all the different browsers, - so The first thing I want to do is we want to create a link here at the top of the page, - and this link is going to point toward the normalized dot CSS file that I've included for - you. - So I have to add a couple attributes here. - The 1st 1 I want to add is called R E L. - Which stands for relation. - This tells this, - tells the browser the type of link, - the relationship of the link, - and we're gonna tell it that this is a style sheet is the type of link, - and we also have to point it toward a specific location. - So we use a draft two point this toward the specific location of the file. - Now, - I gave you a CSS folders. - We have to tell the browser to go into the CSS folder because after all, - we're on the index page here. - So we have to say, - Hey, - browser, - go from the page we're on, - which is Index, - go into the CSS folder like this and load this file which is called normalize dot CSS. - Okay, - so if we were to look at normalized that CSS, - there's actually a whole mess of coding here whole lot of code that involves using CSS - styling and all of these CSS styles. - Their main purpose is to make to make text and elements display the same in all the - different browsers. - And we'll talk a bit more about that later when we cover CSS. - But the main thing that we want to using this file is right at the top of the page. - Here it starts online. - 10. - So don't worry if you don't understand all of the CSS code yet, - we're gonna definitely come back to this at a later date, - and we're gonna describe in detail how all of this all of this works. - But there's two main important sections up here. - Um, - and this first part here is basically correcting the way things display in older browsers. - So this is a list of all the the common HTML five semantic tags that you'll use from time - to time for for layout. - And we have to tell the browser to display these in a particular way. - We're gonna go into more detail later about the different ways of displaying elements. - But essentially display Block tells the browser that these elements should display ah - vertical one on top of the other and that they shouldn't be able to display side by side. - This will give them physical space and make them display like a box, - basically essentially like a block on the page where they won't be able to fit side by side - . - When you put one on a particular line that will take up all of the line. - And we also have your correction for the audio canvas and video elements are video element - here will display in line block, - which means that it will have some characteristics of a block element, - but it will actually be able to display side by side with elements. - Okay, - so don't worry about don't worry about that too much. - We're gonna come back when we discuss box model, - and we'll explain in detail in more detail what display means and how this works. - Okay, - so I don't want to really touch CSS too much at this point. - All is, - you really have to understand is that by linking to this pre built CSS file normalized dot - CSS, - this will allow Firefox safari and chrome older versions of those browsers to display these - these HTML semantic tags correctly Okay, - so that takes care of everyone. - Except for Internet Explorer. - Okay, - So I mentioned in a, - uh I guess in the previous slides that for Internet Explorer, - we can include a JavaScript file that will allow HTML five elements toe work in in an older - version of IE. - So Internet Explorer 87 and six and below do not support html five elements. - So we have to basically tell the browser. - Hey, - browser. - If you happen to be Internet Explorer, - please link to the script. - Okay, - so let's go out an ad in a script tag so we can say script. - And this is the tag that we will use Toe link to JavaScript files has an opening and - closing tag like that. - And here you're actually free to write JavaScript. - If you want. - In this section, - we're actually gonna be using the script tag toe link to an external javascript file. - And we used the SRC The source attribute two point toward that. - Um, - no, - this kind of this kind of link, - You know, - eventually, - you may memorize this, - but more often than you know, - more likely you're going to be linking to it via Google. - So if you go to Google and you type in HTML five XM, - it's going to come up with a link like this, - which is that I happen to know is at http colon slash slash html five XM dot google code - dot com slash SV and slash trunk slash html five dot Js I know that's, - Ah, - that's pretty much a mouthful, - But if you linked to this, - this file here will make HTML five elements work correctly in Internet Explorer. - Okay, - in previous versions of Internet Explorer, - Internet Explorer nine and above, - do you support these elements already? - Now this one makes it work for older versions of Firefox, - chrome and Safari. - This one is on Lee for Internet Explorer eight and below. - So wouldn't it be nice if I could just tell the browser only to use this one if it were - Internet Explorer? - That way, - I'm not wasting any loading time, - so if I'm Firefox, - it won't even bother toe load this one. - That would be great, - right? - So it turns out we can actually do that because there's something called an if statement - and if conditional, - that exists in Internet Explorer. - So Internet Explorer uniquely has the ability to recognize this particular if conditional. - So the way we get other browsers to ignore this as we start off like we're writing a - comment in the code. - So we say, - you know, - like, - um ah, - less than symbol, - exclamation mark, - dash, - dash like that. - And then down here, - we would have a comment. - The comment would end like that. - Right? - Um and then what we have to do is in order for Onley Internet Explorer to process this code - here in this comment is we create a conditional using brackets so we use square brackets, - which is, - um, - it's just to the right of the letter p on your keyboard. - So you want to go just to the right of the letter p on the keyboard and you want to do open - bracket close bracket Now, - inside of these brackets, - we can write a statement and if conditional, - weaken, - Say if and we want to say Ah, - lt means less than and we're going to say if less than Internet Explorer version nine. - In other words, - if it's eight or anything below, - then we're going to do the code here. - Okay, - So the way we get this to toe work is we're going to make a exclamation mark and greater - than symbol like that. - Um and this will successfully end out the if statement here like that. - And then down here, - we just need to add another set of brackets and we'll start off by saying greater than - exclamation mark, - Open bracket, - closed bracket like that and inside of here, - we're gonna put the words And if and that will end the if statement I know this is kind of - kind of messy looking here, - but what happens is the browser comes down and if the browser is Firefox or chrome or - safari, - it seems this whole thing is a comment. - It's like this is just some comment in the code. - Just like I have a comment here that tells me this is a header and a common up here that's - telling us the specific exercise were in, - So it'll just ignore all of this now. - On the other hand, - if this is Internet Explorer eight, - um, - actually, - if its Internet any version of Internet Explorer, - it's going to read the if conditional, - it will come in and they'll say this is a comment. - There'll be like open No, - it's not a comment. - Actually, - there's brackets here, - and that's how we get the Onley Internet Explorer to read this particular section of the - page. - So it's going to say if less than Internet Explorer nine, - then it's going to run this script. - It's gonna link to that script file. - And then we say, - End if here to end out that conditional statement. - All right, - so really, - these two lines of code this linking to this normalized out CSS and I'm linking to this - JavaScript file are all we need to make HTML five elements work and even the oldest, - most ancient browsers. 16. HTML5 Semantic Elements: So now our pages ready, We can write these html five semantic tags and all the browsers are going to see them. So the 1st 1 I want to do is I want to talk about the header. So we mentioned the header goes at the top of the page here. You typically, although it doesn't have to. But this is a tag that we're gonna surround the concept with, Like, this will say open header slash header. So now that I've surrounded this section here of code, I'm gonna in den. So I'll highlight this code here and I'll show you guys a short cut here. So if you highlight a section of code if you type the tab key, it will indent that whole, that whole section for you. You can also use command, uh, open bracket and close bracket to move this type around on Mac. Or you can use control open bracket and close bracket on windows. You can also go to each line and just hit the tab key if you want. So just to show nesting, I like to invent whenever I place some elements inside of another one just to show the relationship that it's inside of this other one. Okay, that's a good start. So we just told the browser that this h one and H two and these these links is navigation links that these air all inside of the head section. I'm gonna go ahead and turn word wrap on, so that's all easier to see. Okay, this is just my navigation wrapping their All right. So, um, now we've told this this is the header. Let's look at some other elements. We can ah can go in here. And we can specify that these links are the main navigation of the site. By saying knave right here and we can add a closing knave link right there. And I can go inside here and in debt that navigation is indented. And so now we have the head section and inside the head, I have my main navigation. So this serves a few purposes. It's semantically telling the browser and devices that air that air. Exploring this content that that this specific section of the page is important that this is the main identify air for the content of this site. So H ones inside of the header are gonna have the most importance. Those key terms you put in there and because it doesn't have search engines, know that this is the section of the page that they can find links to other pages and then can go and explore the content of other pages. Also, additionally, it actually aesthetically or physically creates a box. So now that we have these boxes like Header and Knave, that's how I'm able Teoh, Select the Knave and I can use CSS to tell the knave to be a background color of green. But then I want the header to have a background color of blue or something like that. So the way we're able to position content and style it in separate boxes or containers is by using these elements. Cut. Um, let's also look at another HTML element called H Group. So H Group is useful when you have more than one heading and they're kind of their links together. They're meant to be semantically part of the same message or have the same meaning. So, basically like the way you would read this is you'd read it a Z H W shoes. All is like one word. But if I want this text to be larger and have more importance. Is the H w than the word shoes? I can put it in its higher level heading. So this guy's in each one. This is an H two. However semantically when you read this you read It is kind of one thing. CHW shoes. So H group tells a browser that this is a grouping of headings. Okay, so there we have the header h group with the name of the company, and then we have our navigation. That takes us to all the pages. Okay, on this is really easy to spot these tags air all these, You know, these elements air unique so we can spot them anywhere on the page. If you're scrolling up and down, you can say, Oh, hey, there's the header. Okay, let's go down to the next section. This one's called the sale section. So this is a main section of the page semantically everything in this page relates to a sale, so I'm gonna use the the section elements which will make a box. This will surround this content with a box and suggest that it's a unique section of the page just like that. So I just indented again by highlighting, and I did. Ah commands closed bracket, the square bracket key. That's just two keys to the right of the letter p on your keyboard. On and again, you can also surround and hit the tab key like that to move it over. All right, um, let's look at another semantic elements called figure so we can look at figure and fig. Caption figure is a way of surrounding something and suggesting that it's, ah, figure and informational figure on the page. So we'll go ahead and use this tag here called Figure and will come down here and we'll close that out and usually this around some type of media, like if it's a diagram or a picture of something that relates to the content below. You can tagged this with figure, okay? And this also adds a little box around the image in this case, around the image, so that we could style it in a specific way if we wanted to. Another nice thing about this is that this has a friend tag that you can put inside of it. Um, which is called fig caption like so. So fig caption allows you to add a caption for the image below and weaken style. These and semantically it suggests that that this caption is related to the image inside of this figure. So they go together normally for captions. You put something like, um, what's happening in the image? Explicit details about the image or a title, Sometimes a title and author. Um, I don't really have a specific Tytler author to put here. I'm just gonna go ahead and write that this is a, uh, a royalty free image from www dot s xy dot h u. So this is a free stock photography site that I got this image from here so you could see the structure here is figure, and then we can have an image or a video or something inside of it. And then we have a figure caption caption for that image, and then we close out that figure. Okay? We could also add a section here to the artist corner. This is another separate part of the page, and I've just placed these comments here as placeholders because we didn't previously have these sections in here, and I think I'll leave them in place as well because they make it really easy to see where different sections started. End. So highlight all these guys and in dent like that. Okay. And, um, inside here we have the video we created just a moment ago. And if I wanted to, I could also have a figure around here. Okay? And inside of here, I could also have a caption for this Will use fig caption like that slash fig caption. Let's see. And this is for the video. And it says here the artist is Larry Hale. So I actually got this from Ah, I got this video from archive dot org's under the creative Commons attribution. License. So this this video is free to use and share. Thank you, Larry, and I want to make sure that I credit him. So here in the figure caption, I can give him credit by saying that this is the song Blue shoes and I'll go ahead and put a copyright here by saying, Put the copyright symbol by saying and copy. And then we'll make this copier. And by the artist, which is Larry Hill. 2007 is actually when he copier in this and we'll add a line break like that and I'll go ahead and just say that this is licensed with the creative common's attribution 3.0 licence . What that means is that I simply have to attribute him that this is Hiss. I can't claim that this is my own work, so I have to attribute him with it. But it's free for me to share and use. Thanks, Larry. Shoutout toe Larry for that. Okay, so there's my figure, um, and my figure caption here and the ending of my figure. And then here's my heading and paragraph and this is all inside my section. This is the artist corner section that starts up here and ends down there. So now I have a neat little box around that section. I can also add a section to the news page. That's a That's a long one. I wrote a lot in there, and we'll close this out like that, and it looks like we also have a detail section, and this detail section actually has. It's broken up into three smaller parts. Um, so I have a section of links that are, um, for Well, there, isn't there not linking to anywhere. Now I just have This is a place holder, but these links will link to all these different social sites, and this will be at the bottom of the page right before the footer, which will do in a moment. We also have some links to some other shoe related. Maybe these air, like sister companies or friends of this company. So we have some links there, and we also have, like, the phone number and address, and things like that will be at the bottom of every page. So I wanted these things to be, you know, this is all really the same content. These were all site details here, but I wanted these Teoh aesthetically be in different boxes. So if you ever want to play something in a box, but it isn't, um it isn't all like the same. Excuse me? It isn't different types of content. Then you don't really need to use a section tag. So here I can just put a section around all all three of these smaller boxes. So this is a section about the details of the site and inside of this section are three smaller boxes and I'm just using the tag Div. They're too to show. This is one box. This is another box here. So Div is a tag that creates a container. And it's not an HTML five semantic tag. It's just going to give me a way to aesthetically style a box around each of these, Um, each of these parts of the details section. Okay, um, down here. Lastly, we have the footer, which has its own HTML five semantic tags. I can put that in there. That's called Footer, and we can hit tab to invent that content there. Cool. So now all of my content is surrounded with the appropriate HTML five semantic tags. I now have little boxes around each section, and this is going to make it a lot easier when it comes time to start creating the page layout and moving things around. So we're all prepped for that. I've already gone ahead and added the these tags to the rest of the other pages for you, so you can see how I've included these on the other pages as well. Okay, 17. Metadata: - So the last thing we want to do is pretty quick. - We just want to add some additional meta tags, - some metadata into the top of the head section. - So I'm gonna go down here. - It doesn't really matter where you put these as long as they're in the head section. - Um and we'll go ahead and add another meta tag here Before we used meta too. - Tell the browser the formatting of the characters on the page. - So we set them to utf eight formatted characters. - And this time we're going to give it some keywords and a description. - So to start off with will say meta name equals and will say keywords like that. - And then we'll put a space and we'll add another attribute called Content like that and - inside of content, - we're just gonna put a comma, - separated list of terms that relate to this page. - This is gonna help a search engine associate specific words or terms with this page on this - . - This could be different from page to page eso You know, - one page you might have these words on, - you know is keywords and another page, - you might have a completely different keywords So it's good to be accurate. - Toe what content exists on that page. - So we'll go and say all the terms that we think people might possibly type to find this - page. - So we'll say. - Shoes, - sandals, - slippers. - This might take some thought on your part for your own individual projects. - You'll have to think about what terms will fit. - Um, - let's see, - What else can I say? - I'll say Sneakers foot Where? - In case somebody types footwear, - Um, - they might type it differently. - Maybe they type it like that. - Um, - let's say socks and maybe some materials. - Like if they type canvas shoes or, - um, - well, - say, - like suede shoes. - Maybe they're looking for laces. - Um, - let's see. - So we'll say, - also things like warehouse and wholesale. - So you have to think about what terms are important for your project. - Um, - I think that's enough there. - I think you get the point, - okay, - and then we'll add also a description. - So the keywords, - as we said these ones are useful for helping search engines pick up on specific terms and - associating those terms with this page. - We also can add a description which is done by saying met a name, - description and contents is where we type the description. - So this is the description that will show up when people look for us in a search engine. - The search engine will list this description underneath the link when we come up in the - results. - So let's go ahead and say something. - Hopefully nothing too cheesy. - But I'm just coming up with this stuff on the fly so well say, - Ah, - you're stop for the best deals on today's sharpest footwear. - Cool. - Okay, - so there's our meta keywords and our meta description. - All right, - that's it. - I've already added this code to the other pages for you and, - um, - now things. - There's things were starting to look good, - their own track moving forward to learn CSS and to also begin toe learn page layout. - So thanks for watching. - And what you're gonna want to do now is feel free to move on to the next code challenge, - where you'll be adding your own videos and semantic tags into your website project. 18. Styling the Front-end: - Hi. - Welcome back. - This is Slides 2.2, - styling the front end CSS fundamentals. - Now, - in previous exercises and lectures, - we learned to write HTML code that provided the structure and the content for our web pages - . - Now, - for the rest of the course, - we're going to be exploring CSS, - which will then enable us to style all of that content that we've created. - So we're gonna discuss the syntax of CSS, - and then later on, - we're gonna move on to an exercise where we're going to demonstrate all of the different - CSS selectors that will allow us to select content in the page and thereby allowing us to - style it. - We're also going to explore different color values we can use to give color to these - elements. - And we're also going to discuss fund declarations we can use to style are typography. - CSS stands for cascading style sheets. - They probably named it that because CSS gives us the ability to apply a style across - multiple pages in a website. - So we have a single location where we can sort of Cascada style down onto numerous other - pages. - CSS was created is a better solution to style HTML elements in the beginning. - Once upon a time, - we used to use HTML to style html and it was really a huge burden and a lot of work. - Eso CSS steps in and gives us again a single place. - We can go to change all of the colors of all the paragraphs in the website as opposed to - having to go into each individual paragraph and change the color per element. - So it really is a huge time saver. - It's fun, - quick and easy. - In my opinion, - it has, - ah, - unique syntax separate from HTML. - So it's a completely different language than HTML. - So you kind of have to throw all the rules. - We learned about how HTML has written have to kind of go out the window when you're - focusing on CSS because it is its own unique language. - There are three distinct formats that you might see CSS appearance Onda. - We'll talk about each of those. - This is the CSS in tax and it's pretty straightforward. - You can see that it's made up of this selector here in this case, - the letter P, - which is selecting all of the P tags or all of the paragraphs we could say in our HTML - pages. - Now the following the selector We have a set of curly braces here, - an opening and a closing curly brace like that and inside the curly braces, - that's where we declare all the styles that will affect whatever we are selecting. - So inside the curly braces here live what we call declarations, - and you can have a single or multiple declarations as many as you like to style that - particular selected element. - So in this case, - you can see that we're changing the text color of all the paragraphs to black, - and this particular declaration is made up of the property color. - And then we've given that property the value. - Black and properties and values are separated by a colon, - and they always end in a semi colon. - Now the semicolon is important because that's how we tell the browser that were done - defining a value for this particular property. - So if you have ah, - Siris of declarations, - multiple declarations for this ah, - paragraph element, - then you're going to want to make sure that all of the ends of those declarations end in a - semi colon. - As I mentioned previously, - there's three distinct CSS formats and those are in line, - internal or external for for this course, - we're going to be using external CSS on, - and that's going to give us the most advantages and the least amount of hassle and trouble - as we're working on our website. - So this is really the best practice or the preferred method. - If you're building a website or a Web application, - you're gonna want to style your content using external CSS. - This means that there's a separate external CSS style sheet or a separate CSS file that's - styling all of the other HTML pages. - Now that's in contrast to these other formats in line and internal, - which we're gonna really want toe shy away from. - So you may be wondering if we're If we're recommending not to use these 1st 2 formats, - why would I teach it to you? - Well, - I think that you know, - you're probably gonna end up seeing these other formats out there in the real world when - you look another website code or if you start working on someone else's website for them, - you might encounter another site using one of these other methods of CSS. - So I think it's important that you understand what it is and you understand what the what - the pitfalls are and using these other formats so that you can choose the correct solution - for website building, - which is external. - This is an example of in line CSS. - So if you're ever looking at some HTML markup and you see that there's a style attribute - inside of one particular element inside of the value for this style attribute, - you can write CSS declarations. - In this case, - we've written the property font dashed style and giving it a value of metallic. - And what this is going to do is it's going to change the text in this paragraph and Onley - this paragraph to a talic or italicized text. - So the main disadvantage there you can probably imagine, - is that if you added this little style tag all the paragraphs you wanted to be a talents - that could add up pretty quickly. - Maybe if you have a larger website with hundreds of pages and you change your mind that you - no longer want that text to be a tallix, - it would require going into each of those different hundreds of elements in your website - layout and changing this from metallics back to normal. - So the huge disadvantage of inland sea assesses it only affects the element that you're - applying that in line CSS to now. - One place this may make sense to use is when you're using when you're creating an HTML - newsletter. - But that's really the only place you would Ah, - you would ever see this. - Where would be a good idea to have it in this format? - Next one, - we're gonna look at it's called Internal or Embedded CSS, - and you may see this appearing inside of the head section of an HTML page. - Internal CSS is made up of the style element here which has the opening and closing style - tag, - and inside of it, - you're free to write CSS selectors and declarations. - So this is just, - ah, - full of CSS statement here that's written inside of this opening and closing style tag, - and this could be internally inside of an HTML page. - Now, - the disadvantage of this is that this is only going to affect paragraphs on this single - page. - So whatever html page, - you copied this code into the head. - It would affect all the paragraphs on that page. - So what we really want, - though, - is we want to be able to, - you know, - change the color of our paragraphs from one single location. - That way, - if we have hundreds of pages on our website, - we can tell all the paragraphs color to be read from one location. - And if we change our mind, - we have a single location to go back to to tell all of the paragraphs to change to blue. - So in order to do that, - we need external CSS External CSS is ah is really the best solution for websites and Web - applications because we're creating a separate file which is in this case style dot CSS and - we're linking to that file in the head section of our HTML document. - Now, - if we were to open up that file and look inside of that style dot CSS file, - it would look something like this where we're writing a selector and then declarations to - style that selector. - So here we're telling all the paragraphs. - Teoh, - you know all the paragraphs site wide and all of the different pages of our website to have - the color black. - So if we have 100 pages on our website, - each of those 100 pages have this link code at the very top, - which tells the browser when it loads that a particular HTML page to be aware of or to - reference the CSS styles from this other file. - And it goes into that file and reads it. - And it sees something like this that tells all of those paragraphs on the whole website to - have the color black. - So this is used by linking an external CSS file to all the HTML pages that we wish to style - and the advantages. - Now you have a single location that you can make changes from. - That's going to affect elements site wide. - That's a Sfar as I'm going to go in the slides. - For this lecture, - feel free to review the full set of slides at the PdF link below the video, - and that way you can use the remaining slides. - You can look over them, - and you can use them as a review for all of the different selectors colors and text - formatting that will use in the exercise. - So we'll move on to the exercise now, - and in this next exercise we will be creating a CSS style sheet and then we will learn - various selectors we can use to style different content within our Web pages. 19. Setting up an External Style Sheet: - this is exercise 2.2 CSS fundamentals. - I've already went ahead and downloaded all the source code for this exercise, - and I brought it up here in some blind text to get started. - The first thing that we want to do is we're going to want to create an external CSS file - that we can use to style all of our other HTML Web pages from. - So let's go ahead and go up to the file drop down menu and say new file. - And then even though this is blank, - we're just gonna save it right off the bat will say file save. - And I'm gonna want to make sure that this is placed inside the CSS folder. - So you want to make sure your first in the, - um the working directory for this exercise, - which is 2.2 dash CSS dash fundamentals, - and then you want to make sure that you go inside of the CSS folder there and inside the - CSS folders where all of our external style sheets will live and we're gonna go ahead and - name that, - and I'm just gonna call this style dot CSS and click save. - So now if we come over here to the project sidebar. - We can see that inside the CSS folder here we have our to style sheets in the last exercise - , - willing to normalize dot CSS and that was setting all the browsers to default text size and - was also making html five semantic elements display correctly and things like that. - So this was some pre written CSS code I downloaded toe kind of give us a good start, - and then we're gonna We're gonna leave this one alone. - Were never gonna mess with normal eyes, - were gonna write all of our custom styles here in this style dot CSS file here. - Okay, - so now we have this style dot CSS style sheet in place. - The next thing we want to do is we want to go through to each of our HTML pages and make - sure that we tell the browser toe link back to this style sheet. - So let's go ahead and go into the main root folder there, - and I'll just open up the first page here, - which is called catalogue dot html, - and I want to go into the head section of this page and I'm just going to scroll down. - I've actually already made a space for this online 13 here. - So right underneath my link to the normalized dot CSS file, - The next thing I'm going to do is create a link to my style sheet. - Now is the the ah link tag like this toe link to external files like this and we have to - put two different attributes in here. - The 1st 1 I'm gonna put is called R E l. - A chance for relation. - And I want to say that the relation is that it's a style sheet, - that this type of link is a style sheet. - And then the next thing we want to do is we want to give it the attribute, - h, - ref, - and that will point to the location of our style sheets. - So here we're on the catalogue dot html page. - I want to tell the browser to go look inside the CSS folder for the file called style dot - CSS Great. - And then we can save that. - Now I can copy and paste this line, - and then I'm just gonna go ahead and add this line of code to all the pages on the site - that I'd like to have linked to this style sheet, - so I'll just highlight that and do a command. - See to copy be it would be a control see on Windows Command, - See on Mac. - And then we're gonna go over to the next file, - which will be contacted at HTML. - And I'm going to do Command V on Mac the Paste or Control V on Windows to paste, - and we'll save and I'll go through the index page and paste and save, - and I'll go to the pricing page and I will paste and then save the file. - And lastly, - we have the sale dot html page, - and I'll paste the link there and save as well. - So now all of our pages here each have that link to that external style sheet. - So that means that now I can begin to go into this style sheet, - and I can begin to write code that's going to style and affect all of those different pages - from a single location 20. Type Selector: - Okay, - great. - So we just created an external style sheet here, - and we can now open up that file style dot CSS and inside of it Here we can start to learn - to write some CSS code. - The very first thing that I want to teach you in CSS is to write a comment. - So if you look just in the same way that we can create comments and HTML, - we can also create comments in CSS as a means of giving ourselves a little note or a - message in the code and a comment. - CSS starts off with the slash forward slash and then the Starkey, - which is shift in the number eight. - So this right, - this is a comment, - and you have to end a comment using Star and Ford Slash. - So it's just reversed from beginning to end. - So you have slash star and then so comments and CSS they can be on a single line or they - can also be multi line. - For example, - I could hit, - return and move down to the next line. - Um, - and I'll just go ahead and say, - for example, - so these comments can span multiple lines is long as you have the starting and ending - characters correctly than anything can go in between here, - and the browser will ignore it. - Okay, - um, - let's see. - So let's write another comment to remind ourselves of the CSS syntax that we discussed in - the previous set of Slides says. - You remember CSS starts off with a selector, - and then that's followed by curly braces. - And inside those curly braces, - you're able to give some declarations, - which are made up of a property in a value. - And if you want to put multiple properties for a selector, - you can just write them like this, - and you can really write as many as you like. - That could be a short or long as they're interested in putting. - Let's end that comment there. - Okay, - So, - for example, - let's look at a selector called a type selector. - First, - we'll look a type selector. - Eso type selectors use the name of the tag to go and find that element. - So what we can do is, - let's say, - you know, - hypothetically, - we wanted to go and select all the paragraphs on our website. - We can use the letter P to go out and select all those P tags so I could write a little - comment to that extent that this selects, - Oh, - P elements inside of our page. - Um, - so let's go to change the size of the fund for each of these paragraphs. - So I can say font dash sizes the property and then is a value. - I'm gonna say 14 pixels. - In terms of sizing typography, - you can use pixels, - you can use points, - you can use percents, - and you can also use EMS cut. - So pixels is a fixed size 14 pixels is the size on on any screen? - Um, - and then we also have point system, - which you might be familiar with from different word processing programs. - However, - I like to try and avoid using points. - And the reason why is that, - um, - for example, - 12 points size in Microsoft Word may not be the same as 12 point size and fire Fox or the - same size and safari. - So, - um, - point sizing for typography, - unfortunately, - is a little different, - depending on the application that you're in. - That's why, - with pixels, - at least you know exactly what you're getting. - We also have percent, - which is like a variable amount. - So, - uh, - like, - essentially, - if I put 100% than its referring to 100% of the current size of the text. - So it's sort of in relation to the current size of the text. - In this case, - 14 pixels. - Um or, - you know, - if you hadn't previously specified how how big the the paragraph size tech should be, - then it would just be inheriting that size from the browser. - So by default, - if you don't specify the size of text and a browser, - you've already noticed that the browser just kind of makes paragraphs a certain size and - makes headings a certain size. - So 100% would would in that case, - eat, - you know, - be equivalent to whatever the browser decides is the default. - If you said 200% it would double it, - so it would make the text twice as large as it normally is. - And, - of course, - you know, - 50% would be like half the size something like that. - Okay, - we also have EMS and M is a measurement leftover from the days of typesetting, - and it's also an amount that's similar to percent in this, - in the way that it's kind of relative to the current font. - size, - for example, - one M in this case would be equal to 14 pixels. - If I said to em, - it would be the equivalent of 28 pixels if I've already specified a font size here, - Um, - and if I said you know 280.5 M or 0.5 them, - that would be the equivalent of seven pixels, - Um, - and again same as before with the percent. - If I haven't, - you know, - specified a size than this amount is going to refer one m is going to refer to whatever the - default size of the browser text is, - and then to M would double that size. - Okay, - so percents and EMS are kind of relative to whatever size the text is initially, - and points and pixels will actually change it to a fixed amount. - Points is, - you know, - sort of a number that changes from browser the browser. - So pixels would really be our preferred method for making a fixed, - um, - text size. - Okay, - um, - let's actually put in another property here. - Let's say, - aside from changing the size, - I'd also like to change the line height, - so I'll go ahead and say line, - dash height and line height is the spacing in between the lines in the paragraph. - So let's go and look a EMS for that. - So one M in this case would be equal to 14 pixels or single line spacing. - 1.5 would be the equivalent of 1.5 line spacing. - And to M would be the equivalent of double line spacing, - which would be, - in this case, - 28 pixels apart from one line of text to the other. - Let's go ahead and save it and let's check this out. - Let's just make sure this is working and we contest to make sure that our style dot CSS - page is linked correctly with all the pages saw. - Go ahead and save here and let's jump back to the browser. - And let's watch this paragraph here and see if we change the line spacing in the text size - so I'll go ahead and hit Refresh, - and there you can see it worked. - This text actually got smaller. - Apparently, - the default size that I was working with before in paragraphs was a little bit larger than - 14 pixels, - and the line spacing was also closer together. - So, - you know, - maybe I decided this is a little bit too far apart, - so I can come back in here and I could change this. - I can adjust this to will, - say 1.5 them. - We'll try 1.5 line spacing and maybe I want to make this a little bigger. - I want to say, - like 16 pixels or something like that. - So we'll save and we'll come back to Chrome and will refresh like that, - and that looks pretty good. - This is This is fairly readable. - Have the line height, - which is the spacing between the bottom of this d and the bottom of this You here that - looks pretty good. - 1.5 lines and I like the size of the characters to it is pretty decent to see when resumed - out all the way. - Okay, - if you're Texas isn't responding or looking the same as it is on my screen, - you can go up to view in the browser, - and you can double check to make sure that the text is set to actual size because browsers - you can actually adjust, - uh, - screen size by zooming in, - zooming out. - We'll make sure we're just a zero here. - Actual size in other words, - resumed out all the way. - Okay, - good. - So let's come back here and let's let's actually experiment by creating, - um, - another. - Let's actually create yet another type selector here. - So I'm gonna go out and create one called fig caption, - and this is going to select all the fig caption elements. - In other words, - select all fig caption elements like that. - Okay, - so for fig caption, - we can we can explore some other ways of adjusting type. - Let's look at another property called font. - Wait, - and that's using fund dash weight, - and this could be set to normal. - It could also be set too bold on, - and it can also be set to Boulder like that, - which is the most bold. - We also have a series of numbers that range from 100 2 900 that you can use to adjust the - thickness or the weight of the text on and those those go in in increments of 100. - So, - for example, - 100 would be the lightest 200 would be slightly sticker 300 400 like that all the way up to - 900. - I believe so in this case, - we don't want the text to be bold. - We're actually gonna use normal, - which in this case, - is the default. - So we really wouldn't have to specify for this particular element unless we're changing it - to, - like, - bold or something like that. - But first, - we'll just look at it, - um, - as normal size. - Wait. - And then let's also change the font size here, - which we saw in the previous selector. - So we'll say font dash size, - and we'll set it to 12 pixels. - Okay. - And, - uh, - let's see, - what else would we like to do? - Let's also set line. - Height will say lying dash height. - And we'll set that guy to also say Mazza paragraphs will say 1.5 AM so I could specify this - also in pixels per cent, - ems or points? - Uh, - let's see. - So line height. - Let's also look at changing the the typography. - So we're gonna use font dash family like that and we're gonna set this guy to something - different, - Will say we want it to be Georgia. - Okay, - Now, - the way find family works is you're free to choose common fonts. - First, - we're gonna look at one solution which is using Web safe sponsor fonts that are commonly - found on user's computers. - And then, - later on, - we're going to look at using a specialized Web fund or a fund that people might not have - and will do that by loading it, - loading that fund from the Web so that even if the person doesn't have that fun on their - computer, - they'll still be able to see it. - It will be using CSS three font face method to achieve that. - But to start off with, - let's just use a font that safe and most people have on their computer. - So the way this works is the browser will come down here. - And if they have this font Georgia on their computer, - it will go ahead and change the type to that. - Now you may be wondering, - Well, - what if they do not have that phone on their computer? - Well, - if they don't have it, - we can put a comma, - and we can specify other backup solutions. - And typically people choose 2 to 3 backup solutions. - So, - for example, - let's say they don't have Georgia, - but they have times. - Or perhaps they have something like this. - Times New Roman like that. - Okay, - So, - as a back up we can put the first fund we want and then a comma, - and then we can put another fund. - So if it will first try and see if they have George, - If they don't have Georgia, - it's gonna then check to see if they have times New Roman. - You may have noticed that times New Roman is in quotes. - Sometimes you'll see these and single quotes like this, - like like so Or you may see it in double quotes the way it was initially like that. - Whenever you see quotes either single or double in CSS around a font family like this, - that's because there's a space here in the file name. - So Georgia doesn't have this spot this font. - Georgia does not have a space in the name of the font, - but times New Roman does have a space in the name of the fund. - So any time you have a font that has any strange characters in it, - like at symbols, - exclamation marks or, - you know, - perhaps non Latin characters like Chinese characters or Japanese characters or something - like that, - then your best bet the safest thing to do is put a quote around it, - either single or double quotes to surround it. - Um, - so in this case, - we just have double quotes time, - space, - new space, - Roman. - And because this one doesn't have any any specialized characters, - but it does have a space in the file name. - So we put it in quotes just like that. - And lastly, - as a fullback solution, - will just tell the browser to use any generic Sarah Font writing the word serif there. 21. Color Systems: - um OK, - so let's also set the color. - So here's another property. - If it's useful to know, - is to change the text color, - you simply use the property color. - Okay. - And for this 1st 1 we're gonna set it to a gray color so we could say gray like that, - which is a color name. - So these are the different types of color systems you can use. - Here you can use one of 16 color names and feel free to refer to the slides to see a list - of those 16 color names aside from color names. - You can also specify Hexi decimal colors, - and you can also specify RGB values. - And in CSS three, - it's rgb A with the inclusion of transparency or Alfa there. - Okay, - so we could say gray. - We could also use a hexi decimal color value which Hexi decimal color values used the they - set off with the hashtag or the pound symbol like that. - Okay, - so we start off with the with the hashtag symbol and then after that, - we're going to put in numbers and letters so we can use number zero through nine and - letters a through F to represent a range of colors of thousands of colors available through - the Hexi Decimal color system. - So, - for example, - in inaccessible color system, - the 1st 2 characters represents the color red. - So the 1st 2 pairs of characters represent red. - 00 would be no red would be an absence of red light. - And then the 2nd 2 characters represent green. - And that would be an absence of light if I put two zeros for that and the last color - represents blue. - So the last two pair is blue. - So this is red, - green and blue. - With these said it zero. - That means that there's an absence of light. - There's no red, - green or blue light, - so that's black. - This is the color black. - The highest value I can put is a letter F. - So if I put six EFS here like this, - this would be, - um, - as much red, - like 100% read 100% green and 100% blue there. - So this would be the color white. - If I did, - um, - 00 ff 00 This would be the color green. - And if I did this, - this would be the color blue, - and this would be the color red. - So I could also write this as after 00 because the 1st 2 characters are matching FF 0000 So - sometimes you'll see hacks a decimal in shorthand like that. - If you only see three characters, - that's what's happening. - So, - for example, - if this was these three characters after zero F, - I would know that actually, - this is shorthand for F F 00 ff. - There we go. - Does that make sense? - So we can group this 1st 2 into a pair, - the second to in a pair in the last two into a pair, - so this could actually be shortened to F zero f like So if you have a hexi decimal number - that doesn't match into equal pairs, - for example, - I just made this up off the top of my head. - I'm not even really sure exactly what color this is, - but this is an example of the Hexi decimal value that I cannot use shorthand for. - I can't simplify this into three characters because I don't have a match on all of the - characters. - In other words, - of this would be incorrect because there's a match here. - I'm not allowed to do this and have five characters. - The only time I would be able to do this is if I had a match on each of them like that on - each of the three. - So this would be DD eight A. - A. - This is an example of a hacks, - a decimal number that I could shorten if I wanted to. - You could shorten it like that. - Okay, - so we're just gonna add a hexi decimal value of 777 which is kind of like a dark gray. - Okay, - Um, - actually, - this is a It's a bit of a lighter color gray. - I guess I shouldn't say it's dark. - Um, - and then we'll go ahead and let's look at another property here. - Let's create a property called text dash a line. - So this is useful. - You can set text to a line to the left inside the element that they're that they're - contained within. - And then you can also set it to center, - which would center the text in that element. - And you can also say right, - which would center the text in the element to the RCD. - That would push the text over to the right inside the element, - so yeah, - let's actually do that. - One will say text the line right will push this guy over like that. - Okay. - And, - um yeah, - that's gonna do it for now. - We'll talk about RGB color in a moment. - We'll come back to that one. - So let's save this and let's come back to the browser here and refresh. - And sure enough, - you can see here that underneath this image waas this figure caption and the figure caption - is now a different font. - See how this one is? - It's looking like this one's Helvetica. - I'm going to guess there. - And this one here is Georgia and it looks like a gray color Now instead of a black color - okay. - And you can also see it was a line to the right there. - Okay, - let's look at another color system which is called RGB. - And in CSS three, - we can also specify 1/4 value, - which is a which chance for Alfa. - Okay, - so the way the way RGB works is you have a range of numbers from 0 to 2 55 so zero would be - the absence of light. - That means no, - no. - In this case, - it means no red for the first number. - It means no green for the second number and no blue for the third number. - And then the fourth value here is one which means 100% Alfa or, - UM, - 100% opacity. - If I wanted that text to be see through, - I could say like 0.5 would be 50% 0.2 would be 20% 0.75 would be 75% and one equals 100%. - So this transparency is a range from zero, - meaning it's invisible, - or you can't see it all the way up to one or 100%. - Careful. - You don't want to make invisible type like this because that can affect your search engine - optimization. - Sometimes people will try and do a little sneaky tricks, - like making their type invisible on just putting a lot of terms that will focus search - engines to find their page. - However, - a lot of search engines, - if they discover that you're doing this, - they will penalize you, - and Google actually frowns upon that. - It's OK. - So, - for example, - if I say to 55 comma zero comma zero, - this means it's red to 55 red zero green zero blue. - If I made these all to 55 it would be 100% red light, - green light and blue light, - which is actually the color white. - So to 55 to 55 to 55 is the color white 000 is the color black. - And this would be like the color green, - because it be zero red all the way green and all the way blue. - Okay, - so you might be wondering, - what if I want to make it a specific color here? - Um, - and I'm not quite sure what that color value is like, - what the equivalent numbers are for that value because we don't think like robots. - When I think of the color orange like a sunburst orange, - I don't know what numbers to punch in here for the hacks of decimal or the RGB values. - Exactly. - So, - fortunately, - we have some tools at our disposal we can use to accomplish this. - Okay, - so there's an eye dropper in photo shop that you can use. - There's also a an eye dropper in gimp. - If that's the software that you're using so you can bring up an image like this, - you can open it and you can use the eyedropper tool to grab that I can demonstrate really - quickly in photo shop. - And I can also demonstrate really quickly and again, - all right. - And why those air loading? - I'm actually going to show those of you who are on a Mac computer. - I can show you how to do this using a free built in program on the Mac called Digital color - Meter. - So, - uh, - let's go ahead and we hide this really quick and let's go over to this little magnifying - glass dropped down up here, - and we're going to search for an application called Digital Color Meter and actually - already came up here. - I just tied digital, - and you can see here the top hit is this application called Digital Color Meter. - So I'm gonna go ahead and select that, - and this pops up a little window on your screen. - I'm actually working in Snow Leopard. - You may have a newer version of Mac OS. - You may be running on lion, - and if you're running on lion or mountain lion, - this will look a little bit different. - But it's pretty much the same thing. - So if I want to match this color Let's say I want to match this color gray to a specific - color. - Agree on this wall back here. - Maybe even kind of like a beige color like that. - What I'm seeing there is the hex values and showing me that the red value should be be be G - is B nine and the last one is a d. - So if I want to copy those values, - Aiken say command shift, - see? - And I can jump back into my code here. - Let's hide game for a second here. - Hi again. - Okay. - So I can jump back here to the code. - And for this color value, - I can just paste that value in there like that. - So if I save this and refresh, - it just gave me the Hexi decimal value when I hovered my mouse over that part of the image - that I was looking for that color. - So if I come back here and I refresh, - you can see that this text changed that kind of beige ish color I pulled off the wall here - . - Okay, - let's try it again. - But this time, - let's get the RGB values. - So I'm gonna come back to digital color meter. - I lost it and see if we can bring it back up again. - There we are. - And let's try like this orange color here so you can see right now I'm getting the hex - eight bit value. - And what I want to do is switch to the RGB actual value in older versions of Mac like, - Ah, - Snow Leopard. - You're going to see that you can click here and you can switch to actual value. - Now, - if you're in a newer version of Mac OS X like Tiger, - you're actually gonna want to come up to a drop down menu up here. - So under the digital color meter application, - you can come up here and you can actually change on. - I forget which drop down menu it is without being able to see it. - But you're gonna look through the preferences up here and you will be able to find the same - menu. - And you can switch Teoh say actual value eight bit. - So if I say RGB actual value eight bit, - then I get this color system, - which is 0 to 2 55 instead. - So, - for example, - let's hover over this orange in the shoe right here, - and I'm gonna say command shift, - See? - And it will copy those those numbers. - And I can come back here to the code, - and I can pace that in there. - Now, - these ones here are the RGB values I need to say RGB actually had this written before and I - erased it. - Um, - and I'll put parentheses around this salsa rgb a and then we'll put a comma in between each - of these numbers here like this. - And we need to if I do the, - uh if I do just rgb like this, - this is CSS to to add some transparency. - I could do rgb A and I could specify, - like 0.5 would be 50% transparency. - I'm just gonna say one for 100% like that, - and then we'll save and will come back and refresh. - And you can see now the text years, - that orange color from there. - So I droppers air really useful. - Um, - in Kim, - you have an eye drop tour right here. - I'm just gonna pointed out in each application. - This is the I drop tool here and gimp and you would go to file open and bring your image up - . - And you can I drop from there and in photo shop, - the eyedropper tool is located right here. - It looks very similar. - It's up a little bit higher and the books in the panel, - and it looks like this. - It's called the Eyedropper tool. - You can also hit the letter. - The key I on your keyboard to select it. - Okay, - excellent. - So I'm gonna close these out. - We'll do a little bit more with Photoshopped later on. - Okay, - so that's great. - We now know that we can use, - um applications to click, - and I drop on our images. - If your own windows There's also some free programs you can download a few Google search - for eyedropper or color eyedropper that there's, - ah, - handful of programs that should come up that are free for the newest version of Windows as - well. - Okay, - um, - so that is color systems. - And we also learned, - uh, - let's see, - we learned color names. - We learned about Hexi decimal colors and shorthand Hexi Decimal. - Um, - and we also learned RGB values 22. Font Shorthand: - Let's take a look at shorthand for specifying all of these font properties here, - So I'm actually gonna comment this out and I'm gonna write this in a simple or shorter - manner. - Let me show you what I mean here. - So, - actually, - in CSS we if we want, - we can write thes out line by line. - It turns out for fonts, - there is a There is a property called font like this. - And if you just say fun, - this will allow you to specify the values for weight and style and size and line, - height and font family all in a single property. - It's important that they occur in this specific order. - So, - um, - I wrote I purposely wrote these out in the same order to try and help you remember. - Um, - and the first thing you would do is if you had any font style or font weight. - You would specify that first, - so we could say normal. - And then you put a space and the space in between these values is is the way that the - browser is able to see that it's the end of one value in the start of the next. - So it's important to have a space in between there, - so you can say that it's a normal font. - Wait, - we can say that the font sizes 12 pixels, - and we can put a slash to specify the line height, - which would be 1.5 m. - So the way you would read this is, - you would say, - normal 12 point or 12 pixels over 1.5 them, - um, - so 12 pixels over this 1.5 them is, - um, - is the size over line height. - So you put a slash in between these two instead of a space, - and then we'll put a space again and then we'll specify. - Clips will specify the funds, - which are Georgia and times New Roman. - Whoops. - I have too many quotes there. - There we go on, - I'll do a comma. - And the last one is called Sarah, - which will just load any generic Sarah Font that the browser confined. - Okay, - we'll go in and save that, - and I think I wanna changes value back to my gray color. - Although that's a snappy orange, - I think it's a little too vivid for just a figure caption, - so I'll just save that back of 777 And there we go. - It's all back to normal. - Okay, - excellent. 23. Web Fonts: - So this is a great way to load fonts that our Web say fonts, - common fonts and everyone's gonna have on their computer. - However, - what if I want to load a fine off my own computer? - Or what if I want to load a specialized Fine. - So we're gonna look at a method called at Import to import a style sheet for some - specialized funds from Google. - Okay, - and there's all all kinds of sites out there that provide free Web fonts. - We're gonna specifically go to Google's one fine library. - So let's go back to our browser and let's open up a new tab and we're gonna go ahead and - type in google dot com slash web funds old dot com slash weather funds and you can see here - there's, - ah, - larger list. - They have over 606 113 find families, - and you can click through here to adjust the settings and sizing that you're looking for. - Um, - I happen to know there's two specific fonts that I want to use, - so I'm just gonna search for them up here. - Otherwise, - you know, - normally I go through page by page and I try and find styles that look, - you know, - desirable to me. - I'm gonna look for one called Let's see Elsie Swash Elsie swash caps. - I want to use this one here. - Okay, - so this is a fun that it's not super likely that someone will have this exact thought on - their computer. - So we're gonna grab this fun and load it from Google. - Um, - there's different ways that you can do this year. - You can add it to your collection, - and then you can have a custom style shoot that you linked to. - And actually, - in our case, - what I'm gonna do is I'm just gonna go to this link here that says quick use and I'm gonna - click on the quick use link like that, - all right? - And they're telling me here that there's different versions. - There's normal and ultra bold. - In this case. - I just want to use the normal 400 weight of the fun, - and then we're gonna scroll down here, - and I can see there's actually three methods that I can use to embed this into my sight. - So one method is called standard, - and this is using a link that we put in the head section of all the HTML pages. - So this is that the link tag we saw before? - The same way that we're linking to our style sheet. - In fact, - uhm and another method is using something called at import which will import this file - directly into our current style sheets. - And there's also a JavaScript solution that you can copy and paste here, - which most likely you would put in the head section of your HTML page cut or linked to from - your HTML page. - Um, - so JavaScript is gonna work in older browsers if people have their JavaScript turned off, - which I'm not sure why why they would. - But some people may do that for security reasons. - Then this one's not going toe work, - Aziz. - Long as they have a newer browser that supports CSS three at import method, - we can use this particular one. - So I'm actually gonna use this solution, - which is the middle tabular called at import. - And we're just gonna copy this. - I'm gonna highlight it and say Copy. - And then I'm gonna leave this tab open and I'll just tab back. - He will go back over to sublime text here and let's go and load this at the top of our page - , - so I'll just make a comment here that says Web funds like that. - So we load our web fun here, - and I'm gonna go paste, - and we can make this a little smaller. - Zoom out so we can see what this looks like here. - It's kind of a long girl. - All right, - so we've pasted this U R l Here, - let's jump back to our browser and let's see the usage for this. - So the way we use this is we use font dash family, - and we refer to this fund as Elsie Swash caps. - And, - um also, - they have a fall back of cursive, - which will be it will use any cursive font that it confined if it can't load this one for - some reason. - So we could just actually copy this part here, - and I will come back to my code and I can go down to where I'd like to use this. - I decided that my figure captions. - Instead of being Georgia, - I want to use a special fund. - So I'm going to highlight the font families here and switch it over to Elsie Swash caps, - which will load from here from the imported Buehrle. - Let's say I wanted to grab some other fonts from Google Web fonts here. - You can also come back and find a few more here. - All right, - so let's go ahead and let's look for another font that I want to use. - And this one's called clicker clicker Scripts. - There it is. - Clicker script. - I'm using these very decorative fonts. - All right. - And then we're gonna go to quick use, - which is the link right here. - And then I'll go tol scroll down and click the import that import tab, - and we will highlight that text and we'll come back to the code and I'll just paste this - under the other one. - So there's another fun. - This one's the 1st 1 is Elsie swash caps, - and the next fun I'm linking to is called clicker script. - And then I have to make sure that I refer to this font with the correct name, - which is clicker script and comma fall back of cursive. - Okay, - so back to our code and we'll go ahead and use, - uh what? - Use quicker script for our H ones coming up here in a bit. - Yeah, - we'll just go ahead and hold on to this one and will come back later and have that fun and - okay, 24. Class Selector: - so that's a good start. - We learned type selectors type selectors allows to go in and select any element in all of - those elements in the whole website and style them in a particular way. - Now, - that's all well and good when we want to make everything look the same if you have a - handful of elements that you'd like to style all the same than your best bet is to use - something called a class selector. - So, - class electors, - the's ones will, - you know, - thes You can apply Teoh, - um, - as many elements as you like. - So if you have a handful of elements and you want them to be styled in a certain way, - you know, - maybe not all paragraphs, - but just a specific paragraph or two or three paragraphs and the site that you'd like to be - a little bit different. - You can use something called a class selector. - Okay, - so, - class electors, - they have a special defining character at the beginning of them that lets the browser know - that this is not just a normal element. - We're looking to sit style. - We're looking to style a specific class name, - so we always start off classes class electors with the period symbol. - So I always have the first put a period, - and then I'm going to give this class a specific name. - So it's really up to me to name it. - And I want to choose a name that's gonna make sense to me later on. - So let's go and look at the usage for this first, - and then I'll come back and name it. - So I'm gonna go into the catalogue page, - and I'm gonna go ahead and scroll down. - And if I come down here to line 75 catalog about HTML, - you can see we haven't h two here called Featured Brands. - Um, - and later on, - I'm going to put sort of like a wood texture behind all of these elements. - And this text is gonna be on top of that. - Would the wood texture and I'd like it to be white. - I don't get like it to have the color white and all the other H twos are gonna have the - color black, - so I can't just simply say h two for this selector because that would make all the age to - is white. - And in this case, - I want all the each to use to be black. - But this specific one, - let's say this one and maybe on a couple other pages as well. - I want to make some of the H two is white. - So the way I could do that is I can assign a specific class to this and there's two steps - to the process. - One step is applying a class to the element using the class attribute so I can go ahead and - say this age too has a class of and I'm gonna call it milk text like that. - I'll just use underscore and say this has a class of milk text. - So I completely made up this class name. - So I completely made up the name of this particular class on, - Decided to call it milk text because I want all of these text to be white, - milky white. - Okay, - so now that I've given this a unique class name here, - I can apply this class on as many elements as I want that I want to have the same white - color for their text to start off with all. - Just apply it to this one. - But you can play class multiple times. - You can also apply multiple classes as well. - For example, - if I had another class here like I wanted to add a a class called Shadow that's gonna add a - shadow to the element. - I can just put a space here and apply additional class named as many class names I want - here would be, - like another class I could right there. - So by putting a space here, - you can apply as many classes as you like to a single element, - and you can apply classes is many times on the pages you want. - I can go ahead and copy this class of milk text to as many other different elements as I - see fit. - So now that I've I've labeled this with a class in the HTML Aiken jump back to the CSS. - And now I can target that class by using the period symbol and typing in the name of the - class, - which is milk text. - And that is case sensitive. - You can make up the name anyway you like, - but you're gonna want to use letters and numbers only. - And it is case sensitive, - and you don't want to use the space in between the name. - Um if you want to indicate a space you can either use hyphens or underscores like that. - Okay, - so for my milk text, - let's go ahead and set this guy to have that font family we just loaded up here, - which is called clicker script. - So we'll go ahead and say Font dash family and we can grab the code to make that work, - which is here. - Step for its called clicker script cursive. - And actually, - we should already have that copied. - I should just be able to pace that in right there. - Okay? - And in addition to the font family, - I also want to change the color of the text to be white like that. - So for white, - I have a couple options. - I can write the word white. - I can use the Hexi decimal equivalent, - which is s FF, - or I can use the RGB values 2 55 comma 2 55 common to 55 or the RGB A values to 55 to 55 1 - like that. - Um, - so in this case, - I'll just use the color name white. - All right. - And let's also add something called text shadow. - So in CSS three, - we can also add shadows toe our text, - which is kind of a nice effect. - And this accepts four values I have to put in here. - This first value here is the horizontal offset. - So this is going Teoh, - push the shadow three pixels to the right. - If I say negative, - it would push the shadow three pixels to the left. - In this case, - I don't want the the shadow to move horizontally, - so I'm gonna just say zero, - and then the next value is the vertical offset. - So I wanted to go to pixels down from the front, - and the third value we put in here is called the Blur Radius. - So Blue Radius is is health. - How many pixels out the shadow will blur or soften If you said zero would be a very sharp - shadow if you say like 10 pixels, - that'll be really soft and smooth as it fades out, - we're gonna go ahead and find a happy medium here of just three pixels. - And lastly, - we want to specify a color. - So if I want this to be black, - I could use the Hexi decimal value 000 will be the equivalent of black colors there. - Okay, - we're gonna go ahead and save that, - Okay? - And let's go to test this out. - I did a safe and I can tab back over to my browser and we can. - Let's see, - that was on the catalogue page saw. - Go over to the catalogue page and scroll down. - See if you see this one here and will hit. - Refresh. - Cool. - So that's under future brands, - and it looks pretty small. - I think we'll make this a little larger, - but you can see it's white now it has are specialized Web fun, - and it has a shadow. 25. ID Selector: - So the next thing we want to do is let's learn about another type of selector. - So we know that class selectors allow us to tag certain elements with a specific class name - and we can apply this to as many elements as we like in a single page. - We can also apply multiple classes to the same element if we want. - Now there's another type of selector called an I D selector and ideas selectors air a bit - different in that you can only apply, - um, - one I d per page. - Rather, - you could say, - um, - we can apply to Onley one elements her page. - Okay, - So the way you can remember that is classes can be applied to multiple things and I d has - the the word I d, - which you can think of is meaning a unique identity. - So I d s have a unique identity. - They can only apply to one thing per page. - So a lot of times when we're building websites, - we'll have a need to apply classes using the period symbol and then by tagging a class - attribute here, - giving it the same class name. - Um, - if you wanna have, - you know, - multiple elements styled within a page. - But there's also a lot of times when we have unique element that really only serves one - purpose. - So, - for example, - if we have, - like a social media bar or a box and the page that is unique and there's only one of them - per page, - then we're better off to use an I. - D. - I. - D. - S have more strength, - more authority. - If you were using previous styles like if you styled a color using a class, - Um and then you used an i d to set another color. - The I D actually has more authority than a class, - so it's more specific because it refers to a single element in the page. - So, - for example, - let's go ahead and create ah box and give it a unique I. - D. - Let's head over to the index dot html page and I'm going to scroll down. - And here we have the header and I've put someplace to more comments in the code since the - last exercise because I wanted to, - uh, - I wanted to show that we're gonna break up this header into two sections to smaller boxes. - So here's my opening header in my closing header tag. - Now within that header, - you'll remember before we have the heading, - Um, - which is the name of the company here. - That's and that's nested inside of an H group. - So I'm gonna kind of style this into, - ah, - little fancy looking logo. - And I decided that I want to have this in its own box. - I want to have the logo in one box and I'm gonna style the navigation in a separate box. - So in order to do that, - let's surround this with a div tag like this will say, - def, - and you'll remember from previous exercise that devore d I V is the way that we create a - little box. - This is aesthetically creating a box around this area, - and I'm gonna go ahead and do the same thing down here. - We want this one to also be in a separate box like so. - So I'll put a little clothing div here hands. - We'll make sure toe in debt this content will highlight and hit the tab key to invent all - of that. - Like so Okay, - um, - so I have the this h one and h two is in one box and the navigation is in another box. - Now, - if I'd like to tag this if this is a unique element has a unique identity on the page, - then I can tag this with a specific I. - D so similar to how we created this class attribute. - You can also create an idea tribute. - So we could say, - for example, - did and we can give it an I D equal to logo. - So this is going to be a logo panel or like a bought a box eventually will style it to be a - box at the top of the page that goes across the screen and has our logo inside of it. - And this one down here is called Knave Bar. - So if I want, - I can give this one a unique ideas. - Well, - well say I d equals Dav bar like that check and we'll come back and in ah and style this - one a bit later. - First, - let's look at styling this one. - So this we gave a unique identity of logo. - Since we gave this an idea of logo, - I'm now forbidden to give any other element on the page. - The same I d. - So again one more time with classes you can apply this class to as many elements as you - like on the page, - whereas with an I d like I D equals logo, - we can only apply this one time per page. - So I've gone ahead and added this to all the rest of the pages on the site so we can go - back into the CSS now, - and we can target that i d. - And just in the same way that classes have a unique identifying character on the beginning - like period to indicate that this is a class of milk text. - I DS also have a unique identifying character in the beginning, - and that's the pound symbol or hash tag or some call it the number sign. - And that's Ah, - you can create that using shift in the number three will create that and then we'll just - say the name of the I D. - Okay, - so just to do a quick review again, - if we're trying to select all elements, - we can use a type selector by just putting the name of the tag like paragraph or fit. - Caption. - If we're trying to select, - you know, - a group of elements, - maybe we've kind of sprinkled a style across multiple elements on a page, - like making some of the text milky. - Then we can create a class using the period symbol here in front of the class name. - And with an I D. - We used the pound symbol if we want to apply to one unique element on the page. - Okay, - so here, - inside the logo, - let's go ahead and well, - let's write a comment here for these two. - I forgot to write that this one selects, - uh, - well say elements with a class equal to milk text, - Okay and logo, - which has a unique i. - D. - This selects an element singular. - Only a single elements how to say that element. - It's like the element with and I d equal to logo like that. - So in the HTML code, - we added, - I d equals logo toe one of our dibs. - You can add ideas to any element, - by the way, - you could put an idea in a paragraph or or on ordered list, - or a list item or an image, - whatever you like, - but only one per page that is important. - You'll actually get a validation air if you tried to had a 92 multiple things on the same - page. - So we just come in here and we're gonna give this guy a background color and we'll be - learning a lot more about box aesthetics and how to stylized boxes a bit later. - But just so we can see that Div remember, - we created a a div here with an idea of logo that's surrounding these age groups, - which surrounds the H one and H two. - If we wanted to give this box of color, - for example, - we can use the property background and we'll go ahead and say backgrounds. - We'll give it a light blue color. - Using Aqua Aqua is a color name you can use for light blue, - so we'll save that. - So if we come back to the code here and we refresh, - you can see that we just created a bar on the screen with. - It's actually a div with an idea of logo and its surrounding this content. - Okay, - and we'll come back a bit later and change in style is differently. 26. Descendant Selector: - Let's look at another type of selector called a descendant selector. - The Senate selectors allow us to go inside of Apparent Element and select all of its - Children or all of its descendants, - in other words. - So, - for example, - if we save pound logo and then we put a space after the word logo and then we say H one. - What this is doing is because there's a space here. - In between this selector and that selector, - it's basically okay selecting on Lee the page ones inside the elements with the i D equal - toe logo. - So, - in other words, - if we're the browser, - we could read this as follows. - So from the browser, - we I would say, - Um OK, - go and find it a unique element with the idea of logo and then go inside of it and style - all of the H one. - So, - really, - this is only styling H ones if they happen to be inside of the parent container called logo - . - So this is where nesting comes into play. - This H one is nested. - It's a descendant or a child of this parent element called logo. - So this is a descendant of did with the idea of logo and maybe I have other H ones - elsewhere on the page and I don't want those H ones to be styled. - Let's say I only wanted to style this h one in a specific way. - I could use a class or I could throw an I d into this h one. - But I already have an ID I d. - Here for this container. - And if I had multiple, - each one's in here. - I could then use a descendant selector to say style that each ones, - but only if they happen to appear inside of another element. - So descendant selectors, - A really useful for that again, - we're saying, - Hey, - browser go and finds a element with a unique idea of logo and then space. - The space here hitting space bar indicates that it's a descendant selector and we're saying - go inside of logo and now select all of the H ones. - Okay. - And what we're gonna do is we're gonna change the font family of all these H ones here, - and we're going to change it to clicker script, - which is my specialized web fund. - I downloaded like that. - Okay. - And if I wanted to select the H two specifically inside of their. - You know, - not all of the H two is on the whole page, - but on Lee the age twos if they're inside of the div with the idea of logo. - So this one here is the same. - This one's only going to select h twos if they're inside an element with the idea of logo. - So for these h twos also do the font family and this one I'll do the other, - uh, - let's see which is, - uh, - l c space swash caps. - It's very important we spell that correctly and is a fallback. - It will use cursive if we need it. - Okay, - So, - descendant selectors, - they go and they style something that are inside of another parent element. - In other words, - H one is a descendant of this parent. - So we use the space bar in between indicate that relation that were styling this if it's - inside of this. - So let's go in and save this, - and then we're gonna come back to our browser and we're going to refresh, - and that changed these fonts here. - So it's not affecting. - This isn't h two, - and this is an H two here, - and it's not affecting these other H two's on the rest of the page. - It's only affecting this h two because it's inside of this Div with an idea of logo. - Okay, - great. - Let's look at another situation. - We have all these sections in the page, - and if I want to say that I want to style all of the links that air inside all the sections - , - I can do that by saying section space A. - I'm creating a descendant selector that says only select AIDS, - you know, - a tags that are the descendants of section. - So this is literally on Lee going to style a link. - If it's inside of a section, - let's see, - this one's not That's inside of Header. - See if we could find one here, - for example. - Well, - here's one. - This is a male to link. - So here's a section and then here we have it says email and there's an anchor link here. - So this one, - this link tax would actually become styled then. - Okay, - so what we're gonna do for these guys is we're gonna give it a color. - We'll give it a great color like that using Hexi decimal values and links by default have - an underlying And if we'd like to remove that, - we can set the deck the text decoration to none. - You can also set text decoration. - Teoh underlying you can also do overline like that and flips overline And you can also do - line through which looks like that in this case we want to dio I'll just leave it Underline - is fine, - which is actually the default. - But just to demonstrate with this particular property looks like there. - Okay, - so if I save that, - um and I come back and eat fresh normally by default links or blue But I said for it to be - kind of a gray color, - let's go back to the browser and we will come down here and we will refresh and you can see - these are no longer blue there now gray color, - as is thes links and the email link here at the bottom the pages. - Well, - very cool 27. Psuedo Selector: - next, - let's take a look at pseudo selectors or sometimes referred to as pseudo class selectors. - Now pseudo selectors are used oftentimes to style an element based on it's relationship - amongst other elements. - Or, - in the case of this example, - we're going to style an element based on an event state. - So it's pretty common to style links. - Um, - and we saw before that if we use this type selector for A, - it will go in, - select all the anchor links in the page and style them which we styled some here in the - sections to have ah, - great color and be underlined. - OK, - but what if we'd like to change the style of a link when the mouse hovers over it? - Or what if we'd like to change the style of the link when it's already been clicked on? - So in order to do that, - we have to use some pseudo selectors so pseudo selectors identify air is the colon symbol. - So first you start off with an element, - and this could be any element in this case, - were interested in styling links during a particular event state. - So we're gonna use a colon, - and then we're gonna type the name the specific name of the event state we're trying to - target. - So a colon link? - What it does is this selects links, - um, - during their default state. - That is when they're untouched. - Okay, - so if I visit a page and I've never interacted with the link before, - this will control that style. - Um, - so let's say we want to make them black. - Well, - Seo, - let's make the links color black when we first visit the page and ah well, - tell it to remove the text decoration so there's no underline under the links. - Will stay text decoration none. - Okay, - let's take a look at another event. - State for links called Visited. - Now a colon visited well select and style links that have already then clicked or visited. - In other words, - thinks that we've already visited in the browser. - So, - for example, - sometimes to indicate that someone has already clicked the link, - you can change the color of the link like I could make the link gray or something like that - . - And, - um, - any sort of text decoration or information like that is going to be inherited from the - previous selector. - So since I said text decoration none, - this one will also be none. - Um, - also will not have any underlying under. - It'll have no decoration, - but I will change the color from black to a gray color. - Here, - this is a medium grey pound C C c. - Okay, - let's take a look at another link State. - This is everybody's favorite, - which is called hover like that, - which you can probably imagine. - This one will select links, - uh, - during mouse hover. - So this is called, - like on mouse over like that. - Okay, - so this one's fun. - You could do whatever you like. - You can change the color. - It can get wild. - Um, - you know, - maybe what we'll do is we will keep the color the same. - Um, - perhaps the colors black on hover. - And perhaps what we'll do is we'll just add an underlying here will go to text decoration - and set it to underline like that. - So that way, - when, - you know we normally haven't clicked on a link, - um, - there's no text decoration, - and then when we hover over, - a little line is appears underneath it like that. - Okay. - And whenever you specify the links, - you should do it in this order, - so that, - um, - the links below can inherit characteristics from the link states above. - Okay, - um, - let's go ahead and create another one. - This will be our final event state, - which is known as active. - And this one's, - um you really don't see this one as often, - but this one selects links, - Um, - while the mouse button is depressed or when you're clicking on them. - So this is literally while you have the mouse button down. - So as soon as you click and you release the mouse button, - you won't see this any longer goes away. - So in order to see this really clearly, - you actually have to click and hold the mouse button down. - So it's only a split second. - Usually that we see this particular event state here. - So just change the color to red just to make that really obvious There, - we can go ahead and save. - Okay, - so this styles links based on their on the various events states. - So what we want to do is we wanna change this up a bit so that we can use these styles to - style links within a specific part of the page, - because a lot of times you're not interested so much in styling links across all the pages - . - The same. - But usually, - you know, - you have links in a certain part of the page that you'd like to style differently. - So maybe, - you know, - links during the main inside of the main navigation bar have one particular style and then - maybe links down in your body, - copy, - have another style. - And then perhaps, - you know, - links at the bottom of the page have a different style. - So in my particular page here, - I'm gonna have some links that are gonna be strewn amongst this regular body copy. - Um, - and also have links like on a sidebar like top brands and a shoe archive, - uh, - etcetera. - And I think I'm gonna style these links at the top here on my NAB are completely - differently. - These they're gonna be more prominent, - larger text, - and I'm gonna make them kind of like buttons at the top of the page. - And then if I come down here at the bottom of the page, - we have a serious of links that are in a section all on their own. - This is the detail section just before the footer at the bottom of the page. - And I'd like to set these links to be styled differently from thes links up here that air - inside the sections. - Okay, - so what have we learned previously? - That will help us. - Well, - before we used an I. - D. - On one of the dibs. - And then we use something called a descendant selector by putting a space here were able to - style all of the H ones, - but only when they're inside of this element, - or all of the each twos. - Only when they're inside of this element with the idea of logo so that could be used down - here as well. - So if I want to style links in different parts of the pages, - I have a couple options. - I can apply classes to links in certain areas and specify that a link with a certain class - has a certain style. - Um, - or what's even easier is I can use a descendant selector, - so let's go ahead and jump back to the index page, - and let's scroll down to the section called Details should be at the bottom of the page. - If you're at the very top of the page, - I'll show you a trick. - I'll come back up. - So let's say you're in the top and you'd like to jump really quickly to the bottom of the - page. - If you are hit command and the down arrow on Mac, - it's command down arrow and on windows, - it's controlled down arrow. - We'll jump you all the way to the bottom of the page like that, - and then you can just scroll up. - This is actually one a little too far. - Here's the end detail section and then, - ah, - I want toe scroll back up above details and this section here. - I'd like to give this guy an I D. - So I'm gonna give this this section of the page unique identity. - And I'm just gonna call it details, - okay? - And then I'll go ahead and save that. - And I've already added this code for you on the rest of the pages so we can just come back - in here to style dot CSS and weaken. - Turn these into descendant selectors by saying pound details space a coal and link. - So that way on Lee links during their normal state will be styled if they're inside the - details section. - Right. - So I can add that to this one here. - £2 details. - Space like that. - So this will say, - Hey, - browser. - Go and find something with a unique idea of details. - Go inside of it and style. - The links, - whenever they've been visited are already clicked on. - And this says, - Hey, - browser, - go inside of the the section with the idea of details and find some links. - And when people hover on them, - style them in this way. - Okay, - And then lastly, - we have this one which is active state. - So it's only going to style links during their active state if it's inside of the section - with the idea of details. - Okay, - awesome. - Um, - so let's go out and save this and let's come back to the browser and we're gonna do a - refresh. - And these links here are inside of the sections. - These are inside of the unnamed sections. - They don't have an I. - D. - So these air still grey in their underlined initially. - However, - if I come down here into this section, - you can see that these links are black on hover and when we click on them the active state - we see, - they turn red. - And whenever we've already clicked on them, - that and we come back to the page. - They should be great. - Which is the visited ST I've actually already clicked on these links. - Which is why they're all gray right now. - Okay, - so sometimes you like a visited ST. - If you have a lot of links, - people can see which links they've been to or clicked on. - However, - other times you might just want to share the same, - um, - styles from your normal link state as your visited ST. - So if I wanted to do that one way is I could come down in here and just tell it toe be - black and have you know, - no text decoration when we visit the link also, - um, - but this is kind of redundant because I'm just giving the same styles here and here. - And you may notice that quite frequently you're using the same styles, - so there's actually ah, - better way to do this. - Um, - we can always use the something called a compound selector, - which uses the comma two separate, - different selectors. - So I can use this to style both of these at the same time by putting a comma here and then - pasting this details a visited up here and I can get rid of this one here, - let me go ahead and delete that one like that. - So what I did there was I said, - pound details a colon link comma, - which means and also style this. - So if I were to kind of read this out loud in the way that the browser interprets this, - it would be kind of like saying Ah hey, - browser. - Go and find something with a unique idea of details. - Okay, - Now go inside of it and find some links. - And during their normal state, - when no one's clicked on them, - style them this way and then the comma means and also go and find an element with the idea - of details and go inside of it and also style links during their visited ST So basically, - in a single selector. - By using a comma, - you can group together different elements, - and in this case, - we've said go and style, - normal links and also going style links that have been visited. - So now both default link state and visited ST will be black with text decoration of none. - So it's good and try this out all safe, - and we will come back and refresh. - And now, - since the default state and the visited ST or the same. - Even though I've clicked on these links before, - they're all still black. - We're not seeing the great color any longer. - Um, - and you can see when I hover over, - we get a little underlined like that to let me know I'm hovering over the link. - Now. - It's really up to you. - What you do during these links states. - There's all sorts of possibilities. - Um, - I've done some really conventional things, - which are perhaps a little boring. - I've just changed the color or the text decoration, - but actually you can change the texts. - You can change the font size, - and the link will look as if it's growing larger. - The text will look as if it's growing larger when you hover over. - Um, - you can also change like the weight of the text to make you get thicker. - You can change the, - um, - the style to make it become a tallix. - You could even really change the font entirely, - which would be kind of a strange effect. - Um, - you can change background colors and all sorts of things. - Also feel free to check out the links below. - That will give alternate optional resource is that you can go check out online to learn - more about CSS selectors. - So what you're going to want to do next is go ahead and move on to the code challenge, - where you'll be using CSS to style your website project. 28. Developer Tools (part 1): - Hi, - guys. - Welcome back. - I wanted to show you a quick example video of how to use your developer tools and these - tools will help you to troubleshoot and debug problems and issues that you have along the - way. - So previously we did look at using HTML validators and CSS validators as a way to validate - the syntax of our code. - Another word. - Sometimes you'll just accidentally misspelled or mistyped something, - and that will create an error in your code. - But there's also gonna be plenty of times when there are no syntactical errors where you - have typed everything correctly. - But there's still some things that aren't displaying exactly the way you would like in the - browser. - And that's where developer tool step in and really become an excellent tool for solving - these issues. - First, - let's take a look at a sort of hypothetical situation I've set up here in the code. - And of course, - you won't see these specific changes in your code on, - and there's really no need for you to follow along for this example. - You can go ahead and just sit back, - relax and watch. - Um, - and I've set up a an example here where I'd like to change the style of this particular - paragraph in the page. - So this is inside my sale section and what I did was I decided that, - you know, - I wanted to have all of this paragraph and perhaps, - you know, - text in different places in my website. - Um, - have this class of highlight which would change the text to a blue color. - So normally this paragraph text is black, - as you know, - and we're going to change that to be styled blue. - So I've gone ahead and added this class here of highlight to this element. - And then if I come into my style dot CSS, - you can see down here online 87 that I've created a class of highlight and set it to have - the color of blue. - So at this point, - I'm assuming that everything has been done correctly in this text will appear in the - browser as being blue. - Now, - strangely, - when I go to the browser and I refresh the page, - you'll notice that this text, - in fact is not blue but is actually read. - So instead of sort of tearing my hair out or spending, - you know, - possibly hours digging through all my lines of CSS code to figure out where I've - contradicted myself. - This is an excellent situation to step in and use the developer tools. - No, - I'm not gonna demonstrate developer tools and all the different browsers. - But I will provide some links at the bottom of this video where you can learn more about - the developer tools for Firefox and Safari. - But I will demonstrate how to use the developer tools to solve an issue like this in Google - Chrome. - So one of the ways that you can open up your developer panel in Google Chrome is if you go - to the view, - drop down menu and you'll notice here that there is a selection called Developer. - And under this, - we have the ability to bring up developer tools here so you can go to view developer - developer tools and that will bring up this panel like this. - Now, - at any point, - if you want to close your developer panel on the left hand side, - there's a little X here. - You can go ahead and click that to close it, - and then you have your full browser view back again. - Another way that you can bring up developer tools is by inspecting a specific element to - see the HTML and CSS code that's styling or affecting that element in your page layout. - And to do this, - what you want to do is you want to right click on whichever element they're interested in - inspecting. - So since I have a two button mouse here, - I can just right click. - And if you were on a Mac laptop, - you can use two fingers and click, - Um, - or you could hold control and do the left click, - so control and a click will bring this menu up and again. - If you have a two button mouse like me, - you can just do a right click and bring this menu up. - And then we're going to go to inspect Element right here, - and that will bring up the developer panel. - And not only does it bring up the developer panel and actually also highlights thes - specific element that I'm interested in inspecting, - So if we come over here on the left hand side of this, - we're currently on the elements panel and we'll learn a little bit later. - We'll learn a bit more about these other tabs, - but right now we'll just be exploring the elements panel and you can see below. - We have all the HTML code that's laid out. - Um, - and they even give you little arrows where you can expand and collapse the different - parents to see the other HTML elements that are nested inside. - And when it's selected like that, - I'm also able to see all of the CSS. - It's affecting this element. - So, - really, - any time I click ah, - from one element to the next like this, - you can see that the CSS is changing its on Lee, - showing me the CSS code that's applied to that specific element. - So in our case, - weaken discover a few things about this particular paragraph, - for example, - as faras of the CSS. - That's governing it. - We know that in the normalized dot CSS file online 63. - I'm being told that it is inheriting the font family of San Serif, - and it tells us here that this style is inherited from the HTML selector here. - Okay, - we also have information about the user agents style sheet, - and the user agent is essentially my browser. - That means that Google chrome is adding this default style. - It's saying that in Google chrome that paragraphs are set to display block and that it has - a specific amount of margin surrounding the paragraph. - We also concede e my custom style sheet, - which is called Style, - that CSS has three different styles that are affecting this particular paragraph. - It tells me that one of them here is online. - 19. - So you can always read this by seeing the name of the file and then after the colon, - it will actually tell you the specific line in the code where you can find this style at so - here Online 19 of style dot CSS. - I can see that I've applied a font size of 16 pixels and a line height of 1.5 m. - Okay, - I can also see that online 87 I've applied a class of highlight and told it to have the - color of blue. - However, - you will notice that here the color blue is actually crossed out. - Whenever you see one of the properties being crossed out like this, - what it's doing is it's telling you that this style is being overridden by some other style - . - And in this case, - if I look above here just a few lines above this highlight class I've contradicted myself. - And here I've used a descendant selector where I've selected the element in this case, - the section with the idea of sale. - And I've told all the paragraphs inside of it to have the color red. - So in this situation, - you can actually see that using a descendant selector is going to overpower, - have more authority than a class. - So the color of blue has been crossed out here, - and I'm actually seeing the color red for that text. - Now, - if I hover over this particular declaration, - you'll notice there's a little check box that I can click beside it and that will enable - and disable that code so we can see what changes occur inside of the browser view. - So, - for example, - if I click this little check box over color red In other words, - by disabling this style, - you can see that now. - Highlight is in fact, - um has the authority to color the text blue again. - So now we see the blue text again. - If I check this back, - it's gonna be read. - If I uncheck that style, - it will be blue. - So what this is telling me is that if I really want this to be blue. - I'm going to have to go toe line 83 of style dot CSS to remove this color red from that - style. - So let's go ahead and try that out. - I'm going to go back to my code here, - and I'm going to go down the line 84 here and I can see color red. - So if I go ahead and remove this style or in this case, - I'll just go ahead and comment this out and then I'll re save and come back to the browser - and refresh, - and now I can see that it's corrected that issue. - So any changes that you make here inside of the developer tools, - they won't actually change your code. - It's not the same as going into sublime tax and physically changing the code. - It's actually just showing you a preview. - So again, - developer tools or just showing you a preview so that you can kind of play around with - troubleshoot values until you get things looking the way you want. - And then you can use the information such as the file and the line number to go into the - actual code and make those changes permanently. - Okay, - so, - aside from being able to enable and disable styles, - you can also create new styles by clicking inside of here in typing other things. - For example, - I contest out things before actually apply it in the code by saying things like, - You know, - font size. - And then I can type in, - You know, - like three m something like that, - and I can see how much larger the text gets, - Aiken say. - Oh, - that's a bit too much. - I'll say to em and see what that looks like. - And then I can say 1.5 them and maybe that's perfect. - So if it turns out that I do like the font size at 1.5 them, - I can then no, - to go into style dot CSS online 87 just add this below that. - So let's go ahead and check that out. - So again, - if I refresh this page, - I'm gonna lose the style because, - remember, - and the developer tools, - you're sort of just previewing the style. - So if I hit refresh, - it's no longer 1.5 them. - But I do now know that I can go in here and added permanently to the code and by playing - around with the different sizes. - I was able to preview them before I actually made a decision here to commit to this size. - So if I refresh that now, - I can see that change reflected here. - Aside from writing new CSS declarations and testing them out inside of the developer tools - , - you can also change existing values. - For example, - here Online 19 and style dot CSS. - It has styles for my paragraph, - such as font size and line height. - So, - for example, - if I'm interested in playing around with line height instead of clicking to create a new - declaration, - I can also click and select the value for a pre existing property like line height. - So line height does exist in sublime text, - and I'm simply just testing out a different value so I can type in a new value here. - I can also, - additionally hit the up and down arrow on my keyboard, - and that will change the number like this. - So, - for example, - I contest out different line heights by hitting the up arrow or down arrow like that as - well, - or I can type in a precise amount by typing in 1.4 something like that, - and I'm able to see that preview. - And if I like the way it looks, - I can go ahead and then change that here inside of the actual CSS code. 29. Element Display: - Hi. - Welcome back. - This is slides 3.1 building page layouts. - Let's take a look at some topics here that will help us on the path to creating riel - website layouts so that we can position elements and create column structure on the page. - So we're gonna need to look at the different way that elements display in the browser. - We're gonna take a look at something called Box Model, - which will allow us to explore the abilities for sizing and scaling elements as well as how - decrease spacing inside of an outside of elements. - We're also going to take a look at some new box aesthetics, - so we'll learn some different properties we can use to give more style to our elements. - Um, - in the past previously we looked at background color. - But now we're gonna move on to look at things like adding in a background image, - rounding the corners of our elements, - creating a border, - adding opacity and box shadow. - We're also gonna look at float positioning float. - Positioning is gonna be your go to solution for creating column structure and positioning - elements on the page. - So first we have to understand that all elements by default either display one of two ways - in the browser. - So certain elements in the browser you may have noticed already from previous exercises - they display side by side. - For example, - images using the AMG tag and links using the A tag often display side by side. - And that's the default way that they'll display in any browser. - Ah, - and that's because they're what we refer to as in line elements or elements that display in - line by default. - So in line elements they're unable to accept a. - Within the height, - they're only going to be the size of the content. - So the content inside oven in line element will dictate the width and height of that of - that element, - in other words and in line elements. - Also, - I will not accept spacing above or below them. - Inland elements, - though, - can't harmoniously exist side by side on the same line with other in line elements. - So examples of block level elements you've seen have been things like headings or - paragraphs. - You'll notice whenever you put in like a heading or paragraph. - The elements that you place after it always appear below on the next line down, - so block level elements can accept width and height. - We can give them within height, - properties to size them on the screen. - Um, - and they also can have margin, - which is they can have spacing above and below them. - Block level elements will always take up the full line that they're on. - In other words, - a black level element cannot exist side by side on the same line as another block level - elements. - Let's take a a quick look at an example of this. - So I'm just gonna go to tinker dot io and I've set up an example here of this girl, - and this site is kind of like a scratch pad. - Um, - it's similar to other sites that, - like Js fiddle and tinker been which allow you to, - um, - basically right out some html CSS and or javascript and this and see how that you know the - outcome of that. - See how that displays in the browser. - Okay. - So you can see I've created to dibs in the html two developments and gives essentially - create a container or a box on the screen, - and I've given both of them a generic class of box. - Um, - so here we have the dot box class right here. - I specified a class of box, - and I've gone ahead and given the elements a background color of aqua, - which is giving him this light blue color. - All right, - now, - I've also given this box a width of 100 pixels and a height of 100 pixels. - A little bit later, - we'll talk about all the different possibilities for sizing. - But for now, - we can just look at the with property and the height property, - and we've given it a fixed amount of pixels just to make this a perfect square. - We've also given it thes properties, - which we haven't seen before, - which is called padding and margin. - So padding is spacing inside the element, - and margin is spacing outside the elements. - Okay, - um, - and well, - again, - we'll come back. - And when we go into more detail about the box model will discuss a bit more about how - padding and margin factor into the size of the elements. - Okay, - so these guys air dibs. - We know that developments by default, - they display block in the browser, - which is why box number one is appearing above box number two, - which is appearing below. - So we have this vertical stacking. - Why? - Because these air by default, - these air block level elements black level elements appear one above the other and they - take up all of the horizontal space. - Okay, - there king of the horizontal space. - In other words, - okay, - so if I ever want to change the way a an element displays, - we also have the CSS property called display. - So by default, - this guy displays block like this. - But if I like, - I can actually change this to in line like that. - So if I change this to in line and I come back and I click run, - we can see the effect there is that these boxes now appear side by side. - So a few things happened here when we set these guys to in line, - you probably noticed that this is no longer 100 pixels wide and 100 pixels tall. - So as soon as we set this to be an in line element, - we are noticing that in line elements, - Although they conduce place side by side, - they also lose some abilities. - Okay, - So namely, - it's no longer able to accept in a width and height. - Because, - as I mentioned in line elements are only as wide as the content inside of them. - So if I started typing more text in here, - it would actually get a little wider right. - We also we have the we could see the margin, - which is the spacing outside the element. - We can see that it exists on the left and right side of the element. - However, - it's no longer existing on the top or bottom. - In fact, - the blue aqua colors right up against the edge of the frame here because there's no longer - any spacing above. - So inland level elements can exist side by side harmoniously. - They cannot accept a with their height, - and they cannot accept top and bottom margin. - So again, - if I change this back to block and I click run, - you can see it. - It's able to ah, - except width and height now, - and we see spacing above and below, - and we can also see that they are stacked vertically. - Okay, - so there is sort of a ah hybrid of these two. - Nowadays, - most browsers will support this next method, - this next value for display. - However, - um, - browsers like Internet Explorer seven and below have limited partial or perhaps even know - support for this particular value, - which is called in line. - Dash block, - inland desk block is, - uh, - kind of like the love child of in line and block level elements. - Kind of like an in line element in a block level element. - Made it and their child in line block has kind of some of the quality quality, - some of the characteristics of both parents. - If you want to think about it that way, - that's kind of a silly way of describing it. - But it's kind of how it works. - So if I set this guy to in line dash block, - it's able to accept within height. - And it's able to have margin on the top and bottom. - Um, - and it can also display side by side. - So there are some unique advantages of the in line. - Ah, - the in line block element. - Um, - and depending on what you're trying to do, - it might actually work out for you. - Okay, - um, - there are some sort of unexpected goofy outcomes. - Occasionally, - when you use in line block in a page layout, - and instead of demonstrating all those examples, - look for a link below this video. - Um, - and there will be a resource link. - That will be to a good article online that talks about some of the follies. - Well, - sort of. - Some of the good parts and the bad parts of using in line block to display elements. - Okay, - Um, - nonetheless, - we're going Teoh learn. - Ah, - an alternative method to positioning block level elements. - It's a column structure like this called floating or float positioning that's going to - really solve all of our issues and building page layouts. - But nonetheless, - I wanted to show you the different ways that elements can display in the browser. - And I also wanted to draw attention to the fact that by using this property, - the CSS property display, - we can actually change the way an element displays if we choose. 30. Box Model: - So first we can look at patting, - which I mentioned. - Patting is the spacing inside of an element, - and then we have margin, - which is the spacing outside of an element. - We also have the border property, - which we can give it styles a thickness and colors as well to add a border, - which is a line or stroke on the edge of an element as well. - Now all of these different pieces in parts add up to the measurement of the width and - height of the element. - And that's really what the box model is all about. - So let's take a look at this image. - This diagram here demonstrates the box model, - Um, - and what they're showing you here is that margin here is thes spacing outside of the - elements. - So this pushes on other elements that may be positioned next to this element so that - they're not right up against each other. - So this is a comfortable sort of buffer or spacing in between elements, - and you can see here you can specify margin for top margin, - left margin bottom and margin rights. - So border can be any size you like. - Border can be one pixel thick. - It could be 10 pixels thick. - You can specify different sizing of borders, - and that's going to be an additional thickness of stroke on the outside edge of your - element. - Now, - inside of the border, - we have something called padding, - so patting is the spacing inside of the elements. - So if I typed text inside of here, - if I type hello, - world, - if I don't want that text to be right up against the edge of my box, - then what I can do is I can add some type of padding here, - patting left, - padding right, - patting top or patting bottom to push the content away from the edge of the element. - In order to see this, - the easiest way to see padding and action is to either give a background color to your - element or to give a border so you can witness the content inside of the element moving - away from the border or seeing a comfortable amount of spacing between the edge of the - background color and the Khan, - where the content starts here. - Okay, - so background colors will go behind, - padding up to the edge of the element right up to the border. - So the box model is made up of the content with the padding, - the border, - and then the margin now is if things weren't complicated enough, - I have to tell you about the existence of two different box models. - So the way it turns out is browsers like Firefox, - Safari and Chrome all used a box model known as the W three C box model. - So the W three C is dictated that when we specify the with or the height of an element, - we're talking about the available space inside of that element for content. - And if I add padding or border or margin, - that is additional on additional amount that we have to add on to the width. - Okay, - so what I mean by that is let's say I have a box a div, - for example. - And I specify that that def should be 200 pixels wide. - I'm describing this with, - um here, - which is the content with So if I say with 200 pixels in fire, - Fox in Safari, - in Chrome and in opera that 200 pixels is going to make up the amount of space available - for the content inside of your element. - Now, - if I also specify padding, - which is spacing inside of the element. - Let's say I specify 10 pixels of padding that's gonna add on 10 pixels to the left side and - 10 pixels to the right side. - So now, - instead of being 200 pixels wide, - you know, - if I specify with 200 pixels and patting 10 pixels, - the the actual measurement of this element is now 220 pixels. - Why you ask? - Because initially we said the with was 200. - But patting we have to add on is an additional amount. - So patting is not included in the width, - Um, - in the with value using the browsers, - all of the browsers that abide by the W three C box model. - So 200 pixels wide plus 10 pixels of patting here and 10 pixels of patting here makes this - element actually, - 220 pixels now, - okay, - you might wonder why you would care about all this math. - Well, - it turns out that when we start building column structure that we need to know how why - these columns are so that they can actually fit side by side. - You only have so much screen space or screen real estate is, - we call it, - and you need to make these things harmoniously fit side by side. - So that's one thing to keep in mind is that fire Fox Safari, - chrome and opera used the W three C box model method Now, - in contrast, - Internet Explorer has its own box model method. - Okay, - so in the Internet Explorer box model method, - when you specify 200 pixels of width that's actually going to automatically include any - border or padding. - Okay, - but not margin. - Neither of the box model methods, - including margin cut. - But the main difference between the way Firefox safari and chrome and opera consider sizing - of an element versus the way Internet Explorer consider sizing of an element is namely, - that Internet Explorer automatically includes border and padding. - So what that means is, - let's say I say that my div has 200 pixels of with okay in both browsers, - right? - Both browsers air looking at the same code and we say 200 pixels wide and 10 pixels of - padding left and right. - Okay, - we're gonna leave border out of it for now. - But just imagine that we have 200 pixels within 10 pixels of padding on all sides. - So in the Internet Explorer box model method, - the element is actually going to appear at 200 pixels. - So if you say 200 pixels, - it will be 200 pixels. - But the available content space inside is only 180 pixels of room for the content because - 10 pixels on the left side is taken up by padding, - and 10 pixels on the right side is taken up by padding. - So with that 200 pixels of with, - we have to subtract 20 pixels, - which gives us 180 pixels available space for the content, - although the element itself will Onley take up 200 pixels wide. - Okay, - And that's again, - in contrast, - the W three c method, - where, - instead of subtracting the 20 pixels of padding from the inside, - we have to add it to the outside. - Okay, - so literally, - if I were to say, - with 200 pixels padding 10 pixels on all sides in AII and Internet Explorer, - the box would look 200 pixels wide just as we told it. - However, - in Firefox safari, - chrome and opera, - it would actually look wider in that browser. - It would be 220 pixels. - Yikes. - This sounds like a lot of hassle and work. - And in fact, - it was in the past. - This really got a lot of us developers down. - It was a big source of annoyance for me. - Personally, - I know I can say, - but fortunately for you, - you guys air learning code at a point now where there's some great solutions in place to - kind of fix all this nonsense. - But, - you know, - throughout time there's been a lot of different solutions for this, - and I'm gonna talk about some of them, - and we're gonna talk about why some of them are okay to use and why some of them you - definitely should not do to correct this box model difference. - Okay, - so these are some hack solutions. - So from CSS one and two, - there was some different hack solutions where you had type the code a little bit - differently to make it displayed different for each browser. - We're also gonna look at a method called box in a box, - and we're also going to take a look at a new method that I recommend you use for your - project, - which is called the CSS three box sizing property. - Okay, - so first, - let's talk about some older CSS hacks and don't do this people. - So in the past, - someone figured out that if you put incorrect characters into the CSS property like slash - marks that certain browsers will will ignore the slash mark and another browser will, - um, - another browser will in fact still process it and read it. - So you know, - one browser might say, - Oh, - I can Onley understand this with of 100 pixels because it's written correctly. - And then you would actually write the wits several times, - but for a different browser. - So another browser, - because you put a slash here, - it would ignore it. - And yet one browser would would still, - uh, - except this value and then change it toe 1 40 So to basically make up the bake up for the - fact that Internet Explorer was displaying differently. - What people would do is they would put little funny slash marks and characters into the - width and height attributes, - and they would apply, - you know, - multiple CSS telling different browsers to display the with in different ways. - This actually gives you a validation error. - If you validate your CSS, - it gives an air. - This is kind of like a quirky solution. - I wouldn't really trust this down the road. - Um, - the one reason why you shouldn't use this is even if even if it works now, - there's no guarantee that these things are going toe work in the future. - And you're not gonna want to have to go back into your site years down the road and remove - some kind of hacked code like this. - So really don't use this method. - This other method is called box in a box method, - and this will work in all browsers, - old and new. - It is a little bit more of a hassle than the last method I'm gonna show you, - but this one does work. - And, - um, - this is kind of centered around the idea that the only difference between the two competing - box models is that one of them, - except padding and border into the wit and the other one does not include patting and - border into the with. - So really, - if you make a box that doesn't have padding or border on it, - then there's no difference between all the browsers. - So this method requires extra markup code, - which is why a lot of people do not like this method. - What that's personally one of the things I'm not quite sure about this method is that it - always involves having to make two boxes instead of one. - But the way this works is you create an outer box. - So this div here is the outer one, - and this one has a wit specified, - but it has no margin, - no padding and no border. - We actually should have written Border zero in here also, - but you get the point so it has a width and height specified, - perhaps, - but no padding and no border are the main important things here. - So this one is going to display this outer boxes going to display the same in all browsers - because there's no padding included and no border included. - Right? - So it's faras Firefox and Safari and Internet Explorer concerned. - It's 100 pixels wide because there's no inclusion of padding or border. - Um, - and then for Internet Explorer, - it also sees it is 100 pixels wide. - But then you might wonder, - but what if I do wanna have padding? - What if I don't want all of my content to be right up against the edge of my element. - I want some comfortable spacing for the I. - So what you can do there, - then, - is you can create another box inside of the element an inner box, - for example. - And this one we can give it padding. - So this guy here has padding inside of it, - but we've we've purposely not specified a with. - So if you if you do this method, - it'll actually work in all browsers. - But your HTML code is twice as many lines of code, - usually because you have every single element has a box inside of another box. - Okay, - so nowadays we have the in CSS three. - We have this wonderful property that came along called Box Dash Sizing, - so I can tell my elements to have box sizing, - and I can specify how it should measure so I can force, - you know, - all browsers to either use the Internet Explorer model, - which is called Border dash box. - Or I can force all browsers to use the W three, - uh, - model called content dash box. - Okay, - so here I have written down that this has 94.3% support, - at least at the time of recording this video, - the the amount of browsers that people are using globally worldwide that support or - understand the CSS three property box sizing isn't about 94%. - Now the good news about this is that the browsers that do not understand that small - percentage that do not understand this this box sizing property happened to be Internet - Explorer older versions of Internet Explorer like I E seven and below. - So it turns out that those older versions of IE they actually use this measurement the i E - box model. - So if you set your box sizing to border dash box, - you really should have 100% support. - Whereas if you said it to the W three Method content box value. - If you write content box here, - you really only have about 94% support. - So in this case, - um, - I kind of let the politics go in terms of who's right or who's wrong. - And I like to use the I E box model method by saying box dash sizing Border box. - This is going to make your float positioning and your page layout in the sizing of your - columns. - So much more worry free and hassle free, - which you'll see as we move on to the next exercise, - where we build some page layout. - Okay, - so here is that actual chart I was showing you, - and you can see it's really IE seven is the culprit. - So let's talk about scaling elements. - Certain elements can have a fixed size in pixels. - You can use pixels to create a static or a fixed amount of with their height and on all - devices, - all screens. - It will always have that certain amount of pixels. - You can also use a percent to scale things, - so it's just in the same way I can say, - 200 pixels wide. - I can also say, - like 100% wide or 50% wide and using a percent is going to make the amount fluid, - meaning that it's going to respond to the size of the device. - It can actually, - um, - you know, - shrink and expand ah, - percentage of the available screen space based on whatever value you put before the - percentage. - We also have the the ability to set men dash width and Max dash with or min dash height and - max dash height. - So by setting minimum and maximum values. - You have a threshold where it won't ever scale below the minimum value or above the maximum - value. - So the element can still, - um, - expand dynamically on the page based on the size of the device or to the size of the - browser window. - But you will have a stopping point, - a minimum threshold where it will stop to. - It will stop shrinking at the men with or the men height, - and it will stop growing at the max with or the max height. - Okay, - we also have a value called auto and auto is really the default with or height. - Basically, - setting A with their high toe auto is essentially the same, - is not specifying a with their height, - a width of auto on an in line element will basically, - as you know, - just allow the content. - Excuse me. - The element toe only BIA's wide is the content versus a block level element. - If you set something to a width of auto, - black level elements will actually take up without A with specified, - they actually take up 100% or the full width of the screen, - so auto will, - you know, - do different things for width and height, - depending on the way the element is displaying, - whether it's displaying in liner block or in line dash block. - Okay, - let's also talk about content. - Overflow. - So what if I set a fixed with to an element, - But then there's more content than will fit, - then we'll fit inside of that element. - So what if I make a 100 by 100 pixel square and I place a lot of content inside of it and - it doesn't fit? - Well, - it turns out you can actually change that by setting overflow property to visible, - hidden or scroll. - Let's take a look at that really quick in the browser so we can use these examples. - Here we have box one and two, - and, - um, - let's just start adding some more content here into the box. - I'll just start typing out like that. - Maybe would do a couple line returns here. - I'm just typing some jargon here. - Okay, - let's run that and see what happens. - Okay, - so this did exactly what we were talking about. - Um, - and also we left. - This is in line block. - You can start to see some of the strange, - goofy things that in line block elements do. - I'm gonna go and switch this back to block, - so it's a little less confusing there. - Okay, - so this first box, - it only has the Texas says one in it. - This next box says to, - But we typed more text and will fit. - So let's look at the difference on a block level element when we specify a height or we did - not specify a height. - So here we have the height specified of 100 pixels. - Let's just go ahead and set this the auto, - which is really which is the equivalent of not specifying a height. - We could really just erase that property. - This is the height. - Auto is really the same if we just erase that right? - Okay, - so ah, - height of auto or not specifying a height on a black level element, - or actually also on an in line element, - will allow the content to grow Aziz much as it needs to to fit the content. - So a lot of times were purposely not specifying a height. - If you have a box in your layout and you know you say you have multiple news articles and - you're not sure how many will be in there or in the future, - you might update it. - You might have more and more articles. - Um, - oftentimes, - you just won't specify height because when no height specified the elements just going to - grow as tall as it needs to it's going to expand based on how much content is inside of it - . - Okay, - um, - let's actually go back to specifying height. - Then let's give this a fixed height like we had before. - So we'll say, - um, - Heights Colon 100 pixels. - Okay. - And we'll run that again. - Okay, - Excellent. - So when I give this a fixed height, - I have to be careful because this height is not tall enough for all the text I typed in - here. - Okay, - um, - now we can control that by using a property called Overflow. - So let's come down here and let's go ahead and say Overflow, - Colon and let's try one called Hidden. - Let's say overflow hidden. - Okay. - And then we'll run that and see what happens. - So overflow, - hidden Well, - actually hide any content that overflows outside the height or the width of the element. - So it's actually chopping off the content there. - I can't see it. - Um, - occasionally, - you might want to use this if you're doing something a little more dynamic. - If you move on to JavaScript, - for example, - you can use overflow hidden, - um, - you know, - paired up with some JavaScript to animate or slide content inside of a smaller fixed - container. - So, - for example, - if you're building an image slider, - you could set an element to have its overflow set to hidden, - and you could make mawr images than will fit inside of that frame. - And then you can use JavaScript to sort of animate them. - So an arrow moves those images left and right, - and you're only able to see one image at a time, - the other ones air hidden because you have the overflow set to hidden as an example for - usage of that, - um, - you also have people sometimes doing something called Overflow Auto. - Let's see what that does. - If I change the overflowed auto, - I get a scroll bar. - So in in Lyon and Mac line, - you might not see the scroll bar because you'll have to hover over. - And then if you, - um if you use the two finger touch on the touch pad or your your mouth scroll wheel, - it will actually scroll It's just that they hide the hide the scroll bar here, - but you can see in in windows and also in ah, - Mac Snow Leopard. - You'll see. - Most browsers will create a scroll bar here. - So if the content is larger than will fit, - if we set the overflow toe auto will actually get a scroll bar will appear. - So in this case, - I have a vertical scroll bar. - The content was very wide. - I would get a horizontal scroll. - Bar is Well, - okay, - so that's the overflow property, - which is useful for controlling. - Um, - you know how content inside of an element will flow whether it flows, - overflows outside of the element or not. - Okay, - great. - Um, - since we looked at how high it responds again, - we noticed that if we set the height to auto or we remove the height, - we noticed that the content simply expands as tall as it needs to be. - Let's take a look at what happens if we set the with the auto or, - in other words, - if we just remove the width cut. - So again, - um, - these air block level elements or they're displaying block. - And if I don't specify A with for block level elements they just get is wide as they can be - . - They basically take up 100% of the screen space. - Okay, - um, - which which is exactly what we want. - Sometimes. - Occasionally, - we want something to stretch the whole width of the screen, - and you can just use a block level elements and not specify it's It's with you. - Could also said it's with 2 100% if you like. - Okay, - um, - let's take a look at the different possibilities for sizing then. - So we looked at, - um, - we looked at displaying in line versus block. - We looked at setting the width and height auto or to fix pixel amounts. - And we looked at how overflow reacts if there's not enough space for the content to fit - inside the element. - Okay, - um, - so let's take a look at a few other possibilities for width and height. - Um, - let's come back here to with and let's go ahead and try a percentage. - So we looked at pixels again. - I'll do that. - That was This is 200 pixels, - for example. - I can go ahead and change with their and run, - and you can see 200 pixels of with their What if I say something like 50%? - So we'll take the P X off here and we'll put 50% like that and run, - and you can see it's actually taking up 50% of the available with here. - You'll notice if I crunched this guy in like this. - See how it's actually always exactly about half of that space there? - Okay, - so, - for example, - if I did like, - you know, - 75% as an example, - it's then taking up 75% of the spit on the outside, - of course, - and the padding inside because we haven't set the box sizing property yet, - but you can see it's taking up approximately 75% of the space there. - Okay, - so that is a fluid sizing. - Sometimes we want to have things size, - Ah, - scale based on the width of the available screen space. - And that's using a percentage. - Let's also take a look at Min and Max value, - So I'm gonna change this guy to a men with men Dash Wits Museum in on that. - So it's easier to see so we can save men. - Dash with, - we'll go out and say 200 pixels. - And we'll also specify a max dash with and we'll say like, - 600 pixels like that. - Okay, - so men dash with and Max dash with You can also do Min dash height and Max dash height and - we'll go and click. - Run. - Okay, - so this is actually the 600 pixel maximum with that we're seeing here right now. - Even if I give more space on the screen, - it's gonna Onley be a maximum with of 600 pixels there. - And in this case, - it's 600 pixels plus the padding and plus the margin because I'm in chrome, - Right? - Okay, - let's see what happens if I crunched this down, - I'm gonna drag this window over to give it less available space. - Okay, - so here I reached the edge. - Oh, - look, - it's scaling down its scaling down. - No problem. - It's going to keep scaling down until I reached that minimum with and then it's gonna run - out of room. - Okay, - so there, - when I get down to minimum with you can see we actually get a scroll bar here on the bottom - of the screen here, - and I have to use that scroll bar to scroll over and see the rest of the content. - And that's because we used the thresholds of, - you know, - a maximum amount of 600 a minimum amount of 200 like that. - And again, - it will just expand until we get to the max with. - And then it will stop. - Okay, - great. - So that's a good start. - Understanding box model. - Let's come back in and talk about some of the other qualities of box model such as margin - and padding and border. - So let's start off by adding a border to this guy. - We're gonna come down here and let's go ahead and add a border to these boxes. - Let's say border colon one pixel, - which is the width of the border. - And then I'm gonna put a space, - and I'm gonna specify the style of the borders were just gonna do solid. - And if you'd like to see an example of the other border styles, - will be looking at that coming up in the slides here in a moment. - Ah, - and then we can give it a color. - So I'm just gonna say black will specify the color black. - There we go. - So we'll come back out and we will run this and there's my border. - Pretty cool, - right? - So I can actually, - you know, - change this If you want to see, - like what it looks like at 10 pixels, - if I say 10 pixels of border and I run, - you can see it does that. - Let's change it from solid to dashed so we can demonstrate where the edge of the background - color ends here. - So if I say 10 pixels dashed and I click run, - you can see it's now a dashed line for the border and you could see the background color - goes right up to the edge of the border right there. - Okay, - We'll make this a little bit thinner, - though. - I'm gonna go back to a one pixel solid like that. - And, - um, - let's play around with the spacing, - then. - Okay, - so we talked before about margin and padding. - I'm gonna go ahead and change. - This guy's with back Teoh. - 101 100. - So we'll stay. - 100 pixels. - 100 pixels. - Used to make them little small, - manageable. - Little small, - manageable boxes be easier to see here. - Well, - then we can zoom in closer like this. - So let's take a look at padding. - Now we mentioned padding is spacing inside of the element. - If you really want to see what that's all about here, - let's set this padding to zero and let's see what happens there. - We'll click run and you can see when we set the padding to zero. - The text is right up against the edge of the border there, - so zero padding means no spacing inside of the element. - Now, - if I placed 10 pixels here like this 10 p x and we come out and run, - you can see now there is 10 pixels of spacing around the element. - And here because we have the scroll bar some, - it's actually just chopping it off there. - But you know, - in fact, - what's this is kind of messy. - I'm gonna get rid of that since we've already learned about overflow property. - Let's just bring this back nice and simple here. - Like that one in two. - Okay, - um great. - So padding is the spacing inside of the element? - What if I wanted a different amount of padding on each side? - So, - for example, - right now, - if I just use one value if I say patting 10 pixels, - it adds 10 pixels on the top, - the bottom, - the left and the right side. - So in CSS, - we do have the ability to specify things like padding, - dash left, - you know, - patting dash right, - patting dash top and patting dash bottom. - And then you can change the amount of padding on your side. - Um, - now, - however, - it's actually even easier or Leicester type. - If you use the shorthand method called patting, - and then, - based on the amount of values you give it, - it will affect which side is affected. - So, - for example, - if you do one value like this, - we know that, - um, - one value, - um, - will effect all the sides. - So if I just say 10 pixels, - that means 10 pixels on all sides. - If I say to values like this, - if I say 10 pixels 20 pixels just by putting a space in between here, - I put multiple values in this case to values for two values. - Here, - the first value, - um, - represents the top and bottom. - So both the top and bottom and the second value here represents the left and right, - or, - you know, - both sides. - Let's go ahead and put this comment down below here, - so they fit like that, - We'll separate thes like that. - Okay, - so one value affects all sides. - It means that we have padding on all sides to values represents that the first value is 10 - pixels on the top and bottom and 20 pixels on the left and right. - Okay. - We can also specify padding with three values. - For example, - if I say, - like 10 pixels, - 20 pixels, - 35 pixels or something like that. - So in this case, - if we have three values, - the first value represents the top to the 1st 1 equals the top. - The second value represents both sides, - both left and right, - and the third value here represents the bottom. - So if I say 10 pixels, - 20 pixels, - 35 pixels, - what I'm doing is I'm telling the browser I want 10 pixels of spacing inside the element on - the top 20 pixels of spacing on both sides and 35 pixels of spacing on the bottom. - Good. - And if for some reason I want to have a different amount of padding on each side, - I can specify four values. - So, - for example, - I could say, - like, - you know, - 10 pixels, - 20 pixels, - 35 pixels, - five pixels something like that. - So in this case, - we have four values. - And the way you can remember this is think of a clock and remember that you start at the - top at 12 o'clock. - So the first value, - if we imagine this is a clock is the top, - right? - And then the second value here represents the right side moving around clockwise. - And the third value here represents the bottom, - and the fourth value represents the left side. - Okay, - So depending on if you have 123 or four values, - that's actually gonna change the spacing in the browser. - Okay, - so I could say, - padding 10 pixels, - 25 pixels. - Animal. - Zoom out here and we'll run this guy in the browser. - And you can see that there's 10 pixels on the top, - and, - uh, - well, - actually, - it's the top and bottom, - but there's nothing down near the bottom there. - And then we have 25 pixels on the left and right, - so you can see 25 pixels here. - There's more. - There's more spacing on the side than on the top. - Okay. - And that's by using the two values 10 and 25. - Okay, - so this is the case for margin. - Also, - um, - margin can be different values. - Here, - you can say margin, - 10 pixels, - 35 pixels, - four pixels. - And that's going to change to be 10 on the top 35 on the sides and four on the bottom. - Something like that. - Okay, - so margin is the spacing outside of the element. - Let's actually just keep the margin the same on all sides. - But we'll say, - um, - we'll make it a larger amount. - Let's say 30 30 pixels to see what happens there just to demonstrate that this is spacing - outside of the element. - So we'll go ahead and click. - Run, - and you can see there's more spacing now outside of the element. - Okay, - so, - um, - padding is spacing inside the element margin is spacing outside of the element. - It pushes elements away from each other from their outside edge. - Okay, - Um, - so this is 30 pixels. - You may notice. - Here's 30 pixels on the top, - 30 pixels on the left and right and 30 pixels in the bottom. - But wait a second. - Here. - Doesn't this one box one here have 30 pixels on the bottom and doesn't box to have 30 - pixels and margin on the top. - That's interesting. - So you would think that because they're supposed to be 30 pixels below this one and 30 - pixels above this one. - That those values should add together and 30 plus 30 should be 60 pixels. - In fact, - there's not 60 pixels of space here. - There's only 30 and that's because of the way margin behaves. - Margin can overlap. - So, - for example, - if I said the will go ahead and play around with this by setting the top margin to 30 - pixels, - let's say the left and right margin is 10 pixels. - But let's put more on the bottom, - Let's say 50 pixels from the bottom. - Okay, - so now the box number, - once you have 50 pixels of margin on the bottom and box number two should have 30 pixels of - margin on the top. - Okay, - so if I refresh that, - it turns out that the 50 pixels wins, - so this one has 50 on the bottom, - so it's actually pushing this other element 50 pixels down. - This one here has only 30 on the top, - which probably ends around here. - So, - um, - this one pushes 30 pixels, - but it's already being pushed 50 pixels apart. - So these margins air just overlapping. - They don't accumulate, - they don't add together. - So that's one thing to be aware of about margin. - Okay, - so that's great. - We learned a lot here. - We looked at sizing these boxes. - We looked at adding background colors, - borders and affecting the way it displays using display property affecting the overflow of - the content using overflow. - We also looked at exploring the spacing inside of the element, - using padding and outside of the element using margin. - Okay. - And we also learned about sort of the differences between the the box sizing and Internet - Explorer and the box sizing in the other browsers. - So, - as we move on to positioning will come back to to this box model on, - and it will be useful for us when we begin creating column structure. 31. Box Aesthetics: - Let's just go ahead and jump back to the slides and we'll move on to box aesthetics. - Okay, - so we saw that we could add a background color. - But what if we'd like to add background images into our layouts, - which will be doing in the exercise? - I'll be demonstrating that an upcoming exercise we also looked at border will take a few. - We'll take a look at a few other possibilities for border in terms of border styling, - and we'll also look at something called border radius that we can use to around the edges - of our boxes. - So if we don't want sharp squared off edges, - we can also have rounded edges using CSS three border radius property. - We're also gonna look at box shadow to add shadows, - which will demonstrate in the exercise will also look at opacity, - which gives us the ability to make an element see through or transparent. - So even if you put in in image into and you want that image to be partially transparent, - you can set the opacity property of an element to make it partially see through. - We'll also look ingredients that allow us to add a faded from one color to another color - inside of an element as opposed to just having a single background color. - Okay, - so these air some background properties. - Ah, - So we've seen the background property here at the bottom, - and it actually accepts all of these different values up here. - So you can also say background, - dash, - color and just simply specify a color. - These little horizontal pipe symbols here just meant to represent or meaning you can use a - color name or hacks a decimal, - or it will accept the RGB values. - Here. - We can also say background dash image, - and we can see you are l. - And within parentheses. - We can point to the location of a specific image. - Now this will actually put an image into our element, - and this is different from the image tag. - The AMG element, - which creates, - essentially, - creates a foreground image. - Whenever you create an image using the image element, - it actually takes up space in the layout, - and you can't put things on top of it, - whereas with a background image, - you can type on top of a background image. - You can put other elements on top of a background image, - and it will just slide behind everything. - Okay, - so they're they're real cooperative. - They'll just stay behind anything you put on top of it. - And a lot of times, - people use this to create textures in there. - Website, - for example, - You can if you have a camera, - you can go out and take pictures of the world and throw. - That is a background image behind your website elements you can. - Also, - if you have a scanner you can like scan pieces of paper, - you can go outside and take like leaves off of a tree. - Throw it on the scanning bed and you can scan it. - I once had a teacher in, - Ah, - in my undergrad who was showing us the things you can do it Saran wrap in a scanner, - which is actually quite interesting. - So if you have a scanner and you don't want to damage it by putting like liquids and things - on it that can harm electron ICS, - you can actually Saran wrap your scan bed and you can like cracker raw egg on it and scan - it. - And if you zoom in on that, - you can get all kinds of interesting textures and stuff. - It's kind of like looking through a microscope if you zoom in on some high resolution scans - , - but anyways kind of going off on a tangent there. - At any rate, - background images are a great way to had some vibrance in some personality to your website - . - Okay, - we also background dash position, - and this allows us to position the images position background images so we can move the the - image inside of the element. - If we need to position T view a different part of the image or to make the image appear in - a different corner of the element. - We could also specify whether or not that image repeats. - So sometimes we want, - like a texture or a tile pattern, - to repeat multiple times in a element as a background image. - Other times we only want to show a single image inside of the elements, - so be able, - being able to say background dash, - repeat and specify whether something repeats or not is very useful. - So you can see you can uh, - this accepts the values of repeat. - It also accepts repeat X, - which is repeating horizontally. - It also accepts repeat desk. - Why is a value which is repeating vertically, - and you can also say no repeat, - which means it will not repeat it. - All we can also set Background scroll and Background Scroll is going to affect whether or - not that image will scroll when the browser scrolls. - So if the user is scrolling down the page, - we can control whether the image states fixed in place or whether it follows the scroll bar - . - So that's kind of a need effect you can control. - We can also say background dash sizes, - a new CSS three property. - And although this doesn't have full support everywhere, - this can be a useful way to make background images that will automatically stretch to the - size of your browser. - So if you put a, - um, - a background image into the body, - um, - and you said it's background size to 100% for example, - for heightened with, - it will stretch the image so that as the browser window becomes larger, - smaller, - that image will scale with it. - So that's kind of a neat effect that you can create using background size. - Well, - look, - it's we'll get some examples of this in the exercise coming up now. - A lot of these things, - with the exception of these last two background scrolling, - background size thes 1st 1234 properties appear can actually be written in a single - property here called Background. - So this would be the shorthand similar to the way we have font for shorthand. - You can just say background and instead of saying background dash color, - background, - dash image, - background, - dash position, - background, - dash. - Repeat, - you could just say background. - And by putting a space between the values, - you can specify Ah, - color and image, - and it's repeating and positioning information all in a single value. - This is an example of the border shorthand, - which we just looked at, - Um, - and this is shorthand for border dash size, - um, - and border dash color and border dashed style. - And you could see all the styles here. - Solid, - dash dotted, - double groove, - Rhijn said Outset. - And this is what they look like. - So solid makes a solid line. - If you set the border cell to dash to get a dash line, - which we saw Dotted makes these little diamonds Here. - Double is a double line and Groove Ridge incident Outset. - Take whatever color you specify, - and they create like a light version in a dark version of the same color. - I believe it's a 50% of 100% Phil for whichever color you select for the border. - So these were some other possibilities for border style that are accepted. - And these all work everywhere. - These are working all browsers, - old and new, - because border style has been around for quite a long time. - Okay, - so new and CSS three, - we also have border radius and border radius is ah is the way that you're going Teoh round - the corners of your elements if you choose to. - Okay. - So in order to get to work everywhere, - we use border, - dash radius And this is a prefix called dash Web kit. - A lot of times when a new CSS property is introduced into into CSS, - what happens is different. - Browsers have to determine how they're going to accept that property and how the value will - affect their particular browser, - how their particular browser will display this property in this value. - So what happens a lot of times is that different browser companies, - while they're still making decisions and determinations about how they will accept those - CSS properties and how they will display those values, - they create something called a prefix where they take the name of the property. - But they add a dash and then some sort of prefix on the beginning that allows them to - control. - It's kind of like an experimental future, - too, - to allow them to control the value in a specific way in their browser. - That won't affect other browsers. - So, - for example, - dash Web kit is going to affect border radius and browsers like chrome and safari. - Whereas for Internet Explorer, - um, - actually, - Internet Explorer older versions of IE are not accepting border radius, - so we don't really have to worry about that there. - But whereas for Firefox you can just now say border dash radius, - for example. - And you know, - a few few months to maybe was about a year back. - You used to have to use Dash M o Z dashboard a radius for fire Fox. - Now you can just say border radius and it will believe actually in chrome this works now to - a time moves on. - You can a band, - you can abandon the prefix here. - Okay, - so, - border radius um, - you can also specify which corner of the box you're interested in rounding so by saying - like border dash top dash left you can rounded just the top left corner of the box, - or you can say top dash right or bottom dash, - left bottom dash right. - And you can make the rounding of the sizes of the corner of the box different on different - corners. - Um, - by putting a single value, - it will around it evenly. - What this does is it takes from the corner where the point would have exists. - It actually goes 15 pixels and rounds 15 pixels off the corner of the element. - Um, - if you use two values here, - you can control the difference between the horizontal versus vertical. - For example, - this first value here says border radius 100 pixels and then space 50 pixels. - You can see here on the top, - there's actually horizontally. - There's 100 pixels rounded off and vertically. - There's only 50. - So this makes a different shaped curve here versus 50 pixels. - 100 would do this. - Okay, - so you can apply multiple values here, - Teoh multiple pixel sizes here to the border radius, - and you can change the way it rounds. - Ah, - this is a current support. - At least at the time of recording this you have about, - you know, - 80% global support for border radius. - It works an Internet exploring nine, - but I e eight and seven just do not support it at all. - So it's worth noting that, - and that basically what happens is there's really no harm done. - It's just that in i e eight, - it will ignore that border radius property and you just have square edges on your elements - . - Okay? - We also have box shadow. - If any of you are familiar with Adobe programs like Illustrator and Photo Shop, - where you can add a box shadow or a drop shadow, - it's called rather in CSS three week and also now at a box shadow. - And it looks pretty much exactly the same and has the same sort of settings that you would - get for photo shop. - Um, - so this is actually a really nice way to add shading and shadows on elements, - so it ah, - the way to right this is we say box, - dash shadow. - And to get this to work and even older browsers, - you can use these prefixes Web kit and M o z to get it to work there. - Ah, - Web kid is gonna be for safari and chrome and M o Z is gonna be for older versions of Fire - Fox here. - Okay, - so here we have boxed ash shadow, - and the first value you can put is called horizontal offset. - So five pixels is gonna push the shadow five pixels to the right. - Um, - negative value would push it five pixels to the left. - Um, - and the next value is vertical. - So that's gonna put it five pixels down. - A negative value would make the shadow go up five pixels to the top. - If he said negative five pixels, - for example. - And the third value here is called Blur Radius. - This is how far the blur spreads. - If you say zero pixels, - it will be a very sharp edged shadow. - Um, - whereas if you add a higher number of pixels for the blurriness it will soften, - it will feather the edge of the shadow. - And lastly, - we accept the value of color so you can use any color here. - Here. - They've used a gray color to demonstrate that, - and we'll go ahead and add this in our exercise. - We're gonna add some shadows to a few different sections of the page, - and you've probably all seen some example of opacity. - This is an example of someone using opacity on the menu. - So there's a drop down menu and that men you see through so you can see the image behind it - . - So opacity is written using the opacity property and giving it a number between zero and - one. - So CSS three The modern way of doing this is just saying opacity and 0.5 would be the - equivalent of 50% opacity and one would be the equivalent of 100% opacity. - Now, - if you have a solid color, - you're really better off to use the RGB property for color and just set the background - color with an RGB a value. - So remember a in rgb a is Alfa. - We looked at that in a previous exercise. - You can go back and check that out if you like. - When we get there was when we first started CSS. - You can check that out under color systems video for CSS. - The reason why you would want to use RGB a value as opposed to a passage if you're just - doing a background color is it's a little simpler to just make the background have - transparency versus the entire element. - So one thing to be aware of here is if you set the opacity to a lower value here, - it's not only going to affect the background, - but it's also going effect all of the things inside of the element as well. - So if there's any texture images inside of the element, - it's also going to make them opaque or partially transparent. - Up here, - you can see all the fall back solutions for older browsers. - This is for very old, - like safari one. - You can use K html dash opacity to affected in older versions of safari. - Um, - super old. - I'm not sure how maney I mean, - I started doubt that, - you know, - it's got to be, - like 1% or less than 1% of the population, - using like thes first versions of Firefox and Safari. - I wouldn't really worry too much about these for Internet Explorer. - You may have to use the filter property to get this to work in i e. - And this one's gonna work for you pretty much everywhere else. - Outside of AII is using opacity. - Here's the current global support for just using opacity. - Um, - you can see that really you can now just use the opacity property, - and you're gonna get about 95% global support for that. - Oh, - yeah. - And it even says here that, - like, - for i e eight, - you should use the filter. - So for 87 88 you should use this filter property here for those people, - which is probably about less than 10% of the population there. - Okay, - so here we have Grady INTs. - So when you say background dash color, - we know that we can just specify a color. - This is a hexi decimal color. - Not really quite sure what color this is exactly. - But you can give a solid color to a background. - Um, - and then you can also use background dash image. - And instead of linking to an image, - you can specify a Grady int, - and you can see here, - this is the, - um this is the prefix for Firefox, - and this one is a prefix for, - um, - safari and chrome, - which uses the web kit. - Um, - and hear what you do for Mazzilli, - right? - It a little bit differently than for thesis. - Afari in chrome. - You write it this way. - Using color stops from Mozilla It's pretty simple. - You just use, - Ah, - color hacks, - a decimal color, - and then you put a comma and put the other color that you'd like it to fade into. - Um, - for Web kit, - you can specify the type of Grady in. - It's a little more sophisticated. - You have more possibilities. - You could make a radio Grady Int or a linear Grady Int, - and you can specify the ah, - the positioning of where it starts and stops and the percentage of the element that it - measures across. - And you can also set color stops so that the first stop has this color in the second stop - has this color, - and we'll actually take a look at using some online tools in the exercise to create these - Grady INTs. - So Grady and support isn't quite as good as the other ones I had shown you. - Even using the Web kit in M O Z prefixes. - There's still some browsers like Internet Explorer nine, - even which is not even really all that old doesn't support it at all. - So we really only have about at least at the time of filming this video, - we really only have about 65% of the global support. - So what you do is you specify a background color. - And if the the older browser can't understand the Grady int this fading color, - it's just gonna default to having a solid colors. - You just pick a color that you're okay with as a fallback solution for older browsers, - and it should work just fine still. 32. Floating: - next let's talk about floating or float positioning. - So this is gonna be your go to solution for creating column structure in your page layouts - you can see in this example here this person has a header and a footer at the top and - bottom of the page, - and they'd like to create a sidebar that's positioned to the left of some main content. - That's position to the right here. - So by using floating weaken, - tell one element to float to the left and this other element here to float to the right. - And that's going to allow us to have block level elements that can appear side by side. - So if we set the sidebar, - say that this one here is a div that has an idea of sidebar and maybe this is a def has an - idea of I mean, - we can then set pound sidebar to float colon left and weaken set main to float colon right - , - so the float property allows us to specify either left or right. - So whenever you float elements, - we have to be aware that there's some goofy things that are gonna happen so initially when - you first start learning float positioning it can actually be quite frustrating. - But as long as I clearly explain to you all of the issues that you may run into when you're - using float positioning, - then hopefully you won't be asked, - frustrated, - and you'll have a clear understanding about why certain elements are misbehaving. - So in this example, - they actually floated the main content to the left, - and they decided to float the side bar to the right and they had a footer that was - underneath down here. - But what happened? - It's kind of strange. - The footer was supposed to stay at the bottom. - Remember, - up here we have the footer at the bottom. - But for some reason, - when I float things, - elements that are below things that are floating tend to try and pull up beside them. - Now. - Sometimes this is desirable, - so sometimes we want to wrap text around images and a page, - and things like that and floating is great because whenever you float something, - elements that are below the element that air floating are affected by that, - and they will tend to pull up next to it if they can fit there. - So in this case, - the footer have some space to fit below the sidebar. - And since these things are all floating, - it's going to try and pull up beside or next to the things that are floating. - And that's simply because the footer was physically in the code below the things that are - floating. - So it's pulling up next to it. - Now, - if we want to prevent this, - we can actually stop this from happening. - Sometimes we actually want this to happen. - It's a good thing, - and other times were upset because this element shouldn't be up here. - We want the footer to go back down here. - So if we want to tell the footer, - um not to not to move up next to the floats, - we can use a property and CSS called clear. - We can say clear both so by saying Footer clear. - Both were able to get that footer to clear Past the height of those elements so clear - accepts three different values you can say clear left and that will clear past the height - of anything floating left and on. - Lee passed the height of things floating left, - and you can also say clear right, - which will clear past the heights of anything floating to the right, - or to cover all your bases. - You can say clear both, - and it will clear past the height of both things that are floating left or right. - Okay. - And again then that allows the footer to clear past the mean content and the sidebar. - Okay, - okay. - So is if that isn't really enough, - sort of goofy occurrences that floating causes floating has a few other things that it does - that it's a little bit strange. - But again, - as long as we understand why it's doing it and how to fix it, - it won't be frustrating for us. - So another issue that you sometimes get when you're floating an element is you get - something called a collapsed parent. - So imagine that this gray box here is a parent, - meaning that it's a container, - and we place these boxes inside of it. - Okay, - so here I have tax inside that says, - I'm a static parent, - right. - And I floated these three boxes to the left in this box to the right. - One thing will point out here is that when you float something to the left, - if there's other elements that can fit there that are also floating to the left they're - just going to stack up side by side like this. - So sometimes you can create multi column structure simply by floating everything in one - direction, - which is kind of a cool trick to do that. - Okay, - so it turns out, - though, - this is just something to be aware of. - You have toe just always keep in mind when you're floating something is that whenever you - float all of the Children inside of a parent, - it's a Ziff. - The parent no longer has a reference for how tall to be. - The metaphor I used for this is Imagine that you know, - normally elements. - Ah, - when they're inside the parent, - it's like when they're in high school and they haven't graduated yet. - They haven't gone off the college. - Um, - and the parents keep their room for them. - Like if you're still you haven't gone off the school yet. - You're a static element. - You're not positioning at all. - You're not floating yet, - So when you're in high school, - you're not floating and your parents keep your room for you. - They're like, - Oh, - this is your room. - It's your space. - You live here. - And for that reason, - the parent has a reference for how large to be right. - It can surround the child. - Okay, - Now, - when you float an element, - it's kind of like sending it off the college. - It's like it floats away. - So it's kind of like it left home. - And even though it appears to be inside of this parent element, - it's actually floating. - So these guys were floating left. - This one's floating right. - And since all of the Children they floated off the college, - the parent isn't keeping their room for them anymore. - Like basically, - the parent no longer has a reference for how tall to be. - So it collapses. - Or maybe you could say that the parent collapses cause they get sad because all of its - Children floated away. - So we can actually fix this by using something called clear Fix, - which is sort of a CSS hacker, - a solution that developers have come up with along the years to to fix this issue. - So you can actually stop apparent from collapsing even if its Children are floating like - this and get this effect by using something called the clear fixed Solution. - Now, - this looks like a lot of CSS, - but I'm gonna break this down for you. - Basically what's happening here is you're creating a class, - and you could name this class anything you want. - Typically, - this is called clear fix. - And in fact, - if you open up your browser and you Google clear fix, - it will come up with tons of sites that where you can copy and paste this code so you don't - have to memorize it. - And also a lot of discussion on it and why we use it. - Um, - I'll actually provide a link below the video there will, - linked to its tutorial giving the code and also discussing clear fix. - So first thing we do is we create a class, - and I chose to name this clear fix, - which is the common name people call this. - And then we're using a special pseudo class selector called After We're saying colon after - . - Okay, - So what after does is whatever element that you apply this class to, - it's going to go inside that element, - and after all of its Children, - it's going to apply this style that you put here. - I'm gonna say that one more time. - So by applying the pseudo class selected here, - colon after that's going to allow it to function so that whatever element we apply this - class of clear fixed to its going to go inside of that element and after Colin, - after all of its Children, - in that element in in our case, - all of after all of the floating Children it's going to apply this style. - So what we're doing is we're adding a property here called content and in quotes. - We're going to put some text. - You can actually literally type the word hello here, - and you will see the word Hello will appear after all of the floating elements. - So content is the way you can actually use CSS to insert text content into an element. - Okay. - And this is actually the only time I use this property because I like to reserve CSS for - styling. - And I like to reserve html for actually creating text and physical content that's abiding - by a theory called the separation of concerns. - Where we want to separate HTML is being content and CSS to being style. - This is one small exception to the rule where all actually add a period symbol after all of - the content that I know this sounds crazy, - but stick with me here. - Hang in there in this all slowly come together and make sense why we're doing this. - So basically, - we create a class called clear fix. - We say colon after and we're going to apply it to the parent that's collapsing. - So what's going to happen is whatever parent you know, - the collapsing parent that needs to clear past the floating Children, - we apply this class to it. - And inside of this element, - this collapsing parent, - it's gonna go after all of the floating elements because we use the colon after and it's - gonna add a period symbol. - Actually, - physically a little dot will appear that the period symbol or the text character of the - period will appear below all those floating Children. - The next thing we do is we tell that content to display block, - and I remember block level elements, - their king of the horizontal space. - They take up all of that horizontal space down there and since we don't have a with - specified for the content, - it's just gonna take up 100% of the space inside of that parent container. - So now our little period symbol is a block level item in the page and takes up all the - horizontal space, - and then we use our friend Clear both. - Remember, - we use clear both before on the footer. - What does cleared you will clear, - you'll remember is what we used to tell any element in this case, - this little period symbol content to clear past the height of anything floating. - So this moves that period symbol to clear past the the height of the floating Children. - Okay, - um and then we we basically have a reference for how tall the parents should be. - The parent container now knows how tall to be, - because this period symbol has been pushed down below all the floating Children. - It's kind of like, - if you imagine, - if we use the metaphor of the floating elements are kind of like the Children floated off - the college. - This clear fix solution is kind of like having a foreign exchange student come and stay - with the parents so that they know basically to take over your room so that the house - doesn't close up right or in other words, - so the parents aren't sad. - They don't collapse their height. - It gives the parents or reference for how tall to be because there's an exchange student - hanging out in there in this case of period. - But we don't want to see this exchange student because that's gonna make our That sounds - mean. - But it's going to make our layout look messy because we'll have a little period symbol - visible, - visible underneath are floating elements. - So what we do is we set the visibility to hidden. - So this is kind of like the exchange student that's always studying and you never really - see them. - So we make the period symbol hidden by saying visibility hidden, - and we make sure it doesn't take up any height by saying height zero and line height, - which is the height of the text, - the height between lines of text to zero. - And this will make it so that in all browsers, - this little content will be invisible. - So this content gives the parent a reference for how tall to be so it doesn't collapse, - but we also make it invisible. - So it's hidden. - So this is kind of a seems like a pretty crazy sort of bit of code here, - but actually this works quite well and it'll work in all browsers. - Okay, - let's actually take a look at that inside of an example. - So it's one thing for me to talk about these things. - But what if we have a real example here, - toe look at. - So let's goto. - This is tinker dot io and you can use this length CB 3 46 to see the completed version of - this example. - If you'd like to take a look at it later, - you can see I've just created some dibs. - These were just some boxes that we're gonna use far layout. - And this 1st 1 it just has the word above written in it. - And I gave it a class of above again. - I'm just giving these kind of generic class names. - And we also have one at the bottom here with a class of below, - and that also has the word below written in it. - And then here we have Ah, - container. - This is our parent container. - What's I gave a class name of container and nested inside off this This parent is three - boxes which I gave a class of box and just name them here. - 123 Okay, - let's take a look at the U CSS code. - We wrote for these guys then So, - um the the box of the top that has a class of above. - We gave this guy a background color of lime, - and we also gave it 10 pixels of spacing inside and a margin, - which is 10 pixels of spacing outside. - Okay, - we also gave a background color to container so we can see all these elements. - They all have a background color. - This also has padding and margin. - We also have a box down here which has a background color of Aqua and Samos. - The boxes in the previous example We just gave him a width and height of 100 pixels and - some padding and margin as well. - Um, - And then we also have this class at the bottom here called dot below. - So below has a background color of yellow and has some padding and margin. - Okay, - so if we come over here, - we can see Here's our box above. - Here's our container parent and here is below. - Now, - by default, - all of these days, - air displaying block. - So they're taking up 100% with of the screen, - and they don't have any special positioning. - None of them are have been told to float yet, - so because these air dibs they're displaying one on top of the other, - their king of the horizontal space here. - So 12 and three or stacked vertically. - Now, - let's say hypothetically that I would like to make thes guys position into a column - structure. - Let's say we want to make three columns 123 side by side So we can go down here into this - class of box and I'll come down here and I'm going to use the the property here called - Float. - So we'll set these to float position and will say float left. - So they're gonna go as far to the left as it can inside of this parent. - And if their space, - they're going to stack up side by side, - as long as there's available space for them to all fit, - it looks like there's plenty of space here, - so it should work. - So we have these guys to float left and I'm gonna click run, - and there we can see these guys air now displaying side by side. - 123 are now floating. - So we're seeing a few goofy things happening here in This frustrates a lot of people when - they're dealing with positioning. - I want to point out a few things. - Okay, - so first of all, - the div called above is completely unaffected by the fact that these air floating. - I'm going to say that again. - The element above the floating elements. - This one, - the Div. - With the class of above here, - this guy is completely unaffected by floating. - So whenever you float something, - it on Lee effects elements below that element that's floating on Lee elements that are - physically written below here like this. - This bottomed if you're the footer, - that's that has a word below written in it is affected. - Cut. - So because these guys were floating this guy down here below, - it can fit. - So it's trying to float up next to these guys. - Okay, - so how do I fix that? - If I ever have an element that I do not want toe float up next to my other elements here? - If I don't want to pull up next to these floating elements, - I can tell it to clear past the height of those floating elements. - So to do that, - I'm gonna go into bull the class of below here, - and we're gonna go ahead and say it clear Colon and I'll just save both which will clear - passed anything floating left or right. - In this case, - I could get away with just clear left. - But to be on the safe side, - cover all my bases will just say clear both like that. - So I said this div of below to clear both. - Now, - if I refresh that you can see now below is behaving and it's slipping below those floating - elements. - So that's one thing that may kind of stress you out when you're using float position, - you just have to be aware of the fact that when you float things, - elements below them may pull up next to it. - And you may want this to happen or you may not want this to happen. - If you do not want it to happen, - you can set it to clear both just like that. - Okay, - other things that are happening that might kind of, - um, - frustrate you as you may see the parent element disappear because I gave this parent - container some padding. - It's keeping at least some padding inside of it, - so I see it is a great bar. - But if you remove this padding, - you may even see stuff disappear like this watch this year. - If I said this to zero padding in that parent container, - you can't actually see it at all. - You might say to yourself, - What the heck? - What happened to that parent container? - I don't see its background color anymore. - Occasionally, - you're gonna want to surround your columns. - Maybe if you want another column color behind them or another image behind them. - In the case of the exercise, - we're gonna add, - like a wood texture behind our column structure. - So we're gonna need, - like, - a parent container there. - And, - um, - if you don't want that parent to collapse this great parent here to collapse, - we need to use the clear fix to get this to work. - Okay, - so let's go ahead and add that clear fix in here. - So again, - the floating elements are kind of like Children that have gone off the college and the - parents sad, - too sad that it collapses. - It doesn't have a reference for how tall to be anymore. - Okay, - so what we do is let's go into the CSS and let's right that clear fix. - So we're gonna say dot clear fix and again, - that's just a common name to name it. - You can actually name it whatever you like. - And we're gonna say colon after, - which is going to specifically go into the element. - We apply this to an ad, - this styling, - after all of the other elements, - all the other Children elements inside of it. - And we're gonna say content. - So I'll say content. - And I'm just gonna make a period symbol because it's small and unassuming. - And we're gonna tell that that content to display block So it it takes up all the - horizontal space there, - and ah, - then we're gonna basically tell this guy to clear, - just like we did with the box below. - We want this now. - We want this little period symbol. - It's going to appear, - you know, - like below are next to all these. - You know, - it's gonna colon after means it's going to appear after all these floating Children, - and we're gonna set it to display block so it takes up all the horizontal space, - and then we're gonna say clear both to clear past the height, - and now the parent should have a reference for how tall to be. - But we don't want to see that little period symbol. - That's not gonna be a very attractive. - So we're gonna set visibility to hidden, - and we're also going to set its height to zero. - So the little period symbol doesn't take up any height. - And we also want to say line height and set the line height of the text to zero like that. - Okay, - so that's the first step is to create a class that we can apply. - And we can apply this now to any element, - Any apparent element that's collapsing. - Okay, - so we're gonna go up here to the parent that has the issue. - So this guy called class container that has the gray background color. - This is the one that has the problem. - So we're gonna go inside. - This class equals container. - We're gonna put a space, - and we're going to apply another class here called Clear Fix. - Like that. - Notice I didn't have to write the colon after part here. - I only have to use the name of the class, - which is clear. - Fix. - Okay. - And then if we come back here and we refresh the code, - you can see it fixes it. - So now the parent knows how tall to be. - Even though the Children are floating inside of it. - Okay, - so we've learned most of the things that can kind of get you into trouble when you're using - float positioning, - such as elements that try and jump up next to the floating elements. - And you have to set them to clear both to pull down below. - And we also looked at parents. - When all the Children are floating inside of a parent, - they have the tendency to collapse. - And we looked at using clear fix to correct that issue. - Um, - let's actually go back to what we were discussing earlier regarding the two different box - models and sometimes the issues you might run into when you have to face setting up the - wits of your of your columns to fit both box models. - So for this example, - let's go ahead and change a few things around here. - I'm gonna go to the the box class here, - and let's actually remove the padding inside of it. - So we'll say padding zero. - And, - um, - it's actually set the margin to zero. - Also, - for now, - okay, - and then let's go ahead and change the width to be a percentage. - So, - um, - let's see. - So if I have three columns here, - and I want these guys to take up 100% of the space here. - We could set the width of each 1 to 33.3% would make each of the three take up. - Well, - I guess I did get us up to 99.9%. - Maybe we could do, - like 0.333 to get it even closer. - Uh, - and then we'll go ahead and run that and we can see the those three elements are equally - spaced. - So here's one to and three. - So each of those columns is side by side. - Eso This is working when we have no no padding and no border. - So, - actually, - I'm in chrome Right now. - I'm in Chrome browser, - which uses the W three C box model where, - when you specify a with it does not include padding or border. - Okay, - so this works out just fine because there's no padding or border. - But let's see what happens now when we decide Teoh, - um, - we said when we decide to actually give this some padding and some border, - so first thing going to do is I'm gonna give the container fixed with. - So for example, - you know, - since these air all scaling 33% I can actually give a fixed with to the container now. - So we'll say hypothetically that we wanted the parent container to be 800 pixels wide. - Something like that. - So this should scrunch everything in here. - Okay. - And now this container has a fixed with and we're going Teoh say, - Well, - we want to add some padding or some border around these columns. - So I already know that this is gonna break in this particular browser because of its box - model that it uses. - So ah, - 33.3 for each of you should end up to 100%. - But that's not counting the padding or the margin. - So let's say we set the padding inside Teoh way could use pixels like 20 pixels, - but why not use a percent? - And then we can actually do the math to see, - like, - how much extra percent were adding. - So let's say that I add like, - 1% padding around all sides of the element, - and I'm gonna go ahead and click run, - and that broke it. - So the reason why is that the width of the each. - Each columnist, - 33%. - So 33 plus 33 plus 33 adds upto like 99.999 basically 100% right. - But then when we have padding, - that's 1% padding on each side. - So that adds an additional 123456% of padding. - So this things now Ah, - 106. - It it's actually should be taking up 106% which doesn't fit within the 100% wide with of - the 800 pixel container. - So because of that, - there's not enough room for each element to exist to make this a little bit easier to see. - Why don't we go ahead and out of border here onto this will save border one pixel solid - black like that. - Okay, - now it's a little bit easier to see where each of the divisions are. - Okay, - So what if I did want to add border and padding um onto these elements, - But I did not want to have that added on. - In addition to the width, - I wanted it to be included in this 33% with so what we can do is we can actually set chrome - or any other browser to force it to use the Internet Explorer box model that includes - border and padding into the width. - So let me go ahead and come down here and we'll just zoom in and I'm gonna go ahead and - type the Starkey shift in eight to create a star. - This is called the Universal Selector, - and the Universal Selector is how you can select all elements literally every single - element, - um, - and will tell all elements to have, - uh, - oops to have ah, - box Dad exercising. - And to make it the i e box method, - we can say border dash box and we can add the prefixes um dash M O Z dash box dash sizing - and also set that to border box. - And we can also add the prefixes for Web kit cash box dash sizing just to cover all our - bases. - So it's gonna work in any browser and will say border dash box like that. - So this tells all elements to adopt regardless of the browser is telling all elements on - the page to adopt the Internet Explorer box model that does include padding and border in - tow. - with. - So it shouldn't be extra with, - right, - And then we'll go ahead and click. - Run and you can see it fixes that issue. - The cool thing about this is that I can change the padding now and it shouldn't break. - I can make this padding now to put 3% like that, - and that will give me more spacing inside the box. - You can see it. - Move the text down further. - We can also add a thicker border if we want. - We could say like, - Oh, - the border now should be to pixels instead or something like that and I could run that - there. - Um And the nice thing about using percents for these columns is that now, - if I change the size of the container, - they'll respond accordingly. - So if I change my mind and I want this container to be 600 pixels wide, - then they'll shrink like that. - They will all respond accordingly. - And I can also make it larger, - like 900 pixels or something like that. - And they'll respond like that. - So I guess nine hundreds off my screen a little there, - but, - uh, - at any rate, - you can see that I can change the size of the container. - I can't even set the container to a percentage if I want. - I could say, - like, - 90% and refresh that. - And then we just have the 10% left over here, - so that's pretty cool. - Okay, - um, - let's see, - What else would we like to talk about? - So margin margin is not included in either of the measurements of box model. - So that's one thing I have to be aware of. - If I add a margin here of just even 1% watch what happens. - This will actually break it. - And not even the box sizing property can save us, - because neither the W three C box model nor the I E box model includes margin, - which is a spacing outside of elements. - So I just added 1% margin, - which will be 1% on the left and right of one, - the left and right of two in the left and right of three sets. - A total of 6123456% that it's going to add on additional. - So this is going to be 6% um, - over over over what it needs to be to stay side by side floating. - So if I refresh, - it's gonna jump the third box down. - It's gonna break it there like that. - Okay, - so my options here are to be aware of the fact that I'm subtracting that percentage, - right? - So if I have, - um, - 100% of space here, - right, - ah, - 100 way have to think of the parent container as the availability of 100% of space with - inside inside of the parent container there on What I can do is I can subtract that 1% off - each side. - So what we can do is we can grab, - grab the calculator app and bring that up here, - and we can do some math. - So if I have 100% of available space and I subtract the, - um, - the 6123456% of margin, - that gives me 94 percent left over. - And that has to be divided amongst these three the width of these three boxes so I can take - that 94 I can divide by three. - And that gives me 31.3 repeating. - So it's pretty simple math also have to do here is come back in and change the width of the - box from 33 to 31% to make up for the margin. - And that fixes it. - And I still have spacing in between the boxes like that. - So that's pretty cool. - And I still can come back to this container here and change the width anyway, - I like and it's going Teoh, - it's gonna fix it basically can even just remove it there like that and make it the exact - with Okay, - um, - so we've discussed pretty much, - most anything you'd need to do in the layout. - But there is one thing we've left out, - and that's how to center things in the layout. - What we can do is a typical strategy is to create something called a rapper so I can go - into this code here, - and I'm just gonna, - in Dent all this code pumps. - There we go. - And we're gonna surround this code with an outer container. - And I'm gonna give this guy and I d of rapper like that and we'll close it down here. - I would just say slash Div and I can even write a comment if I like to myself to say that - This is the ending of the rapper like that. - So you can see we surrounded all the concept here with a opening rapper and closing rapper - . - Um, - this basically puts all the other boxes inside of a larger box, - and now I have the ability to style that larger box and control where it's positioned so - I'll just go ahead and come into the CSS and create. - Uh, - since this is an i d. - If I want to create a selector for it, - I have to use the hash tag and the name of the particular I. - D is rapper. - So I can say hashtag rapper like that and now I can style this. - So let's give this a wits with set everything to 800 pixels again like that. - And since, - um, - since I don't have a wit specified for my other containers like above container and below, - they're just going to be as wide as they can be because their block level elements and - since the rapper is going to have a specific with, - they're just going to be as wide as they can until they run into the edge of that rapper. - So let's take a look at that. - So my rapper has a width of 800 pixels, - and then I can click run, - and that will keep everything constrained within that 800 pixels there. - So that's pretty cool. - Um, - what if I'd like to now center all of these things within the page layout? - So remember that we can use margin, - um, - as spacing on the outside of elements. - Okay, - So Margin also accepts a value of auto and auto margin, - basically will just create an automatic amount of margin where it will just push margin out - from the element until it runs into something else, - like a parent container or the edge of the browser window. - So since I have a wit set, - I can now set this margin, - um, - to auto margin so that it will create an equal amount of margin on both sides. - So basically, - I want to set the left margin toe auto and the right margin toe auto. - Um, - and if I want any margin on the top and bottom, - I could set that as well. - In this case, - I think what I'll do is I'll create zero margin on the top and bottom by putting a zero - there and then I will put Auto for the left and right. - So remember, - when you used to values inside of either padding or margin to values indicates that the - verse the first value represents the top and bottom spacing, - and the second value represents the left and right spacings. - This is telling the margin to be an automatic amount on the left and the right of this - element called Rapper that IHS surrounding everything else. - So if I go ahead and run that it'll center everything so you can see there's an equal - amount of margin here in an equal amount of margin there. - And in fact, - as the browser window shrinks and grows, - that margin will adjust itself because it's set to auto. - So that's the typical way that you'll see people centering content. - Okay, - now, - in the upcoming exercise, - instead of centering all of the content, - we're just gonna be centering certain pieces of the content. - So what? - I went ahead and did in the exercises you'll see is I created a class called Rapper, - and I applied it in multiple locations throughout. - So, - for example, - I could just apply it, - apply it inside of this top bar here and an above and inside of below. - And that way you can kind of have bars that stretch across the whole screen, - but then content inside of those bars that centers itself. - Okay, - so, - um, - that's a really good way Teoh to work with layouts into conveniently center. - Everything is to use something called a rapper, - or some people call it a container and said it to have a margin of zero auto, - and that will push the element into the middle. - Okay, - great. - So, - um, - that's really all winning toe toe. - Look at now. - Let's go ahead and apply all these things we've learned into the continued exercise that - we've been working on for the CHW shoe company. - And then after you complete that exercise, - then you can move on to the next code challenge. 33. Prep Layout: - Hi, - guys. - Welcome back. - This is exercise 3.1 box model and layout. - Now, - in this particular exercise, - we're going to be building off all of the techniques we learned from the previous set of - lecture slides and one off examples where we explored things like the box model box - aesthetics and also float positioning to create page layouts. - You could see that I've already downloaded the source code here, - and I brought it up into sublime text. - And the main two files it will be working with here is the index dot html page and also the - style dot CSS page. - Of course. - Okay, - I've also gone ahead and brought this up in ah browser here so we can see kind of where - we're at. - Um and let's talk a moment about what we're going to do in this exercise. - Okay? - So you can see here these air, - all of the all of the page content that we added in all the previous exercises. - So here we have all of the text videos, - images and links from previous and passed exercises and using, - um, - you know, - spacing like padding and margin and width and height that we learned from the box model - example, - We're going to start sizing and adding spacing to these elements. - We're also gonna add some fun box aesthetics like background images, - um, - Grady INTs and border radius around the corners of our boxes and some box shadow toe. - Add some drop shadows onto some of these elements, - so we'll add some some box containers here to our page loud and style them. - Give them some aesthetic styling and the next we're going to move on to integrate flute - positioning to create some column structures into the layout. - So to start off with, - let's go ahead and bring up the code and we're gonna go into the index dot html page, - and I've decided that I want the, - um, - the header here to have two main panels in it. - And you remember you'll remember from the previous exercise that we created, - ah, - logo panel and a knave bar panel, - and that will allow us to create a a container that stretches across the entire screen. - But I'd also like to create some some rapper Tibbs that we can use to center content using - auto margin, - which we saw in the previous lecture slide examples. - So we want to take like this. - Ah, - this logo here and push it into a container that centered even though we'll have a larger - surrounding box called logo or logo panel that will stretch with a Grady Int texture 100% - of the screen. - Okay, - so any time you want to create a box inside of a box for aesthetic purposes and Div is most - likely or go to element, - remember that in HTML five we do have semantic elements like Header and section, - and these were mostly reserved for semantically suggesting that this is a certain section - of the page or that the content in here has a certain relationship or meaning. - In this case, - we're just interested in creating some boxes for this, - For the sake of aesthetically styling, - something's so here we have a box with the idea of nab our in a box of the idea of logo and - inside of these I'm gonna create an inner box called a Div with a class of rapper this and - we'll go ahead and close this off here, - and we can even make a little comment here. - So let ourselves, - no, - later on that this this particular closing, - Div closes the rapper like that, - and we'll go ahead and add another one here. - So sometimes you'll see people creating a single rapper that will enclose all of your - elements and often times. - Then you give it an I. - D. - Usually people name it an idea of rapper or or an idea of container. - Now, - in our case, - we're going to have some bars across the whole screen that will stretch, - you know, - 100% across the whole top of the browser. - And inside of that, - we have the need to have several smaller rappers that are going to center content inside of - a larger box. - It's stretching across the whole screen. - So for that reason, - we're gonna have several rappers, - and each of our rappers is then going to have, - um, - a class name of rapper because, - remember, - class you can use multiple times, - whereas an I D. - You should really only use it once per page. - So we're gonna have a couple class of rappers here. - We're also going to create a box that is aesthetically going to carry a wood texture inside - of it. - So all of our sections like this about section and the Artist corner section in the company - news section. - All of these page sections that air in the main constant area. - All of these sections will be centered using a rapper, - and there will also be another outer box with an idea of wood that we can create that will - hold a wood texture inside of it. - That's going to go behind all these sections. - So we'll just go out and give this guy a div I d of Wood like that, - and then inside of it will have they did with the class of rapper so that we can center - content inside of a smaller box here. - Okay, - and I want this to end. - Both of these guys have to close below all the sections before we get down to the detail - section in the Footer so I can come down here past the ending of the new section here, - and we'll go ahead and at a closing, - differ the rapper dot Rapper and also one closing section for for the wood texture. - So the wood texture here is going to take up 100% with of the screen, - whereas any rapper will have a fixed with and will be centered to center all the sections - of the page. - Okay, - um let's see, - we also have the details section, - which is just before the footer, - and this will have three columns. - Eventually. - One column will be the contact information, - and then another column will be links to our our sister sites and other related shoe - business companies. - And then the third column here is going to be for the social media links and all of these - three count columns here, - I wanna have them also inside of a fixed with that a center using a div with a class of - rapper. - Okay, - so details will stretch 100% of the screen, - but then we'll have a box with a fixed with inside of it, - so your site not might not be made up exactly the same as mine. - Aesthetically, - this is just the I'm accomplishing the look that I'm going forward. - But it's perfectly fine if you're rapper structure or your div structures aren't the same - as mine. - Okay, - so that looks like everything's in place here in the index page. - Now I've gone ahead on all the other pages, - like catalogue, - contact, - pricing and sale, - and I've added all of these rappers, - uh, - and Stives with the wood texture. - I've added all of these in there for you, - so I just wanted to add it to the index page just to show you just to show you where they - were placed in the code, - okay? 34. Applying Box Properties: - So now what we can do is weaken Jump into the style dot CSS page. - And I'm just gonna kind of go down through top to bottom. - And I'm gonna add a bunch of styles to the different elements as I go, - just adding in some spacing using box model and also some wits and heights of things and - also some box aesthetics and then later on will move on to using floating properties to - position elements and create column structure. - So we can just go to the top of the style dot CSS page here, - and the 1st 1 I'm gonna do is I'm actually going to select the body itself. - So the body is actually an element. - And remember the bodies, - the entire viewable area of the page. - And let's go ahead and add a box aesthetic property here, - which is called background. - So background is the way that we can specify an image and the image is positioning and - whether it repeats or not etcetera. - So in order to specify a background image, - we can say you are l and then in parentheses, - we can point toward the location of the image. - Somebody go ahead and say dot, - dot slash to leave the CSS folder, - and then images slash to go into the images folder. - And I'm going to use Ah a an image called handmade paper got PNG and by default, - if you don't specify any, - um, - any positioning or any repeating of the image by default, - it will be positioned in the top left corner of the body, - and it will repeat infinitely because I don't specify any repeating commands. - Values here is just going to repeat horizontally and vertically as faras. - The browser window can go, - so it's good and save that and come back and let's hit refresh And that was pretty subtle. - I don't know if you guys can tell, - but everything is white before and now it actually has kind of a texture of paper. - Um, - if we zoom in here, - you could maybe you can see it a little bit better there, - this sort of ah, - a handmade paper texture. - So it's an off white. - We've just given our white pages subtle texture of off white. - If you want to go ahead and check out what that image looks like on its own, - you can bring that up here in the finder and you can see that's called handmade paper. - So ah, - square of this is only this big. - It's actually only 100 by 100 pixels, - but it's actually repeating infinitely, - however wide our screen is, - however tall and wide the browser window is, - it's just going to repeat this texture and it looks like one seamless texture. - Then we're also going to change some spacing on things like the H twos and H threes. - And remember, - if I use a comma, - I can specify a compound selector Well, - where it will style both the H two and H three the same, - and we're gonna add some margin. - Some bottom margin here, - which is remember, - margin is the spacing outside of elements. - So if I want to add a little bit of spacing below the H two and H three, - I can set that here. - In our case, - the spacing below the the H two and H three is a little more than I want. - This is the default that it's getting from the normalized at CSS that we've also linked to - , - and, - um, - this looks like it's about 2025 pixels apart. - I'd like Teoh actually be closer to the paragraphs. - So I'm gonna set that to five pixels of margin. - Okay? - And if we go out and save that and come back and refresh, - we can see that we change the spacing there. - Aside from our headings here, - we also want to change the margin below our list. - So we have ordered and a nor did lists. - And if we'd like to change the margin blue there, - we can set it to margin dash bottom and will say 10 pixels and the list items themselves. - We want them to indent a little bit, - so we'll go ahead and set the margin Dash left to about 20 pixels like that and we'll save - and we'll come back to browse and refresh now to see these. - These list items are actually on the catalogue page. - And if I scroll down here to where we have shoe archive, - you'll see them indented here 20 pixels. - And also here you'll see the 123 that should be now and indented 20 pixels here. - Okay, - that's good. - Okay, - So our paragraphs and address bar, - we also have some font size here. - We'll also go ahead and add some margin inside of here. - So just in the same way that we can see margin, - dash, - top, - margin, - dash, - bottom margin, - dash left. - We can also use shorthand. - Um, - and remember, - the number of values that you place here will determine which side is affected or which - side is being spaced. - Eso here we can say, - You know, - for example, - if we wanna set the top 20 and both sides to zero, - but we want to set the bottom 2 25 pixels, - this would be another way to write this. - So instead of saying margin, - dash bottom, - we can also say margin, - which is shorthand and say zero on the top zero on the left and right and 25 pixels on the - bottom like that. - So when there's three values, - first value is top second value is both sides, - and third value is the bottom. - Okay? - And we'll also go ahead and add some spacing. - We'll use the same technique to add some spacing below the figures. - So remember, - we have an html five semantic element called figure that exists surrounding all of our - images here. - And also the figure is surrounding also, - our video here in the artist corner section. - So we'll go ahead and say, - Figure and we'll add a margin here of zero comma or excuse me zero space zero space, - 10 pixels, - just 10 pixels on the bottom and no margin on the top insides. 35. Styling Tables: - Let's also add some style to our table that we created. - Remember we had a table here on the pricing page. - I'll just show that to you for a moment. - So this is the price chart section here, - and we have this table made up of the TR elements and th which is table header and T d. - Which is the table divider or a non header here, - creating column structure or creating really a table cell. - So these air creating all those rows and columns of the table So we'd like to style this as - is You can see what it looks like unstylish here, - weaken, - Jump over to pricing. - And you can see that these air kind of all bunched together here, - so we'll see what we can do to make this look a little prettier. - Um, - let's go ahead and tell this guy toe have a width of 100%. - Uh, - and that will be nice, - because then when we change the size of our wrappers, - um or, - you know, - the size of the device scales down. - We can have the table respond accordingly. - So we'll set this guy to have a width of 100% and we'll go ahead and say Margin 000 20 - pixels like that and we'll add a border to the top of one pixel solid medium Grey like that - will use a hexi decimal shortcut for medium grey, - and we'll also create a similar border. - But this time on the left hand side as well, - we'll say border dash left one pixel, - solid pound C C c to create a medium gray there. - Okay, - We also want to style the table rose, - which is using the TR tag like this. - I want to add a background color to these guys, - um, - lips back ground, - and we're gonna say e f g f e f, - which is a very light gray color, - kind of like just 11 notch off from white in a way, - um, - and let's take a look at that for a second. - So if I refresh this now, - these guys are lighter color gray, - but you can see and we also have a border on the top and on the left side. - And it's also stretching 100% right now. - Okay, - What if I wanted to to set the this this lighter gray color to every other row. - So maybe, - like I want only the even rows of the table rooves to be a light gray background color. - So what I can do then is I can use a pseudo class selector. - Previously, - we looked at pseudo class selectors for links like hover and visited to control various - links states. - Let's take a look at another pseudo class selector called Child, - and we're gonna go ahead and say End child even. - And this will select only even numbered rows only even numbered table rows and change it to - this this gray color here like that. - So, - for example, - if I said, - um, - the table rose, - for example toe white like that and then I said the only the even rows to a great color - will get this effect, - which is like that. - So now it's kind of like striped, - and it's easier since we have the table row striped like this, - it's easier to see where these line up with each other. - Um, - it turns out a little bit later. - We're just going to tell the sections that everything's in to be white, - so we can even just take out the white for now. - and eventually they'll just inherit the color of the the white section behind the table. - Um, - let's see, - What else do we want to do here, - to the table? - What we have the the table headings and table dividers, - which make up all the columns in the table and sort of slice up into individual cells of - the table. - And remember, - we wanna use padding for spacing inside of elements and margin for spacing outside. - So if I want to add spacing around the these these numbers and these words here, - I have to use spacing inside of the element. - So we'll go ahead and set this guy to have a padding of 10 pixels. - I think that should look nice. - And we'll also set this guy to have a border dash right of one pixel, - solid medium gray color like that, - just like before. - Except last time, - you know, - for the table it only as a border on the top and left. - Every individual cell will have a border on the rights and also on the bottom like that. - So we'll say that and let's come back and refresh and see what that did. - There we go. - So padding added some, - obviously some padding around each of these guys and the, - uh, - each individual cell has a border on the bottom in the right. - This one has on the bottom in the right bottom in the right. - So since each one has a border on the bottom and the right, - it actually makes a box. - And then to make the border on the top and left, - we just added it to the table itself to fill in. - Just this one here and the one on the left side it's in our table's looking pretty good. - This guy is called a th, - which is table heading. - So, - for example, - thinker Steam Dolby in Washington, - Warby in Brixton. - Thes Brandon names these air inside of TD tags, - but this one here brand at the top is inside of a th table header. - So if we want weekend style the table header to be a little different, - so we know that it's header Um, - so let's change the background color of this one to be a little bit darker. - Grey will say five whips pound 555 and we'll also change the color of the text to be white - like that and we'll come back and refresh, - and now you can see the table headers darker there. - That's looking pretty good. 36. Styling Forms: - um, - let's jump over the contact page here and let's use the, - you know, - the new properties we've learned, - like display and, - um, - and wits and padding and margin to make an attractive form here. - So right now, - our form is kind of looking a little sad. - Let's come back in and take advantage of the new things we've learned and style this form - here. - So I'm gonna select all the input areas and all of the text areas, - and by default, - these guys display in line. - I'm gonna change them to display block. - That way they will display one on top of the other, - each other instead of side by side. - Let's see what that did there. - So if I refresh now, - these foreign fields air one on top of the other like that. - Okay, - that's pretty cool. - Um, - let's go ahead and tell this guy also have a width of 100% just like we did with the table - . - That way, - it's going to stretch dynamically, - and this will This will come in handy when we start doing the response of design where, - uh, - the tables and the forms and things scaled down on different sized devices so we'll make it - a fluid with of 100% there, - and we'll add some padding inside of all these elements to five pixels will add a large in - dash bottom here of five pixels, - so those air spaced out a bit and we'll add a box shadow, - which adds a drop shadow underneath the element. - And we'll say zero for the horizontal offset. - Three pixels for the vertical offset. - Five pixels for the blur radius and pound C C. - C for the for the shadow color like that and will also add a border around. - These guys will say there's a border around each side. - That's one pixel solid. - Si, - si, - si just to match the table there and we'll save that and let's come back and check this out - , - then will refresh. - And that's starting to look cooler. - We have the name, - email, - phone and message here, - and that's all looking pretty good. - Okay, - um, - see what else I want. - A deer. - Well, - one thing is that this this button, - the send button is also stretching 100%. - So I think what I'll do is all set a style to specifically select the send button. - That's not going to style 100% that will actually have a fixed with if we were to jump into - that page just so I can show you on the contact page. - If I come down to the contact form here, - you'll notice that this input has a type of text. - This one has a type of email. - This one has a type of telephone and this is the text area. - And I've already styled all these to be 100% on because I told all inputs to be 100% wide. - This button here that says send on it is also styling 100% here. - Okay, - Now this one has a type of submit which is uniquely different from these other types of - text and email and telephone. - So what I can do is I can use a special kind of selector called an attribute selector. - Um, - and if you'd like to learn more about attributes, - selectors, - you can refer back to the slides for the CSS selectors lecture. - So we're gonna go back into style dot CSS and will come down here and we'll go ahead and - say input and then we'll put brackets to select only an input with a specific type, - so we can say type equals submit. - So what this does is it says Hey, - browser. - Let's go find an element, - um, - input element and let's go ahead and Onley select input elements that have an attribute - with the type equal to submit. - Okay, - and let's add a margin on the top of this by saying Margin, - dash top and we'll say five pixels, - and that'll give us a little bit of spacing above the button so it's not right up against - the foreman puts. - And let's also change the wit. - So normally the width of inputs is 100%. - We only want to make this 100 pixels, - so it'll be a smaller, - fixed them out. - And let's set the background color to black and the text color to white. - And if I'd like to around the edges of an Element and CSS three, - you can use border dash radius and we'll set it to 25 pixels, - which will around the corners off and make it look a little bit more like a circular button - instead of ah, - square edged graphic, - and we'll go ahead and remove the border will to say border zero because by default, - buttons have a border. - Okay, - so we'll save that and we'll come back and refresh and see what that did to our send button - here. - Coulson, - our son button looks like that when we hover over the sun button. - We wanted to change a little so people know that there that they can click on it. - Eso just in the same way that we created a hover action for hover style for links. - We can do the same thing for input buttons by saying, - Hey, - CSS, - go and find an input that specifically has an attribute type equal to submit. - And then I can use the pseudo class selector hover to say And when we hover over it, - style it in this way. - So what I want to do here is just change the background color. - That's the only thing I really want to change when we hover over is instead of black. - Initially it's black. - Here, - we're gonna change it, - Teoh a darker gray color like that so we'll save. - And if I refresh, - then if I hover over send, - you can see it turns to a lighter color. - It'll turn to a lighter color gray there like that 37. Styling Iframe: - great. - Okay, - um, - a few things to set for the the box model of the I frame. - So we're using one eye frame in the contact page here, - which is the Google Maps in bed. - We're embedding Google Maps. - You're using the code we copied in a previous exercise here from Google Maps. - And it's inside of this element called I frame, - and we need to go ahead and style this. - Okay, - What I'm gonna do is go into the CSS here and set I frames and I want to remove the border - off of it. - I'm gonna say border zero, - I'm gonna say padding zero and margin zero. - Oops, - Margin with an eye. - There we go. - And we're also going to Sethi overflow to hidden That way. - No scroll bars appear. - And if there's any map that doesn't fit within the size of the frame, - it will just be hidden. - And we're gonna go ahead and set the height to 353 pixels and happen to know that this is a - good height so that it will match approximately match the height of the the form it's above - it. - So we'll come back and refresh that and that gives it a height. - That will be Oh, - from here to here will be about equal to from here to here. - And eventually, - these are gonna be a two column structure where the where the map will be on the right - column, - and the form will be in the left column, - okay? 38. Centering Content: - Uh, - and you'll recall that a while back we added a rapper, - def because we wanted to have some bars on the screen for the for the logo panel here, - which is gonna be stretched across the page all the way across the top. - But we wanted to send her some content inside of it. - Okay, - so let's take a look at that. - Remember, - we added this did with the class of rapper throughout the page, - anywhere we wanted to center the contents, - such as inside of this logo panel and also inside of the navigation bar. - So now guard Knave Bar will stretch 100% of the screen logo panel will stretch 100% of - screen. - But rapper, - that's containing the H one and H two with the name of the company and the rapper here - containing a navigation that we're gonna give a fixed within center. - So I've already applied that on all the different pages, - and we can just come back into the CSS and add the class for it by saying dot rapper, - and we'll give it a fixed with, - um 9 60 pixels. - Now we can change this when we move on to the responsive design. - What we'll do is depending on the size of the device. - We can change the width of the rapper. - And because we didn't specify a with for the other content inside, - it's going to scale accordingly. - Okay? - And you remember that from the previous one off examples in the lecture slides we looked at - using auto margin to center the rapper. - So when we only used to values inside of padding or margin, - the first value specifies the top and bottom. - So this means zero margin on the top and bottom, - and the second value means both sides left and right. - So setting an auto margin on left and right will then push equal amount of spacing on the - left and right, - which will accomplish centering the element. - It's actually take a look at that here in the browser. - So if we hit refresh, - you can see all my son. - All my content is now centered. - If you'd like to be able to see the rapper to really know, - like what this containers doing weaken temporarily, - at least we can give it a background color, - so it's easier for you to see it like that and then we'll hit refresh, - and by giving it a background color, - you can actually really see that rapper. - So there's a larger div up here called Logo with an idea of logo that's stretching 100%. - And we're gonna go ahead and give that a Grady in color coming up here pretty soon. - Fade from from White to Grey. - Um, - and then we've created this rapper DIV rapper inside of it to create a box as a fixed with - . - That's going to center the content and you can see even when I skill the browser in, - ah, - wider or narrower. - It's keeping that content inside the rapper centered. - So there's actually one rapper here around the logo. - There is another rapper around here, - which is around the navigation. - There's another rapper around all of the content, - the main content here that contains all these sections. - So there's like a section called Company News that's inside of the wrapper, - and that section is being centred because it's inside of that rapper and so is this thing - called Artist Corner. - There's a section here that we labeled Artist Corner earlier. - That's also inside the rapper and also a section that's about the company that contains - this image in this paragraph here in the heading here that's also inside of that rapper. - Okay, - cool. - And then also, - this is a section just before the footer. - We created a section that's on all the different pages. - It's called details that has the contact information, - links and the social media links there. - Okay, - I'm gonna go and remove the background color off there, - but any time you're building a layout, - um, - it may be easier for you to just give these these containers background colors just so you - can see it. - And then that makes it a little bit easier to see where things air, - starting and stopping where things start an end and helps out when you're positioning - things, - okay? 39. Applying Box Shadow: - there's a few more classes that will adhere. - Let's add another class here called Shadow, - and we can go ahead and add a shadow to certain elements on the page and, - of course, - will use box shadow to do that. - And we'll say zero horizontal, - Let's see. - And then we'll say three pixels vertical offset, - 10 pixels for the Blur radius and will make the color almost black. - But not quite. - This is a very dark gray pound. - 333 Okay. - And I've already applied Rapper, - but I haven't applied shadow anywhere. - So let's go ahead and actually add the class of shadow into some of the elements. - I've actually already added it on the catalogue contact, - pricing and sales page. - But just to show you where we're gonna put it in the sight, - I've gone ahead and left it out on the index page so we can see, - um, - how I kind of went through an added season. - So on the index page here, - the first place that we're going to add a shadow is on that logo panel, - so there's gonna be a box that stretches across the whole page called logo, - and we can give that a class by going inside of there and saying class equals shadow. - And since I'm gonna add this in a few different places, - all just copy it here and then we'll go through and paste it throughout. - Okay? - So the next place where I'm mainly gonna be adding, - this is inside the main content area. - Uh, - down here past the header we have the wood texture is going to start in the rapper, - and then all of these sections are actually going to get shadows. - So these are gonna be sections which I'm gonna give a white background color and a drop - shadow, - and that's gonna be on top of this wood texture, - and they're gonna be centered because they're inside the rapper. - So I'll go through each section and we'll add the shadows. - So artists corner, - you also get a class of shadow and, - um, - news. - The company news is also going to get This section is also going to get a drop shadow on it - like that. - And I think that's about it. - Let's see, - Do I want to add the shadow anywhere else? - I don't think so. - I think I'm not gonna added to details or the footer. - So we're good on that page. - And as I said, - I've already added this to some of the other pages or actually to all the other pages there - . - All right, - so we'll save that and we will come back to the browser here and refresh. - And there you can see the drop shadow. - In effect, - there's a drop shadow here on each section, - like the news. - Thea artist corners what we're calling this one, - and this one's like about the company. - Okay, - and here's the drop shadow on the logo. - This is the logo panel. - Or they did with the idea of logos. - You can see that he did with the idea of logo. - We never specified a width. - And because dibs are block level elements, - it's just stretching 100% of the screen. - So that shadow stretches 100% of the screen that drop shadow there. - Whereas, - uh, - we have another div inside of it with the idea of rapper that's keeping that centered there - just in the same way the rapper centering all these sections below. - Okay, - that's pretty cool 40. Applying Gradients: - and we're going to target that div with the idea of logo. - Okay. - And we want to add some spacing inside of here. - We want to add some padding. - We're gonna set this guy too. - 85 pixels, - 0 25 pixels like that. - Add some spacing inside of logo. - Next, - we're gonna add ingredient background color. - Now, - in the completed code, - you're gonna see, - um, - I've already kind of come across ingredient. - That looks quite nice. - It's sort of like a white to a light gray fade, - and I'm not gonna pace the code for the exact same one here. - But what I want to show you is a site you can use is a resource to generate the CSS for - Grady INTs. - If you wanna have a background color fade inside of an element like this logo panel. - So if I go back to my browser and I opened up a new tab weaken type in CSS three and we'll - type in Grady int generator. - It's already coming up there, - and we typed ingredient generator like this CSS three ingredient generator, - and we're gonna go to this site has a really nice one. - It's called color Zillow dot com slash ingredient Editor is the girl, - But you can see here there's actually a ton of these out there. - You can try different ones if you like, - and they have all these presets. - So if you find kind of like a color fade that looks good for you, - you can just go ahead and use one of the presets. - The way this works is you can click and drag to move the location of these color stops. - You can add more color stops by just like clicking underneath it like that, - and then you can go ahead and change the color. - So, - for example, - if I make like a different color green that it will fade from like white to grey and back. - If you want to get rid of these, - if you click on them and pull them downward away from that slider, - the color slider, - it'll just make them disappear. - Um, - So, - for example, - if I want this one here to be like a little bit of a light gray almost off white, - I can That's actually good. - This is all e the hacks value, - um e And down here, - if we want to make this a little darker. - We could just, - like, - drop this back a little bit like that, - and that'll fade from like an off white light grade to a slightly medium grey like that. - You can see that. - You know, - there's different types of radiance you could do, - like horizontal a diagonal to make it fade from one color to the other. - Or like a radio, - which will fade from the outside to the inside in a circle shape. - We're just going to keep it as vertical for this example. - And the nice thing about this is it gives you a user interface to create the Grady int that - you want, - and you can size it to approximation of your element. - Or you can even punching exactly the size of your element here. - And it gives you the all the CSS code down here, - and you can see it's actually quite a lot of code currently to get ingredients toe work in - all the different browsers. - Unfortunately, - there's actually pretty heavy amount of CSS code right here. - What we're gonna do is we're gonna click this little button here in the corner that says - copy on that will copy all the code for us, - and then we can go ahead and come in here too. - Uh, - the logo style, - and we can paste that in there. - And this massive block of code wouldn't have been very fun for me to write. - So I just used that website to kind of generate this for me, - and we'll go ahead and save that and let's come back to the browser here and see what that - looks like. - So now we're gonna add that Grady it feel here, - and I will refresh. - And that looks pretty cool. - I'm digging it, - okay. 41. Styling the Logo: - So let's come back in and let's add some more spacing margins and pad ings and change the - way these these H ones and H two is inside my load logo section are displaying. - So first thing I want to do is actually want to change this h one toe, - have no margin. - I'm gonna set the margin here. - Zero. - But I think what I'll do is I'll add a margin on the top or excuse me, - a patting on the top as well say padding dash top and will add about 20 pixels of space - above the actual letters for you know, - the word inside of the H one, - which is E h W um and I'm also going to change the way it displays. - Currently, - this guy's displaying the H one is block and the H two is a block level element by default - . - So it's appearing one on top. - The other. - I wanted to seeing se z h w shoes side by side so I could set this Teoh display in line. - And I wanna have the ability to have uh, - t remove that margin off there. - So I'm gonna actually say display in line dash block like this we're gonna say display in - line block. - Okay? - And we're gonna come down here and at a background image. - So what? - I did waas I did create a background image specifically for this h one that will kind of - create a logo. - Um, - you can see that I generated. - I had kind of come up with this. - This crown logo that's here inside the intro pic. - And what I'm gonna do is I gonna put a small little crown above the Z h w here. - So I'm gonna make that a background image, - which is a small crown I created in photo shop. - So I'm gonna say dot, - dot, - slash images to go outside the CSS folder and inside the images folder. - And we're going to link to logo underscore Crown Underscore and boss dot PNG. - And we're gonna tell this guy to not repeat by saying no, - Repeat so here and said we'll say no. - Repeat. - And we're gonna tell this thing to position top center inside the element like that. - We're just using the background shorthand, - and we're giving it like a background image value, - Aziz. - Well, - as the background position value and or excuse me the background position value and also - the background repeat value here like that. - And we'll also change the margin on the H two as well. - We're going here and I'll say, - Well, - we're gonna remove all your margin. - And we're also going to change the way you display so you can exist side by side. - And we're gonna set you two in line block, - Aziz. - Well, - boots like that. - Okay. - And we'll come back and refresh. - Awesome. - So now my logo, - my H one is side by side with my age, - too. - And I have a background image appearing above here, - which is my little like embossed crown. - So my logo now is complete in the corner of my logo panel. 42. Styling Main Sections: - And remember, - we created uh, - a a div that is going to wrap around all of those sections that has a wood texture, - and this would texture box is going to expand 100% of the screen. - It's gonna be wood texture, - a Sfar, - a Z I can see inside the browser. - But then we have the other div That's the rapper, - which is has a fixed with and it's centering the content on top of this wood texture. - And then on top of that, - we have these sections which, - um, - are going to hold our main content of the page. - Okay, - so let's go ahead and create a style then for would like this. - And we're gonna give this guy a background image like this background dash image, - and we're going to say you are l. - And we'll go ahead and say you should link to dot, - dot, - slash images slash Would Dajae peg like that and we'll tell this one to have a a background - dash position okay of center top. - And we'll also set the the background repeat to know, - repeat like that and we'll add some padding inside this thing. - We'll see 30 pixels on the top and bottom and zero pixels on the left and right, - and we'll save. - Okay, - so let's come back to the browser. - And this creates this nice background image behind all my sections. - You will notice that now all of my sections, - or see through. - So, - um what? - We didn't specify a background color for my section. - So now this tax is a little bit unreadable, - so we're gonna have to come back a little bit later and give a white background color to - all our sections. - But we'll do that in a moment. - But I did want to demonstrate that now, - behind everything here, - underneath the logo panel and underneath the navigation, - we have a wooden background texture. - This has a nice highlight on the wood. - Um, - Now, - the only thing about this is I want to have this highlight at the top, - but I want to take this kind of shaded sort of like darker color of wood here, - and I wanted to just continue our repeat. - And the reason why is you can see that the height of this wood texture is not tall enough - to compensate for all my all the rest of my sections. - for example, - the artist section is sticking out below, - and the news section is also sticking out below the height of the wood texture. - One of the cool things that you could do with CSS three is you can specify multiple - background images. - So what I did was I went into photo shop and I just cropped out a little tiny slice of this - would down here where it starts to fade out. - I'm just gonna tell that to repeat inside of that, - that did, - with an idea of wood. - Do we have Ah, - here. - So that way, - if content is taller than the the wood image, - I can also have another repeating image in there and CSS through the way that you specify - multiple background images are you use a comma like this and then you specify another girl - pointing to another image. - So we'll go ahead and say dot, - dot, - slash images slash I would underscore slice dot j peg like that. - Okay. - And we can also put a comma and then say that this other one should position left top and - for repeat this 2nd 1 here. - Well, - say repeat. - Why? - So you can see that Um the first girl is would in its centre top No repeat. - And then after these Commons, - we have would slice, - which is just a little cut out of the wood at the bottom. - There are a slice of wood, - and that's to position top left and repeat Onley vertically, - so this will repeat vertically. - Okay, - so let's go and save that. - And let's see the difference now that we have the wood texture, - hopefully will be repeating here. - Right? - So we'll hit. - Refresh And now you can see that would texture just continues if there's more space there. - Okay, - so the wood texture starts up here. - And then as we scroll down, - it continues on like that. - Okay, - so that's pretty cool. - We can put even multiple background images into an element here like that. - Okay, - um, - let's also style all those sections because, - as I said before, - it's kind of a drag that this black text is on this dark wood background that's not looking - too hot. - So let's go in style. - All the sections like this will go ahead and select any element called section, - and we'll add some padding in here and we'll see padding 20 pixels of space. - And we'll also give them a background color of whites like that. - And then we'll go ahead and save and will come back to the browser here and hit. - Refresh. - Cool. - So now we have some padding around that element. - We have this white color here in the drop shadow below them. - We could add some Martin Leadsom margin in between them here, - coming up. - And you can see that would texture continues until we run into the detail section like that - , - okay? 43. Styling Details Section: - So let's actually give some style to that. - That detail section here. - So right where this would ends. - We want to add another Grady in here where the details section is just before the footer. - So I'm gonna come down here above details or below details there, - and we're gonna create a selector called hash tag details to select that div with the idea - of details and we're gonna come in here and add some padding to it will go ahead and say, - 20 pixels on the top and bottom and 10 pixels on the left and right. - And we'll also add a, - uh, - ingredient background texture here. - Eso I'll jump back over to the CSS radiant generator and we can actually even just use this - one and kind of change it up a bit. - I I'll go ahead and make these a little bit darker. - Now I'll say that this color goes a little darker and also maybe starts a tiny bit darker - like that, - and we'll make it a little bit taller. - Girls, - check that out. - That looks pretty good. - Um, - and we'll go ahead and say copy to copy this, - Grady it that one looks fine and then we'll paste it in here like that. - Cool. - Okay, - so we'll go ahead and save that and we'll come back and refresh. - And if I scroll down, - we can see that greedy int from light grades and dark great. 44. Creating Column Structure: - So this concludes all of our styles using the techniques we learned for box model and box - aesthetics. - Next, - we're going to develop our page layout by using the float positioning techniques that we - learned in the previous examples. - If we come back to the browser here, - you can see that certain sections are going to take up the full width of the rapper and - other sections will be columns that will be positions side by side. - So, - for example, - here on the About page, - which is our home page here, - this about section is going to take up all three columns or all of the rapper space. - Okay, - now this this artist section here that has our video in it, - the artist corner section is going to take up only the 1st 2 columns on the left, - and then the company news section is going to take up just a single right column here that - will float beside it. - And in other situations, - like on the catalogue page, - we're going to have a three column structure where the men's section here is going to be a - small box that takes up just the first column on the left. - The women's section will take up the middle or the central column in the center in the - middle here and the Children section will take up a single column to the right. - So we'll have 123 boxes side by side. - Okay, - So in order to accomplish this, - I'm gonna make use of float positioning, - and I'm gonna go ahead and create sort of my own grid system to do this by creating classes - . - And each class will control whether that section is the width of a single column, - two columns or stretching across all three columns. - And we also use float positioning to control. - Whether it stays to the laughter stays to the right. - Okay, - so I'm gonna name each of these classes in a way that will make sense to me later on down - the road. - So I know how to how to apply these classes. - Depending on how I like to position these sections on the page, - so certain sections will only take up a single column. - If we imagine that it most will have a three column structure, - then I'm gonna name classes, - call CEO L for column and then the number one. - If they only stretch across a single column. - I'm gonna use Call two or C O L two if they stretch across two columns and call three. - If they stretch across all three columns, - such as in this intro pic section here are rather the about section here, - which stretches across all three. - Okay, - so let's go ahead and create some classes. - Let's create one year called column one, - because it only stretches across a single column and will say underscore left. - So we know that this column positions to the left and in order to position it to the left, - will use float left and we'll specify a specific with so that it takes up on Lee Ah, - one column. - Okay, - so if there's three columns, - 33 0.3% should get me to the point where it's only about 1/3 because three of these would - add up to, - like 99.999 um, - and have three equal columns. - However, - we want to have a little bit of space in between the columns using margin. - So we're gonna use a calculator to to figure out how why these things need to be so you you - can probably do this math in your head, - but I'm not so great. - Not so hot it, - Matt. - So I'm gonna make sure that all this is correct using calculator. - So we have 100% with of the rapper available, - and I wanna have 1% of margin in between each of the three columns. - So that would be 1% in between the left and middle column and 1% margin in between the - middle and right column. - So each of those 1% on the left side of the middle column and 1% on the right side of the - middle column adds up to two. - So I have to subtract 2% from the 100 which gives me 98% leftover remaining available with - toe work with. - So now I can take that 98% and divided by three columns, - and that will give me 32.6. - Okay, - so this column should be 32.6% with all right. - And I think I also had a margin to it will say that this guy has no margin on the top. - No margin on the left and right. - But he has 20 pixels of margin on the bottom. - So I don't give a little bit of space below each of the sections that I apply this to. - Let's also create a single column for the middle. - So this is the column that will float in the middle, - and we'll set this also to float left so it will stack up beside the the other column - that's floating to the left there and that'll put it right in the middle. - This guy will have the same width, - which is 32.6% now. - One differences is I'm gonna actually had margin on the left and right side of this guy by - saying zero on the top 1% on the right, - 20 pixels on the bottom and 1% on the left. - So remember, - if you specify four values the first value. - If you go around clockwise, - the first value is top thes. - Second value is right. - So this is 1% margin on the right. - The next value going around clockwise is the bottom 20 pixels on the bottom and lastly, - 1% on the left. - So this will give a percent of margin on each side of the middle column. - Now the last column, - which is on the right, - is going to be pretty much the same as the Left Column, - except for the fact that instead of floating left, - we can float this guy to the right. - Okay, - but it'll have the same width and the same type of margin, - which is no margin on the top, - none on the left or right and 20 pixels on the bottom. - So this will be all the classes I need for my three column structure. - Another situation is I might want an element to take up the width of two columns, - so I'll go ahead and create a class called a call to meaning that it takes up the width of - two columns and we'll make Sometimes, - you know, - the two column will be on the left side, - and other times you two column will be on the right side, - so we'll create two classes for that. - Okay, - so this guy obviously is gonna float to the left, - whereas the one on the right side it is going to float to the right. - Okay, - we will have 100% available space, - and then we'll have a A column that's taking up the with of two columns or excuse me, - a section that's taking up the with of two columns, - and then we'll have only 1% of margin on the right hand side of that. - And then we'll have another column that's only taking up the width of one column. - Okay, - so instead of subtracting 2% margin here, - we only have to subtract 1% margin, - which gives us 99% like that. - Okay, - so really, - what we want to do is we want to subtract the, - uh, - also subtract the column on the right because we know that the for this guy to for column - to left we know that, - um, - we're gonna have the combination of a column to left and a column one right, - which I should actually change the name of here. - This will be one column one left column, - one mid in column one. - Right. - So we're gonna pair up like a column to left with a column one right or a column to write - with a column one left and you'll see what I mean when we start implementing this into the - page. - So what I did was I decided to subtract the 32.6% to figure out what the remaining spaces - for this other column. - So we have 99%. - We took the 100% minus 1% margin, - and then we're going to subtract 32.6, - which will give me the width of the other column, - which is 66.4%. - Okay, - so both of these guys should have a width of 66.4%. - Okay. - And this one here will have a margin of zero on the top. - 1% on the right, - And then we'll say 20 pixels on the bottom and zero on the left like that. - And this one will be the same here. - Except that it's floating right. - And it will be zero margin on the top zero on the right, - 20 pixels on the bottom and 1% on the left. - Okay, - so I have more possibilities there. - I can have a section taking up the width of a single column or taking up two columns. - Okay. - And then lastly, - you know, - we may wanna have something that spans all three columns, - so we could just call that call. - Three. - So here we have, - um, - margin of 00 20 pixels, - meaning zero on the top zero on both sides and just 20 pixels on the bottom. - And we're gonna add another class in here called column three to make it take up all three - columns and remember to add multiple classes. - You could just put a space in between each class name. - And now this has a class of column three, - and it also has a class of shadow, - so it should also have a drop shadow. - So we'll go ahead and save that, - and I will come back into the browser. - And really, - the only thing that's gonna change here is it's gonna add some margin underneath it, - which you can see it did There. - Now there's a space in between this section and the next section like that in this a - spanning three columns across. - Okay, - Um, - not too not too fancy. - There. - Now things will start getting interesting down here. - So this is the artist section, - and I want the artist section to take up the width of two columns or be, - uh, - 66.4% wide and then have the news section which is right here. - Company News. - Take up just the width of one column over here on the right hand side. - So what I want to do is use the column to left for the, - um, - for the Artists Corner section and I want to use Column one right for the new section. - Right so I can scroll down here to the artist corner and we can go in here and add a class - of column to underscore left like that and will come down to the new section and we'll add - a class of column one right, - meaning it stays to the right. - But it only has the width of one column, - and we'll go ahead and say that and we'll come back to our browser here and we'll hit. - Refresh And there we go. - So there's something kind of funny happening here. - Company news is supposed to be able to fit next to this left hand column. - OK, - but you guys might remember that there's two different box models, - and, - um, - this particular browser Chrome uses the W three C box model where whenever I add like - border or padding in this case, - I have 20 pixels of padding around each of these, - it actually makes it a little bit wider than will fit side by side. - We also have some elements, - like the details section at the bottom of the page has contact correspondents links and - follow. - It's pulling up beside the element that's floating, - so that's kind of goofy, - too, - so we'll have to fix that. - So remember in the one off examples from the lecture in the previous lecture slides, - we looked at using a property called Clear to get this guy to clear past. - We also looked at changing the box model with to include padding using box dash sizing a - CSS three property to set all the browsers to use the same box model. - Okay, - So in order to get some of these things toe work, - we're gonna have to go back into style that CSS and actually created a comment up near the - top of the page here in a section called Fixes. - Right here it's online 12 of the style dot CSS page. - So we'll scroll up there and let's go ahead and implement in some of these CSS fixes. - One thing we want to do is change the box model, - so we're gonna say Star to select all elements like that and we'll go ahead until, - by default. - Initially will say these guys should have a margin of zero um, - padding of zero and border of zero just to do a reset. - And then we'll also change the box sizing, - which will make it so that when we specify a width, - it will include the padding in the border. - And we'll say, - Use the value Border box, - which is the Internet Explorer box sizing method. - Okay. - And we'll use the the prefixes Web kit also to make this work and old versions of chrome - and safari. - Well, - say Web kids dash box dash sizing and we'll save border dash box And we also use dash mosey - dash box Dasha sizing. - And we'll also said that two border dash box. - Okay, - so all elements now should be using, - um, - the Internet Explorer border box method which should give us good support and all the - browsers and should allow these things to display it properly. - So now our 20 pixels of padding will not be what will actually be included into the width. - Okay, - so I'll go ahead and save that we have a few things that aren't clearing properly. - For example, - the details section we want to clear past the height of anything floating above it so we - can actually scroll down then to that detail section here and we can go ahead and set the - detail section to clear both. - So that means that the details section and will no longer jump up next to this thing that's - floating. - And these guys will have the appropriate wit, - so they should appear side by side. - So let's go ahead and save the code, - and we shall come back into the browser and refresh. - Cool. - So now these guys are appearing side by side. - Okay, - so we solved some of our problems here We now have. - This guy has a column to left class which is making it float left and giving it a 66.4 - point 4% with versus this one, - which is using a column one right class, - which is floating to the right and has 32.6 with and because we changed the box model to - border dash box, - this has the 32% or 32.6%. - With is including the padding here and so is this one. - Here. - The 66.4% with is including padding, - and then we have 1% margin, - which adds this up to a total of 100%. - Okay. - And I told this detail section to clear by saying clear both. - Ah, - here. - I got this detail section to clear past the height of those elements that are floating - above. - Okay, - um, - you may notice that the a few other things are happening That's a little bit goofy. - Um, - so one thing is that the the ah Div with the i d. - Of would this would texture it's actually on Lee as toll as this element which is not - floating. - This column three element is not floating. - But remember, - whenever you have a parent element and you float Children inside of it, - it loses its reference for how told to be so. - Now. - This would this div, - with the idea of wood which has the wood texture, - is collapsing. - It's apparent that's collapsing because we have the floating Children inside of it, - right? - So do you guys remember the method? - We use the fix we used to to stop a parent from collapsing so I'm gonna come up here in the - fixes and I'm going to add that that special CSS hack for fixing a collapsing parent. - It's called clear Fix. - So we'll create a class of clear fixed colon after and will come inside and will say - content. - And we'll throw in like a little period symbol there will tell this continent to display - block. - And we will tell this guy to clear both to clear past the height of any floating Children. - Um, - any any floating elements above it. - Excuse me, - and then we'll change its visibility to hidden, - so we don't actually see that content. - And we'll set its height 20 and its line height 20 A swell. - Oops. - And we have a little type of there will fix that. - Okay, - Six, - I could now apply this class to any element that's collapsing. - So, - for example, - I can come in here to the to the Div with the idea of wood, - and we can add a class of clear fix to stop that guy from collapsing. - Okay, - so we'll go ahead and save that. - We will come back to the browser and refresh and cool. - Now we can see the wood textures repeating all the way below below the floating Children, - so clear fixes coming down here and clearing past the height of the floating Children. - Giving this parent element, - which is called, - would a reference for how tall to be. - Okay, - let's go to do the same thing for thes three dibs down here. - Let's turn this into a three column structure, - so we just did it before, - So it should be pretty easy to remember how to do this this time. - So if I come down here into details, - let's go ahead and give this 1st 1 here a class of column one left. - So we'll say Active, - I D. - Excuse me. - Div Class column One left like that and will come down to the second column and we'll give - this a class of column one mid for the middle. - And lastly, - we'll give the last if here a class of column one right, - that should make those guys appear side by side. - And we don't want the section to collapse because we have these guys were floating Children - , - So we're gonna have the same issue we had up above with the section or season with the Div - . - With the idea of wood was collapsing. - Now we'll have the same issue where the section I d details will collapse because all of - its Children inside or floating. - So we have to give it a reference for how tall to be by adding that clear fix and in the - mix. - And if you don't remember quite what clear fixes for go, - go ahead and go back to the videos and the slide lecture to check that out. - So I saved that and we can refresh. - And now you can see these guys side by side, - which is pretty cool. - I think I'll add a little border on the right hand side here and a writing inside here just - to these these two here. - So we'll go ahead and create a class for that Here. - I'm gonna go back into the style and into the global style section and underneath shadow - here. - Why don't we create a class called border right like that? - And we'll save border dash right colon, - one pixel well say dotted and give it a medium gray color. - And we also add some padding on the right hand side also, - So the text never goes right up against that border and we'll say, - patting right 20 pixels like that and safe. - So I just want to apply this border right class, - too. - That detail section down here, - but only to a few of these. - So I only want that that border to be in the two Central Central columns there. - So we'll go ahead and add it to the first column inside of details, - which is called one column. - One left will come in here and we'll say border rights like that ad that style there and - also go to this one called Column one mid and will also add Border right, - that one as well. - And you will save and I'll come back and refresh, - and now you can see it's kind of subtle, - but I created a dash line right here on the right hand side of this column and also on the - right hand side of this mid column here. - So now we just have, - like, - a subtle little line there in the center. - All right, - that's looking pretty great. - Um, - I got to say, - I'm impressing myself. - Guys, - I'm liking the way that's looking there. - So I've already added these classes to the other pages, - you can see that this has a class of column one left. - This has a class of column one mid. - This has a class of column one right here we have a two column structure, - so this one's called Column to left, - and this one's called column one Right column one right column one right, - and this is column to left. - And here we have the three column structure column one left column, - one mid and column one right, - all right, - and this is going to allow us to create different column structure on different pages. - Toe whichever section we like. - Um, - so if I go to the sale page, - this one has a class of column three. - Or call three to mean that it takes up three columns across. - And here we have column one left column, - one mid column, - one right. - All right, - this one is column three, - takes up all three columns there, - and you can see, - since I have a width of 100% inside of my, - um, - my table here, - it's just expanding as far as it can hear until it runs into the edge of the section. - Now, - on the contact page. - We have a ah class of column column two left in a class of column one. - Right. - Okay, - so that's about it. - For this exercise, - I hope that this gave you some insight into how to create page structures with multiple - columns and the flexibility to write your own CSS styles to create your own grid systems - using combinations of floating Ah, - the sizing of your columns. - And also techniques to fix issues like clear fixed to prevent collapsing parents and box - sizing. - Teoh. - Adjust all of the browsers to use the same box model and also techniques like clearing so - that we can clear past the height of any floating elements above in ah, - in upcoming exercises, - we're going to take it a bit further learning some advanced positioning techniques. - We're gonna come back and finish up the styling for the navigation, - the main knave at the top of the page. - Then we'll move on to learning to build some responsive designs using CSS during media - queries. - So I hope you like this one, - and I hope you're starting to get the hang of building your own page layouts. - Feel free to check out the links below the video for some more tutorials on positioning and - building page layouts, - and then go ahead and move on to the next code challenge, - where you'll be adding some positioning and column structure into your own website layout. 45. Developer Tools (part 2): - Hi. - Welcome back. - This is part two of the developer Tools videos. - In the first part, - we looked at inspecting elements so that we could see what HTML and CSS was applied to - those particular elements. - And we also looked at changing and modifying the CSS attributes and values so that we could - preview changes in the browser before we decided to permanently make changes in the code - editor. - In the second part, - we're going to look at all of the magnificent things that developer tools can help us with - when we're building page layouts. - So there's no need to actually change anything in your code. - I've just created a hypothetical situation here where we have a problem occurring in our - layout So you can see this is just the index page from our exercise, - and I've gone in and I've purposely broken something here, - and we're going to use developer tools to help us solve this issue. - So the main issue here is that this section here called the Artist Corner, - is supposed to be floating to the left, - and this company news section here is supposed to be floating to the right, - and these guys were supposed to be side by side. - And you can see here that even though it appears as if the company news section has enough - space to fit up side by side with this other section, - for some reason it's getting pushed down below. - So first thing I'm going to do is right. - Click and inspect one of the elements that's giving me a problem. - And here I right, - clicked on the figure, - which is the box. - It's surrounding the video element in the figure caption, - and you'll notice if you look at the bottom of the developer panel here, - there's actually a breadcrumb that shows you the relationship of which elements are nested - inside of other elements. - So, - for example, - we're on figure. - If I click, - I can see that figure is actually inside of section with the class of column to left. - And that's inside of a div with the class of rapper and so on and so forth. - So if I go over this section here with the class of column to left, - I can see that Chrome is actually giving me color coding to indicate the padding and also - the margin. - So in this case, - Chrome uses a light green color to indicate the padding inside of the element, - and it uses a light blue color to indicate the content area inside of that element, - and it uses a light orange color to indicate margin. - So in this case, - you can see that there's actually quite a bit of margin on the side of the element, - and that's probably the culprit as to why the other section, - the news section, - is not able to fit up side by side with this artist corner section. - So if I select the element there as we know, - we can see all of the CSS styles that are affecting that particular element. - And if I come down here to margin, - we can see that the culprit here is that the right margin is set to 20% now, - aside from being able to click and change the values here, - we also have another panel that we can open up to see more information about this - particular box model for this element. - So I'm going to collapse East aisles panel here by clicking this little down arrow, - and underneath that you can see there's another panel titled Metrics, - and we're going to expand the metrics panel, - and that's going to reveal the box model for this particular element. - You can see if I hover inside the centre. - I'm able to see the content area. - And in fact, - that's even giving me the exact amount of pixels within height for the available content - area inside this element. - And if I hover inside of the next section of the box here, - this one that's called padding, - we can see that there's actually 20 pixels of padding on each side. - Um, - and we can see that there is no border and that there is a 20 pixel margin on the bottom - and that that 20% margin on the right actually ends up being 192 pixels. - One of the nice things about being able to see the box model is you can see very clearly - how much space or how much screen real estate. - Each element is actually taking up, - and that's important when you're trying to build column structures. - Additionally, - we can also double click to change these values so I can type in another value here, - or I can also use the up and down arrows to change the amount of margin in this case. - So I'm just gonna hold the down arrow and bring the margin in until I see that there's - enough space for the other column to fit side by side with this one. - There we are. - So here it looks like around, - you know, - nine pixels is about as much margin is I can have here in order for the new section t fit - side by side. - Additionally, - aside from putting in pixel values, - we can also put in percent values as well. - So, - for example, - if I said this guy to 5% I can see that that doesn't work. - If I said it to 4% I can see that still not quite enough. - If I said it to 3%. - Ah, - 2%. - So by typing in the percent symbol instead of pixels, - it'll actually do the conversion for me. - Um, - and again, - if I type in 1% we can see that that works. - So 1% of space inside of this rapper, - which is 960 pixels, - comes out to nine pixels of space. - So now that I know that 1% is my magic number, - I can see that I'm going to have to change this 20% here, - toe 1% which is online 206 of these style dot CSS style sheet. - So if I come back over to my code and I come down here to line two of six, - I can see this is the class column to left. - And here is the margin of 20%. - I can reset that to 1% save, - and we can come back and refresh the page. - And we've corrected that error so you can see developer tools can be very useful for - troubleshooting the wits, - padding and margins borders of the box model. - Aziz Well as enabling you to see all of the CSS positioning commands. 46. Positioning Techniques : - Hi. - Welcome back. - This is slides 3.2 advanced positioning techniques. - By this point, - you should start to feel a little more confident about building page layouts. - And in the previous exercise, - we looked at using floating to create column structure. - And in this next exercise, - we're going to learn some additional positioning techniques. - We're also going to take a look at a CSS property called Z Index that we can use for - layering or positioning elements in front of or behind each other. - We're also going to take a look at a popular technique using image sprites and some CSS - code to create rollovers where when the user hovers there, - mouse over an image will see the image change. - I created some working examples for the positioning techniques we're gonna learn. - And if you're interested to see the completed code for all of these examples, - you can always check out the links that are listed here in the slides. - So let's go ahead and jump over to that first example and you can see here. - I've just created some parent containers and inside of them I've created some boxes here, - and each box will help us to demonstrate a new type of positioning we're gonna learn. - We're gonna learn relative absolute and fixed positioning. - And I've already given these boxes some generic class names just to help us demonstrate - each of the different types of positioning. - First, - let's take a look at relative positioning, - so by default, - all elements if we don't specify our position static like this. - But let's see what happens if we go ahead and add some special positioning, - like relative positioning so I can say position relative. - And as soon as you change the positioning to any other special type of positioning, - you then gain the ability to use some other CSS properties like top bottom left and right, - so that you can tell the browser how far to push or move about element on the screen. - So, - for example, - if we say top were telling the browser to push on the top of the element and move it down - 50 pixels like that. - So if I go ahead and run that you can see it pushed the this element here, - the square that says relative it pushed it down 50 pixels from its previous location where - it was located before there, - and if I say a smaller number like 10 for example, - and I run that it only moves it down 10 pixels from its previous location. - So specifying top bottom left or right for relative positioning is telling the browser - which side of the element that you want to push on Now. - You can even use negative numbers as well, - if you like. - If I say top negative 50 pixels and I run this, - you can see that it actually does the opposite. - So with a positive number you're pushing on the top. - But with a negative number is it's as if you're pulling on the top. - You're pulling it up 50 pixels, - so I'll go ahead and say top 10 pixels and the world move it to the right by saying right - 10 pixels, - which will push on the right hand side. - 10 pixels like that. - Let's take a look at another type of positioning called absolute positioning so we can set - this guy to position absolute, - and we'll go ahead and use the same values top 10 pixels, - right, - 10 pixels. - And even though these air the same values, - we're going to see that this does something very different and That's because absolute - positioning uses these numbers in quite a different way, - so you can see what happened there. - Waas. - When I set this this child element here to position absolute, - it actually breaks free of the parent and pulls up to the top right corner of the screen. - So now when I'm using the property top, - it's referring to its relationship to the top of the viewable window or the viewable - browser area. - And when I say right, - it's referring to its relationship to the right edge of the viewable browser window so you - can actually see the 10 pixels there is. - It's 10 pixels down from the top here, - and it's 10 pixels over from the right there. - So the main difference between relative and absolute is that when you're using positioning - here, - positioning commands on a relatively positioned element, - you're repositioning that element relative to where it was positioned before, - right, - so it used to be here, - and then it presses it on it in a particular direction, - pushes or pulls it and repositions it based on the relationship of where it used to be. - Now, - absolute is based on the relationship of the entire viewable window so that's quite - different. - So one way you can think about it is this absolutely positioned child here. - It's kind of like we gave it too much sugar and it, - like, - broke free. - It got hyper and busted out of the parent, - and you can see its parent actually collapsed there. - And that is in contrast to relative also where when you position something relative, - the parent still kind of maintained sort of a ghost of where that element was positioned - previously. - So we still have the height maintained their okay, - so you may be curious what happens when we also give special positioning to the parent. - So, - for example, - let's say I go up to this parent here that has collapsed because it has a child inside of - it that's positioned absolute. - What if I add some relative positioning to this parent is well, - so that's kind of interesting. - You can see that the parent is actually still collapsed here. - However, - this absolute child is no longer able to break free. - So we gave the child superpowers. - We gave it sugar. - We made it hyper by positioning at absolute, - but now we've given the parents superpowers by positioning that parent relative. - So when the parent has special powers to it can still hold the child inside of it. - And now this top 10 pixels, - right? - 10 pixels is referring to its relationship inside the parents. - So it went to the top What, - 10 pixels down from the top of this parent and 10 pixels over from the right side of the - parent. - And then you'll see what we We remove that relative positioning off the parent and set it - back to just a normal, - static parent. - It can no longer hold this wild child inside of it. - So when we run that there, - this parent collapses and it's normal, - static position and the absolutely position child can break free. - And it's now, - um, - positioning itself based on the edge of the browser window instead. - So that's kind of interesting. - Let's take a look at another type of positioning called fixed. - Okay, - so we can save position, - can weaken. - Set this one to position fix, - and we'll go ahead and we'll set this one to position 10 pixels down from the top, - and we'll set it 240 pixels from the right on. - What we'll see is that fixed positioning is kind of similar to absolute in that this top - bottom left and right directions that we can place here are still in relationship to the - entire viewable browser window just the same as with absolute. - So this one is appearing 10 pixels down from the top and 140 pixels over from the right - side like that. - Now there is one main difference between fixed and absolute, - and that's what happens when the browser window scrolls. - So I've created this DIV class with filler here on the bottom. - Let's go ahead and set a height to that so we can make it tall enough that we need to - stroll down in the browser. - So we'll give this guy like a ridiculous height, - so we know that it'll go off the screen. - This will set this to 900 pixels tall, - and that should be enough to run off the screen there. - All right. - And now we have a scroll bar appearing cause this elements toll and we're gonna notice it - as we scroll down the element that has fixed positioning is staying with us. - So the absolute relative position elements and all their static containers that air. - The parents are all scrolling off the screen, - but fixed means that it stays fixed in place while the browser window scrolls Okay, - so you might be curious about when you might use thes other types of positioning, - and we're gonna take a look at some uses for these in the upcoming exercise. - Let's go ahead and jump back over to the slides then. - So we looked at relative positioning, - which allows us to use positioning commands like top bottom left and right and move an - element based on the relationship of where it used to be when it was statically positioned - . - So Top is just pushing on. - Its top left is pushing on the left side of the element, - and you're moving it based on where it used to be positioned at. - We also looked at absolute positioning, - which allows us to move an element based on it's relationship to the entire viewable - browser window. - And we also looked at fixed positioning, - which similar to absolute but will stay fixed in place even when the user scrolls in the - browser 47. Z-Index Layering: - next, - let's take a look at a CSS property called Z Index, - and I have, - ah quick example we can go through. - Look at that. - Um, - you may have noticed that in this last example when you scale the screen in and out, - larger and smaller, - that these elements can actually overlap on top of each other. - And we can actually control that using something called Z Index. - I've created a really basic example here 123 with these three dibs, - and I've given them each a generic class of Z one, - Z two and Z three. - And we'll use that to apply a different Z index to them and to position them so that some - of them are on top of the other ones. - So we'll just start out by going down in here and create a class called Z one so that we - can add this 1st 1 to have a Z index of one now by default. - If you don't specify all the statically positioned elements, - just have hazy index of zero, - and when you add some specialized positioning like relative or absolute, - it will move above the statically positioned elements. - Unless you specify Z index so a Z index of zero is the you know, - the normal layer that's just above the body. - You can actually set the index numbers to negative numbers, - and those will fall behind the normally the normal, - static repositioned elements, - and you can never go behind the body. - So the body is kind of like the farthest back layer that you can't get behind so you can't - make elements disappear. - Anything behind the body. - But you can position them in front of and behind other elements on top of the body, - essentially. - And anytime we use the higher the index number, - it's going to go above another element in any time. - We use the lower the index number. - It's going to go behind those other elements. - Okay, - so this guy, - I'll just have the Z index of one. - Let's go ahead and give this one a background color of aqua just so we can see the change - there. - And let's also give this one a position of relatives. - But currently I guess we won't really no need to position. - This one will just position the other one on top of it. - So I guess I'll just set this to top zero left. - Zero. - Okay. - And we'll run that to see that code. - So now we're gonna go in and, - uh, - set this second box to to overlap on top of this one. - This will create another class, - and we'll call it Z two. - And I'll set this one to have a Z index of two. - And I'll change the background color here, - toe lime. - So they stand out and to pull this one on top of the other one, - I'm gonna go ahead and set it to negative 50 pixels on the top and 50 pixels on the left - side. - So I'll be pulling up this second box 50 pixels, - and I'll be pushing it over from the left side. - 50 pixels. - So we'll have to run that. - And you can see box two with the hires. - The index of two overlapping box one that has the index of one. - You can see if we change the Z index from two to ah, - lower number than one. - For example. - If I say like, - negative to which is a lower number and you run that, - you'll see it'll go behind, - and then when you use a higher number, - it will jump back on top. - Okay, - We can get this box three here into the mix as well, - by setting this one to have a Z index of three. - So we'll set you too. - The index three. - And we'll set the background color here. - Two fuchsia. - And we'll set this to top negative 100 left. - 100 to get them to overlap. - There, - there we go. - So you can see there that the index of a higher number overlaps and he pulls in front and - the index of the lower number goes behind, - okay? 48. Sprite Rollovers: - next, - let's talk about image sprites. - Now a sprite is essentially when you take multiple images and you sandwich them together, - you tile them together into a single image and the suits the purpose of speeding up your - loading time in the browser. - It's more efficient if we load a single image and then just reposition it than if we switch - between multiple images. - So, - for example, - let's say that you have a navigation that looks like this in your website. - And let's just talk about this home button here. - Let's say that you have an element that's on Ley the size of this home. - But so, - for example, - if this entire sprite were, - let's say, - hypothetically, - 60 pixels tall, - let's say we create an element that's only half that 30 pixels tall, - so you can Onley see this great part of the button is visible. - Remember, - if we place a background image into an element, - we can only see as much of that background image as well fit inside of that element. - So the element which is probably a link or something like that, - Theo Element, - is going to be on ley the size of the gray home button here. - Okay, - Now, - when the user hovers over, - we want to reposition this image to pull the background image upward, - thus revealing the orange part and to the user. - It looks like this button lights up orange, - but really very, - very quickly, - faster than there. - I can see the browser is actually repositioning the background image by pulling it up. - And this is more efficient than asking the browser to go and find a separate image and - loaded. - And the reason why is when the when the page first loads, - it actually loads this whole image at once. - And then when the user hovers over, - it's not having to go and find the other image and loaded again. - It's just repositioning it. - Okay, - so sprites can include two states for a single icon, - or they can contain multiple states, - for example, - for different menu items or more complicated user interfaces. - And the main advantage there is quicker loading time, - so you load all the images at the beginning of the page, - and then there's no waiting when the user is interacting and hovering their mouse over. - This is an example of a really simple two state icon showing you a little drop down arrow, - so you can imagine that the element that this is inside of is only as wide and tall is half - of this image. - Basically, - you can. - You can only see this upper half. - It's like a window looking into just the upper half of this background image containing the - black drop down arrow. - And then when the user hovers over, - we are using a CSS command to change the background position. - Negative, - however many pixels tall. - This is right. - So if this is 60 pixels tall, - we'll say, - Move this up. - Negative 30 pixels so that this white drop down arrow is now in the position or showing - where the black arrow used to be. - This is the code for a CSS bright roll over so you can see if we're doing this with a link - will set the link to display block. - That way it can accept a width and height. - And then we linked to the background image, - which is the entire Sprite image which has multiple states kind of nested into one image. - And then when we hover over, - we can use the CSS pseudo class selector hover, - which allows the hover allows this style to trigger when the user hovers over and the only - thing we're changing here is the background position, - which changes that background image to reposition itself. - So we're really kind of like sliding the background image inside of the element and - revealing another part of the image that was previously hidden. - The background position Property accepts two values the horizontal positioning and the - vertical positioning. - So the horizontal positioning here set to zero. - So we're not moving the image horizontally. - But here they've chosen to set the vertical position to negative 30 pixels, - which will move that background image up 30 pixels. - Okay, - so we'll go ahead and take a look at some of these techniques that we've learned and apply - them inside the exercise, - which is our continuous exercise that we have been working on the Z H W Shoes website. 49. Styling Navigation: - I will come back. - This is exercise 3.2 positioning and sprites. - In this exercise, - we're going to be adding some more style to the main navigation bar at the top of the page - . - And we're gonna be style izing it so that each link kind of looks like a button when we - hover over it like we're pressing in a button and we're also going to add a social media - bar on the right hand side of the screen and the both the navigation and the social bar. - We're going to apply some positioning to them so that they'll stay put. - They'll stay in place even when the browser is scrolling of what? - I hadn't downloaded the starting code and you can see I brought it up here in sublime text - and the two main files we're gonna need to work with here is the index page and the style - dot CSS page. - So the first thing we're gonna do is we can scroll down here to the header and remember - inside the header we have the logo panel, - but we also have this knave bar and we want to start styling this knave bar where to style - this did with the idea of knave Bar to have a grainy in texture that repeats across the - screen. - And then we're also going to style this box called Knave the HTML five semantic container - called Nath here. - And then we'll also style each of these individual links here. - So let's go ahead and jump over to the style dot CSS page and we can scroll down. - And I created a comment here. - You can see online 1 39 weaken. - Start writing some code to style the knave bar. - So the first thing I want to do is I want to select that DIV with the idea of knave bar - itself, - and I'd like to add a background image to this now. - Previously, - we looked at using CSS three radiant to make a fade from one color to another, - and this time I'm going to show you kind of like an older strategy or sort of like a legacy - technique for getting a Grady int to appear. - And that involves using actually creating the ingredient as like, - a little image slice, - and then you can repeat that image horizontally. - So, - actually, - let's take a look at at that image really quick here. - I'll just go ahead and bring it up. - So this one's called header fade and maybe a little bit hard to tell. - Alexis is so narrow, - but this is kind of like a light gray color here fades from one color great to another, - and it gets a little darker here at the bottom. - So it's gonna be the graphic we used. - And we're gonna repeat this little Finn sliver of a graphic horizontally. - Since this is just a little tiny sliver of graphic, - a little tiny image here, - this this image eyes going to load very quickly. - It's actually a very small file size on. - And then, - by repeating it horizontally, - we're going to get it to flow across the page. - Um, - and so we can have a real small file size like four K, - and we can use that on a large part of the screen, - and it'll still load very quickly. - So before coss the ingredients we you know, - oftentimes we're using an actual image that had the Grady in inside of it. - So we'll go ahead and say you are l and will point towards are images folder and we're - gonna use that one that's called header dash fade dot Jeff. - And we're gonna tell this one to only repeat horizontally like that. - Repeat X. - Okay, - We're also going to add a border on the bottom here. - And previously we looked at using the CSS shorthand border, - which affects all sides. - But we could also say border dash, - bottom, - border, - dash, - left border, - dash, - top quarter. - That's right. - So in this case, - we'll set one pixel solid and will use a medium gray color like that, - coming at a couple more styles here. - So we also want to add a border to the knave box itself so we can go ahead and specifically - target the nab that's inside of knave bar by using a descendant selector. - So we're saying, - Hey, - browser going find a element that has a unique idea of nab our go inside of it and select - that that html five semantic element called knave. - And this one we're just gonna tell it to have a border dash left. - One pixel, - solid pound. - See, - See. - See like that. - Okay, - cool. - Now, - inside of this guy, - we have the links that we want to style, - so I'll start styling these links here uh, - and will be real specific. - Again, - using a descendant selector will say, - Hey, - browser, - go and find something You know, - an element with a unique idea of knave bar. - Go inside of it and find an element called knave and go inside that element in style, - all the links inside of it. - So this only styles links inside of nab that is inside of knave bar. - So it's pretty specific there. - So for these links, - we want to set them to display in line dash block, - and that way they'll be able to accept it with. - And what we want to do is we want to set this up so that all five of the links have equal - spacing. - And you remember that that this knave bar here, - the did with the idea of nab our this is just across the entire screen 100%. - And then we have a did with the class of rapper here, - and this guy has a fixed width of 960 pixels. - And then inside of that, - we have this guy called knave. - So now it doesn't have a wit specified currently, - so it's just stretching 100% until it runs into the edge of the rapper, - which is 9 60 So I basically have these five links here about on sale, - catalogue, - pricing and contact. - And I want those to take up an equal amount of space within your So if I take that 100% of - room that I have available inside of never and I divided by five, - I get 20%. - So I can set this guy to have a width of 20% like that and will make sure that this has no - margin around it will say margin zero, - and we'll add some padding. - Here is Well, - I really just want some padding on the top and bottom. - So I'm gonna set 22 pixels of patting on the top and bottom and zero on the left and right - . - Use text, - transform and make all the text automatically transforms the upper case characters only, - and we'll set the color of the text to be black, - okay? - And lets you also set the text to a line in the center in relationship to those boxes. - So we'll say text align, - center. - Next, - we're gonna put a border on only the right hand side of each of those links, - and we're going to set it to one pixel solid. - Si, - si, - si. - And we want to remove the underlying off these links. - So I'm gonna set the text decoration to none. - And we're also going to set the font. - You're using the CSS shorthand font property. - And I'm gonna set the fund to be 20 pixels and we'll use, - uh, - let's see. - We'll use trade bucket m s like that. - I was having extra set of quotes there. - You got to get rid of one set. - There we go. - And we will say a za backup will say, - Ariel, - Sand, - Sarah like that. - Okay, - so we'll go ahead and save that. - Let's take a look at this guy in the browser so we'll come back and we'll refresh. - Cool. - So naff bar has a a fade called header fade Dodge. - If that is repeating 100% of the screen because they did with the idea of of Navid, - Bar does not have a wit specified, - and it's a block level elements such as going 100% of the screen. - The rapper here is 960 pixels. - So that guy is centering right here in matching the width of this rapper in this rapper - appear so these all aligned perfectly. - Now knave is inside of the wrapper. - And I gave a a left border of gray on naff. - So this little line here is created by creating a border dash left a naff, - and then each link has a ah, - border dash. - Right. - So that gives me the border here, - on about here on sale here on catalog, - here on pricing here on contact, - which gives us kind of like a little separation, - making them look a little bit more like buttons. - You can see the text decoration upper case and the font styling there. - Okay, - um, - let's see. - That's pretty good. - Let's see, - we also want to be able to let the user know which particular page were on so that when - they click on the page, - that link has ah different style so that we can see that that's the page that were we've - landed on. - So let's go back to the CSS here, - and let's create a specific style for that. - Um, - I'm gonna go ahead and say love bar space a DOT selected. - So this is only going to select links that have that happened, - have a class of selected if they're inside of knave bar. - And I'm gonna give this guy a background color here, - we're gonna save background black, - so it's gonna have a darker background color, - and I'm gonna set the the foreground color here to White like that, - and I'm gonna go apply this. - I'm gonna go in and apply this class to each page, - and then we're gonna go back to the index dot html page and on the index page. - This is this is really the about page so inside of this link here, - I want to add a class okay of selected only to this link, - and we can copy this code here class selected, - and I will add this to the other pages. - So I'll go into catalogue and down to the navigation, - and I'll find the link surrounding catalog, - which is right here and this one. - I'm gonna give it a class of selected. - So on this page, - catalogue link is selected and we'll go to the contact page on all scroll down and we'll go - to the contact link, - which is right here and well paced in that class of selected there. - We'll go to the price of a page, - and here's thelancet for pricing, - and I'll go inside of that link and well paced the class of selected in there. - And lastly, - we can go to sales and we'll go to the on sale link here and I'll paste in that class of - selected there we can save, - and then we'll come over to the browser and we will refresh. - Cool. - So you can see there that this link is having the class of selected on it. - If I click the sale page now, - this one has the black class of selected on it. - Catalogue Has the classes selected there pricing the classes selected there and contact - classes selected there. - So you could see that each each of link has it almost kind of makes it look like a tab - Structure like that button's pushed in for the particular page. - Okay, - cool. - So we're gonna go ahead and go back to the style dot CSS page here, - and we'd like to add a hover state here, - so we'll say lab are now a colon hover like that. - And here we're going to change a few things were going, - Teoh change the color of the text to white. - And we're going to change the background color too, - Ingredient. - And for this one, - I'll just use the CSS three Grady int. - They're So we'll go to the browser and will go find our friend the color Zilla, - Grady and editor. - And I've already created inappropriate Grady in here. - It just starts off as a black color on the edges and fades to like a lighter grey in the - middle. - And I'm gonna go ahead and say, - Copy and well paced, - That's in here. - They're Rio, - and we'll give that save and we'll come back to the browser and refresh. - Okay, - Cool. - And you can see when I hover over there. - Then now these links light up only on the hover state that was using the pseudo class - selector. - A colon hover right. - And then when we switch pages, - we get the darker color on the selected class like that. - Cool. - Okay, - Right now we just have these. - These elements just have normal positioning here. - And what I've done is I've already added enough padding above the logo here that we can - actually fit this navigation bar knave bar to be positioned above the logo and fixed in - place. - And that way, - when we scroll down the page, - that navigation bar will stay there. - And initially, - when you first load the page, - you'll see the logo underneath the knave bar, - and then when you scroll down, - it will start to cover it up. - So let's jump back to the code and we'll go back to nab our here. - So we're gonna go ahead and add a position here of fixed. - Now this has fixed positioning. - It should stay fixed. - Even when the browser window scrolls and we wanted to be in the very top of the page, - someone say Top zero left zero. - So it's in the very top left corner of the page. - Now, - since we set this guy to position fixed, - it's going to actually collapse. - It's with, - even though no with is specified. - So what we really should do is we should specify a width of 100% for that navigation bar - there. - And remember, - our friend Z Index will allow it to be above other things. - So if I say Z Index one should be on top of everything else, - okay, - so let's go out and save that and come back to the browser and take a look at this. - So this now bar is gonna jump up here when I do a page refresh like that. - So that's cool. - So we just made the nab our go on top and because it's set to position fixed when I scroll - that NAB are always stays there now. - So if I come down here to this video, - and I'm like, - Oh, - this is a cool video, - but I want to go to another page. - I don't have to scroll all the way to the top. - I could just always have access to that knave bar in all times. - So that's one use for position fixed. - Okay, - that's looking pretty slick. - I like it. - What do you guys think? 50. Styling the Social Media Bar: - next, - we're going to build a social media bar for the page over here on the right hand side, - and we're gonna use some special positioning, - so that will stay fixed in place as well. - And we're also going to use a real slick Sprite image so that when we hover over, - that image will change. - First, - let's go ahead and go into photo shop and let's take a look at what this Sprite image looks - like. - So I actually grabbed this social icons, - um, - psd off the Internet and you can see here it has, - like most of the popular social networking icons here, - and we're just gonna be using the first top three. - But depending on how you position this, - you could potentially use other ones, - like video and YouTube or flicker etcetera. - So we'll be using. - Facebook will be using Twitter here and the Google plus icon just because they're the top - three. - I'm gonna go ahead and turn my guides on like that, - and you can see that every 40 pixels there's another icon, - so the white or the gray scale Facebook icon starts at zero pixels and ends at 40 pixels, - and then we have a color version of that Facebook icon that starts at 40 pixels and ends at - 80 pixels. - And then the black Facebook icon is starting at 80 pixels and ending at 120 pixels here, - okay? - And then, - if we wanted to use a Twitter icon, - we need to position it down further. - So we'd have to say negative 40 to pull this image up 40 pixels so that we could use the - little birdie here for Twitter. - So we're gonna set this up so these icons or white and then when we hover over, - they're gonna get color, - which is the second column here. - And when we depress the mouse button or when we click the active state, - it's going to turn black like this. - Okay, - so let's go ahead and go back to sublime text. - The first thing we're going to want to do is go into the index page and you can see here - that at the very top of the body, - I've created a comment here, - and this is where I'm going to place my social media bar. - So I'm gonna go inside here and I will create a div, - and I'm gonna give it an idea of social. - We're gonna go inside of here and create a link. - And this first link is going to be for Facebook, - and we'll go ahead and tell this to point towards the Earl of our Facebook page. - For now, - I'm just gonna put a placeholder, - and you could go back in here later on and change this to the actual Earl the http address - of your Facebook page. - And we're gonna set these guys up to target Blank so they open in a new browser tab. - Let's see, - we could also give him a title which remember, - title will effect. - So when you hover over, - uh, - the link, - a little caption will come up So you could say, - like, - visit my Facebook page or something like that You could write inside it there. - And one thing that's really important is we want to make sure to give these each a unique - class. - And the reason why we want to give each of these a a unique class name is so that for each - link, - we can use the class name to reposition that Sprite image to slide it up or down so that - we're seeing theater pro PRI it icon inside of that link. - Somebody give this 1st 1 a class of F book like that, - and I'm gonna copy that code and we'll just paste this twice here. - Ah, - the second link will be for Twitter, - so I'll just give it a class of twit. - We'll just use a little short class names like that and for the title will say Twitter and - for the last one will say G plus as the class name and will set the title to Google. - Plus like that. - And we better change the text here as well inside the link. - Now, - you may be wondering why we're putting text inside of these links when we're just going to - be seeing an icon here that's made up of our Sprite image. - The reason why is that it's a good practice for search engines to actually write the name - inside of the link here like this. - And that way the search engine can read this and see where this this particular link is - going to. - We'll use some CSS to hide this text, - and that way our users will only see the Sprite icon. - Okay, - so we can save this on this page, - and I've gone ahead and already added this code on all the other pages for you, - so we can just jump back to the style dot CSS page. - And if we scroll down to line to 14 here, - you can see I've written a comment, - um, - noting that this section here will be for the social bar. - First thing we want to do is we want to style that box with the idea of social. - And we're gonna set this thing too. - Position fixed. - And we're gonna tell it to go to the top 200 pixels down from the top, - and we'll give it just a little bit from the right side. - So it's not right up against the browser window will say like three pixels from the right. - And remember that each of the icons is only 40 pixels wide, - so we can just say 40 pixels and will make sure to give it a higher Z index numbers so that - it's on top will say Z Index one okay, - and then let's go inside of that and we're going to add the background image for each of - those links, - so I'm gonna go ahead and say a dot f book, - okay. - And then I'm gonna say a dot twit for the twitter and a dot g plus for the Google Plus link - . - And I'm using a compound selector because I'm actually going to set some styles All the - same for these guys. - These are gonna be set to display block because we want them to stack vertically one on top - of the other, - and we're gonna make sure that each of these links is on ley the size of a Nikon eso. - Remember, - each one of these is only gonna be 40 pixels like this, - so we can set this to have a with of 40 pixels and a height of 40 pixels. - So even though the background images much larger, - we're only going to be able to see 40 pixels by 40 pixels of the image of that background - image and in order to hide the text. - What we can do is we can use text dash in den and we can set the text in debt to 100% which - will actually push it. - Um, - 100% means that it's indented 100% of the size of the container that it's in. - So this is, - Ah, - 40 pixel wide container. - So it's actually going to indent the text 40 pixels just outside of the container, - and what we can do is weakened, - then set the overflow to hidden so that we don't see anything that's outside of the element - . - So this Texas in Denning is in Denning outside of the element, - and then it's invisible there. - And we'll also set the white space here to know Rap that, - and we'll link to the background. - So each of these are actually going to use the same Sprite image, - and we'll say you are else and we'll link to images slash social dash icons dot PNG and I - want to set this up to no repeat. - So there's only one of those social icons images inside of these guys. - So each one of these F book twit and G plus each have the same social icons image inside of - them. - Okay, - Now, - for each individual class, - though, - I'm going to have to position that image differently. - So, - for example, - for the F book class, - we're going to want to x at the background dash position 200 which is Ah, - zero horizontally and zero vertically will just basically put it in the upper left corner. - So remember, - we come back to the image here, - this would be the equivalent of 00 is the upper left hand corner means, - which means that we're not shifting the image. - However, - when we hover over, - we want this image to move over 40 pixels like that. - So we're gonna create a hover class for that by saying a dot f book colon hover. - And for this one, - we're gonna change the background position to be negative 40 pixels horizontally and zero - pixels vertically. - So what that's going to do is it's going to move it horizontally, - negative 40 pixels. - Which means it's gonna go to this left left edge and pull on it so that it shifts this - colored f over into the position of where this white F used to be. - And because we're not moving it vertically. - Ah, - we can just set that guy to zero there, - and they should have a semi colon there. - Let's not forget that, - and we also have a active state as well, - which is the state when we depressed the mouse button, - or when you're holding the mouse button down. - And for this one, - we can change the background position to move even further. - Uh, - so in this case, - we want to move over, - not just 40 pixels, - but we want to move over 80 pixels to get to the black background F. - So we'll say negative. - 80 pixels zero like that. - Okay, - The next one is the the Twitter icon, - which has a class of twit, - like so. - And for that one, - we want to also set the background position. - So just copy and paste that there Now for this one, - we want to move it down. - So first, - initially, - we want to see this white one, - so we don't have to move it horizontally. - It'll But in order to get from this top corner down here to see the little bird icon - instead, - we have to say negative 40 pixels vertically. - So this first numbers horizontal in the second numbers vertical. - So here we want to say negative 40 pixels like that to move it vertically. - And we can actually copy and paste these other ones here just to save some time. - And we can pay Sit down here and just change this class to twit like that and twit like - that. - And here the difference is is that we'd be moving down 40 pixels for each of these vertical - positions here. - But same thing for this one in that we're still moving over horizontally. - 40 pixels on the hover and active or moving over 80. - Because remember these air stacked so that this is the default state. - We're always moving horizontally 40 for the hover state and moving over 80 horizontally for - the active state. - So the only thing that's gonna change for each of these is the vertical value. - Now, - when depending on you know, - which class were using, - So for example, - I could really just copy and paste this code here, - and I could reword it just a tiny bit for the Google Plus Icahn, - which has a class here of G plus also you a neat little trick you can do with sublime text - if you'd like to change multiple things at the same time here. - For example, - if I want to change this class, - name this class name in this class name simultaneously. - What you can do is you can actually click with the mouse, - you know, - click the cursor in front of that text. - And if you're on Mac, - you can hold the command key and click again and again in front of each of those three - class names. - If you're on Windows, - you could hold to control and click after the tea for each of those, - and you can see that I actually have three blinking cursors. - Now let me do that one more time, - so I'll click the cursor once here. - And if you hold command on Mac or control on Windows and click again a second time in the - third time here, - you actually get three cursors. - And now, - when you erase its allowing you to write or edit those three lines simultaneously so we can - say like, - G plus like that Oops got an extra P their G plus like that. - And then the only thing that's changing here is the fact that we're moving down 80 pixels - so I could click here here and here, - and I can simultaneously change all three of these 2 80 pixels like that. - So go ahead and save and let's come back to the browser and let's do a refresh. - Cool. - So these guys were appearing and I did some math so that they would appear, - uh, - 200 pixels down should allow them to match right up with the top edge here of the first - section. - And I calculated that by measuring the pixel height of this plus this plus the 30 pixels of - spacing or padding inside of that the wood did here. - And you can see the effect of the sprite working. - Because when we hover over, - we see the color for Facebook. - We see the color for Twitter, - and we see the color for Google. - Plus like that. - Now, - if we click and hold down the mouse button, - we'll see that it will turn black like that for each of these. - So we have the hover state and the active state. - All right. - Very cool. - Okay, - great. - The sites starting to look pretty slick. - We can check it out on all the different pages there, - make sure the navigations working correctly and make sure these social items are appearing - . - And that's looking pretty good. - So here on the contact page, - I have a little issue with the I frame sticking out. - So I'm gonna go back to the sublime text and let's go to the CSS code for that I frame - there, - which should be here online. - Wanna wait? - So we're going to the I frame here, - and we're gonna override the HTML with with some CSS with command. - And we're just gonna tell it to be 100%. - So it'll actually be 100% until it runs into the parent container, - which is that little section for the column that it's in. - And that should fix that. - Let's give that a test. - There we go. - So now the I frame is behaving. - It's staying inside of that column there. - So next you're going to want to move on to the code challenge where you'll be adding in - some special positioning and some sprites into your own page. 51. Responsive Layout Techniques: - Hi. - Welcome back. - This is slides 4.1 responsively out techniques. - So in past exercises, - we've learned to get a real handle on building a website layout. - And now what we want to do is we want to focus on taking all the things we've learned and - applying it to a new model where we can change our layout based on the size of the device. - It's viewing it to do so. - We're going to explore CSS three media queries as a technique to change our CSS code, - depending on the size of the device. - And that's going to thus alter our layout in our content so that it will fit in view - pleasantly on all these different size devices in order to create a smoother viewing - experiences possible. - We're also going to discuss techniques such as met, - a device with the tribute and also some JavaScript fixes that are going to allow CSS three - media queries toe work on older devices as well as exploring some JavaScript fixes that - will allow smooth experience viewing Even when changing a devices orientation from portrait - toe landscape, - for example, - today's websites are being viewed on an increasingly large number of devices each with - their own different screen sizes and proportions. - And because of this, - different strategies have emerged for dealing with layout changing and sizing differences - from device to device device detection. - By checking the requesting devices, - Header info is a common way to see what the specs for a given device are and then serve up - the appropriate files back to the device. - So, - for example, - one solution is to build separate sites for mobile and desktop, - like twitter dot com versus mobile dot twitter dot com. - Another solution is to create a single site and alter the styling and layout using CSS - media queries, - which is the technique that we're gonna learn. - So you may see that some companies choose to use a script on the back end. - And when a device requests that page when it makes the http request to the remote server, - the server uses that header information to detect the device that's requesting the file, - and based on that, - it will actually pass back different HTML files in different CSS files. - So that's like building two different websites, - um, - for one for mobile and one for desktop computers and tablets, - etcetera. - Okay, - so that actually requires more work because we're actually building, - you know, - two sites. - So we have twice the amount of code there, - and that's why I like this latter solution. - And that's the solution that I'm going to teach you guys and the solutions increasingly - gaining in popularity as the go to solution for providing a responsive site. - So in order to get content to display on smaller devices, - changes are made to the pages. - Common changes in layout include hiding content or moving content around. - To match the given devices available screen area, - for example, - you can take the wrapper or container elements and switch them to a fluid with instead of a - fixed amount of pixels. - And that way, - when the device with changes your your elements with will also respond. - Other other strategies include setting the floating columns to float none, - and with the 100% to change to a single column structure as opposed to a multiple column - structure, - images, - tables, - form, - inputs and video are also usually set to fluid wits. - In this way, - the content will scale down as the devices screen decreases, - so it's important to have your images and tables and form set up that way, - and you can imagine that on a larger screen, - your images and forms will look slightly larger. - They'll take up the full width, - whereas as the device scales down, - those images will also scale down in those forms will also scaled down to fit within the - available screen space. - It's also coming to change text and link sizes. - So, - for example, - as a device gets smaller, - you may have to make certain tax smaller so that it doesn't run into other text. - You may also find that you need to make tax larger because certain size text might be very - readable on a desktop computer. - But as you go to a handheld device, - if you're holding that handheld device at a farther distance se arm's length, - for example, - you might need like your main navigation text to be slightly larger. - So text is probably going to scale up or down to be to create a comfortable viewing - experience on the different size devices. - So let's take a look at this. - This diagram here for a second and let's let's imagine that this is a site we're building, - and we're gonna imagine that this pink square represents our logo. - And let's say, - for example, - that this Yellow square represents our main navigation. - And this black box here will be a sidebar that has some sub links in it. - And these blue squares here represent the different sections of our page. - So each one has ah certain type of content and it probably paragraphs and text and things - like that. - Okay, - so this is the preferred layout that this designer had created for desktop. - But what happens when we scale down to a smaller size screen, - for example, - when we view this website on a tablet computer instead? - So here you can see a few changes that have been made to the loud to make it more readable - is we've decreased the space here in between the main navigation and the logo in order to - accommodate the width of this device. - And also, - there's really no room for the sidebar over here on the left anymore, - because we'd like to use the all of the available space for our section content. - So what they've done here is they've taken the sidebar off of the side, - and they've decided to move that up underneath the navigation. - And then here we have, - ah, - switch from a three column structure here into a two column structure on the tablet device - . - And then, - as we scale down to an even smaller device like an iPhone, - for example, - there's a need to switch to a single column structure, - and they've in fact, - actually hidden some content. - The sidebars either been moved to the bottom with the sub links, - or it's been hidden completely, - and you'll see that the the main navigation here, - which is a yellow box, - has been pushed up underneath the logo. - So this demonstrates all the techniques that were going to use in the upcoming exercise to - change our layout as the available screen area decreases. - And to do so as I mentioned, - we're gonna use a new technique and CSS three, - known as media queries, - And this gives CSS the power to ask the browser the width of the device. - So, - based on how many pixels wide the screen is of that device, - it will determine which CSS code to use. - And it starts off with the at symbol here we say at media, - and then after that, - we're able to write a statement, - and this statement will either evaluate to true or false. - What this statement is saying is Onley screen, - which means that it's only going to evaluate this or check this on specifically screen - devices as opposed to projector or printing devices. - And then after that we're checking the width of the device. - So this is a true or false thing. - It says Ah at media only screen. - If this were on a projector, - this would evaluate to false and thus it would not use this code here. - Additionally, - if the maximum width of the devices larger than 768 pixels, - this statement is going to evaluate to false and thus it will not use any of the CSS code - written between the opening and closing curly brace here. - No. - If the width of the device is 768 pixels or less than this statement here, - this media query will evaluate to true, - in which case it will use the code inside of the section, - thus making the font size of the links inside of the navigation slightly smaller as I - mentioned previously. - In order to get the most smooth viewing experience is possible, - there's some other techniques that we can implement into our code to do so. - One of those things is the meta device with tag. - So here you can see I have a meta tag with the name of Vieux Port, - and we use a statement here inside the content to prevent devices from zooming in or out. - And this will allow us to instead rely on our media query query styling to change the - layout accordingly. - So the makers of devices they realize that they're the available screen spit size is - actually much smaller than most of the websites that people will be viewing on the device. - So one strategy, - especially on touch screen devices, - is to zoom out so all of the website content gets smaller. - Thus, - it fits inside of the frame of the device, - and then it's up to the user to to use their fingers or touch to zoom in on two different - parts of the website. - And this is something that we want to prevent. - We don't want it to zoom out because we're gonna be writing clever media query styling to - get our content to change size and lay out so that it will fit inside of the wits of the - device screen without having need for resuming. - So in order to disabled, - resuming what we do is again we set this meta tag with the name of Vieux Port and inside - content. - Here we set the width to be equal to the actual width of the device and by setting initial - scale toe 1.0 than the device will not be, - um, - it will not zoom out when the site initially loads, - it will be the 1.0 is the actual pixel size of the website and by setting minimum scale to - 1.0 and maximum scale to 1.0 that actually disabled zooming so that the user is not able to - zoom in or out on the website again, - which allows us to rely on our media query styling to change the layout. - There's also some different JavaScript fixes that will help make the viewing experience - much smoother. - Um, - so at least at the time of recording this, - there are some bugs with different apple devices like iPhone um, - enabling zoom or changing the zoom when you switch from horizontal to vertical or when you - switch from portrait toe landscape. - So if you're viewing a site on your iPhone and you tilt it from vertical to horizontal. - The device software triggers a zoom, - so we can actually disable that using this JavaScript fix. - Additionally, - there's also a media queries fix for older versions of Internet Explorer that do not - support media queries. - So let's go ahead and move on to the next exercise and will start implementing these media - queries into our continued exercise project. 52. Setting Up Local Responsive Testing: - Hi. - Welcome back. - This is Exercise 4.1 Responsive layout To get started, - I would like to help you guys set up your computer for testing the responsive site on - different sides screens for different devices without actually having to go out and buy all - those different size devices and screens. - To do so, - we're gonna be using a free online tool. - This website called Cork tools dot com slash screen fly one of the nice things about screen - flight we contested in a single location. - And because it's online, - there's no need to download any special software. - One of the nice things about screen fly is that it's very clean, - and you can see down here at the bottom. - There's different icons, - and it allows you to switch between different sized screens, - tablets and mobile, - so you can then preview your site on smaller and larger screens. - And it even includes a rotate display button down here so you can test out portrait versus - landscape view. - Now, - one of the things you'll notice when you come to screen fly is that it requests that you - paste in the URL of the site that you'd wish to test out and notice that they're asking for - an http address. - So they're actually looking for a proper website address. - And you may have noticed from the previous exercises that whenever we've been opening our - files locally on our computer were not actually getting on. - Http address What we end up seeing is something like this where the URL starts off with - file colon slash, - slash slash and then has just the folder structure to the file on our local computer. - And that's perfectly fine for previewing your website before you decide to upload it to - your hosting server, - however, - you'll notice that with screen fly if we copy and paste this here that when we go to view - the site what I want Wow, - it doesn't work. - Um, - and the reason why is that? - It's trying to go to an http address or an actual girl on the Internet so hypothetically - you could actually upload your site. - You're responsive site, - and then you could test it here if you already have it up online. - Um, - and if you're interested to go that route after watching this video, - you can go ahead and skip to the to the video titled Site Publishing using FTP and that - will teach you how to use file zilla to upload your site files to your remote server. - And then you can just paste your domain name in here, - and you can use screen fly to test out your responsive designed that way. - And if you don't want everyone on the Internet to be able to see it while you're still - fixing it, - you could create a folder on your server called Test or something like that that only you - know how to get to. - And you could just drag the files into their now. - The only disadvantage of that is that obviously, - any time you make a change to the CSS locally, - you'll have to save it and then uploaded to your server to then test it in screen fly. - So in order to kind of speed up the production process and to be able to continue to just - work locally, - what I'm gonna do is I'm going to install a testing server on my local computer, - and there's a few different options for doing that. - For Mac, - you can download ma'am, - which will give you ah, - the ability to install a testing server on your computer that you can use. - Um, - And if you're on windows, - you can use, - uh, - Wamp or Wamp server. - So both of these air free, - Um, - and I'll show you how to set this up on Mac. - Unfortunately, - I don't have a Windows computer, - but I can tell you that the way this works is you would download Wamp. - Um, - and you have to select the one that's specifically will match your computer. - They have a 32 bit version in a 64 bit version. - And if you're uncertain about which, - um, - settings respects your computer has, - there is a link inside the discussion area. - You can go check out that has some some other links Teoh sites that have directions. - Or actually, - if you Google search windows, - how to check if your system is 32 or 64 bit, - you'll see that there's a ah thread that explains that on the Microsoft website. - Okay, - so basically what you do, - though essentially as you download wham! - And when you install it after you install it, - it creates this directory on your computer, - which the default is C, - colon slash wamp slash www and any files you put inside this www folder you can access in - your browser by typing in http colon slash slash local host. - So, - for example, - let's say hypothetically that you were creating a website for a coffee farm in Hawaii. - Um, - and maybe you name the folder your main root folder for that website project. - You call it, - um, - Kona Farms. - Then what you do is you would take your website folder, - Kona Farms, - and you would drag that whole website folder into the W W W folder inside that Wamp folder - , - and then to access that in your browser as, - ah, - local testing server, - you would type in the domain local host slash Kona Farms to get into that folder. - Now, - it's very similar on Mac when you install ma'am. - So, - man, - you can come here and you can click the download. - Now link this. - Ah, - this one over here that says, - by now that's for the paid version, - which is ma'am pro and for our needs. - It's fine to just use the free version here, - so you'd click download now and you would install ma'am. - Now, - when you download it and install it, - you can find it in your applications folder and I even created a shortcut here on my dock. - For it like that it says may have. - And when you click that when you bring it up, - you'll see this little screen pops up. - And what happens is each of these lights here will light up green when the server starts. - If you go down here to preferences, - there's these different tabs here and the very last tab here, - this button that says, - Apache, - if you go ahead and click that this actually allows you to choose any folder on your - computer Ah, - that you'd like to be the root directory of your local server. - So, - um, - I have a folder called Sites on my Computer. - So I just told I went ahead and went into select, - and I just selected my user name. - And then I selected sites, - for example, - and clicked open. - And that way. - Now, - any files I put in my Sites folder I can access by going to local host in the browser. - So once you once you set this up, - you can just kind of like, - minimize this or hide it, - and what I want to do is I would want to find that the files from my website, - and I want to move those into the same folder I just specified. - So I would drag those files in my case, - into my Sites folder and then to access that in the browser. - Now we can go into our default browser and again on Windows. - You would just type local host Slash. - And then, - whatever the name of the folder was that you had placed inside the www folder inside that - Wamp folder on Mac, - it's a little bit different. - Aside from writing local host, - you have to put also put the colon symbol and a port number, - which the default port number for ma'am is colon 8888 And then once you go in there, - you can find the folder of your website project. - In my case, - I have a few folders here to get to it, - Um, - and then your website will come up so you'll notice. - The difference is that instead of previewing this file from the local file system like this - , - using file colon slash slash, - you can actually preview it from your from a local testing server that you've just - installed onto your computer. - So this u R L now is usable in screen fly so I can go ahead and copy this and come back - into screen Fly and I can paste this guy here under H T T p. - Colon slash slash will Just paste that in there and you'll see that it starts off with - local host now instead and we'll click Go and we can now see our site and we contest it on - all those different sized devices. - Cool. - So the nice thing about this is not only can I test my site now, - but there's no need for me to upload it because this is actually running off a testing - server on my local computer. - So if I bring those files up in sublime text that I can edit, - the code is I go and save it and I'll see the changes in here by right clicking inside the - frame and selecting reload frame. - I'll be able to instantly see those the site changes. - Now there is one last option. - Um, - if you're not sure that you want to install wham or ma'am as a local testing server on your - computer. - At the absolute least, - what you can do is you can bring up your files here in your from your local file system, - and you can simply just drag the corner of the browser to see any changes. - So, - like it, - this particular width of screen here you can see the social icons are on the right hand - side. - But when there's no longer any room for them to fit, - I have it set up in the completed code so that they jump up here into the logo panel. - And as a screen gets smaller, - there are other changes like this, - such as the logo getting smaller and flipping theme navigation underneath it like that. - Okay, - okay, - So that's how we set up our local testing environment for building responsively outs. - Let's go ahead and move on to the responsive layout exercise. 53. Prep HTML for Responsive Layout: - all right, - so to get started, - I want hadn't already brought up the source code for 4.1 responsively out here in sublime - text. - And I've also brought up this code here in the browser by going to cork tools dot com slash - screen fly, - which is discussed in the previous video. - And I've gone ahead and already linked to the local copy on my local testing server for - this Web page. - So we'll be able to test the layout in different size devices. - And the only two files that we're really gonna need to work with for this exercise is the - index dot html page and also the device styles dot CSS page. - So I've created an additional style sheet for you guys in the CSS folder. - So now you should have normalized dot CSS style dot CSS and this additional style sheet - device styles dot CSS where we will be adding all of our media queries s so that we can - control the way the site displays on different size devices. - Now the very first thing we want to do is we're going to want to add some tags here into - the head section of our HTML pages. - That way we can get the smoothest viewing experience is possible on all the different - devices. - So first thing we'll do is we'll go toe line nine here and we're going to add the meta with - tags so that we can set sent devices so that their browsers will not zoom in or zoom out - when the site loads. - And by preventing zooming. - Then we can just rely on our media queries to change the size of the layout. - So I've written a comment here online. - Nine. - You can just go ahead and highlight that and we'll create a Met attack. - And inside the meta tag, - we're going to give it a name of view port which will target the devices Vieux port. - And we're gonna set up another attribute called Content. - And here we're going to write a statement that will disabled the device is dooming. - The first thing we want to do is we want to set with equal to the device with, - and then we're gonna put a comma, - and we're going to specify that the initial dash scale is equal to 1.0 or 1.0, - and then we're going to set the minimum dash scale equal to 1.0. - And we're also going to set the maximum dash scale equal to 1.0. - So that will disable zooming on all the different devices that view this site. - Another thing we're going to do is we're going to link to a JavaScript file that's going - Teoh fix it so that the iPhones and iPads when we rotate from landscape two portrait, - it won't try and zoom in or zoom out now. - Ah, - actually, - Google search for this, - or you can go to get hub dot com and search for this code. - It's called the I O i. - O s Orientation change. - Fixes how you confined that? - No, - I have the, - uh you are all written down here, - so I'm just gonna type it in, - and we're gonna use thes scripts tag like this, - which has an opening and closing script tag. - And inside the opening script tag, - we're gonna use SRC to point to the location of this javascript file, - which is at http s colon slash slash raw dot Get hub dot com slash w I l t o slash I os - dash orientation change. - Make sure I spell that correctly Orientation change dash fix dot Js That's actually a - pretty long you are all there. - Okay, - you could also go to this girl and just download this javascript file and put it in one of - your folders, - perhaps a J s folder, - and then you can link to it locally. - And that's actually probably gonna be your safest bet is to grab the current copy of this - downloaded and link to it here for our purposes. - That should be fine. - Just to link to it from this remote, - you are all here. - Okay. - And then, - ah, - we also want to come down here into the script section and we'll add a fix for, - um, - older versions of Internet Explorer here. - This is online 19. - I wrote this comment here that says add linked to CSS three media queries IE fix. - I'm going to erase that, - and I will tab in here and we will create the scripts tag for this. - So this is only going Teoh be necessary for older versions of IE. - So it can be inside of my conditional comment for less than Internet Explorer nine here, - so I'll create my opening and closing script tag there and I'll create my SRC attribute and - I'll link to that file. - Now This file here is shared via Google's content delivery network. - I could just type in http colon slash slash and this is under C SS three dash media queries - . - Make sure we spelled that right dot Js Excuse me, - That's dash Js media queries Dash Js And then that will be ah dot google code dot com slash - SV and slash trunk slash CSS three dash commedia queries dot Js Wow, - that's a mouthful there so you can actually go to Google and you can just search for media - queries fix or CSS three media queries for i E. - And it should come up with this code here that you can just linked to directly on and again - . - This will be commented out and most browsers won't even bother Load it. - But if it's an old version of i e, - it will see the conditional statement here that says, - if less than i e. - T. - Nine and then it will actually run this script thes these two scripts here. - This top script, - if you remember, - is the one that makes HTML five semantic tags work in Internet Explorer. - And this bottom one here is a javascript that makes media queries work. - Yes, - we can have our responsive website work in old e. - Okay, - so far, - so good. - And the last thing we need to do to just get started to set this up is online 16 here. - We need to link to our style sheet for the devices. - So we've already linked to the normalized dot CSS and here we link to the style dot CSS. - But we need to create a link to the new style sheet I created, - which is specifically for our media queries to be written inside of so here will just say - relation style sheet. - And we'll set the H raft location two points to that file, - which is CSS slash Uh, - device, - I think, - is how I wrote this. - Yes, - device styles dot CSS and we can save that. - So I've gone ahead and added this to all the other pages for you. - So we just added it to the index page so you could see the process 54. Applying CSS3 Media Queries: - So now we have all this in place. - We can go ahead and jump over to the device styles dot CSS, - and we can begin to write our responsively out code. - So the first device that we'd like to consider here is the tablet when it's in landscape. - So, - for example, - the Apple iPad when it's flipped, - landscape has 10 24 pixel width so we can jump over to our browser and we can use screen - fly to make sure that this will look correct on that device. - Right now, - we're seeing our website on the 15 inch notebook size screen and we can jump down here to - tablet. - And we can select Apple iPad one and two, - which has the 10 24 with screen size. - Okay, - now we change it to the iPad. - You can see that most of our site looks OK. - Still, - the navigation text looks pretty good. - Um, - logo is looking pretty good, - and everything else is okay. - I think the rapper here might be a little close to the edge, - but I can correct that. - And then also you notice here. - One thing that might be problematic is that the social media icons here are starting toe - overlap now into the content. - So I need to figure out what I'd like to do with those. - So have a couple different options here. - I can hide the Social Media bar or I can opt to move it to a different section. - So, - for example, - I think what I'll do here is I'll use this empty space here and just position them on top - of the logo panel in this corner. - So let's go ahead and go back to the code, - and we will write out our first media query to accomplish that. - So first we'll say at media, - which will check the the device and grab some information. - And we can write a statement here that's going to evaluate to true or false if this If this - media query statement evaluates to true, - it will use the code that's captured inside of the media query. - And if it evaluates the false is just going to skip this or ignore the code inside the - media query. - Okay, - so these statements can be quite complicated or quite simple, - and it's up to you how sophisticated you make him. - The first thing we want to do is we want to say only screen, - and this will only evaluate to true. - If it is a screen device, - some other things you can say yours. - You can say at media all which would encompass all devices. - You can also say, - uh, - printer or for projection as well. - And in this case, - we're concerned about a tablet, - which is a screen device. - So here will say only screen and then we'll use the key word and so that we can continue on - the statement so you can use the word and as many times as you like, - and that will make sure that this evaluates to true and whatever is on the other side of - the word will evaluate to true as well. - And in our case, - we want to also make sure that the maximum width in this case matches 10 24 pixels or less - . - And then we'll put a set of curly braces and I'll hit return a couple times there. - Okay, - so you can say Min, - Dash wits, - Max, - dash wits and you can really put in any sort of pixel amount you like in this case, - we want to make sure that it is a landscape tablet of 10 24 pixels or less. - Okay, - so we've said at media Onley screen devices and also where that screen device has no more - than a width of 10 24 pixels. - Now, - if this is true and that's true, - it's actually going to run the code here that we right here So we can just start writing - normal CSS code here. - In between this opening and closing curly brace for this media query, - and that code will run when this statement. - The full statement here is true now. - If either side of this is false, - if this is false, - it's not a screen device. - Or if it is a screen device and this is false, - it's actually larger than 10 24 pixels. - It will not run the code here. - And one of the nice things about media queries is that I don't have to write all the CSS - code over again because it's still just going to inherit the styles that I have previously - written. - So, - for example, - in the style dot CSS page, - we have the body background image. - Here is the handmade paper texture, - and if I don't want to change that in the media query than I can simply just leave it out. - I don't have to rewrite all of this code again, - which is wonderful. - We don't have to spend time wasting, - copying and pasting a bunch of code. - We really only need to write the code for what we'd like to change when this condition is - true. - So in our case, - we felt like the rapper was a little too wide. - What I'm going to do is a common technique which is to change the fixed with rapper, - which is 960 pixels currently to change to a fluid with so that it will only be a - percentage of the width of the device. - So here I'm gonna set the rapper now to 90% okay. - And a few other things we wanted to change is I want to target the Social Media bar and I - want to change its positioning, - which before was set to position fixed, - and I want to set it now to position absolute instead. - In that way, - it won't stay fixed in place when the browser scrolls, - but we can still use absolute positioning to position it in relationship to the browser - window and we're gonna go ahead and say top 100 pixels. - And I actually had to play around with this a bit to get it to appear in the in the right - place and 100 pixels just about centers it and then we'll go ahead and say We want to move - it about 5% over from the edge of the screen. - The way I calculated this was we set the rapid and 90 so out of that, - 100% went of available area in the device. - We're setting the rapper to squeeze down to 90 which leaves in available, - you know, - 10% which would be 5% on the right and 5% on the left. - So we'll just set it to 5% emission. - Allow the social icon bar tow line up right with the edge of the wrapper on the right hand - side, - and we're actually going to change the width of this thing. - So before the with was set to 40 pixels when the icons are stacked vertically, - but we're actually going to change all of those links to display horizontally? - No. - So in order to do that, - we need to make in order for them to fit. - In other words, - we need to change the width. - And if I said the with the auto, - it would just be is wide is it needs to be there to fit all of those elements. - The next thing we want to do is we want to target those links inside of that social bar. - We can use a descendant selector to do so, - and we want to set them instead of display block. - We want to set them to display in line block so that they'll display side by side like that - . - Okay, - so let's go ahead and save this, - and then we can come back to screen fly. - And instead of refreshing the page here, - um, - what we want to do is, - if you go to the edge of the frame window here and you're right, - click. - I'm using a mouse to right click. - If you are on Windows, - you should just feel to right click. - If you're on Mac and you do not have a two button mouths, - you can control click. - To get that to work or to finger click to bring this menu up and inside the menu, - there should be something that says Reload frame. - And if you click that, - it should reload the site page there. - Okay, - so something's air working. - There's another thing over here broken, - which will address in a moment. - But you can see that the icons, - social media icons here they moved from the side and in order to preview that to make sure - it's working correctly. - If you want, - you can switch back and forth. - So here's the 15 inch screen. - So now the social icons air on the side here, - and the rapper is 9 60 pixels, - and it will stay at 9 60 pixels, - even if it gets wider. - So even if we go upto like 19 inches or, - you know 20 inches the size of the rapper stays maintained it 9 60 pixels, - which is dictated by the style dot CSS style sheet. - But then, - when we come down to a smaller size, - for example, - we go to the tablet iPad. - Now the rapper is set to 90% of the screen, - and these social icons here change to in line block, - so they're now displayed horizontally instead of vertically, - and they're also inside of this logo bar. - Here they're positioned on top of the logo, - but panel. - Okay, - so one thing that you'll notice is when you scale down to smaller sizes here that the - images air, - not scaling So certain things. - This is problematic for, - um, - for example, - this image and will also be problematic here for the video when it gets down smaller and - smaller and also things like the tables and forms. - Uh, - so what we can do is a common technique is that you'll want to set all of your images and - videos and audio tags all of your forms and tables, - anything that's normally stretching across the whole section or hold frame of the page. - You're gonna want to set those to a width of 100%. - So they have a fluid wit, - and they'll scale down on different sides size devices. - For example, - if I go down to a really small size here, - among other issues, - you can see this images off the screen right now. - So a really easy way to fix that is to go into your main style sheet, - which is the style dot CSS style sheet here and under fix this year will come down and - we're gonna see will come down toe line 32 here, - and we're gonna say images. - Okay, - video. - And if we had any audio in our site, - we could set audio and any I frames and any, - like, - forms and tables to all the 100% wide. - Okay, - I already actually set this individually for the table. - I believe here. - Yes, - and I actually already set this for the form. - So normally I write all of these out. - I've already written these in the code elsewhere. - Also for the I frame. - I believe so. - Really, - The only thing that's left here is the images and videos. - And I'm not using an audio tag in this one, - so I can even remove that one as well. - But normally you have all of these written like this. - All of the things that air stretching your site across the screen to the edge of the rapper - . - You can set them two with 100% like that. - So if I save this and then we come back and refresh here, - let's try this again. - So I will go to right click reload frame. - Okay. - And then if we come down again to tablets now, - you can see that the image is only 100% within that rapper, - so it's going to scale down for each size. - So now, - even when I go down to like the iPhone size, - the images gets really small like that. - But it's not jumping outside the frame. - Okay, - so we've gone ahead and tackled the style for the iPad when it is landscape, - and if we rotate the display, - we can check out what it looks like here when it goes down to portrait. - Okay, - I'm gonna jump back into my style sheet here and go back to device styles dot CSS. - And here we'll go ahead and change a few things under the under the portrait view for - Tablet. - So really, - the only thing I want to change here is I want to make the navigation links a little - smaller so we'll go ahead and say at Media Onley, - Scream and parentheses, - Max dash width and we'll say 7 68 pixels, - and we'll use our curly braces and open this up like that. - We can indented inside of here and just nest some styles in here, - and we'll go ahead and say Nah, - bar space now face a targeting all the links inside of Navid Bar and will change the font - size to be a little smaller because it's kind of crowding and getting a little close to the - edge of their. - So we'll say 0.8. - So ems are fluid. - They're in relationship to the previous font size. - So one em is equal to the current font size and 0.8 will be slightly smaller. - Point to smaller. - Okay, - so we'll go ahead and save that and come back and we will reload the page here. - Reload frame. - Okay. - So you can see those guys got smaller there. - And now there's a little more space. - Okay, - so if I switch now, - if I rotate the display here, - you can see the size of the text in the link here on horizontal. - So for landscape. - And then if we rotate a display here for portrait, - you can see those linked tax gets a little bit smaller there. - And we have a more comfortable amount of space around the link text on the buttons. - Okay, - Awesome. - So the next thing we want to do is we want to set this guy up for smartphone. - Okay, - so I want to go to ah smartphone landscape, - Which would be I rotate this year. - This is 480 pixels wide like this. - This is kind of OK, - except for the fact that I want to be able to see more of the content here. - It's all well and good to be able to see, - uh, - this navigation here and this logo. - But it would be nice if I could see a little bit more of this image, - the intro image and maybe even some of the text, - if possible. - So in order to get this off the screen higher like that, - I think what I'm gonna do is kind of shrink this a bit. - Maybe this is a bit too tall here. - Also, - we should be able Teoh, - take these guys out to make space. - And, - um, - I think we'll move the logo about as well. - So I'll try a few different things here if we scroll down here. - This is also a little too narrow. - So my if you look at this column structure here, - right here, - where it says company news, - this would be really kind of annoying to read, - because imagine, - you're you're only able to read like two words, - and then you have to jump down to the next line. - So what I'm thinking here is we need to abandon our multiple column structure. - I suspect this is even worse on the catalogue page, - which has three columns here. - So this is just way too narrow of a line. - So we're gonna have to do is we're gonna have toe merge this guy to one column structure - here and set the columns to 100% wide within that rapper. - Okay, - so we'll go ahead and come down here and we will say, - uh, - at media only screen and parentheses. - Max, - Dash with colon, - 480 pixels, - which is the width of the iPhone when it is in landscape. - Okay, - so I'm gonna go ahead and just remove the social bark here. - We need to make room, - so we'll say pounds social. - And any time we want to hide something I can simply just set to display none like that will - hide it and move it out of the layout so it doesn't really destroy the content. - It just makes it so It's not visible any longer. - We can always make it visible again later at any time we want and we'll set the knave bar - here. - Two position static. - Okay, - so I'm removing the fixed, - the positioning of fixed off the nab our because on a larger screen, - it's nice to have the NAB our follow, - but it's a big, - thick bar, - and it's taking up too much space on a smaller screen. - So on a smaller screen, - when people scroll down further, - I want them to be able to use the full width of their devices screen to see the content and - not have the navigation bar taking up so much space. - What we move this back to static instead of being above it's actually gonna be underneath - the logo area. - So I think I'm gonna change the border. - To be on top of it. - Will go ahead and set this guy to be bordered. - Ash top to make visual line in between the the logo panel in the knave are here, - so we'll set this toe one pixel solid C C c and then for all those links inside there will - add some patting above and below will make it a little bit less so I think this had a - padding of, - like, - 22 pixels or something like that before. - And I'll set the padding above these links now to be only 10 pixels, - so that will make this narrower. - Here, - we'll go and say, - padding 10 pixels top and bottom zero on left and right. - Okay. - And then the logo here, - that's the next one is the logo panel which do remember, - before the logo panels a little bit too tall here. - And this had, - um, - like, - 80 pixels of padding so that it would appear below the fixed nab our We're gonna remove a - lot of that space there so we'll go ahead and say logo padding and will say, - zero on the top Now for logo and zero on the left and right. - And 10 pixels just on the bottom. - All right. - And will come down here to Ah, - the the H one and H two for the logo will go ahead and save pounds. - Logo space H one comma, - pound logo space Age to remember. - That's where it says the H W shoes in the logo there. - And we're gonna change the margin on the top here to be smaller will say, - Well, - actually use margin gash top and will change this to 10 pixels like that. - Okay, - and let's see your for for the for the H one itself. - We'll adjust some padding on that guy's well, - we'll say patting zero on the top. - You're on the right is zero on the bottom and 30 pixels of patting on the left side Push it - in a little bit. - And for the image, - the little crown image We're gonna change that to be off to the side by saying background - dash position zero horizontally and negative. - Five pixels vertically. - So what we're doing here is we're taking the little crown. - Ah, - that was above the Z H W shoes. - Part of the logo that was the M boss, - little great crown, - and we're moving it from the top over to the side. - So I added additional padding on the side. - 30 pixels with for that crown, - Um, - and I have shifted it the background positioning to be zero horizontally, - which is on the far left hand side and negative five pixels, - moving it up a tiny bit vertically to align with the lettering. - And that should look pretty good, - So that should take care of the logo. - The other thing we want to do is we want to set the column. - So I have all of these columns. - Styles like column one left come a column, - one mid column, - one right and column to left and Colin to write these air all the ones that were floating - previously and we can select all of those classes. - And we can use a comma to just group all of them together. - And we can tell all of them to be set to float None. - So instead of floating left or floating right, - however they're floating before to create that side by sides column structure. - We're gonna change it to float none. - And we also want them to take up the full width of the rapper now, - So we'll change them to have a width of 100% like that. - And we want to move the remove the margin off all the sides, - except for the bottom like this. - Okay, - we'll go ahead and save that. - Okay. - And then, - um, - down at the very bottom of the details page the other three bottom of the details section - down here. - You can see that these guys are no longer fitting side by side. - These air not gonna be one on top of the other, - but we're not gonna have a need for the the little, - uh, - line here, - which is called Border right. - We added a class called border right in the previous exercise to make this little dashed - line here. - So I want to actually remove that. - So we're to come back into the coat and will select that style, - which is called Border Underscore. - Right is the name of that class, - and we will set border dash right to now be set to zero to turn it off. - Okay, - That should be all the stuff we need to do. - That was actually quite a lot changing from the desktop to the tablet. - There wasn't very many changes. - Um, - but when we change down to the 480 pixels, - we actually lost a lot of space. - So I had to change a lot of different things here, - as you can see. - So let's come back in and we'll try this again. - We'll go to reload frame. - Cool. - So now we only have one column. - So now, - like brands and shoe archive, - and these are the different sections of the catalogue men's women's etcetera. - These guys are all now one column. - Ah, - I move the navigation down below and noticed that the navigation is no longer fixed. - So when we scroll off the screen, - we don't have to worry about the navigation being on top of stuff and taking up space. - It's more area now to see pictures and read the text. - Okay, - so it looks pretty good. - And you can see we move the logo, - then onto the side here. - And what will also do is we're gonna change the size of the logo tax. - Let me go ahead and come back here. - And now that I look at this, - I think it might look good if we set this guy too. - One m like that and save. - And there we go. - So I said, - this guy smaller. - That looks a little better there. - All right, - so now we have a tinier logo, - a narrower logo panel because the text is smaller. - We moved a little crown off to the side. - We made the tax inside the link smaller and kind of made this whole area skinnier. - So as soon as you see the site. - You can already start seeing some of the pictures and things here and can begin to scroll - down and check out the content. - Okay, - cool. - And now the company news is stretching the full with because all my columns are not - floating anymore. - They're each it's there, - each 100% with and creating a single column structure like that and same with the three - panels at the bottom. - Now these air all vertically instead of horizontally. - Okay, - that's cool. - All right. - Um, - last thing to do is check out the portrait view so we'll go to rotate display. - And you can see here that the only thing that's really this is kind of it's OK. - Still, - the text is still readable here as a single column. - The only thing that's really may be problematic. - Here is this text here inside of this navigation bar. - I could make the text smaller, - but then at arm's length, - when you're holding this thing at arm's length, - it would be text would be kind of too small. - And also when these, - uh, - when these boxes become that small, - if you're if you have a big, - stubby finger like me, - it's a little bit hard toe click those links when they become this tiny and close together - . - So let's focus mainly on this knave here for the portrait size. - So we'll come back into the code here and we're gonna scroll down to Smartphone Portrait - and we will say at media only screen and where the max wits is 320 pixels like that. - And then if we come in here, - I'm gonna make the rapper a little bit nowhere. - Now, - it was 90% and I want a little bit of space if I need to have scroll bars or something like - that. - So we're gonna change this guy down to a width of 80% instead of 90% Shave off some space - there and we'll go ahead and say, - No bar. - Okay. - And for the NABF are here, - we'll go ahead and change the width of this guy to be 100% of the screen. - There will set the border on the top 20 to remove it, - and we'll set the border on the bottom to be one pixel solid. - See? - See? - See you like that committal. - Set this to texts. - A line center. - So it will center the knave element inside of it. - And we'll also change the background of this guy. - We're gonna just set this guy to background White like that, - all right? - And then the never bar itself has a rapper inside of it. - And I want to make sure that that actually expands 100%. - So I can change this by saying now barred dot rapper, - I'm gonna set this guy to have a width of 100% like that and weaken style the knave inside - of it by saying nab our space now and we will set this guy to normally had a border left on - it, - and we want to set that is here. - We no longer want a border on the left hand side of knaves, - and then we can focus on the links inside of there. - And these guys were displaying in line block, - so they were side by side. - What needs to be vertical now? - So I'm gonna set them to display block, - okay? - And we'll also set these guys to have a with of 100% over either previous with and we will - change the font size here to be a little bit larger, - because when you're holding this at arm's length, - um, - the text might be a little hard to read, - and navigation tax should definitely be large enough to reading to know where you're going - on site. - So we'll set this guy Teoh. - We'll get a border dash, - right? - We'll set that to zero. - We want to remove the border off the right hand side, - and we'll change it instead to be bordered ash top, - so each link will have a border above it. - And we'll set that to one kicks a little solid pound C c c like that. - All right, - let's save that and we'll see how that looks. - And then we'll decide if there's anything else we want to change. - So I'll come back in here. - All right, - click on the edge of the frame and and click reload frame. - Cool. - Okay, - the logos not aligned, - though. - So we have to go back in and fix that. - Come back here and we're gonna go ahead and select the logo here like kiss. - And I'm like state text dash align center to get that logo to center, - just like all of the navigation links. - Cool will save that and we will reload. - Frame here. - Lewd frame. - Cool. - So now my logo centered. - My navigation. - It's centered. - What? - I scroll down. - They disappeared. - I can see all of that. - Okay, - that's pretty cool. - And let's go to the sale page. - Make sure these guys look OK. - It's always good to test all your different pages. - Make sure your contents displaying correctly. - All right. - Okay, - here is the Google map, - and here is our form, - all right? - And that's all looking pretty good. - Okay, - So if I go down here, - Teoh the pricing table, - this is looking like it's problematic here. - Not all of this will fit. - So if I wrote the to the display, - it's kind of okay here when it's it looks like it's just enough room here when it's in - landscape view, - 480 pixels wide. - But when we get down to the iPhone horizontally, - it looks like there's not enough room, - so I would either have to make the text smaller inside this table or hide some of the - columns. - I think if I make the text and your smaller here, - it's not going to be very visible from a distance. - All right, - so let's say hypothetically that the only thing we were really concerned about is like the - brand name in the pricing and on a mobile device. - Some of this information we can let it go. - So what I'll do is I'll actually create a class specifically for this. - Um, - I'm gonna come in here and let's create a class called Heitor like that. - And let's go ahead and add this guy to say, - display colon none. - So anything we apply, - uh, - a class of hydro to is going to be set to display none whenever it's below this specific - size, - all right? - And we also wanna select those table headings and table divisions, - all those little cells in the table, - and we want to give them less padding. - I think they had 10 pixels of padding before. - We're gonna make them a little bit closer together. - And let's also make the font size slightly smaller. - Will go font size 0.9 m like that's will go ahead and save, - and we want to have to go and then we're gonna have to go into the pricing dot html page - and added class on the each of those guys. - So I've already gone ahead and done this for you. - But you can see that. - I decided I wanted Brandon pricing to appear. - But then when we get down to tax, - I added a class of Haider on tax, - and here we have in stock. - I added class of Haider to hide it and under order idea, - I added a class of Haider. - So when uh when this page loads on a larger screen larger than 320 pixels wide, - Um, - like any other sort of tablet or desktop or even an iPhone when it's horizontal, - there's no specifications for the class of Haider. - So it's not going to do anything, - however, - based on this media query when it is under a width of 3 20 pixels, - then all of a sudden the class of Haider has some style specified to it. - So it's gonna set to display none and hide those guys. - Let's give this a test and see how that works. - So well, - go ahead and save this here, - and I'm gonna go ahead and come back into the browser and we'll do a refresh here. - That's a reload frame. - Cool. - So now this table, - uh, - has just the brand in the pricing, - which fits. - And we made the text a little bit smaller, - but not too much smaller. - So that's still readable there. - Okay, - that's about it. - Um, - to do you know, - one last test. - I always go through each of the different devices so you can come down and you can say, - Oh, - this is what my website looks like this size screen, - and this is what it looks like on this size screen. - And this is what it looks like on this size screen. - So here you have the horizontal, - the vertical, - and it's a good idea to test this out on all the different pages. - You want to check out your maps and your forms and make sure that all of these things air - displaying correctly on all the different sized devices. - So this is actually pretty time consuming. - You'll go back and forth and you'll tweak little changes in your media queries. - One last thing we're gonna do is we're gonna set one up for at media print. - So if you if you say a file print screen in your browser, - we can go ahead and say star to select everything, - and we can set the color of everything to black. - Um, - now to override, - you know, - Star is actually ah, - pretty weak selector. - It's easy to have more authority than starting to override it. - So what you can do to be on the safe side is you can use a a compound selector. - You can put commas, - and we can specify Well, - I mean, - also each ones h twos, - each threes each fours H five h six. - All of my text elements essentially all paragraphs, - all links. - All the other text that's inside of sections floating loosely in Div. - Z or inside of tables will all have the color black. - So this will save your printer's ink cut so we can save. - And if we come back in here to Chrome, - for example, - let's say this is the site I want to print here. - You'll notice that this few larger map link here is blue underneath my Google. - Now, - now, - if I go to file print when the preview comes up here, - you'll notice that it's changed that to black text. - So this guy's all black and white now. - Excellent. - Okay, - so that's it for creating responsively outs. - So next you're gonna want to move on to the code challenge, - and you're going to create your own device styles that CSS and you can create your own - media queries to change certain aspects of your site based on the size of the device. 55. Adding PHP Mailer Script: - Hi. - Welcome back. - This is the final code for the Z H W Shoes website. - In this code, - I will be completing the contact form and using a bit of provided PHP code that's going to - actually submit the information in the form to your email address. - So I'd like to show you guys how I added that into the site and also teach you how you can - update it to make it work in your own site. - So first, - I'm gonna bring up the site itself just so we can see what I've added to it. - So this is the contact form page, - and all of these first form inputs here on the top already existed there, - as you know, - but I did add in one additional input here and also this verification image here which is - generated so you can see if I refresh the page each time I refresh the page. - This number changes here like that. - Pretty cool, - huh? - So we're using PHP to generate this image. - Um, - and in order to view any files that have this PHP code in them, - what I had to do was I had to bring up my local testing server. - In this case, - among Max I brought up Man Pierre, - Um, - and ma'am is not only in Apache server on your local computer. - It also includes PHP in my sequel so you could use it for other things as well. - And so we've added this verification input so we can make sure that we don't get spam to - our email box. - It'll be actual real human beings, - not Web applications that that are out there causing havoc, - sending out emails that people all kinds of junk mail. - So we want to prevent that junk mail. - So we're gonna make sure people are actually human beings by typing in this code that's - generated here. - So just to show you that this works, - I've actually uploaded this to my server and you will need to actually upload this. - You can Basically, - you can preview the files and you can even test out like the random image generation here - via your local testing server. - But you will need the ability to connect to a mail server, - which you're hosting. - Company will be providing in order for this to actually submit or send the email, - so you'll have to upload this first to actually get it to work. - So I've already uploaded this and we'll just test it out. - I'm gonna type in the name of Bob, - and then we will go ahead and type in his email. - Which will say, - Is bob at bob dot com? - I do apologize if this is actually someone's email address. - I just made that up. - I'm sorry, - Bob. - Ah, - and the phone is optional, - so I just won't put in a phone number there, - and we'll leave a message. - I will say, - I haven't seen you in so long like that. - Oops. - And then we have to verify that we're human. - Okay, - so right now, - if you put this number in incorrectly like this, - it just takes you to a very basic error message that says the message is not sent. - Please go back and fill in the required fields. - We could make this nicer. - Maybe that's something I'll add is a future update. - Normally, - if I was building this for a client, - I would use javascript to validate this. - And then I would print a message. - Probably here, - um, - that says it is not correct. - Or maybe at a red outline around the form and put something like that, - which would be a little more stylish. - But for now, - I just wanted to make this is simple as possible and stick to just html CSS and PHP. - So we have that real generic message. - But basically you could add the You know, - that could be an improvement. - You can add it. - Maybe at a later date. - I'll come back and improve that a little, - but this will suit our needs for right now. - So then, - if they do put in, - uh, - the verification image correctly, - I'll put in the correct numbers this time like that. - And then if we click, - send cool, - it takes us to this page, - which is a page called Contact Underscore success dot html. - And I created this page simply by duplicating the contact page and then obviously removing - the form and just putting in this background image of a thumb thumbs up right there. - So if we jump back over to my email, - we can actually check if that has shown up, - and there you can see it's actually already exists there. - So that was pretty fast, - just in the time it took me to talk about it or explain that we're going to check was - actually enough time for the mail server to send it to my email box. - So it really should only take a matter of minutes for it to show up, - depending on your hosting providers. - Mail server How backed up it is. - It could take longer. - Um, - I've never really seen it take more than, - like 10 minutes to arrive. - So if I go head to click on this message, - I can show you what it looks like there. - So it tells me the messages from Bob at bob dot com, - and we see here is Bob's name and Bob's email, - and I didn't put anything for in for a phone number. - But if I had put in that phone number, - it would appear here. - And then we can see the message. - I haven't seen you in so long, - so you can see that's look, - that's looking pretty good there. - Okay, - so that guys working, - that's pretty awesome. - If people want to get back to the form, - if they wanted to send another message, - they can click the contact link again, - and they'll go right back there. - Okay, - so let's get into the nitty gritty of how I added this here and how I built this guy and - got it working, - and then also show you how you can tweak the code to make it work for your email address - instead of mine. - So let's go ahead and hop on over to the code, - and the first thing that I did was when I was building. - This is I added two additional files. - One of them is called mailer dot PHP, - and the other one is called Verification image dot PHP. - So you can see both of those over here. - Here's Mailer and here's verification image verification image. - If we click on that, - I put a comment at the top here that says, - No need to touch this code So you really don't even have to touch verification image If you - just include it with your other site files, - you'll be able to link to it and have it do its thing. - So this is all PHP code, - and we're not going to discuss PHP in this classes classes strictly HTML and CSS. - So there's no need to really go into great detail about this. - But what it's doing is it's generating a random number Um, - and it's also putting that onto. - It's also generating random pixels on a grid. - And then it's converting that into an image. - It actually builds an image file from that, - which is pretty amazing. - And there's about 29 lines of code. - So PHP is able to generate a random image of numbers and dots like that. - Um, - just in 29 lines of code, - which isn't too bad. - Okay, - And then the other file I created here is called mailer dot PHP. - Um, - and the way this works is again, - I put a comment online. - 14. - No need to touch the code below this line, - so you really don't have to mess with any of the code below line 14. - In fact, - you probably don't want to mess with it, - Um, - but really, - what's happening here is it's basically taking the input that was posted when you clicked - the submit button on the form, - and it's taking that information, - and it is sending it in a male. - It's actually mailing it off, - using the mail server of your host to the particular email address that you specify. - So that's this is where you specify which email address you wanted to actually send to, - um just to, - you know, - create a placeholder. - I wrote you at your site dot com, - and obviously you'll have to come in here and change that. - Um, - don't use my email address. - I don't want to get a whole bunch of e mails from all you guys. - I would make me sad if I got hundreds of test emails coming through. - So that's why I change this guy to you at your site dot com. - And that's online. - Nine for the send to variable. - Okay, - The other thing that you might want to set is the subject variable, - which is online 12 year. - Um, - in this set of quotes here, - you might want to change this to say whatever your site is. - So for this side, - I put CHW shoes, - contact form submission, - and this is what will show up as the subject for the email that is sent. - And that's really all you really need to set for. - This is the email address it's going to and the subject of the email. - When you type this, - you want to keep those little quote marks. - Um, - there you want to type in between these quote marks, - the little yellow quote, - single quotes you see here on the left and right, - Those are completely essential to making it work. - So it'll break if you remove those. - So again for the subject, - you want to type on Lee here in between those quote marks, - and then you'll re save the file and you should be good to go. - So, - aside from adding the mailer and the verification image dot PHP, - I also changed the file extension on the contact page. - Previously, - this was called contact dot html and I had to change this to contact dot PHP because I'm - actually choosing to use a little snippet of PHP in here in order to get the verification - image toe work. - So I can show you that code if we scroll down to the form here and I think I'll set this - guy two word wraps that we can see all the code that having to scroll over stereo. - Okay, - so all of these inputs were there before this guy here is new. - It's called. - It's a input type of text with the name of verified and in the placeholder. - I just put verify your human. - Um, - I've also added a class of verify box to this, - and I did style it a little bit. - I gave it a width. - If you want to check that out, - you can jump to the style dot CSS page here and you can find that, - um, - which is right here. - There we are, - online 1 19 It's called input dot verify boxes. - The class I added, - Um and I said, - this guy to display in line block so it can be side by side with that form input. - Um, - and I give it a width of 80% to make room for the actual verification image over on the - side and then the verification image itself. - I did add a tiny bit of code for here. - I gave it a width and height and told it to a line to the bottom. - Okay, - that's really about it, - for the style. - And then the only other thing is this image tag here for the for the verification image - itself. - Um, - and the what we're doing here is, - instead of linking to a typical image file like my image that J peg or what have you What - we're doing is we're actually linking to the verification image dot PHP file here, - and we're also sending in a generating a random number for it, - um, - and that will allow it to to do its thing and generate a number for you. - Okay, - so those were the only two things I added to the form was the input box in the verification - image. - And that's using this file here verification image dot PHP. - Okay. - And then additionally, - we also change the action here of the form. - Remember, - before the, - um, - form action, - I think was a placeholder, - I think I just put like a pound symbol here previously and now I have changed this to - actually point toward the mailer dot PHP file. - So that way, - after the user has typed in their name their email in their telephone number and a message - and a typed in the verification image, - they're going to click the submit button on the form, - which is down here. - And when they click the submit button, - it's going to use this action to know where to send the information that they've typed in. - So they've typed in their name, - their email, - their phone in their message and the verification image And that's all being sent to this - file mailer dot PHP, - which is right here. - And this is, - of course, - the the file that we just discussed right where you put in the email address to send this - to and the subject. - And it will gather all of that information and it will submit it. - It says, - if the ah if it verifies that, - um, - that verification image verifies there, - it's going to mail it and then it's going Teoh, - change the location, - send the user to the contact success that html page. - Okay, - otherwise, - if it doesn't verify its going to send that error message that I showed you before. - Okay, - All right, - so that's pretty cool. - Um, - so this guy's working, - and that's all you need to do is if you want to implement this into your site, - you'll need to make the changes that I just mentioned here. - You'll need to add the Verification box image code from here to here. - Um, - from input, - verify all the way down to the end of the verification image. - You have to change the action 2.2 mailer. - And of course, - you'll have to include the verification image dot PHP and the mailer dot PHP script in - order for it to work, - Um, - and then you would want to create your own contact success page. - Essentially, - Um, - let's see a few things to I guess a few other things to mention that's important is I did - change the name of this page to contact that PHP, - as I mentioned previously. - Um, - and again, - that was because I did use a little bit of PHP script right here inside the page. - And I need to use this file extension for it in order for this script toe work here. - Um, - So when I changed the name, - I had to go to the, - uh, - navigation for all the pages and update that because you remember, - um, - online 50. - Here we have the the links for navigating between all the pages. - And here's the contact link. - And before this used to say, - contact dot html on all the pages. - And since I changed the file extension, - I had to go back through each page and change it to contact dot PHP. - But that's really all you have to do. - And then you should have this nice little verification box and be able to submit an email - and actually have that guy show up in your in box here. - So that's pretty cool. - Um, - that's all. - I hope you guys had fun building this project. - Take care. - God bless. 56. Resets, Grid Systems, & Templates: - I welcome back. - This is slides 4.2 grid systems and templates We're going to discuss CSS resets and - normalize scripts are also going to talk about CSS grid systems templates and HTML five - frameworks. - First, - let's talk about a CSS reset. - So oftentimes, - when you're building your own websites, - you're going to want to go out and download a CSS reset. - We've actually been using one that I've given you, - or rather, - a version of a reset called Normalized, - which will discuss a little bit more about in a moment but essentially a CSS reset. - What it does is it's going to remove all of the default browser style eso you may have - noticed before we learned CSS in the first module, - you guys were using just HTML to write content. - For some reason, - all of that content already had an inherent style, - and that's because each browser was determining what the style of that text should be, - how large it should be, - what color it was in what font face it was using. - Now they're subtle differences from browser to browser and a CSS reset is a way that we can - get consistent styles across all of the browsers by first removing all of the browser style - . - And then you can go back in and add your own CSS style. - So whenever we use a reset, - what we're going to do is we're going to first link to the CSS reset file, - and then we're going to link to our own custom style sheet in order to add style back into - our website. - These are some examples of some popular CSS resets. - So if you go to a search engine online and you search for any of these titles, - then you'll be able to find the code that you can go ahead and download and use for your - CSS reset. - Eso Myers is, - ah, - common reset. - It's called Myers Reset. - Another one that people use is called to can. - There's also one called Why You I and there's another one. - I'm going to show you that some people call the poor man's reset, - which you can just quickly write out yourself to reset the styles in your browser. - This is an example of the poor man's reset, - which you can just write out yourself at the top of yours style sheet if you choose, - So this would be an alternative to instead of downloading these other resets like Myers to - can and why you? - Why, - um, - you could write your own pretty quickly by using this code here. - What this does is it basically select everything in the HTML page, - and then it removes all of the padding and all of the margin off every single element. - So there's no spaces between any of the elements on one of the reasons why you do this is, - for example, - in Firefox. - The spacing between paragraphs might be slightly different than the spacing in safari or - something like that. - So the reset solution is to remove all of the style in this case, - all of the spacing. - And then you can go back in in your own style sheet in your own custom style sheet, - and you can add, - you know, - a line of code that says, - Well, - I want all paragraphs tohave 10 pixels and margin underneath them or something like that. - We also set all the font sizes here in Hmm body to the regular default 100% and this - actually takes the all of the images that have links surrounding them and removes a border - Sometimes when you add a link to an image, - it will get a little blue box around it. - Um, - and when it's a visited link, - it'll get like a purple border around it. - And this will prevent that by removing the border from all of the images that air - surrounded by the A tags there. - So this is like a very simple small reset thes other resets Myers to can and why I will - actually be many, - many more lines of code some of these or even hundreds of lines of code. - So they're a little more sophisticated and poor man's, - so I would actually recommend, - you know, - most likely it's best to just go. - It hadn't download one of these instead of using a traditional reset for our site project, - the CHW shoes site that we've been building. - What we used was a normalized at CSS file, - and you can see here is the link where you can go and grab the code for the normalized dot - CSS file. - So normalizes similar to reset it, - cept that it goes back in and adds some style to get you started so like, - whereas when you use some of these other resets like the Myers to can. - Why, - why, - What happens is all headings, - for example, - appear to be the same size, - so the normal I script it removes style. - But then it goes back in in ads style so that it will appear the same in all the different - browsers. - Next, - let's talk about CSS grid systems. - So we sort of built our own grid system in our style. - Dot CSS page by creating those classes of column one left column, - one middle column, - one right and we had been floating them in different directions and setting various wits to - them. - So we created classes called Call One or C O L. - One for things that were only going to span one column in our three column set up. - And we also created another class called Call to C O L two to represent elements that had a - wider with that spanned two columns in our three column structure, - and we even had one called Call three that spanned all the way across the rapper all three - of the columns, - so we kind of built our own simplified grid system. - It turns out you can actually go online and download pre built CSS code that already has a - lot of that positioning code written on these air called CSS Grid systems. - This is actually a diagram from a popular one called the 9 60 Grid System. - And this is a diagram to show you how it works. - So this grid system has a lot more possibilities than the one we created. - Um, - because you remember, - the grid system we created was only at most a three column grid system and this one, - which is actually from 9 60 Grid System. - This one has a total of 12 column possibilities. - These are some examples of some popular CSS grid systems. - So again, - if you go to your search engine and you type in any of these titles, - it will come up with a site where you can go ahead and download the's free open source CSS - files that you can use to get you started on building your website project. - So there's 9 60 Blueprint is another popular grid system sense CSS semantic grid, - and there's also an entire framework called bootstrap, - which has a its own grid system included. - This is actually showing kind of how your content can fit over top of that grid. - So taking that that last grade we're looking at and if we kind of superimposed pink columns - over top of it, - then you can see that, - for example, - the advertisement area here is spanning 12345 columns. - Ah, - and you can see that the sidebar over here is only spanning two columns. - So depending on the class name you use for the specific grid system, - it's going to make your elements a different width and also give them different float - commands so that they can position next to each other. - Now, - whatever good system you do choose to download, - you're going to want to make sure to read the documentation for that particular grid system - because they all have different class names, - and they all expect you to use them slightly differently. - Let's also talk about HTML five frameworks, - so Hee lo fi boilerplate is an example of a template library that you can download. - Essentially, - it gets you started. - It already has most of the document structure created. - It comes with HTML files, - CSS files and even some JavaScript files that already have fixes in place to make your - website work on all the different browsers, - so hee mollify boilerplate. - Give support for HTML five elements on even your oldest browsers and on all devices. - And there's also a mobile version of this framework known as HTML five boilerplate mobile. - So these were the links that you can go ahead and check that out. - Um, - so you could download this code and you can throw it into sublime text, - and you really only have to go in and start adding your content. - All of the document structures already set up and it's already linking to CSS and - JavaScript files that you can use Twitter. - Bootstrap is another popular framework, - and Twitter bootstrap also includes. - Aside from HTML and CSS, - it also includes a lot of J coury plug ins so you can create things like image galleries, - sliding menus and things like that without having to go out and write the custom javascript - yourself and just being able to load the plug ins that they provide you. - I want to encourage you guys to keep learning and keep writing code every day.