Хочу заметить, что возможности более ранних версий HTML4 и CSS2, были включены в версии HTML5 и CSS3. Хотя и есть некоторые изменения, авторы книг обычно об этом упоминают.
На первых четырех этапах изучения, необходимо проделывать тоже, что и автор (установка текстового редактора, написание тегов, стилей и тд) и париться о чем-то более сложном не стоит.
Мой алгоритм изучения, имеет следующий порядок:
1) Прочесть книгу Мэтью Макдональда "Веб-разработка. Исчерпывающее руководство" 4 издание. По данной книге можно получить общее представление о HTML, CSS, JavaScript и других интересных моментах как, публикация/продвижение/монетизаци сайта, привлечение посетителей и ведение блога.

2) Посмотреть бесплатные курсы HTML4 и CSS2 Евгения Попова (курсам почти 10 лет, но они все еще актуальны, ибо все что в них рассматривается, используется на практике):
- курс по HTML
- курс по CSS

3) Теперь можно перейти к более детальному рассмотрению HTML5 и CSS3. И начать изучение я рекомендую именно с CSS3, так как большая часть возможностей HTML5 с уклоном на JavaScript. На этом этапе рекомендую книгу Дэвида Макфарланда "Новая большая книга CSS". В сети можно встретить книгу с названием "Большая книга CSS" от того же автора, но это предыдущее издание, нужна именно та, которая идет с припиской "Новая". Кроме основных возможностей CSS, книга познакомит с адаптивной версткой и препроцессором Sass/SCSS.
В данной книге рассматривается три способа верстки:
- с использованием float + margin
- более современный - Flexbox CSS
- модульная верстка, на примере сетки Skeleton (хотя способы верстки с использованием сетки Bootstrap и СSS Grid в книге не рассматриваются, принцип работы у них одинаков)

4) Теперь можно переходить к HTML5. К прочтению рекомендую следующие книги:
- Мэтью Мак-Дональд "HTML5. Недостающее руководство"
- Шмитт, Симпсон "HTML5. Рецепты программирования"
Данные книги познакомят не только с изменениями в синтаксисе и семантике HTML5, но с новыми возможностями:
- формы 2.0
- добавление HTML5 аудио/видео
- работа с canvas
- геолокация
- добавление в разметку микроданных
- использование ARIA
- локальное хранилище (sessionStorage)
- автономные приложения (appcache)
- Веб-сокеты (WebSoket)
- и тд

5) Теперь у нас есть общее представление о тегах, стилях, текстовых редакторах, о том как это работает и взаимосвязано между собой, что можно, а что нельзя делать. Пора приступать к практике. Нужно сверстать хотя бы 2-3 страницы из готовых макетов. Теперь по порядку, что нужно сделать:
а) Установить текстовый редактор и настроить его под себя (Notepad++, Sublime Text, Atom, Brackets и тд). На первых этапах подойдет Notepad++, в дальнейшем стоит перейти на что-то более функциональное. Так же рекомендую установить плагин Emmet для Notepad++ и ознакомиться как он работает.
б) Установить основные браузеры, для тестирования верстки (с IE по начало можно не заморачиваться)
в) Установить графический редактор, для открытия готовых макетов (Photoshop, Figma, Avocode, Sketch). На первых порах использовать Photoshop.
г) На первых порах сделать простенькую заготовку для верстки (структуру папок, где будут размещаться стили картинки, скрипты и один файл index.html). В дальнейшем стоит обратить внимание на HTML5 Boilerplate, ну а дальше на Gulp и Webpack
д) Скачать готовые бесплатные psd-макеты
г) Сверстать макеты тремя разными способами:
- float+ margin
- flexbox
- bootstrap или CSS Grid
е) Ну а теперь находим свежий видеоурок на Youtube, где автор верстает тем или иным способом, смотрим и повторяем. В качестве справочников использовать сайты:
- htmlbook.ru
- webref.ru
- caniuse.com

6) В дальнейшем по мере приобретения опыта, всегда будет хотеться упростить задачу или сделать процесс верстки комфортным, в этом случае нужно смотреть в сторону:
- gulp, webpack
- IDE для разработки, н-р, WebStorm
- препроцессоры HTML (HAML, Pug), препроцессоры CSS (Sass, Less, Stylus)
- git
- именование классов CSS
- среды для тестирования
- тд

7) Переходим к JavaScript. Книг конечно много, но я выделю следующие.
Книги на начальном этапе:
- Дэвид Макфарланд "JavaScript и jQuery. Исчерпывающее руководство"
- Фримен Эрик, Робсон Элизабет "Изучаем программирование на JavaScript"
Книги для углубленного изучения:
- Онлайн учебник, в том году обновилась информация
- Дэвид Флэнаган "JavaScript. Подробное руководство"
- Хавербеке Марейн "Выразительный JavaScript. Современное веб-программирование"

8) Переходим на практику, как и в случае с HTML и CSS. Как вариант можно добавить динамичности в сверстанные страницы. Написать простенькую игру, н-р, змейка. Или же найти сайт с задачками, необязательно по JavaScript. Как вариант можно воспользоваться сайтом CodeWars

9) Так же как и в случае с HTML и CSS, по мере приобретения опыта, всегда будет хотеться упростить задачу или сделать процесс верстки/разработки комфортным, в этом случае нужно смотреть в сторону:
- библиотек (jquery, backbone.js и тд)
- фреймворков (React, Vue, Angular)
- Coffeescript, TypeScript
- средства тестирования (н-р: Mocha JS)
- средства документирования (н-р: JSDoc)
- средства проверки кода (н-р: JSLint)
- и тд

Если доступ только к html-файлу, то я вижу два варианта:
1) Воспользоваться онлайн-сервисом Google Формы, т.е. подготовить в этом онлайн-сервисе форму, а потом добавить HTML-код к себе на страницу. Подробнее об этом вот здесь: Google Формы
2) Использовать URL в формате mailto:, т.е. самостоятельно верстаем на своей странице форму, и у тега form, указываем следующие атрибуты:

<form action="mailto:test@test.com" method="GET" target="_blank">
...
</form>

Теперь при нажатии на кнопку отправить, у пользователей на компьютере, будет запускаться установленный по умолчанию почтовый клиент, например, Outlook, в который попадут все значения из полей формы. Подробнее об этом вот здесь: mailto

HTML дается легче, так как основное, что нужно знать о нем, это:
1) Какие есть теги, их предназначение и атрибуты. Тегов не так уж много и большая часть редко используется Теги HTML
2) Отличать строчные и блочные теги (с появлением HTML5 теги называют фразовыми и потоковыми). Это для того, чтобы правильно их вкладывать друг в друга, ну и на CSS-свойствах это отражается.
3) В HTML5 появились семантические теги, поэтому нужно иметь представление, как правильно ими пользоваться Выбор элемента HTML5
4) И на первых порах пользоваться Валидатором HTML

C CSS дела обстоят сложнее, так как там очень много основных моментов, в отличии от HTML, о которых стоит знать. Упомяну некоторые из них:
1) Селекторы
2) Наследование стилей
3) Каскадность
4) Свойства и значения этих свойств
5) Типы разметок веб-страницы (фиксированные, резиновые, эластичные, адаптивные)
6) Позиционирование
7) Способы верстки (float + margin, Flexbox, модульные сетки (Bootstrap, CSS Grid и т.д.))

Глянул курс на codebra.ru, могу сказать, что максимальная информация по CSS из него составит 5-10%

Мои рекомендации:
1) Купить или скачать книгу Дэвида Макфарланда "Новая большая книга CSS". Книга охватывает примерно 80% информации по CSS. Плюс в ней есть обучающие уроки.
2) Посмотреть бесплатные видеокурсы по HTML и CSS, Евгения Попова:
- курс по HTML
- курс по CSS
3) Касательно записей в тетрадь, могу сказать, что это полезная штука. Конспектировать лекции не стоит, нужно подходить следующим образом:
- теги HTML и их атрибуты можно не записывать в тетрадь, смысла особо нет, так как всегда можно глянуть на сайте, который я указал выше
- а вот свойства CSS все же стоит записывать, т.е. узнали новое свойство из видео/книги, то необходимо его записать и также указать те значения, которые оно принимает, например, {position: absolute | relative | fixed | static | sticky}, {clear: none | left | right | both} и т.д.