Show: All students | Group 1 | Group 2

Assignments

1. 2025-01-15 Class session resources
- Description
  
  These are resources we'll use during the class session. Note that some resources below occasionally refer to 'Spring 2022' or other semesters... but it's Fall 2025 now, and you should adjust folder/file/path names accordingly!
- References
2. Hello World
- Description
  
  Create a Hello World HTML page and upload to GitHub Pages.
- Local Path
  
  /iffall2025/publish/hello/index.html
- Server Path
  
  hello/index.html
- Assigned
  
  Jan 15
- Due
  
  Jan 15 (in class)
- References
  - Video: Hello World (19:32)
3. Introductory questions
- Description
  Answer the following questions, with your answers formatted as an ordered list in an HTML document that you upload to the server. Make sure you use the folder and file name specified below.
  1. Provide your name, major, year in school (sophomore, junior, etc).
  2. Tell us a bit about your background and what prompted you to take this class.
  3. Do you have any experience with HTML/CSS/JS? If so, tell us a bit about it.
  4. Name one thing you hope to learn in this class.
  5. Name one way you expect designing for screen to be different from designing for paper.
  6. Provide a link to a website you think exemplifies effective design. Explain your choice.
  7. Provide a link to a website you think exemplifies effective communication. Explain your choice.
  8. Provide a link to a website you think works well. Explain your choice.
- Local Path
  
  /iffall2025/publish/intro-questions/index.html
- Server Path
  
  intro-questions/index.html
- Assigned
  
  Jan 15
- Due
  
  Jan 21
- References
4. 2025-01-22 Class session and resources
- Description
  
  These are resources we'll use during the class session. We'll be covering the basic structure and intent of HTML and CSS.
- References
5. Markup and style the quotes
- Description
  
  Use appropriate HTML markup to provide semantic structure for the quotes referenced below, then use CSS to style the document in a way that is appropriate to the content.
- Local Path
  
  /iffall2025/publish/movie-quotes/index.html
- Server Path
  
  movie-quotes/index.html
- Assigned
  
  Jan 22
- Due
  
  Jan 28
- References
6. Create your own lyric sheet
- Description
  
  Pick a song you like, and create a styled HTML document that presents it's lyrics with appropriate markup and basic styling.
- Local Path
  
  /iffall2025/publish/lyrics-exercise/index.html
- Server Path
  
  lyrics-exercise/index.html
- Assigned
  
  Jan 22
- Due
  
  Jan 28
- References
7. 2025-01-29 Class session lesson and exercise
- Description
  
  Using the starter page to follow along with the recorded video lessons. When you've updated your version of the starter document with all of the changes discussed in the videos, upload as described below. Be sure to include your css file!
- Local Path
  
  /iffall2025/publish/markup-and-styles-for-type/index.html
- Server Path
  
  markup-and-styles-for-type/index.html
- Assigned
  
  Jan 29
- Due
  
  Feb 4
- References
8. Build a type styling demonstration page
- Description
  
  Create an html page demonstrating basic type styling using one of the font faces referenced below. Clearly indicate the typeface name and size in a summary at the top of the page, then demonstrate possible values for each of the following five CSS properties with a sample sentence: font-weight, font-style, letter-spacing, text-transform, text-decoration. Place each sample on its own line. Include a label for the group that shows which css property the group demonstrates. Include a label for each line that shows which value is used. Style the whole page to present your samples cleanly and clearly.
- Local Path
  
  /iffall2025/publish/type-styles/index.html
- Server Path
  
  type-styles/index.html
- Assigned
  
  Jan 29
- Due
  
  Feb 4
- References
9. Recipe page - research
- Description
  Over the next few weeks, you will be designing and building a web page that presents a recipe. We'll start that project by finding/choosing a recipe, and doing some design research. This week, you will upload an HTML document that presents the following:
  - The recipe content (at minimum, this includes title, description, ingredients, instructions, source attribution)
  - Sample imagery (this may or may not be actual images from your recipe source, it might instead be samples of photos/illustrations representing the type of images you intend to use)
  - Three links to recipe websites you have found, with a short (2-3 sentences) written review/critique for each, explaining what makes this site a good reference
  - Three links to non-recipe websites with stylistic or communication techniques that might inform your own design, also with a short written rationale
- Local Path
  
  /iffall2025/publish/recipe/research/index.html
- Server Path
  
  recipe/research/index.html
- Assigned
  
  Jan 29
- Due
  
  Feb 4
10. 2025-02-05 Class session and exercise
- Description
  
  The CSS Diner exercise below is a fun and effective way to learn about more complex CSS selectors. Work your way through the set of challenges in the CSS Diner link below.
  Then, walk through the short lesson on pseudo-classes and pseudo-elements.
- References
11. Complex selectors challenge
- Description
  
  Copy and paste the Starter Page (below) into a new html document called index.html. Create a new stylesheet called styles.css. Without modifying the html in any way, work your way through the challenges described on the side of the page.
- Local Path
  
  /iffall2025/publish/complex-selectors-challenge/index.html
- Server Path
  
  complex-selectors-challenge/index.html
- Assigned
  
  Feb 5
- Due
  
  Feb 11
- References
  - Starter page: Complex selector challenge
12. Using images
- Description
  
  Copy the starter file below, and read/work your way through it, following instructions to create and style images. When complete, upload the exercise, including your css and images folders, as noted below.
- Local Path
  
  /iffall2025/publish/exercises/using-images/index.html
- Server Path
  
  exercises/using-images/index.html
- Assigned
  
  Feb 5
- Due
  
  Feb 11
- References
13. The HTML Box Model
- Description
  
  Copy the starter file below, and read/work your way through it, following instructions to learn about the HTML Box Model. When complete, upload the exercise, including your css folder, as noted below.
- Local Path
  
  /iffall2025/publish/exercises/box-model/index.html
- Server Path
  
  exercises/box-model/index.html
- Assigned
  
  Feb 5
- Due
  
  Feb 11
- References
  - Starter file - HTML Box Model
14. 2025-02-12 Class session
- Description
  
  The class session.
- References
15. Floated elements
- Description
  
  Copy the starter file below, and read/work your way through it, following instructions to learn about Floats. When complete, upload the exercise, including your css folder, as noted below.
- Local Path
  
  /iffall2025/publish/exercises/floats/index.html
- Server Path
  
  exercises/floats/index.html
- Assigned
  
  Feb 12
- Due
  
  Feb 18
- References
  - Starter file - Floats
16. Building grids
- Description
  
  Copy the starter file below, and read/work your way through it, following instructions to learn about building grids. When complete, upload the exercise, including your css folder, as noted below.
- Local Path
  
  /iffall2025/publish/exercises/grids/index.html
- Server Path
  
  exercises/grids/index.html
- Assigned
  
  Feb 12
- Due
  
  Feb 18
- References
  - Starter file - Grids
  - An excellent css grid tutorial/game, like the CSS Diner
17. Recipe page - content collection
- Description
  
  Based on your peer evaluations, consider what content you may still need to collect for your recipe, and or what needs to be clarified in your research. Post a final research and content-collection document as HTML. This is probably a revised version of your previous research document (but note the new folder location). Include images if they exist – if you are creating your own images, you'll have an extra week to complete them. Also, include a link to your research evaluation google doc.
- Local Path
  
  /iffall2025/publish/recipe/content/index.html
- Server Path
  
  recipe/content/index.html
- Assigned
  
  Feb 12
- Due
  
  Feb 18
18. Recipe page - low-fidelity prototypes
- Description
  
  Based on your research and the presentation in class, you should be ready to create three sets of low-fidelity prototypes for your recipe page. The objective is to experiment with the visual arrangement of elements in a fast, low-commitment way. You probably have a picture in your mind of what a recipe 'should' look like. Sketch that, but then set it aside, acknowledge that your first solution might not be the best one, and take a run at it from a different perspective!
  At minimum, each set should include a portrait-oriented mobile view and a landscape-oriented laptop-view. Don't 'crop' the sketches at the bottom of the device, sketch the full layout. You don't need to spell out words, but if it's not obvious what a box or mark represents, label it!
  Deliver your sketches as images collected and presented on a single HTML page, organized and labeled appropriately.
- Local Path
  
  /iffall2025/publish/recipe/lowfi-prototypes/index.html
- Server Path
  
  recipe/lowfi-prototypes/index.html
- Assigned
  
  Feb 12
- Due
  
  Feb 18
- References
  - Presentation: Prototyping (focus on pages 15-19 on low-fidelity prototypes)

Communication Design:

Interaction Foundations

Spring 2025

Sam Fox School of Design & Visual Arts
Washington University

Assignments

1. 2025-01-15 Class session resources

2. Hello World

3. Introductory questions

4. 2025-01-22 Class session and resources

5. Markup and style the quotes

6. Create your own lyric sheet

7. 2025-01-29 Class session lesson and exercise

8. Build a type styling demonstration page

9. Recipe page - research

10. 2025-02-05 Class session and exercise

11. Complex selectors challenge

12. Using images

13. The HTML Box Model

14. 2025-02-12 Class session

15. Floated elements

16. Building grids

17. Recipe page - content collection

18. Recipe page - low-fidelity prototypes