Как стать верстальщиком? От начинающего до веб-мастера.

1 292

Всем привет. С вами Corvax.  Сегодня мы поговорим о верстке.  Все из нас, так или иначе,  уже имеет небольшой опыт работы с HTML, CSS, а некоторые даже с JS. Обычно эти начальные знания которые человек получает еще будучи в школе. Если вы по какой то причине не имеет таковых, то мы с легкостью сможешь восполнить эти пробелы.

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

Представим себе нашу конечную цель —  стать “верстальщиком”. Что бы правильно это сделать, нам нужно точно понимать кто такой верстальщик, дабы в наше время сам термин интерпретируется на рынке труда по-разному.

“Верстальщик” в моем понимание это человек, который занимается версткой html страничек на самом высоком уровне (адаптивность, мобильные приложения, валидность) плюс знает минимум по JS что бы страница была живой и динамической.

Что нужно знать, что бы стать “верстальщиком” ?

Начальный уровень

— базовый html ( теги );

— базовый css (CSS-правила, селекторы, наследование);

— основы JS, JQuery;

— умение нарезать макет в Photoshop;

— инструменты Sublime Text (любой редактор по вашему вкусу), PhpStorm (или любая другая IDE)

Продвинутый уровень

Английский язык ( хотя бы intermediate);

— git;

— предпроцессоры для css(SASS, LASS, Stylus) и html ( например JADE );

— работа с twig (и другими шаблонизаторами);

— Написание собственных плагинов на js, использование CoffeeScrtip;

— использование методологии (BEM, SMACSS);

— Bootstrap, Foundation и т.д.;

— Gulp, Grunt, Webpack ;

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

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

Ресурсы для изучения

Сайты:

HTML, CSS

http://htmlbook.ru/

JS

https://learn.javascript.ru/

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

На этом этапе важно качать бесплатные макеты (в pdf) или же уже свёрстанные в html и пытаться их повторить, сверстав. После 15-25 страничек, которые вы сверстаете, вы получите необходимый начальный навык, который в дальнейшем вы будете шлифовать.

Далее мы будем упрощать себе жизнь, и автоматизировать весь процесс продакшена.

JQUERY/JQUERY UL

http://jquery.page2page.ru/index.php5

https://jquery.com/

SASS

https://sass-scss.ru/

GIT

https://git-scm.com/

Почему sass? Большинство корпоративных сайтов верстаются на нем. Конечно вы всегда можете выбрать предпроцессор который нравится вам ( https://github.com/showcases/css-preprocessors )

BEM

https://ru.bem.info/methodology/css/

http://getbootstrap.com/

CoffeScript

http://coffeescript.org/

Gulp

http://gulpjs.com/

Twig

http://x-twig.ru/

Выше я перечислил только минимальное количество ресурсов которые являются базовой основой. Когда вы достигните такого уровня “просветления” вы сами будете в состояние выбирать лучший для себя информационные источники.

Еще несколько полезных ресурсов

GitHub — это крупнейший веб-сервис где миллионы людей хранят свои репозитории. Чем он полезен спросите вы? На нем есть стек всех технологий которые есть в вебе. Можно изучить код других людей совершенствую свое мастерство.  Можно участвовать в open source проектах.

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

Книги:

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

1. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5

http://www.ozon.ru/context/detail/id/136593716/

2. JavaScript и jQuery. Исчерпывающее руководство

http://www.ozon.ru/context/detail/id/33835343/

YouTube:

Здесь я перечислил самые известные из каналов по вебу на русскоязычном пространстве в которых вы сможете найти качественный контент.

1. Sorax

https://www.youtube.com/user/ArtSorax

2. WebDesign Master

https://www.youtube.com/channel/UC7enHM_oJRYJOnyJrcRzwbg

3. Loftblog

https://www.youtube.com/channel/UCIIt69f5D44s2cdb9vXQNzA

4. Хауди Хо™ — Просто о мире IT!

https://www.youtube.com/channel/UC7f5bVxWsm3jlZIPDzOMcAg

Заключительные слова

Я постарался максимально сжато изложить тему становления html “верстальщика”. Описал путь, по которому вы можете пройти, что бы стать специалистом и начать зарабатывать, работая на студию либо на фрилансе. Оставляйте ваши комментарии, учитесь, развивайтесь и успеха вам дорогие друзья.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *