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
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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