Фронтенд и веб-платформа

HTML, CSS, JavaScript, TypeScript, компоненты и статические сайты.

Темы раздела

Материалы

• Курсы по веб-разработке и развитию сайта

  Девять последовательных учебных серий: Markdown, SEO, поиск, деплоймент, дизайн, аналитика, PWA, доступность и безопасность. Всего 178 уроков.

• Статический сайт из Markdown

  Последовательно создаём библиотеку статей: от первой HTML-страницы до каталога, поиска и публикации на Beget. Сохраняем постоянные адреса и отделяем материалы от оформления.

• Из Markdown в HTML: первая сборка

  Первый урок серии «Статический сайт из Markdown»: создаём исходник, собираем HTML на Python и проверяем изменение страницы после пересборки.

• Метаданные статьи: заголовок и описание в YAML

  Добавляем метаданные в тот же Markdown-исходник: отделяем YAML от текста, проверяем типы и подставляем название и описание в HTML.

• Несколько страниц и постоянные URL

  Собираем несколько Markdown-файлов по явным permalink, исключаем черновики и обнаруживаем небезопасные и повторяющиеся адреса до записи HTML.

• Общие шаблоны страницы: единые хедер и футер

  Выносим HTML-оболочку, хедер и футер в общие файлы и добавляем простой шаблонизатор, который сохраняет примеры кода внутри Markdown.

• Стили, изображения и папка ресурсов

  Подключаем общий CSS и SVG к учебному статическому сайту, копируем ресурсы при сборке и разбираем адреса на вложенных страницах.

• Таблицы, код и прежняя HTML-разметка

  Переносим собственную учебную HTML-страницу в Markdown, сохраняем сложную таблицу и якоря, оставляем прежний адрес с расширением PHP.

• Каталог из метаданных статей

  Строим разделы, темы и страницы проектов из метаданных Markdown, сохраняя единственный постоянный адрес каждой статьи.

• Последовательность уроков и пагинация

  Задаём учебную последовательность отдельно от каталога, создаём ссылки на предыдущий и следующий урок и обрабатываем границы серии.

• Поиск без серверного обработчика

  Девятый урок серии: создаём поисковый индекс при сборке и ищем по Markdown-статьям в браузере без PHP и базы данных.

• Canonical, robots.txt и карта сайта

  Десятый урок серии: задаём домен, формируем canonical, управляем noindex и создаём sitemap.xml из общего реестра страниц.

• Проверки сборки и защита старых адресов

  Одиннадцатый урок серии: проверяем старые URL, ссылки, ресурсы, пагинацию и карту сайта; готовим ручную проверку в GitLab CI.

• Публикация на Beget и проверка HTTP

  Заключительный урок серии: готовим резервную копию, проверяем статическую выдачу старых .php URL на тестовом домене и планируем переключение с откатом.

• Поиск по сайту

  Строим поиск по учебной библиотеке: готовим данные из Markdown, индекс, ранжирование и интерфейс. Затем переходим к серверному API, семантическому и гибридному поиску.

• Что должен находить поиск

  Как определить задачи поиска, подготовить контрольные запросы и различать качество результатов и скорость.

• Подготовка данных из Markdown

  Как экспортировать опубликованные Markdown-материалы для поиска, сохранить старые URL и исключить черновики.

• Первый поиск в браузере

  Как загрузить JSON с материалами, выполнить поиск подстроки и безопасно показать результаты в браузере.

• Как устроен поисковый индекс

  Как построить инвертированный индекс и находить документы по нескольким словам запроса.

• Почему один результат выше другого

  Как упорядочить результаты по совпадениям в заголовке, разделах и тексте и проверить влияние весов.

• Русский язык и технические термины

  Как согласованно обработать русский текст, C#, .NET и проверенные словоформы в документах и запросах.

• Опечатки и синонимы

  Как расширять запрос синонимами и небольшими исправлениями, сохраняя точность технических терминов.

• Фильтры и пагинация

  Как фильтровать результаты до разбивки на страницы и сохранять правильный общий счётчик.

• Удобная страница поиска

  Как сохранить запрос в URL, различать состояния поиска и защитить интерфейс от запоздавших ответов.