Frontend разработчик (с англ. «front-end developer») - это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере.

Фронт-энд разработчик (с англ. «front-end developer») — это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере. Главная задача фронт-энд разработчика — сделать максимально удобным взаимодействие пользователей с сайтом или веб-приложением. Профессия подходит тем, кого интересует информатика (см. выбор профессии по интересу к школьным предметам).

Фронт-энд разработчик — это верстальщик и программист в одном лице, герой стиля и кода, создающий пользовательский интерфейс.

Само слово «фронт» говорит о том, что фронт-энд разработчик находится на передовой линии с конечным пользователем, и отвечает за внешний функционал приложения, с которым контактирует пользователь. Программным кодом на сервере занимается другой специалист - . Для сведения: существует универсальный специалист, который работает одновременно на фронт-энд и бэк-энд. Он называется фулл-стак разработчик (с англ. «full stack developer»).

Основные инструменты фронт-энд разработчика в web: JavaScript, HTML, CSS.

JavaScript — главный язык фронт-энд разработчика в web, на котором он осуществляет программирование пользовательского интерфейса. Основная задача фронтендера - вёрстка сайтов: написание HTML-кода и CSS-стилей для представления информации в понятном всем браузерам виде и внешнему соответствию сайта макету дизайнера. Часто бывает, что макеты не отражают всех деталей общей идеи. В данном случае фронт-энд разработчик включает свои дизайнерские способности, чтобы учесть все технические детали и нюансы. Есть много дополнительных инструментов, которые автоматизируют рутинную часть работы: Sass/SCSS, jQuery, LESS, AngularJS, Bootstrap, Prototype, Ember.js, Backbone, React.js, Grunt Gulp. А появление Chrome Dev Tools и Firebug позволило повысить производительность труда.

Фронт-энд разработчик в web отвечает за то, чтобы страницы сайта выглядели во всех браузерах одинаково и соответствовали макету дизайнера. С появлением новых средств разработки и более современных браузеров эта задача решается проще. Но интерфейсы современных сайтов или интернет-сервисов становятся более сложными, а многообразие устройств, с которых пользователи выходят в сеть, постоянно расширяется — ноутбуки, планшеты, смартфоны. Поэтому фронт-энд разработчику очень важно, как и любому программисту, постоянно находиться в курсе всех новшеств и фишек, чтобы успешно адаптировать сайты под новые устройства.

Код сайта, написанный фронт-энд разработчиком, можно увидеть, вызвав контекстное меню на сайте и выбрав пункт «Посмотреть код».

Особенности профессии

Функционал фронт-энд разработчика в web выглядит следующим образом:

• создание HTML-страницы сайта на основе дизайн-макетов;
• вёрстка сайта и шаблонов для CMS;
• привязка к пользовательскому интерфейсу скриптов, которые обеспечивают визуализацию и анимацию страниц сайта;
• обеспечение необходимого уровня пользовательского интерфейса (UI — User Interface) и опыта взаимодействия (UX — Uzer Experience).

Плюсы и минусы профессии

Плюсы

Востребованная и высокооплачиваемая профессия

Минусы

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

Взаимодействие с большим количеством людей: , пользователями, дизайнерами, тестировщиками, аналитиками и постоянное участие в командных обсуждениях может быть напряжённым и неэффективным.

Место работы

Компании по разработке сайтов, веб-приложений, мобильных приложений

Важные качества

• Аналитический ум
• Ответственность
• Внимание к мелочам
• Творческие способности
• Способность соблюдать дедлайны
• Умение работать в команде
• Умение объективно оценивать свои возможности для решения поставленных задач
• Нацеленность на результат
• Постоянное желание осваивать новые технологии и инструменты

Обучение на Фронт-энд разработчика

(очно, Москва). Международное учебное заведение, специализирующееся на компьютерном образовании. Работает с 1999 года. 42 филиала в 16 странах мира. Крупнейший авторизованный учебный центр Microsoft, Cisco, Autodesk. Студенты получают международные сертификаты и международный диплом. Главная цель - трудоустройство каждого выпускника.

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

Оплата труда

Зарплата на 02.04.2019

Россия 40000—180000 ₽

Москва 60000—200000 ₽

Ступеньки карьеры и перспективы

Начинающий фронт-энд разработчик должен обладать навыками верстальщика. Далее карьера может развиваться в нескольких направлениях:

• специализация в бэк-энд разработках (Python, РНР) приведёт его к профессии бэк-энд разработчика;
• увлечение пользовательским интерфейсом — к профессии фронт-энд разработчика;
• внимание к дизайнерской части проекта — к профессии дизайнера;
• совместное владение навыками фронт-энд и бэк-энд разработчика — к профессии фулл-стак разработчика.

Дальнейшая карьера может складываться по-разному, в зависимости от места работы, личных предпочтений. В любом случае, в IT-сфере полезно развиваться в горизонтальном направлении, осваивая смежные профессии, чтобы стать настоящим гуру.

Типы разработчиков

Гуру — это профессионал с богатейшим опытом работы, обладает навыками практически во всех IT-профессиях. В сложнейших ситуациях умеет сконцентрироваться, быстро вникнуть в суть проблемы и единолично решить её. Занимает должность технического директора и имеет большой авторитет у сотрудников.

Теоретик - специалист, который подкован теоретическими знаниями в области информационных технологий. Постоянно учится новому сам и учит других. Будучи сильным в теории, оказывается слабым специалистом на практике.

Мистер рефракторинг — специалист по переписыванию программного кода, который постоянно стремится к совершенству. Он занимается переписыванием не только чужих, но и своих кодов, причём полностью. В связи с чем всегда нарушает сроки проектов.

Планктон — неопытный разработчик, который не понимает ни того, что он делает, ни того, что происходит в компании. Но это не самое страшное. После его вмешательства в систему, обязательно что-то перестаёт работать. Ему категорически требуется наставник, так как поиски решений на свои вопросы в поисковых системах не дают положительного результата.

Экспериментатор — специалист, который находится в курсе всех новейших технологий и инструментов в сфере IT. Он постоянно стремится использовать новинки в своей работе.

Спагеттикодер - это специалист, работающий очень быстро, но результат его работы всегда оставляет желать лучшего. Его коды называют спагетти-кодом или лапшой. Не всегда это происходит от неопытности. Иногда — из-за сжатых сроков или излишнего давления руководства. Но на всякого лапшакодера найдётся свой Мистер рефракторинг. Так что не так всё плохо в этом лучшем из миров!

Верстальщик и программист, художник и инженер в одном лице. В данном посте я поведаю миру о герое меча и магии стилей и кода, делающем веб красивее и быстрее — фронтэнд-разработчике. Пост будет интересен, в первую очередь, всем тем, кто хочет понять, чем фронтэнд-разработчики отличаются от верстальщиков, бекэнд-разработчиков, UX-специалистов и веб-дизайнеров. Какими навыками он должен обладать, и почему вообще столько чести быть фронтэнд-разработчиком? Автор не претендует на объективность, но всем, кому это интересно, добро пожаловать под кат.

Для начала давайте разберёмся, что же означает термин «фронтэнд», и кто такой фронтэнд-разработчик?

Данный термин весьма специфичен и обширен, в связи с чем сложно дать ему лаконичное и однозначное определение. Фронтэндом называют всю клиентскую (в том числе невидимую для пользователя — программную) часть сайтов/веб-приложений: интерфейсы, шаблоны, стили, виджеты и т. д. Соответственно, всё, что происходит на стороне сервера — бекэнд .

Приведу краткий список наиболее часто ассоциируемых с фронтэнд-разработкой понятий и технологий:
HTML , CSS , JavaScript , jQuery , Node.js , AJAX , SPA …

Разберём по полочкам, чем занимается типичный фронтэнд-разработчик.

Конечно же, первой приходящей на ум обязанностью является вёрстка . Наш герой в идеале знает, как сверстать страницу любой сложности. Соблюдение стандартов (в пределах возможного) — обязательное условие.

Фронтэнд-разработчик следит за качеством клиентского кода в своей команде, бьет по рукам нерадивых верстальщиков и щелкает по носу витающих в своих мечтах дизайнеров.

Хотите поставить на главную страницу своего сайта красивую галерею «как вот на том сайтике»? Спросите фронтэнд-разработчика! Он без раздумий назовёт вам дюжину готовых решений, предложит варианты кастомизации стандартных плагинов, и всё это сразу с учётом совместимости с вашей CMS и поддерживаемых устройств/браузеров.

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

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

На этом месте давайте обозначим грань, разделяющую верстальщика и фронтэнд-разработчика. Не будем вдаваться в подробности работы верстальщика. Основная его задача — нарезать макет. Если далее он предпочитает брать на себя часть бекэнд-разработки (PHP, Python...), то он развивается в сторону бекэнд-программиста. Если он больше уделяет внимание программированию клиентской части (JS), то, возможно, это будущий фронтэнд-разработчик. Может случиться и так, что верстальщик уйдёт в сторону дизайна, что тоже весьма неплохо — практические навыки вёрстки станут его весомым преимуществом относительно классических дизайнеров «по призванию».

Вторая важная обязанность фронтэнд-разработчика — обеспечение должного уровня юзабилити и опыта взаимодействия (UI и UX). Безусловно, об этих вещах должен в первую очередь думать дизайнер. Но в одиночку дизайнер не всегда может спроектировать такой интерфейс, который будет понятен в использовании и прост в реализации, по всё той же причине незнания технической части. Хороший фронтэнд-разработчик обладает навыками дизайнера и UX-специалиста . Другими словами, он знает как сделать красивый и удобный пользовательский интерфейс. Но ни в коем случае не отнимает хлеб у дизайнеров и UX-специалистов. А в случае отсутствия в команде любого из них — может их частично заменять.

Приведу жизненный пример.
Дизайнер больше не занимается проектом, а заказчик решил переделать внешний вид и логику работы какой-либо части своего интернет-магазина на Битриксе.
1. Менеджер проекта идет к программисту.
2. Программист говорит «нужна вёрстка, ТЗ и платное решение из Маркетплейса, потому что это нестандартный функционал для магазина» и отправляет менеджера к верстальщику.
3. Верстальщик говорит «нужен макет и нестандартный плагин для такой галереи, потому что этого нет в нашем готовом решении».
Менеджер оказывается в сложной ситуации. Клиент ждет результат, бюджет минимальный, рисовать некому. Как показывает практика, если доверить спасение подобной ситуации бекэнд-программисту, то на выходе клиент получит нечто, вроде бы работающее, но ужасное настолько, что дизайнер побелел бы, увидев такое, а пользователь ушел бы с сайта, приняв это за один большой баг. Верстальщик не справился бы с задачей однозначно. Малой кровью спасти ситуацию может только опытный фронтэнд-разработчик. Без лишней суеты он перепишет похожий компонент под поставленную задачу, переверстает стандартную галерею и добавит элементы интерактивности так, что решение задачи устроит клиента и понравится пользователям, а менеджер в очередной раз выдохнет с облегчением.

Наш герой — специалист широкого профиля. Ему интересен весь спектр веб-технологий. Не обходит вниманием он и серверную разработку . Помимо родного JS фронтэнд-разработчик знает на среднем уровне хотя бы один серверный язык программирования, может выполнять значительную часть задач, которые обычно выполняет бекэнд-программист. Знает как обращаться с таким зверем, как командная строка (консоль, терминал), и даже может настроить веб-сервер. Серверная разработка на платформе Node.js — не экзотика, а, как минимум, повод ответить всем «пэхэпэшникам» и «питонщикам» мол мы тоже не лыком шиты.

Одна из основных задач фронтэнд-разработчика — это, конечно, разработка на JavaScript , начиная от мини-плагинов для галереи, заканчивая полноценными веб-сервисами. Здесь вновь стоит упомянуть Node.js, в последние годы играющий огромную роль как в разработке клиентской части веб-приложений, так и серверной. Сотни клиентских фреймворков и библиотек, таких как, jQuery, Angular, Backbone, Knockout, Ember и др. — бескрайний простор для развития техник построения архитектуры приложений, улучшения качества и расширения спектра решаемых приложениями задач.

С развитием платформы Node.js стало популярно понятие «full-stack developer» — в нашем случае это JS-разработчик, использующий в своих проектах JavaScript для всех возможных целей. Сервер, база данных, клиентские шаблоны — всё это работает с данными в формате JSON, что весьма выгодно смотрится на фоне того же PHP, где «матёрые программисты» пишут кашу из PHP/Smarty/JS/CSS, которую бывает не под силу расхлебать уже через месяц после сдачи проекта.

Инструменты фронтэнд-разработчика — так же отдельная тема для разговора. Для Node.js было написано множество замечательных утилит, работающих в духе «одна программа — одна задача». Автоматизация рутинных задач с помощью Grunt стала неотъемлемой частью работы. Проверка кода, запуск тестов, автоматический деплой, обфускация и минификация, препроцессинг CSS и многие другие задачи решаются «на ура» всего в несколько кликов.

Chrome Dev Tools и Firebug — вне конкуренции среди инструментов для клиентской разработки. В умелых руках нашего героя эти штуки позволяют творить чудеса. Ваш сайт глючит и медленно загружается, из-за чего подвергается пессимизации в поисковиках? Хороший фронтэнд-разработчик с помощью Firebug за пару минут найдет все тонкие места в производительности сайта. К слову, и про SEO-оптимизацию наш герой не забывает. Случалось так, что товарищи по цеху в лице верстальщика и программиста наставили в коде страницы прекрасных тегов

, а все картинки имели атрибут alt="image001.jpg" . Они, безусловно, получат втык и под чутким надзором будут исправлять это.

Вывод

Кратко перечислим по порядку изложенные выше навыки хорошего фронтэнд-разработчика:

1. Валидная pixel-perfect вёрстка
2. Проектирование интерфейсов
3. Работа с серверными технологиями
4. JavaScript во всех ипостасях
5. Оптимизация веб-приложений

Выясняется, что фронтэнд-разработчик — отличный парень. И дизайн поправит, и вёрстку, напишет и отдебажит как надо. Этим постом я не хочу поставить фронтэнд-разработчика выше остальных, а хочу, чтобы сомневающиеся граждане поняли разницу между веб-специалистом широкого профиля и узкоспециализированными специалистами. Бывает обидно, когда человека, работавшего несколько лет над самыми разнообразными проектами, начальство называет простым верстальщиком и думает, что без него бы и так справились. Из-за такого отношения к сотрудникам компании часто теряют весьма достойных людей.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Front-end разработчик – это программист, основная задача которого состоит в разработке пользовательского интерфейса, то есть UI дизайна. Другими словами, данный специалист отвечает за внешнюю часть веб-ресурса в браузере, с которой контактируют посетители. Именно поэтому он должен сделать интерфейс максимально удобным и интуитивно понятным, чтобы взаимодействие и процесс поиска нужного раздела или информации не занимало у человека много времени и переходов с одной страницы на другую.

Front-end разработчик: кто это и чем он занимается

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

1. Верстка дизайна. На данном этапе происходит создание структуры html-кода, который вмещает в себя элементы, располагающиеся на страницах сайта (картинки, текст, кнопки и т. д.) и отображающегося в пользовательском окне браузера. Главная цель здесь – добиться того, чтобы каждый элемент дизайна был абсолютно идентичен макету. Помимо HTML здесь используется формальный язык программирования CSS.
2. Настройка функционирования кнопок, форм регистрации и обратной связи, галерей и прочего необходимого на сайте функционала. Для достижения высоких результатов Front-end должен применять готовый скрипт из библиотеки, либо создавать собственный.
3. После того как основная часть работы выполнена, он приступает к тестированию работы.
4. В дальнейшем он может давать рекомендации разработчикам касательно оптимального способа реализации той или иной функции на веб-ресурсе.

Как уже отмечалось, фронт-энд разработчик вбирает в себя несколько профессий: верстальщика и программиста. В отличие от обычного специалиста по верстке, который обладает навыками работы в HTML+CSS, в сферу его деятельности входит программирование интерактивных элементов, с которыми в дальнейшем контактирует посетитель сайта.

За что отвечает фронт-энд разработчик

Среди основного набора инструментов, которыми должен свободно владеть специалист, можно отметить JavaScript, HTML и CSS. С их помощью он должен создавать элементы, которые будут доступны для прочтения всем браузерам на ПК и смартфонах. Если предоставленный ему макет не отвечает всем потребностям и идеям проекта, он должен самостоятельно доработать недочеты, учитывая нюансы не только в сфере дизайна, но и технические детали. Помимо этого, он должен уметь пользоваться дополнительными инструментами, такими как библиотека, написанная на языке JavaScript , динамический язык стилей LESS , Backbone и т. д.Все это позволит ему, во-первых, в автоматическом режиме выполнять сложную и в то же время повторяющуюся часть работы, во-вторых, значительно увеличить производительность труда, добиваясь больших результатов за короткое время.

Фронт-энд специалист несет ответственность за то, чтобы веб-страницы проекта одинаково корректно отображались во всех видах браузеров и полностью соответствовали макету, который ему предоставил web-дизайнер. Наличие универсальных инструментов и средств разработки заметно упрощают данный процесс, однако повышение требований к современным интерфейсам сайтов, многообразие смартфонов и прочих видов электронных устройств, с помощью которых пользователи посещают интернет, заставляют фронт-энд разработчика следить за тенденциями, быть в курсе актуальных новостей и постоянно повышать уровень знаний и навыков.

Чтобы посмотреть написанный им код, пользователь может вызвать контекстное меню на страницах веб-ресурса, выбрав комбинацию клавиш Ctrl+Shift+L, либо нажав правой кнопкой мыши на свободном месте и перейдя в раздел «Посмотреть код».

Что нужно знать начинающему front-end разработчику

На сегодняшний день услуги специалистов по созданию пользовательского интерфейса весьма востребованы и хорошо оплачиваются. Однако есть и существенные недостатки. В частности, здесь отсутствует четкое описание того, что входит в профессиональные обязанности, а что не входит. По этой причине каждый руководитель может самостоятельно определять и оценивать круг деятельности. Иногда это может стать проблемой, поскольку могут потребоваться знания и навыки, которыми фронт-энд разработчика не обладает.

Вторым, не менее отталкивающим фактом является то, что специалист зависим от огромного количества различных людей, будь то разработчики программно-административной части web-приложения, дизайнеры или аналитики. С каждым из них ему необходимо согласовывать этапы и непосредственно процесс работы, участвовать в обсуждениях для поиска оптимального варианта и т. д. Как правило, местом работы для него служат крупные компании и агентства по разработке созданию веб-ресурсов, клиент-серверных приложений и мобильных клиентов.

Также начинающий front-end разработчик должен знать, где именно он может получить соответствующие знания и образование, подкрепленное дипломом. Во-первых, он может поступить в Международный учебный центр IT-образования «Компьютерная академия Шаг ». Здесь только очное отделение, а выпускники получают соответствующие сертификаты и международный диплом. На сегодняшний день филиалы академии представлены в шестнадцати странах мира. Во-вторых, можно пройти онлайн-курсы в . За шестинедельный курс здесь можно пройти стажировку.

Стоит отметить, что в данных учебных заведениях человек может получить только базовое образование, а чтобы стать настоящим профессионалом, необходимо заниматься самообразованием, параллельно подкрепляя полученные знания и навыки практикой.

Как стать front-end разработчиком

Карьерный путь специалиста, как правило, начинается с обычного верстальщика. Далее, в дополнении к имеющимся знаниям рабочей связки HTML+CSS, приобретаются знания и навыки в JavaScript и сопутствующих инструментах, включая графические редакторы. Если человек изначально знает, кем он хочет быть, он может пройти обучение в соответствующих учебных заведениях, что позволит ему узнать основу профессии сразу, а не частями.

Когда базовые знания получены, необходимо приступить к самосовершенствованию. Чтобы стать профессиональным front-end разработчиком, человек может воспользоваться одним из нескольких путей развития:

1. Совершенствовать свои навыки как специалиста, занимаясь различными проектами в роли фрилансера – это горизонтальный путь развития.
2. Устроиться в компанию и расти по карьерной лестнице – это вертикальный путь развития.

Основное правило в процессе обучения и совершенствования – ставить реальные цели и постоянно заниматься практикой. Важно изучать не только необходимый набор инструментов, но и хорошо разбираться в смежных профессиях.

HTML/CSS - язык гипертекстовой разметки, основа для изучения серверных ЯП. Изучив HTML, вы сможете создать статичную веб-страничку или веб-сайт. CSS - каскадные таблицы стилей - позволит оформить сверстанный сайт так, как вам хочется. Вы сможете смотреть видеокурс в удобное время и по всем вопросам обращаться к наставнику, который будет контролировать ваш прогресс. Формат располагает к общению и самодисциплине в обучении. За месяц вы научитесь: * верстке статических сайтов, * валидной кроссбраузерной вёрстке, * блочной вёрстке, * выполнению базовых операций в Photoshop, * использованию препроцессоров LESS и Bootstrap. Для перехода к следующему занятию курса необходимо, чтобы ваше домашнее задание прошло проверку. Это покажет, что вы поняли предыдущий урок и легко освоите новые знания. Задание может проверить как ментор, так и одногруппники, знаниям которых вы доверяете, и получить за это ачивку. С каждой проверкой количество ачивок растет, а навык работы с чужим кодом увеличивается. От количества ачивок зависит уровень итогового сертификата: чем их больше, тем выше статус. Эта в чем-то игровая механика делает занятия еще интереснее.

Урок 1. Основные понятия в веб-разработке

Что представляет собой веб-страница; виды сайтов; процесс разработки сайта; что такое гипертекст, теги и атрибуты; подготовка рабочего места; структура HTML-документа; основные теги оформления текста; простой пример HTML-странички; пример сложной веб-страницы; горячие клавиши для перемещения по документам.

Урок 2. Основы языка разметки документов HTML

Урок 3. Основы языка оформления стилей документа CSS

Что такое CSS; синтаксис CSS; способы объявления CSS; селекторы (id, class, tag); селекторы атрибутов.; основные свойства стилей; вложенность; наследование и группирование свойств; проверка подключения файла стилей.

Урок 4. Псевдоклассы и псевдоэлементы, табличная верстка

Приоритеты применения стилей; псевдоклассы и псевдоэлементы; создание таблиц; объединение ячеек; вложенные таблицы; стилевое оформление таблиц.

Урок 5. Формирование блочной модели, блочная верстка

Основные теги для верстки (div и span); отступы элементов (margin и padding); обтекаемые элементы; позиционирование блоков.

Урок 6. Работа с макетом дизайна в формате PSD

Основные функции и знакомство с Photoshop; выделение основных частей макета; нарезка макета; вёрстка макета сайта при помощи блоков; вставка частей макета в вёрстку;

Урок 7. Разметка сайта и знакомство с Bootstrap

Создание основной разметки сайта; применение overflow и clear в реальной вёрстке; заполнение разметки частями нарезанного макета; приёмы позиционирования элементов; знакомство и применение Bootstrap.

Урок 8. Стандарты web и вспомогательные инструменты

Загрузка проектов на сервер; проблема «кроссбраузерности»; стандарты HTML/CSS; будущее за стандартами HTML5 и CSS3; грамотная, универсальная вёрстка; знакомство с препроцессорами на примере LESS.

Основы программирования
Азы программирования, основные термины и понятия

Видеокурс познакомит студентов с азами программирования, основными терминами и понятиями. Научит разрабатывать алгоритмы и даст реальный опыт создания веб-продуктов. Уроки включают обзор актуальных языков и направлений программирования, помогают студентам выбрать наиболее интересные для себя и предоставляют материалы и инструкции для дальнейшего профессионального развития.

Урок 3. Первая программа

Выбор языка программирования. Подготовка браузера. Программа «Hello, world!».

Урок 4. Переменные

Установка удобного редактора кода. Знакомство с переменными. Простой калькулятор.

Урок 5. Типы данных

Типы данных. Операции с разными типами данных. Преобразование типов данных.

Урок 6. Алгоритмы и блок-схемы

Алгоритмическое мышление. Визуальные блок-схемы.

Урок 7. Оператор ветвления if

Выбор вариантов в программе. Оператор ветвления if. Игра в загадки.

Урок 8. Логические операции

Комплексные условия выбора. Логические И, ИЛИ. Игра «Злые птицы».

Урок 9. Циклы do, while

Циклы do и while. Игра в русскую рулетку.

Урок 10. Цикл for

Цикл for. Финансовый калькулятор.

Урок 11. Массивы

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

Урок 12. Функции

Функции. Подготовка к написанию игры «Black Jack (21)».

Урок 13. Игра «Black Jack». Часть 1

Написание полноценной игры. Основа – раздача карт и подсчет очков.

Урок 14. Игра «Black Jack». Часть 2

Завершение написания игры. Определение результатов и победителя.

Урок 15. Карьера программиста

Обзор основных направлений в программировании. Как выбрать язык программирования? Чему учиться дальше?

HTML5 и CSS3. 1 месяц.
Современные средства Web-разработки

Основа веб-технологии – это HTML/CSS Это базовый фундамент, который служит основой для создания современных веб-сайтов и является первым этапом для изучения других технологий программирования для глобальной сети Internet. Любая значимая организация имеет своё представление в глобальной сети. Это требование времени и требование рынка. Без учета современных реалий мира невозможно добиться конкурентоспособности и следовательно успеха. Именно связка HTML/CSS даёт возможность верстать макеты, создавать и редактировать статические сайты. Изучаемая на данном курсе технология программирования позволяет заложить долгосрочную основу и закрепиться в данной области на рынке труда.

Урок 1. HTML5: Семантические элементы.

Обзор HTML5, Новые семантические элементы HTML5, Новый способ структурирования страниц. Семантика текстового уровня. Настройка редактора, практические примеры применения семантических тегов, для создания структуры сайта. Знакомство с плагинами ускоряющими вёрстку сайта.

Урок 2. Позиционирование элементов, Практическая вёрстка.

Позиционирование элементов, расположение элементов на странице (позиционирование элементов по вертикали, по горизонтали). Рассмотрим самые популярные css генераторы, какие они бывают, для чего применяют каждый из них.

Урок 3. HTML5 формы. Добавление Аудио и Видео на страницу.

Рассмотрим и подробно разберем на практических примерах данные особенности. Усовершенствование традиционных форм (добавление подсказок, фокусировка на элементе и т.д.). Проверка форм на ошибки заполнения. Новые типы элементов (адреса электронной почты, URL-адреса и т.д.). Добавим в наш проект видео и аудио информацию, посмотрим как все это реализуется на практике. Рассмотрим работу тэгов

Урок 4. Параметры CSS для фона. Использование SVG.

Создание множественного фона для сайта. Задание фоновых изображений для адаптивных сайтов. Создание градиентного фона для сайт. Знакомство со спрайтами и иконочными шрифтами. Модернизируем наш проект в соответствии с новыми возможностями CSS3. Добавим необходимые элементы и эффекты. Знакомство с форматом svg.

Урок 5. Работа с текстом. Границы в CSS3

Работа с шрифтами. Веб-шрифты GOOGLE. Размещение текста в несколько колонок. Рассмотрим механизмы представления текстовой информации: оформление, выравнивание, отступы. Переключаемые вкладки для создания меню.Рассмотрим основы Canvas. Рассмотрим работу с границами в CSS, способы создания рамок элементов. Создание прозрачных рамок, теней, скругленных углов, градиентов.

Урок 6. Эффекты перехода и трансформации CSS3.

Эффекты перехода. Применение трансформации. Поворот элементов при наведении на него. Создание анимации средствами в CSS3. Узнаем для чего нужна данная технология и где ее следует применять. Добавим анимацию для некоторых элементов нашего сайта.

Урок 7. Адаптивная вёрстка (Часть 1).

Рассмотрим понятие адаптивного дизайна. Для чего и в каких случаях применяется. Основы синтаксиса и примеры. Придадим дизайну современный вид.

Урок 8. CSS3 Углубленное изучение.SASS. Flexbox.

Рассмотрим новое свойство flex, для создания гибкой структуры внутренних блоков сайт. Сделаем финальный проект со всеми доработками и нововведениями представленными CSS3, С использованием одного из самых популярных препроцессоров SASS.

JavaScript. Уровень 1. 1 месяц.
Интерактивные веб-приложения

Данный курс предназначен для тех, кто уже знаком с принципами HTML-вёрстки и созданием статичных страниц. Практические знания и навыки, приобретённые на этом уровне, дают возможность работать и создавать динамические веб-страницы и приложения. Курс систематизирует знания студентов, которые уже сталкивались с JavaScript, но не имеют богатого опыта работы с языком. Студенты знакомятся с основами создания интерактивных веб-страниц с помощью языка JavaScript. Полученные на уроках знания закрепляются через практическую часть - реализация игр на языке JavaScript. Перед началом обучения рекомендуется пройти курсы «Основы программирования» и «HTML / CSS».

Урок 1. Основы языка JavaScript

Синтаксис; структура кода; внешние скрипты и порядок их исполнения; переменные и типы данных; Hello world; современные стандарты.

Урок 3. Циклы, массивы, структуры данных

Циклы в JavaScript; массивы в JavaScript; структуры данных; практикум; игра «Быки и коровы».

Урок 4. Объекты в JavaScript

Знакомство с понятием объектов; объекты в JavaScript; работа с объектами; перебор значений; практикум; игра «Квест».

Урок 5. Введение в DOM

Понятие DOM; DOM в JavaScript; манипуляции с DOM в JavaScript; практикум; игра «Квест 2.0».

Урок 6. Обработка событий в JavaScript

Понятие события; обработка нажатий; браузерные события; практикум; игра «Крестики-нолики».

Урок 7. Урок-практикум

Реализация игры «Змейка».

Урок 8. Анонимные функции, замыкания

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

Курс предназначен для тех, кто уже освоил базовые возможности языка JavaScript, и теперь хочет научиться делать реально крутые вещи. Каждый урок включает в себя как полезную теорию, так и эффективную практику. Насыщенный самыми актуальными знаниями и навыками, продвинутый курс от GeekBrains - это возможность быстро и надёжно стать профессиональным разработчиком JavaScript.

Урок 1. Современный JavaScript

Знакомство со стандартом ES2015 и некоторыми его возможностями.

Урок 2. ООП в JavaScript

Основные принципы объектно-ориентированного программирования и его реализация в JavaScript.

Урок 3. Асинхронные запросы

Основы асинхронного JavaScript. AJAX, JSON и Promises.

Урок 4. Регулярные выражения

Регулярные выражения в JavaScript. Основные операции с регулярными выражениями и строками.

Урок 5. Фреймворк Vue.js

Основы разработки одностраничных приложений с помощью фреймворка Vue.js.

Урок 6. Компоненты Vue.js

Реализация компонентного подхода во фреймворке Vue.js.

Урок 7. JavaScript на сервере

Создание простого сервера с помощью платформы Node.js.

Урок 8. Тестирование и сборка

Тестирование отдельных частей приложения. Сборка модулей с помощью Webpack.

Основы баз данных. 20 уроков.
Проектирование БД и запросы SQL

Базы данных (БД) - это системы хранения и обработки данных, для доступа к которым используется язык SQL (Structured Query Language). Любой современный сайт, игра или настольное приложение нуждаются в хранении данных. На данный момент существует множество различных систем управления базами данных (СУБД), самой популярной является MySQL. “Основы баз данных” - это 20 интенсивных видео-уроков (по 10 минут), где мы вместе пройдём все этапы проектирования БД на примере интернет-магазина с использованием языка запросов SQL. После этого курса вы сможете использовать различные базы данных, такие как MS SQL и Postgre Sql, так как синтаксис языка SQL для них практически не отличается.

Урок 1. Реляционные базы данных

Чем отличается БД от СУБД; какие базы данных называются реляционными; обзор современных СУБД.

Урок 2. Установка СУБД

Установка СУБД MySql и графического приложения Mysql Workbench.

Урок 3. Проектирование базы данных, нормальные формы

Проектирование данных в Excel; нормальные формы; первичный ключ.

Урок 4. SQL-команда CREATE

Создание таблиц в графическом интерфейсе MySql Workbench; команда CREATE; типы данных; работа в консоли.

Урок 5. SQL-команда INSERT

Заполнение таблиц данными с помощью графического интерфейса; команда INSERT; AUTO INCREMENT.

Урок 7. SQL-команды DISTINCT, ORDER BY, LIMIT

Получение и фильтрация данных с помощью SQL-команд DISTINCT и LIMIT; сортировка с помощью команды ORDER BY.

Урок 9. Согласованность данных

Понятие согласованности или консистентности данных.

Урок 10. Внешний ключ

Понятие внешнего ключа и ограничений на значения столбцов; FOREIGN KEY CONSTRAINTS.

Урок 11. Создание таблиц с отношением “многие ко многим”

Добавление корзины в базу данных интернет-магазина.

Урок 12. Составной первичный ключ

Использование составного первичного ключа при проектировании таблицы с отношением “многие ко многим”.

Урок 13. Объединение данных из нескольких таблиц

Получение данных из нескольких взаимосвязанных таблиц; несостоятельность подхода с использованием нескольких SELECT-ов.

Урок 14. Оператор INNER JOIN

Объединение данных из нескольких таблиц с помощью оператора INNER JOIN.

Урок 15. Операторы LEFT JOIN, RIGHT JOIN

Объединение данных из нескольких таблиц с помощью операторов LEFT JOIN и RIGHT JOIN.

Урок 16. Оператор UNION

Объединение результатов нескольких SQL-запросов с помощью оператора UNION.

Урок 17. Агрегирующие функции

Агрегирующие функции COUNT, SUM, MIN, MAX.

Урок 18. Оператор GROUP BY

Группировка выбранного набора строк с использованием оператора GROUP BY.

Урок 19. Индексы

Фильтрация в GROUP BY с использованием HAVING; увеличение скорости выполнения запросов с использованием индексов.

Урок 20. Транзакции

Понятие транзакции; оператор TRANSACTION; требования ACID к транзакционной системе.

Курс, разработанный совместно с школой EnglishDom, поможет освоить ключевые англоязычные темы, актуальные для начинающих IT-специалистов. Максимум практики и фокус на IT-лексику. На 10 уроках разбирается составление CV, технических заданий и деловых писем, собеседования и переговоры, международное общение при продвижении своего проекта. В живых диалогах на английском студенты закрепят фразы, которые пригодятся в работе разработчикам и тестировщикам, маркетологам и дизайнерам.

Урок 1. IT resume sample

Составляем резюме на английском.

Урок 2. Job interview: questions and answers

Проходим собеседование на английском.

Урок 3. Effective teams

Говорим о командной работе и процессах на английском.

Урок 4. Workplace communication

Английский для общения по телефону и Skype.

Урок 5. Business e-mails

Ведем переписку на английском.

Урок 6. Requirement specifications (SRS)

Читаем и составляем техническое задание на английском.

Урок 7. Stand-up meetings

Становимся идеальным спикером.

Урок 8. Deadline

Выполняем работу в срок и по-английски.

Урок 9. Challenge

Описываем и решаем проблемы по-английски.

Урок 10. Start up

Рассказываем о своем проекте и представляем команду на английском.

ReactJS. 1 месяц.
Профессиональная frontend-разработка

ReactJS - это JаvaScript-библиотека для построения пользовательских интерфейсов. Он был представлен Facebook в 2013 году, и очень быстро обрёл популярность. Сегодня его используют многие известные компании, включая Instagram, Airbnb, Ebay, Netflix, Yahoo и другие. Данный курс рассчитан для начинающих фронтенд-разработчиков, освоивших язык JavaScript. На курсе мы с вами освоим одну из самым популярных библиотек для профессиональной разработки в области фронтенда - ReactJS. В сочетании с библиотекой Redux, которую мы также будем изучать на курсе, ReactJS составляет достойную конкуренцию популярному фреймворку AngularJS. К концу курса мы разработаем небольшую социальную сеть.

Урок 1. Введение в ReactJS: современный Javascript

Знакомство с ReactJS; сравнение с другими технологиями; современный JS; что нового в ES6 и как это использовать; классы, наследования, модули rest/spread, параметры, промисы, модули.

Урок 2. Настройка среды разработки

Настройка и конфигурирование Webpack; определение структуры проекта; создание заглавной страницы проекта.

Урок 3. Первое приложение на ReactJS

Что же такое ReactJS и как с ним работать; JSX, ReactComponent, ReactDOM.render, Render function; создаём и отрисовываем первый компонент; добавляем Layout компонент; определяемся с набором компонентов нашего приложения; реализуем заготовки компонентов системы.

Урок 4. ReactJS под капотом

Virtual DOM; состояние компонентов; как задавать состояние компонента по умолчанию; как изменять состояние компонента; основные этапы жизненного цикла компонента; встраиваем стили в компоненты.

Урок 5. Взаимодействие в ReactJS

Как организуется взаимодействие компонентов; отрисовка и события в ReactJS; передача параметров в компоненты с помощью свойства props; связываем обработчики событий с методами; связываем обработчики событий с методами; как отрисовать несколько компонентов в рамках одного компонента (дочерние компоненты).

Урок 6. Роутинг в ReactJS приложении

Что такое роутинг; добавляем ReactRouter в наше приложение; основные возможности ReactRouter; организуем роутинг в нашем приложении; параметры роутинга.

Урок 7. Концепция Flux на примере использования Redux

Что такое Flux; FluxDispatcher; EventEmitter; Store; что такое Redux и для чего он нам нужен; Reducers; Redux EventEmitter и Store.

Урок 8. Знакомство с NodeJS, EpxressJS и MongoDB

Что такое NodeJS; что такое ExpressJS; что такое MongoDB; устанавливаем и настраиваем NodeJS; подключаем ExpressJS; организуем обработку входящих запросов при помощи ExpressJS Router; устанавливаем и настраиваем MongoDB; типизируем наши схемы, подключаем Mongoose.

Как стать программистом. 13 уроков.
Пошаговая инструкция по поиску работы

Карьера в сфере программирования - это увлекательное путешествие в мир современных технологий. У каждого разработчика своя история и свой опыт. Однако существует базовый алгоритм, который поможет правильно сделать первые шаги и приведёт к вашей цели. Мы подготовили 13 видео-уроков, в которых ответили на самые актуальные вопросы о карьере программиста в компаниях и на рынке фриланса. Часто думаете о трудоустройстве и чувствуете, что готовы начать зарабатывать? Тогда этот видео-курс для вас.

Урок 1. Профессия “Программист”

Особенности профессии; часто задаваемые вопросы; востребованность на рынке труда.

Урок 2. Профориентация

Стану ли я успешным программистом? Факторы успеха.

Урок 3. Начинаем составлять резюме

Самое важное - первое впечатление; как назвать должность.

Урок 4. Выбор языка программирования: веб-разработка

Обзор языков для разработки сайтов: HTML, CSS, JavaScript, PHP, Python, Ruby, C#, Java; правильный выбор.

Урок 5. Мобильная разработка. Универсальные языки программирования

Обзор языков: Java, Objective-C, Swift; C#, C++, Python: правильный выбор.

Урок 6. Правила эффективного резюме

Список технологий; портфолио; дипломы и сертификаты; личностные качества. Взгляд технического специалиста и HR.

Урок 7. Поиск работы: что, где, когда

Работа мечты, психологические аспекты; техника запроса.

Урок 8. Собеседование и испытательный срок

Собеседования для программистов: как себя вести, что говорить, к чему прислушиваться; испытательный срок и правила его прохождения.

Урок 9. Фриланс: первые шаги

Обзор площадок для фриланса; особенности регистрации; оформление аккаунта; как выделяться среди большинства исполнителей.

Урок 10. Фриланс: начало работы и поиск заказов

Стратегия поиска заказов; приоритет заказов: что брать в работу; ведение переговоров; задания и подводные камни ТЗ; методы обращения к клиенту; написание ответов и привлечение внимания клиентов; правильные вопросы.

Урок 11. Фриланс: выполнение заказа и оплата

Способы оплаты: безналичный или наличный расчёт; предоплата или постоплата; обзор ситуаций, в которых лучше сработает каждый из способов; подготовка к работе и обязательные договорённости с клиентом; особенности процесса работы; завершающие этапы сотрудничества; обмен отзывами; техника "посоветоваться".

Урок 12. Специальности в сфере IT

Как проходит разработка в крупных компаниях? Кто такие аналитики, дизайнеры, тестировщики, архитекторы, projectmanager-ы, team-lead-ы и пр.

Урок 13. Карьерная лестница в сфере IT

Как выглядит карьерная лестница в сфере IT? В каких специальностях проще начинать свой путь? Какие есть перспективы развития?

Веб-разработка. Быстрый старт
Основы HTML/CSS и PHP

PHP (Hypertext PreProcessor, препроцессор гипертекста) – язык программирования, исполняемый на стороне веб-сервера. Создатель PHP - Расмус Лердорфом (Rasmus Lerdorf) - спроектировал его в качестве инструмента для создания динамических и интерактивных веб-сайтов. Язык приобрёл большую популярность и используется в проектах разных масштабов: от простого блога до крупнейших веб-приложений в Интернете. Самые крупные PHP-проекты - Zend, Yahoo, Facebook, Google, NASA, W3C. Курс предназначен для тех, кто хочет приобрести начальные навыки веб-разработки на PHP, изучить логику работы с этим языком и терминологию, а также понять принципы функционирования систем и веб-приложений. В процессе обучения студенты проходят основные этапы создания простого сайта интернет-магазина и работают над его функциональностью. Знания и навыки, приобретённые на курсе, - надёжная основа для дальнейшего развития в качестве PHP-разработчика.

Урок 2. Установка и развертывание сервера на своем компьютере

Как взаимодействуют между собой веб-сервер, PHP интерпретатор и база данных; качаем готовую сборку Open Server; выбираем версию PHP; выбираем версию apache; настраиваем доступ к локальному сайту; как понять, что всё настроено правильно и работает; используем редактор кода Sublime Text, встроенный в сборку Open Server.

Урок 3. Как создавать веб-страницы

Кратко рассматриваем для чего нужен html; рассматриваем основные теги: doctype, html, head, title, body, header, h1, footer, div, a, img и их место в веб-странице; демонстрируем, как работают эти теги; показываем созданные теги в панели
«Инструменты разработчика» в Google Chrome; создаём ссылки на главную страницу и страницу с магазином так, чтобы можно было перейти в магазин и обратно.

Урок 4. Создаём макет нашего магазина

Рассматриваем CSS: что это такое, как подключить стили к странице; пишем хедер и рассматриваем, как его оформить с помощью CSS.

Урок 5. Завершаем оформление шаблона

Заканчиваем писать хедер; добавляем оставшиеся части макета из готового шаблона; переносим необходимые части макета из готового шаблона (HTML, CSS, JavaScript).

Урок 6. Основы PHP

Как использовать PHP в нашем шаблоне; для чего нужны переменные и как с ними работать; какие типы данных есть в PHP, для чего они нужны.

Урок 7. Как хранить множество связанных данных

Для чего нужны массивы и как их использовать; кладём информацию о товаре в массив.

Урок 8. Хранение и обработка связанных по смыслу данных

Вложенные массивы; размещаем данные для нашего магазина во вложенных массивах; как получить информацию о товаре из вложенного массива.

Урок 9. Работаем с циклами

Что делать, если нужно вывести на страницу много данных из массива.

Урок 10. Как сделать сайт живым

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

Урок 11. Как делать навигацию между страницами

Урок 12. Создаём каталог товаров

Вывод всех товаров на страницу; работаем со страницей товара; как в каталоге товаров создавать правильные ссылки для каждого товара; выводим данные о товаре на отдельной странице.

Урок 13. Размещаем сайт в интернете

Регистрируем имя для нашего сайта; загружаем файлы на хостинг и проверяем работоспособность сайта.

Стажировка в GeekBrains (Web). 2 месяца.
Практика командной разработки

Стажировка в GeekBrains будет проводиться в формате вебинаров. С самого начала занятий Вы приступите к совместной разработке проекта, под руководством преподавателя. Команда учеников будет решать коммерческую задачу, за которую вполне могли бы заплатить гонорар реальные заказчики. На каждом занятии мы будем проводить совещание, как в реальных IT-компаниях. Анализировать проделанную работу и определять объем задач на следующую неделю. Помимо совещаний, на занятиях будет преподаваться различные темы, которые помогут вам написать хороший, качественный код, подготовить качественно портфолио, написать хорошее резюме, и успешно пройти собеседования.

Урок 1. Начало проекта

Как выбрать нишу для стартапа? Начало проекта. Работа менеджера по продажам, аналитика, проектировщика UI, архитектора

Урок 2. Гибкие методологии разработки

Урок 3. Проблемы и их решение. Совещание

Урок 4. Первые промежуточные итоги

Анализ проделанной работы. Постановка новых задач.