Faculty Of Engıneerıng
Computer And Software Engıneerıng
Course Information
| ADVANCED RESPONSIVE WEB DESIGN WITH CSS AND BOOTSTRAP | |||||
|---|---|---|---|---|---|
| Code | Semester | Theoretical | Practice | National Credit | ECTS Credit |
| Hour / Week | |||||
| CSE338 | Spring | 2 | 2 | 3 | 4 |
| Prerequisites and co-requisites | None |
|---|---|
| Language of instruction | English |
| Type | Elective |
| Level of Course | Bachelor's |
| Lecturer | Asst. Prof. Furkan GÖZÜKARA |
| Mode of Delivery | Face to Face |
| Suggested Subject | None |
| Professional practise ( internship ) | None |
| Objectives of the Course | The aim of this course is to learn to develop the interface of web applications with flexible design to work on all platforms. |
| Contents of the Course | Bootstrap v4 library, jQuery v3 Javascript library and advanced CSS v3 techniques with C # and ASP.NET programming language, flexible front-end web site design for all platforms and compatible for all devices with any web browser (phone, tablet, smart TV, computer, etc.) will be taught in this course. |
Learning Outcomes of Course
| # | Learning Outcomes |
|---|---|
| 1 | To be able to use CSS. |
| 2 | To be able to use HTML. |
| 3 | To be able to use Bootstrap library. |
| 4 | To be able to create a web-site has flexible and responsive design works all platforms. |
Course Syllabus
| # | Subjects | Teaching Methods and Technics |
|---|---|---|
| 1 | Introduction to HTML5 and Documents | Lecture, discussion, presentation |
| 2 | HTML5 Block, Inline Labels, Lists | Lecture, discussion, presentation |
| 3 | HTML5 Text Formatting, Tables, Div Label | Lecture, discussion, presentation |
| 4 | HTML5 IFrame and Forms | Lecture, discussion, presentation |
| 5 | Introduction to CSS | Lecture, discussion, presentation |
| 6 | CSS Selectors and CSS Syntax | Lecture, discussion, presentation |
| 7 | CSS Background, Borders, Text & font | Lecture, discussion, presentation |
| 8 | Midterm Exam | Exam |
| 9 | Margin & Padding, Position & Display | Lecture, discussion, presentation |
| 10 | CSS Photo Gallery & Dropdown Menu Design | Lecture, discussion, presentation |
| 11 | CSS Forms and Button Designs | Lecture, discussion, presentation |
| 12 | Introduction to Bootstrap & Installing Bootstrap | Lecture, discussion, presentation |
| 13 | Bootstrap Grid Systems & Responsive Design | Lecture, discussion, presentation |
| 14 | Bootstrap Typography, Form & Tables | Lecture, discussion, presentation |
| 15 | Bootstrap Buttons, Helper Classes & Glyphicons | Lecture, discussion, presentation |
| 16 | Final Exam | Exam |
Course Syllabus
| # | Material / Resources | Information About Resources | Reference / Recommended Resources |
|---|
Method of Assessment
| # | Weight | Work Type | Work Title |
|---|---|---|---|
| 1 | 40% | Mid-Term Exam | Mid-Term Exam |
| 2 | 60% | Final Exam | Final Exam |
Relationship between Learning Outcomes of Course and Program Outcomes
| # | Learning Outcomes | Program Outcomes | Method of Assessment |
|---|---|---|---|
| 1 | To be able to use CSS. | 2͵3͵4 | 1͵2 |
| 2 | To be able to use HTML. | 2͵3͵4 | 1͵2 |
| 3 | To be able to use Bootstrap library. | 2͵3͵4 | 1͵2 |
| 4 | To be able to create a web-site has flexible and responsive design works all platforms. | 2͵3͵4 | 1͵2 |
Work Load Details
| # | Type of Work | Quantity | Time (Hour) | Work Load |
|---|---|---|---|---|
| 1 | Course Duration | 14 | 4 | 56 |
| 2 | Course Duration Except Class (Preliminary Study, Enhancement) | 0 | 0 | 0 |
| 3 | Presentation and Seminar Preparation | 0 | 0 | 0 |
| 4 | Web Research, Library and Archival Work | 0 | 0 | 0 |
| 5 | Document/Information Listing | 0 | 0 | 0 |
| 6 | Workshop | 0 | 0 | 0 |
| 7 | Preparation for Midterm Exam | 1 | 2 | 2 |
| 8 | Midterm Exam | 0 | 0 | 0 |
| 9 | Quiz | 0 | 0 | 0 |
| 10 | Homework | 4 | 5 | 20 |
| 11 | Midterm Project | 1 | 10 | 10 |
| 12 | Midterm Exercise | 0 | 0 | 0 |
| 13 | Final Project | 1 | 10 | 10 |
| 14 | Final Exercise | 0 | 0 | 0 |
| 15 | Preparation for Final Exam | 0 | 0 | 0 |
| 16 | Final Exam | 1 | 2 | 2 |
| 100 | ||||