Advanced HTML and CSS

Advanced web application development with HTML and CSS

Description

The web is growing considerably in popularity. More and more functionality is shifting towards the client and small revolutions are happening. Think of the advent of SPAs and PWAs, the dying out of Flash/Silverlight, realising server-side solutions with Node.js/Deno and building desktop applications with Electron.

This course builds on the core HTML/CSS training by taking a look at HTML5 and its features. Think of features within a web browser, but also for app development (local storage, indexed database, geolocation, etc). Both courses combined form the five-day HTML/CSS development course.

Subjects

In this module, we will cover semantic HTML elements and attributes.

Lessons

• Section elements, such as navigation and content
• Elements for embedded content, e.g., canvas and video
• Forms
• Additional elements like meter, time and progress

Lab: Define an overview page with semantic elements Lab: Define a webpage with a form

After completing this module, students will be able to:

• Understand semantics more thorough
• Use semantic elements to express content

In this module, you will learn CSS techniques for i.a. selecting elements, applying styles and positioning.

Lessons

• Selectors for targeting specific states of elements
• Pseudo-classes and pseudo-elements
• Custom fonts
• Opacity
• Animations and transitions
• Positioning techniques like flexible boxes and grid

Lab: Use advanced techniques to style a webpage

After completing this module, students will be able to:

• Use a wide assortment of techniques for selecting elements
• Weigh and use different positioning techniques
• Apply a wide range of general styling options

In this module, you will be introduced to a number of browser API that are often used with developing web applications.

Lessons

• DOM API updates
• Storage (Web Storage and IndexedDB)
• Determining location
• Web workers
• Realtime communication
• Drag and drop
• Introduction to PWAs
• Overview other common APIs

Lab: Use Storage options to write and read data Lab: Use the Geolocation API

After completing this module, students will be able to:

• Build richer web applications using the covered browser APIs
• Take into account the capabilities of a browser when considering technology choices