WEB DESIGN

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

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

Practical Group 05 | Sun. 08.30h - 10.00h| D5.102
Practical Group 11 | Sun. 14.15h - 15.45h| D5.102
Practical Group 04 | Sun. 10.30h - 12.00h | D5.102
Practical Group 08 | Sun. 12.30h - 2.00h | D5.102
Practical Group 07 | Mon. 08.30h - 10.00h| D5.102
Practical Group 06 | Mon. 10.30h - 12.00h | D5.102
Practical Group 02 | Tue. 10.30h - 12.00h| D5.102
Practical Group 03 | Tue. 10.30h - 12.00h | D5.102
Practical Group 10 | Tue. 12.30h - 14.00h| D5.102
Practical Group 01 | Tue. 12.30h - 14.00h| D5.102
Practical Group 09 | Tue. 14.15h - 15.45h| D5.102


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
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 2 Download Assignment 1
4 Week 4 More HTML and Css elements CSS-Elements:

ID, Class

Download
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

Download Lecture 3
6 Week 6 Midterm
Download MIDTERM Download Reset.css File
7 Week 7 Download
8 Week 8
9 Week 9
10 Week 10 Download
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%