привет я Савва и сегодня я тебя научу создавать шахматную доску на сайте.
с начала создаём 2 файла:вот.
теперь пишем скрипт в файле "сайт"

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шахматное поле</title>
    </head>
    <body>
      <canvas width="900" height="900">
      <script src="доска.js"></script>
    </body>
</html>

затем заходим в файл "доска" в нём пишем:

let canvas = document.querySelector('canvas')
let context = canvas.getContext('2d')

это скрипт для настройки холста на котором мы и будем рисовать шахматы!
продолжаем писать скрипт который будет рисовать квадраты:

context.fillStyle = 'black'
context.fillRect(100, 0, 100, 100)
context.fillStyle = 'black'
context.fillRect(300, 0, 100, 100)
context.fillStyle = 'black'
context.fillRect(500, 0, 100, 100)
context.fillStyle = 'black'
context.fillRect(700, 0, 100, 100)
context.fillStyle = 'black'
context.fillRect(0, 100, 100, 100)
context.fillStyle = 'black'
context.fillRect(200, 100, 100, 100)
context.fillStyle = 'black'
context.fillRect(400, 100, 100, 100)
context.fillStyle = 'black'
context.fillRect(600, 100, 100, 100)
context.fillStyle = 'black'
context.fillRect(800, 100, 100, 100)
context.fillStyle = 'black'
context.fillRect(100, 200, 100, 100)
context.fillStyle = 'black'
context.fillRect(300, 200, 100, 100)
context.fillStyle = 'black'
context.fillRect(500, 200, 100, 100)
context.fillStyle = 'black'
context.fillRect(700, 200, 100, 100)
context.fillStyle = 'black'
context.fillRect(0, 300, 100, 100)
context.fillStyle = 'black'
context.fillRect(200, 300, 100, 100)
context.fillStyle = 'black'
context.fillRect(400, 300, 100, 100)
context.fillStyle = 'black'
context.fillRect(600, 300, 100, 100)
context.fillStyle = 'black'
context.fillRect(800, 300, 100, 100)
context.fillStyle = 'black'
context.fillRect(100, 400, 100, 100)
context.fillStyle = 'black'
context.fillRect(300, 400, 100, 100)
context.fillStyle = 'black'
context.fillRect(500, 400, 100, 100)
context.fillStyle = 'black'
context.fillRect(700, 400, 100, 100)
context.fillStyle = 'black'
context.fillRect(0, 500, 100, 100)
context.fillStyle = 'black'
context.fillRect(200, 500, 100, 100)
context.fillStyle = 'black'
context.fillRect(400, 500, 100, 100)
context.fillStyle = 'black'
context.fillRect(600, 500, 100, 100)
context.fillStyle = 'black'
context.fillRect(800, 500, 100, 100)
context.fillStyle = 'black'
context.fillRect(100, 600, 100, 100)
context.fillStyle = 'black'
context.fillRect(300, 600, 100, 100)
context.fillStyle = 'black'
context.fillRect(500, 600, 100, 100)
context.fillStyle = 'black'
context.fillRect(700, 600, 100, 100)
context.fillStyle = 'black'
context.fillRect(0, 700, 100, 100)
context.fillStyle = 'black'
context.fillRect(200, 700, 100, 100)
context.fillStyle = 'black'
context.fillRect(400, 700, 100, 100)
context.fillStyle = 'black'
context.fillRect(600, 700, 100, 100)
context.fillStyle = 'black'
context.fillRect(800, 700, 100, 100)
context.fillStyle = 'black'
context.fillRect(100, 800, 100, 100)
context.fillStyle = 'black'
context.fillRect(300, 800, 100, 100)
context.fillStyle = 'black'
context.fillRect(500, 800, 100, 100)
context.fillStyle = 'black'
context.fillRect(700, 800, 100, 100)

запускаем сайт:
отлично! теперь можем заканчивать!пока!