Difference between revisions of "Courses/Browser as Canvas"

From Publication Station
(Created page with "File:Browser canvas day2 (1).pdf")
 
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
=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<br>
Colors: RGB model<br>
Introduction to CSS: positioning, z-index, color, width, height, border, margin, padding, box-shadow, gradient, transform, border-radius, float<br>
Practice
==DAY 2==
Web fonts: existing formats and ways to use it.<br>
Basic html elements: h1-h6, p<br>
CSS: font-family, text-align, line-height, letter-spacing, text-shadow<br>
Practice
==DAY 3==
Media queries.<br>
Practice
[[File:Browser canvas day2 (1).pdf]]
[[File:Browser canvas day2 (1).pdf]]

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