55339 – Programming in C#

Price: $3,986.00 (ex. GST)
Code: 55339
Duration: 5 days
Location: Virtual Classroom (AEST)
Enquire Now
Book Your Course
Clear
    Attendees
    Reset options

Introduction

This five day course introduces HTML5, CSS, and JavaScript and provides the basic skills needed for modern client-side web development. The course focuses on implementing programming logic, defining and using variables, developing user interfaces, capturing and validating user input, storing data, and creating well-structured applications. Students will learn how to build responsive and scalable web applications that can dynamically detect and adapt to different form factors and device capabilities. The labs in this course are selected to support and demonstrate the structure of various application scenarios.

Audience Profile

This course is intended for professional developers who have at least six months of programming experience and who are interested in developing applications using HTML5 with JavaScript and CSS. They should also have some experience of creating web applications and writing simple JavaScript code.

Outcomes

  • Explain how to use Visual Studio 2022 to create and run a Web application.
  • Describe the new features of HTML5, and create and style HTML5 pages.
  • Add interactivity to an HTML5 page by using JavaScript.
  • Create HTML5 forms by using different input types, and validate user input by using HTML5 attributes and JavaScript code.
  • Send and receive data to and from a remote data source by using XMLHTTP Request objects and Fetch API.
  • Style HTML5 pages by using CSS.
  • Create well-structured and easily-maintainable JavaScript code.
  • Write modern JavaScript code and use babel to make it compatible to all browsers.
  • Use common HTML5 APIs in interactive Web applications.
  • Create Web applications that support offline operations.
  • Create HTML5 Web pages that can adapt to different devices and form factors.
  • Add advanced graphics to an HTML5 page by using Canvas elements, and by using and Scalable Vector Graphics.
  • Enhance the user experience by adding animations to an HTML5 page.
  • Use Web Sockets to send and receive data between a Web application and a server.
  • Improve the responsiveness of a Web application that performs long-running operations by using Web Worker processes.
  • Use WebPack to package web applications for production.

Prerequisites

  • None

Onsite training?

If you need training for three or more people, ask us about training at your site. You can enjoy the convenience of reduced travel cost and time, as well as a familiar environment for your staff. Additionally, we can customise the course for your business needs.

Most modern web applications are built upon a foundation of HTML pages that describe the content that users read and interact with, style sheets to make that content visually pleasing, and if needed, JavaScript code to provide a level of interactivity between user and page, and page and server. The HTML markup contains the content by means of semantic elements, which should be independent of the presentation. The CSS stylesheet contains details of how the content should be rendered, which may vary depending on the display device or the intended use (e.g. print or screen). This module reviews the basics of HTML and CSS, and introduces the tools that this course uses to create HTML pages and style sheets.

 

Lessons

  • Overview of HTML
  • Overview of CSS
  • Creating a Web Application

 

Lab 1: Exploring a Conference Application

  • Exploring the a Conference Application
  • Examining and Modifying the Conference Application

 

After completing this module, students will be able to:
  • Explain how to use HTML elements and attributes to lay out a web page.
  • Explain how to use CSS to apply basic styling to a web page.
  • Describe the tools that Microsoft Visual Studio provides for building web applications.

The technologies forming the basis of all web applications; HTML, CSS, and JavaScript, have been available for many years. But the purpose and sophistication of web applications has changed significantly over that time. HTML5, which is the last major revision of the HyperText Markup Language standard, was released in 2008 and continues to be updated. It was designed to support the sophisticated needs of modern web users, such as multimedia and device access, while keeping the language human-readable and backward-compatible with earlier versions of HTML. This module introduces HTML5, describes some of its key features, and demonstrates how to use them to present content, and how to style this content by using CSS.

 

Lessons

  • Creating an HTML5 Page
  • Styling an HTML5 Page

 

Lab 1: Creating and Styling HTML5 Pages

  • Creating HTML5 Pages
  • Styling HTML pages

 

After completing this module, students will be able to:
  • Describe the purpose of and new features in HTML5, and explain how to use new HTML5 elements to lay out a web page.
  • Explain how to use CSS to style the layout, text, and background of a web page.

HTML and CSS provide the structural, semantic, and presentation information for a fairly static web page. However, these technologies alone do not enable a user to interact with a page by using a browser. To implement this functionality, all modern browsers include a JavaScript engine to support the use of scripts in a page. They also implement the Document Object Model (DOM), a W3C standard that defines how a browser should reflect a web page to enable scripting engines to access and alter the contents of that page. This module introduces JavaScript programming and the DOM.

 

Lessons

  • Overview of the JavaScript Language
  • Introduction to the Document Object Model

 

Lab 1: Displaying Data and Handling Events by Using JavaScript.

  • Displaying Data Programmatically
  • Handling Events

 

After completing this module, students will be able to:
  • Describe basic JavaScript syntax.
  • Write JavaScript code that uses the DOM to alter and retrieve info from a web page.

Web applications frequently need to gather user input to perform their tasks. A web page needs to be clear and concise about the input expected from a user to minimize confusion about the information that the user should provide. Additionally, all input must be validated to ensure that it conforms to the requirements of the application. In this module, you will learn how to define input forms by using the input types available in HTML5. You will also see how to validate data by using HTML5 attributes. Finally, you will learn how to perform extended input validation by using JavaScript code, and how to provide feedback to users when their input is not valid or acceptable.

 

Lessons

  • Creating HTML5 Forms
  • Validating User Input by Using HTML5 Attributes
  • Validating User Input by Using JavaScript

 

Lab 1: Creating a Form and Validating User Input

  • Creating a Form and Validating User Input by Using HTML5 Attributes
  • Validating User Input by Using JavaScript

 

After completing this module, students will be able to:
  • Create input forms by using HTML5.
  • Use HTML5 form attributes to validate data.
  • Write JavaScript code to perform validation tasks that cannot easily be implemented by using HTML5 attributes.

Many web applications require the use of data held by a remote site or application. In some cases, you can access this data simply by downloading it from a specified URL, but in other cases the data is made accessible through a web service. In this module, you will learn how to access a web service by using JavaScript code and to incorporate remote data into your web applications. You will look at two technologies for achieving this: the XMLHttpRequest object, which acts as a programmatic wrapper around HTTP requests to remote web sites, and the Fetch API, which simplifies many of the tasks involved in sending requests and receiving data. Because the Fetch API and the XMLHttpRequest object are asynchronous, you will first learn about how to handle asynchronous tasks with the Promise object, arrow functions and the async/await syntax that greatly simplifies asynchronous programming.

 

Lessons

  • Asynchronous Programming in JavaScript
  • Sending and Receiving Data by Using the XMLHttpRequest Object
  • Sending and Receiving Data by Using the Fetch API

 

Lab 1: Communicating with a Remote Data Source

  • Retrieving Data
  • Serializing and Transmitting Data
  • Refactoring the Code by Using the jQuery ajax Method

 

After completing this module, students will be able to:
  • Handle asynchronous JavaScript tasks using the new async programing technologies.
  • Send data to a web service and receive data from a web service by using an XMLHttpRequest object.
  • Send data to a web service and receive data from a web service by using the Fetch API.

Styling the content displayed by a web page is an important aspect of making an application attractive and easy to use. CSS is the principal mechanism that web applications use to implement styling, and the features added to CSS3 support many of the new capabilities found in modern browsers. Where CSS1 and CSS2.1 were single documents, the World Wide Web Consortium chose to write CSS3 as a set of modules, each focusing on a single aspect of presentation such as colour, text, box model, and animations. This allows the specifications to develop incrementally, along with their implementations. In this module, you will examine the properties and values defined in several of these modules, the selectors added in CSS3, and the use of pseudo-classes and pseudo-elements to refine those selections.

 

Lessons

  • Styling Text by Using CSS
  • Styling Block Elements
  • Pseudo-Classes and Pseudo-Elements
  • Enhancing Graphical Effects by Using CSS

 

Lab 1: Styling Text and Block Elements by Using CSS

  • Styling the Navigation Bar
  • Styling the Register Link
  • Styling the About Page

 

After completing this module, students will be able to:
  • Use the new features of CSS to style text elements.
  • Use the new features of CSS to style block elements.
  • Use CSS selectors, pseudo-classes, and pseudo-elements to refine the styling of elements.
  • Enhance pages by using CSS graphical effects.

Code reuse and ease of maintenance are key objectives in writing well-structured applications. If you can meet these objectives, you will reduce the costs associated with writing and maintaining your code. This module describes how to write well-structured JavaScript code by using language features such as namespaces, objects, encapsulation, and inheritance. These concepts might seem familiar if you have experience in a class-based language like Java, C++, or C#, but the JavaScript approach is quite different and there are many subtleties that you must understand if you want to write maintainable code. We will also look at techniques for using newer JavaScript features while supporting older browsers by using languages such as TypeScript that transpile to native JavaScript; a topic we will return to in the final Module.

 

Lessons

  • Writing Well-Structured JavaScript Code
  • Creating Custom Objects
  • Extending Objects
  • Introducing Transpiled Languages

 

Lab 1: Refining Code for Maintainability and Extensibility

  • Object Inheritance
  • Refactoring JavaScript Code to Use Objects

 

After completing this module, students will be able to:
  • Write well-structured JavaScript code.
  • Use JavaScript code to create custom objects.
  • Implement object-oriented techniques by using JavaScript idioms.

Interactivity is a key aspect of modern web applications, enabling you to build compelling web sites that can quickly respond to the actions of the user, and adapt themselves to the user’s location. This module describes how to create interactive HTML5 web applications that can access the local file system, enable the user to drag-and-drop data onto elements in a web page, play multimedia files, and obtain geolocation information. We’ll also look at the developer tooling available in modern browsers.

 

Lessons

  • Interacting with Files
  • Incorporating Multimedia
  • Reacting to Browser Location and Context
  • Debugging and Profiling a Web Application

 

Lab 1: Creating Interactive Pages with HTML5 APIs

  • Dragging and Dropping Images
  • Incorporating Video
  • Using the Geolocation API to Report the User’s Current Location

 

After completing this module, students will be able to:
  • Access the local file system, and add drag-and-drop support to web pages.
  • Play video and audio files in a web page, without the need for plugins. Obtain information about the current location of the user.
  • Use the F12 Developer Tools in Microsoft Edge to debug and profile a web application.

Web applications have a dependency on the network to fetch web pages and data. However, in some environments, and especially on mobile devices, a network connection may be intermittent. In these situations, it might be useful to enable the application to continue functioning by using data cached on the user’s device. HTML5 provides a choice of client-side storage options, including session storage and local storage. Service Workers allow event handlers to be registered to intercept network requests and satisfy them from local data, allowing web applications to continue running in the browser even when offline. In this module, you will learn how to use these technologies to create robust web applications that can continue running even when a network connection is unavailable.

 

Lessons

  • Reading and Writing Data Locally
  • Adding Offline Support by Using Service Workers

 

Lab 1: Adding Offline Support to Web Applications

  • Caching Offline Data by Using the Application Cache API
  • Persisting User Data by Using the Local Storage API

 

After completing this module, students will be able to:
  • Save data locally on the user’s device, and access this data from a web application.
  • Configure a web application to support offline operations by using the Application Cache.

For most of the existence of the web, users were mainly sitting at desktop computers using a large display, a keyboard and a mouse. But in the last few years this has changed, so that the majority of web users are now on some kind of mobile device such as a tablet or a smartphone. As a result we have had to re-think how user interfaces are designed and implemented. You may well develop your web application on a computer with a large high-resolution monitor, but your users might only have a small touch screen. Users may also want to print the pages of your application. In this module, you will learn how to build a website that adapts the layout and functionality of its pages to the capabilities and form factor of the device on which it is being viewed. You will see how to detect the type of device being used to view a page, and learn strategies for laying out content that works effectively on different devices. We’ll also look at responsive CSS frameworks like Bootstrap.

 

Lessons

  • Supporting Multiple Form Factors
  • Using Responsive Web Design
  • Using Responsive CSS Frameworks

 

Lab 1: Implementing an Adaptive User Interface

  • Creating a Print-Friendly Style Sheet
  • Adapting Page Layout to Fit Different Form Factors

 

After completing this module, students will be able to:
  • Describe the requirements in a website for responding to different form factors.
  • Create web pages that can adapt their layout to match the form factor of the device on which they are displayed.

High-resolution, interactive graphics are a key part of many modern applications. Graphics can help to enhance the user’s experience by providing a visual aspect to the content, making a website more attractive and easier to use. Interactivity enables the graphical elements in a website to adapt and respond to user input or changes to the environment. This module describes how to create advanced graphics in HTML5 by using Scalable Vector Graphics (SVG) to display graphical content on a web page. You will also learn how to enable the user to interact with SVG elements using keyboard and mouse events. We’ll also look at the Canvas API which provides a set of JavaScript functions that you can invoke to draw graphics onto the surface of a special canvas element. We’ll consider the circumstances where it is more appropriate to use either Canvas or SVG. Finally, we’ll briefly look at some of the more advanced JavaScript graphics libraries that are currently available, such as D3.

 

Lessons

  • Creating Interactive Graphics by Using SVG
  • Drawing Graphics by Using the Canvas API
  • Using JavaScript Graphics Libraries

 

Lab 1: Creating Advanced Graphics

  • Creating an Interactive Venue Map by Using SVG
  • Creating a Speaker Badge by Using the Canvas API

 

After completing this module, students will be able to:
  • Use SVG to create interactive graphical content.
  • Use the Canvas API to generate graphical content programmatically.

With careful use, animations can improve the usability of a web page and provide useful visual affordance. This module describes how to enhance web pages by using CSS animations. You will learn how to apply transitions to property values that enable you to specify the timing of property changes. For example, you can specify that an element should change its width and height over a five-second period when the mouse pointer hovers over it. You will learn how to apply 2D and 3D transformations to elements, which enable you to scale, translate, rotate, and skew elements, with or without animation. Finally, you will learn how to apply keyframe animations to elements to satisfy more sophisticated requirements.

 

Lessons

  • Applying CSS Transitions
  • Transforming Elements
  • Applying CSS Keyframe Animations

 

Lab 1: Animating the User Interface

  • Applying CSS Transitions
  • Applying Keyframe Animations

 

After completing this module, students will be able to:
  • Apply transitions to animate property values to HTML elements.
  • Apply 2D and 3D transformations to HTML elements.
  • Apply keyframe animations to HTML elements.

Web pages request data on demand from a web server by submitting HTTP requests. This model is ideal for building interactive applications, where the functionality is driven by the actions of a user. However, in an application that needs to display constantly changing information, this mechanism is less suitable. For example, a financial stocks page is worthless if it shows prices that are even a few minutes old, and yet it is very inefficient to perform frequent polling for updates. This is where web sockets are useful. The Web Sockets API provides a mechanism for implementing real-time, two-way communication between web server and browser. This module introduces web sockets, describes how they work, and explains how to create a web socket connection that can be used to transmit data in real time between a web server and a web page.

 

Lessons

  • Introduction to Web Sockets
  • Using the WebSocket API

 

Lab 1: Performing Real-time Communication by Using Web Sockets

  • Receiving Messages from a Web Socket
  • Sending Messages to a Web Socket
  • Handling Different Web Socket Message Types

 

After completing this module, students will be able to:
  • Describe how using web sockets helps to enable real-time communications between a web page and a web server.
  • Use the Web Sockets API to connect to a web server from a web page, and exchange messages between the web page and the web server.

JavaScript code is a powerful tool for implementing functionality in a web page, but you need to remember that this code runs either when a web page loads or in response to user actions while the web page is being displayed. JavaScript is essentially single-threaded, and if the code performs operations that take a significant time to complete, the browser will become unresponsive, resulting in a very poor user experience. HTML5 introduces web workers, which enable you to offload processing to separate background threads and thus enable the browser to remain responsive. This module describes how web workers operate and how you can use them in your web applications.

 

Lessons

  • Understanding Web Workers
  • Performing Asynchronous Processing by Using Web Workers

 

Lab 1: Creating a Web Worker Process

  • Improving Responsiveness by Using a Web Worker

 

After completing this module, students will be able to:
  • Explain how web workers can be used to implement multithreading and improve the responsiveness of a web application.
  • Perform processing by using a web worker, communicate with a web worker, and control a web worker.

The use of many JavaScript features such as modules, introduced in ECMAScript 6, is not yet supported in all browsers. Tools such as Node.js, Webpack, TypeScript, and Babel, enable the use of new language features while still supporting older browsers. In this module we will introduce the theory behind these tools, when we need to use them, and the different options.

 

Lessons

  • Understanding Transpilers and Module bundling
  • Creating Separate Packages for Cross-browser Support

 

Lab 1: Setting Up Webpack Bundle for Production

  • Creating and Deploying Packages using WebPack
After completing this module, students will be able to:
  • Understand Transpilers and Module bundling
  • Create Separate Packages for Cross-browser Support

Reviews

There are no reviews yet.

Enquire now

Enquire now

    Cart
    Unfortunately, Your Cart Is Empty
    Please Add Something In Your Cart