Как стать Front-End разработчиком (выпуск 2020)?

Как бы вы хотели работать в ведущих мировых компаниях, оказывая влияние на красивую внешнюю разработку??


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

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

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

Что такое front-end разработка?

Front-end веб-разработка – это практика использования HTML, CSS и JavaScript для создания уникальных веб-приложений. Приложения, такие как веб-сайты, мобильные сайты, а также мобильные приложения и Прогрессивные веб-приложения.

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

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

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

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

Можете ли вы научиться разработке фронт-энда бесплатно?

Вы абсолютно можете!

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

Такие проекты, как freeCodeCamp, помогают миллионам людей писать код для своих первых программ. И Блог freeCodeCamp полон интересных статей не только о front-end, но и о других аспектах веб-разработки. Стоит добавить в закладки!

пример синтаксиса кодаВыглядит сложно? Это становится легче с практикой!

Хотя цель этого руководства – помочь вам учиться бесплатно, мы не можем упускать из виду преимущества платных курсов..

Существует множество стартапов, ориентированных на определенную аудиторию, и мы выделим несколько удивительных платформ для курсов, которые даже дадут вам сертификат в конце всего этого..

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

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

Это не плохое число!

Разработчики юниоров могут рассчитывать забрать домой где угодно 60 000 долларов США и выше.

Средняя заработная плата разработчиков в США

И зарплаты в Европе кажутся вполне разумными; Германия имеет в среднем 50 000 долларов в год.

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

Как найти работу фронт-энда разработчика?

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

Удаленная работа Разработчик Дизайн Написание Поддержка клиентов ПодробнееУдаленные рабочие места растут с беспрецедентной скоростью. В конце концов, кому не нравится идея работать дома или, что еще лучше, прямо с пляжа?

Вот список самых популярных вакансий для разработчиков переднего плана:

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

Ресурсы: с чего начать.

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

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

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

Codecademy

Codecademy

Если вы потратите хотя бы несколько минут на поиск ресурсов для обучения кодированию, то Codecademy, несомненно, станет одним из ваших первых хитов. Эта платформа для изучения кода хорошо известна и в течение семи лет обслуживала более 100 миллионов человек..

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

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

Все время есть аргумент, что Codecademy недостаточно.

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

Codecademy предлагает классы на HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL и Java.

Изучите CSS Layout

Изучите CSS Layout

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

И это относится ко всем дизайнам веб-страниц. Используя Learn CSS Layout, вы можете получить общее представление о том, как работают контейнеры и строки, а также о том, как вы можете расположить контент именно там, где вам нужно..

Дополнительные инструменты, которые вы можете изучить Flexbox Froggy за Flexbox основы и Сетка Садовая за сетка основы, соответственно.

Макет является довольно важной темой для понимания, так что потратьте несколько часов, углубляясь в свой макет. Лучший способ учиться – через практику.

начальная загрузка

Шаблон блога · Bootstrap

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

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

комплект начальной загрузкиСоздавайте адаптивные проекты для мобильных устройств в Интернете с помощью самой популярной в мире библиотеки интерфейсных компонентов. Bootstrap – это набор инструментов с открытым исходным кодом для разработки с использованием HTML, CSS и JS..

Bootstrap интенсивно используется во всем Интернете и, без сомнения, является одной из самых популярных в мире интерфейсных сред..

Черт, хороший процент сайтов, которые вы посещаете ежедневно, использует некоторые функции Bootstrap.

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

И если вам нравится то, что может предложить Bootstrap, вот дополнительные ресурсы по популярным интерфейсным фреймворкам:

  • 10 лучших фреймворков JavaScript, которые вы должны знать
  • 10 лучших CSS-фреймворков для разработчиков

Front-End Контрольный список

Контрольный список переднего плана

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

Front-End Checklist – отличный инструмент, с помощью которого вы можете указать URL своего веб-сайта, а платформа проверяет ваш сайт на предмет передового опыта в разработке front-end. Это включает проверку того, оптимизировали ли вы свои изображения или придерживаетесь ли вы лучших методов SEO.

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

Vue.js

Vue JS

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

Эта прогрессивная среда помогает разработчикам создавать удивительные пользовательские интерфейсы с использованием HTML и JavaScript..

Основа полностью поддерживается сообществом – как со стороны финансов, так и со стороны развития.

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

Вот некоторые настоятельно рекомендуемые чтения на Vue.js:

И последнее, но не менее важное: ознакомьтесь с различными проектами, созданными с помощью Vue.js, на Vue.js Витрина Веб-сайт.

Основы Front-End

ПЕРЕДНИЕ КОНЦЕПЦИИ

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

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

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

В разделе Основы внешнего интерфейса есть книга по SVG, CSS, HTML, JavaScript и Sass, которая является идеальной отправной точкой для современных рабочих процессов внешнего интерфейса..

GitHub

GitHub

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

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

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

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

Переполнение стека

логотип переполнения стека

Переполнение стека имеет печально известную репутацию самого строгого Q&Сайт программирования в мире. И это действительно так.

Пользователи Stack Overflow не задают легкие вопросы, которые не были исследованы или должным образом проанализированы. И хотя это может показаться уравновешенным, это помогает создать сильное чувство цели.

Видите ли, всякий раз, когда пользователь отправляет ответ на вопрос, другие пользователи могут выступить и подтвердить этот ответ. В итоге вы получите несколько «проверенных» ответов, которые подробно ответят на вопросы пользователей. В результате иерархия сайта остается четкой и последовательной.

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

Учебники & Курсы: овладение экосистемой.

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

Сделав все это, вы можете обратить свое внимание на учебники и курсы. Это более строго организованные ресурсы с упором на обучение.

Front-End SpectrumФронтальная разработка – это набор инструментов, платформ, библиотек, тестирующего программного обеспечения и многого другого. Не позволяйте явному размаху этого пугать вас, хотя!

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

Более того, такие платформы, как Frontend Masters, помогут вам освоить все технологии, используемые в самых успешных стартапах мира..

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

MDN Web Docs

MDN Web Docs

MDN (Mozilla Developer Network) собирается познакомиться с вами так или иначе. Эта платформа веб-документации полностью посвящена продвижению работы сети. Здесь вы можете узнать об инструментах разработчика, веб-технологиях и самой веб-разработке.

Когда вы ищете некоторые особенности CSS или HTML, часто это MDN, который появляется как первый результат в Google и других поисковых системах. Руководства, спецификации и общие сведения структурированы таким образом, что имеет смысл для разработчиков переднего плана.

Внешние курсы edX

Front End Web Development edX

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

Курсы edX тщательно структурированы, с четким акцентом на помощь студентам в понимании основ каждой темы курса. На данный момент вы можете изучить такие технологии, как JavaScript, HTML5, CSS3 и другие.

Если вы хотите получить полный начальный сертификат, вам нужно будет сделать скромные инвестиции в размере 500 долларов, но это также даст вам прямой доступ к преподавателям курса и многому другому. Многие компании использовали edX для зачисления своих сотрудников в эту конкретную программу.

Фронтенд Мастерс

Фронтенд Мастерс

Frontend Masters похож на опыт буткемпа. Курсы, которые вы можете найти на этой платформе, чрезвычайно тщательны, с акцентом на содержательный контент и проектно-ориентированное обучение.

Здесь вы можете узнать о таких технологиях, как React, Vue, Angular, Node.js и многом другом. Качество продукции чрезвычайно высокое, так что вы можете наслаждаться опытом, подобным тому, который есть на настоящем курсе Bootcamp.

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

И последнее, но не менее важное: завершение курса Frontend Masters в вашем резюме не останется незамеченным для вашего работодателя.

Эрудит

Эрудит

Egghead очень похож на платформу, упомянутую выше, но выделяется более твердыми и сжатыми уроками. Например, урок «Построение динамических списков во флаттере с ListViews» длится всего 2 минуты, хотя он дает вам достаточно учебного материала для истинного понимания концепции..

Egghead предоставляет учебные пособия и курсы по фреймворкам, библиотекам, языкам, инструментам и платформам. Хотите узнать о мобильной разработке? Не проблема, у Egghead есть учебный материал для iOS, Android и других платформ..

Годовая цена составляет скромные 250 долларов, но это дает вам доступ ко всем отдельным курсам и учебникам, найденным на сайте. Вы также можете обсудить каждый урок с другими членами сообщества. Хорошо стоит инвестиций!

CSS-Tricks

CSS-Tricks

Крис Койер является абсолютной легендой в сообществе CSS. Мало того, что он не отставал от CSS-Tricks более десяти лет, но он также является соучредителем CodePen – популярная платформа для обмена кодами для веб-разработчиков.

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

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

скотч

Обучение веб-разработке Top Shelf - Scotch io

Скотч – это не только учебный ресурс, но и место для последних событий в веб-разработке. Работая с 2014 года, сайт собрал огромное количество поклонников наряду с тысячами бесплатных учебников по веб-разработке..

Авторы Scotch уделяют большое внимание технологиям, таким как Vue, React, Laravel, Angular, JavaScript, Node.js и тому подобное. И не думайте, что это какие-то обучающие уроки.

По большей части вы будете создавать реальные и осязаемые приложения. Например. Хотите узнать, как создать в Твиттере клон Вью и Адонис? Не проблема, просто записаться на бесплатный курс, и вы будете настроены.

Замечательный сайт и не могу рекомендовать его достаточно для любых новых и существующих интерфейсных разработчиков!

Советы: если нет борьбы, нет прогресса.

Поскольку вы сделали это далеко, вы можете также побаловать себя некоторыми из следующих советов. Хотя front-end – это прибыльный выбор профессии, он включает в себя довольно крутую кривую обучения и довольно много головной боли, пока вы оборачиваете голову вокруг текущего графика.

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

Учиться в разумных пределах.

Почему ты учишься программировать? Хотите получить лучшую работу? Хотите создавать креативные сайты? Выясните свою причину, потому что она пригодится. Это пригодится в те дни, даже недели, когда вы бьетесь головой о стену – спрашиваете, стоит ли это.

Найди свое племя.

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

Избегайте изучения всего.

Не возлагайте бремя необходимости знать все на себя. Когда дело доходит до внешнего интерфейса, начинать с HTML5 и CSS3 более чем достаточно. JavaScript – это как глазурь на торте, так что будьте осторожны с тем, сколько глазури вы получите, потому что вы можете раздуть себя! После того, как вы освоитесь с основами, изучите новые области, темы и рамки. Маленькие и компактные укусы – вот ключ.

Если вы хотите узнать больше, прочитайте этот пост Али Спиттель где она делится более чем 25 советами для новых разработчиков.

Убирайся

Чего ты ждешь? Иди и начинай учиться! Обязательно проверяйте это руководство по разработке интерфейса каждые несколько месяцев, чтобы получать новые обновления и советы..

Удачи!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map