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

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

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

Начнем!

Зачем изучать веб-разработку?

Короче говоря, потенциал работы.

Веб-разработка — быстрорастущая профессия. Бюро статистики труда США прогнозирует 8-процентный рост числа рабочих мест веб-разработчиков в период с 2019 по 2029 год. Веб-разработчики могут работать внештатно или в качестве внутренних сотрудников в компании, и многие из них работают удаленно. Короче говоря, это отличное поле для всех, кто ценит профессиональный рост и возможности обучения.

Навыки, описанные в этих руководствах:

• HTML
• КСС
• Питон
• JavaScript
• Node. js
• Базы данных SQL

Щелкните здесь, чтобы перейти к руководствам.

7 шагов к обучению веб-разработке

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

На самом базовом уровне веб-сайты представляют собой наборы файлов и кода, хранящиеся на сервер , который подключен к Интернету. Вы получаете доступ к веб-сайту, загружая его через браузер (например, Chrome, Firefox, Safari), также известный как клиент . Эта пара составляет «модель сервер-клиент».

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

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

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

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

Разработчики серверной части работают с серверной частью веб-сайта. Это включает в себя управление веб-серверами, взаимодействие с базами данных и использование анализа данных — все это функции, которые пользователь не видит при взаимодействии с сайтом. Бэкэнд-разработчики могут также использовать технологии, ориентированные на данные, такие как SQL и Python, для управления функциональностью веб-сайта.

Разработчики полного стека являются экспертами в области «полного стека» технологий, связанных с веб-сайтами.

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

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

• Разработка внешнего интерфейса веб-сайта
• Понимание пользовательского интерфейса и дизайна взаимодействия с пользователем
• Написание технической документации
• Разработка архитектуры веб-сайта
• Внедрение протоколов безопасности данных
• Создание серверов и баз данных
• Обеспечение кроссплатформенной оптимизации для мобильных устройств

Изучите комплексную веб-разработку в учебном лагере Berkeley Coding.

Вы можете начать веб-разработку, используя любой компьютер, поддерживающий Windows, macOS или Linux. Минимальные требования для программирования включают: 

• Процессор Intel i5/i7 или процессор Apple Silicon на новых компьютерах Mac
• Монитор Full HD или встроенный экран ноутбука, в идеале 1920×1080
• 8 ГБ оперативной памяти

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

Notepad++ — хороший текстовый редактор для начинающих, но он доступен только в Windows. Atom — еще один отличный вариант для Mac, Windows и Linux.

Для кодирования вам понадобится веб-браузер. Учитывая, что вы читаете эту статью, возможно, она у вас уже есть! Тем не менее, загрузка нескольких браузеров позволяет вам убедиться, что ваш сайт правильно отображается в Интернете, поэтому в вашем распоряжении должно быть несколько браузеров. Популярные варианты включают Chrome, Safari, Microsoft Edge, Firefox, Brave или Opera.

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

Например, XAMPP — это утилита, которая может запускать сервер на вашем компьютере Mac, Windows или Linux. MAMP — еще один вариант только для Mac и Windows.

Графические редакторы могут помочь разработчикам создавать и редактировать графические элементы веб-сайта. Adobe Creative Suite является отраслевым стандартом, но его ежемесячная плата может быть высокой, если вы новичок в дизайне. Альтернативы можно найти в GIMP (бесплатная версия Adobe Photoshop) и Inkscape (бесплатная версия Adobe Illustrator, используемая для создания векторной графики).

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

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

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

Хотите получить дополнительную информацию об этом языке кодирования «строительных блоков»? Вот руководство по изучению HTML.

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

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

JavaScript — еще один важный компонент в наборе инструментов веб-разработчика. Согласно отчету HackerRank для разработчиков за 2020 год (PDF, 2,8 МБ), это один из самых популярных языков на рынке, а также язык №1, наиболее востребованный менеджерами по найму.

JavaScript — это язык клиентской части, который используется вместе с HTML и CSS для создания динамичных, отзывчивых веб-сайтов. Его легко подобрать, и он невероятно универсален, позволяя разработчику обрабатывать любую часть дизайна и функциональности веб-сайта. Многие навыки, связанные с написанием JavaScript, также можно применить к другим языкам, таким как Python и Java, что делает его отличным введением в программирование.

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

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

Менеджеры пакетов могут устанавливать библиотеки и другие зависимости (также называемые пакетами), используемые для разработки внешнего интерфейса. Зависимости — это сторонние части программного обеспечения, которые решают проблему или выполняют определенную функцию. Например, npm — это менеджер пакетов, который, как следует из самого термина, помогает разработчикам устанавливать новые пакеты и управлять ими.

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

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

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

Parcel похож на webpack тем, что это упаковщик, но для начала работы требуется меньше настроек.

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

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

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

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

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

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

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

Bootstrap — это огромный фреймворк для внешнего кода на основе CSS, HTML и JavaScript. Хотите узнать больше? Ознакомьтесь с нашим руководством по Bootstrap!

Другие основные интерфейсные JavaScript-фреймворки, которые стоит проверить, включают React, Vue.js и AngularJS.

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

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

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

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

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

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

Поставщики бессерверных решений, такие как Amazon Web Services (AWS) и Microsoft Azure, предоставляют инфраструктуру для огромной части современного Интернета. Знание того, как работать с одной из этих платформ, сегодня является бесценным навыком для бэкенд-разработчика.

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

Разработчики серверной части также должны знать несколько различных языков программирования, в том числе: 

• Java:  Java – это универсальный язык программирования, который может быть полезен как на стороне клиента, так и на стороне сервера. Приложения. Он существует уже более 20 лет и считается одним из самых доступных языков для изучения. Java — это язык с открытым исходным кодом с огромным сообществом разработчиков и обширной библиотекой инструментов и ресурсов для создания. Зрелость Java закрепила за ним репутацию прочного, надежного и масштабируемого языка. Его часто используют крупные корпоративные компании, поэтому некоторое знакомство с языком может принести вам пользу позже, когда вы начнете работать.
• Python:  Python — еще один популярный язык программирования, используемый для серверной разработки. Фактически, это один из самых популярных языков программирования в мире. Python — еще один отличный язык для начинающих, потому что он интуитивно понятен, гибок и универсален; он часто используется в серверной разработке, анализе данных и науке о данных. Ознакомьтесь с нашим руководством по Python для начинающих, чтобы получить дополнительную информацию!
• Node.js:  На самом базовом уровне Node.js позволяет разработчикам применять JavaScript для внутреннего программирования. Это среда выполнения, которая позволяет разработчикам выполнять код и сценарии JavaScript на сервере для создания динамических веб-страниц. Многие известные технологические компании используют Node.js; к ним относятся PayPal, Uber и Microsoft. Учитывая, насколько он распространен среди крупных технологических игроков, знание Node.js принесет большую пользу вам как профессионалу.
• PHP: PHP – это язык сценариев, работающий на сервере. В общих чертах, PHP используется для запроса содержимого с сервера сайта и отображения его пользователю на его компьютере. Например, PHP-скрипт может автоматически отображать три ваших последних сообщения в блоге на главной странице вашего сайта. Сами сообщения хранятся на сервере и вызываются, когда пользователь попадает на вашу домашнюю страницу; перезагрузка страницы не требуется. Понимание PHP необходимо для всех, кто работает с веб-сайтами WordPress, так как PHP — это движок для пользовательских тем и плагинов WordPress.
• Ruby: Ruby был разработан в середине 1990-х годов как гибкий и всеобъемлющий язык. Он популярен среди стартапов и малого бизнеса, потому что запуск проекта с использованием Ruby занимает очень мало времени, и вы можете использовать его для быстрого прототипирования приложений. Ruby не так популярен, как некоторые другие внутренние языки, но у него все еще есть сильное сообщество разработчиков. Это отличный выбор для начинающих разработчиков или тех, кто хочет работать в стартапе.

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

Язык структурированных запросов (SQL) — это язык запросов, популярный среди специалистов по обработке и анализу данных и внутренних разработчиков. Он используется для создания баз данных, добавления новых данных в существующие базы данных и изменения данных в базах данных. SQL позволяет разработчикам запрашивать данные из реляционных баз данных — баз данных, в которых данные организованы в виде таблиц. MySQL и Microsoft SQL Server — несколько широко используемых вариантов.

(Хотите узнать больше? Ознакомьтесь с нашим руководством по SQL.)

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

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

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

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

Вам нужно подумать о своем сайте, своих пользователях и целях. Кто вы хотите, чтобы читать ваш сайт? Откуда они? Что вы хотите, чтобы они сделали — купили товар, заполнили форму или что-то еще? Ваш сайт не должен нравиться всем, но он должен нравиться вашим целевым пользователям.

Архитектура веб-сайта относится к макету и структуре страниц вашего сайта. Это могут быть такие страницы, как:

• Домашняя страница
• Страница «О программе»
• Целевые страницы
• A Страница «Контакты»

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

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

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

Эффективный веб-дизайн основан на принципах дизайна в более широком смысле. Рассмотрим: 

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

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

Структура вашего веб-сайта должна соответствовать визуальной иерархии. Какие идеи важно видеть пользователям и в каком порядке они должны их видеть? Большинство людей читают веб-сайты в форме буквы F или буквы Z. Понимание того, как люди взаимодействуют с Интернетом, может помочь вам настроить свои страницы.

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

Советы для размышления

• Определите свои цели: Прыжок вглубь веб-разработки может показаться ошеломляющим, если у вас нет плана. Подумайте о том, что вы хотите узнать, и наметьте временную шкалу для достижения ваших целей.
• Не ограничивайтесь обучающими программами: Один из лучших способов учиться — применять полученные знания на практике. Учебные программы не превратят вас в разработчика за одну ночь. Создание реальных веб-сайтов имеет решающее значение для вашего обучения.
• Примите участие в учебном курсе или курсе: Есть чему поучиться, когда дело доходит до веб-разработки. Зачисление в учебный курс по кодированию, посвященный веб-разработке, может помочь вам структурировать свое обучение в течение сжатого периода времени, чтобы вы могли быстро начать создавать веб-сайты.
• Никогда не прекращайте учиться : Сеть постоянно меняется, поэтому, естественно, и передовой опыт в Интернете тоже. То, чему вы научитесь сегодня, может не стать стандартом через пять лет, поэтому у вас всегда должен быть настрой на обучение.
• Соберите портфолио: Создание портфолио дает вам возможность показать работодателям, как только вы начнете поиск работы. Следите за своими проектами и демонстрируйте их миру.

Часто задаваемые вопросы

Вам понадобится компьютер с веб-браузером, таким как Chrome, Firefox или Safari. Вам также понадобится текстовый редактор, такой как Atom, для написания кода и управления им, а также утилита локального веб-сервера, такая как XAMPP, для тестирования сайтов по мере их написания.

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

Есть несколько вещей, которые вы захотите изучить, чтобы понять, как работают веб-сайты. Например, HTML, CSS и JavaScript часто используются во фронтенд-разработке, тогда как Python, Java и Node.js идеально подходят для тех, кто занимается бэкэнд-разработкой.

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

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

Навигация по статьям по веб-разработке

От основ до более продвинутых руководств по веб-разработке.

Готов узнать больше о Berkeley Coding Учебный лагерь в Сан-Франциско ? Свяжитесь с консультантом по приему по телефону (510) 306-1218.

Делиться своими данными с третьими лицами для персонализированной рекламы

Делиться своими данными с третьими лицами для персонализированной рекламы

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

Чтобы узнать больше об использовании ваших личных данных компанией 2U, ознакомьтесь с нашей Политикой конфиденциальности.

Введение в веб-разработку (бесплатное руководство)

💬 «Нет ничего лучше, чем ничего не знать, ведь тогда так многому еще предстоит научиться!»

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

Введение

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

Что мы будем делать сегодня?

1. Узнайте, какова роль веб-разработчика, и обсудите различные типы веб-разработчиков
2. Взгляните на навыки, необходимые для того, чтобы стать веб-разработчиком
3. Предварительный просмотр того, что мы будем изучать в течение следующих 5 дней
4. Создайте свою первую веб-страницу с помощью текстового редактора и браузера

Готовы погрузиться в волшебный мир веб-разработки? Пойдем!

1.

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

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

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

Мы рады, что вы спросили! А 9Веб-сайт 0019 обычно представляет собой простую страницу или группу страниц (например, популярный сайт веб-комиксов xkcd). Однако современные веб-сайты — это гораздо больше. Возьмем, к примеру, Google Документы. У него приятный интерфейс, который после открытия очень похож на настольное программное обеспечение, такое как Microsoft Office. Такие сложные веб-сайты часто называют веб-приложениями . Сегодня ожидается, что веб-разработчик знает, как создавать веб-приложения и работать с ними. Сказав это, большинство людей используют термины взаимозаменяемо, так что не слишком зацикливайтесь на терминологии!

Типы веб-разработчиков

Существуют разные типы веб-разработчиков, занимающихся разными областями. К ним относятся:

• разработчиков внешнего интерфейса: разработчиков внешнего интерфейса реализуют дизайн веб-страниц с использованием HTML и CSS. Они следят за тем, чтобы сайт выглядел красиво на разных устройствах, а формы и кнопки работали.
• Backend-разработчиков: Backend-разработчиков создают основу веб-приложения. Они пишут логику кода, которая обрабатывает ввод пользователя (например, что должно произойти, когда вы нажмете кнопку регистрации после заполнения формы).
• Разработчики с полным стеком: Разработчики с полным стеком занимаются как бэкендом, так и внешним интерфейсом. В зависимости от решаемой задачи они могут менять плащ 🦸‍♀️🦸‍♂️ и перемещать стопки. Вы можете узнать больше о различиях между frontend и backend разработкой в ​​этом руководстве.

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

2. Какие навыки необходимы, чтобы стать веб-разработчиком?

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

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

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

Каковы перспективы работы веб-разработчиков?

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

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

3. Что мы будем изучать в течение следующих пяти дней

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

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

На второй день мы напишем больше HTML и HTML-элементов и создадим примерный макет веб-сайта нашего проекта.

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

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

В пятый и последний день мы научимся писать основы JavaScript. Мы также рассмотрим проверки форм и другие распространенные элементы программирования на JavaScript.

Чтобы дать вам небольшое представление, примерно так будет выглядеть ваш веб-сайт в конце этого курса. Довольно круто, правда?

Готовы начать? Начнем с настройки среды разработки.

Настройка среды разработки

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

1. Текстовый редактор для написания кода
2. Веб-браузер, чтобы увидеть, что мы создаем

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

• Google Chrome можно загрузить с https://www.google.com/chrome/
• Sublime Text можно загрузить с https://www. sublimetext.com/3.

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

Google Chrome

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

Sublime Text

Sublime Text — популярный текстовый редактор. Текстовый редактор — это программа с очень удачным названием; это помогает нам редактировать текст. Он похож на текстовый редактор по умолчанию, который предустановлен на Mac или Windows, но имеет дополнительные функции, такие как выделение кода, для улучшения нашего кода и отладки.

⚠️ Осторожно! Sublime Text — это платное программное обеспечение с неограниченным пробным периодом. Время от времени вы будете видеть всплывающее диалоговое окно с предложением заплатить за лицензию на программное обеспечение. Вы можете заплатить за него, если хотите, но вам не нужно платить только за этот курс.

Этот курс не зависит от ОС, что означает, что вы можете пройти его в Windows, Mac OS или Linux.

😎Совет профессионала : Если вы застряли при установке Chrome или Sublime или видите какие-либо сообщения об ошибках, лучше всего выполнить поиск в Интернете (попробуйте поиск в Google или DuckDuckGo) для точного сообщения об ошибке. Вполне вероятно, что у других людей была такая же проблема до нас, и решение уже существует.

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

4. Ваша очередь: Создание вашей первой веб-страницы

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

HTML означает H yper T ext M arkup L язык. В двух словах:

• Гипертекст просто означает текст, который может переходить из одной точки в другую. Если вы когда-либо нажимали ссылку на странице (попробуйте это: google.com), вы использовали гипертекст.
• Разметка — это просто способ структурировать содержимое, чтобы мы могли различать разные блоки текста.
• Язык означает, ммм, язык. Компьютерные языки похожи на языки реального мира, такие как английский и немецкий, но очень строги в своем синтаксисе.

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

Ладно, хватит теории. Давайте приступим к делу, открыв Sublime Text.

⚠️ Осторожно! Студенты часто застревают на этом шаге, так что не торопитесь.

Щелкните Файл > Открыть папку (или просто Открыть… , если вы используете MacOS). Обратите внимание, что в MacOS панель инструментов находится вверху экрана (как показано на снимке экрана ниже).

После того, как вы выберете Файл > Открыть / Открыть папку, откроется новое окно, которое позволит вам выбрать существующую папку или создать новую папку. Перейдите на «Рабочий стол» и создайте там папку. Создание папки на рабочем столе облегчает поиск в дальнейшем.

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

В MacOS это будет выглядеть так:

В Linux это будет выглядеть так. Если вы нажмете на нее, вы сможете создать папку, дав ей имя.

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

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

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

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

Сохраним файл. Нажмите Файл > Сохранить , и вы должны открыть окно с просьбой ввести имя файла. Здесь введите index.html и нажмите «Сохранить».

Мы называем его «index. html» в соответствии с соглашением. По умолчанию точка входа на веб-сайт называется индексной страницей, отсюда и название.

Также убедитесь, что вы сохранили файл в папке портфолио . Вот что вы должны увидеть сейчас.

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

🙋  Обратите внимание: Фрагменты кода в видео могут не совпадать с фрагментами кода в тексте руководства. Ничего страшного — в программировании обычно существует более одного правильного способа достижения одного и того же результата. Будьте уверены, вы изучаете одни и те же концепции!

Итак, давайте приступим к кодированию вашей первой веб-страницы. Введите следующий код как в файл index.html :

Уже готово? Хороший. Вот как это должно выглядеть на вашем экране.

Посмотреть изменения кода на GitHub >

Хорошо, отличная работа! Вы только что написали настоящий HTML-код. Пришло время посмотреть, как это выглядит в браузере. Это называется с кодом , и мы будем делать это все время в этом курсе.

Чтобы запустить HTML, откройте веб-браузер Google Chrome, который мы установили ранее. Оказавшись там, нажмите Ctrl+O в Windows и Linux или Cmd+O на Mac, чтобы открыть диалоговое окно проводника.

Перейдите к папке Desktop , а затем к папке Portugal , и вы должны увидеть файл index.html , в котором мы только что написали код. Откройте этот файл, и вы должны увидеть что-то вроде следующего:

Если вы видите страницу выше, похлопайте себя по плечу. Вы только что создали свою первую функциональную веб-страницу. Обратите внимание, где появляются тексты « Первая веб-страница » и « Hello World ».

Вернемся к Sublime Text и попробуем изменить Hello World по линии 7 до Hello World, загляните на мой сайт! Сохраните его и обновите страницу в Chrome. Вы должны увидеть обновленную версию текста.

Посмотреть изменения кода на GitHub >

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

Помимо «URL-адресов фиксации Github»

На протяжении всего курса вы время от времени будете встречать ссылку Github (https://github.com), подобную приведенной выше. Github — это веб-сайт, который разработчики (и даже не разработчики) используют для размещения проектов кода и обмена ими с другими. Каждое изменение (например, изменение нашего заголовка) называется «коммит», и ссылка под изображениями приведет вас к соответствующему коммиту.

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

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

На этом наш первый урок подходит к концу. Хорошая работа!

Резюме

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

Но подождите, это еще не все! Если вы чувствуете мотивацию и хотите добавить больше типов текста на свою веб-страницу до завтра, почему бы не попробовать ежедневную задачу?

🧐Ежедневное задание

Вы заметили, что текст в строке 4 () и строке 7 (

Hello World

title и h2 (заголовок 1) — это то, что мы называем элементами HTML. Таких элементов еще много, вроде р (абзац), х3 , х4 .. х6 (заголовок 2, заголовок 3…заголовок 6) и сильный (жирный текст).

В сегодняшнем задании попробуйте добавить следующие теги на свою страницу с собственным контентом

1. h4
2. сильный
3. р

Когда вы закончите, ваша страница должна выглядеть примерно так. Текст внутри тегов (например, «Я исследователь» ) можно настроить по своему усмотрению.

Ваша задача написать так, как показано на картинке (возможно, с вашим настроенным текстом) и объяснить себе, что сделали элементы h4 , strong и p . Если вам удалось заставить все работать, опубликуйте скриншот и отметьте @careerfoundry в Твиттере.

🙋Решение

Вы выяснили, что делает каждый тег?

h4 — заголовок, такой же, как h2 , но менее важный (и выглядит меньше). strong делает текст жирным. p — сокращение от абзаца и используется для текстового содержимого.

📗Ссылки

• Заголовки HTML (

  ,

  …

  )

❓ FAQ

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

A. Если вы не можете создать новую папку через Sublime, вы можете создать ее с помощью файлового менеджера (например, Finder в MacOS). Важно то, что папка создается, и вы можете открыть ее в редакторе Sublime Text.

В. Могу ли я использовать Atom / Nodepad / Wordpad / Google Docs / «X» для написания кода и Firefox / Safari / Opera в качестве браузера?

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

В. Я не понял код, который мы написали сегодня. Что такое h4 и сильно? Как это работает?

А. Терпение! Завтра мы узнаем больше об HTML, и на эти вопросы будут даны ответы.

В. Я получаю сообщение « Ваш файл не найден » на темном и тусклом экране

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

В. Почему мы создаем сайт-портфолио, а не онлайн-игру/анимацию/социальную сеть?

A.