7 надежных шагов, которые     помогут Вам стать Front-end разработчиком

Как вы думаете,

что вас ждет,

когда вы станете Frontend разработчиком?

Стабильность

Комфортный оффис

А так же....

  • интересная работа
  • хороший коллектив
  • карьерный рост
  • ....................................
  • и многое другое

Но есть нечто, о чем в слух не говорят, но многие об этом думают....

Знаете что это?

!!!Высокая зарплата!!!

Все перечисленное действительно важно,

но для того чтоб стать

хорошим разработчиком надо кое что еще...

А именно:

  • Искренний интерес к IT технологиям;

  • Желание кодить в свободное время, для себя;

  • Стремление к постоянному самообучению;

  • Подсознательное желание все оптимизировать;

  • Любить свою работу :)

Хотите стать таким?

План вебинара

  • Что значит Backend и Frontend, какая между ними разница;
  • Почему фронтенд разработка - это круто;
  • Что должен уметь современный Frontend разработчик;
  • Минимальный набор знаний для Frontend программиста;
  • Набор необходимых программ для работы с исходным кодом;
  • Google Development Tools - главный инструмент Frontend разработчика;
  • Что делать когда вы освоили (HTML, CSS, JS)
  • Node.js, Angular, NPM, Gulp, Grunt - как в этом разобраться и что именно изучать;
  • Как попасть на собеседование и вынести с него много полезного;
  • Несколько советов по грамотному составлению резюме;
  • Как через пол года стать Junior, те самые 7 шагов...

Backend и Frontend, какая между ними разница

 

Frontend (UI) - Часть программы, которая отвечает за взаимодействие с пользователем. В случае web эта часть программы часто находится на стороне пользователя, то есть в интернет браузере.

Frontend условное понятие, основная мысль - это пользовательский интерфейс, та часть программного комплекса с которой непосредственно взаимодействует пользователь.

 

Backend - Часть программы, которая находится на стороне сервера и отвечает за обработку данных и взаимодействие с базой данных.

*UI - user interface

Почему фронтенд разработка?

 

  • более низкий порог вхождения
  • реальнее найти задачу/проект/работу даже без опыта
  • нереально динамичное развитие технологий
  • перспектива роста и расширения сохраняется
  • безграничный личный рост как специалиста
  • создание UI разного уровня сложности будет нужно всегда
  • карьерные перспективы ничем не хуже чем в Backend

по данным dou.ua

Что должен знать и уметь Frontend/Web developer

 

  • HTML5/CSS3
  • Native JavaScript
  • JQuery, Underscore, Lodash, Moment
  • Bootstrap3, Material Design, Foundation
  • Git or TFS
  • Cmd (коммандная строка)
  • Npm/Grunt/Gulp/Bower/Web Pack
  • Unit tests (Jasmine/Karma)
  • Node.js
  • AngularJS (1, 2), React, Ember, Polymer...
  • Tools (SublimeText, Atom, Brackets,

WebStorm, Notepad++, Fidler)

 

Минимальный набор знаний для

Frontend программиста

 

Минимум:

  • HTML5, CSS3
  • Native (Core) JavaScript
  • Ajax
  • Jquery, Underscore, Moment
  • Bootstrap3
  • Git (GitHub)
  • Debugging (Browser Dev Tools)
  • Английский язык

Средний уровень:

  • ES6 (ECMAScript 2015 )
  • ООП (mvc other patterns)
  • Npm
  • Less, Sass
  • Grunt, Gulp, Bower, Web Pack
  • NodeJs, Express.js
  • Angular, React
  • Unit testing
  • SPA (Single Page Application)
  • Responsive Design

ОК, что делать?

HTML, CSS

(HyperText Markup Language,

Cascading Style Sheets)

Что это: Разметка страницы и ее стилевое оформление. Динамика практически отсутствует.

Зачем: это основа любой веб страницы, без HTML, CSS современный интернет в принципе невозможен

Важность: критично

Сложность: низкая

Время базового освоения: 1-2 мес

http://htmlbook.ru/

http://www.w3schools.com/html/default.asp

JavaScript

Что это: Язык программирования. Реализация языка ECMAScript

 

 

Зачем: реализует любой динамический функционал и взаимодействие пользователя с интерфейсом

 

Важность: критично

Сложность: средняя

Время базового освоения: 3-5 мес

https://developer.mozilla.org/ru/docs/Web/JavaScript

http://www.w3schools.com/js/

Библиотеки

(Jquery, Underscore, Moment)

Что это: Набор вспомогательного функционала.

 

Зачем: позволяет упростить частые   и типовые операции (события, ajax, работа с DOM структурой, временем, перебор коллекции)

 

Важность: средняя

Сложность: низкая

Время базового освоения: 1-2 мес

https://jquery.com/

http://underscorejs.org/

CSS frameworks

(Bootstrap, Foundation)

Что это: Набор готовых решений по верстке и стилям

 

Зачем: значительно упрощает создание интерфейсов, содержит все типовые решения (кнопки, формы, модальные окна, слайдеры и т.д.)

 

Важность: высокая

Сложность: низкая

Время базового освоения: 1-2 мес

http://getbootstrap.com/

Version Control

(Git, TFS)

Что это: система контроля версий

 

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

 

Важность: высокая

Сложность: средняя

Время базового освоения: 1-2 мес

https://git-scm.com/

Browser Dev Tools

 

Что это: специальная функциональность браузера, предназначенная для работы с HTML, CSS, JavaScript, сетевыми запросами и многим другим.

Зачем:

  • редактирование HTML, CSS в режиме реального времени
  • Debug (отладка) JavaScript
  • просмотр сетевых запросов, ajax
  • ошибки выполнения JavaScript

 

Важность: высокая

Сложность: низкая

Время базового освоения: 0,5-1 мес

JS Frameworks

 

Что это: програмные комплексы различной сложности, определяющие структуру приложения

Зачем:

  • задает, структуру и архитектуру приложения
  • содержат инструменты для более простой реализации типовых задач
  • значительно упрощают написание сложных приложений
  • позволяют сфокусироваться на бизнес логике, а не на структуре и взамодействии компонентов
  • используются для реализации SPA (Single Page Application)

 

Важность: высокая

Сложность: высокая

Время базового освоения: 3-5 мес

Css препроцессоры

 

Что это: расширенный вариант синтаксиса css, преобразуется в чистый css

 

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

 

Важность: высокая

Сложность: высокая

Время базового освоения: 3-5 мес

http://lesscss.org/

http://sass-lang.com/

Системы сборки

(Gulp, web pack)

 

 

Что это: консольное программное обеспечение для "сборки" проекта

Зачем:

  • склейка всех скриптов в один
  • минификация и фускация
  • преобразование less и sass в чистый css
  • организация модулей
  • live reload

 

Важность: средняя

Сложность: средняя/высокая

Время базового освоения: 1-3 мес

Mean Stack

(Mongo DB, Express, Node.js, Angular)

 

 

Что это: комплект технологий для работы со всеми слоями приложения

 

Зачем: возможность использовать JavaScript как на Frontend так и на Backend части приложения

 

 

 

Важность: низкая

Сложность: высокая

Время базового освоения: 3-5 мес

Набор необходимых программ

и инструментов

 

  • Текстовый редактор (Notepad++, SublimeText, Atom, Brackets - для не сложных задач; WebStorm, VisualStudio - для более комплексных задач)
  • Браузер
  • Browser Development Tools или такой же инструмент в другом браузере
  • Photoshop, Paint.net
  • cmd, powerShell, ConEmu
  • Fidler
  • Документация, обучающая литература, курсы, тренинги

 

 

Как попасть на собеседование

и что на нем делать

Подготовка:

  • необходимо выучить базовый стек технологий на приемлемом уровне;
  • решить много! задач для прохождения собеседований;
  • уметь верстать
  • отлаживать JS в браузере
  • уметь пользоваться библиотеками Bootstrap, Jquery, Underscore
  • иметь свой репозиторий на GitHub и свой проект
  • даже если вы не работали с технологией уметь отвечать что это своими словами
  • составить резюме (скачать примеры для IT компаний)
  • разместить резюме везде где только можно
  • Создать профиль на LinkedIn, искать там рекрутеров и САМОМУ им писать
  • найти все IT компании в вашем городе, узнать про их вакансии, познакомится с их рекрутерами. Узнать есть ли у них интернатура.

Прохождение:

  • изучите МАКСИМУМ про компанию в которую вы идете;
  • у вас должны "гореть глаза";
  • вы пришли прежде всего не за зарплатой, а за новыми технологиями, интересной работой и т.д.
  • подготовьте вопросы для того кто вас собеседует;
  • если не знаете ответа вообще, не говорите полную чушь;
  • если есть вариант, развивайте мысль;
  • пример "с этой библиотекой не работал но работал с вот этой";
  • обязательно записывайте то чего не знаете;
  • никогда не умничайте и не хамите;
  • старайтесь держаться уверенно, не забивайтесь в угол и не разваливайтесь на стуле
  • прочитайте про все! технологии которые если в описании вакансии;
  • Если вы не знаете всего в совершенстве, это не повод не идти на собеседование
  • Вы должны показать заинтересованность в проекте, работе в компании и в технологиях вообще.

Так что же делать?!?

 

  • Разработай четкий план действий. Что именно и в какой последовательности будешь изучать. Напиши его на бумаге. Это критично важно!!!
  • Разбей план на мелкие пункты, которые занимают не больше часа.
  • Не изучай больше 2х технологий одновременно.
  • Любой пройденный материал закрепляй на практике, всегда!
  • Каждый день выделял на обучение от 20 мин до 2х часов.
  • Фиксируй каждый день свой прогресс
  • Напиши резюме, загрузи на сайты поиcка работы, создай профиль linkedin, ищи контакты с рекрутерами.
  • Придумай себе проект и начни его делать.
  • Через 5 -6 месяцев нужно ходить по собеседованиям. Не жди пока тебя позовут.
  • Ищи проекты на фрилансе. Делай не за деньги а за отзыв.
  • Собирай пробелы в своих знаниях и устраняя их.
  • Не забывай про Google Driven Development (Stack Overflow and Habrahabr)
  • Обязательно учи английский

 

Можно ли это все преодолеть самому?

 

Можно, но когда есть кому помочь значительно проще, быстрее и эффективнее.

 

Курс "Понятный JavaScript" поможет вам прокачать за 2,5 - 3,5 месяца ключевые навыки, необходимые для Frontend разработчика.

 

         learn.jsexpert.net

 

           Жду вас на курсе!

 

 

  • Native (Core) JavaScript
  • Ajax
  • ES6

На курсе мы будем работать практически со всеми технологиям, которые входят в группу обязательных

  • HTML5, CSS3
  • Jquery, Moment
  • Bootstrap3
  • Git
  • Debugging (Browser Dev Tools)
  • Gulp

Начинаем 22 сентября

Вторник и Четверг в 19:30

 

Жду вас!

Made with Slides.com