html css
Если Вы уже ознакомлены с основами языка разметки HTML и стилизации CSS, то Вы очевидно хотите понять — а что делать дальше. Естественно никто не даст Вам уже сейчас участвовать в реальном серьезном проекте и не доверит серьезную работу по верстке не то что всей страницы, а даже ее малозначительного кусочка, типа footer.

И тут надо четко понимать, что знать просто фундамент в 2017 году очень мало. Это исключительно Ваша инициатива — начать изучение верстки. Важно не остановиться на этом, представив, что Вы уже профессионал. Нет, Вы даже близко еще не Junior и с трудом можете претендовать на стажера. Но! В этой статье Вы получите ценные советы, как развить навык владения данными инструментами в короткие сроки. И давайте начнем.

Первое с чем надо ознакомиться после документации от Mozilla Developer Network и мини-курсов Codecademy, и пройти раза 2-3 от корки до корки — это прекрасный сайт по профессиональному овладению языком стилизации — CSS Diner. На этом сайте, в игровой форме Вы буквально выучите все основные селекторы языка и как они работают в реальном проекте. В особенности помогает понять, как обращаться посредством CSS к конкретным элементам сайта и изменять их. Первый проход занимает примерно 45-60 минут, в зависимости от начального навыка понимания HTML&CSS.

Так как CSS играет, пожалуй, основополагающую роль в верстке сайтов, с точки зрения их внешнего вида, то и самому языку уделяется большая часть времени. LearnLayout — интерактивный учебник по CSS, изучение которого может занять от 1 до 2 часов с глубоким вниканием в суть написанного. Стоит отметить, что именно данный сайт вносит в ясность в несколько спорных вопросов, с которыми сталкиваются новички: позиционирование, отображение элементов и т.д. Здесь можно получить уверенность в тех малых знаниях, что появились у Вас за несколько дней.

Теперь стоит озаботиться об установке программного обеспечения для создания первых серьезных версток. Да, к сожалению, ни Codepen, ни JSFiddle не позволяют создавать полноценные верстки с вложенными файлами. Только если это уже где то есть в интернете в открытом доступе по ссылке, для вставок. Здесь я советую Вам установить редактор кода, многие советуют SublimeText3, Atom, WebStorm или Brackets. Названия уже пугают, а запутаться в них новичку проще простого. Т.к. практически ни одна из вышеописанных программ не имеет сразу всех требуемых инструментов и нужно потратить уйму времени для установки всех расширений. Для самого начального уровня советую использовать бесплатную среду разработки от Microsoft — Visual Studio Code. Данное ПО крайне лояльно к неискушенному пользователю и помогает ему всем, чем может.

После освоения всего выше озвученного, можете смело приступать к верстке сайтов из макета. Звучит это грозно, т.к. мы изучали голые языки, а тут вдруг сразу макет. Но ничего страшного нет. Если Вы правильно поняли HTML и CSS, то глядя на просто дизайнерский-макет сайта сразу способны точно сказать: где здесь header, где footer, что будет навигацией, а что относится к контенту. Пытайтесь чтобы Ваша работа максимально была похожа внешне на изображение макета. Для ускорения создания разметки используйте Emmet — данный инструмент позволяет создать разметку «как вам надо» всего за одну строчку кода. Инструкция содержится буквально на главной странице сайта.

Главное что хочется посоветовать в рамках данной статьи — экспериментируйте. Не бойтесь пробовать и гуглить непонятные моменты. Вся полезная информация о применении тех или иных элементов всегда можно найти на htmlbook, Перед Вами не будет стоять задачи — чтобы все было точь в точь как на картинке в плане размеров. Главное — полностью реализовать стиль дизайнера на реальном примере. Что-то может по началу не получаться. Но если следовать инструкциям данной статьи, то Вы достаточно быстро сможете верстать простенькие странички, двигаясь к монетизации своего труда!