Difference between revisions of "Courses/Browser as Canvas"
Lucia Dossin (talk | contribs) |
Lucia Dossin (talk | contribs) |
||
| (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 | 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 | |||
* 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
