Difference between revisions of "Courses/Browser as Canvas"

From Publication Station
 
(6 intermediate revisions by the same user not shown)
Line 2: Line 2:
Making a HTML page that looks more like a poster than a website - and giving students a basic introduction to HTML and CSS. These are the course main goals.
Making a HTML page that looks more like a poster than a website - and giving students a basic introduction to HTML and CSS. These are the course main goals.


The course does not require any previous HTML or CSS knowledge.
The course does not require any previous knowledge of HTML or CSS.
Note: this course was formerly known as ‘Making Web Posters’
Note: this course was formerly known as ‘Making Web Posters’


=Learning Achievements=
=Learning Achievements=
basic HTML/CSS skills, the CSS box model and how different browsers deal with that
* basic HTML/CSS skills, the CSS box model and how different browsers deal with that
how to accommodate a layout in various screen sizes and how to use typography on the web
* how to accommodate a layout in various screen sizes and how to use typography on the web


=Planning=
=Planning=
Line 13: Line 13:


==DAY 1==
==DAY 1==
Basic html elements: div, span
Basic html elements: div, span<br>
Colors: RGB model
Colors: RGB model<br>
Introduction to CSS: positioning, z-index, color, width, height, border, margin, padding, box-shadow, gradient, transform, border-radius, float
Introduction to CSS: positioning, z-index, color, width, height, border, margin, padding, box-shadow, gradient, transform, border-radius, float<br>
Practice
Practice


==DAY 2==
==DAY 2==
Web fonts: existing formats and ways to use it.
Web fonts: existing formats and ways to use it.<br>
Basic html elements: h1-h6, p
Basic html elements: h1-h6, p<br>
CSS: font-family, text-align, line-height, letter-spacing, text-shadow
CSS: font-family, text-align, line-height, letter-spacing, text-shadow<br>
Practice
Practice


==DAY 3==
==DAY 3==
Media queries.
Media queries.<br>
Practice
Practice



Latest revision as of 13:43, 24 June 2015

Overview

Making a HTML page that looks more like a poster than a website - and giving students a basic introduction to HTML and CSS. These are the course main goals.

The course does not require any previous knowledge of HTML or CSS. Note: this course was formerly known as ‘Making Web Posters’

Learning Achievements

  • basic HTML/CSS skills, the CSS box model and how different browsers deal with that
  • how to accommodate a layout in various screen sizes and how to use typography on the web

Planning

The course is divided into 3 lessons of 3 hours. After the theory is explained, there is time to practice.

DAY 1

Basic html elements: div, span
Colors: RGB model
Introduction to CSS: positioning, z-index, color, width, height, border, margin, padding, box-shadow, gradient, transform, border-radius, float
Practice

DAY 2

Web fonts: existing formats and ways to use it.
Basic html elements: h1-h6, p
CSS: font-family, text-align, line-height, letter-spacing, text-shadow
Practice

DAY 3

Media queries.
Practice


File:Browser canvas day2 (1).pdf