Загрузка...

Начинающему web-разработчику

web

Изучение 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-документе(сайте).

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

  1. Просто посмотрите каждое из этих видео, постарайтесь понять все о чем говорит автор, если надо пересмотрите несколько раз, с паузами и повторами.
  2. Попробуйте воспроизвести, те действия которые показывает автор видео.
  3. Создайте собственную 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-приложения.