Lessons
Class Introduction
05:05 2Evaluating a Web Design
09:43 3Adding Markup and Content
32:26 4Getting Started with CSS
30:09 5Styling the Header and Define Sections
21:04 6Styling the Main Section
21:09 7Creating the Navigation
35:30 8Adding Media Queries
11:33Lesson Info
Evaluating a Web Design
So the first thing we'll do is create a project which will be the root folder of our project. And a lot of web developers and designers will use the term root. Root just means it's the project that houses everything else that's part of our project. So on my desktop here, I'm just gonna create a new folder, and I'll just call this my first web page. Once I have that created I will move this over to the right a little bit. Let's go back into our project files. Let's open up the starter files. And in here we have three files. There's an index.html file, and then we have two style sheets in here. We have a style underscore print, and a style underscore screen. We're going to be putting all of our print styles into a separate CSS file, 'cause it'll be a lot easier when we're building our project to switch between print and web, or print and screen, rather, when we're creating our project. So I'm gonna select all three of these files and copy and paste them or if your on the Mac you can opti...
on drag them into the my first web page folder. So now let's come in here and let's take index.html and let's open this up in our text editor. So inside of our project we have our beginning HTML tag. Everything that we do in an HTML file starts in an HTML tag. Inside of the HTML element we have a heading element. This consists of our metadata. The metadata first for the character set, which is the type of code we're gonna be placing into this document. Most of the time you're gonna use UTF eight. This will support things like using M dashes and accented characters, anything that goes beyond the ASCII character set. And then down here, the view port, this is where we set the initial scale and the device width. And again you can use this HTML project for any web project that you're working on. So you don't have to type all of this each time. But basically what this does is it sets the device width and the initial scale, and by setting this we're basically telling the browser no matter what the device you're on, we wanna set a one-to-one ratio of the HTML to the screen. This way when we write responsive design queries later, using CSS media queries, it will be able to gauge itself based on this initial scale. So if we write a CSS rule for screens under 600 pixels, for example, this is the tag in the HTML that will tell the browser, pay attention to the width so we can make those changes later. Finally our title this is the title of the document. This is used by search engines to catalog your site, along with a few other things that we'll be talking about. As well as this will become the text for the bookmark. So you wanna make sure that this is very descriptive for the content on the page. And then inside the body, this is the presentation area. This is everything that we see in the browser, and this is where we're gonna be focusing most of our day today. So with that we have our HTML file open, we're ready to start writing some HTML, but the first thing that I do before I start writing the HTML is to evaluate our design and figure out what are we going to need in our library of HTML elements in order to structure our content. So if we can switch back over to our slides, we'll take a look at the strategy for our design. So we'll start by looking at the final design. At the point when we get to, or the time we get to the point where we are going to start writing our HTML, the assumption here is that we've already gone through the design phase. We actually built this design in our other course on sketch. And we assume, assumably have client approval, so this is the design that the client likes and everybody's approved it. So now to begin building this we need to evaluate what's going on here. So if we start looking at the different sections we start to sort of draw little boxes or areas of what we need for our HTML. So what we'll typically do is look at all of these different pieces here and assign some HTML labels or elements to some of these sections. So we'll need a header, and that will encompass everything that we're gonna have up in the top are here, for the header. We're gonna have a navigation piece that's actually gonna be outside of the header but we're gonna position it over top so we'll get to use some positioning properties in CSS. And then we're gonna have two sections. One section where we define the content. Another section where we defined different choices, so these are more promotional type areas. And then we're gonna have a main section here, which is going to be the main sort of article or information of the site. And then we'll have the footer information down here. So again, we'll just sort of use this as our guide for all the different pieces that we're going to need. There's another behavioral part of this site and that is the content that we have in the page, we never want the content to get wider than a certain amount. So if it got more than around 1200 pixels, it'd be hard to read. Especially some of the sentences here that would go the full width. So the other behavioral change we're gonna have here is we're going to set this up so that regardless of the width of the browser, we'll have some elements like the header and the choices section and the footer, go the full width, but the interior pieces, the internal spots here that contain the content are only gonna go to a certain width. And so what we're gonna do is we're going to add a div element, which stands for division, inside of each one of our main containers. And we're going to lock the width of the content there. That's gonna give us a desired behavior when we're looking at the final project. And that will give us the ability to keep readability but also keep the design, fill in the entire browser and giving us that experience of having the design really sort of fill the space that we're working with. Yes? Is there any best practices for the width of a web site? The container of it anyways? The answer, the quick answer is not really. It all depends on where you think your content is going to go. For us, the content width, anything over about 1200 pixels is gonna feel really wide. You're only gonna see 1200 pixels if you're on a 21 inch monitor or larger and you open the width of the browser window wide enough to see that. So for us I think the magic number is around 1200 for content you need to read. Design elements would be completely dependent on the design of the website. Our cutting board, which is in the upper right hand corner here. You could make this a lot larger if you wanted. You could make it smaller. You don't have to have the elements going the full width, and each design might have sort of a different structure and layout. But I think when you're talkin' about readability for the type, we try to use at least 16 pixel type as our base for the body. A lot of times we'll go to 18, but we try to use at least 16, and we try not to get our content wider than 11 or 1200 pixels. Okay so let's go back to our computer and let's start creating our content. So we have a pretty rough idea of what we're going to be creating. Let's go back into the exercise files, and what I wanna do is open up a copy of the final project. So since I've already put this project together we have the luxury of taking a look at the design before we build it. And so what I wanna do here is just take a look at the final design and just talk about some of the pieces that we took into account when we were figuring out the strategy for the HTML. So in our final web page, we'll have this design, our navigation element is up here at the top. If I hover over these items we get these dropdown menus. We're gonna create these with an unordered list, and we talked more about unordered lists in our intro to HTML course. If I scroll down here a little bit we'll see we have our columns in place. We're gonna create these using flex elements in CSS. Continue down we have our choices area, we're gonna create some semi-transparency effects here using RGB a color spaces in CSS. I'll continue down, we'll use SVG graphics. And then finally at the bottom we'll place our footer. Now it's interesting here if I come in and change the size of the content, as we get under a certain width, we'll start to let the content re-wrap and flow around. In some cases we'll make layout adjustments. So for example here we have our icons above the headings here for what is a spice and what is an herb, however, when I bring the browser down even smaller, maybe a tablet iPad or horizontally held Samsung phone for example, that can go up to like 700 pixels. We're gonna take the icons and move 'em over to the left, and stack the content here. In addition, the navigation, we're gonna change the navigation so that when we get small enough, and I'm gonna set my browser into responsive design mode. When we get small enough, we will have content here that will show for the navigation system as a mobile menu. So when we get down to this state here, we'll notice that we'll get a menu icon here. If I click on this, this will actually open up the menu. We can scroll through this. And if we click it again we're gonna close this up. And we're gonna do this purely with CSS and HTML. There's gonna be no JavaScript in order to create the menu as well. So this is gonna be the overall goal, and for the content piece, if I bring the browser up really wide, you'll notice that the content never gets wider than that certain amount. So the content will scale all the way up to here, but then if I get wider that this the content sort of locks into place. So when we were talking about the strategy and we had the purple, the pink squares on the screen representing the content containers, that's the piece of the HTML that's going to lock into place. And it will center in there, but keep the content from getting really wide.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Christine Wigaard
A great course. Chris has a great way of explaining and making it seem very easy and fun.
Linda
I am so happy to have taken this course! Chris is very clear and knowledgeable about what code to use and why. He is very organized and made coding fun!
Matthew Chesebrough
Chris, thanks so much for having such a well organized an insightful class. I took the class because I'm working on some redesigns for my personal website and the hosting templates weren't quite getting me to the level of fit and finish I envisioned. To be honest, I was a little nervous and intimidated by html/css initially, but you helped me conquer the fear. I look forward to taking some of the lessons (after a few more views of the classes that is :) ) to my website achieve my vision. Wishing you all the best. Take care.