diff --git a/doc/faq.md b/doc/faq.md
index 6cb904ff42..df30199611 100644
--- a/doc/faq.md
+++ b/doc/faq.md
@@ -54,9 +54,12 @@ The projection of your map can be set through the `view`-property. Here are some
 examples:
 
 ```javascript
+import Map from 'ol/Map';
+import View from 'ol/View';
+
 // OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
-var map = new ol.Map({
-  view: new ol.View({
+const map = new Map({
+  view: new View({
     projection: 'EPSG:4326'
     // other view properties like map center etc.
   })
@@ -65,23 +68,29 @@ var map = new ol.Map({
 ```
 
 ```javascript
+import Map from 'ol/Map';
+import View from 'ol/View';
+import proj4 from 'proj4';
+import {register} from 'ol/proj/proj4';
+import {get as getProjection} from 'ol/proj';
+
 // To use other projections, you have to register the projection in OpenLayers.
 // This can easily be done with [https://proj4js.org](proj4)
 //
 // By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
 // So we create a projection instance for EPSG:21781 and pass it to
-// ol.proj.addProjection to make it available to the library for lookup by its
+// register to make it available to the library for lookup by its
 // code.
 proj4.defs('EPSG:21781',
   '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
   '+x_0=600000 +y_0=200000 +ellps=bessel ' +
   '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs');
-ol.proj.proj4.register(proj4);
-var swissProjection = ol.proj.get('EPSG:21781');
+register(proj4);
+const swissProjection = getProjection('EPSG:21781');
 
 // we can now use the projection:
-var map = new ol.Map({
-  view: new ol.View({
+const map = new Map({
+  view: new View({
     projection: swissProjection
     // other view properties like map center etc.
   })
@@ -104,15 +113,20 @@ coordinates for the center have to be provided in that projection. Chances are
 that your map looks like this:
 
 ```javascript
-var washingtonLonLat = [-77.036667, 38.895];
-var map = new ol.Map({
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+
+const washingtonLonLat = [-77.036667, 38.895];
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: washingtonLonLat,
     zoom: 12
   })
@@ -128,31 +142,38 @@ The solution is easy: Provide the coordinates projected into Web Mercator.
 OpenLayers has some helpful utility methods to assist you:
 
 ```javascript
-var washingtonLonLat = [-77.036667, 38.895];
-var washingtonWebMercator = ol.proj.fromLonLat(washingtonLonLat);
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const washingtonLonLat = [-77.036667, 38.895];
+const washingtonWebMercator = fromLonLat(washingtonLonLat);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: washingtonWebMercator,
     zoom: 8
   })
 });
 ```
 
-The method `ol.proj.fromLonLat()` is available from version 3.5 onwards.
+The method `fromLonLat()` is available from version 3.5 onwards.
 
 If you told OpenLayers about a custom projection (see above), you can use the
 following method to transform a coordinate from WGS84 to your projection:
 
 ```javascript
+import {transform} from 'ol/proj';
 // assuming that OpenLayers knows about EPSG:21781, see above
-var swissCoord = ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
+const swissCoord = transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
 ```
 
 
@@ -189,18 +210,24 @@ So the next step would be to put the decimal coordinates into an array and use
 it as center:
 
 ```javascript
-var schladming = [47.394167, 13.689167]; // caution partner, read on...
-// since we are using OSM, we have to transform the coordinates...
-var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const schladming = [47.394167, 13.689167]; // caution partner, read on...
+// since we are using OSM, we have to transform the coordinates...
+const schladmingWebMercator = fromLonLat(schladming);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: schladmingWebMercator,
     zoom: 9
   })
@@ -219,18 +246,24 @@ e.g. try to change the map center.
 Ok, then let's flip the coordinates:
 
 ```javascript
-var schladming = [13.689167, 47.394167]; // longitude first, then latitude
-// since we are using OSM, we have to transform the coordinates...
-var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const schladming = [13.689167, 47.394167]; // longitude first, then latitude
+// since we are using OSM, we have to transform the coordinates...
+const schladmingWebMercator = fromLonLat(schladming);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: schladmingWebMercator,
     zoom: 9
   })
@@ -244,7 +277,7 @@ first, and then the latitude. This behaviour is the same as we had in OpenLayers
 2, and it actually makes sense because of the natural axis order in WGS84.
 
 If you cannot remember the correct order, just have a look at the method name
-we used: `ol.proj.fromLonLat`; even there we hint that we expect longitude
+we used: `fromLonLat`; even there we hint that we expect longitude
 first, and then latitude.
 
 
@@ -254,8 +287,11 @@ Suppose you want to load a KML file and display the contained features on the
 map. Code like the following could be used:
 
 ```javascript
-var vector = new ol.layer.Vector({
-  source: new ol.source.KML({
+import VectorLayer from 'ol/layer/Vector';
+import KMLSource from 'ol/source/KML';
+
+const vector = new VectorLayer({
+  source: new KMLSource({
     projection: 'EPSG:3857',
     url: 'data/kml/2012-02-10.kml'
   })
@@ -266,13 +302,16 @@ You may ask yourself how many features are in that KML, and try something like
 the following:
 
 ```javascript
-var vector = new ol.layer.Vector({
-  source: new ol.source.KML({
+import VectorLayer from 'ol/layer/Vector';
+import KMLSource from 'ol/source/KML';
+
+const vector = new VectorLayer({
+  source: new KMLSource({
     projection: 'EPSG:3857',
     url: 'data/kml/2012-02-10.kml'
   })
 });
-var numFeatures = vector.getSource().getFeatures().length;
+const numFeatures = vector.getSource().getFeatures().length;
 console.log("Count right after construction: " + numFeatures);
 ```
 
@@ -284,9 +323,9 @@ been populated with features), you should use an event listener function on the
 
 ```javascript
 vector.getSource().on('change', function(evt){
-  var source = evt.target;
+  const source = evt.target;
   if (source.getState() === 'ready') {
-    var numFeatures = source.getFeatures().length;
+    const numFeatures = source.getFeatures().length;
     console.log("Count after change: " + numFeatures);
   }
 });
@@ -315,16 +354,17 @@ map.renderSync();
 
 ## Why are my features not found?
 
-You are using `ol.Map#forEachFeatureAtPixel` or `ol.Map#hasFeatureAtPixel`, but
+You are using `Map#forEachFeatureAtPixel` or `Map#hasFeatureAtPixel`, but
 it sometimes does not work for large icons or labels? The *hit detection* only
 checks features that are within a certain distance of the given position. For large
 icons, the actual geometry of a feature might be too far away and is not considered.
 
-In this case, set the `renderBuffer` property of `ol.layer.Vector` (the default
-value is 100px):
+In this case, set the `renderBuffer` property of `VectorLayer` (the default value is 100px):
 
 ```javascript
-var vectorLayer = new ol.layer.Vector({
+import VectorLayer from 'ol/layer/Vector';
+
+const vectorLayer = new VectorLayer({
   ...
   renderBuffer: 200
 });