Вопросы для аттестации

Тема 1: Архитектура Интернет и сетевые протоколы

1. Что такое модель OSI и какие уровни она включает?

2. Опишите назначение транспортного уровня модели OSI.

3. Что представляет собой модель TCP/IP?

4. Каковы основные различия между моделями OSI и TCP/IP?

5. Что такое протокол HTTP? Основные характеристики.

6. Перечислите основные методы HTTP-запросов (не менее 4).

7. Что такое HTTP-коды состояния? Приведите примеры кодов из групп 2xx, 4xx, 5xx.

8. Для чего используются заголовки (headers) в HTTP?

9. Что такое HTTP-cookies и для каких целей они применяются?

10. В чем заключаются ключевые различия между HTTP и HTTPS?

11. Как работает механизм установки безопасного соединения по HTTPS?

12. Что такое DNS и какова его роль в работе Интернета?

13. Опишите процесс DNS-запроса.

14. Что такое клиент-серверная архитектура?

15. Каковы преимущества и недостатки клиент-серверной модели?

16. Опишите основные принципы работы веб-браузера.

17. Что такое веб-сервер? Назовите примеры (Apache, Nginx).

18. Каковы основные функции веб-сервера?

19. В чем разница между статическим и динамическим контентом?

20. Что такое IP-адрес и порт?

21. Опишите процесс выполнения HTTP-запроса от браузера до сервера.

22. Что такое URI и URL? В чем разница?

23. Для чего предназначен протокол UDP? В каких случаях он используется вместо TCP?

24. Что такое доменное имя и как оно связано с IP-адресом?

25. Опишите роль кэширования в веб-архитектуре.

26. Что такое CDN (Content Delivery Network) и как он работает?

27. Какие угрозы безопасности существуют на сетевом уровне?

28. Как веб-сервер обрабатывает несколько одновременных запросов?

29. Что такое виртуальный хостинг (Virtual Hosting)?

30. Опишите этапы жизненного цикла HTTP-запроса.

Тема 2: Процесс веб-разработки и рабочее окружение

1. Что такое жизненный цикл разработки программного обеспечения (SDLC)?

2. Назовите основные этапы (фазы) SDLC.

3. Что подразумевается под этапом "Проектирование" в веб-разработке?

4. Какие методы и подходы используются при проектировании структуры веб-приложения?

5. Что такое IDE? Приведите примеры популярных IDE для веб-разработки.

6. Каковы основные преимущества использования VS Code для разработки?

7. Для чего нужны инструменты разработчика (DevTools) в браузере?

8. Перечислите основные панели браузерных DevTools и их назначение.

9. Что такое прототипирование интерфейсов?

10. Какие инструменты используются для прототипирования (например, Figma)?

11. Что такое система контроля версий (VCS)?

12. Каковы основные преимущества использования системы контроля версий?

13. Что такое Git?

14. Опишите базовый рабочий процесс в Git (add, commit, push).

15. Что такое репозиторий в Git?

16. Какова цель использования веток (branches) в Git?

17. Что такое удаленный репозиторий (remote)?

18. Как выполнить клонирование удаленного репозитория в Git?

19. Что такое "коммит" (commit) в Git и какая информация ему сопутствует?

20. Для чего используется команда git status?

21. Как отправить изменения в удаленный репозиторий с помощью git push?

22. Что такое "конфликт слияния" (merge conflict) и как его разрешить?

23. Какова роль тестирования в процессе веб-разработки?

24. Что такое "отладка" (debugging) и какие инструменты для нее используются?

25. Какие существуют виды тестирования веб-приложений?

26. Что такое "непрерывная интеграция" (Continuous Integration)?

27. Как настройка рабочего окружения влияет на продуктивность разработчика?

28. Что такое "менеджер пакетов" (package manager)? Приведите примеры (npm, yarn).

29. Для чего используется файл package.json в проекте Node.js?

30. Опишите процесс развертывания (деплоя) простого веб-приложения.

Тема 3: Семантическая HTML-разметка и основы доступности

1. Что такое семантическая верстка и каковы ее преимущества?

2. Приведите примеры семантических HTML5 тегов.

3. Чем семантические теги лучше div и span?

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

5. Какой тег используется для навигации по сайту?

6. Что такое основной контент страницы и какой тег для него используется?

7. Какой тег обозначает боковую панель (сайдбар)?

8. Какой тег используется для нижнего колонтитула (футера)?

9. Что такое HTML-форма и для чего она предназначена?

10. Перечислите основные элементы формы (input, textarea, select, button).

11. Какие типы input существуют в HTML5 (приведите не менее 5 примеров)?

12. Как связать label с элементом формы?

13. Что такое валидация HTML-разметки и как ее проверить?

14. Что такое доступность (Accessibility) в веб-разработке?

15. Что такое WCAG и каковы его основные принципы?

16. Что такое ARIA-атрибуты и для чего они нужны?

17. Приведите примеры использования ARIA-атрибутов.

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

19. Что такое "скринридер" (screen reader) и как семантика помогает в его работе?

20. Какой атрибут используется для добавления альтернативного текста к изображению?

21. Что такое микроразметка?

22. Для чего предназначена микроразметка Schema.org?

23. Приведите пример использования микроразметки Schema.org для организации.

24. Как семантическая разметка влияет на SEO (поисковую оптимизацию)?

25. Что такое HTML5-атрибут required в формах?

26. Как задать заголовок для всей страницы?

27. Что такое HTML-сущности (entities) и для чего они используются?

28. Как создать многоуровневый список в HTML?

29. Как встроить видео на страницу с помощью HTML5?

30. Как встроить аудио на страницу с помощью HTML5?

Тема 4: Современный CSS: макеты и адаптивный дизайн

1. Что такое CSS и какова его роль в веб-разработке?

2. Какие существуют способы подключения CSS к HTML-документу?

3. Что такое CSS-селектор? Приведите примеры различных типов селекторов.

4. Что такое каскад в CSS?

5. Как работает наследование свойств в CSS?

6. Что такое специфичность CSS-селектора и как она рассчитывается?

7. Что такое блочная модель (Box Model) в CSS?

8. Опишите компоненты блочной модели (content, padding, border, margin).

9. Как свойство box-sizing влияет на расчет размеров элемента?

10. Что такое Flexbox и для решения каких задач он предназначен?

11. Назовите основные CSS-свойства для контейнера Flexbox.

12. Назовите основные CSS-свойства для элементов (flex-items) внутри Flexbox.

13. Что такое CSS Grid Layout и чем он отличается от Flexbox?

14. Как создать grid-сетку с помощью свойств grid-template-columns и grid-template-rows?

15. Что такое адаптивный веб-дизайн (Responsive Web Design)?

16. Что такое медиа-запросы (media queries) в CSS и для чего они используются?

17. Опишите подход "mobile-first" в адаптивном дизайне.

18. Какие единицы измерения в CSS относятся к относительным (relative units)?

19. Что такое CSS-переменные (custom properties) и как их использовать?

20. Что такое методология БЭМ (Блок, Элемент, Модификатор) в CSS?

21. Как поставить элемент в определенную позицию на странице? (Свойство position)

22. В чем разница между position: relative, absolute, fixed и sticky?

23. Как свойство z-index влияет на отображение элементов?

24. Как создать плавные переходы (transitions) в CSS?

25. Что такое CSS-анимации (animations) и как их создать?

26. Как скрыть элемент на странице с помощью CSS? (Различные способы)

27. Как сделать изображение адаптивным (реагирующим на размеры экрана)?

28. Что такое "векторная графика" и как использовать SVG в CSS?

29. Как создать многоуровневое выпадающее меню с помощью CSS?

30. Какие современные тенденции существуют в области CSS?

Тема 5: JavaScript: основы языка и работа с DOM

1. Что такое JavaScript и какова его основная роль в веб-разработке?

2. Какие способы подключения JavaScript к HTML-документу вы знаете?

3. Что такое переменная в JavaScript? Как объявить переменную (var, let, const)?

4. В чем разница между let, const и устаревшим var?

5. Какие примитивные типы данных существуют в JavaScript?

6. Что такое объект (Object) в JavaScript?

7. Как создать функцию в JavaScript? (Function Declaration, Function Expression, Arrow Function)

8. В чем отличие стрелочных функций от обычных?

9. Что такое область видимости (scope) в JavaScript?

10. Что такое замыкание (closure)? Приведите пример.

11. Что такое DOM (Document Object Model)?

12. Как выбрать элемент на странице с помощью JavaScript? (методы getElementById, querySelector и др.)

13. В чем разница между querySelector и querySelectorAll?

14. Как создать новый элемент и добавить его в DOM?

15. Как изменить текстовое содержимое элемента?

16. Как изменить HTML-содержимое элемента?

17. Как работать с атрибутами элемента (getAttribute, setAttribute)?

18. Как изменить CSS-стили элемента через JavaScript?

19. Как добавить класс к элементу и удалить класс?

20. Что такое событие (Event) в JavaScript?

21. Как добавить обработчик события к элементу?

22. Что такое объект события (Event Object) и какие свойства он содержит?

23. Что такое всплытие событий (Event Bubbling)?

24. Что такое делегирование событий (Event Delegation) и каковы его преимущества?

25. Как предотвратить поведение элемента по умолчанию (например, отправку формы)?

26. Как остановить всплытие события?

27. Что такое форма и как получить данные из полей формы с помощью JavaScript?

28. Как выполнить проверку (валидацию) данных формы на стороне клиента?

29. Что такое регулярные выражения (Regular Expressions) и как их использовать в JavaScript для проверки строк?

30. Как отладить JavaScript-код с помощью консоли браузера и точек останова (breakpoints)?

Тема 6: JavaScript: асинхронность и хранение данных

1. Что такое синхронное выполнение кода?

2. Что такое асинхронное выполнение кода и почему оно необходимо в JavaScript?

3. Что такое цикл событий (Event Loop) в JavaScript?

4. Что такое Callback-функция? Приведите пример.

5. В чем заключаются недостатки callback-функций (Callback Hell)?

6. Что такое Promise (Обещание) в JavaScript?

7. Какие состояния (states) может иметь Promise?

8. Как создать Promise?

9. Как обработать результат успешного выполнения Promise?

10. Как обработать ошибку в Promise?

11. Что такое async/await в JavaScript? Какова их цель?

12. Как обработать ошибки при использовании async/await?

13. Что такое AJAX и для чего он используется?

14. Что такое API?

15. Что такое Fetch API? Как с его помощью отправить GET-запрос?

16. Как отправить POST-запрос с данными с помощью Fetch API?

17. Как обработать ответ от сервера, полученный через Fetch API?

18. Что такое формат JSON? Как преобразовать объект JavaScript в JSON-строку и обратно?

19. Что такое XMLHttpRequest (XHR) и чем он отличается от Fetch API?

20. Что такое механизм хранения данных в браузере localStorage?

21. Как сохранить данные в localStorage?

22. Как получить данные из localStorage?

23. Как удалить данные из localStorage?

24. Что такое sessionStorage и чем оно отличается от localStorage?

25. Каковы ограничения по объему данных в localStorage и sessionStorage?

26. Какие типы данных можно хранить в localStorage?

27. Что такое Cookies? Чем они отличаются от localStorage и sessionStorage?

28. Как установить, прочитать и удалить Cookie с помощью JavaScript?

29. Что такое CORS (Cross-Origin Resource Sharing) и как он связан с AJAX-запросами?

30. Что такое Web Storage API и какие интерфейсы он включает?

Тема 7: Клиентские фреймворки: концепции и обзор

1. Что такое клиентский фреймворк или библиотека?

2. Каковы преимущества использования фреймворков перед нативным JavaScript?

3. Что такое SPA (Single Page Application) и каковы его характеристики?

4. Каковы преимущества и недостатки SPA по сравнению с MPA (Multi-Page Application)?

5. Что такое Virtual DOM (Виртуальный DOM) и какова его роль?

6. В чем заключается разница между реальным DOM и Virtual DOM?

7. Назовите три популярных современных клиентских фреймворка/библиотеки.

8. Что такое React? Является ли он фреймворком или библиотекой?

9. Что такое Vue.js? Каковы его ключевые особенности?

10. Что такое Angular? Чем он принципиально отличается от React и Vue?

11. Что такое компонентный подход в веб-разработке?

12. Что такое JSX? В каком фреймворке он primarily используется?

13. Каковы альтернативы JSX в React?

14. Что такое "однонаправленный поток данных" (one-way data flow)?

15. Что такое состояние (state) компонента?

16. Что такое свойства (props) компонента?

17. В чем разница между state и props?

18. Что такое жизненный цикл компонента (component lifecycle)?

19. Что такое условный рендеринг (conditional rendering)?

20. Что такое рендеринг списков (list rendering) и почему важен ключ (key)?

21. Что такое обработка событий (event handling) в контексте фреймворков?

22. Что такое PWA (Progressive Web App)?

23. Каковы основные характеристики PWA?

24. Что такое Service Worker и какова его роль в PWA?

25. Что такое Манифест веб-приложения (Web App Manifest)?

26. Какие критерии должны быть выполнены, чтобы приложение считалось PWA?

27. Что такое серверный рендеринг (SSR) и зачем он нужен?

28. Какие фреймворки поддерживают серверный рендеринг "из коробки"?

29. Что такое статическая генерация сайтов (Static Site Generation)?

30. Как выбрать подходящий фреймворк для проекта? Какие критерии важно учитывать?

Тема 8: Тестирование фронтенда и инструменты разработчика

1. Что такое тестирование программного обеспечения?

2. Какие основные виды тестирования применимы к фронтенду?

3. Что такое юнит-тестирование (unit testing)?

4. Что такое интеграционное тестирование (integration testing)?

5. Что такое end-to-end (E2E) тестирование?

6. Что такое Jest и для чего он используется?

7. Как написать простой юнит-тест с использованием Jest?

8. Что такое утверждение (assertion) в тестировании?

9. Что такое "test runner"?

10. Что такое инструменты разработчика (DevTools) в браузере?

11. Как открыть инструменты разработчика в браузере Google Chrome?

12. Для чего используется панель Elements (Инспектор) в DevTools?

13. Как с помощью DevTools исследовать и временно изменить CSS-стили элемента?

14. Для чего используется панель Console (Консоль) в DevTools?

15. Как отлаживать JavaScript-код с помощью панели Sources (Источники)?

16. Для чего используется панель Network (Сеть) в DevTools?

17. Как анализировать производительность загрузки страницы с помощью панели Network?

18. Что такое панель Performance (Производительность) и для чего она используется?

19. Как анализировать и отлаживать макет с помощью панели Layout/Flexbox/Grid в DevTools?

20. Для чего используется панель Application (Приложение) в DevTools?

21. Как просматривать и редактировать данные в localStorage и sessionStorage через DevTools?

22. Что такое "аудит доступности" (accessibility audit) и как его провести в DevTools?

23. Как эмулировать различные мобильные устройства и условия сети в DevTools?

24. Что такое Lighthouse и для чего он используется?

25. Какие метрики производительности измеряет Lighthouse?

26. Что такое Core Web Vitals? Назовите основные метрики.

27. Как провести аудит сайта с помощью Lighthouse?

28. Что такое "горячая перезагрузка" (Hot Reload) и как она помогает в разработке?

29. Какие расширения (plugins) для VS Code полезны для фронтенд-разработки и тестирования?

30. Как организовать процесс непрерывного тестирования в проекте?