Client side web programming


Learning CSS

Start by studying the CSS material on lecture material and/ or some other good source.


Study elementary CSS from the practice examples. Complete them as needed, if you are already familiar with basic, you can skip those parts.

Other sources

Learn more about CSS for example at the w3schools site
Because browser support for different features varies, remember to document which browsers did you use for testing. Add comments to the pages that tell what you have done and how it succeed.

An example of div-based HTML page by Ulla S. that has all style in CSS (images are not included).

There is an example of wireframing with HTML5 that uses the basic HTML5 structure and CSS for design.

Google Web Designer is a complete tool for HTML5 design.
Check also design templates by HTML5up.

Examples of possibilities offered by CSS at

The CSS validator is at

2. Structural elements and responsive design

Combine the basic HTML5 structure with CSS stylesheets. Design a page, such as the opening page for our campus library or cafeteria, that is nicely displayed on three different screen sizes: a large PC screen, on a tablet and on a smart phone. You have to decide which content is important for all and which content you can omit from smaller screens. Add comments to the pages that tell what you have done and how it succeed.


Created by: Jaana Holvikivi
Last update: 25.2.2015