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| D2.105
Practical Group 11 | Sun. 08.30h - 10.00h| D2.305
Practical Group 04 | Sun. 10.30h - 12.00h | D2.305
Practical Group 08 | Sun. 10.30h - 12.00h | D2.205
Practical Group 07 | Mon. 08.30h - 10.00h| D2.305
Practical Group 06 | Mon. 10.30h - 12.00h | D2.305
Practical Group 01 | Mon. 14.15h - 15.45h| D2.105
Practical Group 02 | Tue. 10.30h - 12.00h | D2.105
Practical Group 10 | Tue. 14.15h - 15.45h| D2.105
Practical Group 03 | Tue. 14.15h - 15.45h| D2.205
Practical Group 09 | Tue. 16.15h - 17.45h| D2.205


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 Feb 8 - Feb 12 Introduction/Course overview/Kickoff to HTML Introduction to Web Design and Web Design planning. Download Lecture1A
2 Feb 15 - Feb 19 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 Download Assignment1
3 Feb 22 - Feb 26 Structuring the aside / Kickoff to CSS CSS-Elements:

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

Download Lecture3b
4 Mar 1 - Mar 5 More HTML and Css elements CSS-Elements:

Link, hover, borders, dimensions, display, positioning, floating, ID, Class

Download Week4
5 Mar 8 - Mar 12 Structuring the main Section CSS-Elements:
  • Clear, background: url, width, z-index
  • Introducing how css can reach the different html children

background: linear-gradient, box-shadow, borders, margins, padding, floating

Download Week5
6 Mar 15 - Apr 19 <iframe>, <z-index>, child linking Download Week6
7 Mar 22 - Mar 26 - Midterm Evaluation Download Midterm
8 Mar 29 - Apr 2 JQuery Intro to JQuery

Understand how javascript works, how to embed a .js file and how to make it work using the example of a slideshow

9 Apr 5 - Apr 9 JQuery
10 Apr 12 - Apr 16 Intro to Project Design your Portfolio Download Assignment 2 Download QuestionFile
11 Apr 19 - Apr 23 Final Project Work on Final Download FINAL
12 Apr 26 - Apr 30 Final Project FINAL EVALUATION

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%