Course Information
SemesterCourse Unit CodeCourse Unit TitleT+P+LCreditNumber of ECTS CreditsLast Updated Date
2VTK 108İleri Web Tasarımı1+2+02430.07.2026
Course Details
Language of Instruction Turkish
Level of Course Unit Associate Degree
Department / Program Web Design and Development
Type of Program Formal Education
Type of Course Unit Compulsory
Course Delivery Method Face To Face
Objectives of the Course The Advanced Web Design course aims to enable students to develop modern, responsive, accessible, and user-oriented web interfaces. The course covers advanced HTML and CSS techniques, Bootstrap 5 grid system, utility classes and interface components, responsive design, form structures, basic                        JavaScript                        interactions, accessibility, performance optimization, browser compatibility, and web project deployment. Throughout the course, students develop publish-ready web projects with visual consistency, usability, and compatibility across different screen sizes.
Course Content This course covers advanced HTML and CSS applications, responsive web design, mobile-first design approach, Bootstrap 5 installation, grid system, containers, breakpoints, flex and utility classes, navigation structures, cards, tables, forms, modal windows, carousel, accordion and other interface components, basic                        JavaScript                       -supported interactions, user experience and accessibility principles, browser compatibility, performance optimization, project organization, code structure, debugging, and preparing web projects for deployment through practical applications and project development processes.
Course Methods and Techniques Lecture, hands-on practice, project-based learning, and project presentation.
Prerequisites and co-requisities None
Course Coordinator None
Name of Lecturers Instructor Afife ÇİFTCİ OLGUN afife.ciftci@ankarabilim.edu.tr
Assistants None
Work Placement(s) No

Recommended or Required Reading
Resources Erdinç, F. HTML5, CSS3 and JavaScript for Beginners.
Bootstrap 5 Official Documentation.
MDN Web Docs.
W3Schools Web Development Tutorials.
web.dev – Responsive Web Design, Accessibility and Performance Resources.
W3C Web Accessibility Initiative Resources.
Course Notes Erdinç, F. HTML5, CSS3 and                        JavaScript                        for Beginners.
Bootstrap Documentation.
MDN Web Docs.
W3Schools Web Development Tutorials.
web.dev – Responsive Web Design, Accessibility and Performance Resources.
W3C Web Accessibility Initiative Resources.
Documents https://getbootstrap.com/docs https://developer.mozilla.org https://www.w3schools.com https://web.dev https://www.w3.org/WAI
Assignments 2 Ödev 1 Proje
Exams 1 Ara Sınav 1 Final Sınavı

Course Category
Engineering %30
Engineering Design %20
Field %50

Planned Learning Activities and Teaching Methods
Activities are given in detail in the section of "Assessment Methods and Criteria" and "Workload Calculation"

Assessment Methods and Criteria
In-Term Studies Quantity Percentage
Mid-terms 1 % 30
Assignment 2 % 10
Project 1 % 20
Final examination 1 % 40
Total
5
% 100

 
ECTS Allocated Based on Student Workload
Activities Quantity Duration Total Work Load
Course Duration 14 1 14
Hours for off-the-c.r.stud 14 2 28
Assignments 2 9 18
Mid-terms 1 6 6
Laboratory 14 2 28
Project 1 16 16
Final examination 1 10 10
Total Work Load   Number of ECTS Credits 4 120

 
Course Learning Outcomes: Upon the successful completion of this course, students will be able to:
NoLearning Outcomes
1 Explains the fundamental principles of responsive web design, mobile-first design, and the use of breakpoints.
3 Develops functional and user-oriented web interfaces using Bootstrap components and basic JavaScript-supported interactions.
4 Evaluates and improves web interfaces in terms of usability, accessibility, browser compatibility, and performance.
5 Designs, develops, and presents a deployment-ready web project with an organized file structure in compliance with modern web standards.
Beceri 
2 Creates page layouts compatible with different screen sizes using the Bootstrap grid system, flexbox, and utility classes.

 
Weekly Detailed Course Contents
WeekTopicsStudy MaterialsMaterials
1 Introduction to Advanced Web Design, Responsive Design, Mobile-First Approach, and Bootstrap 5 Installation Conducting preliminary research on responsive design and Bootstrap. Course slides, course notes, and related resources.
2 Bootstrap Container Structure, Breakpoints, Grid System, Row and Column Layouts Conducting preliminary research on the Bootstrap grid system. Course slides, course notes, and related resources.
3 Bootstrap Flex, Display, Position, Sizing, Spacing, and Shadow Utility Classes Conducting preliminary research on Bootstrap utility classes. Course slides, course notes, and related resources.
4 Typography, Colors, Images, Tables, Buttons, and Content Utility Classes Conducting preliminary research on Bootstrap content components. Course slides, course notes, and related resources.
5 Navbar, Nav, Dropdown, Breadcrumb, and Responsive Navigation Design Conducting preliminary research on Bootstrap navigation components. Course slides, course notes, and related resources.
6 Card, List Group, Accordion, Alert, Badge, and Collapse Components Conducting preliminary research on Bootstrap interface components. Course slides, course notes, and related resources.
7 Carousel, Modal, Offcanvas, Tooltip, Popover, and Spinner Components Conducting preliminary research on Bootstrap interactive components. Course slides, course notes, and related resources.
8 Midterm Exam Review of the first seven weeks. Course notes.
9 Bootstrap Form Structures, Form Layouts, Validation, and User Feedback Conducting preliminary research on Bootstrap forms. Course slides, course notes, and related resources.
10 Pagination, Progress, Scrollspy, and Basic JavaScript-Supported Bootstrap Interactions Conducting preliminary research on Bootstrap interactions. Course slides, course notes, and related resources.
11 User Experience, Web Accessibility, Semantic Structure, and Browser Compatibility Conducting preliminary research on web accessibility. Course slides, course notes, and related resources.
12 Performance Optimization, Image Optimization, Code Organization, and Reusable Components Conducting preliminary research on performance optimization techniques. Course slides, course notes, and related resources.
13 Project Planning, Interface Design, Page Structure, and Responsive Project Development Conducting preliminary research on the project development process. Course slides, course notes, and related resources.
14 Project Development, Testing, Debugging, and Improvement Studies Review of project development progress. Course slides, course notes, and related resources.
15 Preparing Projects for Publication, Project Presentations, and General Evaluation Preparing projects for presentation. Course slides and course notes.
16 Final Exam Preparation for the final exam. Course notes.
17 Final Exam Preparation for the final exam. Course notes.

 
Contribution of Learning Outcomes to Programme Outcomes
P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12 P13 P14 P15 P16
C1 5 3 5 5 3
C3 5 5 4 5 5 5
C4 4 4 5 4 4 5 4
C5 5 5 5 5 3 5 4 5
Sk2 5 5 4 5 5 4

  Contribution: 1: Very Slight 2:Slight 3:Moderate 4:Significant 5:Very Significant