index.html does not read main.js – Blancer.com Tutorials and projects

I’am trying to build simple map app.
I wrote some lines of code and have problem that index file does not read main.js

Here is the index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebgisOL</title>
    <link rel="stylesheet" href="resources/ol/ol.css">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="map"></div>
    <script src="resources/ol/ol.js"></script>
    <script src="main.js"></script>
</body>
</html>

and main.js:

var mapView = new ol.View ({
  center: ol.proj.fromLonLat([16.631927, 52.277821]),
  zoom: 8
});

var map = new ol.Map ({
  target: 'map',
  view: mapView
});

var osmTile = new ol.layer.Tile ({
  title: 'Open Street Map',
  visible: true,
  source: new ol.source.OSM()
});

map.addLayer(osmTile);

also simple main.css:

#map {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;`
}

Errors appears in devtools:
Uncaught SyntaxError: Cannot use import statement outside a main.js:1 module

api.maptiler.com/tiles/hillshade/9/304/664.webp?key=get_your_own_D6rA4zTHduk6KOKTXzGB:1
Failed to load resource: the server responded with a status of 400 ()

Would appreciate on any suggestions.