WEB DESIGN

Course CBD-402 | Remone Wahib , Sandra Michel?, Amina Shafik

Simplicity is when someone takes care of the details - Oliver Reichenstein

Practical Group 05 | Sun. 08.30h - 10.00h| D5.105
Practical Group 11 | Sun. 08.30h - 10.00h| D5.105
Practical Group 04 | Sun. 10.30h - 12.00h | D5.105
Practical Group 08 | Sun. 10.30h - 12.00h | D5.105
Practical Group 07 | Mon. 08.30h - 10.00h| D5.105
Practical Group 06 | Mon. 10.30h - 12.00h | D5.105
Practical Group 01 | Mon. 14.15h - 15.45h| D5.105
Practical Group 02 | Tue. 10.30h - 12.00h | D5.105
Practical Group 10 | Tue. 14.15h - 15.45h| D5.105
Practical Group 03 | Tue. 14.15h - 15.45h| D5.105
Practical Group 09 | Tue. 16.15h - 17.45h| D5.105


ANNOUNCEMENTS


Course Description

The course will tackle the technical principles and scripting basics of the Web. The students will get introduced and will work with the main Web-technologies: HTML 5, CSS 3 and Javascript.


KEYWORDS:

Web Design, HTML-5, CSS-3, Javascript


COURSE OUTLINE

The course starts with the basic understanding of HTML, followed by the principles of CSS. In between the students will learn how to design and to export in Adobe Photoshop for web. The course closes with an introduction in javascript.

This is a guideline – the actual content may change during the semester.

WEEK TOPIC DESCRIPTION ASSIGNEMENTS/TASKS
1 Week 1 Introduction/Course overview/Kickoff to HTML Introduction to Web Design and Web Design planning. Download Lecture 1
2 Week 2 HTML for Header Introduction to HTML Tags:

<header>, <section>, <aside>, <footer> , <nav>

,<!--...-->, <title>, <h1> to <h6>, <hgroup>, <ul>, <ol>, <li>, <figure>, <figcaption><img>, <a>, <p>

Download Lecture1B
3 Week 3 Structuring the aside / Kickoff to CSS CSS-Elements:

background, color, text-decoration, fonts, height, line-height, display, position, border, reset.css

Download Lecture 3
4 Week 4 More HTML and Css elements CSS-Elements:

ID, Class

Download Assignment 1
5 Week 5 Structuring the main Section CSS-Elements:

Clear, background: url, width, z-index Introducing how css can reach the different html children Link, hover, borders, dimensions, display, positioning, floating background: linear-gradient, box-shadow, borders, margins, padding, floating

6 Week 6 <iframe>, <z-index>, child linking Download Assignment 2
7 Week 7 Download Midterm
8 Week 8
9 Week 9
10 Week 10 Download Final
11 Week 11
12 Week 12

FINAL PROJECT:


LEARNING, OUTCOME, COMPETENCES

By the end of the course students will be able to understand how the core internet technologies work. They will be able to build a basic website, e.g. their own portfolio-site.


REFERENCE

Firebug is a glorious plugin for firefox, that helps to understand and to debug CSS, HTML and Javascript

CSS 3 info is good resource for CSS 3 questions - often with examples.

Dive Into HTML5 is a HTML guide book to be published by O’Reilly. The chapter ‘What Does It All Mean’ offers a clear explanation on the basics of HTML5 semantics/elements.

W3Schools provides you with a introduction and a reference list of all HTML 5 elements.

W3C's complete overview!

Works - a simple introduction into CSS3

O'REILLY's Designing Web Interfaces

O'REILLY's Designing Web Navigation

O'REILLY's HTML5: Up and Running


Weights:

Assignments: 20%, Midterm: 20%, Final: 60%