Дмитрий Понькин

Попробуйте программировать лифты ;) https://play.elevatorsaga.com/

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

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

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

Если ты знаешь команды JS, можешь рассказать о прототипном наследовании, замыканиях и пр., но не знаешь как работает DOM, Event loop, каррирование и пр. то как бы нет, ты не знаешь языка в должной мере.

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

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

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

Этот макет из html academy
А у них есть курс по свг и как его рисовать через css
https://htmlacademy.ru/courses/130
Для таких простых элементов вроде изогнутой линии вполне можно заморочиться и сделать

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

.circle{
width: 100px;
height: 100px;
border: 4px solid blue;
border-radius: 50px;

}

Волну проще всего картинкой, но если есть какието указания не использовать картинки то SVG

askd.rocks/pres/css/# Слайды 30-35.

<div class="parallelogram-content">
	<p>I have a pen</p>
	<p>I have a code</p>
	 <p>Ugh!</p>
	<p>CodePen</p>
</div>

.parallelogram-content {
	/* no transform */
}
.parallelogram-content p {
	transform-origin: 0 0;
	transform: skew(30deg);
}

Нечто похожее: https://codepen.io/LysisLou/pen/oqKWwK

Html и css с практическими задачами лучше изучать на htmlacademy.ru. После того как освоился, качаешь бесплатные psd макеты и верстаешь, с адаптивом, какие-то сложные вещи, которые не можешь сверстать оставляешь пока.
Далее ищешь видео где верстают макет, обычно на первых секундах-минутах показывают макет и сразу можешь понять сможешь ли сверстать сам или нет, если понимаешь, что не сможешь, то смотришь как автор это сделает, узнаешь новое для себя.

По php. Читать большие и толстые книги пока бессмысленно, всё прочитанное будет вылетать из головы. Ставишь OpenServer, и сразу в бой:
1. Переменные, условия, циклы, массивы.
2. Пользовательские функции
3. Базовые функции по работе со строками и с массивами. Комбинация функций. (важно понять и запомнить что они умеют).
4. Post и Get запросы, получение Post и Get запросов из формы (тут сразу и html по формам подтянешь)
5. Базы данных, простые запросы к базе, выборки, запись в базу данных из формы.
6. Куки, сессии.
7. Чтение и запись в файлы.
8. Регулярные выражения.
9. ООП, базовые понятия. Самое сложное и непонятное для новичка. Непонятно потому, что не ясно зачем это нужно и почему это в дальнейшем упрощает работу, поэтому как-то мимо ушей все пролетает.

Если с английским хорошо, то codecademy.com.
Если плохо, то базовую теорию (и сразу практику) делать здесь.

Далее лучше сразу переходить на фреймворк (лучше Laravel). MVC в теории тоже понимается плохо потому, что пользу донести до понимания новичкам сложно, а при работе с фреймворками сам понимаешь почему это удобно.
Во время изучения фреймворка и ООП подтянешь.

Самое главное, по моему опыту обучения, это сразу делать практические задания по ходу изучения тем, постепенно, набивать руку. Задания лучше не пропускать (с мыслью "да тут легко, в теории я знаю как это сделать, пропущу, интересно что будет дальше").
Самое неправильное, это дойти в чтении чуть ли ни до ООП, а открыв редактор кода, понять, что не можешь написать простые условия или перебор массива.

То есть чтения меньше, практики больше. Это про голый PHP.

Про фреймворк, если английский позволяет то Laracasts: Laravel 5.4 from scratch. Если не позволяет, то ищешь в ютубе что-то вроде "простой блог на Laravel", смотришь и кодишь параллельно у себя.
Тут тоже самое, под попкорн просмотреть всю серию роликов от начала до созданного блога с админкой бесполезно. Обнаружится потом, что не можешь даже базовые вещи сделать. Нужно делать параллельно с автором, он делает какой-то функционал, смотришь, делаешь также, изначально может быть непонятно многое и зачем автор это делает, но со временем поймешь как это работает.

Далее пробуешь сделать что-то свое, какие-то "фичи", например авторизацию с помощью соц. сетей, лайки к постам и комментариям (с помощью ajax, тут можно jQuery изучить чуть-чуть), вложенность комментариев и т.д. Можешь другой себе проект придумать(представь себя стартапером).

Далее можно изучить системное администрирование чуть-чуть, покупаешь VPS недорогой, ставишь Nginx, MySQL, PHP-FPM и т.д. Пробуешь залить туда свой проект, так чтобы всё работало. Далее можешь попробовать прикрутить какой-нибудь поисковый движок (Sphinx, например). Изучение командной строки тоже на codeacedemy.com есть.

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

Сам изучаю всё это недавно. До этого был Python+Django(первый фреймворк). В команде никогда не работал. Так что можно сказать передаю опыт от новичка новичку.

Начните отсюда. Выполняйте задания после каждой темы. А там уже определитесь, что вам интересно в мире JS.

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

JS сам по себе объёмный, все эти инструменты, что ты перечислил, не составят и 5% от JS.
Там ведь есть ES5, ES6, ES7, ES8, зоопарк старых браузеров, которые, возможно, придётся поддерживать.

jQuery — это не "начать изучать". Это либа, как lodash, например, которая просто используется и гуглится способ её использования. И читается за пару вечеров документация. Она, кстати, идёт в разрез с SPA фреймворками, потому что использует императивный подход, а они — декларативный.

Node.js — это вообще отдельная тема. Это тоже JS, но отдельный. Он не выполняется в браузере. И для мозга лучше воспринимать ноду — как другой язык.

Нет
1. Сперва нужно понять для чего он вам нужен
После выбрать стек для этого:
JS - это нативный язык, основа.
Всё остальное - это дополнения.
JQUERY - самое просто из списка, доп библиотека, которая облегчала работу с селекторами и XHR запросами
Gulp - это менеджер задач, т.е. автоматизация рутинных работ, например по сборке проекта
WebPack - это большой комбайн, в который перекрывает своим функционал Gulp и другие "помощники"
Angular / Vue / React - это фреймворки, экосистемы со своими особенностями.
Angular - требует знания TypeScript - надмножество над JS со строгой типизацией и не только.

Node.js - это серверная вариация JS
MongoDB - база данных

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

1

любопытно, что кроме уже упомянутого bootstrap4, а также общеизвестного foundation, только сегодня на хабре статья была с курсами по bulma, что тоже базируется на флексах.
Ну и возможно стоит посмотреть среди micro-css-frameworks, типа mini.css, да еще некоторые из подобных минималистических тоже на флексах сетки строят.