Как научиться верстать страницы: с чего начать и сколько времени нужно

На самом деле для того чтобы начать верстать свои первые макеты особо много чего знать не нужно, но даже при этом всем начинать делать что-то не имея понятия «с чего начать», бывает порой очень трудно, да и если ты начинаешь с нуля, то придется потратить несколько месяцев чтобы полностью разобраться в теме.

Я и сам когда-то начинал, и то что сейчас кажется очень простым, раньше заставляло мой мозг кипеть. Причем в моё время была одна проблема — информации было значительно меньше чем сейчас о том как верстать свои шаблоны.

Недавно мне мой один знакомый который прямо говоря не является программистом да и особо отношения к этой теме не имеет сказал одну интересную вещь, мол для того чтобы войти в эту тему раньше, нужно и знать было меньше так как на по его мнению технологии идут вперед и учиться всему нужно больше.

Для меня эта тема показалась достаточно спорной, что и заставило меня создать этот проект. Даже если он прав, я хочу внести свой вклад, и максимально упростить некоторые понятия. По факту мое мнение такое: для того чтобы войти в тему верстки нужно относительно не много, к тому же программисты все упрощают из-за своей лени, а значит все становится наоборот проще.

Ниже я собрал все что нужно знать для того чтобы начать верстать, что для этого нужно и какие технологии нужно учить в приоритете.

Следующие четыре технологии позволят вам стать полноценным верстальщиком и зарабатывать на этом реальные деньги, это:

• Photoshop;
• Css;
• Html;
• JavaScript;

Причем владеть этими технологиями в совершенстве не нужно, достаточно лишь начального уровня, кроме css. С ним нужно управляться немного лучше чем с остальными но об этом немного позже.

Photoshop — редактор изображений

Красивый шаблон без готового макета не сверстаешь, по крайней мере, если вы не профи. Я правда и сам бывало верстал без psd макетов, но как правило не имея в голове полной картины, сделать это сложно и не всегда выходит очень красиво.

Для того чтобы верстать, очень больших знаний в Photoshop не нужно иметь, я даже могу перечислить что именно нужно знать:

• Слои;
• Шрифты;
• Работа с цветами;
• Выгрузка объектов (картинок);

По идее это все, но если есть еще что-то можете меня поправить, я сходу и не вспомнил. Но точно могу сказать, что эти четыре пункта нужны для уверенного уровня верстальщика. Все остальное типа вырезать или уменьшить размер картинки это опционально (нужно в редких случаях). Больше ничего не нужно, но если хочется научиться большему, то лишним это точно не будет — рано или поздно пригодится.

Html — язык разметки

Как у человека имеется скелет, так у веб-сайта имеется html. Этот язык разметки достаточно простой, но в больших объемах если нет опыта работы, можно немного запутаться в нем.

Хотя по факту в html5 имеется 14 категорий элементов среди которых блоки, кнопки, подводки, картинки, вставки аудио\видео и так дальше, сумма всех элементов составляет всего 104 штуки.

Если кто знает хоть немного что такое html (думаю многие знают, но могу ошибаться), то вы вполне должны быть в курсе что у html имеются атрибуты их сумма составляет 138 штук но к каждому элементу идет свой набор атрибутов, так же имеются интерфейсы (117 штук), обработчики событий (73 штуки) и события (26 штук).

Но спешу обрадовать, все это в полном объеме знать не нужно, нужно знать только такие вещи:

• Как начать html документ (начальная заготовка);
• Блоки, параграфы и ссылки: div, span, p, a;
• Как присвоить класс и айди блоку;
• Списки в html: ol, ul, li;
• Картинки, айфреймы и объекты: img, iframe и object
• Работа со стилями с помощью классов, айди и без них с помощью style;
• Формы в html: form и его дети input, label и button
• article, aside, figure, footer, header, main, nav, section — обозначение основных блоков страницы

Как видите учить есть что, но по факту если идти по списку одной недели хватит с головой на изучение, а это и не так много. Правда после потребуется много практики, я иногда и до сегодня замечаю что узнаю много чего нового. Но по большой мере это относится к следующему пункту.

CSS каскадные таблицы

Как я начинал раньше, рассказывая что html это скелет документа, то говоря о css, могу сказать, то это стили документа, был бы это человек, то количество мышечных волокон, где и какие, а так же цвет кожи, глаз и волос мы бы задавали именно с css.

Учитывая даже то, что я написал о том, что мы можем сказать о человеке и какую роль сыграл бы css, то становится понятно, чтобы документ был очень красивым, css нужно знать максимально хорошо.

Но все это на самом деле не так сложно на сколько кажется. В моем случае мне понадобилось около 2-х месяцев на изучение для того чтобы верстка казалась более-менее красивой.

Одно что могу посоветовать, это начинать учить что такое:

• Grid layout верстка;
• Flexbox верстка;
• Блочная верстка;
• Работа с текстом;
• margin и padding
• Background и работа с картинками;
• Width и heigth;
• Единицы измерения: px, pt, em, rem, %, vw, vh;
• Media запросы;

Каждому из этих пунктов нужно уделить особое внимание, а все потому, что лично для меня css стал очень важной составляющей верстки с которой можно сделать практически все, в некоторых случаях даже анимацию.

Так же для того чтобы было удобнее верстать, буквально сейчас я начал использовать scss, что делает разработку более понятной и простой, но на начальных этапах лучше начинать с самого простого. А после приобрести книгу «css для профи», автор Кит Грант (не реклама, просто мне эта книга понравилась) кому не лень почитать литературу не из интернета — очень крутая книга.

Но анимацию стоит рассматривать только тогда, когда ты будешь уверенно работать со всем выше описанным, а до этого решить все эти проблемы можно немного проще, а именно с javascript.

JavaScript — полноценный язык программирования

Не стоит меня ругать за то, что я сделал этот заголовок в таком ключе. В целом на сегодня этот язык назвали уже мультипарадигменным, хотя раньше язык называли всего зыком сценариев.

С JavaScript на сегодня можно делать очень много всего интересного, например игры (либо браузерные либо для мобильных телефонов или компьютеров с помощью Unity3d) или разрабатывать полноценные сайты программируя полный функционал (Кому интересно как, смотрите в сторону NodeJs: angular, react и т.п.).

В целом кажется что с JavaScript не все так просто, но если вы все-таки станете специалистом в разработке сайтов с помощью такого фреймворка как Angular либо библиотеки React, то можно уверенно зарабатывать от 1000 долларов на рынке труда в ветке программирования.

Ну а для начала, так как мы просто хотим научиться верстать, я советую вам сразу перейти к изучению библиотеки jQuery — по факту большего и не нужно, она очень простая, и что самое главное документация настолько хорошо расписана, что разобраться можно не отходя от кассы (не всегда так бывает).

Ну а когда вы уже хорошо разберетесь в этой ветке, дальше можно переходить и на другие более сложные технологии например тот же Angular.

Сколько времени нужно для того, чтобы начать верстать

Меня этот вопрос, очень мучил когда я только начинал, ведь не все равно сколько нужно потратить на это времени, но то что пишут в интернете, и то что есть на самом деле, очень разные цифры.

Нужно учитывать разные факторы:

• Какой вы человек — в первую очередь!
• Какой у вас уровень занятости, и сколько времени вы можете выделять на изучение;
• Как быстро вы изучаете информацию;
• Из какой профессии вы приходите в профессию верстальщика;
• Насколько интересно это вам;

Этот список можно продолжать и дальше, но по факту я перечислил самые важные. Я например в эту профессию пришел не сразу, но войти в нее мне было не сложно, учитывая то, что начинал я с SEO (там хоть и изредка но нужно было работать с html) после чего я перешел в программирование (Php), ну а дальше, я решил для себя что хочу быть верстальщиком.

И даже так я могу суммировать и сказать сколько мне понадобилось для всего этого времени, чтобы уверенно войти в эту всю тему.

• Photoshop — 2 недели;
• HTML — 1 месяц;
• CSS — 3 месяца;
• JavaScript — 2,5 месяца;

В целом тогда я еще ходил в университет, и это был тот самый случай когда я совмещал учебу в университете с учебой верстальщика, но все это мне нужно было для того, чтобы уверенно работать PHP разработчиком. Но я уверен если приложить максимум усилий и работать усердно, можно уверенно войти за месяц, максимум два.

Когда я писал этот пост, я изучил что пишут мои коллеги по цеху (другие аналогичные блоги), так вот не я один такой кому нужно было пол года для того чтобы начать верстать свои первые сайты.

Заключительная часть статьи

В целом я попытался вложить в этот пост столько информации сколько я ждал от таких постов на самых первых этапах своей карьеры верстальщика или веб-мастера (веб-разработчика) в цвелом.

По факту, можно это называть как угодно, потому что все это одна огромная интересная профессия которая является на сегодня очень актуальной отраслью. Как я говорил выше, в этой отрасли существует много мелочей которые я изучаю до сегодня, и все это я планирую оставлять в рамках этого блога.

К примеру последняя моя статья была написана на тему верстки grid layout, такая себе шпаргалка вышла. Пока я не умел пользоваться гридами, построить такой документ было немного сложнее, это и есть то самое упрощение о котором я говорил выше.

В общем если вы все-таки решили для себя пойти в эту тему, то добро пожаловать, и не забудьте задавать вопросы, буду рад помочь.

Метки: верстка, как стать frontend разработчиком, урок верстки