Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Design and Development!
You have completed Design and Development!
Preview
In this video, we'll write some HTML and CSS that utilize the images that we created. This will allow us to generate the basic look of the site.
Download: Project File and Source Code
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?music?]
0:00
[Master Class: Designer and Developer Workflow: Third Sprint: Basic Site Styling]
0:02
[Nick Pettit] Now that we have all of our images,
0:07
we're ready to go ahead and dive into the CSS and include all of them.
0:10
First, let's just go ahead and assess our CSS a little bit
0:14
and see what we need to remove or change
0:18
before we go ahead and add in our fluid grid layout.
0:22
First, we're going to get rid of all of these Blueprint variables
0:27
because they're all pixel widths and we can't use that
0:31
if we're trying to create a fluid grid.
0:35
This doesn't make Blueprint useless entirely.
0:38
In fact, there's lots of things in Blueprint that are still bootstrapping the page,
0:41
such as the reset code, but we don't really need it.
0:45
On our wrapper, we're going to get rid of the container
0:50
and we're going to set the width to 100% for now
0:56
and let's just jump back to the browser to see what kind of effect this had.
1:02
So when we refresh the page,
1:09
that's exactly what we expected to happen.
1:12
The text is all the way up against the sides
1:16
because there's no wrapper keeping this in.
1:19
So let's just change that to about 90% for now.
1:22
So we'll bump this back down to 90% and refresh the page
1:29
and now we have a little bit of space and we just need to center this on the page
1:33
and we can do that pretty easily using margin: 0 auto.
1:39
And now, it's centered on the page, so as we resize the browser,
1:47
these margins will stay there.
1:51
Now let's switch back to TextMate
1:55
and take a look at the rest of the code.
1:57
This h1 is okay; we're going to end up changing that
2:00
when we change it to our actual logo.
2:04
I don't want to change any of these list items except for the columns
2:07
we'll probably need to get rid of pretty soon.
2:11
And everything else looks okay for now, but we'll change things as we go along.
2:16
So let's scroll back up to the top here and let's look in the browser really quick.
2:23
What's going to end up happening is this Easy Jobs! is going to become our logo
2:27
so this h1 will actually end up being an image here and will hide the text,
2:34
but we'll keep it in the markup for accessibility reasons.
2:39
The list in the center of the page here will end up being inside of that piece of paper
2:43
and the authentication links will end up in the upper right.
2:49
I'm not really sure where the New Job link is going to go
2:53
because we didn't really design that view.
2:55
We only designed the show view here,
2:59
so on that note, why don't we go ahead and focus on the show view
3:04
when we're creating our design and we'll go ahead and come back to the index view
3:08
and some of the other views later on.
3:12
If we can get this one view done in this Sprint, we should be in a pretty good position
3:15
to get the rest of them done in maybe the next Sprint.
3:20
So let's start with a few simple things like the logo and then the background
3:24
and try to make them look like our Photoshop mockup.
3:29
So if we review in Photoshop here,
3:34
we have our logo, which we sliced up already,
3:37
and that's actually going to be a pixel width
3:41
because when we create our fluid grid layout, we don't want this image
3:44
to be resized at all because if this image were to resize,
3:49
the border would become smaller and it wouldn't line up very well
3:54
with our background image.
3:57
So even though most everything else will have a fluid or percentage width on it,
4:02
our logo does need to have a pixel width, and that's fine.
4:08
So with that in mind, let's go ahead and switch back to TextMate
4:13
and let's go ahead and apply this background image to our h1.
4:17
Now, the font-size and font-weight really don't matter here.
4:23
We just need to set an explicit width and the width of our image is 390px.
4:28
The height is 79px and we're just going to set a really obvious background
4:36
like a background color of red just to see what's going on in our markup.
4:43
So let's go ahead and switch back to the browser
4:49
and we'll refresh the page and that's the size of our logo.
4:52
Now let's go ahead and include the image.
4:57
So we'll switch back again and the background is going to be a URL
5:00
and to get to the image, we need to jump out of the style sheets directory,
5:08
jump into the images directory, and remember, inside of the images directory
5:17
we created another folder called Layout to hold all of our images related to our layout,
5:21
and we called our logo easy_jobs.png.
5:28
We want this to be top center for the position,
5:36
although that doesn't really matter a whole lot,
5:40
and we want to set this to no repeat.
5:43
So let's go ahead and save that out, we'll switch back and refresh the page,
5:47
and now we have our logo somewhat in place.
5:52
Now, you'll notice that we still have this text here,
5:56
and we need to get rid of that.
5:59
To do that, we're going to set a text-indent: -20000px.
6:01
Now, what this will do is actually push the text to the left by 20000 pixels,
6:10
and unless you're using a monitor from the future, you probably aren't going to see it
6:16
because it's just going to be so far off screen.
6:21
So we'll switch back and refresh the page,
6:25
and now that Easy Jobs! text is gone, but it's still in the markup
6:28
for accessibility reasons.
6:33
Now you'll notice that the background color that we're using here
6:35
is just slightly off-white, so we need to make sure that we change that
6:39
when we apply the background image to the whole page,
6:46
so let's go ahead and switch over and we're going to apply our background image
6:50
to the body of the page.
6:58
We'll use the background property, of course, and same URL.
7:02
We need to jump out of the style sheets directory into the images directory
7:08
layout, and if you'll recall, we named the image bg.png.
7:13
We'll set this to the top center and we want to repeat along the x axis.
7:21
And then, finally, we need to grab the color that we're going to use from Photoshop,
7:30
but first, let's just go ahead and set it to red
7:36
and we'll switch back and refresh the browser
7:42
and you'll see that our logo isn't quite lining up with the manila folder just yet,
7:46
but that's okay.
7:52
And we can see that we have this nice paper texture going,
7:54
and just looking at it from here, it doesn't look like it's really repeating at all
7:58
even though, of course, it is, so it looks like we have the effect
8:03
that we wanted to accomplish.
8:07
Now, we need to do a couple of things here.
8:10
Our page isn't scrolling yet, but if it were to scroll
8:12
beyond the height of this background image,
8:16
we would get some sort of strange color down there,
8:19
so we need to go ahead and add in that extra noise image that we created originally,
8:22
and actually, because we're using an image all the way to the top,
8:28
it looks like we don't need to grab that off-white background color after all.
8:32
But let's go ahead and put in that noise image down below this repeating image.
8:38
So we have a comma there; we're going to skip down to the next line
8:45
and we're going to jump out of the style sheets directory into images,
8:52
into layout, and we called this image folder_noise.png.
8:57
Again, we'll say top center.
9:07
It doesn't really matter.
9:10
And we don't need to say repeat because it will repeat by default.
9:12
So we'll save that and when we switch back and refresh,
9:17
it looks like we have a SASS error,
9:22
so let's see what's going on here.
9:24
Now, it looks like SASS didn't like the fact that this line was indented so far
9:27
because using this SASS syntax, indentation is actually very important,
9:34
so we'll just skip the niceties and we won't put it on the next line
9:39
and we'll just have one somewhat long line of backgrounds here.
9:45
We'll save that out, switch back and refresh, and although nothing really looks different
9:50
than what we had before, rest assured, our noise image is somewhere down below.
9:56
Now, let's try to fix our logo so it's lined up with our background image.
10:03
What we need to do is put some margin on the top
10:09
so that we can move this logo down
10:12
and we need to get these registration links out of the way
10:15
because those are probably block-level elements.
10:20
So let's first switch back to Photoshop
10:24
and we'll grab our marquee tool
10:27
and we can probably figure out how much margin we need just by measuring
10:31
from the top here going to the info tab,
10:36
and it's saying a height of 18 pixels, so let's go ahead and try that out first.
10:40
So we'll switch over to TextMate
10:45
and on our h1, we'll just say margin-top: 18px and save that out,
10:48
and if we switch back to Google Chrome, that looks like it's just about perfect.
10:59
I think it's 1 pixel off, so we'll change that to 17 pixels,
11:03
and that looks like it's perfect.
11:10
And it turns out we didn't really need to move those authentication links after all,
11:13
although we do still need to move them to the upper right
11:18
because that's where we want to put them in our layout.
11:21
So we'll switch back to TextMate and let's go in our views directory here
11:24
and we'll open up our application layout.
11:34
You can see that we have an ID called user_bar
11:37
and that contains all of our authentication links.
11:42
So we can go ahead and use that ID in our CSS
11:47
to move it over to the right, so let's just try something really simple
11:51
like floating it.
11:56
So we'll select our user_bar and we'll just float it to the right
12:00
and see what happens.
12:05
So we'll switch back to the browser and refresh,
12:07
and that's almost what we want.
12:11
We actually just need to float the Easy Jobs! logo over to the left
12:13
and then we should be good, because remember,
12:17
this is an h1, which is a block-level element,
12:20
and it's actually extending all the way over to the right,
12:23
or blocking the content all the way over on the right, at the very least.
12:28
So we'll switch back
12:32
and we'll float our h1 to the left,
12:34
switch back and refresh,
12:39
and now we're getting into some issues where we need to actually clear the content,
12:42
but that's okay.
12:46
The general idea is there, where we have our registration links over on the right side
12:48
and our Easy Jobs! logo over on the left.
12:51
So I'd say so far this is looking pretty good, and I think now
12:56
we're ready to get into the content.
12:59
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up