Безумно рад встрече с вами. Меня все так же зовут Сергей и я отсутствовал слишком долго. Извиняться не перед кем, однако, я надеюсь, что это исправимо. Небольшим дисклеймером скажу, что если тебя интересует тема IT и ты не хочешь набивать шишки, которые в процессе обучения найду я, подписывайся и развивайся вместе со мной. Итак, верстка…
П.с. На этом канале не будет строгих определений, копированных из интернета. Это опыт, который нужен для понимания работы этой системы.
Что такое верстка и зачем она нужна?
Верстка - совокупность применения языка текстовой разметки (HTML) и каскадной таблицы стилей (CSS). Она предназначения для создания каркаса и последующего его украшения. Воспользуюсь стандартной аналогией, которые в процессе обучения применяет большинство менторов и блогеров. Если сравнивать код с человеческим телом, получится следующая картина:
HTML - кости, которые держат наше тело и вокруг которых формируется все остальное. Можно сказать, что это основа кода.
CSS - мышцы и кожа человека. Исходя из названия(каскадная таблица стилей) можно понять, что CSS служит для создания визуала на странице.
За движения же отвечает JavaScript, но это тема отдельного поста.
Как учить и как не учить?
После того как мы разобрались с основными терминами, применяемыми к верстке следует разобраться, как же нам следует учиться верстать и нужно ли это?
Ответ на эти два вопроса неоднозначен и сейчас я попытаюсь объяснить, какие именно ошибки я допустил и как это все работает(по моему скромному мнению). Если убрать весь пафос сравнения верстки и человеческого тела, в сухом остатке мы будем иметь набор однотипным схем, которые служат для создания каркаса для кодера. В большом количестве обучающего материала, который имеется в открытых источниках верстка подается достаточно просто и служит скорее как подготовительный этап перед написанием полноценного приложения. Для обучения я использовал несколько источников и инструментов. О них подробнее расскажу ниже.
developer.mozilla.org - ресурс, который содержит актуальные HTML и CSS -теги и их атрибуты.
result.school - по моему мнению одни из лучших бесплатных уроков по верстке. По сути для основ вам больше ничего и не нужно.
Так же я использую народный vscode с набором плагинов из уроков в result.
Этого будет достаточно для освоения верстки.
Любой из источников может быть изменен на другой, более удобный конкретно для вас. Это пример того, чем пользовался именно я.
Поговорим об ошибках
Основная ошибка в освоении верстки в том, что я пытался запихнуть в свою голову на начальном этапе слишком много знаний, в которых нет надобности. После диалога с одним из менторов одного проекта(название не имеет значения) я понял, что некоторые разработчики в принципе никогда не используют стандартную верстку. Они имеют либо готовый набор шаблонов, либо верстальщика под боком(эта профессия уже не имеет большого спроса). Для обучения достаточно просто просмотреть материал и много практиковаться. Далее необходимо приступать к изучению js. Далее в процессе освоения более сложного материала вы познакомитесь с методологией БЭМ, адаптивной версткой и т.д. На старте же вам эта информация не нужна.
Итоги
Собрав основную информацию из поста можно выделить следующее:
- Много практики(это нужно запомнить на всех этапах изучения программирования).
- Не углубляйтесь слишком сильно, но изучите основные атрибуты HTML и CSS до понимания основных тегов и написания кода с малым количеством шпаргалок.
- Не распыляйтесь и изучайте все последовательно.
Подытожив могу сказать, что верстка показалась мне интересной и то, что мне казалось сложным в действительности являлось достаточно простым и фундаментальным знанием. На этапе верстки можно примерно понять, нравится ли вам frontend-разработка или стоит подумать о каких-нибудь других профессиях в IT. Моему выбору я выделю отдельный пост и подробно опишу то, на что я смотрел при выборе профессии. Оставайтесь со мной и следите за обновлениями. Я рад делиться опытом и получать обратную связь. До скорых встреч.