ArtJH

max-width: 100%
background-size: cover;
object-fit: coder;

Закинь в песочницу или ссылку на сайт

btn = document.querySelector(".btn");
btn.addEventListener('click', function(){
  this.classList.add("bold");
});

.bold{
font-weight: bold;
}

используй display flex

.родитель
display: flex;
    justify-content: center;
    flex-direction: column;

.child{
margin: 20px 0;
}

1) самое простое это атрибут required, добавляешь в input
2) Если через js, то

let input = document.querySelector("#testInput");
 let length = input.value.length;
if (length < 9) alert('Заполните')
        else(
          alert('Все заполнено')
        )

1) Заучивать теги и css свойства не нужно. Никто их все наизусть не знает, не переживайте. Потому если что можно быстро загуглить нужный тег. Да и в процессе верстки все равно будете запоминать
2) Возьмите какой-нибудь легкий макет и верстайте его. Как можете верстайте. Правильно с первого раза все равно не получится. Потому что через макетов 5, вы будете видеть какие ошибки совершали и так далее и далее
Короче говоря глаза боятся руки делают. Больше делайте и делайте, не знаете как что-то сделать гугл.
Если вообще отчаянный, то в youTube много марафонов по верстке, где вместе с вами верстают макет, для первого раза можно, но дальше больше верстайте САМИ
P.S. не забудьте отметить ответом)

1) Легче всего сделать добавить поверх такую белую png, лучше svg
2) Морочиться и пытаться делать на clip-path, который не поддерживается на safari

Лучше сделайте картинкой