Ankhena

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

Вы понимаете, что 1 и 2 противоречат друг другу?
У обычных людей их дневники никому кроме них даром не сдались. Ну разве что жене/любовнице захочется подглядеть. Тут все просто, они вообще не должны знать о его существовании.
Так что если выключить паранойю можно использовать любой онлайн сервис: дропбокс, гулдоки, закрытая личная группа ВК, любые сервисы заметок и т.д.
Если скучно, делаете свой сайт, пишете в запароленный раздел, закрываете все целиком в роботс и еще что-нибудь для надежности.

Еще можно придумать свой шифр или язык и писать на нем.

Если все таки страшно-страшно, что кто-то что-то о Вас узнает от идеи вести дневник придется отказаться.

Для 1:
Серый фон отдельно. Можно 2мя частями, тогда верхняя часть - светлый параллелепипед. Возможно градиентом.
Книжка отдельно.
Форме position: relative; и сдвиг

Для 2:
Квадратики рисуются либо заливкой rgba, если это вдруг разные блоки.
Либо множественным фоном из нескольких градиентов.

1. Разработчики пообщаются с Вами на тему четкого технического задания.
2. Поменяют в теме что-то на Ваш вкус или вообще ее переверстают.
3. Поставят все необходимые модули и настроят их.
4. Окажется, что Вам нужны какие-то уникальные блоки или функциональность, которой нет в стандартном пакете.
5. Возникнут еще какие-то дополнительные вопросы.
6. Потом еще долгий процесс сдачи-приемки работы и получения денег.

Количество реально потраченных часов разработчика может оказаться довольно внушительным и они, естественно, хотят, чтобы оно было оплачено.

Если есть навыки и желание, можете начать делать самостоятельно, а специалиста звать на какие-то конкретные мелкие доработки. В навыках хорошо бы быть уверенным, чтобы не оказалось, что делать надо все с нуля.
Так выйдет дешевле с точки зрения прямых финансовых затрат.
Но если Вы, например, директор этого интернет магазина и посчитаете потраченные часы по своей директорской ставке, то может оказаться, что 35000 это детский лепет.

Почему бы не использовать стандартные методы html?
https://webref.ru/css/required

Берете, скачиваете, устанавливаете любую понравившуюся CMS с нужным функционалом (или несколько) и разбираетесь как там реализовано.

По сути 3 этапа:
1. Форма
2. Запись полученных через форму данных в БД.
3. Вывод этих данных на страницу/страницы

Возможен промежуточный этап: модерация. Тогда еще права суперпользователя и появление 2 кнопок у каждой записи: удалить, опубликовать.
Это в самом простом деревянном исполнении.
Дальше всю эту конструкцию можно усовершенствовать как душа пожелает.

Вьюпорты различный устройств: viewportsizes.com

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

Хочу начать изучение SEO или Яндекс.Директ.

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

Сложно ли это?

Сложность параметр субъективный. Кому-то и письмо отправить сложно или нормально отформатировать документ в Word.

Выгодно ли в плане финансов?

Вопрос навыков и умения находить клиентов.

сможет дать совета начинающим

Про SEO: запастись терпением. Реакция на Ваши действия с сайтом будет далеко не мгновенная.
И аналитика, аналитика, аналитика.

Про контекст: это, в основном, некоторое количество разума, кругозор и техника.

Обычно, открываю это https://webref.ru/css
Проглядеть список глазами и вспомнить нужное - несколько секунд.

Дополнительная польза - заодно вижу свойства о которых не знала или забыла. Это ускоряет или усовершенствует верстку в дальнейшем.

Свойства за которыми лазала несколько раз записываю ручками на бумажку.
Еще о них можно кому-нибудь рассказать :)

1. Задание. Сроки.
2. В чью пользу трактуются не указанные в задании нюансы.
3. Сколько вариантов предоставляется, минимально, максимально.
4. Сколько правок.
5. Требование к готовым файлам для верстки.
6. Права на стоковые изображения.
7. Право или запрет на размещение работы в портфолио.
8. Срыв сроков.
9. Время на согласование каждой итерации у заказчика.
10. Оплата дополнительных переделок, внутренних страниц, финтифлюшек и т.д.
11. Пункт, что работу дизайнер выполняет на своем оборудовании и ПО.
12. Право дизайнера привлекать к работе третьих лиц.

Что еще забыла?

Если прям точно нужны несколько карт и способ Сергей Вам не подходит,

то табы на CSS без JS:
inferusvv.ru/blog/css/14-taby-s-pomoschyu-css3.html

Лишние стили:
CSS Usage для Firebug. Правда, нужно последовательно открыть все типовые страницы сайта, чтобы остались точно неиспользуемые стили. Почитайте инструкцию.

Лишние правила: в WebStorm есть проверка CSS - выдает все ошибки. В частности есть раздел про избыточное переопределение правил.
Правой кнопкой по файлу в списке проекта, Inspect Code.

Обычно так:
есть редакторы Notepadd++, Sublime и т.д., у которых в меню есть пункты типа: "Кодировка/открыть как". Иногда в меню, иногда на панельке внизу. Ну и соответственно для сохранения тоже.

Если кодировка не ясна, то есть онлайн распознаватели, например, Лебедева. Расшифровывает абракадабру и говорит в какой кодировке она была.

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

1. Перерисовать картинку с учетом отступов.
2. Двигать текст, чтобы добиться желаемого визуального эффекта.
3. Использовать background для li вместо list-style-image
4. Использовать :before и ему background