Course Content
Введение в HTML
Цель уроков из этого раздела подготовить вас к началу работы над проектом.
0/5
Введение в CSS
В этом разделе курса ты познакомишься с каскадными таблицами стилей.
Создание сайта: базовый курс 2022
Конспект урока

Введение

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

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

Выбор редактора я сделал за тебя — это Visual Studio Code (VS Code) от Майкрософт. В дальнейшем ты сможешь попробовать и другие редакторы, но сейчас не стоит тратить на это время. Лучше сосредоточься на обучении и развитии навыков.

Почему именно он и какие в нем плюсы я расскажу чуть ниже, но если тебе интересно, то мне довелось перепробывать более 6ти разных редакторов, от Notepad++ и Brackets до платного WebShtorm. Тем не менее я остановил свой выбор именно на Visual Studio Code.

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

Знакомимся с Visual Studio Code

Visual Studio Code (VS Code) — редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS.

Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки сайтов, веб-приложений и прочего программного обеспечения.

Включает в себя отладчик, инструменты для работы с Git, Emmet, Autocomplite, автоформатирование и подсветку синтаксиса, IntelliSense и средства для рефакторинга. В общем всё что тебе будет нужно в ближайшие пару лет — там есть!

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

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

Именно в этом редакторе мы будем работать на протяжении всего курса.

Немного терминологии

Этот редактор является IDE. Это значит что это не просто программа, а полноценная и легко масштабируемая среда для разработки программного обеспечения.

IDE Integrated Development Environment – интегрированная среда разработки программ.

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

Интегрированный (integrated) – объеденённый в одно целое, собранный из отдельных частей, программ или сервисов.

Интегрироваться – объединяться с чем то. К примеру интегрироваться в современное общество. Интегрировать свой код в чью то программу.

Среда разработки – это комплекс.

Интегрированная среда разработки – комплекс, который уже объединён в одну программу. Просто установи, настрой и работай.

Простая среда разработки

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

Обычная среда разработки у верстальщика включает в себя:

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

Важно понимать что простая среда разработки это много разных программ.

Интегрированная среда разработки

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

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

Преимущества Visual Studio Code

  • Кроссбраузерный – есть на все операционные системы
  • Бесплатный
  • Постоянно обновляется
  • Множество расширений
  • В 2022 является стандартом для большинства компаний и самозанятых специалистов из сферы веб-разработки.

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

Функциональные особенности

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

IntelliSense и Emmet

IntelliSense — автоматические подсказки для автозавершения команды или выражения, которое вы начинаете вводить, короткие информационные подсказки.

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

При вводе подсказывает и предлагает варианты с автозавершением фразы. Можно выбирать в выпадающем списке.

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

Можно вызывать подсказку и в ручном режиме. Для этого достаточно нажать комбинацию CTRL + Spacebar.

Multi-cursor

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

Line Actions

Line Actions — Быстрые манипуляции со строками кода. Позволяет копировать строку или перемещать её в документе. Для копирования строки комбинация CTRL +

ALT + (down или up) – копирует и вставляет сверху или снизу соотвественно.

ALT + (down или up) – перемещает строку на которой находится курсор на 1 строку выше или ниже соответственно.

CTRL + SHIFT + K – удаляет следующию строку, идущую после строки, на которой находится курсор.

Rename Refactoring

Rename Refactoring — быстрое переименование символа, функции или переменной во всём документе.

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

Это изменение применится ко всем упоминаниям в документе.

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

Formatting

Formatting — это автоматическое исправление вложенности тегов и стилей в вашем коде. Его еще называют автоформатирование, потому что не ручками, а при помощи пары кликов. Исправляет вложенность строк в коде согласно настроек форматирования. Комбинация Shift + Alt + F

Code Folding

Code Folding -быстрое сворачивание и разворачивание блока кода. Для того что бы быстро свернуть лишний блок кода поставьте курсор на открывающем теге или скобке и нажмите комбинацию клавишь CTRL + Shift + [ или CTRL + Shift + ] (развернуть или свернуть блок кода).

Быстрый просмотр ошибок и предупреждений (Errors and Warnings)

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

Snippets

Snippets — готовые фрагменты кода, которые вы часто используете в своих проектах. Позволяет сздавать переиспользуемые блоки кода. Работает совместно с опцией автодополнения IntelliSense. Суть простая. У вас есть возможность создаиня собственной библиотеки сниппетов.

Попробуй это после установки

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

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

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

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

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

Как только начнёшь писать код в Visual Studio Code возьми за правило по максимуму использовать горячие клавиши. Поменьше тереби мышку. Это пригодится тебе в будущем. Если не хочешь постоянно лазить в памятку по горячим клавишам в настройках прогарммы, можешь распечатать для себя гоячие клавиши на принтере. Их тоже можно менять и создавть свои варианты горячих клавишь.

Работать с системами контроля версий без консоли и сторонних программ — это очень удобная фича/фишка. Мы конечно же будем работать и в консоли, и в приложении GitHub desktop и функционал редактора пощупаем. Но начать работу ты можешь именно со встроенного в редактор функционала.

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

Что требуется для начала работы?

ты не поверишь, но всё очень просто. Для начала работы в редакторе тебе нужно сделать три простых шага:

  1. Скачать
  2. Установить
  3. Настроить

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

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

С программой — аналогично. Но лучше это показывать на примере. Мы обязательно вернёмся к этому позже.

Что включает в себя настройка редактора Visual Studio Code

  1. Настройка базовых параметров
  2. Настройка оформления
  3. Установка расширений

В следующем уроке мы детально и по шагам разберём все эти этапы. Уделив основное внимание расширениям, которые установим и настроем в

Visual Studio Code.

Дополнительные материалы
Тут пока что пусто...
Тут пока что пусто...
0% Complete