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. The basic structure of site should adhere to the conventions we’ve been working with in Exercises 5 and 6; that is, the content should all be wrapped inside a container which confines your content into a particular width.
Technical Requirements
- A header which contains your name, and a subhead that is a descriptor, such as Developer and Designer Extraordinairre
- A gallery of thumbnail images with absolutely positioned overlays which link to larger versions, at least 9.
- At least 2 sets of major columns
- At least 2 lists of the same type (ul) that are of a distinctly different style, with at least 5 items in each list that isn’t the navigation.
- 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. (This could show your strength within each technology.) - A tiled background image in the <body> element (page background)
- Add a box-shadow to the wrapper, so it casts a shadow on the body. (Look this up.)
- Add border-radius to something to add 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)
Here is an example of how you might arrange the items to include all requirements:
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
Create your layout…not just a framework, but a full layout with all 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. Turn this in by the end of class the class day after assignment.
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 Drive by end of class on the due date.
Hints
- Use padding and content to establish height, not the height property.
- Use classes on areas which repeatedly use the same structure.
- Don’t forget to offset browser defaults on headings, paragraphs, and lists.