Довольно часто новички, которые пытаются изучить интерфейсную веб-разработку, оказываются в довольно трудном положении. Их завалили множеством фреймворков и библиотек, которые можно найти в Интернете. Я определенно был поражен.
Но ты один из них? Вам нужна помощь, чтобы найти свой путь к тому, чтобы стать отличным фронтенд-разработчиком?
Что ж, тогда продолжайте читать дальше, чтобы достичь того, что вам нужно;)
С чего мне начать? и сколько я должен знать?
Как полный новичок, вы можете начать с изучения HTML, CSS и JavaScript. Это основные элементы для любого фреймворка, который вы хотите изучить. Что касается HTML, вам просто нужно знать все разные теги и где их использовать. их. Это так просто.
Говоря о CSS, вы должны понимать flex и grid. который вы будете использовать большую часть времени для верстки своего веб-сайта. Кроме этого, все, что вам нужно знать, это базовый стиль; Например, вы можете перейти к изучению того, что такое селекторы CSS » и как добиться адаптивного веб-дизайна .
Переходя к JavaScript, вам просто нужно понимать основы программирования; например, различные типы данных, циклы, условные операторы и функции. Это строительные блоки любого языка программирования. Как только вы хорошо усвоите каждую концепцию, программирование станет более простой задачей, даже если вы только начали писать код. И, что наиболее важно, вам необходимо знать объектную модель документа (DOM) манипуляции.
Теперь, когда вы знаете все основы, можете ли вы реализовать все, чтобы обеспечить функциональность? Чтобы найти ответ на этот вопрос, вам придется исследовать себя. Вот тут-то и пригодятся упражнения. Попробуйте скопировать некоторые из простейших дизайнов с таких сайтов, как dribbble. Если вы можете сделать это с легкостью, тогда вы готовы двигаться вперед и узнавать что-то новое .
Да, вы можете разработать веб-сайт прямо сейчас, но можете ли вы создать его?
Большинство людей знают, как разрабатывать и писать чистый код и все эти вещи, но их дизайн отстой (как и мой). Ежегодно миллионы студентов заканчивают средние школы и колледжи, и в их резюме указано, что веб-разработка является одним из навыков. По сути, это группа студентов, которые овладели каким-то навыком, в нашем случае это веб-разработка.
Что может выделить вас из этой толпы?
Если вы хотите выделиться из толпы опытных людей, это будет непростая задача. Но это не значит, что это недостижимо. Все, что вам нужно сделать, это разработать более привлекательные веб-сайты. Чтобы стать лучшим разработчиком внешнего интерфейса, вы должны проявлять творческий подход в своих проектах. Узнайте, как использовать такие программы, как AdobeXd, Figma, Photoshop, Illustrator, для проектирования и создания прототипов привлекательных веб-сайтов. Помните, что интерфейс - это то, что привлекает пользователя на веб-сайт. Функциональность приходит сразу после.
кроме того, вдохновляйтесь посещением приятных (с точки зрения дизайна) веб-сайтов в Интернете, таких как dribbble и awwwards. Некоторые веб-сайты действительно визуально интересны, и их поиск может значительно улучшить ваши дизайнерские способности . Вы можете изучить все принципы и элементы современного веб-дизайна из статей и на YouTube. Лично я многому научился из Курса дизайна и Flux.
Я надеюсь, вы сможете спроектировать и разработать какой-нибудь крутой веб-сайт.
Выбор идеального фреймворка для вас
Возвращаясь к тому, чтобы застрять между тем, какой фреймворк выбрать, вам необходимо сделать выбор между AngularJS, ReactJs И VueJs (конечно, вы также можете использовать PHP, wordpress и т. Д.). Это некоторые из самые популярные веб-фреймворки и библиотеки, используемые ведущими технологическими компаниями и многонациональными корпорациями. Кроме того, все они имеют открытый исходный код.
AngularJS - это структурный каркас для динамических веб-приложений. Он использует HTML в качестве языка шаблонов и расширяет синтаксис HTML для четкого и лаконичного представления компонентов вашего приложения. Он разработан и поддерживается Google.
VueJs - это прогрессивная среда JavaScript для создания пользовательских интерфейсов (UI) и одностраничных приложений. он использует высокую развязку, что позволяет разработчикам постепенно создавать пользовательские интерфейсы (UI). Он разработан и поддерживается Эван Ю.
ReactJs - это библиотека JavaScript для создания компонентов пользовательского интерфейса. Это библиотека на основе компонентов, в которой вы можете разделить весь веб-сайт на более простые компоненты, что значительно упрощает разработку. Он разработан и поддерживается Facebook.
Я выбрал ReactJs, потому что он легче в освоении и используется многими технологическими компаниями. Я очень надеюсь, что его не заменят в ближайшие 5-10 лет. Я лично чувствую себя комфортно с реакцией, поэтому не жалею о ее выборе. Если вы с нетерпением ждете выбора ReactJs, вам нужно будет научиться создавать компоненты; либо Функциональный компонент, либо Компонент на основе классов. Я бы предпочел функциональный компонент, потому что его можно использовать без особых усилий. Кроме того, это актуальный тренд.
Наконец, попытайтесь понять жизненный цикл компонента, обработчики, стилизованный компонент и управление состоянием. Для управления состоянием вы можете использовать Context API или Redux (Context API намного проще, чем Redux ). Вы также можете использовать Material-UI для стилизации вашего приложения, это значительно упрощает разработку.
Вывод
Итак, это был основной путь к изучению фронтенд-разработки. Если вы будете следовать по пути, намеченному в блоге, вы сможете разрабатывать довольно хорошие веб-сайты, но всегда помните, обучение никогда не прекращается. Вам предстоит еще многое узнать и изучить. В качестве следующего шага попробуйте создать собственное портфолио и выполнить несколько проектов, основанных на ваших вкусах ( вы можете работать фрилансером 🚀 ). Работа над проектом может быть очень плодотворной, потому что вы будете учиться; как быть преданным своей работе, завершать работу в срок, управлять временем, общаться с клиентами и, наконец, стать опытным. Итак, вот оно. Ваш путь к тому, чтобы стать надежным веб-разработчиком (всегда есть альтернатива, вы можете пойти с Wix.)
Удачного обучения 😊 !!!
Спасибо, что дочитали до этого места. Если вам понравился этот пост, поделитесь, прокомментируйте и нажмите 👏 несколько раз. . .
Подпишитесь на меня в dev.to, Instagram и Medium, если вас интересуют более подробные и подобные информативные статьи в будущем!
