Можно ли в атрибуте alt писать camelcase?

Правильный вариант: An image of a card или Изображение карточки

Не "изображение карточки", а "пылесос такой-то" или "иконка|лого Вконтакте".
Обычно в детском садике учат описывать, что на картинке. Вот тут точно также.

Как автоматизировать процесс переноса стилей из инспектора в браузере непосредственно в код?

Если это чужой проект, то "не быстро" это нормально.
Если это свой проект и в нем неудобно вносить правки в исходники, то решение не в том, чтобы править в браузере, а в изменении структуры/архитектуры и т.д. Возможно, вам поможет простое применение sourcemap.
С другой стороны, поиск про проекту и вы в нужном файле, не вижу проблемы.

Оценка первой верстки?

wqertAnna,

А зачем нужна семантика, если ни для сео?

Например, еще есть читалки. Да мало ли какие еще распознавалки контента могут быть для разных целей.
Не SEO единым..

вопрос с placeholder спорный?
Мне кажется, это более чем ожидаемое поведение

Да, это холивар, можете погуглить, их полно. Участвовать в нем я не хочу.
Наиболее разумное решение, на мой взгляд, это поднимать плейсхолдер при фокусе, чтобы человек видел в каком формате от него требуют вводить данные.

Outline однозначно убрать!
Да, вместо него лучше как-то выделить фокус на поле, но эти доисторические оранжевые линии портят впечатление от верстки.

Его можно убрать и заменить или перекрасить. У подавляющего большинства они голубые и выглядят не так страшно. Убрать без замены нельзя.
В данном случае лучше оставить стандартное поведение браузера и человек (может быть) поморщится, но поймет где фокус, чем убрать совсем и он просто просто заблудится.

Оценка первой верстки?

Тимур Турсунбаев, я бы сказала так: outline можно и убрать, но тогда обязательно заменить на что-то другое, чтобы был заметен фокус.

Оценка первой верстки?

unlik, в данном случае использовать bg position.
Верстальщик должен предусмотреть все случаи переполнения блоков, а также варианты, когда содержимого совсем мало.

Оценка первой верстки?

и placeholder должен исчезать, когда курсор в поле, а он исчезает у вас только при вводе

Спорный вопрос.

В общем, зеленые стрелки означают, что вы правильно использовали теги h2 и p
Красные говорят о неправильном использовании этих тегов

Тоже спорный.
С точки зрения семантики это заголовки.
Нужны ли они тут с точки зрения SEO это отдельная история, но не полностью забота верстальщика.

заголовки и параграфы обладают семантическим смыслом, поэтому советую использовать их там, где они нужны.

<p> в HTML служит для группировки любого связанного содержимого, включая поля формы, картинки и т.д., а не только в смысле абзаца в общечеловеческом смысле.

Оценка первой верстки?

1. Ошибки валидатора
2. Сначала подключается normalize, потом свои стили
3. Кнопки в макете точно имели такие странные рамки?
4. "Все новости", "как проехать" и "обратная связь" должны быть ссылками
5. Иконки хорошо бы в svg
6. Нет ховеров
7.

.btn:nth-child(3) {
    margin-right: 13px;
}

а если перед кнопкой редактор добавит еще один абзац, то полезете в CSS, считать чайлдов?
8. Писать тексты нужно по правилам русского языка. Если в макете они набраны большими буквами, то нормально и трансформировать потом в CSS.
9.

a {
    color: #fff;
    text-decoration: none;
}

Точно все ссылки в макете белые? А если ссылка появится в тексте новости?
10. Если в новости добавить больше текста, то под меню вылезет белая полоса, потому что сползет фоновая картинка.
11. Если фоновая картинка не загрузится, будет белая поляна с белым текстом.
12. "Разработано" это обычно ссылка.
Подчеркнутое "как нас найти" в футере, тоже ссылка.

Хватит пока

Как так расположить дивы?

Покажите ваш неполучившийся код в песочнице jsfiddle.net или codepen.io
Вариантов реализации много, проще всего гридами, на флексах нужна доп.обертка для средней колонки.

Как сделать текст в две строки?

Варианты:
1. Не задавать обертке флекс и блочные элементы сами встанут на разные строки.
2. Задать флексу wrap, а дочерним ширину 100%
3. Провернуть главную ось на column (ждите сюрпризов от ИЕ)

Как выравнять такой элемент?

1. Флексами
2. Позиционированием
3. Отступами у псевдо, только в блочный не забудьте перевести
4. Переделать на фон у псевдо и использовать bg position
5. Вообще отказаться от псевдо и просто использовать bg и bg position
6. Отредактировать картинку
7. vertical-align

наверное еще что-нибудь..

Почему не работает toggleClass?

Потому что:
1. Не подключен JQ
2. Специфичность селекторов. У селектора a.button .dot вес выше, чем у .opened, поэтому .opened не может перебить a.button .dot
https://jsfiddle.net/dc10aL3q/

Как сделать круглую кнопку со значком по центру?

Ничёсе и правда круг! А в кодепене еще и центр в левом верхнем углу.

Как будет лучше всего сделать такой слайдер?

Табы на js или css, гуглится.

Как сделать адаптивные ссылки на картинке?

Как отловить размер изображения и позиционировать на нем объекты?

Как повернуть див на 90 градусов?

здравствуйте, подскажите, как мне повернуть див на 90 градусов ? При добавлении
" -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
"

Но я бы удивилась, если бы что-то повернулось на 90 градусов, если вы пишете 45

Почему переопределение встроенных в браузеры стилей это плохо?

Если у всех ссылок на странице зеленый цвет, то это нормально.
Если вы сначала пишете всем зеленый, потом в main, ах нет синий, а вот эта конкретная ссылка вообще в виде кнопки, то вот так не очень хорошо.

Как вынести текст за приделы слайдера?

depsotr, у меня он в отдельном блоке, у этого блока класс .text
Сделайте слева, right 100%
Прочитать можно тут
htmlbook.ru/samlayout/blochnaya-verstka/pozitsioni...

Вашего кода так никто и не видел.

Как вынести текст за приделы слайдера?

Не знаю где ваш код.
Но суть такая https://jsfiddle.net/f3dmcgzh/

Как поставить 8 блоков в 4 колонки?

21% и 5px до добра не доведут

Как сделать анимацию на сайте, чтобы при наводки мышкой менялась часть изображения (типо дырки в стене)?

losrogaty, https://codepen.io/teddyy/pen/yyqzLa и т.д.