Веб-разработка

Курс по веб-разработке, на русском, с нуля. Для детей и взрослых. Автор — Артём Казак.

Программа — сначала рисование на p5, потом фронтенд на React + Next.js + MUI или Ant Design.

Цель — подготовиться к будущей работе веб-разработчиком и получить фундаментальные навыки по JS/React. Курс не рассчитан на то, что сидишь и два года учишься. Скорее, после любого префикса курса ты уже знаешь что-то, что не придется изучать в будущем.

🚫 Не цели:


Где ведется курс:

Программа

Навык/понятие Упражнения и материалы

Последовательности команд

"Сделай что-то, потом что-то".

Нарисовать домик в p5 с помощью line() и с показом координат для помощи

Понятие о числах и строках

Как они записываются в коде.

Тоже домик (там же есть координаты). Перевести домик на triangle() и rect(), использовать fill(). Подписать все в домике с помощью text().

Комментарии с //

Нужно потому, что дальше каждую вещь мы будем комментировать.

Просто попробовать

Эскейпинг в строках

\n для новой строки или \" для кавычки.

Просто попробовать

Объявление функций и передача аргументов

Что такое функция; как делать свои функции; как принимать аргументы.

house(), sun(). Потом sun(x,y) или sun(x,y,color).

p5: mouseX и mouseY

Это не нужно для жизни в целом, но помогает мне придумывать упражнения.

Солнышко привязано к мышке; рисовалка

if и операторы сравнения

Простые условия. Форма с else и без него. Операторы >, <, >=, <=, ===, !==.

"Если солнышко слева, пусть оно меняет цвет, будто бы закат". Три фазы солнышка, чтобы был chained if.

Понятие "результат функции" и return

Функции могут что-то возвращать в дополнение к тому, что они делают.

return моментально заканчивает функцию.

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

Переменные

Что такое переменная; как объявлять переменные; как менять переменные.

Операторы ++, --, +=, -=.

Рисовалка, но стрелочки меняют размер кисти. Солнышко, но оно двигается клавишами.

Синтаксис JS

Для каждого куска кода надо понимать, что это такое (объявление функции; вызов функции; аргумент; и т.д.)

Понимание лексинга: например, почему letx= писать нельзя. Где пробелы нужны, а где нет.

Артем проходит по коду и объясняет каждый кусок

Основы последовательности вычислений JS

Команды выполняются по очереди. Порядок вычисления выражений: аргументы функций до вызова функций, "что присваиваем" до присваивания.

Пока не трогаем call-by-reference vs. call-by-value.

jsviz2.klve.nl — визуализатор последовательности вычислений

Цикл for

Что делает каждый из трех параметров цикла. Что такое "тело цикла".

Нестандартные шаги (например, i += 10 вместо i++).

Решить Задания на циклы.

Навык "получить нужные значения, если уже есть такая-то переменная"

Например, есть 1 2 3 4, хотим получить 10 20 30 40.

Решить Задания на циклы, раздел "Пары чисел".

Стандартные математические операции

+, -, *, /, %, **, скобки.

Попробовать каждую операцию. Использовать % для концентрических кругов зеброй или шахматной доски.

p5: translate, scale, rotate

Просто для интереса и практики.

Калейдоскоп (translate и rotate)

Вращающийся калейдоскоп (увеличивать переменную и доп. rotate)

Повторить калейдоскоп несколько раз (scale)

Истинный калейдоскоп с помощью scale(1, -1)

Булы и булевы операции

true и false. Понимание, что if использует булы и каждый оператор сравнения дает булы. ||, &&, !.

Решить Задания на булевы операции.

На ! пока не придумал.

Проект "елочки"

Пока не разбил. Но там будет: dist(), HSB, random(), массивы и объекты, color blending.

Хотим максимально повторить пример справа.

https://openprocessing.org/sketch/1598458

Свалка (пока не отсортировал)

Навык "чтение списка аргументов"

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

?

Навык "вынести в переменную"

Надо уметь взять любое большое выражение и вынести его в новую переменную.

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

? на практике не осиляю учить этому навыку

Основы useState в React

Уметь создавать переменные с useState и менять их. Делать несколько переменных и не путаться в них. Понимать, что одну переменную можно использовать в нескольких местах.

Решить Задания на useState.

Последовательность вычислений JS: x++ vs ++x, присваивание как выражение

Оба дают какой-то результат и оба имеют эффект. Может помочь понять понятие эффекта.

Почему console.log(x++) и console.log(++x) дают разные результаты. Как работает x = y = 3.

Разница между expression (выражение) и statement (инструкция)

Список инструкций и объявлений в MDN.

Посмотреть, почему x = if ... не работает.

Синтаксис JSX

Для каждого куска кода надо понимать, что это такое (открывающий/закрывающий элемент; название/значение атрибута; и т.д.)

Артем проходит по коду и объясняет каждый кусок

Скоупинг

...

Implicit type coercion

...

Анонимные функции

...

Понятие типа

...

Сильно вложенные вызовы функций, понятие "обернуть в X"

...

`for ... of`

...

Short-circuiting

...

Рекурсия

...

Исключения (exceptions), `try ... catch`

...

Фрагменты в JSX

...

Template literals

...

null, undefined

...

Использование команды npm (что именно надо?)

...

Чтение документации на примере популярных библиотек (lodash, ?)

...

Регекспы

...

Основы git

...

Поиск по своему коду в VSCode

...

Основы command line (бинарники, аргументы, флаги, текущая директория)

...

Понятие callback (cf. event handlers)

...

Модули и импорты

...

Ликбез по сетям (IP, host, port, домены, hosting, DNS, TLS, ???)

...

CSS (ух)

...

HTML vs JSX

...

Что такое node.js

...

Ресурсы