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

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

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

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

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

HTML

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

Сайты

Книги

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

Задачи

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

CSS

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

Сайты

Книги

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

YouTube

Фреймворки

  • Bootstrap
  • Foundation

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

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

Задачи

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

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 затрону. Посмотрим.

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

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

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: