Course Information
SemesterCourse Unit CodeCourse Unit TitleT+P+LCreditNumber of ECTS CreditsLast Updated Date
1VTK 101Web Editörlüğü1+2+02330.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 familiarize students with modern web editors and development environments, enabling them to effectively use Visual Studio Code, Cursor, and Windsurf throughout the web development process. Within the scope of the course, students will create basic web pages using HTML5 and CSS, while developing practical web development skills by utilizing the code editing, debugging, AI-assisted code completion, and development tools provided by these web editors.
Course Content This course covers modern web editors and development environments (Visual Studio Code, Cursor, and Windsurf), editor installation and configuration, workspace management, extension usage, Live Server, Emmet, AI-assisted coding tools, HTML5 page structure, text, hyperlinks, images, tables, lists, forms, CSS selectors, box model, positioning, menu design, transition effects, animations, and responsive web design through practical applications.
Course Methods and Techniques Lecture, hands-on practice, project-based learning, and 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 Duckett, J. HTML and CSS: Design and Build Websites.
MDN Web Docs
W3Schools
Visual Studio Code Documentation
 Cursor  Documentation
Windsurf Documentation
Course Notes Duckett, J. HTML and CSS: Design and Build Websites.
MDN Web Docs.
W3Schools.
Visual Studio Code Documentation.
Cursor Documentation.
Windsurf Documentation.
Documents https://developer.mozilla.org https://code.visualstudio.com/docs https://docs.cursor.com https://docs.windsurf.com
Assignments 2 Ödev 1 Proje
Exams 1 Ara Sınav - 1 Final Sınavı

Course Category
Engineering %35
Engineering Design %40
Field %25

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 4 8
Mid-terms 1 7 7
Practice 14 2 28
Project 1 10 10
Final examination 1 9 9
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
1 Installs and configures Visual Studio Code, Cursor, and Windsurf development environments appropriately for the web development process.
Beceri 
2 Creates basic web pages using HTML5 and CSS with modern web editors.
3 Effectively uses Emmet, Live Server, and AI-assisted coding tools provided by modern web editors.
5 Develops basic mobile-compatible web projects using current web editors.
Yetkinlik 
4 Develops, tests, debugs web pages, and performs the necessary improvements.

 
Weekly Detailed Course Contents
WeekTopicsStudy MaterialsMaterials
1 Introduction to Modern Web Editors (Visual Studio Code, Cursor, and Windsurf), Installation and Development Environment Setup Review of basic concepts related to web editors and development environments. Course slides, Visual Studio Code, Cursor, and Windsurf documentation.
2 Features of Visual Studio Code, Cursor, and Windsurf, Emmet, Live Server, AI-Assisted Coding, and the First HTML Page Review of HTML fundamentals and web editor features. Course notes, VS Code, Cursor, and Windsurf documentation.
3 HTML Fundamentals, Headings, Paragraphs, Links, Images, and Lists Review of HTML tags and basic web page structure. HTML5 documentation and course slides.
4 HTML Tables, Form Elements, and HTML5 Multimedia Components Review of HTML tables and form elements. HTML5 documentation and course notes.
5 Introduction to CSS, Selectors, Text, and Background Formatting Review of basic CSS concepts. CSS course notes and MDN Web Docs.
6 CSS Box Model, Display, Float, and Position Properties Review of the CSS box model and layout properties. CSS course notes.
7 CSS Menu Design, Font Awesome, Google Fonts, and Transition Effects Review of CSS menu design and web fonts. CSS course notes and Font Awesome documentation.
8 Midterm Exam Review of the first seven weeks. Course notes.
9 Development of the First Website Project Review of HTML and CSS topics. Project guideline and course notes.
10 Responsive Web Design and Media Query Usage Review of responsive design concepts. CSS course notes.
11 Responsive Website Applications Review of responsive web applications. Course notes.
12 Advanced CSS Techniques and Animations Review of advanced CSS techniques and animations. CSS course notes.
13 AI-Assisted Code Editing and Web Project Development Applications Review of AI-assisted development tools.  Cursor  and Windsurf documentation.
14 Project Development, Optimization, and Refinement Review of project development progress. Project guideline.
15 Project Presentation, General Evaluation, and Review Preparation of project presentations. Project files and course notes.
16 Final Exam Review of all course topics. Course notes.
17 Final Exam Review of all course topics. 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 5 4 3
Sk2 5 5 3 5 5 3 4
Sk3 5 5 4 3 4 3 4 5
Sk5 5 5 4 4 5 4 5
Co4 4 4 5 3 3 5 3

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