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

что вас ждет,

когда вы станете 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

 

Жду вас!