TÜRKÇE
ENGLISH
Information
| Unit | KARAİSALI VOCATIONAL SCHOOL |
| Code | BDT249 |
| Name | Web User Interface Design |
| Term | 2026-2027 Academic Year |
| Semester | 3. Semester |
| Duration (T+A) | 3-1 (T-A) (17 Week) |
| ECTS | 5 ECTS |
| National Credit | 3.5 National Credit |
| Teaching Language | Türkçe |
| Level | Ön Lisans Dersi |
| Type | Normal |
| Label | VK Vocational Knowledge Courses C Compulsory |
| Mode of study | Yüz Yüze Öğretim |
| Catalog Information Coordinator | Öğr. Gör. Alişan AKTAY |
| Course Instructor |
The current term course schedule has not been prepared yet.
|
Course Goal / Objective
Preparation of programs that run on the internet and development of website designs containing various applications. The course aims to enable students to create user-friendly interfaces using HTML and CSS.
Course Content
Basic internet concepts, introduction to web design, HTML tags and structure, styling and layout with CSS, principles of design and planning, use of HTML editors.
Course Precondition
There are no prerequisites for this course.
Resources
Lecture notes prepared by the instructor.
Notes
Lecture notes
Course Learning Outcomes
| Order | Course Learning Outcomes |
|---|---|
| LO01 | connecting to internet of computer. |
| LO02 | Make the best use of internet technologies |
| LO03 | Designing web page, site by using various web editors |
| LO04 | Designing web page, site at any subject |
| LO05 | Prepare the site using various package programs. |
Relation with Program Learning Outcome
| Order | Type | Program Learning Outcomes | Level |
|---|---|---|---|
| PLO01 | Bilgi - Kuramsal, Olgusal | Has sufficient theoretical knowledge in Computer Aided Design and Animation. | 2 |
| PLO02 | Bilgi - Kuramsal, Olgusal | Students will be able to use theoretical and practical knowledge gained in Computer Aided Design and Animation. | |
| PLO03 | Bilgi - Kuramsal, Olgusal | Performs necessary design and laboratory studies in Computer Aided Design and Animation. | |
| PLO04 | Bilgi - Kuramsal, Olgusal | Use office programs and professional computer programs. | 2 |
| PLO05 | Bilgi - Kuramsal, Olgusal | Knows the concepts of design and animation. Have knowledge about basic design and animation and make basic applications. | 3 |
| PLO06 | Yetkinlikler - Öğrenme Yetkinliği | Makes animations with basic animation methods | 2 |
| PLO07 | Yetkinlikler - Öğrenme Yetkinliği | Makes designs with two-dimensional design methods | |
| PLO08 | Yetkinlikler - Öğrenme Yetkinliği | Makes designs with three-dimensional design methods | |
| PLO09 | Bilgi - Kuramsal, Olgusal | can design Web pages. | 5 |
| PLO10 | Yetkinlikler - Öğrenme Yetkinliği | Using basic theoretical knowledge about Modeling Techniques in applied fields. | |
| PLO11 | Bilgi - Kuramsal, Olgusal | Have basic theoretical knowledge about Internet Technology and design dynamic web pages. | 4 |
| PLO12 | Bilgi - Kuramsal, Olgusal | Have basic theoretical knowledge about Image Processing Techniques and use practical knowledge. | |
| PLO13 | Yetkinlikler - Bağımsız Çalışabilme ve Sorumluluk Alabilme Yetkinliği | The organization acts in accordance with Business and Social Ethical Values, | |
| PLO14 | Yetkinlikler - Öğrenme Yetkinliği | Have the ability to analyze, interpret and evaluate information related to the field | |
| PLO15 | Beceriler - Bilişsel, Uygulamalı | Demonstrates Understanding of Continuity of Learning Requirement, | |
| PLO16 | Beceriler - Bilişsel, Uygulamalı | Possess theoretical and practical knowledge supported by textbooks with updated information, practice equipments and other resource on basic level based on qualifications gained at secondary education level. | |
| PLO17 | Bilgi - Kuramsal, Olgusal | Develop solutions to the problems encountered by using the basic knowledge and skills acquired in the field. | |
| PLO18 | Bilgi - Kuramsal, Olgusal | akes responsibility as a team member to solve complex unforeseen problems encountered in applications related to her field. | |
| PLO19 | Beceriler - Bilişsel, Uygulamalı | Direct your education to a further education level in the same field or a profession of the same level |
Week Plan
| Week | Topic | Preparation | Methods |
|---|---|---|---|
| 1 | The targets, aims of lesson and basic definitions, concepts | No preparation is required. | Öğretim Yöntemleri: Anlatım |
| 2 | Introduction to html web definitions and concepts | No preparation is required. | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Alıştırma ve Uygulama |
| 3 | introduction to html codes and the rules of html coding | No preparation is required. | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 4 | HtmL codes and simple web page designs | studying given applications and samples | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 5 | HTML codes and examples | studying given applications and samples | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 6 | Applications, designing web page | studying given applications and samples | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 7 | Forms, form compenents and properties | No preparation is required. | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 8 | Mid-Term Exam | Exam preparation | Ölçme Yöntemleri: Yazılı Sınav |
| 9 | Frame properties, HTML codes and examples | studying given applications and samples | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 10 | Web Site Program(editor) | No preparation is required. | Öğretim Yöntemleri: Anlatım |
| 11 | Introduction to CSS: Syntax, Selectors and Methods of Linking CSS to HTML (inline, internal, external) | studying given applications and samples | Öğretim Yöntemleri: Alıştırma ve Uygulama |
| 12 | Formatting Text, Fonts, Colors and Backgrounds with CSS | Studying the given applications and examples | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 13 | The CSS Box Model: Margin, Padding, Border and Display Properties | Studying the given applications and examples | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 14 | Building Modern Page Layouts with Flexbox and Grid | Studying the given applications and examples | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 15 | Responsive Design, Media Queries and Practice | Studying the given applications and examples | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama, Gösterip Yaptırma |
| 16 | Term Exams | Exam preparation | Ölçme Yöntemleri: Yazılı Sınav |
| 17 | Term Exams | Exam preparation | Ölçme Yöntemleri: Yazılı Sınav |
Student Workload - ECTS
| Works | Number | Time (Hour) | Workload (Hour) |
|---|---|---|---|
| Course Related Works | |||
| Class Time (Exam weeks are excluded) | 14 | 4 | 56 |
| Out of Class Study (Preliminary Work, Practice) | 14 | 4 | 56 |
| Assesment Related Works | |||
| Homeworks, Projects, Others | 1 | 2 | 2 |
| Mid-term Exams (Written, Oral, etc.) | 1 | 4 | 4 |
| Final Exam | 1 | 10 | 10 |
| Total Workload (Hour) | 128 | ||
| Total Workload / 25 (h) | 5,12 | ||
| ECTS | 5 ECTS | ||