Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Creating an Online Resume: Hands-On Training, interactive design professor and enthusiastic educator Laurie Burruss teaches how to produce an online resume—and create a first web site in the process. Laurie suggests structure and information needed to create a winning resume, and shows how to design the pages with simple typographic principles and effective layouts. She explains how to use Cascading Style Sheets (CSS) and control the design and structure of HTML documents through hands-on development. Exercise files with additional supporting materials accompany the course.
So, I'm going to go through all my styles and look at the vertical spacing and try to make my website look just like I want. I told you before I'm trying to go for the one-page perfect online resume. Let's locate the h tags. Right now at the top I have it 1 em and that's a little large now that I've changed the font-size to 0.8 em. So, I'm going to change this to 0.6. Again, you may ask how do I know how to do this. I just try things out until it looks and feels the way I think it should look. So don't be afraid to change these numbers and experiment.
I'll type 0.6 em, click my Refresh button, and that does exactly what I want it to do, which is to tighten up those headers a little bit. Go ahead and do a File > Save All, as you are doing in each one of these. Then I'm going to go into my p tag and my ul and dl tags. So, in my p tag, since I'm working on vertical spacing right now and I know in my Margin tag that this first item here is always the top margin, I have reduced the font-size. So, I'm going to reduce the vertical margin spacing as well, to make this be proportional.
So, I'm going to change 0.35 to 0.25 and click on Refresh. I'm going to consistently do this throughout the site. I'll go down to my ul and make the top margin 0.25, and click on Refresh, and then go down to my dl or definition list and change that again to 0.25. So I'm consistently going through and marking up and styling my vertical spacing, as I go along through each one of tags. Then I want to work on the li tag.
Now the li tag is the list item for the unordered list. It's this line right here. In this particular one, I want to give it a line-height. Instead of 1.5 em, I want to reduce that down to 1.2. Remember, I'm making my font more like 10 or 12 pixels. So, if you think of this 1.2 as sort of being like 10 points over 12 points, then this would be 0.8 over 1.2, sort of the same proportions. So, I'm going to go ahead and do 1.2 and click Refresh.
And that tightens that up just a little bit more. I am going for that relative look and I'm looking at all the things around it, and in context making sure that it looks right. Then I'm going to go further on into my definition list and I'm practicing what I've been preaching all along, which is to work from the outside in on my styles. I'm starting with the largest styles first and then going inside to the children tags inside the outside parent tags. So, now looking at the dt and dds. There is only one I want to change and this in the dd.
I see again that I've left this at 35 and I want it to be consistent with my top margins. So, I'm going to make that 0.25 and go ahead and click on Refresh. And then finally, I want to make the p update work a little bit better than it's been working. And that one is right here the p#date right there. And I'm going to look at it over here. And remember this is this one right here. I want that to have a little bit better margins than to what it has right now. So, I'm going to go into the margin.
I don't need quite as big as space as I currently have. That was from the other layouts. So, I'm going to go in here and in the top margin and make that 25 pixels and in the bottom, since I now have the rounded rectangle image, and that adds about 20 pixels, I can reduce the size of this and I'm going to make it 10 pixels and then click on my Refresh button. So, I've now eliminated some space here and brought some of the space down in here. I can now go back into Design view and do a File > Save All and give it one more cursory but critical look, to make sure that everything is flowing the way I want it to look.
And notice by changing the unordered list, it's also changed the flow of this content area in here as well. So you want to keep checking things, because remember this is fluid, not rigid design work that you are doing in typography. You have to be flexible and adjust with what the browsers and with what the user screens and the page are doing at all times. Now, I need to check it one more time in Firefox and when I go back out here, it looks really good. I'm very happy with this. It's a nice, tight but it has a good use of negative and positive space, has clear headers, has clear content areas, I've pulled out some of my top computer skills and my contact information is much easier to see now.
So I'm very happy with this website. The last few things I need to do are some organizational things behind the scenes. So that I can see what I've done when I come back two or three months later and need to update this.
There are currently no FAQs about Creating an Online Resume: Hands-On Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.