Elena Fire

Можно и нужно.

1) html4 - html5 - все базовые теги (как минимум)
2) css3 - block, flex, grid, animation, transition, transform, все для текста
3) JavaScript - подключение, слушатели, взаимодействие с DOM, базовые функции
4) Знать стандарты scss/sass.
5) BEM - правила наименования классов в разметке
6) все про style, class, id, data-, приоритеты в стилях
7) умение работать с git (GitHub, Bitbucket, Jira) и репозиториями - для работы в командных проектах
8) навыки коммуникации и ведения переговоров
9) базовые навыки в чтении и составлении технических заданий на верстку (ТЗ)
10) сверстать не менее 5 шаблонов разных типов и найти того, кто проверить и прокомментирует верстку, поправит и подскажет, - ментор или учитель
11) любовь к этой работе

Думаю, мои коллеги добавят еще чего-нибудь. А вот эти 11 пунктов - база для начала работы верстальщиком.

На больших проектах логично создавать отдельные файлы стилей. В scss или sass или less, которые потом собираются в один css. Насчет комментариев внутри кода - утяжеляют. Иногда это бывает критично.
Стили уникальных страниц прописываю с одинаковым началом - например, about__ или shop__.
Тогда при сборке уникальные стили страницы идут один за другим и не перекликаются с другими страницами. И править при необходимости такой файл легче.
Alex правильно говорит, по уму все стили еще на стадии подготовки к верстке должны быть разделены на группы.

Никак.

Bootstrap - это не Священный Грааль. Это всего лишь [препроцессор] фреймворк. Скажу по секрету, в результате браузер читает чистый css. Соглашаюсь с коллегами - пользоваться или нет, вопрос ситуации.

Чтобы не сидеть часами у монитора и не писать бесконечные медиа-запросы. Таким незамысловатым образом верстальщики сокращают количество кода, делают его удобочитаемым, а поведение элементов на странице - предсказуемым. И это желательно делать не некоторым верстальщикам, а всем поголовно.

Сразу оговорим несколько исключений при ответе: дизайн не рассматриваем, шрифты не рассматриваем, стили не рассматриваем (думаю, там много чего можно поправить), адаптивность не рассматриваем.
Про верстку:
1. h1 может быть только ОДИН на всю страницу. Здесь их - гораздо больше.
2. куча ненужных контейнеров - в большом контейнере поменьше лежит, в нем еще меньше, потом еще один и еще один в нем на всякий случай, и вот (наконец-то) содержимое. Меньше вложенности - больше порядка.

Чтобы были правильные border, нужно задать размеры тексту. Например, так:

.text {
line-height: 3em; //высота строки, чтобы не задавать лишние padding-top/bottom
font-size: 2em;
padding-left: 30px;
padding-right: 30px;
border-bottom: 1px solid #color;
border-right: 1px solid #color;
}

Волшебная палочка - быстрое выделение (оч удобный инструмент). Выделяете надпись, вырезаете на новый слой, заменяете это место фоном (штампом аккуратненько). Пишете свою надпись на новом слое. И вуаля! - три часа (или быстрее) работы - и вы уже пишите собственную надпись!

Хотя похоже у вас вопрос, как этим же шрифтом с таким же разворотом написать свою надпись взамен этого слоя? В слоях не видно, чтобы это был текстовый слой, так что просто подбираете похожий шрифт (если знали, какой использовался, то вообще элементарно) и через трансформацию разворачиваете, 3d объем придаете и вертите, пока не получится идентично. Или очень похоже.

Тег a просто выстраивается в строчку. Не то, чтобы склеились, просто ничем не настроен внешний вид. Если есть css файл, то прописываем в нем:

a {
padding-right: 10px; //или сколько надо для красоты
}

Если файла нет, то пишем прямо в коде

<style type="text/css">
a {
padding-right: 10px;
}
</style>

Сделать одно описание стилей для form. У каждой формы есть свой name, для них прописать под стилями для form все отличия. Например:

form {
//стили для всех форм
}
form[name="Название формы"] {
//стили для этой конкретной формы
}

.block1::after {
content: "";
display: block;
clear: both;
}

Должно помочь.

1. Убрать пустые места. Для этого содержимое вложенного меню не должно строиться в блоках или по grid-сетке. И у вложенных категорий не должно быть установленных высот. Используйте flex - позволит автоматически выстраивать содержимое.
2. Закрепить меню вверху страницы. Для меню второго уровня выставляется position: fixed
3. Аккордеон в меню. JS вам в помощь, почитайте о механике аккордеонов. Можно и CSS обойтись, но только с radio кнопками и их позиционированием.
4. Подсветка активного раздела. :active - у активного раздела основного меню и прописываете поведение блока.

Вы сами выставили ширину в 100%. К тому же у вас не соответствует верстке размер текста в описании и заголовке. Измените justify-content на left -блоки построятся в начало.

.item .col.desc {
    width: 100%;
}
.desc .info-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Задайте размеры этому блоку:
<div class="parameters">
Для него вообще нет никаких параметров. А должны быть как минимум ширина и отступы.

Конфликт интересов:
указаны одновременно left и right со значением 0, при этом width у div не задан явно.
Задайте div width и уберите left или right по потребности.

Используйте свойство order у flex-контейнера

.habits_icon {
display: flex;
flex-direction: column;
}
li:nth-of-child(3) {
order: 2;
}
li:nth-of-child(4) {
order: 3;
}

Flex - поскольку работает на всех без исключения браузерах, даже на IE

.row.row-cols-2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
@media (max-width: 700px) {
.col {flex-direction: row; flex-wrap: wrap;}
}