Lab Schedule »

Week	Description	Exercise	Solution
01 24/01	Web Development Environment. Learn about the Web Applications: Websites, RESTful APIs Learn about entities in Web Application Development: Browser, Web Server, Application Server, Database Server Learn about different Web Servers / Application Servers: Apache HTTP Server, NGINX Web Server, Node.js, Apache Tomcat Learn about different Databases: MySQL, MariaDB, Postgresql, MongoDB Install XAMPP stack Install Node.js	LAB01
02 31/01	Introduction to HTML and CSS 1. HTML elements, tags and attributes CSS properties	LAB02 exercises, (LAB02 Extended) surfer.txt, puerto-escondido-surfer.jpg
03 07/02	Introduction to HTML and CSS 2. Block, inline, inline-block CSS class selector CCS id selector CSS Pseudo-classes	LAB03 exercises, (LAB03 Extended) lab3-exercise1.html, lab3-exercise2.html
04 14/02	Introduction to HTML and CSS 3. CSS Box Model CSS Positioning: static, fixed, absolute, relative Case study: Squarespace layout Random useful CSS: background properties, web fonts, web icons, overflow/shadow properties	LAB04 exercises, (LAB04 Extended) lab4-exercise1.html, lab4-exercise2.html, ucy-logo.png, ucy-cafe.jpg
05 21/02	Introduction to HTML and CSS 4. Responsive Webpage Development Using meta viewport tag CSS media queries Relative font sizes	LAB05, lab5-exercise1.html, ucy-cafe.jpg
06 28/02	Bootstrap front-end web development framework. Layout using container and container-fluid classes Grid system: row, col-*-* classes Typography Images Tables Figures Alerts Badges Buttons, button groups Cards, card groups Carousel Dropdown Forms: label, input, select, textarea Modal Nav, navbar Assignment 1 Announced	LAB06, lab6-images.zip
07 07/03	Introduction to JavaScript 1. Conditional statements (if, else) for, while loops Function definition Variable declaration: var, let, cons Arrays Objects and JavaScript Object Notation (JSON)	LAB07 exercises, (LAB07 Extended)
08 14/03	Introduction to JavaScript 2. Event-driven programming Document Object Model (DOM) Adding/removing event listeners DOM Object Properties: add/remove elements/classes Form manipulation AJAX (Asynchronous JavaScript and XML) for client-server communication Fetch API and XMLHttpRequest for asynchronous communication	LAB08 exercises, (LAB08 Extended) lab8-exercise1.html
09 21/03	Introduction to PHP 1. GET msg via HTML form submission and receive data using PHP GET msg via JavaScript (submit form or XMLHttpRequest) and receive data using PHP POST msg via HTML form submission and receive data/upload file using PHP POST msg via JavaScript (submit form or XMLHttpRequest) and receive data using PHP Connect to MySQL server Select database Run queries on tables and get results Iterate over results Close connection	LAB09, (LAB09 extended), ZIP, exercise1.html, exercise1.js
10 22/03	RESTful API Client. Resources and URIs HTTP Request Methods: GET, POST, DELETE, PUT, HEAD, OPTIONS HTTP Request Headers HTTP Status/Response Codes HTTP Response Headers RESTful APIs Use Postman RESTful API Client Application to send HTTP requests Use Spring Boot framework to develop RESTful API Client and in Java Use Jersey framework to develop RESTful API Client in Java	LAB10, RestClientBootApplication.java, Nationalize.java, Country.java
11 04/04	RESTful API Server. Use Spring Boot framework to develop RESTful API Server in Java	LAB11, RestAPISecureServer.zip
12 11/04	Introduction to Node.js and Express.js. Node.js is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts. Express.js is a fast, unopinionated, minimalist web framework for Node.js	LAB12, library.sql	exercise1_solution.js
13 02/05	From Web Applications to Mobile Applications. Learn about Native and Hybrid mobile applications. Learn how to convert a web application to a mobile application. Introduction to Apache Cordova and Ionic Framework.	LAB13, myapp.zip