About the Site

Interactive Media Web is an undergraduate design elective course at OCAD University in Toronto, Canada. This website is for students who are actively participating in the course but it’s also for anyone that’s curious about the World Wide Web as a creative medium. Take a look around and leave your mark along the way!

About the Instructor

Peter Ha is a co-founder of Equal Parts Studio, a Toronto-based contemporary graphic design practice. Their process is founded on curiosity and finding the joy and playfulness in every project. Since 2021, he has been teaching design process, information design and interactive media at OCAD U.

Credits

Original syllabus by Ali S. Qadeer
Design and Development by Peter Ha
Built using Static Website Template by Vincent Will
Typeset in Inconsolata and Xanh Mono

Development Workflow

GitHub

Set up your GitHub account and add your Index homepage to your GitHub repository. Then link the repo to your GitHub Page so you can view in the browser.

Steps

GitHub Account and Repository

  1. Create GitHub account.
  2. Click on + button in top right corner.
  3. Click on new repository.
  4. Input repo name. Can be imw-2023 or whatever you like. Just make it's something related to the course.
  5. Check off 'Initialize this repository with README file'.
  6. Click on 'Create repository' button.

GitHub Desktop

  1. Download GitHub Desktop. Make sure you download the correct version for your computer.
  2. Move GitHub Desktop app from Downloads to your Applications folder.
  3. Launch GitHub Desktop.
  4. Click on 'Add'.
  5. Select 'Clone Repository...'
  6. Select the repo you just created.
  7. Choose a local path on your computer.
  8. Verify the repo is now on your computer by navigating to the folder. The folder should contain a README.md.

HTML Page

  1. Open a text editor and create an index.html file.
  2. Save the file in your cloned repo.
  3. Add content. Can be whatever you want for now. Suggestions: an empty page with comments in your HTML file with your plans for the homepage or it can be a welcome mesasage.

Back to GitHub Desktop

  1. Input commit summary. For example "Create homepage".
  2. Input commit description. For example "Start homepage structure for Index project".
  3. Click on 'Commit to main'.
  4. Click on 'Push origin'.

Link to GitHub Pages

  1. To setup your GitHub Page, go back to your repository that's on Github.
  2. Click on 'Settings'.
  3. On left hand side, scroll down and click on 'Pages'.
  4. Click on 'None'.
  5. Select 'Main'.
  6. Click on 'Save'.
  7. View your index file by going to https://[username].github.io/[repo-name]/. Replace username and repo-name with yours. Make sure to remove square brackets.

Terms

GitHub: An online platform to save and manage your code.

Repository: Another name for a folder. Also sometimes called a repo.

GitHub Page: A service by GitHub to link a repo to a URL.

GitHub Desktop: A desktop application that is a GUI (graphical user interface) of git. The interface makes it easier for your development workflow if you're not familiar with the command line.

Git: A command-line tool that version control and tracks your file changes.

Objective

To become comfortable with the use of code to create visual forms and to push the limits of CSS as a drawing medium.

← Domain Grid →