CIS 450 Project #2 - Design with CSS/JavaScript Features
- Goals/Tasks of the Project
- Design and implement a few related pages with a consistent style using an external style sheet.
- Add a relevant animation to a page using a method of your choice.
- Use CSS and/or JavaScript features. Apply basic web design principles. JavaScript is optional for this project.
- Web Design Practices
- Review basic web design principles from project #1.
- Fixed webpage layout does not change when resized. Fluid (or flexible/responsive) layout adjusts sizes for different devices.
- Test sites on different browsers. Note HTML and CSS, as well as browser supports for features, are evolving.
- Design with CSS
- Use Cascading Style Sheets (CSS) to separate design from contents. Procedure. Create → Comment → Link → Validate.
- Use external CSS. Use internal/embedded CSS for a page different from others. Use inline style="property:value" sparingly.
- Design a CSS structure to give the website/subgroups a consistent look and feel.
- Style in the order of elements → classes → elements with unique "id"s. Use descriptive and consistent names for classes and unique elements.
- Try to avoid style conflicts. If there is any, the last style rule wins for the same element.
- Have an overall picture of style inheritance. Child styles override parent styles no matter the order of style rules.
- Relevant Web Design and HTML/CSS/JavaScript Features/Guidelines
- Use HTML semantic/structural elements and div to define containers/placeholders to prepare templates/webpages for CSS styles.
- In addition to demonstration, send your source file(s) as the email body or email attachments to zwang@shepherd.edu by 11pm on 2/7. No resoure files such as video or audio files are needed. Please write CIS 450 and team member name(s) on the subject line of your email.