ah teaches web design and development: 04 Meet Your Toolkit

ah teaches web design and development: 04 Meet Your Toolkit — A slide deck

Meet Your Toolkit

Lecture outline

Covered this week:

  • Debugging and troubleshooting code
  • Git
  • P02 introduction

Lecture slides will be made available on the day of the lecture.

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:

P2: Company

P02 Expectations

Please note:

  • Both team members must contribute code.
  • Both team members must use git.
  • Absolutely no HTML/CSS frameworks are permitted.
  • Javascript libraries will be permitted with citations.

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

Dev Environment

Adding to the toolkit

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

Enter Git

Your friend in code tracking

* Andrew does some doodling here... *

Break-time

Runaway! Runaway...

See you in ten minutes. If you haven't already:

  1. GitKraken (Mac/PC)
  2. Sign-in to GitLab

P2

Commence the coding!

There are three items for this week for you to do. Please note the one that comes first...

  1. Setting up your dev environment
  2. Brand component coding

This week's labs

The low-down

  • More on Git
  • P02 Introduction

Next week

Devices and Their Fickle Owners

  • Reading Quiz
  • More on responsive vs adaptive
  • CSS positioning/responsive images

Quiz

Things to note

  • You will have 30 minutes
  • It will be open book, but not open laptop
  • It will use any readings/lectures upto and including next week's
  • There will be 1-3 short answer questions.

Next reading

"Introduction / Responsible Design" from Responsible Responsive Design by Scott Jehl

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1