Фронтенд: поднимем рабочий чатик и сопутствующие навыки за несколько чашек чая

Удивительный гайд в мир прохождения стажировок от человека, не проходящего стажировки. Здравствуйте, я Тимофей Хаханов, вы, должно быть, помните меня по таким статьям, как "Networking: как стать самым известным человеком на потоке, проигрывая в карточные фокусы" и "ООП для самых маленьких: разбираемся, что такое полиморфизм, на примере вышибалы из Central Station"


Сегодня в программе:

  1. Поставить минимальный набор необходимых программ и понять, почему нам необходим Git
  2. Научиться отличать верстку от фронтенда
  3. Сверстать чат, причем красиво
  4. Разобраться, что такое DOM-дерево и как менять содержимое веб-страницы с помощью чистого JavaScript
  5. Написать логику появления в чате новых сообщений (на заглушках)
  6. Разработать API для связи клиент-сервер
  7. (дополнительно, но желательно) Поднять тестовый сервер нашего чата
  8. Научить наш фронтенд общаться с сервером по API

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


Ну че, мелкий, погнали? — видео про роботов


Содержание:

  • Глава 1: настраиваем Git, npm, postman и все остальное
  • Глава 2: html-разметка и все, что с ней связанно
  • Глава 3: css: делаем красиво
  • Глава 4: pure js + DOM = фронтенд
  • Глава 5: нам нужен бэкенд, их есть у меня
  • Глава 6: AJAX - учимся дружить с бэкендом по API
  • Приложение 1: полезные ссылки