ah teaches web design & development (The Utility Belt lecture)

The Utility Belt

Lecture outline

Approaches for debugging code and an introduction to git. Lecture slides will be made available on the day of the lecture (June 3).

P1: Process
A toy Batman utility belt

Meet your toolkit

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP Client

File Structure

Keep things clear

Things to ensure:

  • Use a descriptive naming convention: index.html, product-apple-detail.html
  • Avoid naming based on generics: page01.html, page02.html, page523.html
  • No spaces in file or folder names: use_underscores.html or use-dashes.html
  • Think categorically: logo-siat.jpg, instead of siat.jpg

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP client
  • Developer's tools + validators

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP client
  • Developer's tools + validators
  • Photo editor/compressor

Save for Web

Images should be sized and compressed appropriately for web distribution. Some suggested tools:

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP client
  • Developer's tools + validators
  • Photo editor/compressor
  • Git client
An illustration of the purpose and use of git for code versioning

This drawing is explained in detail the pre-recorded lecture

P2: Company

P2 Expectations

Solo edition

If working alone, please note:

  • Must use git.
  • Absolutely no HTML/CSS frameworks are permitted.
  • JavaScript libraries will be permitted with citations.

P2 Expectations

Team edition

If working on a team, please note:

  • Both team members must contribute code.
  • Both team members must use git.

Working as a Team

The horror, the HORROR!

Come to an agreement on:

  • Naming conventions
  • Work towards common code
  • Maintaining files
  • Both do the code

P2 teams

Teams for this project are optional. Please email Andrew or reach out on the course chat if you are interested in working as a team.

Next week's lecture

Devices and their Fickle Owners

Thinking about how users use websites, and more options for laying out your site. Pre-recorded lectures and slides will typically become available the day after the lecture.

1/1