Course: Study / Web Design and Web Development

Topic outline

General

Collapse all Expand all
Prerequisites for this course
- Book
  
  Introduction to WEB Book
- Book
  
  Introduction to WEB coding Book
- Book
  
  Simple HTML file Book
- Book
  
  Comments and Lists Book
- Book
  
  Media Book
- Book
  
  Links Book
- Book
  
  Introduction to CSS Book
- Book
  
  Inserting CSS Book
- Book
  
  Applying CSS Book
Module01: Advanced HTML and CSS
Selectors. Table-HTML. Table-CSS. Div - Span elements

Selectors

Table-HTML

Table-CSS

Div - Span elements

Selectors. In this submodule, we will learn how to use CSS selectors to "find" and select HTML elements based on their name, id and class. We also learn to apply CSS rules to multiple classes and to specific content in a list.

Table-HTML. Tables are used very often. We use them to display visually data organized in rows and columns. In this submodule and we will learn how to use HTML markup to construct a table.

Table-CSS. In this submodule, we will learn how to use CSS rules, and classes to apply different style to various elements of a table.

Div - Span elements. In this submodule, we will learn how to use the block element DIV and the inline element Span. Also, we will learn how to align elements next to each other using the properties float and clear.
- Please, create a folder called yourNameWEB2 on the Desktop of your computer.
  
  In the folder yourNameWEB2, create a new subfolder advanced.
- Page
  
  The Browser and the Visual Studio code editor Page
  
  The Visual Studio code editor is installed into the lab's computers
- Page
  
  Aims - Expected outcomes- Key concepts Advanced HTML and CSS Page
- Book
  
  Submodule 1.1: Selectors Book
  
  View
  id
  
  Class and multiple classes
  
  specific context (ul li)
  
  Group the selectors
- Book
  
  Submodule 1.2: HTML on Tables Book
  
  View
  The elements of a table
  
  Construction of a table
- Book
  
  Submodule 1.3: CSS on tables Book
  
  View
  Style properties
  
  Class rules
- Book
  
  Submodule 1.4: More elements Book
  div element
  
  span element
- Please, familiarize with the HTML and CSS validators to be sure that your code is correct every time! You can also install the HTMLhint extension in your Visual Studio code editor to help you.
Module02: Introduction to WEB tools
Tools, Version control, WEB Server

Popular tools

Version control. Git - Github

WEB Server

Popular tools. In this submodule, you will be given a quick overview of several tools, terminal, node.js, Visual Studio Code.
You will also see the way we use these.

Version control. Git - Github. In this submoldule, you will learn what version control is.
This submodule also introduces the first steps to set up your Git and Github repositories and establish communication between these.

WEB Server. In this submodule, you will learn to upload files to our WEB Server via FileZilla.
You also learn how to grab the URL and serve your site.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Introduction to WEB tools Page
  
  View
- Book
  
  Submodule 2.1: Popular tools Book
  
  View
  Terminal
  
  Node.js - NPM
- Book
  
  Submodule 2.2: Version control. Git - Github Book
  
  View
  Version Control Systems
  
  Git - Github commands
  
  Communication between local and remote directories
- Book
  
  Submodule 2.3: WEB Server Book
  
  View
  Internet
  
  WEB Server
  
  SFTP - Filezilla
  
  Upload files to a WEB Server
  
  Needed URL to serve from a WEB Server
Module03: Introduction to Bootstrap
Introduction to Bootstrap

Front-end frameworks

Getting Started with Bootstrap

Responsive Design and Bootstrap Grid System

Front-end frameworks. In this submodule, you will be given a quick overview of front-end UserInterface frameworks, and an introduction to Bootstrap and JavaScript frameworks.
You will also be informed what “responsive web design” and "cross-browser compatibility" are.

Getting Started with Bootstrap. This submodule introduces the first steps to set up your first web page by using Bootstrap.
You will als learn about Bootstrap typography.

Responsive Design and Bootstrap Grid System. In this submodule, you will learn the Bootstrap grid system and Bootstrap's support for mobile first responsive design.
You also learn how to customize some of the Bootstrap classes in a separate CSS file.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions: Introduction to Bootstrap Page
- Book
  
  Submodule 3.1: Front-end frameworks Book
  
  View
  What are front-end frameworks?
  
  Why use Front-end frameworks?
  
  Bootstrap Framework
- Book
  
  Submodule 3.2: Getting Started with Bootstrap Book
  
  View
  Setting up the Project Folder
  
  Downloading Bootstrap
  
  Getting your Web page Bootstrap ready
  
  Bootstrap typography
- Book
  
  Submodule 3.3: Responsive Design and Bootstrap Grid System Book
  
  View
  Responsive WEB design
  
  Bootstrap grid system - container, row, column
  
  Mobile first - media queries - viewport meta tag
  
  Customize the CSS classes - external style sheet - inline CSS
  
  Flex order - position
Module04: Bootstrap CSS Components I
Bootstrap CSS Components

Navigation - Icons

Displaying Content - Media - Alerting Users

Navigation - Icons. In this submodule you will be given an overview of navigation design and the importance of providing appropriate navigation support within your website.
You will also be informed about the use of icon fonts in web page design

Displaying Content - Media - Alerting Users. In this submodule, you will learn the support for tables in Bootstrap and about the component called card that enables the display of content in myriad ways.
You will also learn the use of images and media on websites, the use of these as thumbnails and the Bootstrap classes to support responsiveness.
We will finally examine various ways of delivering alert information to users
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Bootstrap CSS Components Page
- Book
  
  Submodule 4.1: Navigation - Icons Book
  Navigation
  
  Navigation bars
  
  Breadcrumbs
  
  Font Awesome
- Book
  
  Submodule 4.2: Displaying Content - Media - Alerting Users Book
  Tables
  
  Cards
  
  Images
  
  Media Object
  
  Alerting Users
Module05: JavaScript I, Insert - Data types
Introduction to JavaScript. Simple file. Data types

Introduction to JavaScript

Simple JavaScript file

Data types

Introduction to JavaScript. JavaScript is a programming language; this means that is able to make decisions based on data or to do things repetitively. Moreover, it adds interactivity to the browser and enables enriched browser-server communication. JavaScript is the most popular language among web developers.

Simple JavaScript file. In this submodule, we will learn how to use variables and simple interactions (alert, prompt) to create simple files. We will learn about developer tools and how to check our code for errors. We will also learn how to add JavaScript comments.

Data types. In this submodule we will learn about types of data, how to find the type of a variable and how to change its type or its value (arithmetic and assignment operators). We will also learn some of the string and number methods.
- Go to the location of your folder on your desktop and ...
  
  create a sub-folder with the name yourNameWEB2JS
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions JavaScript I Page
  
  View
- Book
  
  Submodule 5.1: Introduction to JavaScript Book
  Where can JavaScript be used?
  
  JavaScript is the is the dominant web programming language
  
  JavaScript is a programming language
- Book
  
  Submodule 5.2: Simple JavaScript file Book
  
  View
  JavaScript in HTML file
  
  alert interaction
  
  Variables
  
  prompt interaction
  
  Comments in JavaScript
  
  Developer tools (console)
- Book
  
  Submodule 5.3: JavaScript data types Book
  
  View
  Number
  
  String
  
  Boolean
  
  Operators
Module06: JavaScript II, Decisions
JavaScript with HTML and CSS. Making Decisions. Applying the “if” statements

JavaScript with HTML and CSS

Making Decisions

Applying the “if” statements

JavaScript with HTML and CSS. In this submodule , we will use JavaScript variables, a simple function and a simple event (onclick) to combine HTML and CSS with JavaScript. This model of event-driven programming—in which your code listens for some action on the page and then performs some function in response—is a common paradigm in JavaScript development.

Making Decisions. Very often, when we write code, we need to have different options for the results of different conditions. In this submodule , we will learn to use the “if statements” to make decisions. We will also see the functionality of comparison and logical operators.

Applying the “if” statements. In this submodule and we will learn to make decisions using the “confirm()” interactions. We also learn to make more complicated decision using nested conditionals.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions JavaScript II Page
  
  View
- Book
  
  Submodule 6.1: The model of event-driven programming Book
  
  View
  Function
  
  Event
  
  External Javascript file
  
  JavaScript - HTML methods to execute events
- Book
  
  Submodule 6.2: Making Decisions Book
  
  View
  Comparison operators
  
  If statements
  
  Logical operators
- Book
  
  Submodule 6.3: Applying the "if" statements Book
  
  View
  Confirm interaction
  
  Nested conditionals
  
  Temperature converter
Module07: JavaScript III, Arrays - Loops
JavaScript arrays. Simple loops. Word counter.

JavaScript arrays

Simple loops

Word counter

JavaScript arrays. JavaScript arrays are used to store multiple values in a single variable. In this submodule , we will learn to create arrays and methods to access and modify the arrays.

Simple loops. Loops offer a quick and easy way to do something repeatedly. In this submodule, we will learn how to use the “for’ and “while” loops. We will also learn to iterate over an array.

Word counter. The HTML objects are often accessed using arrays. In this submodule we will use the string.split() method to divide a string into an array of words and we will learn how to create a simple word counter.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions JavaScript III Page
  
  View
- Book
  
  Submodule 7.1: Arrays Book
  
  View
  Definitions
  
  Accessing an array
  
  Array methods
- Book
  
  Submodule 7.2: Loops Book
  
  View
  for loop
  
  while loop
- Book
  
  Submodule 7.3: Word count Book
  
  View
  JavaScript word counter
Module08: Forms
The HTML of forms. The CSS of forms. Form validation.

The HTML of forms

The CSS of forms

Form validation

The HTML of forms. Forms are commonly used to collect user input and send them to the WEB Server. In this submodule, we will learn to create well-structured and accessible forms using HTML markup.

The CSS of forms. In this submodule, we will learn how to style a form and enhance its usability using CSS rules. We will also learn to style a submit-button.

Form validation. Form validation with immediate validation messages creates a better user experience rather in the case where you receive messages only after submitting the form. In this submodule we will enrich the HTML validation and we will add JavaScript features to make the form more user- friendly.
- Go to the location of your folder on your desktop and ...
  
  create a sub-sub-folder with the name images in the folder yourNameWEB2JS
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Forms Page
  
  View
- Book
  
  Submodule 8.1: The HTML of forms Book
  
  View
  role and creation of a form
  
  elements
  
  attributes
  
  accessibility
- Book
  
  Submodule 8.2: The CSS of forms Book
  
  View
  fieldset
  
  submit input
  
  required attribute
- Book
  
  Submodule 8.3: Form validation Book
  
  View
  HTML validation
  
  JavaScript validation
Module09: Bootstrap CSS Components II
Bootstrap CSS Components II

Buttons - Forms

Buttons - Forms. In this submodule you will learn about the support for user input through the use of buttons and forms in a web page.
We review Bootstrap button classes and Forms classes.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Bootstrap CSS Components II Page
  
  View
- Book
  
  Submodule 9.1: Buttons - Forms Book
  
  View
  Buttons
  
  Button Groups
  
  Forms
  
  Input groups
Module10: Bootstrap Javascript Components
Tabs and Tabbed Navigation. Accordion. Revealing Content. Carousel

Tabs and Tabbed Navigation

Accordion

Revealing Content

Carousel

Tabs and Tabbed Navigation. In this submodule, we will design a tabbed navigation for the content.
We will aslo use tab panes to organize the content and navigate.
Tabs require Javascript support to be enabled for navigating the content.

Accordion. In this submodule, we will explore the use of the collapse Javascript plugin together with card component to create an accordion to show/hide content in a web page.

Revealing Content. In this submodule, we will look at the ways of presenting information to users by overlaying the information on top of the page.
We will examine how to add tooltips to be displayed when the user hovers over an area, and modals to be displayed when the user clicks on a link or button of the page.

Carousel. In this submodule, we will create a Carousel and we will apply images to it.
We will also add controls to the carousel to manually control it.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Bootstrap JS Components Page
- Book
  
  Submodule 10.1: Tabs and Tabbed Navigation Book
  
  View
  Tab Navigation Elements
  
  Tab Content
  
  Tab-content CSS
- Book
  
  Submodule 10.2: Accordion Book
  
  View
  Collapse plugin
  
  Cards
  
  Accordion
- Book
  
  Submodule 10.3: Revealing Content Book
  
  View
  Tooltip
  
  Modal
- Book
  
  Submodule 10.4: Carousel Book
  
  View
  Adding carousel
  
  Adding CSS Classes
  
  Adding Carousel Controls
Module11: Completing Bootstrap
Bootstrap and jQuery. It's your time! Building the application

Bootstrap and jQuery

It's your time!

Building the application

Bootstrap and jQuery. In this submodule, we examine the use of Bootstrap, JQuery and JavaScript together to control Bootstrap JS components

It's your time!. It's time to create your own page or modify the existing pages.

Building the application. In this submodule, we will build a distribution folder containing the files that can be deployed on a web server hosting your project.
This distribution folder would be built from your project files using various NPM packages and scripts.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Completing Bootstrap Page
- Book
  
  Submodule 11.1: Bootstrap and jQuery Book
  
  View
  JQuery
  
  Bootstrap's JS components
- Book
  
  Submodule 11.2: It's your time! Book
  
  View
  
  It's your time!
- Book
  
  Submodule 11.3: Building the application Book
  
  View
  dist folder
  
  Minify
  
  Concatenate
  
  Uglify
Module12: JavaScript Functions and Objects
JavaScript Functions and Objects. Constructor functions

JavaScript Functions

JavaScript Objects

Constructor functions

JavaScript Functions. In this submodule, we will enhance your knowledge about functions.
We will differentiate between parameters and arguments of a function and we will discuss the role of the "return" functionality.

JavaScript Objects. Objects are variables themselves who act as containers for many variables.
In this submodule, we will learn how to define, access, add, change and delete the properties and methods of an object.

Constructor functions. With constructor functions, we can create as many replicates of an object as we may need, without writing excess code.
In this submodule, we will learn about the syntax of a constructor function and how to create objects and manipulate their properties and methods.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions JavaScript Functions and Objects Page
  
  View
- Book
  
  Submodule 12.1: JavaScript Functions Book
  What are functions?
  
  Parameters and Arguments
  
  Return
- Book
  
  Submodule 12.2: JavaScript Objects Book
  
  View
  Objects Introduction
  
  Access Object Properties
  
  Changing, Adding and Deleting properties
  
  Object Methods
  
  The this keyword
- Book
  
  Submodule 12.3: Constructor functions Book
  
  View
  Introduction to Constructor
  
  Constructor syntax
  
  Methods inside Constructor Functions
  
  Adding Properties and Methods
Module13: JavaScript ES6, Object Notation- Typescript
Introduction to ES6. JavaScript classes. Object Notation

Introduction to ES6

JavaScript classes

Object Notation

Introduction to ES6. ES6 is a major update to JavaScript that includes a lot of new features. In this submodule we will differentiate between the keywords "let" and "var".
We will also see the arrow functions that make the code more readable and structured.

JavaScript classes. Classes introduced in the ES6 version of JavaScript and in general, their role is to provide us with a more convenient syntax to create constructor functions.
Using JavaScript classes, we can encapsulate all the "characteristics" of an object inside them.

Object Notation. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family languages. These properties make JSON an ideal data-interchange language.
In this submodule we will learn to access, format and validate JSON.
- Page
  
  Aims - Expected outcomes- Key concepts- Instructions ES6, Object Notation Page
  
  View
- Book
  
  Submodule 13.1: Introduction to ES6 Book
  
  View
  Let vs Var
  
  Advantages of let
  
  Arrow functions
- Book
  
  Submodule 13.2: JavaScript classes Book
  
  View
  Introduction to JavaScript classes
  
  The syntax of JavaScript classes
  
  Create objects with JavaScript classes
  
  Methods inside JavaScript classes
- Book
  
  Submodule 13.3: Object Notation Book
  
  View
  What is JSON?
  
  JSON structure
  
  Arrays as JSON
- Page
  
  A little bit about Typescript Page
Module14: DOM
Introduction to DOM. DOM methods/properties and DOM Recursion. DOM events

Introduction to DOM

DOM methods/properties and Recursion

DOM events

Introduction to DOM. DOM (Document Object Model) includes all the objects of an HTML page and enable us to manipulate them. In this submodule we will understand the DOM structure and learn the Parents-Children-Siblings relationships and their importance.
We will also understand what are Nodes and DOM traversing. Finally, we will see how we can apply CSS rules using DOM.

DOM methods/properties and Recursion. In this submodule we will focus on DOM methods and properties and explore how we can use them to dynamically modify the HTML document. We will also introduce the concept of Recursion and see an example where this method can be used to traverse the entire DOM.

DOM events. Using events we can interact with the HTML page and perform actions. In this submodule we will learn how we can apply event listeners using DOM to be able to handle multiple actions on the same event. We will also explain the difference between Capturing and Bubbling. Finally, we will see how we can use Keyboard Events.
- Page
  
  Aims - Expected outcomes- Key concepts- Instructions DOM Page
  
  View
- Book
  
  Submodule 14.1: Introduction to DOM Book
  
  View
- Book
  
  Submodule 14.2: DOM methods/properties and DOM Recursion Book
  
  View
- Book
  
  Submodule 14.3: DOM events Book
  
  View
Module15: Images- The Canvas HTML element
Canvas HTML element. The RGBAs of images. Image manipulation.

Canvas HTML element

The RGBAs of images

Image manipulation

Canvas HTML element.The HTML5 canvas element is a workspace upon which you draw (and manipulate) images and text. In this submodule , we will learn how to create canvas elements . We will also learn methods to create, access and modify text, shapes and images on the fly, via JavaScript.

The RGBAs of images.One of the most common ways to represent color on the web is via RGBA. An RGBA color value is specified with rgba (red, green, blue, alpha), the alpha parameter represents the transparency-opacity of a pixel. In this submodule , we will learn how to create the bitmap of an image which is an array that maps these four numbers to each pixel.

Image manipulation. In this submodule we will learn to combine the canvas element with JavaScript methods to manipulate the bitmap of an image and change its colors.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Images- The Canvas HTML element Page
  
  View
- Book
  
  Submodule 15.1: Canvas HTML element Book
  
  View
  Text
  
  Drawing
  
  Image
- Book
  
  Submodule 15.2: The RGBAs of image Book
  
  View
  RGB model
  
  RGBA model
  
  Bitmap data
- Book
  
  Image manipulation Book
  
  View
  Manipulate the colors
Module16: p5.js Ι Basics Shapes Color
p5.js Introduction. Basics of p5.js. Colors.

p5.js Introduction

Basics of p5.js

Colors

p5.js Introduction. In this submodule we will see the functionality of the p5.js library and we will set up a web project to use the p5.js library.

Basics of p5.js. In this submodule we will learn the basic functions of p5.js.
We will also learn to write code to sketch and move the primitive shapes.

Colors. In this submodule we will learn to add color and transparency in our p5 project.
We will also learn to apply rules and p5 functions of coloring.
- Page
  
  Aims - Expected outcomes- Key concepts- Instructions p5.js I Page
  
  View
- Book
  
  Submodule 16.1: p5.js Introduction Book
  
  View
  Introduction to p5.js
  
  Examples of p5.js projects
  
  How p5.js works
- Book
  
  Submodule 16.2: Basics of p5.js Book
  
  View
  setup() and draw() functions
  
  createCanvas
  
  Primitives Shapes
- Book
  
  Submodule 16.3: Colors Book
  
  View
  Color functions
  
  Color rules
  
  Alpha value - Transparency
Module17: p5.js II Events Functions Transformations
p5 Events. Advanced p5 functions and transformations

p5 Events

Advanced p5 functions and transformations

p5 Events. In this submodule, we will learn to use P5.js built-in events (mouseX and mouseY, mouseClicked and mouseIsPressed) that enable us to apply interactivity in our canvas.

Advanced p5 functions and transformations. In this submodule, we will learn to use advanced functions (loop, noloop, redraw, clear, random) and transformations (translate, rotate) that enable us to apply interactivity in our canvas.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions p5.js II Page
  
  View
- Book
  
  Submodule 17.1: Events Book
  
  View
  Introduction to p5.js events
  
  mouseX and mouseY
  
  mouseClicked()
  
  mouseIsPressed
- Book
  
  Submodule 17.2: Advanced p5 functions and transformations Book
  
  View
  noLoop and loop
  
  redraw
  
  clear
  
  translate and rotate
  
  random
Module18: p5.js III Image Sound Video
Image in p5. Video in p5. Sound in p5.

Image in p5

Video in p5

Sound in p5

Image in p5.In this submodule, we will learn how we can insert images in p5.js. Moreover, we will see how we can manipulate their pixel and display the result in our canvas.

Video in p5.In this submodule, we will see how we can insert videos in p5.js and create different things by "playing" with their pixel. We will also see how we can capture video from our webcam and display it on our canvas.

Sound in p5. In this submodule, we will learn how we can insert sound in p5.js using the appropiate p5.js library. We will also see how we can create controls for audio play/pause. Moreover, we will learn how we can capture audio from our computer's microphone and use it to create sketches that "respond" to this audio.
- Download the zip file module18Assets ,unzip it and place it inside the p5yourName/module10 folder.
  
  You will see the three folders images, sounds, videos which contain the media files of this module.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions p5.js III Page
  
  View
- Book
  
  Submodule 18.1: Image in p5.js I Book
  
  View
  Images in p5.js
  
  get() and set()
  
  pixels array
- Book
  
  Submodule 18.2: Video in p5.js Book
  
  View
  Insert video
  
  play with video
  
  createCapture()
- Book
  
  Submodule 18.3: Sound in p5.js Book
  
  View
  load and play sound
  
  play and pause buttons
  
  capture sound
Module19: Angular I Basics - Components
Angular Introduction. Getting Started with Angular. Angular Components.

Angular Introduction

Getting Started with Angular

Angular Components

Angular Introduction. Angular is a platform that makes it easy to build applications with the web.
Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

Getting Started with Angular. In this submodule, we will learn some basics of Angular and how to configure an Angular application using the Angular-CLI, the command line tool. We will also learn how to add Bootstrap and Font Awesome in this application.

Angular Components. In this submodule, you will learn about Angular components and how we construct an Angular component and design its template to view.
- Page
  
  Aims - Expected outcomes- Key concepts- Instructions Angular I Page
  
  View
- File
  
  Submodule 19.1: Angular Introduction File
  
  View
  JavaScript framework
  
  Angular functionality
  
  Single Page Application
- Book
  
  Submodule 19.2: Getting Started with Angular Book
  
  View
  Installing Angular
  
  Installing Bootstrap
  
  Adding Font Awsome
  
  Testing Project
- Book
  
  Submodule 19.3: Angular Components Book
  
  View
  Component
  
  Interpolation
  
  Structural directives
  
  Pipes
Module20: Angular II DataBinding Services DI
Angular Description. Data Binding. Services and Dependency Injection

Angular Description

Data Binding

Services and Dependency Injection

Angular Description. In this submodule, we will overview the architecture of an Angular application and we will examine the functionality of the Angular files.

Data Binding. In this submodule, we will learn about data binding.
Data binding is a mechanism for coordinating what users see, with application data values.
Binding types can be grouped into three categories distinguished by the direction of data flow: from the source-to-view, from view-to-source, and in the two-way sequence: view-to-source-to-view

Services and Dependency Injection. In this submodule, we will learn about Services and Dependency Injection.
Angular distinguishes components from services in order to increase modularity and reusability.
A service provides, stores, and interacts with data. After injected into components, using dependency injection mechanism, fetshes the data into components.
- Page
  
  Aims - Expected outcomes- Key concepts- Instructions Angular II Page
  
  View
- File
  
  Submodule 20.1: Angular Description File
  
  View
  The architecture of an Angular application
  
  Configuration files
  
  index.html, main. ts
  
  app.component files
  
  Angular basic glossary
- File
  
  Submodule 20.2: Data Binding - Study File
  
  View
  
  In this submodule, we will learn about data binding and how data binding enables the flow of information between the component and its template. We will learn about interpolation, property attribute and event binding and the use of two-way data binding.
- Book
  
  Submodule 20.2: Data Binding - Practice Book
  
  View
- File
  
  Submodule 20.3: Services and Dependency Injection - Study File
  
  View
  
  In this submodule, you will learn about the basics of Angular Services and how they interact with Angular components.
  You will also be introduced to the basics of Dependency Injection (DI).
- Book
  
  Submodule 20.3: Services and Dependency Injection - Practice Book
  
  View
Module21: Angular III Routing SPA
Angular Routing. Angular Single Page Applications

Angular Routing

Angular Single Page Applications

Angular Routing. In this submodule, we’ll introduce Angular Router and learn how it can update our application when the browser URL changes and vice versa.
The Router allows us to navigate to different pages without reloading the entire application.

Angular Single Page Applications. In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client.
In Single-Page Applications (SPAs) the entire page is loaded in the browser after the initial request, but subsequent interactions take place through Ajax requests.
This means that the browser has to update only the portion of the page that has changed; there is no need to reload the entire page.
In this submodule we will learn to set up the router module to enable navigation among multiple component views.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Angular III Page
  
  View
- File
  
  Submodule 21.1: Routing - Study File
  
  View
  Traditional Routing
  
  JavaScript Routing
  
  Angular Routing
  
  How Angular Route works
  
  Angular Router Terms
- Book
  
  Submodule 21.1: Routing - Practice Book
  
  View
- File
  
  Submodule 21.2: Single page Applications - Study File
  
  View
  JavaScript Array filter() Method
  
  Single Page Application
  
  Deep linking
  
  Angular Router: Parameters
  
  ActivatedRoute Service
- Book
  
  Submodule 21.2: Single Page Applications - Practice Book
  
  View
Module22: Angular IV Fetching JSON data from a Server
Reactive programming. json-server. HTTP Client

Reactive programming

json-server

HTTP Client

Reactive programming. In this submodule, we will introduce the basic concepts of Reactive Programming and we will prepare our application to fetch data from a JSON Server.

json-server. In this submodule, we will set up a local json-server and we will examine how this server, serves JSON data-files and other resources like images.

HTTP Client. In this submodule, we will configure the services and the components of our application to fetch data from our server and display them in a browser.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Angular IV Page
  
  View
- Book
  
  Submodule 22.1: Angular and Reactive programming - Practice Book
  
  View
- Book
  
  Submodule 22.2: Setting up a Server using json-server Book
  
  View
- Book
  
  Submodule 22.3: Angular HTTP Client - Practice Book
  
  View
Module23: Angular V Storing JSON data on a Server
Forms. Sending data to the server. Building and Deploying

Forms

Sending data to the server

Building and Deploying

Forms. In this submodule, we will learn to create reactive forms in your Angular application.
While the user writes, the value of the input will be displayed above the form.
When the user submits the form, the values will be displayed in the existing unordered list.

Sending data to the server. In this submodule, we will learn how to persist changes in the data back to the server.
We will use the HttpClient.post method available on objects to save the feedback submitted by users to the server.

Building and Deploying. In this submodule, we will learn to use the Angular CLI to build a distribution folder with the set of application files that can be copied to the json-server to deploy the Angular application.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Angular V Page
  
  View
- Book
  
  Submodule 23.1: Prepration Book
  
  View
- File
  
  Submodule 23.2: Creating new data - Forms - Study File
  
  View
  Angular Forms
  
  Reactive Forms
  
  Reactive Form Classes
  
  Form Builder
- Book
  
  Submodule 23.2: Creating new data - Forms- Practice Book
  
  View
- Book
  
  Submodule 23.3: Sending data to the server Book
  
  View
  HttpClient.get
  
  HttpClient.post
- Book
  
  Submodule 23.4: Building and Deploying the Angular Application Book
  
  View
Module24: Wordpress I

Not available
Module25: Wordpress II

Not available
Topic 27

Not available

Topic outline

General

Prerequisites for this course

Module01: Advanced HTML and CSS

Selectors. Table-HTML. Table-CSS. Div - Span elements

Module02: Introduction to WEB tools

Tools, Version control, WEB Server

Module03: Introduction to Bootstrap

Introduction to Bootstrap

Module04: Bootstrap CSS Components I

Bootstrap CSS Components

Module05: JavaScript I, Insert - Data types

Introduction to JavaScript. Simple file. Data types

Module06: JavaScript II, Decisions

JavaScript with HTML and CSS. Making Decisions. Applying the “if” statements

Module07: JavaScript III, Arrays - Loops

JavaScript arrays. Simple loops. Word counter.

Module08: Forms

The HTML of forms. The CSS of forms. Form validation.

Module09: Bootstrap CSS Components II

Bootstrap CSS Components II

Module10: Bootstrap Javascript Components

Tabs and Tabbed Navigation. Accordion. Revealing Content. Carousel

Module11: Completing Bootstrap

Bootstrap and jQuery. It's your time! Building the application

Module12: JavaScript Functions and Objects

JavaScript Functions and Objects. Constructor functions

Module13: JavaScript ES6, Object Notation- Typescript

Introduction to ES6. JavaScript classes. Object Notation

Module14: DOM

Introduction to DOM. DOM methods/properties and DOM Recursion. DOM events

Module15: Images- The Canvas HTML element

Canvas HTML element. The RGBAs of images. Image manipulation.

Module16: p5.js Ι Basics Shapes Color

p5.js Introduction. Basics of p5.js. Colors.

Module17: p5.js II Events Functions Transformations

p5 Events. Advanced p5 functions and transformations

Module18: p5.js III Image Sound Video

Image in p5. Video in p5. Sound in p5.

Module19: Angular I Basics - Components

Angular Introduction. Getting Started with Angular. Angular Components.

Module20: Angular II DataBinding Services DI

Angular Description. Data Binding. Services and Dependency Injection

Module21: Angular III Routing SPA

Angular Routing. Angular Single Page Applications

Module22: Angular IV Fetching JSON data from a Server

Reactive programming. json-server. HTTP Client

Module23: Angular V Storing JSON data on a Server

Forms. Sending data to the server. Building and Deploying

Module24: Wordpress I

Module25: Wordpress II

Topic 27