Что изучать чтобы стать веб-программистом? Как стать веб программистом?

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

Мой внутренний еврей говорил что такой опыт можно как-то упаковать и продать) И я долго не решался...

Но когда я только учился, за эту информацию я отдал бы все что угодно, все что у меня было на тот момент

Если ты только начинаешь, это сэкономит тебе МЕСЯЦЫ обучения

Про то как стать программистом я уже писал в этом блоге, но там общие советы, а что конкретно учить?

и так, дружище, ты решил стать веб-прогером - верстальщиком, frontend, backend или fullstack

да-а, тут не все так просто, программисты делятся по навыкам:

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

Верстальщик (верстак)

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

верстка - это то, что ты видишь на сайте, текст, цифры, разного цвета фон, картинки, меню, это все верстка

Backend (бакенд, бек)

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

объясню на примере вк

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

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

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

еще пример, ты зашел в настройки вк, отключил уведомление о лайкахкогда ты нажал кнопку отключить уведомления, на сервер поступил запрос, этот запрос обрабатывает код, который как-раз написал бакенд программист, код понимает что именно ТЫ а не 10365 пользователь хочешь отключить уведомления, и вносит это изменение в базу данных, что мол Алексей Алексеев не хочет получать уведомления, а потом, код, который эти уведомления присылает, проверяет, хочешь ли ты получать уведомления или нет

мозг пухнет? ничего, это было самое сложное для понимания

Frontend (фронтенд, фронт, front)

это верстальщик который умеет делать сложную логику на сайте, например калькулятор, фильтр характеристик и тд

опять же на примере вк

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

но он сам-то не отправится) во-от, понимаешь? обработку твоего клика, как-раз делает frontend программист

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

еще простой пример: подгрузка постов при прокрутке - за это тоже отвечает frontend

важный момент, смотри, frontend как правило не работает один, он работает всегда в связке с backend разработчиком

к примеру фронт отправляет запрос...а бэк его принимает

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

это как поставка заготовок в мак, фронтенд кухня, она запрашивает у системы поставки замороженное мясо, в пластиковых контейнерах размером 2x1 метресли привезут контейнеры больше, то они просто не поместятся на полки склада, если привезут не замороженное, то мясо испортится

короче, нужно договорится, есть специальные технические правила под это

важно понимать отличие верстальщика от фронтендераверстальщик - это только визуальная составляющаяфронтендер - это визуал + логика

Fullstack / Фуллстак

фулстак - это джедай, который совмещает в себе верстальщика, фронта и бека

соответственно зарабатывает он как все они вместе взятые, шучу шучу)

Теперь о том, что нужно изучать

основы:html, css, bootstrap, js, jquery

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

Верстальщик

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

также нужно примерно на среднем уровне знать photoshop и figma, и желательно illustrator для векторной графики

зачем? верстальщик верстает из дизайна, соответственно нужно уметь вытащить картинки из дизайна, померить расстояния, посмотреть шрифты и тп

важно научится делать кроссбраузерную верстку - в разных браузерах сайт должен отображаться одинаково, но советую не заморачиватся по поводу internet explorer и сафари ниже 10, и старых браузеров

"мы делаем сайты людей, а не для технологий, и в большинстве своем люди пользуются последними версиями" © Анатолий Ахматов / цитаты великих и скромных людей

и еще нужно изучить адаптивность, т.е. научится адаптировать сайт под разную ширину экранов

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

Frontend / Фронтенд

фронт - это продвинутый верстальщик, так что ты должен для начала стать мастером верстки

второй шаг, это JavaScript фреймворк

сложный фронт не пишут на jquery или голом js, есть более продвинутые инструменты

фреймворков существует много, и придется выбиратьсоветую делать это опираясь на популярность, и прогрессивность

чисто по опыту, я бы выбрал react, он сейчас самый популярный, на нем написан фронтенд инстаграмма, дропбокса и много других сервисов...

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

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

Backend / Бакенд

вот тут не все однозначно, изучив основы вы остановитесь на выборе, какой язык учить дальше

• php
• node.js
• python

какой из них?

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

для работы по найму, я думаю выбор любого из языков будет равноценен

для фриланса, php в первую очередь, так как по соотношению заказов на php к остальным серверным языкам, я думаю это где-то 100 к 1

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

• для php - это laravel
• для node.js - это express
• для python - это django

если ты выбрал php, то перед laravel советую изучить систему управления сайтом wordpressона очень распространена, и на ней делаются много разных по сложности сайтов

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

скорее всего ее тебе хватит, если ты не уйдешь в большие нагрузки - highload, но если все-таки соберешься) советую изучить postgress, это продвинутая база, которая кстати, довольно легко учится после mysql

Общие советы:

часто у многих начинающих веб-программистов возникает проблема, как придумать класс для блока, в этом случае советую тебе изучить методологию БЭМ вообще именование классов - это искусство, которое приходит с опытом, но чтобы не писать говнокод, для начала тебе хватит БЭМ

↑ Это прямо самая база, минимальная точка входа в основные ответвления веб-программирования

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

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

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

например бэку часто пригождается умение настроить nginx или apache, и настроить vds сервер, а фронту - сжать js, css картинки чтобы уменьшить их вес

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

для копипастеров - не пиздить, контент застрахован, только репосты) 2020 © Анатолий Ахматов

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

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