Полнофункциональная веб-разработка - полная дорожная карта
Изучение веб-разработки - огромное преимущество для основателя, даже понимание основ будет чрезвычайно полезным. Этот пост предоставит вам общий обзор всего, что вам нужно изучить, дорожную карту для начала работы и коллекцию лучших ресурсов, которые вы можете использовать для быстрого обучения.
Я собираюсь рассказать вам все, что нужно знать профессиональному веб-разработчику полного цикла, но если вас интересуют только основы - вы можете прекратить читать после раздела «Доменные имена и хостинг».
Основы (HTML / CSS / JS)
Лучше всего начать с изучения 3 основных технологий, из которых состоят все веб-сайты. HTML определяет содержимое веб-сайта, CSS определяет, как он выглядит (шрифты / цвета / изображения / и т. Д.), А JavaScript позволяет динамически манипулировать элементами (все интерактивное, что вы видите в Интернете, было создано с использованием JS).
Лучший способ изучить основы - пройти Учебный курс для веб-разработчиков на Udemy.
Он проведет вас через процесс создания вашего первого веб-сайта и даст вам отличное место для начала.
Каркасы
Фреймворки - это инструменты, которые позволяют намного быстрее и проще реализовать все стандартные функции.
Я рекомендую использовать фреймворки как можно раньше, потому что они позволят вам получить результаты намного быстрее и в то же время научат вас лучшим практикам очень естественным и интуитивно понятным способом. Просто используя фреймворки, вы невероятно быстро усвоите огромный объем знаний и не тратите время на что-либо ненужное.
В веб-разработке всегда есть огромный выбор технологий, и этот выбор часто бывает трудным для новичка. В оставшейся части статьи я избавлю вас от путаницы и вместо того, чтобы перечислять плюсы и минусы каждого варианта, я просто расскажу вам, что лучше всего использовать, основываясь на своем опыте.
Лучше всего начать с изучения Bootstrap и jQuery. Это, безусловно, самые популярные фреймворки, которые используются подавляющим большинством веб-сайтов.
Bootstrap - это фреймворк CSS, который предоставляет вам набор легко настраиваемых элементов интерфейса и позволяет очень быстро создавать адаптивные веб-сайты (адаптивные означает, что они хорошо выглядят на мобильных устройствах).
Bootstrap недавно выпустил новую версию, и вы можете начать работу с ней, пройдя этот курс:
jQuery - это фреймворк JavaScript, который значительно упрощает управление элементами веб-страницы. Он имеет огромное количество плагинов для всех мыслимых целей, поэтому, когда вам понадобится какой-либо интерактивный элемент, вы можете быть уверены, что найдете способ создать его с помощью jQuery. Это также будет очень просто, потому что у StackOverflow уже есть решения для 95% проблем, с которыми вы столкнетесь.
Чтобы изучить основы, вы можете просто посмотреть эту отличную лекцию.
Напоследок, для полноты картины, не могу не упомянуть Компас. Вам не нужно думать об этом в самом начале, потому что это не важно для вашей способности создавать веб-сайты, но когда вы достигнете точки, когда вы пишете много промежуточного / продвинутого CSS, и начнете находить его немного утомительно, вы обязательно должны помнить об этом. Compass делает процесс написания CSS способом быстрее и приятнее, поэтому, если вы потратите пару часов на его изучение, это станет одним из лучших инструментов повышения производительности, которые вы можете себе представить.
WordPress
WordPress - самая популярная в мире система управления контентом. Если вы не технический специалист и просто хотите быстро приступить к созданию легко настраиваемого веб-сайта - вы просто научитесь устанавливать и использовать WordPress, и это почти все, вам не нужно искать дальше. У него бесконечное количество тем и плагинов, которые покроют 90% ваших потребностей.
Если вы заинтересованы в том, чтобы стать более профессиональным веб-разработчиком и научиться создавать свои собственные веб-сайты, вы можете пропустить это и изучить внутреннюю структуру (я опишу их в следующих разделах).
Доменные имена и хостинг
После того, как вы изучите основы и создадите свой первый веб-сайт, вы, естественно, захотите сделать его доступным для всего мира. Опять же, чтобы сэкономить вам часы исследования, я не буду перечислять сотни доступных вариантов, а просто расскажу вам «правильные» вещи, которые нужно использовать.
Для покупки доменных имен воспользуйтесь Namecheap. Как следует из названия, у него очень хорошие цены, а также отличный пользовательский интерфейс.
Для размещения ваших первых страниц вам следует использовать Bluehost, он дешев, очень прост в использовании, имеет отличную документацию и множество автоматизированных инструментов. Это значительно упрощает установку WordPress или размещение простых html-страниц, поэтому, если ваша цель - быстро начать работу - это именно то, что вам нужно.
Наконец, когда вы пойдете дальше и приобретете больше навыков, вам понадобится VPS (виртуальный частный сервер). Проще говоря, это удаленный компьютер, который вы полностью контролируете и который будет использоваться для обслуживания сайтов, созданных вами с помощью фреймворков. Я настоятельно рекомендую использовать DigitalOcean, у него отличные цены, красивый и интуитивно понятный интерфейс, и я с радостью использую его для размещения всех своих веб-сайтов в течение последних 4 лет.
Бэкэнд-фреймворки
Теперь, когда вы изучили основы и создали несколько простых веб-сайтов с помощью перечисленных выше инструментов, вы можете пойти дальше и узнать, как профессионально создавать собственные веб-сайты.
Для этого лучше всего начать с изучения одной из серверных фреймворков. Бэкэнд-фреймворки работают на сервере и динамически генерируют HTML-код для веб-сайта каждый раз, когда пользователь посещает URL-адрес.
Как всегда, есть десятки вариантов, но я помогу вам сузить их до трех - Django, Ruby on Rails и Node / Express .
Мнения о том, какой из них вы должны изучить в первую очередь, различаются между разными разработчиками, но я настоятельно рекомендую вам начать с Django, а затем изучить Node / Express.
Основным преимуществом Django является то, что он написан на Python - красивом, мощном языке, который используется во всех областях, которые вы можете себе представить, и в то же время он является лучшим выбором для вашего первого языка программирования.
Сам Django прост, мощен, гибок, имеет отличную документацию и все инструменты, которые понадобятся вам для создания 95% веб-сайтов. Что еще более важно, это даст вам отличную основу для размышлений о бэкэнд-коде, и понимание этого - отличный способ изучить основные основы веб-разработки в целом.
Мое любимое введение в Django - это курс TutsPlus Начало работы с Django, а лучший способ перейти от новичка к промежуточному / продвинутому - это отличная книга Два шарика Django.
Кроме того, я настоятельно рекомендую бесплатные уроки по YouTube Майка Хибберта.
Узел и Экспресс
Node и Express - чрезвычайно мощные инструменты, которые я рекомендую вам изучить после Django. Они могут быть немного сложными для новичка, но если у вас есть понимание Django, вы выучите их очень быстро и естественно.
У Node много преимуществ, и лучший способ испытать их - попробовать это на себе. Часто это позволяет вам создавать веб-сайты намного быстрее, чем с помощью Django, вы лучше понимаете многие концепции внутреннего программирования, вам будет легче создавать API, веб-приложения в реальном времени (например, чат или игры) и универсальные веб-приложения (вы столкнетесь с ними, когда изучите React).
Лучший курс, с которым я столкнулся, - это Полный курс разработчика NodeJS.
Фреймворки Frontend
Если вы разбираетесь в HTML / CSS / JS и единой внутренней структуре, вы - способный веб-разработчик, способный создавать множество типов веб-сайтов. Если вы хотите стать Full-Stack разработчиком - добро пожаловать в мир интерфейсных фреймворков.
Фреймворки Frontend позволят вам создавать мощные одностраничные приложения. На этом этапе вы, по сути, создаете приложение, которое полностью запускается в браузере, время от времени обмениваясь данными с сервером (например, Gmail или Trello).
В течение долгого времени в этой сфере велась большая конкуренция, но пока вы читаете эту статью, лучший выбор очевиден - вам следует изучить React и Redux.
Я не могу подробно объяснять, как они работают или в чем их преимущества (это займет много времени), но, к счастью, есть абсолютно блестящий курс, который научит вас всему, что вам нужно знать - Modern React с Redux.
А чтобы узнать о более продвинутом функционале, вы можете посмотреть 2-ю часть этого курса того же автора - Advanced React and Redux.
Автор этих курсов Стивен Грайдер - блестящий учитель, он невероятно хорошо все объясняет, и вы получите массу удовольствия, изучая все сложности этих технологий, следуя его курсам.
Я настоятельно рекомендую вам создать веб-сайт с помощью Node и React / Redux, потому что это действительно поможет вам понять, как создавать и использовать REST API, и объединить весь набор технологий в мощное и полезное программное обеспечение.
DevOps
Фью, это много чего. Последняя часть головоломки, которую необходимо усвоить веб-разработчику с полным стеком, - это DevOps. Это глубокая тема, в которой я не эксперт, но основы развертывания веб-сайтов не так уж и сложны для понимания.
К настоящему времени, скорее всего, вы многому научились, просто создавая и развертывая веб-сайты. Вы, вероятно, использовали github и какой-то инструмент CI для развертывания своих веб-сайтов и Nginx для их обслуживания.
Теперь вам следует изучить Docker. Docker - это отраслевой стандарт развертывания веб-приложений, он делает весь процесс быстрым, элегантным и удобным.
Лично я изучил Docker из этого курса, и мне это очень нравится. Этот курс короткий, простой и понятный.
Заключение
Надеюсь, эта статья была вам полезна. Очевидно, что невозможно охватить все об этой глубокой, сложной и быстро развивающейся области в одной статье, но я считаю, что приведенные выше темы и ресурсы дадут вам четкое представление о предстоящем пути и полезную дорожную карту, которой нужно следовать. По крайней мере, я хотел бы, чтобы несколько лет назад мне были доступны такие статьи.
Вы, безусловно, узнаете больше по мере того, как будете следовать и углубляться в темы, которые вас интересуют больше всего, но я думаю, что теперь ваш путь будет намного более простым и менее запутанным.
Если у вас есть вопросы, комментарии или вам нужен совет, не стесняйтесь писать мне на [email protected].
Кроме того, если вам интересно больше статей о веб-разработке, стартапах и построении вашего онлайн-бизнеса - вперед и подпишитесь на мою еженедельную рассылку!
