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 4 | Mon. 12.30h - 14.30h| C2.209
Practical Group 5 | Tue. 8.30h - 10.00h | C2.309
Practical Group 6 | Tue. 10.30h - 12.00h | C2.209
Practical Group 3 | Wed. 12.30h - 14.30h| C2.209
Practical Group 2 | Wed. 14.30h - 15.45h| C2.209
Practical Group 1 | Wed. 16.00h- 17.30h| 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 guidline – the actual content may change during the semester.

WEEK TOPIC DESCRIPTION ASSIGNEMENTS/TASKS
1 Feb 10 - Feb 14 Introduction/Course overview Introduction to Web Design and Web Design planning Download Lecture-1
2 Feb 17 - Feb 21 Kickoff (HTML + CSS) HTML Tags:

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

Download Lecture-2
3 Feb 24 - Feb 28 More HTML Tags and CSS Elements (Start structuring and styling a web page) HTML Tags:

<header>, <section>, <aside>, <footer>, <menu><nav>, <form>, <input>

CSS-Elements:
background, color, text-decoration, font-size, font-family, font-weight, text-transform, margin, padding, text-shadow, overflow, float, height, line-height, display, border-radius, position, border

4 Mar 3 - Mar 7 Structuring and Styling Banner-Wrap HTML Tags:

<button>

CSS-Elements:

  • Clear, background: url, width, z-index
  • Introducing how css can reach the different html children
Download Lecture-3

Download
5 Mar 10 - Mar 14 Structuring and Styling The Main Section CSS-Elements:

background: linear-gradient, box-shadow

Download Lecture-4
6 Mar 17 - Mar 21 HTML + CSS -
7 Mar 24 - Mar 28 MIDTERM EXAMS -
8 Mar 31- Apr 4 Download
9 Apr 7 - Apr 11 Basic Java Script
Download
10 Apr 14 - Apr 18 Javascript & JQuery Understand how javascript works, how to embed a .js file and how to make it work using the example of a slideshow Download
11 Apr 21 - Apr 25 Javascript & JQuery - Download JQuery Examples
12 Apr 28 - May 2 Intro to Project - Download
13 May 5 - May 9 PROJECT Follow Up(:cell:) - -

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%