– Кто такой фронтенд-разработчик?
– Разработчик интерфейсов (также этого специалиста называют фронтенд-разработчик от английского front-end developer) занимается созданием клиентской части сайтов, а также программной части. Фронтенд-разработчик отвечает за то, что пользователь видит на сайте, и то, как он с ним взаимодействует.
Кроме того, фронтенд, так же как и бэкенд (от англ . back-end - «оборотная сторона» - программно-аппаратная часть - прим. сайта ), включает в себя разработку серверного кода. Постараюсь объяснить разницу между фронтендом и бэкендом в классическом понимании. Например, бэкенд-сервер может отвечать за то, чтобы данные попали в базу данных, а затем повлияли на какие-либо показатели. Например, лайк определенного твита (сообщения в социальной сети Twitter - прим. сайта ) влияет на общие тренды. А фронтенд-сервер выступает приемником информации от пользователя. Такое разделение сделано для удобства разработки.
– Чем фронтенд-разработчик отличается от дизайнера, который тоже работает над тем, как выглядит сайт?
– Дизайнер придумывает внешний вид интерфейса, а фронтенд пишет код и воплощает в жизнь макет. Однако разработчик и сам должен разбираться в дизайне. Художник может в чем-то ошибиться, пожертвовать удобством в пользу красоты. Дизайнер не обязан следить за каждым шагом разработчика. Его задача в первую очередь нарисовать идею. То, как это реально будет работать, остается за фронтендом. Поэтому разработчику интерфейсов нужно уметь исправить недочеты и выпустить хороший продукт.
– Как вы стали фронтенд-разработчиком?
– Мое образование не слишком связано с программированием. Я окончил Российский экономический университет имени Г.В. Плеханова по специальности «прикладная информатика в экономике». Еще во время учебы я решил, что хочу стать дизайнером сайтов. Планировал поступить на курсы в , но, к сожалению, они совпали с моей сессией.
Тогда я начал самостоятельно изучать литературу - читал книги и статьи по веб-дизайну. Позже решил опробовать теоретические знания на практике. Создал свою домашнюю страницу, позже дополнил ее форумом. На третьем или четвертом курсе я устроился стажером в небольшую веб-студию.
После полугода работы в студии я приобрел неплохой опыт и поступил в Школу разработки интерфейсов «Яндекса». А после ее успешного окончания пошел работать в сам .
– Получается, фронтенд-разработчику не обязательно иметь специальное высшее образование? А где он может приобрести необходимые для работы навыки?
– Например, на курсах. Могу порекомендовать Школу разработки «Яндекса», в которой учился я сам. Насколько мне известно, такие Школы проводят не только в Москве, но и в Санкт-Петербурге, Минске, Екатеринбурге. Но обучают там не с нуля. Абитуриенты должны уметь создавать простенькие сайты, верстать, писать на языке программирования JavaScript. При поступлении нужно решить тестовые задания, решение которых в большинстве случаев можно найти в интернете, если постараться. Поступить непросто, но учеба дает очень многое.
Также я наслышан о курсах от портала javascript.ru, но сам на них не ходил.
– Как старшекласснику, интересующемуся разработкой, понять, с чем ему будет интереснее работать: интерфейсами или серверной частью?
– Обычно люди, которые решают заняться разработкой, не испытывают сомнений, кем именно они хотят стать. Человек просто понимает, что ему больше нравится: работать с базой данных, писать код бэкенда, или отвечать за скорость и правильность отображения сайта. Как правило, осознание своих интересов происходит еще на этапе знакомства с этими специальностями. Мне известна всего пара примеров, когда человек решил сменить специализацию и ушел из фронтенд-разработки в бэкенд.
При выборе будущего занятия стоит учитывать, что работа фронтенд-разработчика может показаться менее увлекательной, чем работа бэкенда, ведь все сайты с точки зрения структуры более-менее понятно устроены. Зато технологии в разработке интерфейсов развиваются куда стремительнее, чем в бэкенд-разработке. Почти каждый день появляются новые решения для создания сайтов. Например, два года назад Facebook презентовал свою библиотеку для разработки фронтенда React . Сегодня у нее уже почти 1000 контрибьютеров (то есть 1000 человек поучаствовали в написании ее кода). Это огромные масштабы. В том же бекенде такого практически не бывает, все решения закрытые и делаются определенной группой людей.
Через год после запуска эта библиотека эволюционировала, и с помощью нее можно делать приложения для iOS и Android. То есть умея делать сайты на React, человек автоматически может быть и мобильным разработчиком. По-моему, это очень здорово. И, думаю, это только начало.
– Какой карьерный рост может быть у фронтенд-разработчика?
– У него есть два пути. Он может стать руководителем. Вначале - группы, затем - нескольких групп, и наконец получить позицию технического директора. Если же человеку неинтересно управлять людьми, можно стать экспертом, ведущим разработчиком, выступать на конференциях и быть гуру для менее опытных коллег.
– Какие компетенции должны быть у фронтенд-разработчика?
– Мне кажется, по сравнению с бэкенд-разработчиками, «фронты» более общительны. Им нужно много общаться с менеджерами и дизайнерами, чтобы понимать, как должен работать конечный продукт.
Также фронтент-разработчик должен быть ответственным и дотошным. Бывает, что один из бэкендов (а их бывает много) перестает отвечать. В таком случае пользователю все равно нужно дать максимально возможный набор информации, который сейчас доступен. Например, если отказали рекомендации новостей, то, возможно, доступна хотя бы остальная статья. Но если на странице статьи недоступна статья, то проще показать пользователю страницу ошибки (например, сервис временно недоступен). Такие моменты решает и программирует именно фронтенд-разработчик. Ни один дизайнер и менеджер такое предусмотреть не сможет. А фронтендер должен.
– От чего может устать фронтенд-разработчик?
– Может утомить однотипность задач. Как я уже говорил, сайты имеют примерно одинаковую структуру, у них есть шапка, меню, лента новостей и т. п. Редко попадаются заказчики, которые хотят нечто новое, над чем придется поломать голову и придумать нестандартное решение.
– Сколько получает фронтенд-разработчик?
– Зависит от знаний и умений специалиста. Я не очень хорошо знаю рынок сейчас, но, думаю, стажер или младший разработчик получает от 60 тысяч в месяц. Конечно, если под фронтендом понимается только верстка страничек без JavaScript, оплата будет меньше.
Верхней же зарплатной границы нет - все зависит от способностей специалиста.
– Будут ли фронтенд-разработчики востребованы в ближайшие 10–15 лет?
– Уверен, что будут. Уже сегодня фронтенд-разработчик может создавать не только сайты и веб-приложения, но и приложения для мобильных устройств. Приложения для телевизоров и некоторые операционные системы, например, Firefox OS, тоже сделаны на технологиях фронтенда. Я думаю, что в будущем возможности использования технологий, которыми пользуются фронтенд-разработчики, будут только расти.
– Чем может заняться фронтенд-разработчик, решивший попробовать себя в чем-то новом?
– Он может заняться разработкой мобильных приложений. Многие решения в мобильной разработке и разработке интерфейсов весьма похожи.
Если же человек больше не хочет заниматься разработкой, он может попробовать себя в роли менеджера проектов. Это подойдет специалисту, который умеет общаться с людьми, способен ставить задачи и следить за их исполнением. Можно податься в тестировщики, хотя обычно люди движутся как раз в обратном направлении: из тестирования в разработку.
– Кто для вас является ролевой моделью в профессии?
– Думаю, каждый находит своих «гуру» в определенных сферах. Например, в мире CSS (верстки) для меня это Роман Комаров. У него есть много хороших докладов и замечательный сайт с настоящей «магией» верстки.
Кроме того, для себя я выделил Пола Айриша и Дэна Абрамова. Полезно посмотреть презентации этих известных фронтенд-разработчиков (например, Пол Айриш очень доступно рассказывает о разработке приложений на JavaScript - прим. сайта ), а также послушать их доклады. Опыт, которым они делятся со зрителями, помогает мне работать продуктивнее.
– Существует ли какая-либо возможность еще в школе получить опыт, который в будущем поможет стать разработчиком интерфейсов?
– Нужно как можно раньше научиться ставить себе задачи, в противном случае человек просто не будет знать, с чего начать. Например, можно поступить как я и поставить задачу создать сайт-резюме. Потом этот сайт можно будет усовершенствовать: добавить возможность комментирования страницы.
И, конечно, нужно учить английский язык, чтобы иметь возможность знакомиться с самими современными курсами и пособиями и не ждать, когда их переведут на русский язык.
– Что вы могли бы посоветовать почитать и посмотреть подросткам, которые хотят больше узнать о фронтенд-разработке?
– Для старта я бы порекомендовал платформу Codecademy . Там можно изучить популярные языки программирования, пройти уроки по фронтенд-разработке, а потом попробовать что-нибудь сделать самому. Обязательно нужно много раз перечитать курс по JavaScript . Еще один полезный сайт - HTMLBook . На нем есть много примеров верстки. И вообще это большая энциклопедия для разработчика интерфейсов. Сам я периодически пересматриваю лекции на youtube-канале «Фронтенд» , где выступают ребята из «Яндекса».
Фундаментальными технологиями являются HTML (для создания структуры страницы), CSS (для стилизации) и JavaScript (для интерактивности). По этой причине базовые знания в вышеупомянутых областях непременно вам необходимы. Однако, в 2019 году необходимо знать, что такое фреймворки, системы контроля версий и многие другие вещи, упрощающие жизнь современному разработчику. Давайте подробней остановимся на каждой из них.
HTML (Hyper Text Markup Language) и CSS (Cascading Style Sheets) являются основой веб-разработки. Без этих двух технологий вы не сможете создавать веб-дизайн и получите на выходе простой текст на экране. Вы даже не сможете добавить изображение на страницу без HTML!
Прежде чем начать карьеру веб-разработчика, вы должны стать специалистом в HTML и CSS. Хорошая новость, уверенное знание этих технологий можно получить всего за несколько недель изучения. У нас вы можете пройти !
JavaScript позволяет добавить огромный функционал вашей веб-странице. Вы можете создавать довольно функциональные веб-приложения используя только HTML, CSS и JavaScript (сокращенно JS). На самом базовом уровне, JS позволяет вам добавить интерактивности. Вы можете использовать его для создания карты, которая обновляется в реальном времени, интерактивных элементов и онлайн-игр. Такие сайты, как Pinterest используют JavaScript по полной для создания дружелюбного пользовательского интерфейса.
К тому же, это самый популярный язык программирования в мире, поэтому даже несмотря на ваши планы в карьере, это супер полезный язык для изучения.
JQuery это библиотека JavaScript: набор плагинов и расширений, которые делают разработку с помощью JavaScript быстрее и проще. Вместо того, чтобы писать все с нуля, JQuery позволяет вам добавить готовые элементы в проект, которые можно затем изменять под ваши нужды (одна из причин, почему так важно знать JavaScript). JQuery используют, когда на страницу необходимо добавить таймер отсчета, форму поиска с автозаполнением, или даже таблицу, которая автоматически перестраивается и изменяет размер в соответствии с содержимым.
JavaScript фреймворки
JS фреймворки (включая AngularJS, Backbone, Ember и ReactJS) предоставляют готовую структуру вашего JavaScript кода. Существуют различные типы фреймворков под разнообразные нужды, однако четыре вышеупомянутых являются самыми популярными в списке требований при приеме на работу в 2019 году. Фреймворки действительно ускоряют процесс разработки, предоставляя вам ускоренный старт, и могут использоваться в связке с библиотеками вроде JQuery для минимизации временных затрат на написание типовых блоков.
Frontend фреймворки
CSS и Frontend фреймворки (самым популярным является Bootstrap) делают для CSS то же, что и JS фреймворки для JavaScript: они ускоряют разработку, предоставляя отправную точку с готовой стартовой структурой проекта. Поскольку от проекта к проекту базовые CSS блоки повторяются, фреймворк, определяющий все за вас, является очень полезным. Большинство работодателей требуют знание того, что такое frontend фреймворки и как с ними работать.
RESTful сервисы и API
Не вдаваясь в технические подробности, REST расшифровывается, как Representational State Transfer, что означает “передача состояния представления”. В общих чертах, это технология, упрощающая связь компонентов в сети. И RESTful сервисы и API - это сервисы архитектуры REST. Почитать об этом подробнее вы можете здесь.
Предположим, вы решили написать приложение, которое отсортирует всех ваших друзей в социальной сети по дате добавления. Вы можете сделать запрос к RESTful API ВКонтакте для получения списка ваших друзей. То же самое возможно и с Twitter, и с Facebook, которые также используют RESTful API.
Системы управления контентом и платформы E-commerce
Практически каждый веб-сайт построен на системе управления контентом (CMS). Платформы E-commerce являются одной из разновидностей CMS. Самая популярная в мире CMS - это WordPress, которая находится за занавесом миллионов сайтов, почти 60% всех сайтов, использующих CMS, построены на WordPress. Другие популярные CMS это Joomla, Drupal и Magento. Даже поверхностные знания этих систем дадут вам преимущество при устройстве на работу.
Тестирование и отладка
Ошибки случаются - это общепризнанный факт. Быть знакомым с процессами тестирования и отладки жизненно необходимо.
Unit-тесты - это процесс тестирования отдельных блоков исходного кода и специализированный фреймворки для подобного рода тестирования предоставляют достаточно удобный функционал. Существуют разные фреймворки для разных языков программирования.
Другой тип тестирования - это UI-тесты, также известные как функциональные тесты. Здесь проверяется общее поведение веб-сайта при взаимодействии с ним пользователя.
Отладка - это процесс устранения всех ошибок (багов), найденных в процессе тестирования. Разные компании используют различные подходы в тестировании и отладке, но если вы когда-либо это делали, вам не трудно будет приспособиться.
Git и системы контроля версий
Системы контроля версий позволяют вам отслеживать изменения, вносимые в код со временем. Они также позволяют легко возвращаться к предыдущим версиям кода, если вы что-либо испортите. Git - это наиболее распространенная система контроля версий. Знание Git для разработчика является необходимым требованием практически в каждой компании. У нас вы можете изучить .
Что должен знать профессиональный фронтенд-разработчик сегодня
В последние несколько лет React, одна из библиотек JavaScript, становится стандартом frontend разработки - и это на руку кроссплатформенным разработчикам, с такими преимуществами React Native, как:
- простая и интуитивно понятная философия объявления представлений (views) и состояний (state), делающая код чистым, читаемым и легкоотлаживаемым;
- умный и эффективный рендеринг, который перерисовывает компоненты только в случае необходимости, при изменении состояния.
Говоря простым языком, React связывает вместе HTML и JavaScript.
Что же касается CSS, никто больше не пишет на чистом CSS в наши дни, поэтому знание таких препроцессорных языков, как Sass или Less является, так скажем, необходимостью для фронтенд-разработчика в 2019 году.
Учитывая вездесущность множества форм-фактором различных устройств (мобильные телефоны, планшеты, десктопные ПК), мы бы также рекомендовали к изучению способы построения адаптивных web-страниц. Существует большое разнообразие библиотек JavaScript и CSS, которые прекрасно справляются с этой задачей. Многие из них основаны на рекомендациях Google’s Material Design.
Существует множество смежных тем и библиотек, достойных внимания и того, чтобы потратить свое время на их изучение. Например:
- Webpack для модульной сборки (хотя опыт Webpack довольно ужасен и выбор сообщества в области сборки меняется каждые 1-2 года);
- JSON Web Token для авторизации (своего рода, замена куки, которые ранее были стандартом);
- Relay/GraphQL или Redux или Flux, в зависимости от того, насколько глубоко вы хотите погружаться в потоки и выборки данных;
А также большое разнообразие библиотек для отладки, оптимизации производительности, тестирования, управления проектами и т.п.
Таким образом, в наши дни, чтобы быть востребованным разработчиком, необходимо знать не только фундаментальные основы, но и уметь использовать существующие наработки коллег в виде различных библиотек и фреймворков, значительно ускоряющих процессы разработки.
Наш совет: если вы ещё только начинаете знакомство с frontend-разработкой, пройдите наш .
Верстальщик и программист, художник и инженер в одном лице. В данном посте я поведаю миру о герое меча и магии стилей и кода, делающем веб красивее и быстрее — фронтэнд-разработчике. Пост будет интересен, в первую очередь, всем тем, кто хочет понять, чем фронтэнд-разработчики отличаются от верстальщиков, бекэнд-разработчиков, 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" . Они, безусловно, получат втык и под чутким надзором будут исправлять это.Вывод
Кратко перечислим по порядку изложенные выше навыки хорошего фронтэнд-разработчика:- Валидная pixel-perfect вёрстка
- Проектирование интерфейсов
- Работа с серверными технологиями
- JavaScript во всех ипостасях
- Оптимизация веб-приложений
Выясняется, что фронтэнд-разработчик — отличный парень. И дизайн поправит, и вёрстку, напишет и отдебажит как надо. Этим постом я не хочу поставить фронтэнд-разработчика выше остальных, а хочу, чтобы сомневающиеся граждане поняли разницу между веб-специалистом широкого профиля и узкоспециализированными специалистами. Бывает обидно, когда человека, работавшего несколько лет над самыми разнообразными проектами, начальство называет простым верстальщиком и думает, что без него бы и так справились. Из-за такого отношения к сотрудникам компании часто теряют весьма достойных людей.
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. Первые промежуточные итоги
Анализ проделанной работы. Постановка новых задач.
