In this class…
- FTP login – Each of you will get an FTP username & password to access your own file on the server
- Background images & favicons (from missed class last week)
- Brief review of assignment
- Semantic markup
- Simple CSS
- Cascading Style Sheets
[icon size=”tiny” image=”icon-cloud-download”] Download basic HTML5 page boilerplate.html
[icon size=”tiny” image=”icon-cloud-download”] Download Simple CSS
Homework
[icon size=”tiny” image=”icon-play-circle”] Video playlist on YouTube
- Watch videos 17-20 in preparation for next class.
Alter Ego House Museum: Part II – CSS
Pretend that you are the biographer of a very famous, very dead person. Pretend also that this famous person is you, or at least a version of you in an alternate universe. You will be creating a website to showcase the strange, amazing, exotic erstwhile home of your illustrious, dearly departed alter ego. The home is like a museum, in just the same state as it was left when the infamous inhabitant met with his/her untimely demise. Use this website to tell interested visitors about the fascinating life your alter ego led, through the intimate details of the personal space they left behind. Creativity will be rewarded!
Process
Revise your website by adding a CSS file called “user.css”. Define at least one class and at least one id. Apply your stylesheet to all 5 pages. Using styles that you create, define the following CSS attributes:
- font Define a family of fonts for your site and define a font-size and color. Extra brownie points if you can combine these three attributes into one style.
- text-align Define a style to change the alignment of your text from left-justified to something else
- background Add a background image style
- border Add a border, using border-style, border-color and border-thickness. Extra brownie points if you can combine these three attributes into one style.
Specifications
index.html:
- Four hyperlinks to sub-pages
- Minimum of 3 small photos that represent the content of the site. Each photo size: approx. 250px by 200px and sized appropriately for web use.
- Images must appear in a separate folder called “images”
Four topics pages:
- Each file must be named meaningfully. Remember to not use upper case when you name your files.
- Each page must be titled meaningfully.
- Each page must have a link back to index.html
- Each page must have at least one image.
- Each page must have at least one paragraph of copy describing the photo(s).
You’ll be able to complete this part of the assignment using only those techniques that have been presented up to this point in the course. Your website will get more complex — and considerably more attractive — as we progress in the course.
Assessment*
This assignment is worth 10% of the final grade.
- 5 points will be based on a lack of HTML and CSS errors.
- The remaining 5 points are based on the amount and quality of additional mojo.
Assignment is due in your folder on the server by email to the instructor at cleblanc@nscad.ca at 9:00 am on Wednesday, Feb. 5.
Late assignments will not be accepted. If you do not have it uploaded by the deadline, you will lose the marks for this assignment.
*Be ready to present your work briefly to the class next week.
