Как стать frontend-разработчиком и всё таки делать сайты
Моё предложение в дополнение (или продолжение) к этому посту http://pikabu.ru/story/kak_zhe_vsetaki_sdelat_sayt_3974629
Моё предложение идёт от меня как от новичка, который пытается продраться сквозь дебри новых знаний. Лично мне мир веба даётся тяжело, поскольку я гуманитарий, к тому же девушка, к тому же блондинка, но свято верю, что нет ничего невозможного. Мне сложнее всего было продумать структуру - с чего начинать, на что обратить внимание в первую очередь, расставить приоритеты. Первое время я металась то в дизайн, то в хтмл и цсс, то вообще зависала в CSM, и естественно, в голове был сумбур, энтузиазм иногда угасал, но желание сменить профессию и стать если не супер-разработчиком, то хотя бы хорошим фронтэндщиком победило.
Поэтому предлагаю схему, которую составила для себя, авось кому нибудь начинающему она тоже поможет разобраться.
Специалистам и критике - рада. Если обратите моё внимание на недоработки, буду благодарна за подсказки и советы.
Начну с того, что, на мой взгляд, создание сайтов - это весьма сложный процесс, требующий совместной работы целой команды профессионалов, таких как дизайнеры, верстальщики, программисты, и хорошему верстальщику следует быть в курсе (хотя бы поверхностно) каждой ступеньки создания сайта. Поэтому я изобразила схему поэтапно, в виде процесса создания сайта. Какими то пунктами верстальщик и фронтендщик должны владеть виртуозно, какими то - просто иметь представление, как это работает и с чем это едят.
1. Создание идеи сайта, определение с видом и структурой сайта, знание видов сайта (статичный/динамичный, адаптивный/отзывчивый дизайн), определение с контентом (текст, графика, фото) - этот пункт сугубо ознакомительный, с этого можно начать понимание основной информации о сайтах.
2. Сервер, хостинг, домен - также понимать, как это работает, какой хостинг выбрать, и тд.
3. Проектирование сайта
3.1. Навигация сайта, карта сайта - создание основной структуры, отрисовка основных блоков (можно здесь посмотреть, как работают препроцессоры, либо как отрисовывать вручную).
3.2. Юзабилити (изучить хотя бы основные принципы эргономичного расположения элементов сайта)
4. Дизайн - этот этап реализуют дизайнеры, но верстальщику знание Photoshopa необходимо и для верстки макета в дальнейшем, и для общего развития, конечно.
4.1. Отрисовка макета в Photoshop
4.1.1. Основные инструменты рисования, техника, горячие клавиши.
4.1.2. Направляющие
4.1.3. Шрифты, цвета
4.2. Фреймворки (использование дополнительных бибилиотек может сэкономить время при разработке проекта - дизайне, верстке)
4.2.1. Bootstrap
4.2.2. Foundation
4.2.3. Compas
4.2.4. Material Design
5. Разработка - начинаем оживлять дизайн
5.1. Редакторы кода (Notepad++, Sublime Text, DreamViewer)
5.2. Структура и хранение файлов (создание директорий, помещение файлов в определенные папки, именование файлов)
6. Вёрстка/нарезка макета сайта - трансформация дизайна в HTML / CSS. Вот и добрались до основной части нашей работы.
6.1. HTML - изучаем досконально, не ленимся практиковаться, делать хотя бы легкие странички, экспериментировать.
6.2. CSS - то же самое, только можно изучить еще и применение препроцессорных языков SASS и LESS.
6.3. JavaScript - мне однажды дали совет, что для фронтендщика достаточно знать JQuery, и понимать JavaScript. Так или иначе, покорпеть над ними обоими придется.
6.4. JQuery - им нужно владеть больше чем хорошо.
6.5. Angular - это уже для более продвинутых учеников, я пока не доходила до этого, но насколько знаю, знание фреймворка даёт некий профит при поиске работы и оценке ваших навыков.
6.6. Git - сюда же поместила и систему управления версиями. Пригодится работающим в команде.
7. Интеграция макета в CMS - если, конечно, вы работаете через CMS. Но мне кажется, всё же мы должны знать хотя бы основные моменты популярных CMS - установка, модули, функционал:
7.1 Joomla
7.2. WordPress
7.3. Drupal
7.4. Bitrix
8. Наполнение сайта контентов, работа с админкой, тестировка сайта, запуск - завершающие основные моменты, с ними тоже связана немалая часть нашей работы.
9. Ну и напоследок, средства автоматизации, такие как Emmet, Jade, владение командной строкой, Gulp и Grunt, но это уже после первых 8 пунктов, и еще сюда можно добавить СЕО-оптимизацию, но это всё же не наша зона работы.
Чувствую, что критика будет, готова её принять, ещё раз напоминаю о своём дилетантизме в этом деле.