Start learning with our library of video tutorials taught by experts. Get started

Creating an Online Resume: Hands-On Training

Online resources and applications


Creating an Online Resume: Hands-On Training

with Laurie Burruss

Video: Online resources and applications

As we are learning about typography for the web and how to be better web designers and use typography more effectively in the design of our web pages, and in this case our online resume. I'd like to show you three online applications that help you with your design and help you understand how to create the right and appropriate CSS. This first one is fun little application for online. It's in beta. It's called My Fonts WhatTheFont and it's a little bit like, if you own an iPhone, the application Shazam.
Expand all | Collapse all
  1. 9m 10s
    1. Welcome
    2. Using the exercise files
      4m 57s
    3. Creating a custom font list
      3m 23s
  2. 23m 7s
    1. Overview
      1m 52s
    2. Distributing your resume
      3m 29s
    3. Resume formats
      6m 43s
    4. Comparing good and bad resumes
      11m 3s
  3. 38m 0s
    1. Striving for fluidity, not rigidity
      5m 12s
    2. Font types, web-safe fonts, and font measurements
      10m 44s
    3. Principles of typography
      10m 35s
    4. Online resources and applications
      11m 29s
  4. 1h 26m
    1. Setting up the web site folder
      2m 46s
    2. Defining the web site
      3m 43s
    3. Setting up a custom workspace
      5m 26s
    4. Creating a new web page with resume content
      4m 56s
    5. Marking up header tags
      3m 53s
    6. Inserting tags for unordered lists
      3m 43s
    7. Inserting tags for definition lists
      3m 12s
    8. Formatting URLs
      5m 23s
    9. Creating and linking an external style sheet
      5m 9s
    10. Styling the body tag
      15m 31s
    11. Styling the header tags
      8m 6s
    12. Styling the paragraph tags
      4m 3s
    13. Styling an unordered list
      3m 48s
    14. Styling a definition list
      6m 1s
    15. Creating a custom class style
      4m 20s
    16. Creating a custom ID style
      3m 32s
    17. Applying a print-specific CSS layout
      2m 54s
  5. 52m 24s
    1. Creating a new document in Fireworks
      6m 15s
    2. Creating a background tile in Fireworks using Gradient Fill and Texture Fill
      5m 59s
    3. Slicing background tiles in Fireworks
      2m 37s
    4. Optimizing and exporting background tiles in Fireworks
      6m 12s
    5. Creating background tiles using online applications
      6m 5s
    6. Creating a page-like resume
      3m 50s
    7. Deleting unneeded CSS styles for this resume version
      1m 56s
    8. Adding a Wrapper div
      3m 33s
    9. Styling the Wrapper div
      8m 52s
    10. Controlling the vertical spacing
      1m 24s
    11. Zeroing out margins and creating a faux drop shadow
      5m 41s
  6. 1h 9m
    1. Setting up the HTML and CSS documents
      2m 15s
    2. Deleting unneeded CSS styles for the pro version
      1m 12s
    3. Creating the Header div
      3m 37s
    4. Creating the Content div
      2m 25s
    5. Creating the Sidebar div
      2m 20s
    6. Styling the Wrapper and Sidebar divs
      4m 56s
    7. Styling the Content div
      3m 7s
    8. Styling the Header div
      3m 33s
    9. Nesting a div tag inside the Sidebar div and styling the sidebar content
      6m 21s
    10. Inserting images to create rounded page edges
      4m 12s
    11. Styling images
      3m 59s
    12. Clearing floats
      3m 55s
    13. Creating font-size style for the Body tag
      2m 13s
    14. Fine-tuning resume styles
      4m 38s
    15. Adding a border to the Content div
      2m 38s
    16. Linking to a PDF
      4m 58s
    17. Organizing styles in the CSS panel and inserting comments in the style sheet
      4m 42s
    18. Creating and styling a print style sheet
      8m 56s
  7. 1m 33s
    1. Goodbye
      1m 33s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating an Online Resume: Hands-On Training
4h 40m Intermediate Sep 24, 2009

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.

Topics include:
  • Creating a simple text document for use inside Dreamweaver
  • Formatting HTML tags with semantic or meaningful markup such as unordered and definition lists
  • Externally linking a Cascading Style Sheet to a web page
  • Creating and applying unique styles to XHTML documents using HTML tags, compound selectors, custom classes, and IDs
  • Creating tiling background images in Fireworks
  • Using the DIV tag in combination with CSS to create effective layouts that organize content
  • Applying principles of web typography
Laurie Burruss

Online resources and applications

As we are learning about typography for the web and how to be better web designers and use typography more effectively in the design of our web pages, and in this case our online resume. I'd like to show you three online applications that help you with your design and help you understand how to create the right and appropriate CSS. This first one is fun little application for online. It's in beta. It's called My Fonts WhatTheFont and it's a little bit like, if you own an iPhone, the application Shazam.

You upload an image of some text or a typography that you like. So for a little example I've downloaded an example from this actual website. I'm going to browse right now, and it's called got milk. It's on my Desktop and I'll click on Open, and you can also refer it to an image that's on the Internet, which is really, really helpful. So, if you see a really cool image of some typography that you like, you can actually put in the URL. Now, I'm going to click Continue and then you have to help it sort of guess what letters that it's looking at.

It separates the eyes into two parts. So, there is the G, the O, the T, the M and here I'd just have to do the guess for it, and then here's the L. And again, it has separated the question mark. It has the top of that question mark here, in the bottom here. So it just put it in one box. So I'll put that question mark in the last box. And once you've got the guessing done for what characters that you trying to locate. Go ahead and click on step two to continue on. And then you get your results and over on the side if you watch, this is very cool, this got milk is what we submitted and here is its top guess.

But because a lot of fonts are very, very similar it will actually give you often five examples of something that's close and it also tells you more about these kinds of fonts. It's narrow. It's Sans-serif. It's kind of Bauhausian. It's geometric, da, da, da, da, da. So, these character ideas will also help you with your design. So, as I would scroll down my screen you can see that in fact the top one was the best guess, but it also gives me enough selections of other fonts that if I see another font where I think this particular type looks a little better, I can choose that. So if you're not used to using typography or you don't have a great knowledge of all the fonts that are available, this is a fun little gizmo to help you do that.

Remember it's a lot like Shazam. You enter the font that you want it to guess at and then it makes that guess. It's got to be fairly contrasted, so that it can see it well, and remember you are submitting images. You're not really submitting type. The second online application is called Type Tester and it's elegant. It's fantastic. What it allows to do is to put in your own text right here in this text box or you can just use the Lorem Ipsum that they're providing. I'm going to use the Lorem Ipsum.

So, they start you off with column 1 and it's all set to three choices, but you can then change the second and third choices or change all three of the choices. So, I'm going to leave Verdana set just the way it is in the first one, and then come over here and choose Arial. Now what I love about it is it gives you the safe list. And the safe list is that concept that we've been talking about, the web safe fonts. So, here is a list of the Web Safe Fonts. Then it goes down and shows you the Window defaults, the Mac defaults, and this is really, really helpful.

Now if you go to a the second drop-down menu, this would show you all the fonts that you have available on your operating system and while that might be great for a typographer or if you are a print designer, it's not very helpful if you are a Web designer. So be aware of that. This is all the fonts installed on your operating system. So in this one I'm going to choose Arial and I'm going to make it slightly larger to see how that looks, and looking at the leading, thinking it need a little bit more leading. So, I'm going to go in there, and add that and then I can go and do left-alignment, and do right-alignment to see that that's something what I want, but you have got all these choices.

For word spacing, this is the space between words, which is an attribute of your CSS, so I can come up here and choose a negative one, which makes it jump on top, or I can come down here and do something much, much greater, which will spread them all apart. So you have got a lot control here. I'm going to go back to a normal web spacing and then for tracking, you can bring that in a little bit, you want to make it tighter like that, give it a more dense look and again, you can space it out like that.

So, there is a lot of control here. I'll go back to the zero setting. Then in here you can actually change the color and you just click here and you get your color document there and I can pick any color that I want, or if you know your hexadecimal colors, you can go ahead and type that in. And as you can see I have put in a pale turquoise and then I can come to my background color and see what kind of background colors look good against that color. Remember I'm always looking for the contrast that we talked about earlier, trying to find something.

That will really show off what I'm doing. Here we go. So, I'm pretty happy with that. That gives me an idea how that looks. In the last one, I'll try another different type font. I'll try Trebuchet. I'll try making it a lot larger, 2 ems. I might give it some decoration of underline or overline like that. That's a little too much, but I'm just showing you can do that kind of thing in here. I can go into its alignment to make it justified if I want to. There are all kinds of things that I can try out.

And notice I have 1.2 em. So I can make this be much tighter by going to 1 em and bring that up. So, I can really play around as a designer and see what's going to work here, or I can go to something like 2 em and see that that's spacing that out. That's a little too much. Kind of a rule of thumb is maybe 25% larger. You'll have to just work with this a little bit and play around, but I think I'll try 1 em, maybe 1.2 em. So, I'm trying out different things and seeing how they look and I've taken three really common fonts that are web safe to see that.

And then I can look at them as Bold, as Italic, all the different versions of them, which is great, and I can see which one I prefer. If I'm happy with this one. Let's say I'm very happy with the Trebuchet, I can click on the third button here for the third column and it will generate for me the actual CSS styles. So I can just grab these like this, copy them and paste them right into the style sheet. So, this is a fantastic little tool and as you can see, I can spend quite a bit of time playing around with it.

There is also a lot of resources here and instructions and all kinds of things that you can use to help you with this. The next one is Font Tester. I like it for different reasons. It's not as maybe sexy and pretty as the Type Tester, but again it's got some really great features. First of all, if you don't know what the style attributes for fonts are, in Font Tester, if you look over here on the left, you have a lot of different attributes that you can change and these may be way more than what you'd ever, ever see inside of Dreamweaver in the Style Definition box.

It also lets you do two columns or three columns or one column. I like using the three columns because then you can set up different things, but probably my most favorite feature is that it has this character map and that makes it really great. So, if you don't know how to type these different weird characters, you can click on one of these strange characters in here like the Ampersand and then get its HTML equivalent right there, and when you click on HTML, you'll get the code for exactly what we see pictured up on our screen.

So there is a span style, which is a style that you can use just around one small typographic element. So, I'm going to go in here and look at that. I'm going to leave the first column as it is. Then I'm going to go into the second column and I can say I want the font-size to be on extra small, like that. I can say that I want the color to be ffffff here and then if I know my hexadecimal I can come right over here and type it in like that.

Again, you have these choices. Right now I have it justified but I'm going to try the left and that's more what I had in mind. I can come in here and adjust the line-height and here is your exact or absolute measurement. Here are your relational percentages, ems, also inches, centimeters, mms, points. Usually on the web you'll find that you'll use percentages or ems. So, I'm going to keep it at em, but I can adjust it. I think it's a little tight, I can make it 1.4. You can come in and also do your font-weight here.

And if you don't want Bold, you can go Normal and try that out. You can go in for a font-variant, which is small caps, which I just did, and you can continue on down trying all these different things out. Once you get it like you like it, you can even come in here and edit the text. Instead of Lorem I want to see my name, Laurie. I can see what that particular word is going to look like and now Laurie has been inserted in there. So, I have the ability to actually edit the text in here.

Again I'd like to see this one be aligned like this and you want to make sure that you are in the third column when you are working. Then I'll change my line-height a little bit here, 1.2 and then right here, I can change my font-size to small and try different things out. But be aware of what you are doing in each one. I am moving through, trying different things out, and hoping that that's going to work. Now, I'll select the word Laurie there and try changing its font-weight. And notice it doesn't just change the way for Laurie.

It changes the way for the whole paragraph. So you're really styling a whole paragraph. And that's okay because watch what happens. Once I get something I'm pretty happy with I can then go up here and get my CSS code and this is what's fabulous here. I can choose to have it be a style for the P tag, the HTML tag. I can choose to have it be a class selector, meaning I can use this class again and again throughout the webpage or I can come down here and see the code for an ID selector.

So, this is a really fantastic versioning. You get both the code and the styles here and you get the HTML and again, you can go in and edit this at any time if you want to. I can go ahead and insert my name, say 'Laurie is a Web Designer and Teacher,' so that I can see how that's going to look. Then I can click OK and you'll see that it will update back and forth. So, this is really a fantastic little tool to help you do all of the things that you want to do and help you have access to those character maps.

I use all three of these, but I think it's a great place to start when you are a beginner, or if you are uncomfortable with typography or never felt that you had the guts to use it correctly, or you've just always made safe decisions, this is a place where you can play around and generate the code after the fact. And I think that's really important for designers and people coming into the web design that they play and try things out. You'll have a great time making your online resume if you give yourself that freedom.

There are currently no FAQs about Creating an Online Resume: Hands-On Training.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Creating an Online Resume: Hands-On Training.

Return to your organization's learning portal to continue training, or close this page.


Course retiring soon

Creating an Online Resume: Hands-On Training will be retired from the library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked