С чего начать обучение верстке? На мой взгляд, в верстке главное – практика. Поэтому обучение стоит начинать с выбора макета. В сети достаточно psd макетов, которые можно использовать в не коммерческих целях. Поэтому первый шаг – выбор макета. Для первого опыта подойдет любой одностраничный сайт.
В этой серии постов я постараюсь на примере свободно распространяемого макета показать верстки проекта. Не будет постов с перечислением всех html тегов и css стилей, это не результативно. Важно не заучить каждый элемент, а понять особенности и подходы к реализации.
По мере появления времени, я выберу шаблон и поэтапно покажу работу над ним. Все желающие могут присоединиться, выбрать себе psd макеты и в процессе работы над ними мы обсудим те или иные подходы к верстке. Подробные уроки по HTML и CSS составлять не буду, этого в сети много. Например, уроки на webref:
https://webref.ru/layout/learn-html-css
Кроме того, при освоении основ советую избегать любых css фреймворков, стоит поделать работу руками, чтобы понимать, как и что устроено.
Список полезных ссылок:
Справочник по html/css: https://webref.ru/ref
Информация о поддержке тегов и стилей браузерами: http://caniuse.com/
Онлайн песочница: http://codepen.io/
Хорошая статья по флексбоксам: http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...
Это то, что касается новичков. Для опытных разработчиков постараюсь периодически делать выборку полезных статей и материалов.
Оставляйте предложения и замечания в комментариях.