WEB DESIGN (1 Slot)

Course CBD-402 | Jochen Braun , Hala Gabr , Remone Wahib

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

Practical Group 1 | Sun. 8.30h - 10.00h| C2.209
Practical Group 7 | Sun. 14.15h - 3.45h | C2.209
Practical Group 5 | Mon. 10.30h - 12.00h | C2.209
Practical Group 4 | Tues. 16.00h - 17.30h| C2.209
Practical Group 8 | Wed. 10.30h - 12.30h| C2.309
Practical Group 6 | Thurs. 8.30h- 10.00h| C2.209
Practical Group 3 | Thurs. 10.30h- 12.00h| C2.209
Practical Group 2 | Thurs. 14.15h- 3.45h| C2.209


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 23 - Feb 27 Introduction/Course overview/Kickoff to HTML Introduction to Web Design and Web Design planning. Download Lecture-1

Download Assignment-1

2 Mar 2 - Mar 6 HTML for Header HTML Tags:

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

Download Assignment-2
3 Mar 9 - Mar 13 Structuring the aside / Kickoff to CSS HTML Tags:

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

CSS-Elements:
background, color, text-decoration, fonts, height, line-height, display, position, border

4 Mar 16 - Mar 20 More HTML and Css elements HTML Tags:

<button> , <menu>, <form>, <input>, <div>, <article>

CSS-Elements: margin, padding, float, overflow

Download Assignment-3
5 Mar 23 - Mar 27 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

Download Assignment-4
6 Mar 30 - Apr 3 Styling the main section Download Midterm Project


Lecture-2
Lecture-3
Lecture-4 (Reset.css)

7 Apr 6 - Apr 10 MIDTERM EVALUATIONS -
8 Apr 13 - Apr 17 More HTML and CSS elements HTML Tags:

<input> , <iframe> CSS-Elements:
first-child, nth-child

Download
9 Apr 20 - Apr 24 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
Download JQuery Examples
10 Apr 27 - May 1 More about JQuery Download
11 May 4 - May 8 Into to Project Design your Portfolio Download Assignment-5
12 May 11 - May 15 Final project consultations and feedback Download Final-Project
13 May 18 - May 22 Final Submission and Evaluations -

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.

Processing.js gives us a way to include processing projects easily in webpages - same principle as jquery etc - have a look.

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%