Хочу заметить, что возможности более ранних версий 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)
- и тд
