Objective

To review basic HTML and CSS skills by building a personal Process Page. To review responsive web development techniques by creating a page similar to this example.

Discussion

Keeping a good record of your design process is a good idea for many reasons. At the very least, it forces you to keep your files organized. Clients also expect you to manage the project well and one way to do it is by recording each step of the process. Last but not least, one can learn from observing one's own process and then improving on it in future projects.

Note: The Skeleton Responsive Framework is a lean alternative to Bootstrap which also uses the new rem unit for font sizing.

Tip: Do not delete any links that you add to your Process Page. Instead, always add new links when making revisions.

Procedure

Overview: Merge existing HTML page with downloaded Skeleton Responsive Framework. Add additional CSS styles. Replace sample wordmark with a personal wordmark. Note: replace bold with personalized info.

Prepping for the exercise

1. download starter files (location: faa999/gds293)
2. download skeleton framework
3. move download files into "gds293/html" folder
4. launch Dreamweaver
5. site > new site: site name=gds293;
   local site folder=faa999/gds293/html)
6. open "content.html"
7. view > code and design
8. change "jane smith" to your name (search source code, replace all)
9. add email link to your name (ie. "mailto:jsmith@gmail.com")
10. open "index.html"
11. copy/paste content into <div.one-half>

Formatting the content

1. select <div.one-half>: class="twelve columns" (code view)
2. remove inline: style="margin-top: 25%" (line 36)
3. insert > image: "exercises/jane.gif" (inside <div.twelve.columns>
4. repair code: https://fonts.googleapis.com/css?family=Raleway (line 18)
5. swap out Raleway font for Open Sans: css?family=Open+Sans:400,400italic,700,700italic
6. change document title to "Jane Smith Graphic Designer"

Adding CSS styles

1. window > CSS designer: add source: define in page (+)
2. window > CSS designer: add selectors: 
   • a: text: decoration=none, color=?? 
   • a:hover: decoration=underline
   • p: margin-bottom=1rem
   • ul: padding-left=2rem
   • li: margin-bottom=0
   • h4: margin-top=6rem
   • .container: margin-top/bottom=20px
   • body: font-family="Open Sans", Helvetica, Arial, sans-serif
   
3. file > preview in browser (opt+F12 and cmd+F12)

Grading

1. replace "jane.gif" with your own custom wordmark
2. publish your site (see separate instructions)
3. keep this page updated with your work as the semester progresses