SILS iSchool

17 September 2020

preps | using a template | other editors | one editor | using images | design thoughts | accessible design



Value Added | daily

Class Schedule

Basics | sessions 01-03
  1. 13 Aug intro and clients | lecture | labs
  2. 20 Aug servers and command line | lecture | labs
  3. 27 Aug networks and protocols | lecture | labs
Web Development | sessions 04-07

  1. 03 Sep structural layer | lecture | labs
  2. 10 Sep presentational layer | lecture | labs
  3. 17 Sep using a structure | lecture | labs
  4. 24 Sep behavioral layer | lecture | labs
Dealing with Markup | sessions 08-09
  1. 01 Oct control objects and display | lecture | labs
  2. 08 Oct tools that read markup | lecture | labs
Working with Data | sessions 10-13
  1. 15 Oct formulas, functions, vectors | lecture | labs
  2. 22 Oct data display | lecture | labs
  3. 29 Oct manipulate data sets | lecture | labs
  4. 05 Nov relational data bases | lecture | labs
Presentation | session 14
  1. 12 Nov designing and delivering a presentation | lecture | labs


Other items relevant to today's class

  1. Top 10 Major Advantages of HTML5
  2. There’s now a free font based on Climate Strike hero Greta Thunberg’s handwriting
  3. What’s in a Font? How Fonts Can Define Your Design
  4. Should you use a template?

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

home & schedule | syllabus | contact | grades
Link your original page to an external stylesheet,
then look at some templates,
their presentational rules, and their structural objects.

First, do your Task 02.02

finish Task 02.02 | link to CSS by applying some CSS rules to your hard coded page

Then, find an HTML/CSS template you like:

There are many template resources (these are just a sample of what you might find):
You can take a glance at ...

CSSZenGarden, a place where one can obtain free CSS stylesheets.

The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.

CSS Trappist Monastery - built on same model as CSS Zen Garden

These latter two are interesting to look at, but we would recommend you use the other resources if you wish to use a template.

back to top

To prepare yourselves for the template session

think about your editor options

There are many free editors, beyond the text editors we have been using
However, sticking with the text editor you have become familiar with is still a good option.

This video discusses using one web editor to work with a template, but you can do the same with your text editor and your browser.

back to top

To prepare for the images & design topics

For the design component, think first about accessibility by looking over Introduction to Web Accessibility by the W3C W3C accessitility logo

Web Style Guide

And then, in the Web Style Guide by Patrick Lynch and Sarah Horton glance over Chapter 4, Interface Design

And then, think about design in the larger sense, how good design helps us do what we need to do, and poor design hinders us. Think about it while planning your site.

back to top

17 September lecture | preps | templates | free editors | one editor | images | thoughts | accessiblity