Оххх. У меня сейчас жена учит HTML. Я ее обучаю, поэтому расскажу как это происходит. Распишу по этапам.
1) собственно сам HTML. На заучивание тегов ушло пару дней. На первом этапе она учила теги с коротким описанием, что этот тег делает.
2) на втором этапе я рассказывал, как правильно располагать блоки на странице и как правильно делать HTML сетку без CSS, на этом этапе у верстальщика должна в голове строиться будущая структура HTML страницы, смотря на макет. Мучать теги до тех пор, пока не придет понимание контейнеров, колонок, хедеров футеров и так далее.
3) Когда пришло понимание того, как располагать блоки, начинаем изучать CSS. Здесь изучение идет по нарастающей, сначала float, потом flexbox, потом пишем маленькую сетку, как аналог бутстрапа, а потом уже идут CSS фреймворки.
Начинать сразу с flexbox + bootstrap 4 к примеру, это выстрел себе в ногу, потому что на фрилансе и в студиях много сайтов с float. И очень важно понимать именно это.
Также у нас были проблемы с тем, чтобы не привязывать класс к конкретному элементу, а писать так называемый универсальный CSS, ну то есть чтобы не было классов button1-margin-top-10 и так далее.
CSS мы сейчас изучаем в два этапа: CSS который отвечает за позиционирование (float -> flexbox) и за визуализацию (background, color) этот лайфхак помогает избежать путаницы.
И еще я понял, что девушки любят не только ушами, но и глазами. Когда показываю CSS, стараюсь делать блоки как можно крупнее и ярче, чтобы было понимание:)
-------
И заметьте, все без CSS фреймворков. Пока вы не сможете сделать что-то на чистом CSS, CSS-фреймворки вам противопоказаны.