В современном мире все больше людей хотят научиться программировать, при этом не знают с чего начать, но в то же время IT-индустрия – это то, о чем они мечтают, ведь быть веб-программистом сейчас модно. Для многих людей, таких как веб-разработчики или младшие фронтенд-разработчики, это первый шаг в этот удивительный мир. Однако вам нужно с чего-то начать, прежде чем вы сможете найти работу своей мечты. Вот книга знаний для начинающих, чтобы вы могли получить некоторые ответы: есть ли бесплатные курсы для разработчиков интерфейса? Как учиться самостоятельно онлайн, где найти учебные материалы для освоения HTML, CSS и JavaScript. Если вы знаете HTML и CSS, вы уже можете претендовать на должность веб-инженера.
Каковы основы фронтенд-разработки?
Вхождение в мир веб-программирования может быть трудным для новичков. Так много концепций звучат странно и становятся проблематичными на этапе написания. Как писать: программист или фронтенд-разработчик? Может фронтенд-разработчик, а точнее фронтенд-программист? Однако наиболее распространенным является запись через дефис. Front-end разработчик — человек, отвечающий за визуальную часть приложения (то, что мы видим, мы = пользователи сайта).
Обычно фронтенд-разработчик работает с графическим дизайнером (веб-дизайнером), который обеспечивает графический дизайн. Часто у фронтенд-разработчиков есть возможность работать с UX-дизайнером, который предлагает и создает прототип взаимодействия, которое будет происходить на веб-сайтах. Роль фронтенд-разработчиков состоит в том, чтобы собрать все это воедино. Обычно говорят, что перед разработчиком интерфейса стоит задача сократить графический дизайн — разделить дизайн на более мелкие части и программировать (HTML и CSS) веб-сайты, которые пользователи в конечном итоге используют.
Затем с помощью JavaScript были добавлены ранее упомянутые взаимодействия. В то время как HTML и CSS3 позволяют нам создавать плавные переходы и базовую анимацию, JavaScript предоставляет все расширенные возможности взаимодействия страницы с пользователем. Используя JavaScript, мы добавим выпадающее меню, ползунок на странице, проверку формы, переходы между подстраницами или расширенную анимацию, а также 3D-игры (например, с помощью Babylon-JavaScript). Данные для логики в JavaScript от бэкенда приложения, отсюда и взаимодействие фронтенд — бэкенд разработчика.
Позиции фронтенд-разработчика сильно различаются. Работа фронтенд-разработчика в агентстве, фронтенд-разработчика в инхаус будет выглядеть иначе, и совсем иная работа для человека, работающего над фронтенд-разработкой стартапа.
Фронтенд-разработчик из графических проектов может развиваться до разработчика JavaScript — веб-программиста, занимающегося в основном написанием логики приложения и расширенными операциями JavaScript. Кроме того, фронтенд-разработчику (как и бэкенд-разработчику) часто приходится планировать архитектуру JavaScript приложения и осознанно выбирать фреймворки и библиотеки для проекта.
Легка ли фронтенд-разработка?
- Вы можете быстро увидеть эффект; в отличие от обучения веб-разработке/бэкенд-разработке, создание фрагментов кода даже на чистом HTML сразу дает нам визуальные эффекты, которые мотивируют нас продолжать работу.
- Низкий порог входа — для начала профессиональной карьеры на стажировке или позиции младшего специалиста в самом начале требуется относительно небольшое количество фронтенд-навыков.
- Много предложений работы для юниоров, особенно когда приближаются каникулы и много летних стажировок.
- Независимость — мы можем позаботиться о создании сайтов для себя, а затем получать заказы как фрилансер. В конце концов, для начала мы должны уметь создавать простые веб-сайты.
В любом случае изучение основ для начала профессиональной карьеры на удовлетворительном уровне займет у вас от нескольких недель до нескольких месяцев. Если у вас нет, например, 5 часов каждый день, а всего несколько часов по выходным, то как минимум полгода пригодится.
Что нам нужно для front-end разработки?
Вот рецепт успеха. Для создания сайта вам необходимо:
HTML + CSS
Это основные ингредиенты для создания веб-сайта. HTML обеспечивает структуру веб-сайтов — описанные элементы, а CSS сообщает браузеру, как эти элементы должны выглядеть. Как только вы освоите HTML и CSS, вы сможете воссоздать любой (графический) дизайн и превратить его в веб-сайт.
JavaScript
Интерфейсный язык веб-программирования для создания веб-сайтов. Благодаря JavaScript вы добавляете интерактивности на свой сайт, т.е. разрабатываете сайты, которые реагируют на действия пользователя. Вы даже можете создавать игры. Мы рекомендуем освоить хотя бы базовый код JavaScript, чтобы понять, как работает язык или логика языка веб-программирования. Затем вы можете перейти к jQuery.
jQuery
Технически это не язык, а библиотека JavaScript. Как посредник, который позволяет писать JavaScript проще и быстрее. Вы вводите код jQuery; библиотека беспокоится о вас и играет с переводчиком, чтобы передать смысл слегка сложного JavaScript в браузер. Хотя сегодня jQuery «немного устарел», мы рекомендуем изучать его «по запросу», он упрощает изучение логики веб-программирования и Bootstrap (используется CSS-фреймворк) и по-прежнему появляется в предложениях о работе.
Фреймворки
Их задача — упростить процесс создания сайтов и приложений, предоставив готовые решения самых распространенных проблем. Кроме того, они предоставляют образец аккуратной разработки кода. Для начала мы предлагаем выбрать один CSS-фреймворк, например, Bootstrap (другие варианты: Foundation, Pure, YAML CSS), а затем добавить один из популярных на данный момент JavaScript-фреймворков : Angular 4, ReactJS, Vue.js, Ember.js, Метеор.js.
Гит
Это не имеет прямого отношения к веб-разработке, но чем раньше вы начнете использовать Git, систему контроля версий, тем лучше. Такой порядок нам видится наиболее удачным. Конечно, можно поступить совершенно по-другому: пропустить jQuery и изучать Bootstrap сразу после освоения основ HTML и CSS; однако мы советуем вам не перебарщивать с упрощением и отрезать себя от поиска решений, написанных от руки, а не используемых префабов из фреймворка или изучать JavaScript-фреймворки с едва способным получить строчку на чистом JavaScript.
С чего начать фронтенд-разработку?
Регулярно учитесь и старайтесь применять каждый новый навык на практике, даже в крошечных фрагментах кода, с единственной целью — показать, что вы только что освоили. Поделитесь этим в Интернете. Ограничьте свои мотивационные группы на Facebook. После всего лишь 3 часов чтения мотивационных историй вы не станете в 3 раза более мотивированы. Скорее у вас станет на 3 часа меньше для учебы.
Следите за рынком и читайте требования в предложениях о работе. Они меняются! Мы пишем этот пост сегодня, и, вероятно, нам потребуется обновить его через год по мере изменения технологий. Как только вы освоите основы: HTML CSS JavaScript, что-то новое обязательно будет в тренде — обновите свой список «для изучения». Как можно скорее ищите бесплатные семинары (чтобы учиться у наставников и заводить интересные знакомства) и отраслевую стажировку. Работа окажется лучшим учителем.
Пример фронтенд-разработки
HTML + CSS
Три, вероятно, самых известных сайта с интерактивными курсами веб-интерфейса. Бесплатные, хорошо организованные, они очень легко доносят знания до новичков. Они проводят интерактивные курсы в браузере. Нам не нужно ничего устанавливать дома, мы просто берем курс, и наш прогресс растет сразу.
Khan Academy, Codecademy и Homeschool
В Khan Academy есть бесплатные материалы, а также есть возможность использовать другие веб-языки. Это образовательная платформа не только о веб-разработке. Вы можете выполнять различные задачи, от базовых элементов, включая HTML и CSS, до более сложных сценариев JavaScript.
В Codecademy есть много бесплатных материалов и интересных готовых путей разработки интерфейса, которые доступны только профессиональным пользователям.
Code School — на наш взгляд, самый организованный курс. Они состоят из видеороликов + интерактивной части с задачами по фронтенд-разработке. Первый уровень каждого курса бесплатный, но, к сожалению, за остальные придется платить. Тем не менее, даже бесплатные части (обычно около 1 часа) заслуживают внимания.
Как выбрать курс?
См. все три веб-платформы. Темы пересекаются, но стоит пройтись по некоторым повторяющимся темам. Во-первых, повторение закрепляет знания, а во-вторых, у каждой фронтенд-платформы свой подход к обучению. Выбор за вами. Так много людей хотят платить за ежемесячный курс Bootcamp или веб-разработки, хотя у них есть все бесплатно под рукой. Ничего необычного.
Хуже всего то, что у нас много материалов, и мы хотим выучить все необходимое быстро, не проверяя и не выбирая — собрать все на подносе и сделать еще один шаг дальше базовых материалов. Поэтому мы понимаем, что если у вас нет времени на все курсы по интерфейсу и принятие решений не является вашей сильной стороной, ознакомьтесь с Khan Academy: введение в HTML CSS — веб-разработка.
JavaScript
Каким был бы наш курс по фронтенд-разработке без использования JavaScript? Интерактивные сайты выше великолепны. У них есть курсы JavaScript для нас — хорошие, простые но к сожалению хороши только для разминки их нельзя назвать исчерпывающими. Если у вас уже есть основы HTML и CSS как таковые, вам не нужно начинать с предыдущих предложений.
Чтобы начать работу с 9 коротких упражнений на разработку во введении: по JavaScript, вы можете опираться на те же темы в Udacity: JavaScript Intro, а затем (или сразу) перейти к более широкому набору задач: HTML / JavaScript: Создание интерактивной сети Страницы.
jQuery
Еще один шаг на нашем пути к фронтенд разработке, но крайне необязательный. В настоящее время курс фронтенд-разработки может обойтись без jQuery. Тем более, что сегодня есть много интересных новых возможностей для разработчиков интерфейса, мы рассмотрели предложения о работе, и это все еще стоит иметь в наличии.
Да, в Khan Academy и Codecademy есть курсы jQuery. Однако в этом случае я хотел бы порекомендовать — часовой и совершенно бесплатный пробный курс jQuery Pluralsight (ранее Code School) по фронтенд-разработке.
Структура обучения
На этом этапе вы можете самостоятельно выбрать материалы для оформления и оценить их соответствие вашим знаниям. Когда дело доходит до фреймворка Bootstrap, создание веб-сайта основано на сетке из 12 столбцов, и эти знания имеют основополагающее значение для понимания всего остального на практике. Bootstrap позволяет быстро создавать адаптивные веб-сайты (RWD), то есть адаптированные для мобильных устройств. Если вы предпочитаете обучение в форме учебника: курс начальной загрузки доступен в академии кода, а с помощью Daily Web вы создадите свой первый слайдер начальной загрузки за 30 минут.
Фреймворки JavaScript
В настоящее время достойный курс по фронтенд-разработке, безусловно, должен знакомить с используемыми в настоящее время средами JavaScript и, по крайней мере, преподавать одну из них. Вы можете найти интерактивные курсы с фреймворками на Pluralsight (ранее Code School), которые бесплатны в течение 14 дней. Вы можете найти очень богатую коллекцию бесплатных материалов на scotch.io. С другой стороны, отписаться, где вы найдете бесплатные курсы по фронтенд-разработке для каждого фреймворка, — это тема для отдельного поста.
Их много. Выбор сложен, а узнать их все невозможно. Что бы вы ни выбрали для начала, просто придерживайтесь его. Не прыгайте с цветка на цветок, потому что после недели обучения веб-разработке; кто-то скажет вам, что другой лучше. Изучите первый и напишите на нем простое веб-приложение. Обычно для начала рекомендуются такие приложения, как планировщики, списки дел и новости рейтинга. Все, что вам нужно, это имя фреймворка и имя веб-приложения, которое вы хотите создать.
Примеры бесплатных курсов:
- AngularJS
- Angular 2+ (в настоящее время 6, но 4/5 — это просто еще одна версия для разработки интерфейса)
- РеактJS
- Vue.js
- Ember.js
Это конец? Нет! Это отличное начало и прочная основа для младшего фронтенд-разработчика.
Что будет после этих курсов?
Начните с работы над своими веб-проектами. Как мы писали в начале, документируйте свою работу с самых первых шагов фронтенд-разработки, а код выкладывайте на GitHub, даже если он далек от идеала.
Хотите испытать себя?
Лучший способ закрепить полученные знания — это практика. Пройти курс по интерфейсу — это одно, но только работа над вашими веб-проектами научит вас программировать — решать проблемы самостоятельно. Создайте форму (целевую страницу), через которую вы можете отправить электронное письмо автору страницы.
Создайте свой сайт-визитку — портфолио — подумайте об использовании JavaScript для заполнения таблицы последовательностью Фибоначчи, вашим слайдером или простой игрой с нуля. Думаете, у вас уже есть навыки программирования, но нет графических навыков, поэтому разработка, которую вы делаете, «уродлива»? Пожалуйста! Выберите готовый графический дизайн, например, из Weekly Dev Challenge, и попробуйте его создать.
Сколько времени нужно, чтобы изучить основы?
Это зависит от тебя. Дисциплина важнее всего. Большинству людей сложнее выучить язык веб-программирования, чем потратить время на посещение бесплатных курсов. Освоение основ для настройки вашего первого веб-сайта может занять около 1-3 месяцев, в зависимости от того, насколько вы амбициозны в разработке интерфейса.
Чтобы освоить JavaScript, я бы добавил еще 3 месяца упорного обучения. Я предполагаю, что вы работаете, поэтому вы будете посвящать обучению около 5-10 часов в неделю, т. е. не менее 1 часа в день. Front-end специалистом за полгода не станешь, но этого времени достаточно, чтобы создать базу для дальнейшего обучения.
Ищите помощь в Интернете
Не раз во время обучения у вас возникнут проблемы: Как центрировать элемент? Почему этот скрипт не работает? HTML и CSS в Chrome выглядят иначе, чем в Firefox. Как стать профессионалом во фронтенд-разработке?
Это нормально, но те, кто спрашивает, не ошибаются.
- Google — спросите у дяди Google, желательно на английском языке.
- Stack Overflow — вероятно, будет первым, кто выведет ответы от Stack Overflow. Это портал для веб-разработчиков, где пользователи публикуют вопросы, связанные с языком веб-программирования, а другие (обычно более опытные веб-программисты) пытаются дать вам ответ о фронтенд-разработке. Бывшие лучшие решения начисляются баллами, а автор вопроса может отметить комментарий, решивший его проблему. Иногда решений несколько или десяток, поэтому стоит прочитать их все и проверить у себя дома. Если какое-либо из решений помогло вам, проголосуйте — поставьте ему стрелку вверх.
- Facebook — группы front-end разработки в FB для начинающих могут вам очень помочь, особенно когда вы не знаете, как спросить о своей проблеме. Загрузите скрин и свой код. Не ждите, что кто-то напишет это за вас, но комментарии обязательно направят вас на верный путь. К сожалению, на банально простые вопросы люди всегда будут писать что-то неприятное — это тяжело, потерпите. Мы рекомендуем веб-группу — стартовая поддержка лучше всего подходит для вопросов, связанных со стартапами, а модераторы следят за тем, чтобы не было хейта.
- CanIUse — если ваша проблема связана с тем, что CSS не работает в одном из ваших браузеров, убедитесь, что то, что вы используете, поддерживается для проверяемой версии. Таким образом, вы избежите долгих и утомительных поисков фантомных интерфейсных проблем.
Вывод
Итак, в этой статье вы узнали больше о мире ИТ, и мы будем рады, если сможем помочь вам с направлением. Интерфейсный мир огромен, и новичку может быть легко заблудиться в нем, но мы сосредоточены на том, чтобы помочь людям встать на правильный путь. Но также обратите внимание, что в дополнение к традиционным веб-языкам существует язык веб-программирования без кода . Пока инструменты без кода не стали широко доступны, разработка веб-приложений выполнялась исключительно веб-программистами.
К счастью, время уходит, и сейчас любой студент, разбирающийся в материале, может создать свое веб-приложение или лендинг. Изучив основы, даже на уровне знаний HTML и CSS, вы уже сможете найти работу своей мечты. Многие ученые отмечают, что язык веб-программирования улучшает способности человека и способствует развитию мягких навыков. В конце концов, это ваша финансовая независимость. Мы знаем разных ребят из мира фронтенда, которые запускали свои стартапы и делали полезные вещи на благо нашей планеты.
И, конечно, у такого подхода есть плюсы:
- Простота использования и большая мощность.
- Отличная библиотека шаблонов.
- Поддержка установки различных параметров.
Язык программирования без кода или визуального программирования — это свежий подход, при котором вам не нужно писать код с нуля. Мы рекомендуем вам использовать инструменты с графическим интерфейсом, за которыми будущее веб-разработки. Традиционные интерфейсные веб-приложения — это круто, но мы считаем, что вам нужно внедрять инновации, поэтому наш продукт может быть вам полезен. Мы искренне желаем найти правильный путь к освоению профессии программиста. Этот путь тернист, но если вы его освоите, он будет удовлетворять вас всю жизнь, которую вы провели в это время.
