Как стать Front-End разработчиком? - вся информация для начинающих

1. Кто является разработчиком фронт-энда?
2. Front-end: первая работа
3. Зачем изучать Front-End?
4. Сколько стоит интерфейсный курс разработчика?
5. Чему учиться?
6. Главная, бесплатный курс для разработчиков
7. Где научиться кодированию?
8. HTML + CSS
9. Как вы выбираете курс?
10. Javascript
11. JQuery
12. Основы обучения
13. Framworki Js
14. Что дальше после этих курсов?
15. Хотите проверить?
16. Сколько времени нужно, чтобы выучить основы?
17. Поиск помощи
18. РЕЗЮМЕ:

В последнее время у меня сложилось впечатление, что все хотят программировать yet Он еще не знает, он не знает, как начать, но ИТ-индустрия - это то, о чем он сейчас мечтает. Для многих людей первым шагом в этот инопланетный мир являются сайты Webdeveloper или Junior Front-End Developer , которые являются основным созданием сайтов . Однако, прежде чем вы найдете положение своей мечты, вы должны как-то начать. Я приглашаю вас на сборник знаний для начинающих, несколько ответов: есть ли бесплатный курс для фронт-энда для разработчиков? Как учиться в Интернете, где искать учебные материалы для изучения HTML, CSS и JavaScript.

Кто является разработчиком фронт-энда?

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

Фронт-разработчик - это лицо, ответственное за визуальный уровень приложения (что мы видим, мы = пользователи сайта).

Обычно front-end разработчик сотрудничает с графическим дизайнером (webdesigner), который предоставляет графический дизайн. Часто разработчик внешнего интерфейса имеет возможность сотрудничать с UX-дизайнером, который предлагает и создает прототип взаимодействия, который будет происходить на сайте . Главная роль разработчика - собрать его вместе. Обычно говорят, что передний разработчик должен вырезать графический дизайн - разделить проект на более мелкие части и кодировать (HTML и CSS) веб-сайт, который использует пользователь.

Затем вышеупомянутые взаимодействия добавляются с использованием JavaScript. В то время как CSS3 позволяет нам создавать плавные переходы и базовую анимацию, JavaScript представляет все расширенные взаимодействия с пользователем . Используя JavaScript, мы добавим раскрывающееся меню, ползунок на странице, проверку форм, переходы между подстраницами или расширенные анимации и 3D-игры (например, babylonjs ). Данные для логики в JavaScript берутся из серверной части приложения, отсюда и взаимодействие с интерфейсом - разработчик .

Позиции разработчиков переднего плана будут очень разными. Внешняя работа разработчика в интерактивном агентстве, творческая работа разработчика в компании, занимающейся разработкой программного обеспечения, будет выглядеть по-другому, иными словами, человек, работающий над разработкой нового или одного известного (или менее) продукта.

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

Front-end: первая работа

Они прошли более 3 лет с тех пор, как я нашла свою первую стажировку Страшное видение себя в качестве стажера веб-разработчика и дальнейшего развития в качестве младшего фронтенд-разработчика.

Хм, стоило ли бояться? Нет .

Работа оказалась лучшим учителем. Я быстро начал видеть свои недостатки, чего я не знал до сих пор - и это можно было бы обобщить как «все». Дополнять знания или решать проблемы мне было легче, чем дома, потому что мне приходилось сталкиваться с ними с практическими примерами.

У меня были дорогие курсы в этом направлении, мое собственное портфолио и 10 000 заявок? Нет .

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

Зачем изучать Front-End?

1. Вы можете быстро увидеть эффект - в отличие от изучения программирования / бэкэнда, создание фрагментов кода даже в чистом HTML немедленно дает нам визуальные эффекты, и это побуждает нас продолжать работу.
2. Низкий порог поступления - в самом начале вам нужно относительно немного навыков, чтобы начать профессиональную карьеру на стажировке или на младшей должности.
3. Множество предложений работы для юниоров - особенно когда приближается отпуск, есть много праздничных стажировок.
4. Независимость - мы можем позаботиться о создании веб-сайта для себя, а затем поймать заказы в качестве фрилансера. В конце концов, в основной области мы должны иметь возможность установить простой веб-сайт от А до Я.

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

И да, этого действительно достаточно, чтобы получить хорошую идею.

Сколько стоит интерфейсный курс разработчика?

Ничего. Вне вашего времени.

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

Чему учиться?

Вот рецепт успеха. Для создания сайта вам необходимо:

• HTML + CSS
  Это основные компоненты для создания веб-сайтов. HTML предоставляет структуру веб-сайтов - описанные элементы, а CSS сообщает браузеру, как эти элементы должны выглядеть. Как только вы освоите HTML и CSS, вы можете воспроизвести любой проект (графический) и превратить его в веб-страницу.
• Javascript
  Язык программирования для создания сайтов. Благодаря JavaScript вы добавляете интерактивность на свой сайт, то есть разрабатываете сайты, которые реагируют на действия пользователей. Вы даже можете создавать игры. Я рекомендую освоить хотя бы базовый код JavaScript, чтобы понять, как работает язык или логика программирования. Тогда вы можете перейти к JQuery .
• JQuery
  Технически, это не язык, а библиотека JavaScript. Как посредник, который позволяет вам легче и быстрее сохранять JavaSript. Вы вводите код в jQuery, библиотека беспокоится о вас и развлекает переводчика, чтобы передать смысл немного сложного JavaScript в браузер. Хотя сегодня jQuery «немного устарел», я настоятельно рекомендую его изучение «для заказов», оно облегчает приобретение логики программирования, использует ее Bootstrap (framework css) и по-прежнему прокручивает предложения о работе.
• рамки
  Их задача - упростить процесс создания веб-сайта, приложения, предоставляя готовые решения наиболее распространенных проблем. Кроме того, они дают образец того, как разрабатывать ваш код предварительно очищенным способом. Вначале я предлагаю вам выбрать один CSS-фреймворк, например Bootstrap (другие варианты: Fundation, Pure, Yaml CSS), а затем добавить к этому один из популярных в настоящее время фреймворков JavaScript: Angular 4, ReactJS, Vue.js, Ember.js, Meteor JS.
• вне очереди: Git
  Это не имеет прямого отношения к кодированию, что заставляет меня понять, что оно часто откладывается до самого конца - чем быстрее вы начнете использовать Git или систему контроля версий, тем лучше. Что это такое и как научиться пользоваться Гитой я написал здесь: Git для начинающих - учиться в интерактивном режиме ,

Это порядок, предложенный мной, конечно, вы можете сделать это совершенно по-другому: опустите jQuery, изучите Bootstrap сразу же после изучения основ HTML и CSS (однако я советую не делать слишком много, чтобы упростить и лишить себя возможности поиска решений, написанных вами, и никаких готовых фреймворков) или изучите фреймворки Js, едва способные выстроиться в чистый Javascript. Вы ничего не можете сделать, это ваш собственный курс на переднем крае разработчика.

Главная, бесплатный курс для разработчиков

Совет для начала:

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

Лимит мотивирующих групп на фейсбуке . Группы отличные, я знаю. Только то, что после 3-х часов чтения мотивирующей истории вы очень часто не в 3 раза более мотивированы. Обычно у вас есть 3 часа меньше для вашего собственного обучения.

Наблюдайте за рынком, читайте требования в предложениях о работе . Они меняются! Я пишу этот пост сегодня и, вероятно, в следующем году мне придется обновить, потому что технология меняется. После освоения основ: HTML / CSS / JavaScript, что-то новое будет определенно модным - обновите свой список, чтобы «учиться».

Ищите бесплатные семинары (чтобы учиться у наставников и одновременно заводить интересных друзей) и стажировки в отрасли как можно скорее. Работа окажется лучшим учителем.

Где научиться кодированию?

Примечание - я рекомендую только те курсы, которые я пробовал. Если вы знаете другие интересные источники, поделитесь ими в комментарии 🙂

HTML + CSS

На польском языке: How2HTML HTML5 и курс Awwwesomes

Оба урока являются текстовыми и полностью на польском языке. How2HTML представлены наиболее важные вопросы, связанные со структурой HTML5. Это поднимает вопросы создания веб-сайта и темы, появляющиеся вокруг - так что вы немного прочтете о внешнем разделении бэкэнда, что такое HTTP или SEO. Доза знаний велика и упорядочена, меньше о самом CSS и больше о том, как правильно писать код.

Если вы хотите идти с пошаговым руководством, установите свой собственный веб-сайт. Если вы хотите скопировать кусочки кода и увидеть эффект, стоит проверить курс Awwwesomes , Размещая страницу, вы приобретете большую дозу знаний (предлагаемое время составляет 9 х 2 часа, при спокойствии может потребоваться вдвое больше и нет необходимости паниковать).

Хан Академия, Codecademy и CodeSchool

Три, пожалуй, самых известных сайтов с интерактивными курсами. Бесплатный, хорошо организованный и очень доступный для начинающих. Интерактивные курсы проходят в браузере, нам не нужно ничего устанавливать дома, мы просто делаем курс, и наш прогресс измеряется немедленно.

Ханская академия имеет полностью бесплатные материалы, и имеет польскую версию (yay yay yay!). Это образовательная платформа, а не только познание. Вы можете пройти ряд задач от базовых элементов до более сложных сценариев в JavaScript.

Codecademy много бесплатных материалов и много интересных готовых путей разработки, которые доступны только профессионалам (да, но не так). Ниже приведены примеры бесплатных курсов:

Код Школа - На мой взгляд, лучше всего организованы курсы. Они состоят из видеороликов + интерактивная часть с заданиями. Первый уровень каждого курса бесплатный, остальные, к сожалению, платные. Однако даже для этих бесплатных компонентов (обычно около часа) это действительно стоит посмотреть.

Как вы выбираете курс?

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

Ооо мама и дочка, таких материалов много, и это только начало .

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

Не удивительно

Хуже всего то, что у нас много материалов, и мы хотим изучить все, что нам нужно, быстро, без проверки или выбора - просто соберите все на подносе и сделайте шаг вперед, помимо основных материалов.

Поэтому я понимаю, что, если, однако, у вас нет времени на все курсы, и принятие решений не является вашей сильной стороной, тогда доберитесь до Академии Хана: Введение в HTML / CSS - Создание сайтов ,

Javascript

Каким был бы наш курс Front-End Developer без использования JavaScript?

Вышеуказанные интерактивные сайты великолепны. У нас есть курсы Js - приятные, простые, к сожалению, не очень всеобъемлющие, но хорошие для разогрева. Если у вас уже есть основы HTML и CSS как таковые, вам не нужно начинать с предыдущих предложений.

Для начала 9 коротких заданий из Введение: JavaScript Вы можете расширить те же вопросы с Udacity: JavaScript Intro а затем (или сразу) перейти к большему набору задач: HTML / JS: создание интерактивных сайтов ,

JQuery

Следующий шаг на нашем пути. Похоже, что может быть курс для разработчиков переднего плана без JQuery. Тем более, что сегодня появилось много новых образцовых кадров Js, но я просмотрел предложения о работе, и пока вы не можете его пропустить.

Да, в Академии Хана и Codecademy есть курсы jQuery. Однако в этом случае я хочу рекомендовать часовой и совершенно бесплатный курс Попробуй jQuery Код школы.

Основы обучения

На этом этапе вы можете сами выбирать материалы и оценивать их соответствие вашим знаниям.

Что касается фреймворка Bootstrap, создание веб-сайта основано на сетке из 12 столбцов, и эти знания являются базовыми, чтобы понять остальное в «стирке». Bootstrap позволяет быстро создавать адаптивные страницы (RWD), то есть те, которые адаптированы для мобильных устройств. Что происходит с этой Bootstrap вы увидите менее чем за 15 минут в этом видео и вы можете прочитать о каждом элементе из Get Bootstrap.

Если вы предпочитаете обучение в форме учебника, курс доступен на CodeCademy Сделать сайт: Bootstrap и DailyWeb создаст ваш первый загрузчик слайдер через 30 мин

Framworki Js

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

Интерактивные курсы со структурами можно найти в Code School, уровень 1 бесплатный (всегда что-то!). Очень богатая коллекция бесплатных материалов можно найти на scotch.io ,

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

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

Примеры бесплатных курсов:

Это конец? Определенно нет! Это очень хорошее начало и прочная основа для младшего разработчика переднего плана.

Что дальше после этих курсов?

Начните с работы над собственными проектами. Как я писал в начале, с первых шагов документируйте свою работу, поместите код на github, даже если он далек от идеала.

Хотите проверить?

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

Создайте форму (целевую страницу), с помощью которой вы можете отправить электронное письмо автору страницы. Создайте свою собственную страницу визитки - портфолио, подумайте о написании таблицы Fibbonate, используя свой JavaScript, свой собственный слайдер или простую игру с нуля.

Вы думаете, что у вас уже есть навыки кодирования, но у вас нет графических навыков, поэтому все, что вы делаете, "безобразно"? Нет проблем! Выберите готовый графический дизайн, например, из Weekly Dev Challange и попытаться отметить его.

примерное задание Weekly Dev Challange

Сколько времени нужно, чтобы выучить основы?

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

Овладение основами, достаточными для перехода на первую страницу, может занять у вас около 1-3 месяцев в зависимости от того, насколько амбициозно вы подходите к теме. Для освоения Js я бы добавил еще 3 месяца постоянного обучения. Я предполагаю, что вы работаете, поэтому вы будете тратить около 5-10 часов в неделю на обучение, по крайней мере, один час в день.

Через полгода вы не станете специалистом, но у вас будет достаточно времени, чтобы создать базу для дальнейшего обучения.

Поиск помощи

Ни разу в процессе обучения у вас не возникнет проблем: как отцентрировать элемент? Почему не работает этот скрипт? Отличается ли CSS в Chrome или Firefox? Это нормально, но кто спрашивает, не идет ли не так.

• Google - спроси дядю Google, желательно на английском.
• Переполнение стека - возможно, первые результаты будут отображаться в ответах StackOverflow. Это портал для разработчиков, где пользователи публикуют вопросы, связанные с программированием, в то время как другие (обычно более опытные программисты) пытаются ответить. Лучшие решения - это старая точка зрения, и автор вопроса может отметить комментарий, который решил его проблему. Решений иногда бывает дюжина или около того, поэтому вы должны прочитать все и проверить дома. Если какое-либо из решений помогло вам, проголосуйте - дайте ему стрелку вверх 😉
• Facebook - группы на fb для начинающих могут вам сильно помочь, особенно когда вы не очень знаете, как спросить о своей проблеме. Загрузите экран + ваш код, не ожидайте, что кто-то напишет его для вас, но комментарии обязательно приведут вас на правильный путь. К сожалению, с банальными простыми вопросами всегда найдутся люди, которые пишут что-то неприятное - это сложно, вооружитесь терпением.
  Лично я рекомендую группу Программирование - поддержка на старте Лучше всего задавать вопросы, связанные с началом, а модераторы следят за тем, чтобы не было ненависти.
• CanIUse - если ваша проблема связана с неработающим CSS в одном из браузеров, обязательно проверьте, поддерживается ли то, что вы используете, для версии, которую вы проверяете, чтобы избежать длительного и утомительного поиска проблемы спектра.

РЕЗЮМЕ:

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

Это может быть ваш собственный дом и бесплатный онлайн-курс (выберите из списка):

1) HTML + CSS

2) JavaScript

3) Основы jQuery

4) CSS Framework

5) Js Framework

Вам нужно узнать о:

Это была большая доза информации. Если вам удалось прочитать до конца, спасибо!
Оставь след еще. Как вам понравился пост? Будет хорошо, как вы дадите мне знать или напишите больше об этом типе сообщений, или, может быть, какую-то тему я пропустил, и вы хотите прочитать об этом? Может быть, вы порекомендуете кого-то, кто также планирует переодеться?

Если вам недостаточно бесплатных курсов или вы хотите, чтобы все было рассортировано по одному маршруту, вы можете проверить видео курсы. Я подготовил информацию о более дешевых (промо-курсы стоят около 10 $) и о качественной платформе электронного обучения Udemy. Более того, он содержит курсы на польском языке . Я приглашаю вас: ➡ Как вы выбираете курс удеми?

Похожие

Комментарии