Веб-разработка
Курс по веб-разработке, на русском, с нуля. Для детей и взрослых. Автор — Артём Казак.
Программа — сначала рисование на p5, потом фронтенд на React + Next.js + MUI или Ant Design.
Цель — подготовиться к будущей работе веб-разработчиком и получить фундаментальные навыки по JS/React. Курс не рассчитан на то, что сидишь и два года учишься. Скорее, после любого префикса курса ты уже знаешь что-то, что не придется изучать в будущем.
🚫 Не цели:
Научиться красиво верстать.Я сам не умею красиво верстать.Научиться быстро делать лендинги и сайты.Для этого лучше выучить тильду.Максимально быстро подготовиться к интервью.Чтобы подготовиться к интервью, надо смотреть примеры интервью и решать задачки. Интервью для фронтендера вряд ли обойдется без верстки, а я верстке особо не учу.Разобрать сложные случаи в JS.Я не хочу рассказывать устаревшие штуки вродеvar
.Разобрать vanilla JS.Понятие о DOM я дам, но "писать сайты в голом глитче" мы не будем.
Где ведется курс:
- 2022 — Варшава, Fundacja Zachód-Wschód Wsparcie
Программа
Навык/понятие | Упражнения и материалы |
---|---|
Последовательности команд "Сделай что-то, потом что-то". | Нарисовать домик в p5 с помощью line() и с показом координат для помощи |
Понятие о числах и строках Как они записываются в коде. | Тоже домик (там же есть координаты). Перевести домик на triangle() и rect() , использовать fill() . Подписать все в домике с помощью text() . |
Комментарии с Нужно потому, что дальше каждую вещь мы будем комментировать. | Просто попробовать |
Эскейпинг в строках
| Просто попробовать |
Объявление функций и передача аргументов Что такое функция; как делать свои функции; как принимать аргументы. | house() , sun() . Потом sun(x,y) или sun(x,y,color) . |
p5: Это не нужно для жизни в целом, но помогает мне придумывать упражнения. | Солнышко привязано к мышке; рисовалка |
Простые условия. Форма с | "Если солнышко слева, пусть оно меняет цвет, будто бы закат". Три фазы солнышка, чтобы был chained if. |
Понятие "результат функции" и Функции могут что-то возвращать в дополнение к тому, что они делают.
| Пишем свою функцию, которая будет ограничивать координаты солнышка, чтобы оно не выходило за границу экрана. |
Переменные Что такое переменная; как объявлять переменные; как менять переменные. Операторы | Рисовалка, но стрелочки меняют размер кисти. Солнышко, но оно двигается клавишами. |
Синтаксис JS Для каждого куска кода надо понимать, что это такое (объявление функции; вызов функции; аргумент; и т.д.) Понимание лексинга: например, почему | Артем проходит по коду и объясняет каждый кусок |
Основы последовательности вычислений JS Команды выполняются по очереди. Порядок вычисления выражений: аргументы функций до вызова функций, "что присваиваем" до присваивания. Пока не трогаем call-by-reference vs. call-by-value. | jsviz2.klve.nl — визуализатор последовательности вычислений |
Цикл Что делает каждый из трех параметров цикла. Что такое "тело цикла". Нестандартные шаги (например, | Решить Задания на циклы. |
Навык "получить нужные значения, если уже есть такая-то переменная" Например, есть | Решить Задания на циклы, раздел "Пары чисел". |
Стандартные математические операции
| Попробовать каждую операцию. Использовать |
p5: Просто для интереса и практики. | Калейдоскоп ( Вращающийся калейдоскоп (увеличивать переменную и доп. Повторить калейдоскоп несколько раз ( Истинный калейдоскоп с помощью |
Булы и булевы операции
| Решить Задания на булевы операции. На |
Проект "елочки" Пока не разбил. Но там будет: Хотим максимально повторить пример справа. | https://openprocessing.org/sketch/1598458 |
Свалка (пока не отсортировал) | |
Навык "чтение списка аргументов" В длинных вызовах функций сложно понять, где заканчивается один аргумент и начинается другой. Надо уметь быстро читать список аргументов и понимать, где какой аргумент по номеру. | ? |
Навык "вынести в переменную" Надо уметь взять любое большое выражение и вынести его в новую переменную. | Взять любой код раньше и вынести все, что получится. ? на практике не осиляю учить этому навыку |
Основы Уметь создавать переменные с | Решить Задания на |
Последовательность вычислений JS: Оба дают какой-то результат и оба имеют эффект. Может помочь понять понятие эффекта. | Почему |
Разница между expression (выражение) и statement (инструкция) | Список инструкций и объявлений в MDN. Посмотреть, почему |
Синтаксис 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 | ... |
Ресурсы
-
- Раздел 2 "Основы JavaScript", кроме секций 2.3, 2.12
- Секция 3.1 "Отладка в браузере"
- Объекты: секции 4.1, 4.2, 4.6
- Типы данных: секции 5.1—5.6, 5.9—5.12
- Обработка ошибок: секция 10.1 (не обязательно)
-
ru.reactjs.org
- Основные понятия
- Введение в хуки (более современный механизм в React)
- Рефы и DOM (не обязательно)