Bondi

зарабатывать хотя бы 20 000 рублей в месяц

Реально, но через год-два в нише "вёрстка+создание сайтов на cms" это будет +/- потолок для фрилансера (без опыта в N лет, портфолио на 30 лучших работ и 100+ отзывов). Слишком возросла конкуренция, слишком упали расценки на данный труд.

Просто если цель этого всего - 20к руб./мес., то смысл тратить 2 года на выжигание глаз кодом? Гуманитарная вышка есть, любая неспециализированная офисная работа подойдет. Зарплата, скорее всего, будет больше (тыщ 25-30), но никаких кидков, толп конкурентов, гонки за копеечными заказами, дедлайнов, ночных переработок, фрилансерского ноулайфа и пр. А главное - стабильность, знаешь, что 15 числа, допустим, сумма придет на карту, и нет головной боли на тему "чем питаться завтра, если нет заказов". Да и без образования и вне офиса эти 20к можно хоть администратором, хоть в колл-центре зарабатывать спокойно.

Если цель - связать жизнь с разработкой, то советую сразу смотреть в другие ниши мимо "вёрстки + WP".

https://codepen.io/Vestride/pen/dABHx

Можно начать с лингусты "lingust.ru/english"
так же параллельно сидеть на "https://lingualeo.com/ru", читать простенькие тексты, учить слова.
На youtube подписаться на канал "https://puzzle-english.com" и аналогичные.
Так же советую хороший словарь "https://www.lingvolive.com/ru-ru", т.к. гугл переводчик это ерунда, не стоит им пользоваться при обучении.
Из бумаги - "Самоучитель" Петровой.
Постепенно читайте адаптированную литературу, смотрите TED Talk с субтитрами.
Если пользуетесь Википедией, то переходите с русской на"https://simple.wikipedia.org/wiki/Main_Page"

Занимайтесь каждый день (это очень важно!) хотя бы по 30 минут (привет the half hour theory).

За 1.5 года выучить английский реально. Криво, коряво, но можно (без репетитора практически не реально выучить идеальное произношение). По мне так лучше говорить с ошибками, чем вообще молчать в ответ.

Удачи!

Есть канал на YT "English Galaxy". На нем нсть плейлист 350+ уроков, вся грамматика. Каждый урок делится на два. Теория, потом по этой теории практика. Перевод предложений.
Единственное что мне помогло самостоятельно начать изучать английский. Подобного я больше не встречал.
На данный момент прошел пока что только 58 уроков, но результат просто удивляет. Самому не верится что так продвинулся...раньше вообще думал нереально мне выучить английский.
На данный момент на практике перевел около 8000 предложений. Как по маслу все ложится, без какого либо напряга. + очень много новых слов во время теории изучается. Сейчас уже знаком с Present Simple, Past Simple and Future Simple.
Через урок будет большая контрольная практика по 3м временам.
В общем очень советую. можете почитать отзывы под любым роликом, 99.9% положительные. к тому же все абсолютно бесплатно. + недавно вышло приложение 5555 тестов по граматике

на codepen.io у профи

гугл - > html якорь

Ничего сложного не вижу в верстке. Запарная, но вполне реализуемая. Чего в комментариях ноет народ? Или Вам интересно 3 блока в ряд flex'ом закидать - "Ху*к-ху*к, и в продакшн"?
Делим на три блока: светлый, текст по центру, темный блок. Текст через shapes форматируем, форму каждого блок через clip-path, svg... Позиционируем чуть-чуть(много). Получаем итог. Ну a с нижней все понятно - transparent: skew, clip-path...

Вот хороший пример shapes - https://www.sarasoueidan.com/blog/css-shapes/
clip-path - https://developer.mozilla.org/en-US/docs/Web/CSS/c...

А мобильную пусть кидает макет дизайнер. Или он на полпути оставил Вас?

ps с поддержкой надо поиграть, но тоже ничего такого....
psps скинь макет. Ночью будет свободное время - сделаю.

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

1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

В принципе, этого достаточно, чтобы верстальщик справился.

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

В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.

1. верстальщик - html, css, jquery на примитивном уровне, чтобы можно было подключать библиотеки и писать свои небольшие скрипты, умение пользоваться bootstrap, понимание модульных сеток
2. junior frontend - первый пункт + нативный js + основы реакта \ vue \ angular, базовые знания git
3. middle frontend - когда ты уже уверенно себя чувствуешь, решаешь любые задачи
4. senior frontend - опытный разработчик с хорошим знанием английского языка, глубоким пониманием нативного js и выбранного фреймворка. Благодаря коммуникативным навыкам ведет за собой команду.

блин что за вопросы зайдите на биржу и посмотрите список заказов все же в открытом доступе

Что можно изучить по этой теме? В каком направлении двигаться?

1. Геометрию.
2. media условия
3. немного JS/JQ
4. оптимизицию изображений, отличия графики для ретины

px и % - ничего надежнее нет

$(selector).find('> img').click(function () {
        $(selector).toggleClass('active');        
    });

Удаляется. Только потом сразу же ставится обратно.
попробуйте использовать hasClass()

var $works= $('.work-1, .work-2, .work-3');
$works.on('click', 'img', function () {

if($(this).parent().hasClass('active')) {
        $works.removeClass('active');
} else {
        $works.removeClass('active');
        $(this).parent().addClass('active');
}
    });