Изучайте веб-разработку как абсолютный новичок (2021)

Хотите изучить веб-разработку как новичок, но не знаете, с чего начать?

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

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

Шаги по изучению основ веб-разработки:

1. Изучите основы работы веб-сайтов, отличия front-end от back-end и использование редактора кода.
2. Изучите основы HTML, CSS и JavaScript
3. Изучите инструменты: менеджеры пакетов, инструменты сборки, контроль версий
4. Изучите Sass, отзывчивый дизайн, фреймворки JavaScript.
5. Изучите основы back-end: серверы и базы данных, языки программирования.

Я рекомендую выполнять шаги 1, 2 и 3 по порядку. Затем, в зависимости от того, на чем вы хотите сосредоточиться – на front-end или back-end, вы можете выполнить шаги 4a или 4b в любом порядке.

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

Дорожная карта для изучения веб-разработки (инфографика)

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

Нажмите для загрузки полноразмерного изображения

Итак, давайте сразу перейдем к первому шагу!

1: Что такое веб-разработка?

Прежде чем перейти к собственно кодированию, давайте сначала рассмотрим некоторые общие сведения о том, что такое веб-разработка: как работают веб-сайты, разница между front- и back-end, использование редактора кода.

Как работают веб-сайты?

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

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

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

В чем разница между front-end и back-end?

Термины “front-end”, “back-end” и “full stack” веб-разработчика описывают, с какой частью отношений клиент/сервер вы работаете.

Термин “front-end” означает, что вы имеете дело с

Один из способов, которым вы можете думать об этом, заключается в том, что внешняя веб-разработка похожа на “переднюю часть дома” в ресторане. Это та часть, куда клиенты приходят, чтобы увидеть и испытать ресторан – внутреннее убранство, рассадку и, конечно же, еду.

С другой стороны, внутренняя веб-разработка похожа на “заднюю часть” ресторана. Именно здесь происходит управление поставками и запасами, а также процесс создания блюд. Есть много вещей за кулисами, которые клиенты не увидят, но они увидят (и, надеюсь, насладятся) конечным продуктом – вкусной едой!

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

Использование редактора кода

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

Существует довольно много хороших вариантов, но в настоящее время самым популярным редактором кода является VS Code. VS Code – это более облегченная версия Visual Studio, основной среды разработки Microsoft. Он быстрый, бесплатный, простой в использовании, и вы можете настроить его с помощью тем и расширений.

Другие редакторы кода – Sublime Text, Atom и Vim.

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

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

2: Базовый фронт-энд

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

Давайте рассмотрим каждый из них подробнее.

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

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

Только начинаете изучать HTML? Посмотрите этот учебник по созданию очень простого сайта с использованием только HTML.

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

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

JavaScript

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

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

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

Где изучать HTML, CSS и JavaScript

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

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

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

Поэтому, если вам действительно нравится учиться на видео, вот несколько других вариантов:

Академия Zero to Mastery создана Андреем Неагойе, одним из самых рейтинговых преподавателей кодинга на Udemy. Теперь у Андрея есть своя собственная платформа с курсами по веб-разработке, JavaScript, Python, React и даже фрилансу и кодингу. Преимущество заключается в том, что вы платите ежемесячную или ежегодную плату, чтобы получить доступ к каждому из курсов на платформе ZTM.

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

Если вы больше любите разовые видеокурсы, есть несколько бесплатных и платных вариантов:

Уэс Бос предлагает бесплатные курсы по изучению Flexbox, CSS Grid и JavaScript, которые являются превосходными. Я только что прошел его курс по CSS Grid, и он был очень подробным и одновременно увлекательным. Уэс – отличный учитель!

Udemy – это платформа онлайн-обучения, на которой также есть много отличных курсов. В частности, вам может понравиться курс Advanced CSS and Sass Йонаса Шмедтманна – этот платный курс охватывает CSS grid, flexbox, отзывчивый дизайн и другие темы CSS!

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

На YouTube также есть масса бесплатных видеоресурсов:

Traversy Media, вероятно, самый большой канал о веб-разработке, имеет HTML Crash Course и CSS Crash Course для начинающих.

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

У FreeCodeCamp есть свой канал на YouTube, на котором есть такие видео, как курс “Изучаем JavaScript для начинающих” и другие углубленные курсы.

И, конечно, у меня есть свой канал на YouTube, Coder Coder, где я создаю видео по учебникам по фронтенд веб-разработке! Посмотрите мой плейлист из 7 частей о создании отзывчивого веб-сайта с нуля с помощью HTML, SCSS и JavaScript:

Книги и статьи по веб-разработке

Если вы больше любите читать, я бы очень рекомендовал следующее:

Невероятно популярные книги Джона Дакетта по HTML и CSS, а также JavaScript и jQuery. Эти книги – совсем не плотные, заурядные учебники. Они прекрасно оформлены, действительно хорошо написаны и снабжены большим количеством фотографий и изображений, которые помогают в изучении материала.

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

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

3: Инструменты

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

Менеджеры пакетов

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

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

Самый популярный менеджер пакетов называется npm, или Node Package Manager, но вы также можете использовать другой менеджер под названием Yarn. Оба варианта хороши для ознакомления и использования, хотя, вероятно, лучше начать с npm.

Если вам интересно узнать больше, вы можете прочитать эту статью об основах использования npm.

Инструменты сборки

Пакеты модулей и инструменты сборки, такие как Webpack, Gulp или Parcel, являются еще одной важной частью рабочего процесса front-end.

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

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

Webpack – это супермощный пакетный пакет, который может делать все то же самое, что и Gulp, и даже больше. Он широко используется в среде JavaScript, особенно в JavaScript Frameworks (о которых мы поговорим чуть позже). Одним из недостатков Webpack является то, что он требует много настроек для запуска, что может разочаровать новичков.

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

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

У меня также есть премиум-курс “Gulp для начинающих”, если вы ищете более подробное руководство по использованию Gulp для повышения эффективности вашего фронтенд-процесса!

Если вы хотите узнать больше о Webpack, посмотрите следующие видео на YouTube:

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

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

Наиболее популярная система управления версиями

После того как вы освоите основы front-end, вы захотите изучить некоторые промежуточные навыки. Я рекомендую вам изучить следующее: Sass, отзывчивый дизайн и JavaScript-фреймворк.

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

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

Вы можете узнать больше о Sass в этом учебнике Scotch.io, а также в видео на YouTube от Dev Ed.

Отзывчивый дизайн

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

Например, вместо того чтобы задавать статичную ширину содержимого в 400px, можно использовать медиа-запрос и задать ширину содержимого в 50% на настольном компьютере и 100% на мобильном.

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

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

Фреймворки JavaScript

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

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

В настоящее время у вас есть три основных варианта: React, Angular и Vue.

React (технически это библиотека) был создан компанией Facebook и является самым популярным фреймворком в настоящее время. Вы можете начать изучение, посетив сайт React.js. Если вас интересует премиум-курс по React, у Тайлера Макгиннинса и Уэса Боса есть отличные курсы для начинающих.

Angular был первым крупным фреймворком, созданным компанией Google. Он по-прежнему очень популярен, хотя в последнее время его обогнал React. Вы можете начать изучать Angular на их сайте. Гэри из DesignCourse также проводит на YouTube краш-курс по Angular.

Vue – это более новый фреймворк, созданный Эваном Ю, бывшим разработчиком Angular. Хотя он используется меньше, чем React и Angular, он быстро развивается, а также считается простым и интересным в использовании. Вы можете начать работу с ним на сайте Vue.

Какой фреймворк вам следует изучить?

Возможно, сейчас вы задаетесь вопросом: “Хорошо, а какой фреймворк лучше?”.

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

Ваш выбор

Переходим к последнему разделу: back-end веб-разработка!

4b: Базовый back-end

Back-end, или серверная сторона веб-разработки, состоит из трех основных компонентов: сервера, серверного языка программирования и базы данных.

Сервер

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

Традиционные серверы работают под управлением таких операционных систем, как Linux или Windows. Они считаются “централизованными”, поскольку все – файлы сайта, внутренний код и данные – хранятся вместе на сервере.

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

Однако, несмотря на название, вам все равно нужен какой-то сервер, чтобы хотя бы хранить файлы вашего сайта. Примерами бессерверных провайдеров являются AWS (Amazon Web Services) или Netlify.

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

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

Язык программирования

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

Популярные языки программирования для веб включают PHP, Python, Ruby, C# и Java. Существует также разновидность серверного JavaScript – Node.js, который представляет собой среду исполнения, позволяющую выполнять код JavaScript на сервере.

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

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

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

Java

Java – один из самых популярных языков программирования, который используется в веб-приложениях, а также для создания приложений для Android.

Node.js

C<#

C#>Node.js – очень популярная технология (согласно опросу разработчиков Stack Overflow за 2019 год). Следует отметить, что технически это не серверный язык – это форма JavaScript, которая работает на сервере с помощью фреймворка Express.js.

PHP

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

Python

Популярность Python растет, особенно в связи с тем, что он используется в

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

Базы данных

Базы данных, как следует из названия, являются местом хранения информации для вашего сайта. Большинство баз данных используют язык SQL (произносится как “сиквел”), который расшифровывается как “язык структурированных запросов”.

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

База данных работает на сервере, используя такие серверы, как Microsoft SQL Server для серверов Windows и MySQL для Linux.

Существуют также базы данных NoSQL, которые хранят данные в файлах JSON в отличие от традиционных таблиц. Одним из видов баз данных NoSQL является MongoDB, которая часто используется в приложениях React, Angular и Vue.

Некоторые примеры использования данных на веб-сайтах:

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

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

Для изучения основ SQL можно воспользоваться некоторыми ресурсами:

Некоторые советы…

Спасибо за чтение! Я искренне надеюсь, что это руководство поможет вам начать изучать веб-разработку.

Несколько советов, которые у меня есть, если вы идете по пути самообучения:

Не пытайтесь выучить все сразу. Выберите один навык за раз.

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

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

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

Желаю удачи в изучении веб-разработки!

Я готовлю курс, который научит вас создавать реальные отзывчивые веб-сайты с нуля!

1. Похожие посты
2. Подпишитесь, чтобы получать электронные письма о новых постах и другую информацию. Отписаться в любое время.
3. Отказ от партнерских отношений
4. Я участвую в различных партнерских программах, и мои материалы содержат партнерские ссылки. Если вы совершите покупку по этим ссылкам, я могу получить комиссионные от продавца без каких-либо затрат для себя. Это один из способов поддержать этот сайт!

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

Инфографика для начинающих

jon-duckett-books

eloqu