TÜRKÇE
ENGLISH
Information
| Unit | FACULTY OF SCIENCE AND LETTERS |
| COMPUTER SCIENCES PR. | |
| Code | BBZ301 |
| Name | Web Design and Programming I |
| Term | 2025-2026 Academic Year |
| Semester | 5. Semester |
| Duration (T+A) | 2-2 (T-A) (17 Week) |
| ECTS | 5 ECTS |
| National Credit | 3 National Credit |
| Teaching Language | Türkçe |
| Level | Belirsiz |
| Type | Normal |
| Label | C Compulsory |
| Mode of study | Yüz Yüze Öğretim |
| Catalog Information Coordinator | Dr. Öğr. Üyesi Cevher ÖZDEN |
| Course Instructor |
The current term course schedule has not been prepared yet.
|
Course Goal / Objective
The aim of this course is to teach students the basic principles of web page design and programming, To gain practical knowledge in HTML, CSS and basic JavaScript, to gain competence in developing dynamic and accessible web interfaces.
Course Content
This course aims to familiarize students with basic web technologies and develop skills to develop dynamic and user-friendly web pages using HTML, CSS and basic JavaScript. Web page design, basic user experience principles, responsive design and basic client-side programming are covered in the course.
Course Precondition
None
Resources
Jon Duckett, HTML and CSS: Design and Build Websites, Wiley, 2011. Jon Duckett, JavaScript and jQuery: Interactive Front-End Web Development, Wiley, 2014.
Notes
Mozilla Developer Network (MDN) Web Docs W3Schools Online Tutorials Bootstrap Official Documentation
Course Learning Outcomes
| Order | Course Learning Outcomes |
|---|---|
| LO01 | Design a structured web page using HTML tags |
| LO02 | Defines the basic components of web technologies |
| LO03 | Creates different visual design templates by formatting pages with CSS |
| LO04 | Develop basic dynamic features for user interactions using the JavaScript language |
| LO05 | Develops web interfaces compatible with multiple devices in accordance with responsive design principles |
Relation with Program Learning Outcome
| Order | Type | Program Learning Outcomes | Level |
|---|---|---|---|
| PLO01 | Bilgi - Kuramsal, Olgusal | Gain comprehensive knowledge of fundamental concepts, algorithms, and data structures in Computer Science. | |
| PLO02 | Bilgi - Kuramsal, Olgusal | Learn essential computer topics such as software development, programming languages, and database management | |
| PLO03 | Bilgi - Kuramsal, Olgusal | Understand advanced computer fields like data science, artificial intelligence, and machine learning. | |
| PLO04 | Bilgi - Kuramsal, Olgusal | Acquire knowledge of topics like computer networks, cybersecurity, and database design. | |
| PLO05 | Beceriler - Bilişsel, Uygulamalı | Develop skills in designing, implementing, and analyzing algorithms | 5 |
| PLO06 | Beceriler - Bilişsel, Uygulamalı | Gain proficiency in using various programming languages effectively | 5 |
| PLO07 | Beceriler - Bilişsel, Uygulamalı | Learn skills in data analysis, database management, and processing large datasets. | |
| PLO08 | Beceriler - Bilişsel, Uygulamalı | Acquire practical experience through working on software development projects. | 4 |
| PLO09 | Yetkinlikler - Bağımsız Çalışabilme ve Sorumluluk Alabilme Yetkinliği | Strengthen teamwork and communication skills. | 5 |
| PLO10 | Yetkinlikler - Alana Özgü Yetkinlik | Foster a mindset open to technological innovations. | |
| PLO11 | Yetkinlikler - Öğrenme Yetkinliği | Encourage the capacity for continuous learning and self-improvement. | |
| PLO12 | Yetkinlikler - İletişim ve Sosyal Yetkinlik | Enhance the ability to solve complex problems |
Week Plan
| Week | Topic | Preparation | Methods |
|---|---|---|---|
| 1 | Introduction to Web Technologies: Internet, Web, Browsers, and Protocols | General concepts of internet and web | Öğretim Yöntemleri: Gösterip Yaptırma, Anlatım, Tartışma, Soru-Cevap |
| 2 | HTML Basics I – Basic Tags, Page Structure, Text Formatting | HTML structure and sample documents | Öğretim Yöntemleri: Anlatım, Soru-Cevap, Gösterip Yaptırma, Tartışma |
| 3 | HTML Basics II – Lists, Links, Tables, Images | Practice with HTML examples | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 4 | Forms and Input Fields: Form Tags and Input Types | Examples of form usage | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 5 | CSS Basics: Selectors, Rules, Colors, Fonts, Backgrounds | CSS structure and basic styles | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 6 | Page Layout: Box Model, Margin-Padding, Flexbox, Grid System | Page layout exercises | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 7 | Responsive Design and Media Queries | Mobile-friendly design samples | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 8 | Mid-Term Exam | Review of topics | Ölçme Yöntemleri: Yazılı Sınav |
| 9 | Introduction to JavaScript: Variables, Data Types, Operators | Introductory JS materials | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 10 | Conditions, Loops, Functions, and Events | JS control structure practices | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 11 | DOM Manipulation | Examples of DOM access using JS | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 12 | Form Validation and Basic AJAX Applications | Form validation examples using JS | Öğretim Yöntemleri: Anlatım, Gösterip Yaptırma, Tartışma |
| 13 | Web Project Development I: Design Review and Refinement | Review of previous designs | Öğretim Yöntemleri: Anlatım, Tartışma, Gösterip Yaptırma |
| 14 | Web Project Development II: JavaScript Integration and Testing | JS integration and testing | Öğretim Yöntemleri: Anlatım, Tartışma, Alıştırma ve Uygulama |
| 15 | General Review, Common Errors and Final Preparation | Individual guidance before final | Yöntem Seçilmemiş |
| 16 | Term Exams | Final Project Presentations and General Review | Ölçme Yöntemleri: Proje / Tasarım |
| 17 | Term Exams | Final Project Presentations and General Review | Ölçme Yöntemleri: Proje / Tasarım |
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 | 5 | 1 | 5 |
| Mid-term Exams (Written, Oral, etc.) | 1 | 1 | 1 |
| Final Exam | 1 | 1 | 1 |
| Total Workload (Hour) | 119 | ||
| Total Workload / 25 (h) | 4,76 | ||
| ECTS | 5 ECTS | ||