Как научиться делать сайты.
Если вы уже имеете представление о том, как делаются сайты, то можете мой пост не читать, вы вряд ли узнаете из него что-нибудь новое. Остальным же приятного чтения.
Существует множество языков программирования, но сегодня я не буду рассматривать их все. Расскажу лишь про несколько языков.
Когда создают веб приложение (сайт), то там есть Frontend и Backend. Сейчас разберёмся с вами, что это такое.
Front по английски переводится как передняя сторона, Back как задняя сторона.
Frontend - это передняя часть сайта, то есть та часть, которую вы видите, нажимаете ссылочки, кнопочки, анимашечки и так далее. Всё это Frontend.
Backend же, это то, что работает на сервере, где расположены файлы с сайтом. В нём используются такие языки программирования как PHP, Python и нескольких других.
Если сравнивать всё это рестораном, то основной зал, а также всё, что вы видите - это Frontend, а кухня и комната для персонала - Backend.
В случае с сайтами, Frontend'ом выступает браузер и соответственно всё, что работает в браузере это называется Frontend'ом. В браузере у вас работают 3 компонента:
Вам наверняка непонятно, что это такое и как связано. Давайте разберёмся.
HTML это HyperText Markup Language (язык гипертекстовой разметки). Это не язык программирования, это язык разметки. В нём нет циклов, условий и других составляющих, которые должны быть в языке программирования. Он позволяет делать разметку страницы таким образом, чтобы создавать на ней разные блоки. Указывать где будет находиться блок заголовков, меню, ссылки, блок фотографий и так далее. Всё это размечается на основе HTML.
За визуальное же оформление этой разметки отвечает язык CSS. Он также не является языком программирования, это инструмент визуальной настройки. CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей). Это язык стилей для визуального оформления всех блоков на сайте.
Таким образом HTML + CSS позволяют создать визуально приятно выглядящий сайт. Но при этом HTML и CSS не являются языками программирования.
Третий компонент Frontend'а это JavaScript. Вот это уже полноценный язык программирования, который работает в браузере. То есть, он изначально был создан для того, чтобы работать в браузере. Но потом программисты подумали, а почему бы им не попробовать запустить JavaScript ещё и не сервере используя его в Backend'е? Поэтому сейчас можно писать на этом языке программирования как Frontend, так и Backend.
Но сейчас я вам рассказываю о JS именно в контексте выполнения этого языка программирования внутри браузера.
Покажу всё на ОЧЕНЬ простых примерах. Просто повторяйте за мной и у вас появится начальное понимание как всё это устроено и работает.
Создайте каталог (папку) с любым названием. Я назову её Сайт:
Зайдите в этот каталог и создайте текстовый файл с расширением html:
Откройте файл html с помощью обычного блокнота и пропишите там всё как у меня:
Сохраните полученный текст и откройте текстовый файл html с помощью браузера, нажмите на него правой кнопкой мышки, а далее открыть с помощью (выберите браузер в котором вы хотите его открыть).
Как видите у вас отобразились надписи на сайте.
Теперь вернитесь в каталог с сайтом и создайте ещё один текстовый файл с расширением css:
Сохраните его и снова откройте html файл, подключите туда ваши стили:
Сохраните html файл и откройте с помощью браузера. Как видите, результат отобразился.
Теперь создайте в папке с сайтом ещё один текстовый файл с расширением js:
Пропишите в нём следующее и сохраните:
Зайдите в html и подключите файл со скриптом туда:
Сохраните. Теперь у вас есть 3 файла сайта:
Откройте файл html в браузере. Увидели результат?
Надеюсь теперь вам стало более понятно.
Большинство людей не понимают, с чего вообще начинать и какие использовать источники обучения. Это на самом деле, один из самых распространённых вопросов у меня в личных сообщениях. Иногда доходит до того, что я отвечаю одному человеку что-то на этот вопрос, затем через несколько часов мне пишет уже другой человек и спрашивает абсолютно тоже самое. Поэтому я решила написать пост на эту тему.
Я напишу сейчас путь обучения для двух типов людей:
- Для особо одарённых.
- Для тех, кто не понимает программирование, но имеет огромнейшее желание ему научиться.
Первый путь "Для особо одарённых".
Вы как можно быстрее хотите начать программировать, писать сайты и зарабатывать 1000$ в день, а как это будет работать и как сделать сайт действительно хорошим для вас не важно, главное быстрее заработать. Поэтому читайте очень внимательно и поймёте что вам нужно для этого сделать.
Что если я скажу, что у вас есть все шансы действительно начать зарабатывать 1000$ в день? Для этого я вам дам несколько мощных советов как этого добиться. Во-первых, вам нужно открыть источник информации по программированию в браузере. Далее вам нужно открыть в соседних вкладках vk, facebook, instagram, tiktok. Ещё можно открыть несколько вкладок с новостями. Когда вы читаете информацию по программированию и вам становится скучно, то вы просто переключаетесь на эти вкладочки и начинаете там листать информацию. Во-вторых, обязательно нужно запустить на компьютере и телефоне все мессенджеры, которые у вас есть, ватсап, телеграм, вайбер, а далее включить уведомления, и когда вам кто-то пишет, то вы должны мгновенно туда зайти, взять телефон в руки или открыть на компьютере, мгновенно посмотреть что от вас хотят, а далее мгновенно ответить. Это нереально важно, потому что коммуникация с людьми - это гораздо важнее, чем ваши личные цели и саморазвитие. В-третьих, включите звук на телефоне на максимальную громкость, положите его рядом экраном наверх, чтобы когда вам кто-то позвонил, то вы мгновенно ответили и поговорили с человеком.
Ещё один важный момент касаемо кто находится вокруг вас. Вот вы сели изучать программирование, и крайне желательно, чтобы вокруг вас в этот момент были люди, которые будут вас почаще дёргать, отвлекать, подходить, что-то вас спрашивать, просить вашей помощи, тыкать вас в бок и так далее. Очень важно, чтобы у вас не было возможности сосредоточится, потому что если вы вдруг получите возможность сосредоточится, то вы сможете извлечь пользу из вашего обучения, что-то запомнить и понять, новые навыки получить.
Второй путь "Для тех, кто не понимает программирование, но имеет огромнейшее желание ему научиться".
Вы подарите время обучения себе. Не ленте новостей, засоряющий ваш мозг. Не социальным сетям, пожирающим ваше время. Не звонящим людям, которым что-то от вас нужно. Не спаму в месенджерах, который вам хочет что-то продать. Подарите время вашего обучения себе, потому что это важнее. Отложите всё лишнее и попросите тех людей, которые вас окружают, не отвлекать вас, пока вы учитесь. Выключите телефон.
Отлично. Теперь перейду к сути моего поста.
Начинать изучать веб разработку нужно с английского языка. Так для всех, кто серьёзно настроен и не хочет себя ни в чём ограничивать, потому что количество информации на русском языке очень сильно ограничено. Из русскоязычных источников я не смотрю и не читаю вообще ничего, потому что в русскоязычном сегменте 95% материала является просто напросто переводом англоязычного материала. Сейчас люди стараются переводить на русский язык много разных интересных источников, информации разумеется намного больше, чем было несколько лет назад, но мне кажется довольно очевидным, что в англоязычном интернете информации всегда будет больше и она будет самой новой.
Вы должны понимать, что при помощи англоязычных источников вы сможете изучить что-то на более глубоком уровне. Большее количество различных источников также сможет существенно упростить вам изучение чего-то совершенно нового для вас. Ни для кого не секрет, что разные авторы могут объяснять материал более понятно или менее понятно. И когда вам есть из чего выбирать, то вы сможете обучаться быстрее. Поэтому для вас будет большим плюсом, если вы подтяните свой английский до того уровня, чтобы вы могли читать техническую литературу. Сначала вы будете смотреть очень много слов в словаре и гугл переводчике, но это совершенно нормально. Со временем, как вы будете прочитывать больше книг и статей, вы всё реже будете пользоваться переводчиками.
Когда у меня спрашивают, какую литературу я могу посоветовать, то я первым делом называю издательство O'really. Об этом издательстве я узнала ещё очень давно. На тот момент я прочитала какую-то книжку у них по популярной нейропсихологии и ещё несколько книг о программировании. Тогда меня в крайнее степени восхитило насколько чётко все авторы излагали свои мысли. Дело в том, что я пробовала читать разные книжки разных издательств, и тогда я отметила для себя, что очень много авторов, которые публиковались в других изданиях, очень часто допускали какие-то неточности в определениях, и они как будто бы вообще совершенно безразлично относились к словам, которые используют. Они могли называть одни и те же вещи разными словами. O'really же публикует только людей, которые на самом деле знают о чём они пишут, поэтому когда вы открываете книжку этого издательства, то вы открываете хорошую книжку. Тем не менее, я должна предупредить что у O'really есть серия Head First, это такие широкие книжки с людьми на обложке, которые рассчитаны на новичков. Я пробовала читать эти книжки по темам, о которых совершенно ничего тогда не знала, но мне они не очень понравились, потому что мне показалось что очень многие вещи в этих книжках слишком долго размусоливаются. Я прекрасно понимаю, что это такой формат, но мне лично кажется, что степень размусоливания в этих книжках можно было немного понизить. Это конечно же моё личное мнение и вы можете попробовать почитать книжки из этой серии, возможно они вам понравятся, но я их посоветовать не могу. Поэтому я советую читать всем книжки с животными на обложке.
Многие ещё задают мне вопрос о том, что лучше использовать для обучения, книжки, статьи или видео. Одни люди будут говорить, что видеоуроки это фигня, потому что вы не можете пропустить какой-то кусок или им сложно вернуться на какое-то место в уроке. Другие же будут говорить, что текст это не так удобно как видео, потому что в видео вы видите в точности то, что делает человек и можете повторить это по шагам. Я лично думаю, что удобнее всего использовать то и другое сразу. По видео удобнее всего изучать то, о чём вы имеете очень слабое представление, а книжки читать тогда, когда у вас уже не возникает вопроса как именно применять всё то, что описывается в книге. Например, когда вы уже изучили синтаксис JavaScript по видео, то вы можете взять книжку по паттернам проектирования или книжку по микрооптимизациям. После этого всё, что там описывается, вам будет понятно, потому что у вас уже есть базовые знания. Тоже самое касается различных справочников и документаций. Если вы работаете с какой-то библиотекой и вам нужно посмотреть какие аргументы принимает функция, то было бы странно пытаться найти такую информацию в видеоуроках или книгах, когда можно просто пойти на официальный сайт библиотеки и воспользоваться поиском по документации.
Ещё один формат получения знаний это подкасты, их прелесть в том, что их можно использовать не отвлекаясь от каких-то своих занятий, потому что они не занимают ваш зрительный канал, вы в это время можете например быть на пробежке. У всех типов источников есть свои плюсы. Просто напросто нужно использовать их по назначению. Что же касается выбора уже конкретных источников, то есть конкретных книг, видеоуроков, статей, то нет никакого большого смысла просить меня скинуть интересные сайты по веб разработке, потому что на мой взгляд, если человек хочет стать по настоящему крутым специалистом, то он должен научиться сам выбирать источники. Это всё можно найти бесплатно в гугле + ютубе.
Единственный способ научиться разбираться в источниках - это читать, смотреть и слушать всё подряд. На мой взгляд, если человек читает объективно плохую книгу и он не способен оценить, что эта книга плохая, то эта книга ему подходит. Просто когда этот человек возьмёт другую книгу, уже не такую плохую, то он уже сможет понять, что та, первая книга, была плохой. Чем больше книг прочитает этот человек, то тем лучше он будет отличать хорошие книги от плохих. Это касается не только книг, но и совершенно любых источников. Именно так можно получить опыт и научиться учиться. Я знаю, что не все с этим согласны, не все хотят тратить много времени, но способность обучаться это наиважнейший навык в современном мире. И единственный проверенный способ прокачки этого умения - это опыт. Поэтому не нужно бояться делать ошибки. Если вы первое время будете делать что-то неправильно, то от этого не произойдёт ничего особо ужасного. Просто напросто по мере того, как вы будете изучать что-то одно по многим источникам, вы всё лучше и лучше будете видеть общую картину. И эта самая общая картина - это то, что на мой взгляд можно назвать объективной истиной. Всё дело в том, что в любой области есть как вещи неоспоримо правильные для всех, по которым можно спокойно учиться, так и вещи спорные, по поводу которых даже самые крутые специалисты в области не могут договориться. И поэтому для того, чтобы сделать правильный выбор, очень важно видеть эту самую общую картину. Когда я пишу правильный выбор, то я имею ввиду не объективно правильный выбор, потому что во многих вопросах его просто не существует. Я имею ввиду правильный выбор конкретно для вас и ваших задач. Вас не должно особо сильно волновать, что пишут те или иные люди, вы должны выбирать технологии, языки программирования, фреймворки, которые подходят именно вам и которые решают ваши проблемы.
Теперь я добавлю немного конкретики и напишу о том, что конкретно нужно делать тем, кто хочет научиться создавать веб приложения. Я буду считать что вас интересует весь процесс от и до, то есть создание сайта с нуля. Поэтому первое, что вам будет нужно при создании сайта - это конечно же макет. Веб дизайн и разработка это две связанные между собой области. Несколько лет назад они даже вообще считались чем-то единым целым. Каких-то постов по теме дизайна вы вряд ли от меня увидите, потому что мне будет просто слишком скучно их писать, но вообще в целом хороший дизайн сайтов я очень люблю и ценю. И если бы мне нужно было сделать какой-то сайт, то дизайну я уделила бы очень много времени. Для того, чтобы научиться рисовать макеты, как бы это банально не звучало, вам нужно просто много их рисовать. Так же вам очень сильно поможет, если вы будете смотреть много чужих работ. Когда вы будете это делать, то обращайте внимание на все мелкие детали, какие используются цвета, градиенты, шрифты, отступы и так далее. Со временем вы сами начнёте чувствовать, что выглядит красиво, а что нет. Но в самом начале вы можете просто брать и срисовывать чужие элементы. Это заставит вас задуматься о том, как строятся эти самые элементы и из чего они состоят. Через какое-то время красивые дизайны перестанут быть для вас чем-то мистическим, потому что вы будете знать как создать нечто похожее. Что же касается инструментов, то практически все используют фотошоп, он делает совершенно всё, что вам может понадобиться.
После того, как вы нарисовали макет, то следующим шагом нужно будет сверстать этот макет, то есть создать по нему HTML шаблон. Если сайт статический, то - что вы получите после вёрстки, это и будет являться вашим сайтом, ведь амый простейший сайт - это не более чем набор HTML страничек. Статические сайты сейчас большая редкость, скорее всего странички у вас будут генерироваться динамически при помощи серверной логики, которую вы напишите сами, например с помощью фреймворков Python, либо вы будете использовать уже готовую в виде какой-нибудь системы управления контектом (CMS) по типу WordPress на PHP. Без этой самой серверной логики были бы невозможны никакие онлайн сервисы к которым вы там привыкли и которые вы используете каждый день. Что касается HTML, то это довольно простой язык. Выучить этот язык самостоятельно за пару месяцев не является особой проблемой. Все книжки по HTML практически абсолютно одинаковы и я слабо представляю себе чему там можно научиться неправильно. Поэтому можете брать совершенно любую книгу по этому языку и читать. Если вам попадётся какая-то не очень новая книжка, то вы будете писать много чего лишнего и ваш код будет более большим, но основной синтаксис языка вы всё равно изучите. Как только вы освоите самые основы HTML, то вы можете сразу приступать к изучению CSS, потому что изучать эти 2 языка по отдельности сейчас уже нет никакого смысла. Некоторые люди спрашивают у меня какие книжки я могу посоветовать по CSS. По CSS я могу посоветовать абсолютно любую книжку, как и по HTML. Вы можете выбирать её исключительно по обложке, потому что я не думаю, что они сильно отличаются между собой в плане основ. Что же касается каких-то интересных тем, например, какие есть новые свойства, как позиционировать элементы и так далее, то об этих вещах в книгах особо не пишут. О них вам нужно будет читать из разных статей в интернете. Что касается уже конкретно вёрстки страниц при помощи CSS, то здесь я не обману вас, если скажу, что вёрстка это не такая уж и тривиальная задача. В вёрстке есть куча всяких тонкостей и вообще в целом, для того, чтобы вы могли взглянуть на макет и сразу же представить себе иерархию элементов, как вы будете верстать, при помощи каких свойств - для всего этого нужно много опыта.
Есть ещё один вопрос, которые волнует всех новичков, которые начинают изучать HTML и CSS. Вопрос заключается в том, что в HTML и CSS много разных тегов, свойств и много значений у этих свойств. Нужно ли это всё будет запоминать? Заучивать наизусть разумеется ничего не нужно. В начале, когда вы только изучаете HTML и CSS, то вы будете смотреть что делает каждое свойство и каждое значение этих свойств. Таким образом, вы примерно запоминаете, что вообще возможно делать при помощи них и значения начнут откладываться автоматически у вас в голове. Дальше вы просто находите любой справочники по языкам и всё. Что вы не можете вспомнить, вы можете подсматривать в этих справочниках. Ну и дальше, все свойства, которые вы используете, если вы не страдаете амнезией, запомнятся сами по себе. Тоже самое касается абсолютно всех других языков, библиотек, фрейморков и так далее. Всё, что вы часто используете, запомнится само по себе. Всё, что вы редко используете, вы будете подсматривать в справочниках. В этом нет ничего плохого и все это делают.
Также существуют ещё CSS фреймворки специально для тех случаев, когда вам нужно создать очень быстро какой-то интерфейс и вас не очень волнует какой там будет дизайн, лишь бы он был не очень страшным. Например, когда вы создаёте прототип какого-то веб приложения или админку сайта. Использовать CSS фреймворки для публичных страниц своего сайта возможно не самая лучшая идея, потому что все популярные фреймворки своим дизайном и так уже всем надоели. Ну и в том, чтобы использовать какие-то элементы фреймворков в качестве основы для своим элементов, я тоже не вижу никакого большого смысла, потому что в том чтобы сверстать свои кнопки или что вам там ещё может понадобиться, нет совершенно ничего сложного для человека, который знает CSS. Из фреймворков бывает удобно использовать CSS сетки, потому что это может радикально упростить вёрстку. Когда вы хорошо освоите CSS и начнёте верстать что-то не очень тривиальное, то вам может перестать хватать гибкости языка CSS и вы захотите освоить какой-нибудь CSS препроцессор. Препроцессоры убирают из синтаксиса CSS весь мусор и радикально увеличивают степень абстракции при помощи переменных, управляющих конструкций и прочих прекрасностей.
После того, как вы освоите HTML и CSS, следующим шагом вам нужно будет освоить JavaScript. Даже если в будущем вы собираетесь заниматься только Backend разработкой на Python, то базовые знания JavaScript вам всё равно будут необходимы. Если же вы собираетесь заниматься только Frontend'ом, то JavaScript вам нужно знать на очень хорошем уровне. Помимо самого языка, вам нужно также знать очень хорошо всю инфраструктуру, которая существует вокруг него в виде различных библиотек, фреймворков, браузерных интерфейсов и так далее. На освоение всего этого у вас уйдёт от 1 года и более. Но вам стоит помнить, что создание полноценных веб приложений предполагает вашу способность написать сервер, который будет общаться с базой данных.
Вы освоили HTML, CSS, JavaScript. В результате этого вы уже научились создавать шаблоны. Допустим вы создали какой-нибудь блог. Следующим шагом будет натянуть этот шаблон на какую-нибудь систему управления содержимым. Это нужно для того, чтобы вы могли добавлять посты при помощи удобного веб интерфейса и для того, чтобы весь контент хранился в базе данных, а вам не приходилось держать кучу HTML страниц для каждого отдельного поста в блоге. Самый распространённые серверный язык это PHP.
Вообще PHP очень часто становится причиной хейта. У меня нет сейчас особого желания обсуждать эту тему, но так или иначе я не могу посоветовать новичку в качестве своего первого серверного языка изучать что-то кроме PHP. PHP проще всего хостить, у PHP самое большое комьюнити и на PHP написаны все самые популярные CMS. Что касается CMS, то выбор разумеется за вами. Если вы новичок, то освойте самым первым делом WordPress, это самая простая, прозрачная и адекватная CMS из всех, что я видела. WordPress это очень популярная CMS, по которой существует очень много разных уроков и статей, поэтому никаких больших затруднений с его освоением у вас возникнуть не должно, но с тем условием, что вы знаете английский язык. Но какое-то время у вас это всё равно займёт. На то, чтобы хорошо его освоить, я думаю вы можете потратить вплоть до нескольких месяцев. WordPress формально является блоговой CMS, но тем не менее на нём создают очень много разных типов сайтов. Если вы научитесь писать для него любые темы и плагины, то я думаю более 90% типов сайтов вы сможете при помощи него делать.
В зависимости от того, какие перед вам будут стоять задачи, вам возможно вообще никогда не придётся использовать что-то кроме WordPress'а. Если вы планируете делать на заказ сайты с базовым функционалом, то WordPress точно будет хорошим выбором. Для того, чтобы писать темы и плагины, как вы уже наверное поняли, нужно знать PHP. PHP начинался как довольно простой HTML препроцессор, а сейчас превратился в довольно мощный язык, который не проще, но и не сложнее большинства других популярных скриптовых языков, включая JavaScript. На то, чтобы освоить PHP на нормальном уровне у вас также может уйти не менее года, или менее, если вам это будет очень сильно нравиться. Параллельно с PHP вы также будете изучать систему управления базами данных, то есть, вам нужно будет изучить язык запросов SQL.
Если возможности CMS вам не будет хватать и вы будете чувствовать себя ограниченными, то вы можете либо писать всё самостоятельно с нуля на PHP, либо использовать какой-нибудь PHP фреймворк, либо же использовать другой язык, например Python или JavaScript, а не PHP.
Если вы остановите свой выбор на PHP, то на ваш выбор будет очень много различных фреймворков. Что касается языка PHP вообще, если на минуту забыть о его бешеной популярности и распространённости, то мне лично этот язык не очень нравится из-за той причины, что он мне очень сильно напоминает язык C. В самом языке C разумеется нет ничего плохого, но скриптовые языки по-моему могут выглядеть не так архаично и иметь более красивый и компактный синтаксис. И в этом очень легко убедиться, если посмотреть в сторону Ruby. Помимо PHP на сервере часто используют Ruby, Python, JavaScript и Java. Существуют люди, которые используют на сервере C++, но я не вижу в этом особо большого смысла. Но помните, что никакого правильного выбора серверного языка просто не существует и вы должны выбирать то, что больше всего нравится и подходит именно вам.
Также огромнейшим плюсом для вас будет освоить Linux и научиться самостоятельно поднимать на удалённом сервере или своём личном железе что вам захочется, ноды, базы данных, сайты и так далее. При этом ваша личная безопасность и безопасность вашей системы полностью переляжет на ваши плечи, но при этом вы получите столько свободы действий сколько вообще в принципе можно получить. После того, как вы попользуетесь Linux'ом пару месяцев, то вы уже очень хорошо освоите терминал и будете знать все необходимые основы для того, чтобы начать изучать серьёзное администрирование серверов. Таким образом вы получите общее представление о том, как создаются онлайн сервисы любой сложности.
На этом я свой пост буду заканчивать.
Если вы новичок, то я очень надеюсь, что вас не спугнул такой большой объём информации, который вам нужно будет выучить. Не стоит забывать, что для того, чтобы изучить всё с полного нуля, о чём я писала выше, может уйти много лет, особенно если вы не сидите за компьютером целыми днями и у вас огромного интереса.
Напоследок, если бы меня попросили назвать всего один сайт по которому можно научиться писать серьёзные и большие проекты, то я назвала бы github. В то время, как все образовательные ресурсы сосредоточены на том, чтобы объяснить вам какую-то одну вещь за раз, github позволяет вам увидеть общую картину, то есть все технологии и инструменты в работе. Чтение чужих исходников - это на самом деле крайне познавательное занятие.