Transcripts
1. Basic CSS Intro: Hi and welcome to basic web design for creatives. This class we're going to explore cascading style sheets and how they help you control the elements on your web page. This is a skill you need to have if you want to take a static design file, like something from Sketch, Photoshop or Illustrator and translate that into a working web page. We're going to build a website for a fake music festival, and it's going to be fun. I'll keep it moving along pretty fast for you. I got plenty of slides, illustrations, and code along demos. We're going to do this, you are going to do this, buckle up. Let's get rolling.
2. Quick-Start: Here we go. We're going to be developing your website from a folder on your desktop. So create a folder on your desktop. You can call it whatever you'd like to and this is going to hold all the project files that we use in this project. You're going to need a Text Editor. I recommend we use Atom. That's what I'll be using in these demos. It's free, it works for Mac and Windows, it's open source. If you go to Atom.io, you can download this IDE, which is short for internal developer environment, I think. Anyway, go download this IDE. It's free, its text editor is going to work great. Next thing we need to do is make sure you're working in the Chrome browser, Google Chrome, I'll be working in that browser, and just to make sure that we don't have any inconsistencies that are bugs that appear because different browsers sometimes treat code differently, which is a subject for another time, but today, just keep it consistent. Let's all work in Google Chrome. So download Atom, make sure you got Google Chrome and then you can have to download a zip file from my website, it has all the starter files and the finished project files too if you ever want to peek ahead and see how everything turns out or refer to them or anything else. You can find a link to download those files in the course description just below here. So download the zip file from my site. Once you've done that, copy the index file from the starter files that you've downloaded from my website into your folder on your desktop. You're going to copy index dot html there, then go to the Google Chrome browser and open index dot html. It's going to look terrible because it's unstyled. What we're going to do is take this basic HTML content and add CSS to it to get our web-page to look like our mockup. I'll see you in the next video. Go download that stuff and we'll get started.
3. Basic CSS Anatomy: Let's get started. In this video, I'm going to show you three different places that you can put styles. I'm going to show you why we're going to choose a cascading style sheet for our styles, and then I'll show you in the code how it works, and then you will code up your own style sheet that we're going to use for the basis of the rest of the project. Here we go to the whiteboard. I want to tell you guys a little bit about specificity and CSS. There are different places that you can put styles and your browser will treat them differently too. You can write styles inline, which means, so real quick. This is an HTML page. If you're not familiar with HTML, you can take my other course on basic HTML for creatives. I'm going to assume you know how to write HTML. Here we have two div tags here, and they each have a style written inline right into the tag. I can also put styles locally up here in the head section of my HTML page, and then I can also have remote styles in a cascading style sheet, and this is how we're going to be writing our site today. Your browser will give different weight to the styles depending on how you use them. An inline style is going to be the most heavily weighted style. Second is going to be a local style, and then third is going to be something on a style sheet. You see here I've got these styles is color red. These divs are going to have red text in them. If I have color blue up here in a local style and I erase color red, now that the text inside those divs is going to be blue. You see how the specificity, the place that I put the style is going to affect how it renders out in the browser. This is part of the cascading, part of cascading style sheets, and there's a little bit more to it that I'll tell you when we get into actually writing a style sheet as well. But that's CSS and specificity. Let's take a look at how this plays out in the code in the browser. I've got a similar, here's our starter HTML file. I'm on index.html. This is [inaudible] over here and this is Chrome over here, and I want to show you this inline style I've written style color equals red. The foreground color, the text color is red over here. If I get rid of that inline style and save the page, then go refresh the browser, which I use Command R. You can also click this little refresher icon, but if you use Command R, it will refresh it quickly and it's a quick easy thing. I'll tell you a couple key commands, shortcuts that I've done, that I use just as we go through. The other one I'm going to use to go back and forth between different applications is Command Tab, so I can Tab between these, if I hold down Shift, it'll go the other way. That's a quick handy way to switch between applications. Back to what we're talking about. I got rid of the style that was inline here that said color equals red, and here I have color equals blue in a local style, up to the head of the document, and when I refreshed, boom, everything turned blue. Let's set up our cascading style sheet. This is going to be the remote style sheet, and we call it remote just because it's not actually in this body of code here. If you right-click 'New Folder' and call it CSS, and then inside of that, make a new file. We'll call this styles.css. It's important to put that.css extension at the end of it, and now, let's write really quick. I'll write a style here in our style sheet. I'm going to target that the same body of text, and don't worry about typing along with me. I will go into a second about the anatomy of a style. What just check this out really quick. Color green, save that. Now, our index page doesn't know about the style sheet yet, even though it's in the same directory, we need to give it specific instructions and tell it to use the style sheets. We write a link tag with an href and href is just like a map to where this file will be found, so css/ styles.css, and then let's tell the browser what this file is used for, rel equals stylesheet. Then the link tag doesn't have a closer, you're used to seeing this syntax with HTML elements, you don't need it with a link tag. Now, I go back here and refresh the page and all that text is green. Let's take a look at something really quick. Do you see where this link is placed? It's after this inline style. You notice that if I move it up here and save it, make sure we indent. It's blue. Why is that? We have another specificity we're playing out here. The browser loads this file first and it reads colored green. Then it goes down here and reads this and it's like, oh, no, the color is supposed to be blue, make it blue. If I remove this, save it, and refresh, you'll see it's green. Specificity is important and this same thing will play out inside of your style sheet as well, so anytime I have a duplicate style, whatever style was written last, it is going to get preference. See there, it turns red. That's a little bit about CSS and specificity. Really quick, a student anatomy lesson on a style. There were a couple of different components here to a style that you need to be familiar with. You've got the selector over here, we've got the property and then the value, so you will see this pattern repeated over and over and over as you write styles. They are key value pairs. This is a term that just goes to explain anytime you've got a property here and then a value for it over there. Like font size, 18 pixels, color red, that is the anatomy of a style. Your selectors come in a couple of different varieties. This one is an element, a paragraph tag. Any paragraph tag is going to have the color red and the font size of 18 pixels. You have a class that begins with a dot, so we could have, like in the previous example, line up, that was a class, and you have IDs and ID is preceded by a hash, and would be something like, I don't know, homepage. Then there are different ways that you use classes and IDs, and element selectors when you're building your styles, and we'll get into that in just a moment. You know about specificity. You've seen the internal workings of a style. You know what's components. You know where it goes. Let's start writing some styles for this website. I'll see in the next video.
4. Know Your Boxes: Welcome back. As a designer, you've probably prepared your files in Photoshop, Sketch, some static design software like that. Now, you have to turn it into a website, and have control over all those elements. You need to know how to make them behave. It can be really confusing. There are so many different HTML tags, and they all boil down to just two categories though. You've got inline elements, and they are going to line up next to one another like text. You've got block-level elements. They're going to stack on top of one another. Every web page is a combination of these two things. They exist in x, y axis. Let me show you some slides I've prepared just for you that illustrate this concept. I'm going to show you how you can manipulate the basic elements in an HTML page using cascading style sheets. Here we are. CSS Layout is easy as XYZ. By that I mean the x axis, the y axis, and the z axis. The x axis is horizontal and goes from left to right. The y axis is vertical and goes from top to bottom, and the z axis, which we'll talk about later, is how elements stack on top of one another in layers. What you can see by these three orange bars, it illustrates that inline elements want to stack next to one another, and they'll continue to stack next to one another until they reached the edge of their container and have to wrap. I want to introduce you to a website called CodePen. CodePen is an amazing resource. It allows you to really quickly test out ideas without having to set up a whole website. You can find the link to this CodePen in the resources PDF that's included in the downloaded files for this class. Let's go take a look at a CodePen that illustrates this point. Here we have an unstyled body of HTML. Now, in CodePen, I don't need to write the HTML tag, the head tag, the body tag. They take care of that for you. This makes it really fast and easy to test out code and see an immediate result. Let's do something like apply a style to the body tag. All I'm doing is, I'm commenting this CSS. When you're working in a style sheet, you can ask it not to read code by using this syntax here, which is a slash and then a star, and then a star slash to close the comment out. Often, this will be used to leave yourself notes. You can say something like, this begins the styles for the top part of the page. That's the way that you can leave notes for yourself, or any developers that are going to work on this project in the future. Really quick keyboard command is going to save you some time while you're following along here. You can hold down command shift and use the right or left arrows to select an entire line of text, and then you can use the command slash, that's the one underneath the question mark to toggle on and off the commenting. This works in HTML2. I've used it here to allow us to reveal styles one at a time without having to take the time to write them. Let me apply one to the body tag. You can see I've got my selector here. There's no dot or hash in front of it. This is going to look for an HTML element. We're going to find the body tag and applied font size equals 24 pixels to it. As soon as I decode that, you see all of this text adopt that style. Observe here how it's all written out in boxes. These indent levels show where a new box begins. Here's a parent box, and it holds these four child boxes. These are all spans. Spans are inline elements, so they're going to stack up next to one another, and we see that happening here. Images, here's an image, also an inline element, and it's also just getting right in line with everything else. Now, let's talk about the y axis block elements. These are HTML tags like divs, paragraphs, headers, footers, sections, all of those things. They, by nature, stack on top of one another and expand as wide as they can to fit their parent container. Let's take a look at how block-level elements work. If I wanted all of this text to stack up in stanzas, like you would see it in a book, I could go back and change all of these spans to a block level element like a div. Let me try that really quick. We put a div in here. You see that first stanza, it actually returns and makes the rest of the type continue beneath it, so it's extending to fill the width parent container, and it's stacking on top of the content that's below it. Another thing you can do, is use the display property to control the way these look. Let me comment this next bit of CSS. It's going to apply the height of 32 pixels to a span tag. One thing about inline elements is that they cannot accept height or width properties because, by nature, they just line up after one another. There's no need for them to have a height and width. If I tell this to behave like a block level element, all of a sudden they adopt all of the properties of a block level element. They'll stack on top of one another. They adopt this height, which you can see. If I comment this out, see how they shrink like that. The line height between the elements is decreased. This is an easy way to illustrate the difference between a block-level element and an inline element. When you're doing layout, it's much more likely that you will use a div or another block level element. For instance, you'll stack things with block-level elements and put things in line with inline elements. But this shows you how you can use the display property to control their behavior. Inline and block elements combine to give us the layouts that we are familiar with seeing in websites. You know a little bit more about how styles affect HTML elements. You're probably saying, "Mark, when are we going to actually write some code?" Well, we will write some really soon on the project, but I want to make sure that you understand how these things work before we dive in. I don't want your styles when you're writing them to feel like just magic incantations that you throw out there. I want them to feel like commands that you're confident in executing. We're going to do a little bit more of a lecture with some slides, and then we'll get to write in a little bit of code. Hang in there. I'll see you in the next video.
5. Layout Strategy: Web pages are essentially boxes inside of boxes. Some of them go sideways, some of them stack on top of one another, and they combined to form complex layout patterns. The complex patterns they form, your web pages essentially, are called document objects, and they have what's called a document object model. That's essentially the relationship from one box to another. How many boxes are inside the parent box? If you could visualize those as a hierarchical tree, starting with the parent box here, child boxes underneath that split out into other Little child boxes. That's the document object model. It's very helpful to be able to see that while you're developing a web page so that you can get a visual idea of how these elements are interacting with one another. Let me introduce you to your new best friend, the inspector. If you go to a web page in Chrome and you right-click, you'll see a menu that has inspect at the bottom of it, tap inspect. It will open up a small panel that has all kinds of information about every single element in your page. Let's take a look at some of our boxes and start to give them some of the styles that are going to help us achieve. Look that's been set out in the design comps here, we're going to go for this crazy magenta color behind the header and tried to make it look just like this. So let's start by applying that color to our navbar. If we right-click up here, we can look around in our inspector and get a really good idea of what boxes make this up. We've got one main box there, that's the navbar, you can see class navbar. We're going to use that as a selector to target that box. Then inside it's got container 960. Eventually this is going to help us make a nice column. Then inside of that, we have the names of the pages for our navigation. Then we've got social media icons, which you can't see because they're white on white right now. Let's fix that. We're going to write our first style for the site here, I've got styles CSS open in my starter files. I'm going to keep building on this and we'll target the navbar class by saying.navbar. We'll give it a background color of E03ED7. I'm going to copy paste these things and move along really quickly in these code demos. Definitely stop the video and take time to catch up. I'm just going to try to do them fast so that we don't waste too much of your time watching me type things out. Don't be discouraged or offended if I'm flying through this, just hit "Pause". If we save this and return to the browser, we notice we've got a crazy magenta color back here. We can see our social media icons. Now look around at this border here. This is going to bring us to a discussion on the box model. This an illustration of the box model down here that inspector provides for us. Right here at the core, we see the dimensions of the core box itself, and then we see these three different properties of the box. We have padding, border, and margin, and you see here this hard line drawn near that is the differentiator. Although it has no actual width in real life. That is inside and everything past that is outside. Any borders you apply are calculated as being on the inside of this dimension. The padding you apply applies to the inside of this dimension. Any margin you apply applies to the outside. We can see that there's some margin applied here, all the way around. What that is, is a user agent style. If you look at this gray area here, it's in italics, you'll see that there are a bunch of elements called out and they are called out as display block. There are all kinds of user agent styles. These are styles that shape with the browser. These are the defaults. Now not every browser implements these same. Some browsers feel that eight pixels is the just the right amount of padding around something or margin. Other browsers might feel it's 10. Some feel that one font size is better than another. If you're building a website and you've got your styles written, and you're relying on default styles to help you, you have to take into account all these different browsers or just reset every one of them. A long time ago in terms of web, people started writing reset style sheets. Basically, they take things like H1 tags, default margin, default padding, default line height, all of these different things, and declared them expressly so that the user agent style sheet is not influencing them. In your extras files up here, you'll see I have a reset.css. This is one I just grabbed off the internet. Eric Meyers did a very popular one. You can, there's actually a great article on CSS tricks about the history of the reset style sheet, which is a great read, if you'd like some new level reading. Let's paste this reset into the top of our style sheet here and save it. When we go and refresh, that margin is gone, and now we start to see our styles. Whereas before we just saw the gray styles of the user agent. Now we say body H1, H2, blah blah blah. They've all been set to margin 0, padding 0. We will have to go in and really specify what we want margin and padding to be on these elements. But what we've done is ensured that every browser will display them consistently. The next thing here is going to try to get some of this content to behave. We've got all this text doing what it should do is in line texts, just filling up its container. Everything is slammed to the left hand side with no margin. Things that should be next to one another are stacked on top of one another. Let's impose a column on this. If we look in the design file, we can see this design, a column that goes all the way down the whole page and keeps things nice and orderly. We're going to make our web page have that same behavior by writing a master column style. What I've done in here is made the container called container 960. Once we apply our styles to it, it will help every one of these sections center themselves and become 960 pixels wide. Let's add those styles right now. I like to leave myself some comments just to help me organize my style sheets. We can use slash star and star slash to begin and end our comments. I'm going to say, begin site styles. We've got our navbar. Let's do one for container 960. This is the the margin auto centering technique and it's one of the most reliable techniques for centering and image on a web page. What it does is it takes a look at the width of the object and then automatically calculates the amount of margin on each side it's going to take to center this object. That's why it works so well. There is one thing you need to know, and that is that this works only on block level elements. The reason being, that inline elements cannot have a width or height applied to them because their job is to just go on and on and on and align until they flipped their container. We have to use a block level element, and in this case we're using a div right here, div class. Having set the width and margin auto to that, I hit "Save" on my style sheet, go back to the website here and this is going to snap everything into a column in the middle. Take a look at that and it's going to center itself. No matter how big or small I make this window. I've sprinkled that class up and down through this site, every time I go to a new section, so here in the hero section, there it is. Here in the line up section there it is. This is a great strategy for keeping a solid column and underscoring the power of a cascading style sheet. You can see how we write it one place and it cascades over our entire page anytime that style is referenced. This is a great way to get a lot of leverage out of just a very little bit of code. It only requires a little bit of upfront planning. As you approach building a website on your own. Go into this CSS pen here, this is CodePen. Go to this CodePen and play around. I've got some committed styles that you can uncomment and use to see how margin, auto and width combines a set of things on the page. You can play with values and see what happens when you change some of those values. Or if you change the margin or whatever you want to do, mess around with it, break it, and get a feel for how it works.
6. Float Based Layout: One of the first tools that web developers and designers got that helped them control page layout was the float. When you apply a float to an element, it will take the element all the way to the left or all the way to the right. However, floats take the element out of the normal flow of the DOM. They're a little peculiar. While content will flow around them, they are not enough to hold a container open on their own. When you float an element it turns it into a block level element that can be floated to the left or to the right. Floating needs to be turned on and off and you have to clear your floats in order to stop the floating behavior. It's a little bit weird. You would think you could just set something to the left or to the right and it would work. But they're really a hack because they were the very first tool that designers had to move content from left to right. They quickly figured out how to exploit them to make complex layouts, like a two column layout that we're used to seeing on the web today and that we've seen in print for hundreds of years. You need to turn your floats off by clearing them. If you don't clear them, the floating behavior, that behavior that takes them out of the normal flow of the DOM isn't reset. What can happen is, a container will collapse behind the floated elements. If you have a weird situation like this where you've got some content displaying behind something you floated, it's probably not been cleared. One of the most common ways to do it is to select an element that appears in the natural order of the DOM that is, at the end of the page, after the elements that have been floated and clear both floats. You can just clear both. That's how you clear it. I'll do a little demo for that. Hang on a second. Another way to do it is to give the parent container of the floats overflow hidden. What this does is makes sure that no content placed within any element can overflow its boundaries. By setting it to overflow hidden, you make it self-aware in a way and it calculates the space it needs to display these floated objects and the rest of the content within itself. Let's go to a CodePen and see how this all works. Here's our familiar old CodePen. Let's do the last couple bits of this, and then I've got another one for you too. Here we go. We've got all of the verses displayed as block, and let's try to get the house over on the right-hand side. We're going to say float right for the illustration and you can see it floats over on the right while all this stuff stays on the left. This is how we get 2 and 3 column layouts to work on the web. There are other ways, but this is one of the oldest and most widely used and frankly trickiest to understand as well. I want to make sure you get a really good handle on this. Let's move onto the second CodePen here. Here's a CodePen you can use to play around with float based layout and get a feel for it. I've got everything commented out right now. We've got our usual blob of unstyled content. Let's go and uncomment some of these styles and see what we get here. These are basic page styles, I add some padding to the header and the footer, and the body. Now, do you see these commas here? Anytime that you've got styles that are used in more than one place, you can put them in a comma separated list. For instance, header here refers to the header element right here, so HTML5 element. Footer is our footer. Dot body is going to be, look for some of the class of body. This section has the class of body on it. It's going to be applied there too. I'm applying 10 pixels of padding all over and you can see right here, I've got a nice border that I've created around all this content. I've just written one line of code, so if later I'm like, oh, I really wish that was 8 pixels. I write it in one place and it's applied to all of those different elements simultaneously. That's another example of the cascading part of cascading style sheets. It's a very powerful tool. Here we've got another comma separated list. This is background color for the header and footer. See how that applies to both of them. Let's see here. Get some background color in there for the div. You can distinguish it from the other parts of that composition. Make the illustration fit by making it with 100. Now, I'm going to set the widths for the columns here which are stacked right now. The divs, the block-level elements, they want to stack and because they have nothing else telling them to do otherwise, they're doing their natural behavior of filling up their parent and stacking on top of one another. Let's make them 45 percent wide and see this again. Comma separated list applies it to both columns. The one with the left class and the one with the right class at the same time. We'll apply some padding right to the left column and some padding left to the right column. That's going to give us a nice gutter in between the two. Now we apply the floats. I do float left, float right. I'm floating by left column, left, my right column right. You can see I've got a nice little gutter here. Quick note here, I just paused the video. Did you see how this text and the image were stacked way down here? I had to just make this 44 and then 45 again really quick and fix it a little layout bug. If you're getting the same problem, just do that and you'll see they'll stack next to each other. Just a little glitch. We see that this is overlapping the footer. We're going to try the first technique which is applying clear both to the footer. We see the footer is here after our two floated elements and by telling the browser, hey, once you reach the footer, stop doing the clearing behavior, it does. These can all stack up in columns like you want them to. Let's look at the other technique which was, see we take it away, they collapse. Apply overflow hidden to the body element, which is the Section element here that has all of these other elements in it. We will apply overflow hidden to that and boom, it becomes self-aware, it accounts for the floats and the unfloated elements and displays them all. There's a third way that you can clear a float and this is called the clear fix floating technique. It takes advantage of elements called pseudo elements, which we're not going to get into really in the course of this tutorial. But it's a really great way to clear floats and it's used a lot in responsive frameworks and things like that. I hope to do a future lesson on responsive design and it will be included in there. That's what the CF refers to right here. Actually that's, there we go, on the comment that, and that works. If you want, you can Google that on your own and check it out. Play with this pen and take a look at how changing different values changes this layout and its behavior and then let's go apply what we know about floats now, to the header of our project. In our style sheet, let's begin to put the classes into place and the styles in place, that are going to make our navbar look the way it should. With these social icons over on the right and the navigation over on the left. Here we go. The first thing I'm going to do is add overflow hidden to the container 960 element. What this is going to do is anytime we do a float based layout inside of this container, it's automatically going to clear it. We don't even have to think about anything except writing our float left in our float right. We'll do that first and then let me take a look at what our container names are here. We've got navbar here that we're going to go to the left so let's say, oh, we've got navbar there. Sorry, it's not navbar, is it? What is it? It's, we've got one called main nav and one called social. That's what I'm looking for. We're going to say main nav is going to be float left and then, as the only social it's going to be float right. You see how I'm indenting these a little bit? I hit Tab every time I split these curly braces and it helps you scan the document when you're looking, especially when it becomes long. When you're looking for different classes to go back and edit and especially in the HTML. Every time I go into a new box, I'm indenting things so I can look at a block code like this and say, oh, that's a box and it's got another box, that's it's sibling and this is it's parent. I can tell all these things just by looking at how farther indented. Another thing is, do you see that little blue line here? In Atom, when I touch an element, it shows me where it's corresponding opening or closing tag is. Those are some other helpful ways to have a visual representation for the abstract boxes you're constructing in code. We've got main nav floated left and social floated right. We've got overflow hidden specified, so it should work. Presto. There we go. That's to the right, that's the left. Now this still looks like junk, but we're going to talk about styling text very soon here. One thing I want you to do, go out to CodePen and just hit create and hit pen and try to write yourself, a very simple float based layout. I'm going to do it really quick. If you want you can skip to the end of the video if you're like, no, I got it, but really quick, let's do it. We're going to have a div with the class of container and then I'm going to close that div, and then I'll have a column. On that column of a div, that's going to be given a class of left, close that div and then we'll have a div with a class of right, and then we'll Hello in here and World in here. You see they're stacked right there. Let's try to get them to align left and right. For the container, let's say width is say 500 pixels, margin is Auto and I want to put overflow hidden on there. Let's do a background color just so we can see what the boxes look like. Let me do red. Now dot left is going to get float left and dot right, it's float right. There they are. Now you see that the red has gone away from our main background container. That's because it's not clear. Let's do an overflow hidden and it comes back. There is a really basic two column float. We haven't even put widths in here. We could if we want, but I just wanted you to write that out really quick. Just to give yourself a hands on two column layout exercise, really simple without me having written any of the code. Congratulations, because this is a tricky layout convention and if you master this, you will be able to write your own layouts easily and debug when they go bad, which is very important. Congrats guys. Let's move onto the next video. We're going to start to make this look like a real website.
7. Web Fonts: Okay. This is going to be a lot of fun and it's going to be high impact and quick. We're going to add some web fonts. Now, in the old days, you really only had a couple of different fonts to choose from. You had to rely on the fonts being present on a user's computer. Well now with web fonts and Google and all these other services hosting them on CDNs, you can get really reliable, beautiful fonts for free or [inaudible] paid services like Typekit and stuff like that. But tons of ways to get great fonts on your site. We're going to look at a free resource, Google's font library, and we're going to put those on and get this website shaped up a little bit. Here we go. Off to Google fonts. This is Google Fonts. We've got, just probably hundreds of fonts to choose from here. I want to run down a couple of things. Some terms, Serif, Sans Serif, Display, Handwriting, Monospace. Let's take a look at what these fonts look like. A Serif font, see this little tails, little horizontal pieces and all of these, [inaudible] numbers, very pronounced Serif. This M, it's got those little feet that come off the top and the bottom. That is what a Serif is. Serif font has these little feet on it. Sans Serif. Sans means without. You'll notice that these are all without the little feet. Display type is usually type with a lot of personality. It's usually unsuitable for body copy where you've got to read tons and tons and tons of it. It can be difficult to read but it usually has a lot of personality and it's great for a headline or something like that. Obviously Handwriting is going to be, I feel like this is in the larger category of display type. Personality? Yes. Readability? Not so much. Then Monospace is a very, it almost looks like a computer terminal. That's where all these things are. I use Monospace and Handwriting, turned off. For this particular project, I picked a Display type and a Sans Serif type. The Display type was Bungee and the Sans Serif was Open Sans. Let's search for Bungee here. Right here. If you click this "PLUS BUTTON", it adds it to a collection for you down here. Let's add. Let's get Open Sans in there too and I'll show you. Open Sans, add that. It's amazing how easy Google makes this. All you have to do, this is going to be hosted on their CDN. Yes, there are different ways you can host them on your own server and you have to use a font face declaration. I'm not going to get into that in this particular lesson. Let's just do it the easy way. You copy this and you paste it into the head of your HTML file. The reason being, you want to load your fonts before you start telling your style sheet what to do with them. If your style sheet loads before the fonts do, there's a chance that your browser is not going to recognize what's going on. You'd basically be saying, "Hey, use Bungee for all these headlines." The browser would be saying, "I don't even know what Bungee is. I haven't downloaded anything that matches that." We're going to load the fonts first right here. You see Bungee and Open Sans being loaded. Let's specify the weights we want to use because they come with, here you'll customize, a lot of different weights. You can choose, like 300 and bold 700 for Open Sans and then for Bungee, we're just using the regular 400, that's the only size it has. Go back to embed, copy that. You see as the sizes in there too. Now we're ready to start styling any text that we want. Looking at our design file here, we see that this header has Bungee texts, its button has Bungee texts, this is all Bungee, Bungee everywhere. Let's start writing some styles for these things. It looks like we've got the H1 tag, H2 tag, those are all going to be Bungee. We'll head to our styles here and we can write H1. There are all these different properties that belong under the font declaration. Let's start with font family. We're going to say in quotes, Bungee. Then this is going to be a font stack. A font stack is an order of fall back. We'll say Sans Serif here. What this means is, if the browser can't find Bungee, just display whatever the default Sans Serif is. Let's put one more and then let's say, Helvetica. If you can't find Bungee, use Helvetica, if you can't find Helvetica, use any old Sans Serif. We could say this is true for the H2 tags as well and H3. Save that and let's take a look at our website here to see what we get. There the wrong style sheet open. That's what we're doing wrong. I'm saving these stylesheets at the end of every lesson so that you have a record of everything that's been done for that lesson. I started with the one for this lesson and started writing in the wrong place. Here we go, let's do this. H1, H2, H3, re do it and there you see we've got Bungee showing up for all of our text. We're going to take the opposite approach for what I'm going to call the body font. We'll use Open Sans by attaching it to the body tag. Basically this says, make all the fonts Open Sans. Then we'll go back and very specifically change the ones that we want to Bungee. Here we go. The reason this is in quotes is it has a space. If I don't put this in quotes, then the browser is going to interpret that as two separate fonts. Comma, now we go back and take a look. We should see a whole bunch of Open Sans, by default it goes to Times New Roman. This should all change to a nice, thin Sans Serif. There we go. We've got nice texts now. We'll take a look at backgrounds in the next lesson and then we'll get to absolute positioning, so we can wrap this up. In the extras folder, in the lesson seven folder, I've added all of the type related styles to the stylesheet. Go through and uncomment those type related styles one at a time to see how they affect your layout. Then I'll see you in the next lesson.
8. Absolute Positioning: Positioning is one of the most misunderstood aspects of CSS layout, even experienced developers sometimes don't get it quite right. There are four different positioning, and these squares illustrate the ways in which they work. Static is the default positioning type and it's what you would expect it's an element that occupies a space in the DOM. The next one is relative. Relative positioning is unique, the element itself occupies the same place in the DOM that it had before positioning was applied, but it will appear someplace else like a hologram, I'll illustrate this with the code demo in case this isn't really making that much sense. Then there are the two that I call the ghosts, fixed and absolute positioning. I refer to them as ghosts because although you can see them, they don't really have the ability to push anything out of the way. A little bit like a float, but even with less presence in the DOM, as matter of fact, there are pulled entirely out of the DOM when they're invoked. Fixed positioning is pulled to the top or the bottom of the view-port, and it only references the view-port, the view-port is your window, your browser window. Anytime you've seen a sticky header when you scroll down a website and the header stays on the top, that's usually fixed positioning. Then we finally come to absolute positioning, which is the type you would probably use the most. It's pulled out of the normal flow, and for its position, like how far on the x, how far down on the y, it references the next parent container that has positioning specified. I'm going to do an illustration here that, because that's hard to understand, or at least it was for me. If I have this blueish rectangle and the orange rectangle, and the orange rectangle does not have some positioning specified, it's going to go to the parent container or the orange container looking for positioning reference. If that container doesn't have positioning reference, it will keep going all the way up until it hits the edge of the browser window. What you have to do is on the parent container of the object to be positioned absolutely, you have to put position relative. You have to use absolute and relative in conjunction with one another, it's a really weird way to do it, but that's just how it is. I don't know why it has to be so complicated, but I do know how to control it. Let's take a look here at our code. Go into the absolute positioning lesson folder and just copy everything and paste it into your CSS, and then we'll go through some of these commented out lines of code. Now the first one you're going to come to actually is this position relative, leave that alone for right now. Let's go down to this moozedoo line here. When we uncomment this, it's going to apply absolute positioning to that little character here, this guy. There he is, and his element is going to start searching up the DOM until it finds another element that has positioning applied to it, an element that is its parent. There aren't any other elements with that specified right now so it's basically going to go all the way up to the browser window, so watch this, there he goes. He's following these directions, bottom zero left three if tick these off, he goes, he doesn't have any positioning in fold all. Let me show you what it looks like with position relative, and turn that off. With position relative, he still occupies a place in the DOM, but if I do something like change the distance from the bottom, let's use a 100 pixels, you'll seen a move and you would think that that would allow this button to move over because it's centered. But it doesn't because his element still exists in the DOM right here, however, it's just being displayed over here. But something bizarre about relative positioning, and I haven't found a really great use for it, honestly, aside from it being used as a parent container positioning class for absolute positioning, let's see how those two work together. Here he is with absolute positioning applied, if we go up to the element that we want him to reference, which in this case is the hero, and we put position relative in their room. Now he searches all the way up until he finds this and then from there he says okay, I go bottom zero, left three percent, that's how we find his position. We can go over here now, uncomment this line text in the hero versus hero. There we go, and he'll go wherever he is supposed to go. I hope that explains absolute positioning a little bit, I'm going to show you another example down here too. Let's play around with fixed positioning really quick. This isn't part of the project, but it might be something fun for you to check out. We're going to take our navbar here, let's make a sticky header out of it. We'll do position fixed, remember position fixed only works on the top and bottom of the browser window, and it only can reference the browser window for positioning so you don't use it with relative positioning. You saw it disappeared, we have to give it a z-index, so you've got an x-index that is from left to right, a y-index that is top to bottom, a z-index comes out at zero. This has just fallen to the zero position, and we need to move it to the position of one or higher so it can be above the rest of the content, and then we just have to give this the width of 100 percent to make it fill that backup, so now we've got a sticky header. One thing you notice is that since this is pulled out of the DOM, it doesn't push this top image down at all so if I turn this off, for instance, you'll notice that it jumps, and now it's pushing this hero image down so that's something to consider when you're laying it out, you're going to have to allow for whatever this distances, but anyway, that's a final experiment there, you can play with that yourself. What we're going to do is go down here and use some absolute positioning to make these little band cards look like the design, like this. They've got a semi-transparent rectangle with a little bit of information in it. We'll start by uncommenting the band card, let's look at that, nothing really happens, nothing really should, it just sets the height, makes it position relative, which sets us up to use absolute positioning and puts a margin on it. Let's do the title bar here, but comment out the absolute positioning for right now. You see it renders below here, it's supposed to be above, we're going to use absolute positioning to put it on top of that picture. Let's get some of these other styles in here, title bar, band name, you'll see there's a float, because we've got a title on the left and a night on the right, so here's the night, see it's floated right, so that should go to the right, and there it goes, now let's uncomment position absolute and see what happens. Now all that content can be pulled out of the DOM and overlap it's neighbors here inside of this div. Really quick, just because I want to drive this home, this container block here has positioned relative, and then anything inside of it with an absolute position can reference it for positioning, so you see we've got bottom zero right there, and that is sticking to the bottom right there. Now let's really quick get these style and get them floated over to the right, this should all be pretty old heard by now. I'm going to add some background color to those things, and we'll style the header, key there. Now, here's something interesting in the header or a little trick that I used, I put padding all the way around that header, and it's inside of a box that has padding. But I wanted the purple to stretch all the way to the end, so what I had to do was use negative margin. Take a look at this trick, anytime you need to you can use a negative margin, you see this negative 20 pixels? Let's set that to zero, and you can see the default behavior, see its got that ugly gap. By using negative margin, I can extend it over the margin. That's a little counter-intuitive, but it's a great little hack. We've got these boxes, let's apply a width and a float so that we can get these things to line up the way they should. A little styling for the price, style the description, there we go, it's starting to look good, and then finally, we've got this whole container style. These are all styled, let's go back up here and do the floats then we should have our homepage layout finished. Moon. You could reproduce something like this, I mean, definitely dig around, play with this, get to know how it works, break it, fix it, but based on what you've learned in these lessons, you could execute this type of layout. Maybe it won't be fast, painless and easy but you've definitely got the tools to do it, and if you do it a couple times it'll make sense. Now let's take what we've got here and reuse and recycle it to quickly set up the rest of our pages.
9. Recycle for Speed: The great thing about code is that once you've written it, you can reuse it. We have a couple of elements on this page that repeat the header, the footer, the background behind this middle section. Let's copy those things onto our next two pages to get a jump on creating. Open experience dot HTML from the starter files, it's empty, but what we're doing here is grabbing the reusable portions of the site. So we grab the doc-type HTML head, we use the same stuff there, body class, home, we're going to change to experience, but everything from, let's just do the header for now. From the doc-type all the way to the header, copy that and paste it in here, and you know what my eyes will grab the footer because we used that. So let's get the close HTML and all the way up to the footer, and we can tell that we've grabbed the right amount of code because see how the brackets all match up, so we've got our boxes lined up just right. Now, let's change this to experience. I don't know if you remember or not, but we wrote a couple of styles in our style sheet for it to provide a different hero for the experience page does experiences and we can do the same thing for location. All the same code, we're just going to swap out the image in the background. So let's take a look at what we have here. I'll reload that to experience, we've got our header, we've got our footer. Let's change this so that it indicates that we are on the experience page. Here I've got this active class. Active is the one that puts the line underneath the page that we're on, so if I change that to the experience link, there you go. So now we have a way to tell what page we're on. What other stuff can we borrow? The whole hero section is the same, so let's borrow that, we have hero all the way to, where does it close? Right there, and just go and tuck that in. See everything lines up still so we know that we're in the right level of boxes. So we've got our different background and we can just swap this stuff out on as needed basis for the copy that we do need. So, we don't need the Moozedoo logo, get rid of that, we don't need this HR anymore, we don't need to get tickets button anymore, and we don't need the little character. All we need is that headline. For look at our design comp, we can grab the headline from that, there we go. So just like that, we've got a whole page setup and then we obviously have to do some content in the middle here, but let's take that since our other page or location page features the same types of page layout, we can really quickly get that in line to buy copying all of this into our location page. All we have to do is change this active class to location and change this body class to location, and there we go. So we can really quickly duplicate layouts once we've got some of that copy figured out. Let's do the middle part of the experience, the last thing I wanted to show you is how you can use float secret gallery. Head to the lesson 10 extras folder, and I've got the content prepared for both of these pages. So let's check out the experience page. Grab everything from hero, well just grab everything because it's just all the main content, and we'll paste that into our experience page. We're going to go over hero, we should get everything from the hero and the middle and everything. It looks like our indent has fallen apart a little bit here, so you can push command, curly brace left and indent 1, and you can push command curly brace in that, on the other way. So I'm going to indent this back too, to get it all lined up. This may seem ridiculously OCD, but I'm telling you it'll help you in your coding to realize how many boxes in you are. So I save this and take a look in the browser, but the experience page, and I've got these different features here. So in our layout, they look like tiles or are they like a gallery style layout, so we can easily accomplish that effect by using floats, and as opposed to our two column float that we had before, we can set them all to float left, and if they're half the width that their parent container, they will just all stack up. But I'll show you a really neat CSS selector to use to help out with this. Let's go and grab the styles from this lesson 10 folder, select them all, copy, go to our style sheet, which is right here. Paste them in, if we uncomment the pull text, that's going to give us this text here. Not a lot going on there, nothing you couldn't figure out, just some regular font styles. Let's uncomment feature, that's going to start lending some styling to this. Let's look at what we added, the feature we've added a width which allowed these.
10. Thanks!: Thanks for taking my Skillshare class. I hope you got a lot out of it. If you have suggestions, comments, critique, please leave me a message and I'd love it if you could leave me a positive grade. If you've got any ideas for future topics, I'd love to hear those as well. Best of luck, and I'll see you out there on Skillshare.
Marc Nischan, Artsy people can code!
