Close

HTML Resume Old

Due: 2019-02-19

Web development skills, as valuable as they are, should be considered a means to an end for a graphic designer. Your goal is to communicate, just as with any design project; so the goal of learning HTML and CSS is to speak the language of web pages, understand and control its output, and thereby communicate more effectively through the medium.

Objective

You will be editing and building an HTML resume. You will build a design that is provided to you, according to the specs provided. You should make alterations to the color scheme and typography to make it your own, but the structure of the page must remain intact. Where there is a vertical or horizontal gradient, for example, there must remain one, though you may change the colors of the gradient.

I want you to use the layout provided as a basic template. But I want you to make the designer your own. You can re-organize where elements are, and you can and should change the fonts, colors and imagery. You must create your own graph, and it should be more complicated than the one in the layout provided.

Technical Requirements

  • At least 2 sets of floated major columns
  • At least 3 lists of the same type (ul) that are of a distinctly different style
  • Use of repeating background image in <body>
  • At least 3 levels of headings, used logically
  • 1 image of yourself or something that represents you
  • A section/paragraph with your working philosophy or outlook
  • Use of borders
  • 1 graph or visual representation of information, matching your color scheme.
    Create this yourself.
  • A tiled background image in the body element (page background)
  • No usage of inline-block or table cell display is allowed. You are to use floats.
    (Even for the contact information area, you will use four sets of miniature floated columns.)
  • Add a box-shadow to the wrapper, so it casts a shadow on the body. (Look this up.)
  • Add border-radius to the boxes which have rounded corners. (Look this up.)
  • Use CSS gradients for those that exist on the page. (Look this up: https://www.w3schools.com/csS/css3_gradients.asp)

Grading Considerations

Design
(If you stick close to the specs, you should be fine here.)

  • Use of visual hierarchy and corresponding HTML methods to achieve this
  • Readability and engagement level through a well-designed layout
  • Color usage: colors should work in harmony with one another

Coding

  • Use of semantically appropriate markup
  • Valid, properly formatted HTML
  • Lean, logical use of CSS rules
  • Accuracy of your html version versus your Illustrator layout

Instructions

Step 1

Make any edits required to the layout and stylistic edits you’d like to make. Create a layer that indicates the framework you plan to use to build your layout to ensure you’re taking a good approach.

Step 2

Begin building your HTML/CSS layout. You may not be able to do everything immediately; if you run into something you can’t get working, close off that area and keep moving.

Step 3

When your html is finished, save all your files (using the html/css/images structure we’ve been using) in a folder labeled [lastname_firstinitial_project1] and place it in the drop box by end of class on the due date.

Hints

Syllabus Archived Projects

Projects

Announcements