• ru Русский
    zh-CN 中国
    en English
    de Deutsch
    fr Français
it-ros.ru it-ros.ru
  2. IT-обучение
  3. Начальный уровень
  4. Программирование и разработка
  5. Веб-разработка
  6. Фуллстэк-разработчик
  7. Фуллстэк-разработчик (начальный уровень)

Фуллстэк-разработчик (начальный уровень)

Курс предназначен для начинающих и школьников. Вы изучите основы веб-разработки, освоите HTML, CSS и JavaScript, научитесь создавать интерфейсы и работать с логикой сайта. На бэкенде вы познакомитесь с Python и базами данных, а также узнаете, как связать клиентскую и серверную части. В результате вы сможете разрабатывать простые веб-приложения от идеи до запуска.

Описание программы:

Курс разработан для начинающих и направлен на освоение базовых навыков фуллстэк-разработки. Обучение включает изучение технологий фронтенда (HTML, CSS, JavaScript), основ программирования на Python, работу с базами данных и создание полноценных веб-приложений. В рамках курса слушатели реализуют несколько практических проектов и завершат обучение разработкой собственного веб-приложения с полной цепочкой: от интерфейса до серверной логики и хранения данных.

Что предстоит пройти на курсе:

Основы веба и архитектура приложений

  • Принципы работы интернета
  • Клиент-серверная модель
  • Работа с инструментами разработчика в браузере

HTML и CSS

  • Структура HTML-документа
  • Верстка страниц: блоки, таблицы, формы
  • Адаптивная верстка: Flexbox, Grid
  • Практика: создание landing page по макету

JavaScript (базовый уровень)

  • Переменные, условия, циклы
  • Функции и события
  • DOM и работа с формами
  • Добавление интерактива к странице

Основы программирования на Python

  • Установка и настройка окружения
  • Переменные, типы данных, условные конструкции
  • Циклы, функции, работа с файлами
  • Основы ООП в Python

Бэкенд и веб-фреймворки

  • Знакомство с Flask / FastAPI
  • Обработка HTTP-запросов
  • Маршруты, шаблоны, работа с данными
  • Подключение к базе данных

Работа с базами данных

  • Введение в SQL
  • Создание таблиц, выполнение запросов
  • CRUD-операции
  • Интеграция БД в веб-приложение

Создание полноценного веб-приложения

  • Проектирование структуры проекта
  • Связь фронтенда и бэкенда
  • Реализация форм, обработка данных
  • Деплой простого приложения

Инструменты разработчика

  • Терминал и командная строка
  • Git и GitHub: коммиты, ветки, удалённые репозитории
  • Публикация сайта: начальные навыки деплоя

Итоговая проектная работа:

  • Выбор идеи и постановка задач
  • Разработка прототипа
  • Реализация фронтенда, бэкенда и подключение БД
  • Тестирование и презентация проекта

Ожидаемые результаты после прохождения курса:

Слушатель должен уметь:

  • Создавать адаптивную верстку по макету
  • Писать клиентскую и серверную логику на JavaScript и Python
  • Реализовывать взаимодействие между фронтендом и бэкендом
  • Работать с базами данных и выполнять SQL-запросы
  • Использовать Git для контроля версий
  • Разрабатывать и запускать мини-веб-приложения
  • Подготовить портфолио из нескольких завершённых проектов

Слушатель должен знать:

  • Основы веб-технологий и архитектуры сайтов
  • Принципы работы HTML, CSS, JavaScript
  • Базовые возможности Python и его использование в веб-разработке
  • Основы REST API и работы с сервером
  • Структуру и логику фуллстэк-приложений
  • Как организовать код и данные в реальном проекте

Дополнительно:

  • Введение в Agile и Scrum
  • Советы по составлению IT-резюме и подготовке к интервью
  • Рекомендации по развитию и трудоустройству в сфере разработки

Итоговая аттестация:

  • Выполнение дипломного проекта
  • Защита проекта перед преподавателем
  • Онлайн-тестирование по пройденным темам
  • Получение сертификата об окончании курса

 

  1. Что такое фуллстэк-разработка?
    Фуллстэк-разработка — это создание полных веб-приложений, включая интерфейс, логику и базы данных.

  2. Какие основные компоненты веб-приложения?
    Фронтенд, бэкенд и база данных.

  3. Что такое HTML?
    HTML — язык разметки для создания структуры веб-страниц.

  4. Для чего используется CSS?
    CSS отвечает за оформление и внешний вид страниц.

  5. Какую роль играет JavaScript во фронтенде?
    JavaScript добавляет интерактивность: обрабатывает действия пользователя и изменяет содержимое страниц.

  6. Что такое DOM?
    DOM — это модель HTML-документа, позволяющая взаимодействовать с элементами на странице через JavaScript.

  7. Какие инструменты разработчика доступны в браузере?
    Инструменты разработчика позволяют редактировать код, отлаживать скрипты и анализировать загрузку страниц.

  8. Что такое адаптивная верстка?
    Это подход, при котором сайт корректно отображается на разных устройствах.

  9. Как работают Flexbox и Grid?
    Flexbox и Grid — это методы позиционирования элементов на странице с помощью CSS.

  10. Почему Python популярен в бэкенде?
    Python прост в освоении, имеет множество библиотек и активное сообщество.

  11. Что такое Flask или FastAPI?
    Это фреймворки на Python для создания серверной части приложений.

  12. Какие типы HTTP-запросов вы знаете?
    GET, POST, PUT, DELETE — самые распространённые.

  13. Что такое REST API?
    REST API — стандарт взаимодействия между клиентом и сервером через HTTP.

  14. Что такое SQL?
    SQL — язык запросов для работы с базами данных.

  15. Что означает CRUD?
    CRUD — операции Create, Read, Update и Delete для управления данными.

  16. Как связаны фронтенд и бэкенд?
    Через HTTP-запросы, например, Fetch API или формы.

  17. Что такое Git?
    Git — система контроля версий для отслеживания изменений в коде.

  18. Что такое GitHub?
    GitHub — платформа для хранения проектов и совместной разработки.

  19. Какие команды Git используются чаще всего?
    git init, git add, git commit, git push, git pull, git clone.

  20. Что такое терминал?
    Терминал — это интерфейс для выполнения команд на компьютере.

  21. Что такое переменная в программировании?
    Переменная — контейнер для временного хранения данных в программе.

  22. Что такое функция?
    Функция — блок кода, который можно вызывать по имени.

  23. Как работает клиент-серверная модель?
    Клиент отправляет запрос, сервер его обрабатывает и отправляет ответ.

  24. Что такое портфолио разработчика?
    Это сборник готовых проектов, демонстрирующих навыки соискателя.

  25. Как проходит итоговая аттестация по курсу?
    Выполняется дипломный проект, проводится его защита и тестирование знаний.

  1. Что такое веб-хостинг?
    Веб-хостинг — это услуга размещения веб-сайтов на сервере, чтобы они были доступны в интернете.

  2. Какие типы данных вы знаете в JavaScript?
    Числа, строки, булевы значения, объекты, массивы, null и undefined.

  3. Что такое цикл в программировании?
    Цикл — это конструкция, позволяющая повторять выполнение кода несколько раз.

  4. Что такое условная инструкция?
    Это команда, которая выполняет разные действия в зависимости от условия (например, if...else).

  5. Что такое событие в JavaScript?
    Событие — это действие, которое происходит в браузере, например клик или нажатие клавиши.

  6. Как работает функция в Python?
    Функция — это блок кода, который можно вызвать по имени. В Python определяется через def.

  7. Что такое список в Python?
    Список — это изменяемая коллекция элементов, хранящихся в квадратных скобках.

  8. Что такое словарь в Python?
    Словарь — это структура данных, в которой данные хранятся в виде пар ключ-значение.

  9. Что такое атрибут HTML-тега?
    Атрибут задаёт дополнительные параметры элемента, например src у изображений или href у ссылок.

  10. Как добавить стиль к элементу через CSS?
    С помощью селектора и набора свойств в фигурных скобках: например, p { color: red; }.

  11. Что такое класс в CSS?
    Класс — это имя, которое можно применить к нескольким элементам для одинакового стилирования.

  12. Что такое идентификатор (id) в CSS?
    Id — уникальное имя элемента на странице, используется для стилизации одного конкретного элемента.

  13. Как работает система контроля версий Git?
    Git отслеживает изменения в файлах проекта и позволяет переключаться между версиями.

  14. Что такое репозиторий?
    Репозиторий — это хранилище проекта с полной историей изменений.

  15. Что такое ветка в Git?
    Ветка — это отдельная линия разработки в рамках одного проекта.

  16. Что такое коммит в Git?
    Коммит — это сохранённое состояние изменений с описанием того, что было изменено.

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

  18. Что такое деплой фронтенда?
    Это процесс загрузки HTML, CSS и JS файлов на сервер для отображения сайта в интернете.

  19. Что такое база данных?
    База данных — это организованное хранилище данных, обычно в виде таблиц.

  20. Чем отличается SQL от NoSQL?
    SQL — это реляционные базы данных с чёткой структурой, NoSQL — нереляционные, более гибкие.

  21. Что такое ORM?
    ORM (Object Relational Mapping) — технология, позволяющая работать с БД как с объектами в коде.

  22. Что такое API?
    API — интерфейс, позволяющий приложениям взаимодействовать друг с другом.

  23. Что такое JSON?
    JSON — формат обмена данными, удобный для чтения человеком и машиной.

  24. Что такое Agile?
    Agile — методология гибкой разработки ПО, ориентированная на итеративное развитие и адаптацию.

  25. Что такое Scrum?
    Scrum — одна из популярных реализаций Agile, предполагающая работу в спринтах и использование ролей, таких как Product Owner и Scrum Master.

  1. Что такое тег в HTML?
    Тег — это элемент разметки, определяющий структуру и содержимое веб-страницы.

  2. Какие бывают типы данных в Python?
    Числа, строки, списки, словари, кортежи, множества, булевы значения.

  3. Что такое переменная в JavaScript?
    Переменная — это контейнер для хранения данных, объявляется с помощью var, let или const.

  4. Что такое объект в JavaScript?
    Объект — это коллекция пар ключ-значение, используемая для хранения сложных данных.

  5. Как работает цикл for в JavaScript?
    Цикл for повторяет выполнение кода заданное количество раз на основе условия.

  6. Что такое событие click в JavaScript?
    Это действие, происходящее при клике пользователя на элемент страницы.

  7. Что такое сервер?
    Сервер — это компьютер или программа, которая предоставляет данные или услуги другим устройствам (клиентам).

  8. Что делает функция fetch в JavaScript?
    Fetch используется для отправки HTTP-запросов и получения данных с сервера.

  9. Что такое маршруты (роуты) в бэкенде?
    Маршруты — это пути URL, по которым клиент может получить доступ к данным или действиям на сервере.

  10. Что такое шаблонизация в Flask?
    Шаблонизация позволяет динамически генерировать HTML-страницы с данными из Python-кода.

  11. Что такое базовый SQL-запрос SELECT?
    SELECT — команда для выборки данных из таблицы базы данных.

  12. Как работает INSERT в SQL?
    INSERT добавляет новые записи в таблицу базы данных.

  13. Что делает DELETE в SQL?
    DELETE удаляет записи из таблицы по указанному условию.

  14. Что такое UPDATE в SQL?
    UPDATE изменяет существующие данные в таблице.

  15. Что такое реляционная база данных?
    Это база данных, где информация хранится в связанных таблицах.

  16. Что такое JSON и где он применяется?
    JSON — формат обмена данными, часто используется в API для передачи информации между клиентом и сервером.

  17. Что такое HTTP-статус-коды?
    Это числовые коды, информирующие о результате HTTP-запроса, например, 200 — успех, 404 — не найдено.

  18. Что такое localhost?
    Это локальный компьютер, используемый как тестовый сервер для запуска приложений.

  19. Что такое порт в сетях?
    Порт — это виртуальный канал связи на устройстве, через который проходят данные.

  20. Что такое GET-запрос?
    GET — запрос, используемый для получения данных от сервера.

  21. Что такое POST-запрос?
    POST — запрос, используемый для отправки данных на сервер.

  22. Что такое RESTful API?
    RESTful API — это стиль построения API, соответствующий принципам REST.

  23. Что такое фреймворк?
    Фреймворк — это набор инструментов и библиотек, упрощающих разработку приложений.

  24. Что такое MVC?
    MVC — паттерн проектирования, разделяющий приложение на три части: модель, представление и контроллер.

  25. Что такое MVP?
    MVP — минимально жизнеспособный продукт, первоначальная версия приложения с базовым функционалом.

  1. Какой язык используется для создания структуры веб-страницы
    A) CSS
    B) JavaScript
    C) HTML
    D) Python
    Правильный ответ C) HTML

  2. Какой тег используется для вставки изображения на страницу
    A) text
    B) img
    C) link
    D) div
    Правильный ответ B) img

  3. Какой язык программирования добавляет интерактивность на веб-страницу
    A) HTML
    B) CSS
    C) JavaScript
    D) SQL
    Правильный ответ C) JavaScript

  4. Какой элемент в CSS используется для применения стилей к нескольким элементам
    A) id
    B) class
    C) title
    D) name
    Правильный ответ B) class

  5. Какая команда Git создаёт новый коммит с изменениями
    A) git init
    B) git add
    C) git commit
    D) git push
    Правильный ответ C) git commit

  6. Что означает аббревиатура CRUD
    A) Create Read Update Delete
    B) Copy Rename Upload Download
    C) Configure Run Use Deploy
    D) Connect Request Send Update
    Правильный ответ A) Create Read Update Delete

  7. Какой тип данных в Python может содержать любые значения и изменяться
    A) кортеж
    B) строка
    C) список
    D) словарь
    Правильный ответ C) список

  8. Какой HTTP-метод используется для отправки данных на сервер
    A) GET
    B) POST
    C) PUT
    D) DELETE
    Правильный ответ B) POST

  9. Что такое DOM
    A) Язык разметки
    B) Стилевой файл
    C) Представление HTML как объектов
    D) База данных
    Правильный ответ C) Представление HTML как объектов

  10. Какой фреймворк на Python используется для бэкенд-разработки
    A) React
    B) Flask
    C) Vue
    D) jQuery
    Правильный ответ B) Flask

  11. Какой формат данных часто используется в API для обмена информацией
    A) XML
    B) JSON
    C) CSV
    D) DOCX
    Правильный ответ B) JSON

  12. Какой тег задаёт заголовок первого уровня на HTML-странице
    A) h2
    B) p
    C) title
    D) h1
    Правильный ответ D) h1

  13. Какой атрибут используется для указания ссылки в теге a
    A) src
    B) href
    C) alt
    D) value
    Правильный ответ B) href

  14. Какое свойство CSS используется для изменения цвета текста
    A) font-color
    B) background-color
    C) color
    D) text-color
    Правильный ответ C) color

  15. Какой метод в JavaScript позволяет вывести сообщение в консоль
    A) alert()
    B) log()
    C) console.log()
    D) print()
    Правильный ответ C) console.log()

  16. Какой командой в Python объявляется функция
    A) function
    B) def
    C) func
    D) method
    Правильный ответ B) def

  17. Что делает HTTP-статус код 404
    A) Ошибка сервера
    B) Страница найдена
    C) Страница не найдена
    D) Запрос выполнен успешно
    Правильный ответ C) Страница не найдена

  18. Какой элемент в HTML используется для создания ненумерованного списка
    A) ol
    B) li
    C) ul
    D) list
    Правильный ответ C) ul

  19. Какой тип базы данных использует таблицы для хранения данных
    A) NoSQL
    B) MongoDB
    C) реляционная
    D) документо-ориентированная
    Правильный ответ C) реляционная

  20. Какой символ используется в CSS для выбора класса
    A) #
    B) .
    C) *
    D) @
    Правильный ответ B) .

  21. Какой элемент в HTML отвечает за создание формы
    A) input
    B) form
    C) button
    D) label
    Правильный ответ B) form

  22. Что делает функция fetch в JavaScript
    A) отправляет email
    B) запрашивает данные с сервера
    C) очищает форму
    D) перезагружает страницу
    Правильный ответ B) запрашивает данные с сервера

  23. Какой тег используется для подключения внешнего CSS файла
    A) style
    B) css
    C) link
    D) script
    Правильный ответ C) link

  24. Какой параметр URL используется для передачи данных при GET-запросе
    A) path
    B) query string
    C) hash
    D) domain
    Правильный ответ B) query string

  25. Что такое деплой
    A) написание кода
    B) тестирование сайта
    C) публикация сайта в интернете
    D) создание дизайна
    Правильный ответ C) публикация сайта в интернете

  1. Какой тег используется для вставки видео на страницу
    A) audio
    B) img
    C) video
    D) media
    Правильный ответ C) video

  2. Какой тип данных в JavaScript может быть true или false
    A) строка
    B) число
    C) булево значение
    D) объект
    Правильный ответ C) булево значение

  3. Какой атрибут у тега input задаёт тип поля формы
    A) name
    B) id
    C) type
    D) value
    Правильный ответ C) type

  4. Какое свойство CSS используется для изменения размера шрифта
    A) font-size
    B) text-size
    C) size
    D) font-style
    Правильный ответ A) font-size

  5. Какой метод в Python добавляет элемент в конец списка
    A) insert
    B) add
    C) append
    D) push
    Правильный ответ C) append

  6. Что делает HTTP-статус код 200
    A) ошибка сервера
    B) страница не найдена
    C) запрос выполнен успешно
    D) перенаправление
    Правильный ответ C) запрос выполнен успешно

  7. Какой элемент в HTML используется для создания ссылки
    A) a
    B) link
    C) href
    D) url
    Правильный ответ A) a

  8. Какой символ используется в CSS для выбора идентификатора
    A) #
    B) .
    C) *
    D) @
    Правильный ответ A) #

  9. Какой командой в Git можно создать новую ветку
    A) git branch
    B) git checkout -b
    C) git new branch
    D) git create branch
    Правильный ответ B) git checkout -b

  10. Какой тип данных в Python хранит пары ключ-значение
    A) список
    B) кортеж
    C) множество
    D) словарь
    Правильный ответ D) словарь

  11. Что такое API
    A) язык разметки
    B) интерфейс взаимодействия между приложениями
    C) стилевой файл
    D) база данных
    Правильный ответ B) интерфейс взаимодействия между приложениями

  12. Какой тег используется для подключения JavaScript файла
    A) style
    B) script
    C) link
    D) js
    Правильный ответ B) script

  13. Какой метод в JavaScript добавляет элемент в конец массива
    A) push
    B) pop
    C) shift
    D) unshift
    Правильный ответ A) push

  14. Какая команда Git загружает изменения с удалённого репозитория
    A) git push
    B) git clone
    C) git pull
    D) git fetch
    Правильный ответ C) git pull

  15. Какой SQL оператор выбирает данные из таблицы
    A) INSERT
    B) UPDATE
    C) SELECT
    D) DELETE
    Правильный ответ C) SELECT

  16. Что означает MVP в разработке
    A) максимальная версия продукта
    B) минимально жизнеспособный продукт
    C) модель вид представления
    D) мастер веб-программирования
    Правильный ответ B) минимально жизнеспособный продукт

  17. Какой тип базы данных используется в SQLite
    A) NoSQL
    B) графовая
    C) реляционная
    D) документо-ориентированная
    Правильный ответ C) реляционная

  18. Какое свойство CSS центрирует текст по горизонтали
    A) text-align
    B) align-text
    C) center
    D) text-indent
    Правильный ответ A) text-align

  19. Какой тип HTTP-запроса изменяет существующие данные на сервере
    A) GET
    B) POST
    C) PUT
    D) DELETE
    Правильный ответ C) PUT

  20. Что такое терминал
    A) текстовый редактор
    B) инструмент для написания HTML
    C) интерфейс для ввода команд
    D) графический интерфейс
    Правильный ответ C) интерфейс для ввода команд

  21. Какой элемент в HTML создаёт кнопку
    A) input
    B) button
    C) a
    D) div
    Правильный ответ B) button

  22. Какой тип данных в Python нельзя изменить после создания
    A) список
    B) словарь
    C) кортеж
    D) строка
    Правильный ответ C) кортеж

  23. Какой командой в Python выводится информация на экран
    A) print()
    B) console.log()
    C) echo()
    D) output()
    Правильный ответ A) print()

  24. Что означает JSON
    A) Java Script Object Notation
    B) JavaScript Object Notation
    C) Java Simple Output Network
    D) Joint Scripted Online Node
    Правильный ответ B) JavaScript Object Notation

  25. Что такое фуллстэк-разработка
    A) только верстка
    B) только программирование на Python
    C) разработка интерфейса, логики и базы данных
    D) работа с графикой
    Правильный ответ C) разработка интерфейса, логики и базы данных

  1. Какой тег используется для создания абзаца на веб-странице
    A) p
    B) div
    C) span
    D) h1
    Правильный ответ A) p

  2. Какое свойство CSS задаёт внешний отступ у элемента
    A) padding
    B) margin
    C) border
    D) outline
    Правильный ответ B) margin

  3. Какой тип данных в JavaScript представляет пустое значение
    A) null
    B) undefined
    C) empty
    D) none
    Правильный ответ A) null

  4. Что делает функция len() в Python
    A) выводит текст
    B) считает количество элементов
    C) создаёт список
    D) останавливает программу
    Правильный ответ B) считает количество элементов

  5. Какой командой в Git можно посмотреть историю коммитов
    A) git status
    B) git log
    C) git history
    D) git commits
    Правильный ответ B) git log

  6. Какой SQL оператор добавляет новую запись в таблицу
    A) SELECT
    B) UPDATE
    C) INSERT INTO
    D) DELETE
    Правильный ответ C) INSERT INTO

  7. Какой HTTP-метод обычно используется для удаления данных
    A) GET
    B) POST
    C) PUT
    D) DELETE
    Правильный ответ D) DELETE

  8. Какое свойство CSS задаёт внутренний отступ у элемента
    A) margin
    B) padding
    C) border
    D) spacing
    Правильный ответ B) padding

  9. Какой элемент в HTML используется для создания поля ввода
    A) input
    B) textarea
    C) button
    D) label
    Правильный ответ A) input

  10. Какой атрибут тега form указывает URL для отправки данных
    A) method
    B) action
    C) name
    D) id
    Правильный ответ B) action

  11. Какая команда Git показывает текущее состояние репозитория
    A) git commit
    B) git push
    C) git status
    D) git pull
    Правильный ответ C) git status

  12. Какой метод в JavaScript позволяет удалить последний элемент массива
    A) push()
    B) shift()
    C) pop()
    D) unshift()
    Правильный ответ C) pop()

  13. Что такое localhost
    A) сервер в интернете
    B) локальный компьютер, используемый как сервер
    C) облако для хранения файлов
    D) браузер
    Правильный ответ B) локальный компьютер, используемый как сервер

  14. Какой тип данных в Python используется для хранения уникальных значений
    A) список
    B) кортеж
    C) словарь
    D) множество
    Правильный ответ D) множество

  15. Какое свойство CSS изменяет тип элемента макета
    A) display
    B) position
    C) float
    D) clear
    Правильный ответ A) display

  16. Какой тег используется для создания заголовка таблицы в HTML
    A) tr
    B) td
    C) th
    D) table
    Правильный ответ C) th

  17. Какой цикл в JavaScript повторяется пока условие истинно
    A) if
    B) for
    C) while
    D) switch
    Правильный ответ C) while

  18. Какое ключевое слово в Python используется для определения класса
    A) def
    B) class
    C) function
    D) object
    Правильный ответ B) class

  19. Какой атрибут тега input задаёт подсказку внутри поля ввода
    A) name
    B) value
    C) placeholder
    D) title
    Правильный ответ C) placeholder

  20. Какой метод в Python преобразует строку в нижний регистр
    A) upper()
    B) lower()
    C) replace()
    D) split()
    Правильный ответ B) lower()

  21. Какой HTTP-статус код возвращается при успешном удалении ресурса
    A) 200
    B) 404
    C) 204
    D) 500
    Правильный ответ C) 204

  22. Что такое Agile
    A) язык программирования
    B) фреймворк
    C) подход к управлению проектами
    D) база данных
    Правильный ответ C) подход к управлению проектами

  23. Какой контейнер в HTML группирует элементы формы
    A) div
    B) form
    C) fieldset
    D) span
    Правильный ответ C) fieldset

  24. Какой символ используется в терминале для перехода на уровень выше
    A) /
    B) ..
    C) .
    D) ~
    Правильный ответ B) ..

  25. Что означает MVP в контексте трудоустройства
    A) человек месяца
    B) минимально жизнеспособный продукт
    C) главный веб-программист
    D) мастер верстки
    Правильный ответ B) минимально жизнеспособный продукт

Экзаменационный билет №1

Теоретическая часть

  1. Что такое HTML, CSS и JavaScript? Какую роль играет каждый из этих языков в создании веб-страницы?
  2. Какие типы HTTP-запросов вы знаете и для чего они используются?

Ответы на теоретическую часть:

  1. HTML — язык разметки, используется для создания структуры веб-страницы.
    CSS — каскадные таблицы стилей, отвечают за внешний вид и оформление страницы.
    JavaScript — язык программирования, добавляющий интерактивность и динамику.

  2. GET — получение данных с сервера.
    POST — отправка данных на сервер.
    PUT — обновление существующих данных.
    DELETE — удаление данных.

Практическая часть

  1. Создайте HTML-форму с полем ввода имени и кнопкой "Отправить". Добавьте CSS, чтобы форма была центрирована по центру экрана. Напишите JavaScript-скрипт, который при нажатии выводит введённое имя в консоль браузера.
 

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Форма</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } form { text-align: center; } input, button { margin: 10px; padding: 8px; } </style> </head> <body> <form id="myForm"> <input type="text" id="nameInput" placeholder="Введите имя"> <br> <button type="submit">Отправить</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); var name = document.getElementById('nameInput').value; console.log('Имя пользователя: ' + name); }); </script> </body> </html>

  1. Напишите маршрут на Flask, который по адресу /hello выводит строку "Привет от сервера!"

from flask import Flask

app = Flask(name )

@app.route('/hello') def hello(): return "Привет от сервера!"

if name == 'main ': app.run(debug=True)

Экзаменационный билет №2

Теоретическая часть

  1. Что такое DOM и как с ним взаимодействовать с помощью JavaScript?
  2. Что такое Git и GitHub? Какие основные команды Git вы знаете?
 

Ответы на теоретическую часть:

  1. DOM (Document Object Model) — это представление HTML-документа в виде дерева объектов. С помощью JavaScript можно изменять содержимое, стили и структуру страницы через DOM.

  2. Git — система контроля версий, GitHub — платформа для хранения и совместной работы над кодом. Основные команды: git init, git add, git commit, git push, git pull.

Практическая часть

  1. Напишите HTML-страницу с заголовком и кнопкой. При клике на кнопку JavaScript должен заменить текст заголовка на «Привет, мир!»

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Заголовок</title> </head> <body> <h1 id="title">Старый заголовок</h1> <button onclick="changeTitle()">Нажми меня</button> <script> function changeTitle() { document.getElementById('title').innerText = 'Привет, мир!'; } </script> </body> </html>

  1. Напишите Python-функцию, которая принимает список чисел и возвращает их сумму.

def sum_list(numbers): return sum(numbers)

print(sum_list([1, 2, 3, 4])) # Выведет 10

Экзаменационный билет №3

Теоретическая часть

  1. Что такое адаптивная верстка и как она реализуется с помощью CSS?
  2. Что такое SQL и какие основные команды используются в работе с базой данных?

Ответы на теоретическую часть:

  1. Адаптивная верстка — это подход, при котором сайт корректно отображается на всех устройствах. Используются Flexbox, Grid и медиа-запросы.

  2. SQL — язык запросов для работы с реляционными базами данных. Основные команды: SELECT, INSERT, UPDATE, DELETE.

Практическая часть

  1. Напишите скрипт на JavaScript, который выводит в консоль все элементы массива с использованием цикла for.

let fruits = ['яблоко', 'банан', 'груша']; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); }

  1. Напишите функцию на Python, которая проверяет, является ли число чётным.

def is_even(number): return number % 2 == 0

print(is_even(4)) # Выведет True print(is_even(7)) # Выведет False

Экзаменационный билет №4

Теоретическая часть

  1. Что такое переменная в JavaScript и как её объявить?
  2. Что такое клиент-серверная архитектура и как происходит обмен данными между клиентом и сервером?

Ответы на теоретическую часть:

  1. Переменная — это контейнер для хранения данных. Объявляется с помощью let, const или var.

  2. Клиент отправляет запрос на сервер, сервер его обрабатывает и отправляет ответ обратно.

Практическая часть

  1. Напишите HTML-страницу с кнопкой. При наведении на неё цвет фона должен меняться.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Кнопка</title> <style> button:hover { background-color: lightblue; } </style> </head> <body> <button onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''">Наведи на меня</button> </body> </html>

  1. Напишите маршрут Flask, который принимает параметр username и выводит приветствие.

from flask import Flask

 

app = Flask(name )

 

@app.route('/hello/<username>') def hello(username): return f'Привет, {username}!'

 

if name == 'main ': app.run(debug=True)

Экзаменационный билет №5

Теоретическая часть

  1. Что такое класс и идентификатор в CSS? Чем они отличаются?
  2. Что такое REST API и как он работает?

Ответы на теоретическую часть:

  1. Класс применяется к нескольким элементам, идентификатор — только к одному. Класс обозначается точкой ., идентификатор решеткой #.

  2. REST API — это стиль построения взаимодействия между клиентом и сервером по принципу HTTP-запросов.

Практическая часть

  1. Напишите HTML-страницу с двумя полями ввода и кнопкой. JavaScript должен складывать числа из полей и выводить результат в alert.
 

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Сложение</title> </head> <body> <input type="number" id="num1"> <input type="number" id="num2"> <button onclick="sum()">Посчитать</button> <script> function sum() { let a = parseFloat(document.getElementById('num1').value); let b = parseFloat(document.getElementById('num2').value); alert(a + b); } </script> </body> </html>

  1. Напишите Python-скрипт, который создаёт список квадратов чисел от 1 до 10 и выводит его.

squares = [x*x for x in range(1, 11)] print(squares) # Выведет [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

Экзаменационный билет №6

Теоретическая часть

  1. Что такое Flexbox и для чего он используется в CSS?
  2. Что такое переменная в Python и какие типы данных вы знаете?

Ответы на теоретическую часть:

  1. Flexbox — это технология позиционирования элементов в CSS, которая позволяет легко создавать гибкие макеты.

  2. Переменная — это контейнер для хранения данных. Типы данных в Python: int, float, str, bool, list, dict, tuple, set.

Практическая часть

  1. Напишите HTML и CSS для создания горизонтального меню с тремя ссылками, расположенными по центру страницы.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Меню</title> <style> .menu { display: flex; justify-content: center; gap: 10px; margin-top: 50px; } </style> </head> <body> <div class="menu"> <a href="#">Главная</a> <a href="#">О нас</a> <a href="#">Контакты</a> </div> </body> </html>

  1. Напишите Python-функцию, которая принимает список чисел и возвращает максимальное значение.

def find_max(numbers): return max(numbers)

print(find_max([3, 7, 2, 9, 5])) # Выведет 9

Экзаменационный билет №7

Теоретическая часть

  1. Что такое событие в JavaScript и как его обработать?
  2. Какие основные команды Git используются при совместной разработке?

Ответы на теоретическую часть:

  1. Событие — это действие, которое происходит в браузере, например клик или нажатие клавиши. Обрабатывается через addEventListener или атрибуты в HTML.

  2. git init — создание репозитория, git add — добавление файлов, git commit — сохранение изменений, git push / pull — отправка и получение изменений.

Практическая часть

  1. Напишите скрипт на JavaScript, который меняет цвет фона страницы при нажатии на кнопку.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Цвет фона</title> </head> <body> <button onclick="changeColor()">Сменить цвет</button> <script> function changeColor() { document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16); } </script> </body> </html>

  1. Напишите маршрут Flask, который выводит текущее время.

from flask import Flask from datetime import datetime

app = Flask(name )

@app.route('/time') def current_time(): return f'Текущее время: {datetime.now()}'

if name == 'main ': app.run(debug=True)

 

Экзаменационный билет №8

Теоретическая часть

  1. Что такое адаптивная верстка и как она реализуется?
  2. Что такое SQL и зачем он нужен?

Ответы на теоретическую часть:

  1. Адаптивная верстка — это подход, при котором сайт корректно отображается на всех устройствах. Используются медиа-запросы, Flexbox и Grid.

  2. SQL — язык запросов для работы с базами данных. Позволяет выбирать, добавлять, удалять и обновлять данные.

Практическая часть

  1. Напишите HTML и CSS для создания карточки товара с изображением, заголовком и ценой.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Карточка товара</title> <style> .card { border: 1px solid #ccc; width: 200px; padding: 10px; text-align: center; } .card img { max-width: 100%; height: auto; } </style> </head> <body> <div class="card"> <img src="product.jpg" alt="Товар"> <h3>Название товара</h3> <p>Цена: 1000 руб.</p> </div> </body> </html>

  1. Напишите SQL-запрос, создающий таблицу "users" с полями id, name и email.

CREATE TABLE users ( id INTEGER PRIMARY KEY, name TEXT NOT NULL, email TEXT );

 

Экзаменационный билет №9

Теоретическая часть

  1. Что такое терминал и зачем он нужен разработчику?
  2. Что такое JSON и где он применяется?

Ответы на теоретическую часть:

  1. Терминал — это инструмент для выполнения команд, управления файлами и запуска программ. Он часто используется в разработке.

  2. JSON — формат обмена данными, используемый в API для передачи информации между клиентом и сервером.

Практическая часть

  1. Напишите HTML и JavaScript для проверки формы регистрации, которая не пропустит пустые поля.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Регистрация</title> </head> <body> <form onsubmit="return validateForm()"> <input type="text" id="username" placeholder="Имя"> <input type="password" id="password" placeholder="Пароль"> <button type="submit">Зарегистрироваться</button> </form> <script> function validateForm(event) { let username = document.getElementById('username').value.trim(); let password = document.getElementById('password').value.trim(); if (!username || !password) { alert('Заполните все поля'); return false; } return true; } </script> </body> </html>

  1. Напишите Python-скрипт, который подсчитывает количество чётных чисел в списке.

numbers = [1, 2, 3, 4, 5, 6] count = sum(1 for num in numbers if num % 2 == 0) print(count) # Выведет 3

 

Экзаменационный билет №10

Теоретическая часть

  1. Что такое функция в JavaScript и как её объявить?
  2. Что такое Agile и Scrum?

Ответы на теоретическую часть:

  1. Функция — это блок кода, который можно вызвать по имени. Объявляется через function или стрелочным способом.

  2. Agile — методология гибкой разработки. Scrum — одна из реализаций Agile, предполагающая работу в спринтах и использование ролей, таких как Product Owner и Scrum Master.

Практическая часть

  1. Напишите HTML-страницу с кнопкой, которая увеличивает число на экране при каждом нажатии.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Счётчик</title> </head> <body> <h1 id="counter">0</h1> <button onclick="increment()">+1</button> <script> let count = 0; function increment() { count++; document.getElementById('counter').innerText = count; } </script> </body> </html>

  1. Напишите SQL-запрос, который выбирает всех пользователей старше 25 лет.

SELECT * FROM users WHERE age > 25;

Экзаменационный билет №11

Теоретическая часть

  1. Что такое адаптивная верстка и какие инструменты используются в CSS для её реализации?
  2. Что такое список (list) в Python и как с ним работать?

Ответы на теоретическую часть:

  1. Адаптивная верстка — это подход, при котором сайт корректно отображается на всех устройствах. Используются Flexbox, Grid и медиа-запросы.

  2. Список в Python — это изменяемая последовательность элементов. Основные операции: добавление через append(), удаление через remove(), доступ по индексу.

Практическая часть

  1. Напишите HTML и CSS для создания карточки пользователя с аватаром, именем и кнопкой "Подписаться".

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Карточка пользователя</title> <style> .user-card { border: 1px solid #ccc; width: 200px; padding: 15px; text-align: center; font-family: Arial; } .user-card img { border-radius: 50%; width: 80px; height: 80px; object-fit: cover; } .subscribe-button { margin-top: 10px; padding: 6px 12px; background-color: #007bff; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="user-card"> <img src="avatar.jpg" alt="Аватар"> <h3>Иван Петров</h3> <button class="subscribe-button">Подписаться</button> </div> </body> </html>

  1. Напишите функцию на Python, которая принимает список чисел и возвращает новый список только с чётными числами.

def filter_even(numbers): return [num for num in numbers if num % 2 == 0]

print(filter_even([1, 2, 3, 4, 5, 6])) # Выведет [2, 4, 6]

Экзаменационный билет №12

Теоретическая часть

  1. Какие типы данных поддерживаются в JavaScript? Приведите примеры.
  2. Что такое SQL-инъекция и как от неё защититься?

Ответы на теоретическую часть:

  1. Типы данных: number, string, boolean, null, undefined, object, symbol. Например: let age = 25; let name = 'John'; let isActive = true;

  2. SQL-инъекция — это уязвимость, когда злоумышленник может выполнить собственный SQL-код. Защита: использование параметризованных запросов или ORM.

Практическая часть

  1. Создайте страницу с кнопкой, которая меняет цвет фона на случайный при каждом клике.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Случайный цвет</title> </head> <body> <button onclick="changeBackground()">Изменить фон</button> <script> function changeBackground() { document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16); } </script> </body> </html>

  1. Напишите маршрут Flask, который принимает число и выводит его квадрат.

from flask import Flask

app = Flask(name )

@app.route('/square/int:num ') def square(num): return f'Квадрат числа {num} равен {num ** 2}'

 

if name == 'main ': app.run(debug=True)

Экзаменационный билет №13

Теоретическая часть

  1. Что такое класс в CSS и как его использовать?
  2. Что такое HTTP-статус-коды и приведите несколько примеров?

Ответы на теоретическую часть:

  1. Класс — это CSS-селектор, который применяется к нескольким элементам. Обозначается точкой, например .button.

  2. HTTP-статус коды — это числовые ответы сервера. Например: 200 — OK, 404 — Not Found, 500 — Internal Server Error.

Практическая часть

  1. Напишите HTML-форму регистрации с полями имя и email, которые при отправке выводятся в консоли браузера.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Регистрация</title> </head> <body> <form id="registerForm"> <input type="text" id="name" placeholder="Имя"> <br><br> <input type="email" id="email" placeholder="Email"> <br><br> <button type="submit">Зарегистрироваться</button> </form> <script> document.getElementById('registerForm').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('name').value; const email = document.getElementById('email').value; console.log('Имя:', name); console.log('Email:', email); }); </script> </body> </html>

  1. Напишите SQL-запрос, который выбирает пользователей из таблицы users, у которых роль = admin.

SELECT * FROM users WHERE role = 'admin';

Экзаменационный билет №14

Теоретическая часть

  1. Что такое терминал и зачем он нужен веб-разработчику?
  2. Что такое JSON и где он используется?

Ответы на теоретическую часть:

  1. Терминал — это интерфейс командной строки, с помощью которого можно запускать скрипты, управлять файлами и взаимодействовать с Git.

  2. JSON — формат обмена данными, часто используемый в API для передачи информации между клиентом и сервером.

Практическая часть

  1. Напишите HTML и JavaScript код, который выводит количество символов введённого текста в реальном времени.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Счетчик символов</title> </head> <body> <textarea id="text" oninput="updateCounter()" placeholder="Введите текст..."></textarea> <p>Количество символов: <span id="counter">0</span></p> <script> function updateCounter() { const text = document.getElementById('text').value; const count = text.length; document.getElementById('counter').innerText = count; } </script> </body> </html>

  1. Напишите Python-функцию, которая принимает строку и возвращает эту строку в обратном порядке.

def reverse_string(s): return s[::-1]

print(reverse_string("привет")) # Выведет "тевирп"

Экзаменационный билет №15

Теоретическая часть

  1. Что такое DOM и как с ним взаимодействовать?
  2. Что такое GET и POST-запросы и чем они отличаются?

Ответы на теоретическую часть:

  1. DOM — это модель документа, которую можно редактировать с помощью JavaScript. Для взаимодействия используют методы вроде querySelector, getElementById, addEventListener.

  2. GET — отправляет данные в URL, видны всем. POST — отправляет данные в теле запроса, более безопасен.

Практическая часть

  1. Напишите HTML и JavaScript, чтобы при наведении на элемент DIV он менял цвет фона.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Hover эффект</title> <style> #hoverBox { width: 200px; height: 100px; background-color: lightgray; border: 1px solid black; transition: background-color 0.3s; } </style> </head> <body> <div id="hoverBox" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor='lightgray'"></div> </body> </html>

  1. Напишите SQL-запрос, который увеличивает возраст всех пользователей на 1.

UPDATE users SET age = age + 1;

(1)Кейс: "Ошибочная аутентификация в приложении"

Описание кейса:

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

  • Проект реализован на Express.js (серверная часть) и React.js (клиентская часть).
  • Сервер поддерживает REST API, куда клиент отправляет POST-запрос с логином и паролем.
  • Все поля формы заполнены верно, однако ответ от сервера приходит отрицательным: { error: "Неверный пароль" }.
  • Данные успешно проходят валидацию и достигают сервера, но не проходит аутентификация.

 Исходный код

Клиентская форма входа (React.js):

// LoginForm.jsx

import axios from 'axios';

const handleSubmit = async (event) => {

    event.preventDefault();

    const login = document.getElementById('login').value;

    const password = document.getElementById('password').value;

 

    try {

        const response = await axios.post('/auth/login', { login, password });

        localStorage.setItem('token', response.data.token);

        window.location.href = "/dashboard"; // Перенаправление на главную страницу

    } catch (err) {

        console.error('Ошибка входа:', err.response ? err.response.data : err.message);

    }

};

return (

    <form onSubmit={handleSubmit}>

        <label>Логин:</label>

        <input type="text" id="login"/>

        <label>Пароль:</label>

        <input type="password" id="password"/>

        <button type="submit">Войти</button>

    </form>

);

Обработчик аутентификации на сервере (Express.js):

// authController.js

const bcrypt = require('bcrypt');

const User = require('../models/User'); // Модель пользователя из MongoDB

 

exports.login = async (req, res) => {

    const { login, password } = req.body;

    try {

        const user = await User.findOne({ login });

        if (!user || !await bcrypt.compare(password, user.password)) {

            return res.status(401).json({ error: 'Неверный пароль' });

        }

        const token = generateAuthToken(user._id); // Генератор токена

        res.json({ token });

    } catch (err) {

        console.error('Ошибка аутентификации:', err);

        res.status(500).json({ error: 'Ошибка сервера' });

    }

};

 Анализ ситуации и выявление возможных проблем:

 Проблема №1: Неверная сериализация тела запроса

  • Проверка: убедитесь, что сервер получает именно тот объект, который ожидает.
  • Решение: добавьте логирование на сервере, чтобы проверить полученные данные.

 Проблема №2: Некорректная хэшировка пароля

  • Возможно, проблема в алгоритме хеширования паролей (bcrypt).
  • Проверьте правильность сохранения и сравнения хешированных паролей.

 Проблема №3: Несоответствие формата входных данных

  • Логины и пароли могут содержать пробелы или невидимые символы.
  • Решите это добавлением предварительной очистки полей на фронте и сервере.

Проблема №4: Конфликт версий библиотек

  • Иногда устаревшие версии npm-модулей приводят к ошибочным результатам.
  • Убедитесь, что установлены актуальные версии зависимых пакетов.

Итоговые рекомендации по доработке:

Корректируемый вариант обработчика на сервере:

// authController.js

const bcrypt = require('bcrypt');

const User = require('../models/User');

 

exports.login = async (req, res) => {

    const { login, password } = req.body;

 

    try {

        const user = await User.findOne({ login }).lean(); // Используем lean() для уменьшения объема данных

        if (!user) {

            return res.status(401).json({ error: 'Пользователь не найден' });

        }

 

        // Проверка наличия и соответствия пароля

        if (!(await bcrypt.compare(password.trim(), user.password))) {

            return res.status(401).json({ error: 'Неверный пароль' });

        }

 

        const token = generateAuthToken(user._id);

        res.json({ token });

    } catch (err) {

        console.error('Ошибка аутентификации:', err);

        res.status(500).json({ error: 'Ошибка сервера' });

    }

};

Улучшенная версия клиентской стороны:

// LoginForm.jsx

import axios from 'axios';

 

const handleSubmit = async (event) => {

    event.preventDefault();

    const login = document.getElementById('login').value.trim(); // Удаляем лишние пробелы

    const password = document.getElementById('password').value.trim();

 

    try {

        const response = await axios.post('/auth/login', { login, password });

        localStorage.setItem('token', response.data.token);

        window.location.href = "/dashboard";

    } catch (err) {

        console.error('Ошибка входа:', err.response ? err.response.data : err.message);

    }

};

 Обучающие моменты:

  • Работа с формами и передачей данных между клиентом и сервером.
  • Настройки middleware и механизмы защиты на сервере.
  • Использование механизмов аутентификации и авторизации.
  • Понимание стандартов REST API и работы с HTTP-кодами состояния.

 Дополнительные задания для самостоятельного изучения:

  • Реализуйте восстановление пароля через почту.
  • Доработайте защиту от brute force атак.
  • Добавьте систему сессий и remember me.
  • Научитесь использовать JWT (JSON Web Tokens) для безопасной передачи данных.

 

(2)Кейс: "Оптимизация загрузки больших картинок на сайте"

 

 Описание кейса:

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

Текущие технические детали:

  • Сайт разработан на Next.js (реактивный фронтенд).
  • Изображения хранятся на сервере AWS S3.
  • Размер файлов достигает до 10–15 MB.
  • Система пытается загрузить картинки полного размера сразу при открытии страницы.
  • Нет адаптивной стратегии для разных устройств.

 Пример страницы (упрощенный вид):

<!-- ArticlePage.jsx -->

import Image from 'next/image';

 

const ArticlePage = ({ article }) => {

    return (

        <>

            <h1>{article.title}</h1>

            <Image src={`/${article.image}`} alt={article.title} width={1920} height={1080} layout="responsive" />

            <p>{article.content}</p>

        </>

    );

};

 

export default ArticlePage;

 Возможные причины низкой скорости загрузки:

  1. Размер изображений — изображения большого веса замедляют загрузку.
  2. Неправильная стратегия ленивой загрузки — большие изображения начинают грузиться сразу при открытии страницы, что вызывает задержку.
  3. Недостаток адаптации под мобильные устройства — изображения предназначены для высоких разрешений и сильно увеличивают нагрузку на мобильный трафик.
  4. Неиспользование CDN — сеть доставки контента (CDN) может значительно ускорить доставку ресурсов пользователям.

Анализ и решение проблемы:

Решение №1: Оптимизация размеров изображений

  • Используйте сжатие изображений без потери качества (например, инструменты типа TinyPNG или ImageOptim).
  • Конвертировать изображения в современные форматы (WebP, AVIF), которые поддерживают высокие коэффициенты сжатия и сохраняют качество.

Решение №2: Ленивая загрузка изображений

  • Активируйте lazy loading на уровне Next.js или используйте нативную поддержку <img> тегов.

 Решение №3: Адаптация изображений под устройство

  • Генерируйте изображения разного размера заранее и отдавайте подходящие размеры клиенту в зависимости от ширины окна браузера (srcset и sizes атрибуты в изображениях).

 Решение №4: Использование CDN

  • Разместите статические ресурсы на CDN (Cloudflare, AWS CloudFront), чтобы сократить задержки и распределить нагрузку на контент ближе к конечному пользователю.

Рефакторинг кода:

Пример оптимального рендеринга изображений в Next.js:

// ArticlePage.jsx

import Image from 'next/image';

 

const ArticlePage = ({ article }) => {

    return (

        <>

            <h1>{article.title}</h1>

            <Image

                src={`${process.env.AWS_S3_URL}/${article.image}`}

                alt={article.title}

                placeholder="blur" // Предварительная заливка миниатюры

                blurDataURL={article.blurDataUrl} // Миниатюра низкого качества

                quality={75} // Качество изображения 75%

                layout="intrinsic"

                objectFit="cover"

                priority={false} // Не приоритетная загрузка

                loading="lazy" // Ленивая загрузка

            />

            <p>{article.content}</p>

        </>

    );

};

 

export default ArticlePage;

Изменения на сервере:

  • Создание миниатюр и оптимизированных копий изображений с разными размерами и качеством.
  • Применение механизма кеширования и использования ETags для повышения эффективности доставки контента.

 Итоги изменений:

  1. Значительное снижение среднего времени загрузки страницы.
  2. Повышение производительности и удобства использования сайта пользователями с мобильными устройствами.
  3. Более плавная прокрутка и отзывчивость страницы.

 Учебные моменты:

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

Дополнительные задания для студентов:

  • Исследуйте оптимальные настройки конфигурации CDN для ускорения доставки изображений.
  • Сделайте адаптивные стили для оптимальной презентации изображений на любых экранах.
  • Реализуйте отложенную загрузку остальных тяжёлых элементов страницы (видео, интерактивные элементы).

 

Ролевая игра №1: "Создание сайта для кафе"

Цель игры

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

Формат

Тип: Образовательная ролевая игра
Участники: 4–6 человек
Продолжительность: 3–4 академических часа
Материалы: доска, карточки ролей, шаблон макета сайта, редактор кода, браузер

Сеттинг

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

Роли в команде

Роль

Описание

Менеджер проекта

Планирует задачи, контролирует сроки, организует встречи

Дизайнер UX/UI

Создает макет страницы, выбирает цвета, шрифты, расположение элементов

Верстальщик

Пишет HTML и CSS, реализует дизайн в коде

Программист

Добавляет интерактивность через JavaScript

Тестировщик

Проверяет сайт на разных устройствах, ищет ошибки отображения и функционала

Контент-менеджер (по желанию)

Подбирает тексты, изображения, описания блюд

 

Этапы игры

Этап 1: Брифинг
Команда получает задание: создать главную страницу сайта кафе.
Менеджер делит работу на три фазы:

  • Фаза 1: Создание макета
  • Фаза 2: Верстка основных блоков
  • Фаза 3: Добавление интерактивности и тестирование

Этап 2: Разработка
Каждые 15 минут проводится короткая встреча:

  • Что сделано?
  • Что в работе?
  • Есть ли проблемы?

Этап 3: Презентация
Команда демонстрирует готовый сайт. Тестировщик показывает найденные ошибки. Дизайнер комментирует соответствие макета. Менеджер подводит итоги.

Обучающие эффекты

  • Основы работы с HTML, CSS и JavaScript
  • Командная работа и распределение ролей
  • Понимание жизненного цикла разработки сайта
  • Практическое применение адаптивной верстк

Возможные проблемы и вызовы

Проблема

Возможная причина

Как решить

Сайт не отображается правильно на мобильных устройствах

Не настроена адаптивность

Использовать media-запросы или Flexbox/Grid

Элементы «выпадают» из контейнера

Неправильное позиционирование

Перепроверить display и float

Кнопка меню не работает

JS не подключен или ошибка в коде

Проверить подключение скрипта, консоль браузера

Изображения не загружаются

Неправильный путь к файлам

Проверить src и структуру папок

Нет согласованности в дизайне

Отсутствует общий стиль

  

 

Ролевая игра №2: "Работа с Git в команде"

 

Цель игры

Научить студентов работать с системой контроля версий Git в командном проекте. Закрепить понимание веток, коммитов, слияния и разрешения конфликтов.

Формат

Тип: Образовательная ролевая игра
Участники: 4–6 человек
Продолжительность: 2–3 академических часа
Материалы: GitHub, терминал, текстовый редактор, задание по доработке сайта

Сеттинг

Вы — команда разработчиков, которая получила задание доработать существующий сайт. Все работаете над одним проектом на GitHub, но каждый выполняет свою часть. Необходимо использовать Git правильно, чтобы избежать потери данных и ошибок.

Роли в команде

Роль

Описание

Team Lead

Отвечает за структуру проекта и слияние веток

Разработчик 1

Делает новую страницу контактов

Разработчик 2

Добавляет форму обратной связи

Дизайнер

Обновляет стили CSS

Тестировщик

Проверяет изменения, ищет конфликты

DevOps (по желанию)

Запускает сайт после всех изменений

 

Этапы игры

Этап 1: Настройка проекта

  • Создайте fork репозитория
  • Настройте рабочее окружение
  • Создайте индивидуальные ветки

Этап 2: Параллельная работа

  • Каждый участник вносит изменения в свою ветку
  • Делает коммиты с описанием
  • Пушит изменения на GitHub

Этап 3: Слияние и тестирование

  • Team Lead объединяет все ветки в main
  • Разрешаются возможные конфликты
  • Тестировщик проверяет работу сайта

Обучающие эффекты

  • Навык использования Git в команде
  • Понимание ветвления и слияния
  • Работа с pull request и merge
  • Разрешение конфликтов при слиянии
  • Использование терминала и GitHub

Возможные проблемы и вызовы

Проблема

Возможная причина

Как решить

Конфликт в файлах

Два человека правили одно и то же место

Вручную выбрать нужные изменения

Нет доступа к репозиторию

Не склонирован или права не те

Проверить ссылку и авторизацию

Нет изменений после merge

Изменения были в другой ветке

Убедиться, что переключились на main

Ошибка в истории коммитов

Неправильный rebase или reset

Использовать git log для проверки

Нет push — изменения только локально

Не отправлены на сервер

Выполнить git push после коммита

 

Ролевая игра №3: "Стартап на скорости"

 

Цель игры

Закрепить знания по полному циклу создания MVP (минимально жизнеспособного продукта): от идеи до первого работающего прототипа с фронтендом, бэкендом и базой данных.

Формат

Тип: Образовательная ролевая игра
Участники: 4–6 человек
Продолжительность: 4 академических часа
Материалы: VSCode, Python, Flask, SQLite, HTML/CSS/JS, GitHub

Сеттинг

Вы — стартап-команда, которая участвует в хакатоне. За 4 часа нужно представить работающий MVP. Выберите идею (например, ToDo-лист, чат, каталог товаров), распределите роли и начните разработку.

Роли в команде

Роль

Описание

Product Owner

Определяет идею, приоритеты, следит за MVP

Frontend-разработчик

Делает интерфейс и взаимодействие с пользователем

Backend-разработчик

Реализует серверную логику

Разработчик БД

Создаёт структуру базы данных

Тестировщик

Проверяет работу, пишет список найденных багов

DevOps / Менеджер (по желанию)

Собирает всё вместе, помогает с деплоем

 

Этапы игры

Этап 1: Генерация идеи и планирование

  • Выбирается MVP (например, ToDo-приложение)
  • Прописываются минимальные функции
  • Распределяются роли

Этап 2: Разработка MVP

  • Фронтенд: HTML/CSS + JS
  • Бэкенд: Flask + маршруты
  • База данных: SQLite + CRUD
  • Тестирование и интеграция

Этап 3: Презентация MVP

  • Демонстрация минимального продукта
  • Обсуждение того, что получилось, а что не успели
  • Предложения по дальнейшему развитию

Обучающие эффекты

  • Полное понимание MVP
  • Умение работать в условиях ограниченного времени
  • Интеграция фронтенда, бэкенда и базы данных
  • Практическое применение всех пройденных технологий
  • Командная работа и управление задачами

Возможные проблемы и вызовы

Проблема

Возможная причина

Как решить

Не успеваем сделать всё

Заложили слишком много функций

Сфокусируйтесь на MVP

API не отвечает

Ошибка в маршруте или логике

Проверьте выводы и обработку запросов

База данных не подключена

Неправильный путь или таблица не создана

Проверьте подключение и инициализацию

Нет связи между частями

Неправильные URL или параметры

Проверьте fetch/API и маршруты

Ошибки в коде JS

Неправильная логика или синтаксис

Используйте консоль

 

 

Интеллект-карта 1: Общая структура курса

Центральный узел:
Фуллстэк-разработчик (начальный уровень)

Ветки:

Основы веб-разработки

  • Клиент-серверная модель
  • Браузер и DevTools
  • HTTP и URL

HTML / CSS

  • Структура HTML-документа
  • Верстка страниц
  • Flexbox и Grid
  • Адаптивный дизайн

JavaScript

  • Переменные, условия, циклы
  • Функции и события
  • DOM и работа с формами
  • Добавление интерактивности

Python и бэкенд

  • Основы Python
  • Flask или FastAPI
  • Обработка запросов
  • Шаблонизация

Базы данных

  • Введение в SQL
  • Таблицы и запросы
  • CRUD
  • Подключение к приложению

Работа с Git

  • Репозиторий
  • Коммиты
  • Ветки
  • GitHub

Проектная работа

  • Выбор идеи
  • Создание фронтенда
  • Реализация бэкенда
  • Подключение БД
  • Деплой и презентация

Интеллект-карта 2: Поток разработки веб-приложения

Центральный узел:
Создание веб-приложения

Ветки:

Идея и планирование

  • Цель проекта
  • Описание функционала
  • Составление ТЗ

Подготовка среды

  • Установка редактора кода
  • Настройка Python и Flask
  • Подключение Gi

Разработка фронтенда

  • Верстка по макету
  • Стилизация через CSS
  • Добавление интерактивности на JS

Разработка бэкенда

  • Настройка маршрутов
  • Обработка GET/POST-запросов
  • Подключение шаблонов

Работа с базой данных

  • Создание таблиц
  • Запросы к БД
  • Интеграция с сервером

Тестирование

  • Проверка формы
  • Отладка
  • Проверка на разных устройствах

Деплой и презентация

  • Подготовка к публикации
  • Выбор хостинга
  • Презентация проекта

Интеллект-карта 3: Навыки Junior фуллстэк-разработчика

Центральный узел:
Навыки Junior фуллстэк-разработчика

Ветки:

Технические навыки

  • HTML / CSS
  • JavaScript
  • Python
  • Flask / FastAPI
  • SQL

Инструменты

  • VS Code
  • Git и GitHub
  • Terminal
  • Браузерные DevTools

Методологии

  • Agile (базовый уровень)
  • Scrum (основы)
  • Работа по задачам

Личностные качества

  • Самостоятельность
  • Коммуникация
  • Организованность
  • Готовность учиться

Портфолио и развитие

  • 3–5 собственных проектов
  • Резюме и профиль на GitHub
  • Участие в мини-проектах
  • Переход к среднему уровню

Интеллект-карта 4: Жизненный цикл веб-приложения

Центральный узел:
Жизненный цикл веб-приложения

Ветки:

Идея

  • Определение цели
  • Анализ аудитории
  • Сценарии использования

Проектирование

  • Макет страницы
  • Структура сайта
  • Архитектура приложения

Разработка

  • Верстка и оформление
  • Серверная логика
  • Подключение БД

Тестирование

  • Проверка функций
  • Поиск и исправление ошибок
  • Проверка на разных устройствах

Деплой

  • Подготовка к запуску
  • Выбор хостинга
  • Настройка домена

Сопровождение

  • Исправление багов
  • Обновление контента
  • Добавление новых функций

1. Учебное пособие

Название: Веб-разработка для начинающих: HTML, CSS и JavaScript
Автор: Джон Дакетт
Год издания: 2020
Краткое описание:
Популярное введение в фронтенд-разработку. Понятно и с множеством примеров объясняет основы HTML, CSS и JavaScript. Подходит для новичков, содержит наглядные схемы и практические задания.

2. Методические рекомендации

Название: Методика преподавания основ веб-разработки в системе профессионального образования
Автор: Министерство цифрового развития РФ / Центр IT-образования
Год издания: 2023
Краткое описание:
Методическое руководство для преподавателей, включающее структуру учебных модулей, планирование занятий, организацию проектной деятельности и критерии оценки знаний студентов.

3. Задачник

Название: Практикум по веб-разработке: задачи и решения для начинающих
Автор: Петров А.С., Соколов Д.А.
Год издания: 2021
Краткое описание:
Сборник упражнений по HTML, CSS, JavaScript и работе с Python на бэкенде. Содержит задания разного уровня сложности, тесты и эталонные решения для самопроверки.

4. Хрестоматия

Название: Чтения по веб-разработке: статьи, интервью и эссе от практиков
Составитель: Алексей Кузнецов
Год издания: 2020
Краткое описание:
Подборка текстов от веб-разработчиков, блогеров и менторов об истории создания сайтов, подходах к верстке, архитектуре приложений и культуре программирования. Полезна для расширения кругозора.

5. Научная литература

Название: Основы веб-технологий: от HTML до серверных решений
Автор: Таненбаум Эндрю С., Мол Дж.
Год издания: 2019
Краткое описание:
Фундаментальное издание, рассматривающее устройство интернета, работу браузера, протоколы HTTP/HTTPS, клиент-серверное взаимодействие и архитектуру веб-приложений. Отличный справочник для понимания основ.

 

  1. Основы веб-разработки: с нуля до первого сайта
    Изучите HTML, CSS и JavaScript, создайте свой первый сайт и разберитесь в основах клиент-серверного взаимодействия.

  2. Фуллстэк-разработчик за 80 часов: путь новичка к проектам
    Практический курс по фронтенду и бэкенду с финальным проектом — готовое веб-приложение от идеи до деплоя.

  3. Веб-разработка для начинающих: теория + практика
    Курс для тех, кто хочет освоить профессию без предварительных знаний. Включает верстку, логику и работу с базами данных.

  4. HTML и CSS: создание адаптивных сайтов с нуля
    Освойте структуру и оформление страниц, научитесь делать сайты, которые корректно отображаются на всех устройствах.

  5. JavaScript для новичков: интерактивность в действии
    Научитесь добавлять динамику на страницы: обрабатывать клики, менять контент и валидировать формы.

  6. Python в вебе: от начала до бэкенда
    Курс по Python и его применению в серверной части веб-приложений. Изучите Flask или FastAPI и создайте API.

  7. Работа с базами данных для веб-разработчика
    Познакомьтесь с SQL, научитесь создавать таблицы, выполнять запросы и подключать БД к своим приложениям.

  8. Git и GitHub: контроль версий для начинающих
    Освойте базовые команды Git, работайте с репозиториями и участвуйте в совместной разработке.

  9. Создание веб-приложений с нуля: от макета до запуска
    Курс по полному циклу разработки: от дизайна до финального деплоя. Создайте полноценный сайт с формами и данными.

  10. Фуллстэк Junior: первые шаги в профессии
    Стартовый курс для тех, кто хочет стать разработчиком. Включает все ключевые технологии и проектное обучение.

  11. Frontend с нуля: HTML, CSS и JavaScript за 40 часов
    Краткое, но глубокое погружение в клиентскую часть веб-разработки с практическими заданиями.

  12. Backend на Python: создание серверной части сайта
    Научитесь писать серверную логику, обрабатывать запросы и подключать базы данных через Python.

  13. Верстка по макету Figma: практика для начинающих
    Курс по точному воспроизведению дизайна в коде. Научитесь читать макеты и реализовывать их в HTML/CSS.

  14. Создание портфолио: мини-проекты для начинающих разработчиков
    Курс, направленный на сбор практических решений и демонстрацию своих навыков будущему работодателю.

  15. Разработка MVP: от идеи до работающего прототипа
    Научитесь создавать минимально жизнеспособные продукты и быстро выводить их в свет.

  16. Фуллстэк-разработка для школьников: первый опыт программирования
    Образовательный курс для подростков 13–17 лет, знакомящий с основами создания сайтов и приложений.

  17. Веб-разработка для гуманитариев: без страха и лишнего кода
    Курс для людей без технического образования. Объясняет сложное простым языком с акцентом на понимание.

  18. Тестирование и отладка веб-приложений: начальный уровень
    Освойте поиск ошибок, проверку функционала и подготовку приложения к публикации.

  19. Инструменты разработчика: терминал, VS Code, DevTools и другие
    Курс по работе с профессиональными инструментами, необходимыми каждому разработчику.

  20. REST API: как создать и использовать веб-интерфейсы
    Научитесь строить и использовать API для связи между фронтендом и бэкендом.

  21. Деплой сайтов: от localhost до интернета
    Курс по публикации сайтов в интернете. Разберете хостинг, домены и автоматизацию деплоя.

  22. Agile и Scrum для начинающих разработчиков
    Ознакомьтесь с популярными методологиями управления проектами и научитесь работать в командах.

  23. Фуллстэк Bootcamp: двухмесячный интенсив для новичков
    Интенсивное обучение с ежедневными задачами, проектами и обратной связью от преподавателей.

  24. Создание блога или портфолио на Flask и SQLite
    Курс по созданию персонального сайта с возможностью добавления записей, комментариев и навигации.

  25. Web Development Starter Pack: набор знаний для старта
    Минимальный, но достаточный набор технологий и подходов для начала карьеры веб-разработчика.

Заявка ученика, студента, слушателя
Заявка преподавателя, репетитора админу сети.
—
16:33
76
👍0
👎0
❤️0
😂0
😢0
👏0
0
Все Нет отзывов
5 0 
4 0 
3 0 
2 0 
1 0 
Загрузка...
Подписаться (1)
Загрузка...

Нет элементов для просмотра

или Вконтакте Facebook Яндекс Одноклассники
Гость
Отправить

Участвовать или создать

Участвовать или создать

Политика сайта

Посещая этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.