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

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

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

Начните изучение с HTML и CSS

В начале была всемирная паутина. ЕДИНСТВЕННЫМ инструментом, который можно было использовать для создания веб-страницы, был HTML. Это основа каждой отдельной веб-страницы на каждом веб-сайте. Его невозможно избежать, и вы не должны этого делать, поскольку при правильном использовании это мощный инструмент.

HTML (язык гипертекстовой разметки) не является языком программирования как таковым. Это язык разметки, используемый для описания состояния чего-либо — в данном случае контента веб-страницы.

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

Так как же сделать так, чтобы веб-страница действительно выглядела красиво и изящно? Введите CSS (каскадные таблицы стилей). Вы используете CSS в сочетании с документом HTML, чтобы описать, как страница должна выглядеть.

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

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

Чтобы стать хорошим разработчиком, вам нужны прочные основы, а для веб-разработчика такими основами являются HTML и CSS.

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

JavaScript — хороший следующий шаг

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

JavaScript (JS) изначально разрабатывался как дополнение к HTML и CSS и использовался для добавления небольшого количества интерактивного поведения на статические веб-сайты. В настоящее время он используется не только для этого, но эти простые усовершенствования — хорошее место для начала вашего путешествия.

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

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

Сначала избегайте фреймворков JavaScript

Как только вы войдете в мир JavaScript, вы столкнетесь со ссылками на некоторые фреймворки JavaScript. В настоящее время самыми популярными являются React, Angular и Vue, но есть и множество других.

Мой совет — поначалу держаться подальше от них и на самом деле набраться опыта в изучении ванильного JavaScript без каких-либо фреймворков. Фреймворки могут позволить вам взяться за дело и предоставить множество удобных функций, но, как всегда, если у вас нет четкого понимания основ, вы, вероятно, попадете в затруднительное положение.

Итак, сначала откажитесь от фреймворков и придерживайтесь ванильного JavaScript. Фактически, последние выпуски JS предоставляют функции, которые означают, что вам даже не нужен фреймворк — на самом деле для большинства сайтов это было бы полным излишеством. JavaScript следует использовать для улучшения вещей.

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

Прогрессивное улучшение и доступность

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

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

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

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

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

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

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

Решение этой проблемы состоит в том, чтобы максимально полагаться на основные технологии Интернета — HTML и CSS — и не втягиваться в предоставление основного контента с помощью причудливого JavaScript.

Использование IDE

Когда вы начинаете свое путешествие по программированию, вы вполне можете использовать любой текстовый редактор, который есть на вашем компьютере. В Windows это Блокнот, а в Mac — TextEdit. Оба они хороши, когда вы только начинаете, но есть варианты и получше.

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

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

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

Теперь многие люди могут сказать, что использование IDE — это обман, и использовать ее, когда вы только начинаете изучать веб-разработку, — плохая идея. Я говорю, что все наоборот.

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

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

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

Копируйте и вставляйте, но не вслепую

В разработке программного обеспечения есть общая тема: младших разработчиков обвиняют в том, что они просто «копируют и вставляют». Это связано с популярностью таких сайтов, как Stack Overflow, где вы можете найти решения многих распространенных проблем программирования и, конечно же, задать свои вопросы о проблемах, которые вы решаете в настоящее время.

Лично я не вижу проблемы с копированием и вставкой решений со Stack Overflow или подобных сайтов, с одной важной оговоркой. Просто убедитесь, что понимаете, что копируете!

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

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

Уважайте авторские права и не крадите изображения

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

Хотя во многих ситуациях это нормально, вы должны понимать, что часто люди на самом деле юридически владеют частью контента, и вы НЕ ИМЕЕТЕ ПРАВА НА ПОВТОРНОЕ ИСПОЛЬЗОВАНИЕ ИЛИ КОПИРОВАНИЕ ЕГО. Я написал это заглавными буквами, так как это очень важно. На вас могут подать в суд на тысячи долларов/фунтов/евро/что угодно, если вы украдете контент, которым не владеете.

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

Тот факт, что что-то доступно, не означает, что его можно использовать бесплатно.

Различие между бэкэндом и интерфейсом или сервером и клиентом

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

Я просто кратко опишу, что это такое, чтобы вы могли понять, как все работает.

Когда вы щелкаете ссылку и запрашиваете веб-страницу, происходит следующий процесс:

  1. Ваш веб-браузер (клиент), который находится на вашем компьютере/устройстве, просматривает запрошенный вами адрес ссылки и отправляет запрос на сервер, на котором размещен этот веб-сайт.
  2. Сервер, который, вероятно, размещен в центре обработки данных где-то далеко, получает запрос и делает все возможное для создания ответа. Ответ обычно представляет собой HTML-контент страницы, которую запросил ваш браузер.
  3. Затем сервер отправляет этот ответ обратно в ваш веб-браузер (клиент) по сети.
  4. Ваш браузер получает контент, преобразует его в веб-страницу и отображает ее.

Вы можете видеть, что в этом процессе есть два физических местоположения (клиент и сервер), и каждое из них выполняет определенную работу:

  • сервер создает HTML-код веб-страницы и отправляет его
  • клиент получает содержимое HTML и преобразует его в визуальную веб-страницу

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

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

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

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

Эти языки программирования на сервере называются базовыми языками.

Переход на бэкенд

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

Есть много разных языков, которые можно использовать в бэкенде, но сегодня я расскажу о следующих:

PHP

Возможно, исходным внутренним языком для веб-разработки является PHP. Он существует уже давно и идеально подходит для создания веб-сайтов.

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

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

питон

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

Он также имеет простую кривую обучения для начинающих и мощный набор функций прямо из коробки. Многие курсы в школах и колледжах знакомят студентов с программированием на Python.

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

NodeJS

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

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

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

Тем не менее, он имеет несколько недостатков.

  1. Вы не изучаете новый язык. Наличие нескольких языков делает вас лучшим разработчиком и расширяет ваше понимание основных фундаментальных концепций разработки программного обеспечения.
  2. Экосистема Javascript в беспорядке. Существуют сотни тысяч пакетов, которые вы можете использовать, но выбор между ними сложен, многие из них плохо спроектированы и плохо поддерживаются. Дело в том, что слишком много поваров портят бульон. Пробираться через все это, когда вы новичок, отнимает много времени и разочаровывает. Не поймите меня неправильно, вы вполне можете справиться с этим, я просто говорю, что может быть лучше избегать этого, пока у вас не будет больше опыта.

Используйте систему контроля версий

Когда вы пишете код, вы, как правило, пишете его очень много. И я имею в виду МНОГО. Одно из приложений, которыми я управляю, содержит более 100 000 строк кода, которые я написал сам, а также еще 3,2 миллиона строк кода из пакетов поставщиков, написанных другими людьми.

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

Самая популярная система контроля версий называется Git. Есть много других, некоторые старые, некоторые новые. Возможно, вы также слышали о GitHub или GitLab. Это веб-приложения, которые предоставляют вам сервисы Git.

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

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

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

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

Попросить помощи

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

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

Заключение

Начало веб-разработки — прекрасное путешествие. Начните с основ HTML и CSS, и вскоре вы станете зависимыми! Добавьте немного JavaScript или внутреннего языка, и вы быстро откроете потенциал для создания любого веб-сайта или приложения, о котором только можно мечтать.

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

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

Полезные ссылки

Языки

Иды

Контроль версий

Программное обеспечение

  • WordPress — конструктор сайтов на PHP
  • Express.js — фреймворк NodeJS