Итак, мы начинаем с нуля, у нас нет знаний в веб-разработке, что же необходимо для того, чтобы создавать качественные сайты быстро и профессионально? Ниже будет перечень необходимых инструментов, знаний и технологий, а также их краткое описание.
Введение
Прежде чем мы начнём погружаться в мир веб-технологий, необходимо рассмотреть пошагово, что нужно знать, уметь, и какие источники нам в этом помогут.
Я провёл краткий обзор основных шагов обучения. С чего стоит начать, и как продвигаться дальше, чтобы чувствовать себя комфортно и уверенно.
Самое главное в разработке веб-сайтов - это постоянная практика. Поэтому при изучении теории я сразу начну применять её на практике, описывая свой опыт в этом блоге.
В итоге мы вместе напишем свой собственный сайт, который пройдёт все этапы разработки - вёрстка, программирование, тестирование (кроссбраузерность, кроссплатформенность, валидация кода), выгрузка на хостинг и поддержка.
Это будет наш экспериментальный проект, в котором мы будем постоянно что-то менять, обновлять, испытывать, тестировать. В общем, будет интересно.
Ниже будет небольшой обзор основных инструментов и технологий, которые должен знать каждый веб-разработчик в правильном порядке. Этот список со временем может дополняться. О каждом дополнении я буду оповещать и держать всех читателей блога в курсе!
Что такое интернет-сеть, и как она работает
Прежде чем создавать веб-сайт нужно знать, что такое веб-страница, где она размещена и как данные передаются по сети.
В этом блоге это будет первая техническая статья, поэтому мы рассмотрим самые основные моменты, не уходя в дебри. Сейчас основная цель - как можно быстрее перейти к созданию сайтов, но знать как работает интернет тоже необходимо, хотя бы на базовом уровне.
А что такое интернет-сеть и как она работает - будет описано в следующей статье!
Обзор и установка необходимого ПО для разработки сайтов
Текстовый редактор кода
Для создания веб-страниц нам понадобится текстовый редактор кода. Я сделаю краткий обзор по всем имеющимся редакторам, и более детальный обзор по самым основным и удобным редакторам кода (все настройки, плагины, лайфхаки и персонализация), но если вам будет интересно узнать про какие-то конкретные редакторы - пишите в комментариях - сделаем! А также проведу сравнение, и сделаю вывод, какой из них лучше подходит для выполнения той или иной задачи.
Графический редактор
Помимо редактора кода нам потребуется графический редактор. Он нужен для того, чтобы обрабатывать картинки, выгружать их из дизайн-макета и брать данные из макета при вёрстке сайта - такие как шрифты, отступы и т.д.
Графических редакторов для вёрстки сейчас достаточно. Есть платные и бесплатные. Мы рассмотрим самые удобные графические редакторы и проведём детальный обзор.
Браузеры
Ну и как же без браузеров? Ведь это браузеры интерпретируют написанный нами код в веб-страницу. Но, как правило, браузеров довольно много, и у каждого есть свои особенности, которые необходимо учитывать на этапе вёрстки сайта. Поэтому каждый веб-разработчик должен иметь у себя на компьютере браузеры разных производителей. А какие бывают браузеры, чем они отличаются и на что обратить внимание мы рассмотрим в соответствующей статье.
HTML, CSS и JavaScript
HTML, CSS и JavaScript - это основы, из которых состоит любой веб-сайт в интернет-сети.
HTML - Это язык разметки гипертекста (текст, ссылки, аудио и видео элементы), то есть это основной каркас сайта.
CSS - это каскадные таблицы стилей (цвет текста, цвет фона, изображения, позиционирование элементов сайта и многое другое).
Если HTML - это каркас веб-страницы, то CSS является красивой, цветной обёрткой для сайта, что делает из простого HTML-документа - красивый, анимированный журнал. CSS довольно масштабный язык и включает в себя много разных модулей, которые мы постепенно будем постигать.
JavaScript - это язык программирования, который позволяет оживить страницу (создать динамически обновляемый контент, анимировать изображения, управлять мультимедиа и многое другое). Исходя из наших метафор - JavaScript является своего рода двигателем, который может оживить наш красивый журнал. Вообще, с помощью нескольких строк Джаваскрипта можно создавать удивительные вещи.
Препроцессоры и шаблонизаторы
Время неумолимо движется вперед, и в 2022 году уже мало кто использует чистый HTML и CSS.
Сайты работают на HTML и CSS, но разработка веб-страниц ведется с помощью шаблонизаторов (например, Pug, Twig и др.) и препроцессоров (например sass, less и др.).
Шаблонизаторы имеют свой собственный синтаксис, он гораздо удобнее чем синтаксис HTML файла, например, не имеет закрывающих тэгов и не имеет скобок.
Шаблонизаторы позволяют писать код не в HTML файле, а в файле шаблонизатора. После чего файл шаблонизатора компилируется в HTML файл, который заливается на сервер
Шаблонизаторы позволяют упростить жизнь веб-разработчика, потому что его код лучше читается человеком, а так же, шаблонизаторы, позволяют выделять повторяющиеся блоки сайта в компоненты и использовать их на других веб-страницах.
Если сейчас что-то непонятно - не волнуйтесь! С шаблонизаторами мы подробно разберемся в другой статье, сейчас просто небольшой обзор, чтобы иметь общее представление о разработке веб-страниц.
Подробнее с шаблонизаторами мы ознакомимся позже, а также узнаем какие они бывают и чем отличаются.
Препроцессоры работают с CSS кодом, ускоряют верстку, имеют более удобный синтаксис и упрощают дальнейшую поддержку сайта. Так же как и шаблонизаторы - препроцессоры позволяют писать код в файле со своим расширением (то есть, вместо CSS мы создаем файл с расширением sass, scss, less и т.д., в зависимости от препроцессора).
Также препроцессоры имеют много удобных свойств: поддержку переменных, встраивание отдельных CSS файлов в общую структуру, что позволяет разбить код на модули, и многое другое.
Нет смысла в этой статье перечислять все плюсы и минусы препроцессоров, просто нужно понять, что работа с препроцессорами и шаблонизаторами во многом ускоряет верстку, облегчает поддержку сайта и экономит время веб-разработчика.
Таск-раннеры, линтеры и бандлеры
Программист всегда найдёт решение для упрощения работы, поскольку всегда есть возможность написать себе программу, которая будет выполнять всю рутину за него (например, оптимизация изображений, сжатие и минификация файлов, подключение шрифтов, компиляция файлов препроцессора и шаблонизатора, и многое другое).
Таск-менеджеры способны не только упростить ход работы, но и значительно сократить время работы, поэтому знать их просто необходимо.
Я проведу краткий обзор всех Таск-менеджеров и сборщиков проектов, выберу тот, который необходим для решения нужной задачи, и подробно рассмотрю и объясню как работать с этими монстрами.
Система управлениями проектов GitHub
Для того, чтобы управлять проектами, хранить код, и чтобы была возможность "откатиться" до нужной версии - нужно уметь работать с GitHub.
GitHub - это система контроля версий, которая позволяет обмениваться кодом и работать в команде, а также даёт возможность откатиться назад до нужной версии. Очень удобный веб-сервис, с помощью которого можно смело экспериментировать с кодом и не бояться, что что-то сломается, поскольку всегда можно вернуться к исходному варианту.
Подробный обзор будет в соответствующей статье.
CSS методологии
На данном этапе стоит научиться правильно писать код, разбивая его на компоненты, соблюдая модульность и возможность переиспользования блоков. В этом нам и помогут CSS методологии.
Существует несколько основных методологий - БЭМ, OOCSS, SMACSS и т.д.
С методологиями мы разберемся в соответствующих статьях, главное понять, что методологий не мало и каждая из них хороша по своему. Мы рассмотрим самые актуальные методологии в наше время и подберём методологию под свои нужды.
Фреймворки и библиотеки
Сегодня сложно обойтись без готовых решений, которые упрощают жизнь разработчика.
Фреймворк - это уже готовый код, который можно дополнять и вносить в него изменения. Некий каркас или база, которая будет служить вам как опора, чтобы не начинать писать код с нуля. Конечно, фреймворки могут ограничивать и сковывать разработчика, но их много и каждый фреймворк служит для решения своей задачи.
Библиотека существенно отличается от фреймворка. Библиотека никак не влияет на архитектуру всего проекта. Она не вмешивается в основной поток программы. Её методы, в отличии от фреймворка, можно вызвать тогда когда они нужны, в то время как фреймворк является основным каркасом проекта.
Существует множество CSS фреймворков, JS фреймворков и JS библиотек. Мы рассмотрим актуальные фреймворки и библиотеки, научимся с ними работать и применять в разных проектах.
Итоги
Статья получилась не маленькая для краткого обзора и здесь перечислены ещё не все моменты. Подробнее мы будем знакомиться с миром веб-разработки дальше. Шаг за шагом, постепенно и внимательно. С каждым инструментом мы будем знакомиться подробно закрепляя всё на практике. Мы сделаем не один проект, и всё это я буду описывать подробно в данном блоге.
Вот такой план я собрал на сегодняшний день. Это ещё не всё, что предстоит изучить. На этапах обучения будет видно в какую сторону лучше развиваться. Это просто небольшой обзор на ближайшее будущее.
Возможно в процессе изучения нового инструмента, фреймворка или библиотеки откроются новые технологии для изучения. Поэтому эта статья в будущем будет дополняться. При изменениях или дополнениях все читатели будут оповещены.
Когда мы узнаем всё из этой статьи - я составлю следующий план развития веб-разработчика и мы пойдем дальше!