Course Structure – .NET Junior

Course length

272 classes, each lasting 45 minutes of active teaching time.

Conditions of enrollment

Proficiency in English necessary for independent work, referring to documentation, as well as research online to locate necessary tools for development.

Course goals

Enable students to independently develop applications of low and medium complexity using the C# and JavaScript programming languages. Give students a solid knowledge base which will allow them to continue their education on their own, increasing their proficiency and mastery of programming techniques and environments.

Course structure

The course is divided into two parts: (i) The fundamentals of programming and (ii) Advanced programming techniques. As a part of the course special attention is to be paid to the C# programing language and its particularities. Each of the course parts is divided into three segments. A detailed description of the course segments is presented below:

The Fundamentals of Programming (duration: 96 classes)
1. The Fundamentals of Structured Programming
  1. Goal: The course will introduce basic concepts and methodology of procedural programming based on the C# programming language.
  2. Upon completion, the student should be able to: model solutions using structural modeling techniques and independently solve simple programming problems using the C# programming language. They should be able to actively participate in more advanced modules of the course.
  3. Module description: Phases of simple software development. Introduction to software development environment, Visual Studio IDE. Developing simple programs in the C# programming environment. Introduction to software requirements analysis and specification. Design of simple C# programs. Working on real life examples and C# programming solutions. Overview of the basic structure of programs. The C# alphabet. Data types. Instructions for defining and naming identifiers. Choosing, defining, and naming constants, types, and variables. Using operators (arithmetical, logical, relational …) in the correct manner. Programming language control structures (IF, SWITCH, WHILE, FOR) and their use in the appropriate way. Data Structures: records, arrays, matrices, stacks, queues. Basic algorithms: simple operations (inserting, removal, minimum, maximum), searching (sequential and binary), sorting (bubble, heap, quick, bin, radix). Introduction to functions/modules. Input/output functions. Function parameters. Basic techniques for software testing. Implementing C# programs for simple problems which could occur in practice.
2. The Fundamentals of Object Oriented Programming
  1. Goal: The course will introduce basic concepts and methodology of object-oriented programming and design using the C# programming language.
  2. Upon completion, the student should be able to: understand the principles of object-oriented paradigm, model solutions using object-oriented programming concepts, and independently solve low-to-medium complexity programming tasks using C#. The acquired knowledge should enable the course participants to actively take part in the more advanced modules.
  3. Module description: Problem modeling in object-oriented programming. Fundamentals of structured design: classes, objects, and their relationship. Message passing. Constructors and garbage collection. Basic concepts of the object-oriented paradigm: encapsulation, inheritance, polymorphism. Visibility and data access restriction mechanisms in object-oriented programming. Interfaces. Error handling with exceptions. Implementing data structures using object-oriented programming: linked lists, hashing and hash tables, trees, graphs – when to use what. Object-oriented design: basic design patterns (structural, creational, behavioral), Unified Modelling Language (UML). Fundamentals of software engineering. Phases in software development: requirements, modelling, implementation, testing, and documentation. Best practices in code construction.
3. Database Fundamentals
  1. Goal: Basic education in databases. Students gain fundamental knowledge in databases and learn basic techniques of implementation, use and maintenance of databases.
  2. Upon completion, the student should be able to: model solutions using conceptual modeling techniques and independently solve simple problems using the ER diagram concepts. Students will be able to understand the relational data model and independently solve low-to- medium complexity tasks using relational database language SQL. They should be able to actively participate in more advanced modules of the course..
  3. Module description: The evolution of data management processes and the concept of a database. Basic concepts and characteristics of data models. The relational data model. The classification and management of database constraints in the relational data model: NOT NULL, UNIQUE, PRIMARY KEY, FOREIGN KEY, and CHECK constraints. Basic design techniques of relational database schemas. Basic characteristics of database management systems. The SQL language and relational databases – DML (INSERT, DELETE and UPDATE statements), DDL (CREATE, DROP and ALTER table and view) and QL (SELECT statements with WHERE, ORDER BY, GROUP BY clauses, inner and outer JOINS, nested queries, single row functions and group functions). Nested queries, operators ANY, ALL, and EXISTS. Views in SQL. Constraints within the relational model. Key constraints. NULL constraints. Foreign key constraints. Unique and check constraints. Relational database design by mapping the ER model to the relational model.

Advanced Programming Techniques (duration: 176 classes)
1. Web Front-End Development
  1. Goal: The course will introduce basic concepts and methodology of web front-end development based on modern HTML, CSS, JavaScript, and the React framework.
  2. Upon completion, the student should be able to: understand the large-scale structure of complex web applications, design web pages optimized for web application use and style them using CSS. Code competently in JavaScript and understand its role in the web ecosystem. Exercise command-line control over the NodeJS/npm environment, and know how to leverage it for purposes of web development. Develop simple web applications based on the React framework.
  3. Module description: Phases of modern JavaScript application development. Frameworks, libraries, and the interaction thereof. Working with JavaScript and the Visual Studio Code rich code editor. Necessary command line tools and package managers for working with a JavaScript project. The React framework. A JSX-centric approach to interface design. Separate styling of interface elements using CSS technologies. Reusable components in React and the implementation of directives for looping and conditionals using JSX. Guidelines and heuristics for modern interface design. The MVC pattern and program decoupling using dependency injection and binding. Information flow in interface design. Alternative libraries and frameworks.
2. Software Development Principles and Web Application Back-end Development
  1. Goal: The course will introduce basic concepts and methodology of back-end design and development on a web application example using C# as the main programming language. The course will introduce basic principles and methodologies of software development on a Web application example using C# and JavaScript as the main programming languages.
  2. Upon completion, the student should be able to:
    1. understand the principles of good back-end design and applicable design patterns, independently develop low-to-medium complexity back-end components, understand one possible C# framework for back-end development and competently use the relevant libraries and frameworks to produce modern web-based back-ends.
    2. understand the principles of good software development and applicable software development methods, independently develop low-to-medium complexity web applications, understand agile software development methodology, and competently use the methodology to produce modern web application.
  3. Module description: Fundamentals of modern back-end development of web applications. Frameworks, libraries and the interaction thereof. Working with the ASP.NET Web API framework. Basic modules and concepts of ASP.NET Web API. Functional layers of a ASP.NET application. Necessary command line tools, IDEs and package repositories for working with a ASP.NET project. The NuGet tool and automatic library dependency resolution. The Entity Framework and data interaction. Data access and business logic layers, handling data input/output and implementing business logic. Developing, using and testing REST APIs. Building REST controllers in ASP.NET Web API. Testing backend functionality and creating unit tests. Fundamentals of an agile software development methodology. Usage of an agile software development methodology. Version control systems. Git. Necessary commands in the Git version control system: pull, commit, push, fetch. Issue and project tracking systems. Jira. Necessary concepts in Jira software. JavaScript and C# testing frameworks. Jasmine testing framework. Testing frontend functionalities.

The sections presented are best taught in strict sequence, as each one depends on the former, especially in the fundamentals of programming sub-course.

Grading

Student grading is to be undertaken after the completion of each of the two major parts of the course. Each student is graded on a 1-100 scale each time, while the final course score is calculated as a weighted sum of the total points according to the following formula:

Points (total) = 0.4 x Points (part1) + 0.6 x Points (part2)

As part of the first part of the course, the students will take written tests which count for 100 of their points in total, with two counting for 30 points, and one, the one in Object Oriented Programming, for 40. The goal of this test is to efficiently test knowledge of fundamental programming concepts. The test shall consist of questions and small programming challenges which can be completed very quickly.

After the second part of the course, the students will independently develop a software solution which will count for 100 points, i.e. 60% of the final grade. The project will be based around the development of a web application using what the students have learned in the entire course.

The total number of points is the direct indicator of the level of material comprehension and mastery each student has demonstrated. Based on the total number of points letters of recommendation of a differing natures will be written for each of the students.

The following is the breakdown of the modules comprising this course:

Curriculum of

Introduction to programming

32 classes

GOAL

The course will introduce basic concepts and methodology of procedural programming based on the C# programming language.

OUTCOME

Upon completion, the student should be able to: model solutions using structural modeling techniques and independently solve simple programming problems using the C# programming language. They should be able to actively participate in more advanced modules of the course.

COURSE DESCRIPTION

Topic 1: Introduction to algorithms (4)

Computer organization.
The art of programming.
Generations of programming languages.
Phases of simple software development.
The role of abstraction programming
PRACTICAL WORK – simple problem solving.

Topic 2: Software development (2)
environment

C# programming language.
Visual studio and .NET installation
Visual Studio overview.
New Visual Studio project/solution.
First C# program example.
PRACTICAL WORK – simple C# program developed by students.

Topic 3: Structure of C# program (2)

Overview of the basic structure of programs.
MAIN method.
C# Namespaces and import function.
C# alphabet

Topic 4: Variables (2)

Definition of variables.
Data types.
Naming conventions, declaration, definition, and initialization.
Variable scope.
Introduction to Strings.
PRACTICAL WORK – examples of programs using String.
PRACTICAL WORK – implementing programs with variables.

Topic 5: Introduction to debugging (2)

Finding and correcting errors in programming code.
Code testing
Debugging in Visual Studio.
Debug View, Breakpoints, Variables panel, Step Into (F11) and Step Over (F10).
PRACTICAL WORK – code debugging examples (on programming code with intentional errors).

Topic 6: Expressions (2)

Introduction to expression and operators.
Arithmetic, relational, logical, assignment, and ternary operators.
Precedence rules.
Operator type matching.
Data type conversion.
PRACTICAL WORK – implementing programs with operators.

Topic 7: String and Enum (2)

Introduction to subroutines, classes, and objects.
Built-in subroutines and functions.
String class continued.
String class methods.
PRACTICAL WORK – String class examples.
Introduction to enums.
PRACTICAL WORK – enums examples.

Topic 8: Basic input and output (2)

Input/output introduction.
Output – (Console.WriteLine).
Input – (Console.ReadLine).
PRACTICAL WORK – using basic input and output functions.

Topic 9: Selection (2)

Introduction to control structures.
Introduction to selection statements.
IF statement.
PRACTICAL WORK – using IF statement.
SWITCH statement.
Numbers, enums, and strings in SWITCH statement.
PRACTICAL WORK – using SWITCH statement.

Topic 10: Loops (2)

Introduction to loop statements.
DO-WHILE statements.
PRACTICAL WORK – using DO-WHILE statement.
FOR statements.
PRACTICAL WORK – using FOR statement.
WHILE statements.
PRACTICAL WORK – using WHILE statement.
Control structures nesting.
Break and continue.
PRACTICAL WORK – using control structure for solving complex problems.

Topic 11: Arrays (2)

Static data structures.
Arrays – declaration, definition, initialization, random access.
PRACTICAL WORK – using arrays.
Matrices – declaration, definition, initialization, random access.
PRACTICAL WORK – using matrices.
Multidimensional arrays.

Topic 12: Search and sorting (2)

Arrays and matrices searching algorithms.
PRACTICAL WORK – implementation of arrays and matrices searching algorithms.
Arrays and matrices sorting algorithms.
PRACTICAL WORK – implementation of arrays and matrices sorting algorithms.

Topic 13: Subroutines (2)

Introduction to subroutines.
Static and non-static subroutines.
Subroutines definition.
Calling subroutines.
Naming subroutines.
PRACTICAL WORK – solving problems using subroutines.

Topic 14: Practical work (4)

Topics summary.
PRACTICAL WORK – implementing C# programs for simple problems which could occur in practice.

GRADING

Student grading is to be undertaken after the completion of the course.
Students will have one test.
Each student is graded on a 1-30 scale.
There are 6 theoretical questions graded on a 1-20 overall scale and 1 practical assignment graded on a 1-10.

LITERATURE

Joseph Albahari – “C# 6.0 in a Nutshell: The Definitive Reference”, 6th Edition, November 2015,
Troelsen, Andrew – “Pro C# 5.0 and the .NET 4.5 Framework”, 6th Edition, 2012
Rob Miles “C# Programming Yellow Book”, Cheese Edition 8.2, November 2016, http://www.csharpcourse.com/
Wladston Ferreira Filho, “Computer Science Distilled: Learn the Art of Solving Computational Problems”, Code Energy LLC, Las Vegas, 2017.

Curriculum

Introduction to Databases

32 classes

GOAL

The course will introduce basic concepts and methodology of databases. Students gain fundamental knowledge in databases design and learn basic techniques of implementation, use and maintenance of databases.

OUTCOME

Upon completion, the student should be able to model solutions using conceptual modeling techniques and independently solve simple problems using the ER diagram concepts. Students will be able to understand the relational data model and independently solve low-to-medium complexity tasks using relational database language SQL. They should be able to actively participate in more advanced modules of the course.

CONTENT

Topic 1. Introduction to Database System (1)

Database system concepts
Concept of database management system (DBMS)
Concept of database schemas and views
Definition of key

Topic 2. Data Models (1)

Concept and role of data model in database design
Conceptual modeling and database design
Data model types
Introduction to relational data model and entity relationship model

Topic 3. Data Modeling Using the Entity Relationship (ER) Model (4)

Definition, properties, and examples of entity types
Definition, properties, and examples of relationship types
Definition, properties, and examples of weak entity types
Database design using ER diagram
PRACTICAL WORK – ER diagram examples (entity types, relationship types and weak entity types)

Topic 4. Data Modeling Using the Extended Entity Relationship (EER) Model (4)

Definition, properties, and examples of gerunds
Definition, properties, and examples of IS-A hierarchy and categorization
PRACTICAL WORK – ER diagram examples (gerunds, IS-A hierarchy and categorization)

Topic 5. Relational data model (2)

Relational data model basic concepts
Purpose and scope of the SQL language
Introduction to environment for learning SQL language
Roles and users
PRACTICAL WORK – CREATE user

Topic 6. SQL–Language of Relational Databases (2)

Basic SQL syntax
Definition, properties, and examples of schema and catalog concepts in SQL
PRACTICAL WORK – implementation of the database schema in SQL language, on the selected DBMS, based on given SQL scripts, for the selected example

Topic 7. Data Definition Language (DDL) (2)

SQL basic data types
Date data types – operations and functions
Alphanumeric data types – operations and functions
Schema change statements in SQL
PRACTICAL WORK – CREATE, ALTER, and DROP statements in SQL

Topic 8. Data Manipulation Language (DML) (2)

Insert tuple to the table
Delete tuple from the table
Update table data
PRACTICAL WORK – INSERT, UPDATE and DELETE statements in SQL

Topic 9. SQL Queries (4)

Basic structure of the SELECT command
NULL values, and arithmetic expressions
WHERE and ORDER BY clauses
DISTINCT clause and the use of logical and SQL operators (IN, LIKE, IS NULL)
Aggregate functions in SQL (min, max, sum, avg, count)
GROUP BY and HAVING clauses
PRACTICAL WORK – SQL queries examples

Topic 10. SQL Queries (4)

Joined Tables in SQL and Outer Joins
Nested Queries
Correlated Nested Queries
Operators ANY, ALL, EXISTS
Efficiency of query execution
PRACTICAL WORK – SQL queries examples

Topic 11. Views in SQL (2)

Definition, properties, and examples of view
Recapitulation of the SELECT command, within the view
PRACTICAL WORK – creating simple and complex views

Topic 12. Relational Model Constraints (2)

Definition, properties, and examples of constraints
Key Constraints and Constraints on NULL Values
Unique and check constraints
Foreign key constraints
PRACTICAL WORK – Specifying constraints in SQL

Topic 13. Relational Database Design by ER to Relational Mapping (2)

Mapping ER model constructs to relations

PRACTICAL WORK – examples of ER to Relational Mapping

GRADING

Student grading is to be undertaken after the completion of the course.
Students will have one test.
Each student is graded on a 1-30 scale.
The test will be composed of 5 practical assignments, worth 30 points in total

REFERENCES

Date C. J, An Introduction to Database Systems (8th Edition)
Ramez Elmasri, Shamkant B. Navathe, Fundamentals of Database Systems (6th Edition)

Curriculum of

Introduction to Object-Oriented Programming
32 classes

GOAL

The course will introduce basic concepts and methodology of object-oriented programming and design using the C# programming language.

OUTCOME

Upon completion, students will be able to understand the object-oriented paradigm, model solutions using object-oriented programming, and independently solve low-to-medium complexity programming tasks using C#. The acquired knowledge should enable the course participants to actively take part in more advanced modules.

COURSE DESCRIPTION

Topic 1. Introduction to Object-Oriented Programming (OOP) (2)

Concepts, properties, and advantages of object-oriented programming
Relationship between procedural and object-oriented programming

Topic 2. Objects and Classes (2)

Definition, properties, and examples of objects
Definition, properties, and examples of classes
Partial classes
Variables and objects
PRACTICAL WORK – objects and classes

Topic 3. Constructors, Access Control and Encapsulation (3)

Constructors and object initialization
Object paradigm
Abstract data types (ADT)
Access control attributes
Access control methods
Definition, properties, and examples of encapsulation
PRACTICAL WORK – constructors and access control

Topic 4. Inheritance (4)

Definition, properties, and examples of inheritance
Examples of inheritance
PRACTICAL WORK – inheritance

Topic 5. Association, Aggregation, and Composition (3)

Definition, properties, and examples of association, aggregation, and composition
PRACTICAL WORK – association, aggregation, and composition

Topic 6. Polymorphism (2)

Definition, properties, and examples of polymorphism
PRACTICAL WORK – polymorphism

Topic 7. Abstract Classes and Interfaces (3)

Definition, properties, and examples of abstract classes
Definition, properties, and examples of interfaces
Variables and interfaces
Frameworks and APIs
PRACTICAL WORK – abstract classes and interfaces

Topic 8. Correctness and Robustness of Object-Oriented Programs (2)

Concepts of correctness and robustness
Mechanism of exceptions
PRACTICAL WORK – handling of exceptions in programs

Topic 9. Streams and Files (2)

Definition, properties, and examples of streams
Definition, properties, and examples of files
PRACTICAL WORK – streams and files

Topic 10. .NET Platform (3)

OOP in C#
.NET Library
Dynamic Link Library – DLL
Documentation – MSDN
Collections and LINQ in C#
Example – using System.Collections
PRACTICAL WORK – using Collections and LINQ

Topic 11. Delegates and Events (2)

Definition, properties, and examples of delegates in C#
Example – Pub/Sub mechanism
Definition, properties, and examples of events in C#
Example – events and delegates
PRACTICAL WORK – events and delegates

Topic 12. UML, Principles of Object-Oriented Design (4)

Unified Modeling Language – UML
Types of UML diagrams
Object-oriented software design
Design patterns
Example – design patterns
PRACTICAL WORK – design patterns

GRADING

Students’ grading will be undertaken after the

completion of the lectures

Students will have to pass a test worth 40 points
The test will be composed of 6 theoretical questions, worth 25 points in total, and 2 practical assignments, worth 15 points in total

REFERENCES

Joseph Albahari – “C# 6.0 in a Nutshell: The Definitive Reference”, 6th Edition, November 2015,
Troelsen, Andrew – “Pro C# 5.0 and the .NET 4.5 Framework”, 6th Edition, 2012
Rob Miles “C# Programming Yellow Book”, Cheese Edition 8.2, November 2016, http://www.csharpcourse.com/
Matt Weisfeld, Objektno orijentisani način mišljenja, (in Serbian), CET, Beograd.

Curriculum of

Software Development Principles and Web Application
Back-end Development

88 classes

GOAL

The course will introduce basic concepts and methodology of back-end design and development on a web application example using C# as the main programming language. The course will introduce basic principles and methodologies of software development on a Web application example using C# and JavaScript as the main programming languages.

OUTCOME

Upon completion, the student should be able to:

understand the principles of good back-end design and applicable design patterns, independently develop low-to-medium complexity back-end components, understand one possible C# framework for back-end development and competently use the relevant libraries and frameworks to produce modern web-based back-ends.
understand the principles of good software development and applicable software development methods, independently develop low-to-medium complexity web applications, understand agile software development methodology, and competently use the methodology to produce modern web application.

COURSE DESCRIPTION

Topic 1: Web architecture and ASP.NET Web API

(8)

Concepts, properties, and examples of modern web system architectures
Definition, properties, and examples of client-server architecture
Concepts and properties of the HTTP protocol
HTTP status codes
HTTP body and header
Concepts, properties, and advantages of the REST architecture
Concepts and properties of ASP.NET Web API
Architecture of ASP.NET Web API
IIS Express – basic tutorial
Creating and configuring the first ASP.NET Web API project
PRACTICAL WORK – creating and configuring ASP.NET Web API projects

Topic 2: REST services layer (8)

REST-related annotations and ASP.NET Web API concepts
Creating a basic CRUD REST controller in ASP.NET Web API
Advanced concepts of REST services in ASP.NET Web API: methods and parameters
Postman application – basic tutorial
Creating HTTP requests with Postman
Debugging in Visual Studio IDE – basic tutorial
Error handling in REST services
Breakpoints and line-by-line execution
PRACTICAL WORK – REST services

Topic 3: Data layer (12)

Definition, properties, and examples of object-relational mapping
Concepts and properties of Entity framework
Using Entity framework in ASP.NET applications
Main Entity framework annotations
Models in ASP.NET
Data access layer in ASP.NET
PRACTICAL WORK – Entity framework, models and DAO layer

Topic 4: Project specification (4)

Functional and nonfunctional requirements for the students’ project
Identifying and modeling main models of the system under study
Discussion about the project scope and models
PRACTICAL WORK – creation of class diagrams

Topic 5: Business logic layer (8)

Definition, properties, and examples of business logic layer in ASP.NET
Classes for database access
Transaction management
Introduction to LINQ
Writing queries with LINQ
File access
Principles of logging in applications
Logging services
Using NLog library in ASP.NET applications
PRACTICAL WORK – creation of services

Topic 6: Serialization and Deserialization of data (10)

Concepts and properties of JavaScript Object Notation (JSON)
Concepts and properties of Json.NET library
Using Json.NET in ASP.NET projects
Basic Json.NET annotations for Serialization and Deserialization of data
Conditional serialization
Circular reference problem and solution
Data Transfer Objects (DTO)
Data validation
PRACTICAL WORK – serialization and deserialization

Topic 7: Testing the applications (8)

Concepts and examples of software testing
Concepts and examples of MSTest library
Testing REST applications
PRACTICAL WORK – MSTest tests

Topic 8: Tools for managing software development projects (6)

Concepts and examples of code version control systems
Concepts and properties of Git and Github
Using git in the command line
Basic operations on git repository
Using git in Visual Studio
Cloning an existing repository
Testing and packaging application for publishing
PRACTICAL WORK – git, Visual Studio

Topic 9: The process of connecting Frontend and Backend application parts (4)

Cloning an existing frontend project and its deployment
Connecting frontend (a partial black-box) and a backend application
Resolving frequent issues
Cross-Origin Resource Sharing (CORS)
Resolving CORS issues
PRACTICAL WORK – connecting front and back ends of an application

Topic 10: Security (12)

Definition, properties, and examples of security in computer systems
Creating login forms and implementing authorization and authentication procedures
Concepts and properties of HTTP Basic Auth
Concepts and properties of token authentication
PRACTICAL WORK – security mechanisms

Topic 11: Project implementation (8)

Discussing the main issues that arose during the project implementation
PRACTICAL WORK – finishing the project model
PRACTICAL WORK – finishing the backend implementation
PRACTICAL WORK – writing the documentation
PRACTICAL WORK – performing cleanup and fixing issues in the github repository

GRADING

Students’ grading will be undertaken after the completion of the lectures
Students will have to pass a project worth 60 points

LITERATURE

Troelsen, Andrew – “Pro C# 5.0 and the .NET 4.5 Framework”, 6th Edition, 2012
Adam Freeman – “Pro ASP.NET MVC 5 (Expert’s Voice in ASP.Net)”, 5th ed. Edition, 2013
Jon Galloway – “Professional ASP.NET MVC 5”, 1st Edition, 2014
“Learn About ASP.NET Web API” [Online]. Available: https://www.asp.net/web-api.

Curriculum

Web Front-End

88 classes

GOAL

The course will introduce basic concepts and methodology of web front-end development based on modern HTML, CSS, JavaScript, and the React framework.

OUTCOME

Upon completion the student should be able to: understand the large-scale structure of complex web applications, design web pages optimized for web application use and style them using CSS. Code competently in JavaScript and understand its role in the web ecosystem. Exercise command-line control over the NodeJS/npm environment, and know how to leverage it for purposes of web development. Develop simple web applications based on the React framework.

MODULE DESCRIPTION

Phases of modern JavaScript application development. Frameworks, libraries, and the interaction thereof. Working with JavaScript and the Visual Studio Code rich code editor. Necessary command line tools and package managers for working with a JavaScript project. The React framework. A JSX-centric approach to interface design. Separate styling of interface elements using CSS technologies. Reusable components in React and the implementation of directives for looping and conditionals using JSX. Guidelines and heuristics for modern interface design. The MVC pattern and program decoupling using dependency injection and binding. Information flow in interface design. Alternative libraries and frameworks.

TEACHING METHODOLOGY

The course centers around an even mixture of practical work and interactive lectures, seeking to maintain a 1:1 ratio between practical exercises and interactive lectures presenting the theoretical foundations of front-end design in general and on the web, in particular.

Practical exercises are divided between problem-solving practice in which complex problems are solved through communal effort and individual work bolstered by consultations by the teacher.

LEARNING OUTCOMES

Upon completion the student should be able to understand the large-scale structure of complex web applications, design web pages optimized for web application use and style them using CSS. Code competently in JavaScript and understand its role in the JavaScript ecosystem. Exercise command-line control over the NodeJS/npm environment, and know how to leverage it for purposes of web development. Develop simple web applications based on the React framework.

Subject 1. WEB PROTOCOLS (3)

A review of previously learned on the subject of computer networks
Client/server architectures versus peer-to-peer architectures
The concept of a protocol in communications
HTTP/HTTPS
Expected responses and requests in HTTP/HTTPS
The nature and operation of a web browser
The use of tools for debugging HTTP communication and web development in general.
PRACTICAL EXERCISE: Studying the responses of a web application and examining web headers.

Subject 2. DEVELOPMENT ENVIRONMENT (3)

The toolchain as a concept
The concept of a programmer’s editor
Making the best of the features available in programming editors
Modern programming editors, an overview
Version control and git
Installing the necessary tools: node, and npm.
Differences between windows and unix-like environments: nvm and nvm-windows.
PRACTICAL EXERCISE: Guided and independent setup of a development environment.

Subject 3. WEB DEVELOPMENT OVERVIEW (2)

A short history of web development
What are: HTML, CSS, Flex, JavaScript, and React and how do they fit one another.
What is a library?
Dependency management and npm.
PRACTICAL EXERCISE: Installing a library via npm nad examining what, precisely, gets installed.

Subject 4. WEB APP APPEARANCE I (8)

Markup languages
The difference between markup and programing
Examples of markup languages: Markdown
HTML5: structure and function, tags, attributes, and contents.
Semantic tags versus appearance tags.
Specifying the header via meta tags.
Linking assets to the main HTML document.
PRACTICAL EXERCISE: Writing HTML pages for various tasks:
Informative content-focused page.
Smart home interface page.
Data entry/form page.

Subject 5. WEB APP APPEARANCE II (8)

The difference between style and structure of a document.
CSS: versions, purpose, and structure.
CSS selectors
CSS attributes
CSS functions
Color models & specifying color
CSS units
Page layout using CSS
Responsive CSS
CSS and accessibility
PRACTICAL EXERCISE: Styling the examples made previously. Using CSS to impose appearance and layout on a predefined structure.

Subject 6 WEB PROGRAMMING I (8)

What is JavaScript?
Why work in JavaScript?
Hidden errors, weak typing, and the compatibility issue.
The universal use of transpiling
JavaScript presented through compare and contrast with the Java programming language.
Declaring variables: let and const.
Types, arrays, and objects.
PRACTICAL EXERCISE: Fizzbuzz in JavaScript. Finding prime numbers. Sorting arrays. Computing Fibonacci numbers. Computing arbitrary number sequences.

Subject 7. WEB PROGRAMMING II (8)

JavaScript functions: anonymous functions, and lambda expressions.
JavaScript classes. Objects, prototypes, and new style declarations.
Let and var.
Specialized loops and control structures.
Low-level interaction with the web page.
PRACTICAL EXERCISE: Towers of Hanoi, Lengton’s Ant, The Game of Life. Learning how to model complex tasks.

Subject 7. WEB PROGRAMMING III (6)

Using JavaScript to control the web page without frameworks.
Representing Web pages using DOM.
How a conventional web app would work.
Why frameworks were invented.
PRACTICAL EXERCISE: Wiring a previously created and styled data entry form.

Subject 9. REACT — INTRODUCTION (10)

What is React? What is its purpose?
An analysis of a simple React project as an example of a complexly configured solution.
React and tooling.
React CLI
React JSX basics
React Rendering
React components and props
React state and lifecycle
Consuming RESTful APIs
PRACTICAL EXERCISE: Wiring a previously created and styled data entry form to communicated with an React application.

Subject 10. ADVANCED REACT (10)

Handling React events
Conditional rendering
Lists and keys for displaying multiple data
Forms
Managing state in complex React contexts
React router
PRACTICAL EXERCISE: Writing a simple application which fetches data from a HTTP server and displays it in multiple views.

GRADING

Student grading is combined with the previous course.
The grading is undertaken after both courses are complete and consists of a complete web application: front- and back- end.
The web application counts for 60% of the course grade, in total.
The application is graded on functionality, user-friendliness, and robustness.

LITERATURE

Aravind Shenoy, “Thinking in HTML”
E.A. Meyer, E. Weyl, “CSS: The Definitive Guide: Visual Presentation for the Web”
D. Crockford, “JavaScript: The Good Parts”
D. Flannagan, “JavaScript: The Definitive Guide”
https://reactjs.org/docs