This three-session workshop combines the tactical skills needed to structure web pages with a looser more playful compositional mindset. Students are introduced to writing HTML and CSS through hands-on demos, in-class exercises and take-home assignments. Typographic markup and hierarchy establishes the basis for more abstract form making in week two. Week three incorporates interaction, introducing CSS3 transform, animation, and other user-controlled properties. The final assignment for week four will allow you to combine what you learned in the first three weeks.
Week one emphasizes the strategic and deliberate construction of space on a web page, working with content.
- Assignment 1: Semantically markup and style some text
- Continue with the in-class exercise to practice formatting content. Try to use semantic elements (
<section> <h1> <p> <em>) as appropriate.- Assignment 2: Create a multi-page website
- Create a website that consists of at least 3 different pages, linking them together with relative paths. You should use a single stylesheet for all your pages.
Week two encourages a different mindset, using code and the browser to discover designs as you make.
- Assignment 3: Shapes
- a)draw concrete objects using CSS shapes
- b)repeat abstract shapes to create a pattern
- Play with CSS properties, positioning, z-index, overflows to “draw” in the browser
- Assignment 4: Compose a web poster — use abstract shapes / grids
- Apply your understanding of “chunks” and sectioning to create a one-page layout with graphics and text. You may use Muller-Brockman posters as a guide, or one of your own.
Week three delves into designing with time, adding interactivity and motion.
- Assignment 5: Animate your web poster
- Play with CSS transitions and animations to incorporate motion into your poster
- Assignment 6 / Final: Combine your skills to make a responsive and interactive website
- Use Media Queries to adapt your website at different screen-widths
- Incorporate at least one user-triggered event using jQuery
Putting it all together
- From sketch to code
- Review examples
- Individual meetings
- Possible explorations
It is important to me that students from all diverse backgrounds and perspectives are well-served by this course, that students’ learning needs are addressed both in and out of class, and that the diversity students bring to this class are viewed as a resource, strength, and benefit. I strive to present materials and activities that challenge accepted canons and are respectful and representative of diversity: gender, sexual orientation, disability, age, socioeconomic status, ethnicity, race, culture, perspective, and other background characteristics. Your suggestions about how to improve the value of diversity in this course are always encouraged and appreciated. Please let me know how I might improve the effectiveness of the course for you personally or for other students or student groups.