Не могу освоить верстку

То, что вы готовы лезть на стены ради освоения вёрстки, вызывает моё восхищение. Это говорит о высокой мотивации и любви к предмету. Чтобы освоить HTML и CSS, нужен такой план:

1. Не изучать устаревшие материалы, забыть о существовании xHTML и ориентироваться только на современные стандарты HTML5 и CSS3. Понять, что в HTML5 теги бывают двух типов: парные и одиночные. Вёрстка состоит в основном из парных тегов и каждый тег имеет определённые доступные параметры и CSS-свойства по умолчанию. Бывают теги, которые отличаются только семантически: div очень похож на h1, у них просто разный набор свойств и нужно использовать их в разных ситуациях. Семантика — умение применять теги уместно.

Хорошая очень компактная книжка, которую я когда-то читал — Джереми Кит - HTML5 для веб-дизайнеров.

2. Важных тегов, которыми надо уметь пользоваться, не так много: script, link, section+header+footer, div, span, h1+h2+h3, ul+li, a, form, input, table+tr+td. Все остальные можно подсмотреть на htmlbook.ru/html когда будет время и желание.

3. Понять, что CSS не надо писать руками. Научиться работать с CSS-препроцессорами. Это сэкономит тонну времени. Мне нравится LESS, в моде сейчас SASS.

4. Узнать наиболее употребимые CSS-свойства: float, display, opacity, width+height, position, background, border, border-radius. Заодно узнать, как использовать псевдоклассы: :hover, :focus.

5. Разобраться в теме Flexbox-вёрстки. Полезно и развязывает руки.

6. Поставить нормальную среду разработки, например Visual Studio Code (прекрасен+бесплатный) или WebStorm (любят знакомые), настроить в нём красивую цветовую схему и моноширинный шрифт Menlo покрупнее. Поставить на него плагин Emmet, который позволит меньше печатать HTML-кода. Такой мощный тулбокс будет мотивировать больше практиковаться.

7. Понять, как реализовать адаптивность: узнать, как работают медиа-запросы. Научиться пользоваться сеткой Бутстрапа или другого фреймворка по душе. Понять, как верстать адаптивный 12-колонник. Сэкономить на этом вторую тонну времени, потому что на одних только медиа-запросах адаптивность реализовать очень больно.

8. Познать контроль версий: завести Гитхаб, научиться выполнять простые операции: git init, status, log, add, commit, remote, push, diff. Все они есть в курсе по гиту на Хекслете. Степик тоже заслуживает внимания.

9. Сразу пытаться применять изученное и ставить себе задачи, которые заставят задавать новые вопросы. Не терять наработки и вести конспекты в Notion. Так вы никогда не растеряете то, чему научитесь.

На этом уровне уже можно найти работу тысяч на 40. Идти сразу работать, а не тратить 5 лет на идиотский российский институт, как ваши одноклассники.

10. Понять, что вёрстка — низшее звено веб-разработки и ваш путь только начался. Понять, что без знания JavaScript на вёрстке не заработать и пора учить его. Идти на сайт JavaScript.ru и становиться фронтенд-разработчиком.