Оглавление
Всем привет. С вами 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
JS
Это те два ресурса с которых должен начинать любой новичок. Постепенно верстая и кодя на JS захочется ускорения и упрощения, именно для этого и созданы другие инструменты. Помните! К ним нужно переходить только после освоения предыдущих двух ресурсов, дабы заложить основу.
На этом этапе важно качать бесплатные макеты (в pdf) или же уже свёрстанные в html и пытаться их повторить, сверстав. После 15-25 страничек, которые вы сверстаете, вы получите необходимый начальный навык, который в дальнейшем вы будете шлифовать.
Далее мы будем упрощать себе жизнь, и автоматизировать весь процесс продакшена.
JQUERY/JQUERY UL
http://jquery.page2page.ru/index.php5
SASS
GIT
Почему sass? Большинство корпоративных сайтов верстаются на нем. Конечно вы всегда можете выбрать предпроцессор который нравится вам ( https://github.com/showcases/css-preprocessors )
BEM
https://ru.bem.info/methodology/css/
CoffeScript
Gulp
Twig
Выше я перечислил только минимальное количество ресурсов которые являются базовой основой. Когда вы достигните такого уровня “просветления” вы сами будете в состояние выбирать лучший для себя информационные источники.
Еще несколько полезных ресурсов
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 “верстальщика”. Описал путь, по которому вы можете пройти, что бы стать специалистом и начать зарабатывать, работая на студию либо на фрилансе. Оставляйте ваши комментарии, учитесь, развивайтесь и успеха вам дорогие друзья.
Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.
Сайтик хороший, и вам спасибо!