Как стать Full-Stack разработчиком? Часть 1 – Front-End

Hola! Последние полгода я занимаюсь разработкой сайтов. Начинал все это с минимальными знаниями. Разумеется, вскрылось много пробелов в процессе работы. Но есть Google. Пользоваться им умею. С помощью него и закрывал пробелы, изучая то, что требовалось в очередном проекте.

В итоге в голове сформировалась некая каша из технологий, приемов программирования и подходов в решении разных задач. К тому же найденная информация не всегда объясняла лучшие практики. Встречал много велосипедов и костылей. Выбирать особо не приходилось. Нужно было, чтобы все работало как можно быстрее для скорейшего завершения проектов. Реализация уходила на задний план. Особо об этом и не волновался до недавнего времени. Как понимаете, я много практиковался, но почти не занимался теорией. А зря.

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

Другими словами, этот пост – моя дорожная карта на пути становления Front-End разработчиком. Если вы студент-программист или просто хотите стать Front-End разработчиком, то сможете найти здесь кое-что полезное и для себя.

Весь процесс моего обучения будет бесплатным. Тратить деньги собираюсь только на покупку книг. Я не вижу смысла платить за курсы, когда в интернете и литературе тонны свободно доступной информации высокого качества.

HTML

Начну с плотного изучения (повторения) HTML. Это основа. HTML служит для создания “скелета” веб-страницы.

Сайты

• HTML Academy
• WebReference

Книги

• Марк Пиллигрим. Погружение в HTML 5.

Задачи

• Изучить материал (теория + практика)
• Улучшить владение Sublime Text 3 и Emmet
• Выработать привычку пользоваться W3C валидатором

CSS

Затем перейду к CSS. Таблицы стилей нужны для того, чтобы веб-страница получила оформление и дизайн. Именно благодаря CSS мы можем наблюдать такое разнообразие внешнего вида сайтов в интернете.

Сайты

• HTML Academy
• WebReference
• Уроки CSS

Книги

• Дэвид Макфарланд. Большая книга CSS3
• Эрик Майер. CSS. Каскадные таблицы стилей. Подробное руководство

YouTube

• DevTips

Фреймворки

• Bootstrap
• Foundation

Дополнительно

• Gulp
• LiveReload
• Autoprefixer
• Минификация
• GZIP сжатие
• Правило 14 килобайт
• OOCSS
• БЭМ
• Как браузер разбирает CSS код
• Бандл CSS тасками сборщика
• Препроцессоры
• CSS библиотеки

Задачи

• Изучить материал (теория + практика)
• Изучить препроцессоры (SCSS, SASS, LESS)
• Изучить фреймворки и кейсы их применения
• Выполнить валидную верстку 10 PSD/Sketch/Adobe XD макетов

JavaScript

JavaScript – это интерактивность. Язык программирования для определения реакции сайта на действия пользователя. Благодаря JavaScript мы можем создавать динамичные сайты, где взаимодействие с пользователями выходит на новый уровень. Пожалуй, на этот язык придется потратить больше всего времени.

Сайты

• Современный учебник JavaScript

Книги

• Дэвид Флэнаган. JavaScript. Подробное руководство

Библиотеки

• Slick
• Owl Carousel
• Flickity
• Masonry pkgd
• jQuery UI Sortable
• PhotoSwipe
• Magniffic Popup
• Cute Slider
• jQuery Form Validation
• Select.js
• jQuery JSON Editor
• Face Detection
• Progress.js
• Tooltipster
• Typehead
• FitText
• PrettyEmbed
• Fitvids
• fullPage.js
• Velocity.js
• Tree.js
• MatchHeight
• Slideout.js
• FocusPoint
• Liquid Images
• Vide
• Swipe
• Autocomplete JS
• Swiper
• Template 7
• JS Barcode
• InputMask
• Remodal
• giDatePicker
• Chart.js
• EasyTabs
• И другие классные библиотеки

Далее перейдем к вещам посложнее

• React для создания пользовательских интерфейсов
• Angular 2 или vue.js для создания SPA

Дополнительно

• Webpack
• Jade
• Font Ninja
• Visual Event
• Node.js

Задачи

• Изучить материал (теория + практика)
• Научиться писать свои слайдеры, табы, аккордеоны, модальные окна и т.д.
• Изучить библиотеки и кейсы их применения

Для слежения за тенденциями и новостями в области буду слушать подкасты Web Standarts. Ребята каждую неделю говорят о Front-End разработке.

Также буду изучать и другие вещи, не имеющие прямого отношения к Front-End. Тем не менее, они полезны для развития кругозора веб-разработчика.

• Веб-дизайн
• UI/UX
• Тестирование
• Принципы работы сети
• Принципы работы браузерного движка
• Git
• Адаптация шаблонов под CMS (WordPress, Joomla, MODX, Drupal, DLE и т.д.)

Для любого профессионала важен инструмент. В моем случае – это IDE WebStorm. Что ж, буду знакомиться и постараюсь овладеть им на высоком уровне.

В качестве дополнительного контента стоит посмотреть несколько видео с одним крутым профессионалом в веб-разработке, Виталием Фридманом.

Заключение

Моим экзаменом будет публикация 5 тем оформления на ThemeForest. Там высокие требования и говнокодерам дорога закрыта. Скорее всего буду делать для WordPress, но может и другие CMS затрону. Посмотрим.

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

Ну а пока пойду и куплю бубен. Похоже, он мне скоро очень пригодится.