Изучение web-разработки, как и любого другого предмета нужно начинать с теории. Но, в отличие от других научных областей, к практике можно перейти так же сразу. Правда понять “всю глубину наших глубин” (связь написанного вами кода и того результата, что вы увидите) вы сможете только изучив теоретическую часть в довольно большом объеме.
До этого момента, на практике вы будете писать всякие буковки, которые магическим образом будут во что-то преобразовываться и результат вы будете видеть на своем мониторе.
Итак, теория. С чего начать?
Любая веб разработка начинается и 3 слонов: HTML + CSS + JS
Про HTML почитать можно тут https://html5book.ru/html-html5/,
Про CSS почитать можно тут https://html5book.ru/css-css3/
Про JS почитать можно тут https://html5book.ru/javascript-jquery/ тут стоит отметить, что на практике jQuery может заменить сам JS, но основы и синтаксис нужно знать.
По ссылкам выше, приведена теория и описание каждого тега, принципы работы и использования в web-документе(сайте).
Видео по тем же темам, что бы перейти от теории к практике. Для того, что бы начать практиковаться, я составил небольшой список задач.
- Просто посмотрите каждое из этих видео, постарайтесь понять все о чем говорит автор, если надо пересмотрите несколько раз, с паузами и повторами.
- Попробуйте воспроизвести, те действия которые показывает автор видео.
- Создайте собственную HTML страницу, подключите к ней css файл и js. Вы можете сделать предложенное мной ниже задание или воспользоваться любым сервисом, который предлагает решить аналогичные задачи с автопроверкой вашего кода. В качестве примера возьмите главную страницу Википедии постарайтесь воспроизвести ее структуру визуально, не подсматривая в исходный код и стили, добейтесь общей схожести блоков.
На этом примере вы освоите азы верстки на практике. Во время выполнения заданий можно и нужно экспериментировать. Если эта задача показалась вам слишком легкой попробуйте сделать этот же макет разными способами: используйте обычную блочную верстку, flexbox а затем grid, так же можете попробовать подключить CSS фреймворк, такой как Bootstrap или Boolma. Поэксперементируйте с оформлением, создайте 2 файла стилей “день” и “ночь” для дневного и ночного чтения.
Создайте на странице простую форму для заказа обратного звонка. Поля: имя и телефон + кнопка отправить. В JS напишите обработчик, который по нажатию кнопки будет показывать сообщение типа alert с текстом “Ваша заявка принята. Мы перезвоним вам в течении 10 минут.” и очищать данные формы. Можете использовать нативный JS или jQuery.
Это вполне реальная, часто встречающаяся задача для реальных сайтов. Для реального кейса эта задача выглядит немного сложнее, можете попробовать воспроизвести и ее: Создайте кнопку “Заказать обратный звонок”, напишите JS обработчик который по нажатию кнопки откроет модальное окно с полями: имя +телефон и кнопка “отправить”. При нажатии на кнопку отправить форма блокируется, через 2 секунды все поля формы заменяются на текст “Ваша заявка отправлена”. В реальном примере вместо 2 секундного таймера должен быть отправлен AJAX запрос на сервер, но это уже совсем другая история 🙂
Выполнение всех пунктов не является обязательным, можете сделать вообще что-то свое, главное что бы в результате вы могли с 0 создать свою html страницу или могли отредактировать\внести правки в любую другую страницу.
HTML
Справочник по html тегам из видео: http://htmlbook.ru/
CSS
JS
После успешного освоения данного материала и выполнения заданий, вы можете переходить к следующему шагу – работе с бэкэндом php, node.js или pyton.
Однако так же вы можете остановиться на этом этапе и заняться версткой более глубоко, для этого можете постараться взять макет любого сайта в figma и сверстать его. Если результат на ваш взгляд будет достойным можете пойти на фриланс и взять там свой первый заказ.
Так же у вас может появиться желание развить навыки работы с JS, тогда не стесняйтесь переходите к изучению React JS или Angular.
Но предпочтительным и на мой взгляд самым интересным, будет решение взяться за изучение языка php, тогда вы сможете начать писать полноценные сайты и web-приложения.