M55613A - Advanced Web Development 

Duration

5 Days

Level

200 - Intermediate

Vendor

Microsoft, Development

Legacy MOC Code

None

Course
Overview

This course is designed to teach advanced web development skills to students who already have an understanding of web development fundamentals. Students will learn how to build sophisticated web applications using up-to-date techniques and frameworks. It is assumed that students are already familiar with the essentials of HTML and CSS, but the first module will include a brief refresher to ensure that everyone is up to speed. Additionally, students should have some programming experience and they should already be familiar either JavaScript, or with a similar programming language such as Java, C++, C#, or Visual Basic. JavaScript is explained in terms that should be familiar to developers who already know how to write software.

The course begins by reviewing the state of the web development landscape today, and includes a quick review of HTML and CSS to ensure that everyone is up-to-speed for the rest of the course. For most students, this first module will be revision. The next module looks in detail at semantic HTML and the elements that were introduced with the HTML5 standard. The next module takes a closer look at the JavaScript language, how it differs from other similar languages, and its role in web development.

Later modules explore some of the advanced features of CSS and JavaScript, collecting user input with HTML5 forms, responsive web design, accessibility, retrieving data from server endpoints, and some of the new browser features that are exposed through JavaScript. The last few modules will cover advanced topics like offline working, progressive web applications, CSS animation, and web graphics using the canvas element and SVG. There will also be modules on web hosting, hosting service endpoints, and JavaScript packaging and deployment. In the final module we suggest some next steps for those who want to continue learning, and stay up-to-date as the technology continues to develop. After completing the course, students will be well-prepared to build sophisticated enterprise-grade web applications.

This advanced course is also designed to work as a follow-on course to our course M55612A – Introduction to Web Development. The majority of this course focuses on client-side web development. If you are specifically interested in server-side web development, consider course M55340A – Developing ASP.NET Core Web Applications.

Audience
Profile

The course is designed for students who are:

  • Existing web developers with an understanding of HTML, CSS and JavaScript.
  • Individuals who are interested in continuing to develop their web development skills.
  • Individuals considering pursuing a career in web development who have completed course M55612A.
  • Accomplished web developers and web designers who want to consolidate their web development skills.

Students should have some web development experience and be familiar with software development (not necessarily in JavaScript).

Course
Outline

Module 1: Review of HTML and CSS

  • Review of the web development landscape
  • Review of HTML
  • Review of CSS

Module 2: Semantic HTML

  • Creating a page in HTML5
  • Styling in HTML5
  • Setting up a web development environment

Module 3: Programming in JavaScript

  • The JavaScript language
  • Working with the Document Object Model
  • Functions and DOM event handling

Module 4: Collecting User Input

  • HTML5 forms
  • Built-in validation
  • Advanced validation using JavaScript

Module 5: Server Communication

  • Asynchronous programming with JavaScript
  • Data communications using native XHR
  • Data communications using the Fetch API

Module 6: Advanced CSS

  • Styling text in CSS3
  • Controlling page layout with CSS3
  • Pseudo-classes and -elements
  • CSS preprocessors
  • CSS Frameworks

Module 7: Advanced JavaScript

  • Building well-structured JavaScript applications
  • Object-oriented JavaScript
  • TypeScript and other preprocessors
  • JavaScript libraries

Module 8: Using the Browser API

  • Working with Files
  • Multimedia
  • Location API
  • Debugging and profiling

Module 9: Working Offline

  • Saving data locally
  • Supporting offline working
  • Building Progressive Web Applications

Module 10: Building a Responsive and Accessible Website

  • Understanding responsive design
  • Building a responsive website
  • Accessibility

Module 11: Advanced Web Graphics

  • Vector vs. Pixel graphics
  • Scalable Vector Graphics
  • Using the Canvas API

Module 12: CSS Animation

  • CSS Transitions
  • Element transformations
  • Keyframe animations in CSS

Module 13: Web Services

  • Creating REST APIs
  • Using the WebSockets API

Module 14: Packaging and Deployment

  • Transpilers
  • The web development toolchain
  • Introduction to Package Managers
  • What to use when
  • Course review, next steps, and further reading