К выложенному видео осталоть прокоментировать. Как вы обратили внимание я html разметку писал блочно (тегами <div></div>) на мое усмотрение это само просто так размещать содержимое сайта. Так же помимо блоков использавал два тега это <img src="адрес" alt="описание"> и <a href="адрес">название</a> .
<img (тег дает команду браузеру что сейчас будет медиа материал видео, изображение, gif) src="адрес" (дает команду браузеру где искать полный адрес к файлу если он находится за пределами главной папки в которой весь сайт) alt="описание">(ну слово "описание" появится если в браузере будет выключена загрузка медиа ). Тег не парный.
<a (тег дает команду браузеру что будет адрес перехода) href="адрес" (вместо слова "адрес" можно вписать что угодно от адреса до файла или адрес любого сайта или ссылка на отправку вам письма на e-mail) >написанное тут или размещеное медиа, будет служить участком клика перехода по самой ссылке на сайте </a> Тег парный как и div имеет закрывающий.
Так-же прошу обратить внимание на то что каждому блоку ставил class="имя класа" что в CSS был идентификатором (селектор). Так удобно стилизовать размещаемые блоки также можно другой идентификатор написать id="имя" , как вместе в блоке div так и по одиночке, разница только при написании в css, .class-name перед словом ставим точку #id-name перед словом ставим решетку.
В css файле использавались свойства со значениями width: 220px; margin: auto; background: #607338; border: 3px solid blue; border-radius: 10px; overflow: hidden; background: brown; color: beige; font-size: 20px; font-weight: 900; padding: 10px 10px 10px 10px; text-align: center; display: inline-block; text-decoration: none; . О них вы можете отдельно почитать в сети интернет, литература доступна для чтения.
