Exercise 3: Cascading Style Sheets and A bit of JavaScript

The aims of this lab are:

• Start laying out your project web page
• formatting and layout your website with CSS,
• try out CSS3 borders and
• getting to know JavaScript through Node.js.

Start working on your Project layout

Decide on the key pages of your site, design the layout and navigation flow.

You can scatch this on a piece of paper first and feel free to consult with your lab facilitator.

Use HTML5 form elements to collect user information, such as first name, nick name, surname, telephone, skill sets, email address and etc.

User HTML5 form to collect task related information, task name, descriptions, required skill sets, deadline, completion status and etc.

Styling your Website

Return to the personal site you created in the last couple of labs. You can now use CSS to style the page according to your tastes. You should do this by a mixture of inline, document-level and external style sheet. Make good judgement on what type of style rules to use. For example, layout styles should be external, page-specific fonts and color scheme should be at document-level, while a form control that requires special attention should be using the inline style attribute. Practise with the various types of selectors, for example, element, group, contextual, class, id as well as pseudo selectors. Be sure to validate your CSS in addition to your HTML.

Getting started with JavaScript

Work through the W3Schools Javascript tutorial. There is a lot there, and you can skip some sections, but you should do most of the exercises up to the Forms topic. You should also come back to this tutorial as we go through the semester as the later section will help with some of our more advanced material.