Course Information
SemesterCourse Unit CodeCourse Unit TitleT+P+LCreditNumber of ECTS CreditsLast Updated Date
1BIL 107Web Tasarımı Temelleri1+2+02329.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 aim of this course is to enable students to learn the fundamental principles of web technologies and develop standards-compliant, user-friendly, and responsive web pages using HTML5 and CSS3. The course aims to equip students with fundamental web design skills and enable them to develop a complete website project.
Course Content Introduction to web technologies, installation and use of Visual Studio Code, HTML5 document structure, text formatting tags, lists, hyperlinks, images, tables, multimedia elements, HTML forms, semantic HTML5 elements, introduction to CSS, selectors, box model, positioning, display, overflow, z-index, typography, icons, shadow effects, transitions, horizontal and vertical navigation menus, Flexbox, CSS Grid, responsive web design, media queries, and a complete website development project.
Course Methods and Techniques Lecturing, demonstration, hands-on laboratory practice, problem solving, project-based learning, and presentations.
Prerequisites and co-requisities None
Course Coordinator None
Name of Lecturers Instructor Afife ÇİFTCİ OLGUN afife.ciftci@ankarabilim.edu.tr
Instructor Süleyman ÖZLÜK süleyman.özlük@ankarabilim.edu.tr
Assistants None
Work Placement(s) No

Recommended or Required Reading
Resources Erdinç, F. HTML5, CSS3 and JavaScript for Beginners. DR Publications. https://www.dr.com.tr/Kitap/Yeni-Baslayanlar-icin-HTML5-CSS3-Javascript/Fahrettin-Erdinc/Egitim-ve-Sinav-Kitaplari/Bilgisayar-Kitaplari/Programlama/urunno=0001859709001
W3Schools. HTML ve CSS Eğitim Kaynakları. https://www.w3schools.com/
Duckett, J. HTML and CSS: Design and Build Websites.
MDN Web Docs. HTML, CSS and Web Development Documentation. https://developer.mozilla.org/
Course Notes Erdinç, F. Yeni Başlayanlar İçin HTML5, CSS3 ve                 JavaScript                . W3Schools. https://www.w3schools.com/
Documents https://www.w3schools.com/ https://developer.mozilla.org/ https://code.visualstudio.com/docs
Assignments 2 Ödev 1 Proje
Exams 1 Ara Sınav 1 Final Sınavı

Course Category
Engineering %10
Field %90

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 1 14
Assignments 2 5 10
Mid-terms 1 7 7
Practice 14 2 28
Project 1 10 10
Final examination 1 7 7
Total Work Load   Number of ECTS Credits 3 90

 
Course Learning Outcomes: Upon the successful completion of this course, students will be able to:
NoLearning Outcomes
2 Creates structurally organized web pages using HTML5 tags.
Bilgi 
1 Explains the fundamental concepts related to the Internet, the web, and HTML.
Beceri 
3 Applies visual styling to web pages using CSS rules.
4 Uses forms, tables, menus, images, and multimedia components in web pages.
Yetkinlik 
5 Develops a basic website in accordance with responsive design principles.

 
Weekly Detailed Course Contents
WeekTopicsStudy MaterialsMaterials
1 Introduction to web technologies, VS Code installation, and basic HTML document structure Reviewing the basic concepts of web technologies and HTML, and installing VS Code on the computer Course notes, VS Code installation guide, and introductory HTML5 exercises
2 Text formatting tags, lists, hyperlinks, and images Reviewing the basic HTML document structure and examining text formatting tags Course notes, HTML text formatting examples, and list and hyperlink exercises
3 Tables and multimedia elements Reviewing HTML table tags and basic multimedia concepts Course notes, table exercises, and audio and video element examples
4 HTML forms and form controls Reviewing the concept of forms, data input fields, and form elements Course notes, HTML form examples, and form control exercises
5 Semantic HTML5 elements and page structure Reviewing semantic HTML5 elements and webpage sections Course notes, semantic page structure examples, and HTML5 exercises
6 Introduction to CSS, CSS implementation methods, and basic selectors Reviewing the purpose of CSS, CSS implementation methods, and basic selectors Course notes, introductory CSS examples, and selector exercises
7 Box model, width, height, borders, spacing, and background properties Reviewing the CSS box model, margin, padding, and border properties Course notes, box model exercises, and CSS property examples
8 Midterm Examination Reviewing the topics covered in the first seven weeks and examining sample exercises Course notes, practice examples, and examination study materials
9 Display, position, z-index, and overflow properties Reviewing CSS layout properties and basic positioning methods Course notes, positioning examples, and CSS layout exercises
10 Typography, icon usage, shadow effects, and transition effects Reviewing CSS typography properties, icon libraries, and transition effects Course notes, typography and icon exercises, and shadow and transition examples
11 Horizontal and vertical navigation menu design Reviewing HTML list structures and CSS menu styling properties Course notes and horizontal and vertical menu exercises
12 Page layout using Flexbox and CSS Grid Reviewing the basic concepts and properties of Flexbox and CSS Grid Course notes and Flexbox and CSS Grid exercise examples
13 Responsive web design and media queries Reviewing the concept of responsive design, screen sizes, and media queries Course notes and responsive design and media query examples
14 General website application and project development Determining the project topic and page structure, and preparing the required content and images Project guidelines, sample website files, and course notes
15 General website application and project development Completing the missing parts of the project and reviewing the design and code Project checklist, sample codes, and course notes
16 Final Examination Reviewing the topics covered throughout the semester and revising the practical exercises Course notes, practice examples, and examination study materials
17 Final Examination Conducting a general review of the semester topics Course notes and examination materials

 
Contribution of Learning Outcomes to Programme Outcomes
P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12 P13 P14 P15 P16
C2 4 5 2 5 5 3
In1 5 2 5
Sk3 4 5 3 4 5 2 4
Sk4 4 5 3 4 5 2 2 5
Co5 5 5 4 4 5 3 3 5

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