HTML5 en CSS3

Subjects

Introduction HTML

In this module, you will learn to apply HTML.

Lessons

• Concepts of web development
• Refresher of syntax and basic elements
• Being aware of audiences
• Forms

Lab: Create a webpage

After completing this module, students will be able to:

• Read and write the HTML of a webpage
• Reason about the choice of HTML elements
• Setup a form
• Determine what should be implemented where

CSS

In this module, you will learn to style a webpage through CSS.

Lessons

• Define and use CSS stylesheets
• Selectors and specificity
• Styling options
• Basics of positioning

Lab: Style the webpage of the previous lab

After completing this module, students will be able to:

• Create and use CSS stylesheets
• Select elements and define styles for them

JavaScript

In this module, you will learn to make a webpage interactive through JavaScript.

Lessons

• Essentials of the language
• DOM manipulation
• DOM events

Lab: Make a webpage interactive

After completing this module, students will be able to:

• Read and write basic JavaScript
• Add and remove DOM elements
• Respond to DOM events

Layout

In this module, you will learn different techniques for setting up a webpage's layout.

Lessons

• Fixed layout
• Fluid/elastic layout
• Responsive layout / responsive design

Lab: Apply layout techniques

After completing this module, students will be able to:

• Setup a webpage with different layout techniques
• Determine which technique works best given a situation

CSS frameworks

In this module, you will learn how CSS frameworks aid in styling webpages.

Lessons

• Why and when to use CSS frameworks
• Using a CSS framework, including grid system, typography and component styling

Lab: Use a CSS framework

After completing this module, students will be able to:

• Determine whether and which CSS framework to use
• Use CSS frameworks

CSS preprocessors

In this module, you will learn how a CSS preprocessor aids in maintaining stylesheets.

Lessons

• Why and when to use a CSS preprocessor
• Using a CSS preprocessor
• Integrate a CSS preprocessor with a build pipeline

Lab: Use a CSS preprocessor when defining a stylesheet

After completing this module, students will be able to:

• Make stylesheets more maintainable by the richer language of a preprocessor
• Include a CSS preprocessor with their projects

Advanced HTML

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

Advanced CSS

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

Browser APIs

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