Manatee

Все довольно просто:

блок - это независимая и самодостаточная единица, например кнопка, ссылка, логотип, весь сайт это лишь набор блоков. В стили можно писать все (кроме отступов и позиционирования*).

модификатор позволит добавить какие-то особенности блоку или элементу, для модификатора блока в стили можно писать все (кроме отступов и позиционирования*), для модификатора элемента можно все.

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

*position, display, float, margin

Стандартный ответ на вопрос как, когда и что учить:
пили проекты, решай реальные задачи, все остальное тлен.

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

Не дают работу? так сделай что-то для себя, для своих близких, для дяди, тети. Можно начать с какого-нибудь телеграм бота - сделать очень просто, минимум навыков.

Блин, 8 лет верстать "по-дедовски")
Да за это время можно было стать Senior developer или даже выучиться на фуллстак и уехать в какой-нибудь Израиль работать за 4к $

Препроцессоры я познал за один день. Для CSS использовал сначала less, через месяц ушел на Stylus (советую именно его, так как всякие sass это вообще мрак. Работать в чужом проекте на sass - ад, тогда как stylus прост, при этом более функционален и намного интуитивнее).

Jade (ныне Pug) узнал просто заканчивая чужой проект. Открыл, посмотрел на то, чего боялся, пришлось почитать что за зверь - работу то делать надо. Оказалось все просто, теперь не знаю как теги раньше писал ручками (со стилями тоже самое было, кстати).

Сборщик проекта. Для верстки, если выбирать между Grunt и Gulp - без сомнений Gulp. Я очень счастлив, что мне в тот момент подвернулась именно статья про Gulp. Работал с проектами на Grunt (их очень мало) - ну, это просто дерьмо, а не сборщик. Скорость сборки отличается в разы.

Webpack это конечно повыше уровень, юзать его для верстки не прагматично.

Флексбоксы в CSS изучаются только на практике, сидеть и запоминать это бессмысленно. 2-3 проекта с подсказкой по флексу и он плотно осядет в голове.

Вывод: надо просто не бояться нового. Берешь и применяешь новые технологии без страха и зазрения совести. Они быстро вольются в твою жизнь, а без них потом будет дышать тяжело и больно.

Советую взять готовые проекты у хороших верстаков и просто что-то в них поделать, попеределывать, попользоваться технологиями сразу, не читая нудные статьи про основы.

Мне кажется, самый простой пример замыкания - это счетчик.

var counter = (function () {
	var current = 0;
	return function () {
		current++;
		return current;
	}
})();

console.log(counter()); // 1
console.log(counter()); // 2

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

var current = 0;
var counter = function () {
	current++;
	return current;
}

console.log(counter()); // 1
current = 5;
console.log(counter()); // 6

А это уже нарушает принцип "черного ящика", т.к. переменной можно присвоить другое значение в любом месте.

1. Определяете минимум, который вам необходим для создания продукта-цели. Ну, то есть, самый минимум, minimum minimorum. Например: "Для создания моего продукта мне нужны HTML, CSS, JS и PHP. Без любого из них я свой продукт создать не смогу. Это мой необходимый минимум."

2. Ищите по 1-му толковому материалу (чтобы не распылять усилия на 8 книг и 15 онлайн-курсов по JS, условно) для каждого инструмента. Более того, по трем из них я вам могу дать рекомендации: HTML5 + CSS3 + JS. PHP не мой "конек", возможно коллеги подскажут...

3. Учите в том же порядке: HTML, потом CSS, потом JS/PHP (PHP/JS, тут уж сами смотрите).

4. Открывайте соответствующий материал по предмету, ознакомьтесь со структурой подачи материала и определите для себя ключевые точки для разбития этого материала на блоки, каждый из которых вы будете стараться пройти "за один присест".
Например: открываете книгу по HTML, смотрите содержание, и принимаете решение (исходя из имеющегося у вас времени, которое вы готовы в день уделять обучению), что будете в день работать над 2-мя главами материала.
Или: открываете материал по JS, смотрите содержание, и принимаете решение, что будете в день работать над 1-ой темой (сегодня - "Основы JavaScript", завтра - "Качество кода" и т.п.)

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

6. До тех пор, пока вы не реализуете свой стартовый проект, учите и практикуйте только то, что вам для этого необходимо. Работу непосредственно над самим проектом начинайте ровно в тот момент, когда почувствуете, что пора. Тут уж все индивидуально.

7. После реализации проекта можете выдохнуть, осмотреться, наметить очередные цели с учетом приобретенного опыта - и дальше в путь!

Подытожим: определитесь с минимумом технологий, распланируйте время на изучение, учите технологии step-by-step - не распыляйте усилий, придерживайтесь графика.

P.S. Вам будет проще, если вы сконцентрируетесь, поставите себе минимально возможные сроки и "возьмете эту крепость блицкригом", ибо на скользкую горку проще всего забраться с разбегу :)

1. Pixel perfect
2. Валидность кода
3. PageSpeed Insights
4. GTmetrix
5. Pingdom Website Speed Test
6. Проверка адаптивности
7. Проверка для Retina (srcset, svg, иконочные шрифты)

Была точно такая же проблема у меня.

Добавьте в wp-config.php в самое начало (после <?php ):

$_SERVER['HTTPS'] = 'on';

Плюс пониже после define всяких (до текста "/* Это всё, дальше не редактируем. Успехов! */"):

define('FORCE_SSL_ADMIN', true);
define('FORCE_SSL_LOGIN', true);
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false)
       $_SERVER['HTTPS']='on';

Если будут проблемы с путями у картинок, поставьте этот плагин:
https://wordpress.org/plugins/velvet-blues-update-urls/

И замените http://ваш_домен на https://ваш_домен с его помощью

Лучше всего посмотреть видеоуроки по адаптации чистого HTML/CSS для Wordpress. Вот сам учился на этом уроке: https://www.youtube.com/playlist?list=PLzi5JvpYf_h...

UPD: текстовая статья на Хабре habrahabr.ru/post/228523