WEB-development

Практика студентов Финансового университета

Студенту необходимо сфоркать этот репозиторий к себе в репозитории github переименовав своей фамилией. (Вместо fa-wd-practice-javascript чтобы было Иванов)

Отправить в issue ссылку на свой репозиторий. Вот прям создаёте комментарий и вставляете ссылку типа github.com/Ivanov/Ivanov-web-development

Периодически выполнять задания из расчёта одна тема - один день. Темы раскиданы по папкам в которых нужно создавать требуемые в лабах файлики.

Решать всё сразу не приветствуется и может быть расценено как отсутствие желания к обучению. Будет понятно, что скопипастил. Не палитесь!

Основные темы семинаров (40 баллов максимум)

1. HTML CSS
2. SCSS
3. Bootstrap
4. JavaScript
   Переменные, типы данных Оператор ветвления if, циклы do, while, for Массивы Методы объекта, this. Конструкторы, создание объектов через new Классы и функции Стрелочные функции Функции высшего порядка Тип данных Symbol. Конструкция "switch" Работа с формами
5. JavaScript
   Игра Black Jack
6. API
7. React
   Метод render() Основы JSX Props, State и состояния Жизненный цикл компонента Формы
8. React Продвинутый
   Хуки Структура приложения Навигация и фильтрация Список дел Условный рендер Классовые компоненты
9. node.js npm babel

Балльно-рейтинговая система

Экзамены (60 баллов)

Практические задания на 20 баллов

Шпаргалки к тестированию на 40 баллов

Вопросы на экзамене

ответы

Теоретические вопросы к экзамену

Теоретические вопросы к экзамену 4

1. Понятие веб-технологий. Чем веб отличается от других сетевых служб? 4
2. Основные сетевые протоколы, использующиеся в вебе. 5
3. История развития веб-технологий. 6
4. Клиентская часть веб-приложений. Назначение, технологии, схема работы. 6
5. Серверная часть веб-приложений. Назначение, технологии, схема работы. 7
6. Необходимое программное обеспечения для работы веб-приложений. 8
7. Необходимое программное обеспечение для веб-разработки. 9
8. URL и URI. Понятие, различия, структура, примеры, использование. 11
9. Схема соединения по протоколу HTTP. 12
10. HTTP-запросы. Структура, примеры, использование, методы. 13
11. HTTP-ответы. Структура, примеры, поля ответа, использование. 14
12. Методы HTTP. Использование в современных API. 15
13. Общая характеристика языка HTML. Назначение, структура. Понятие тега. Виды тегов. 16
14. HTML5. Особенности, примеры тегов, назначение. Понятие семантических элементов. 17
15. HTML. Теги заголовка веб-страницы. 18
16. HTML. Теги форматирования текста. 19
17. HTML. Встроенные и блочные элементы. 20
18. HTML. Теги форматирования списков. 20
19. HTML. Таблицы. 21
20. HTML. Гиперссылки и якоря. 23
21. HTML. Универсальные атрибуты тегов. 24
22. HTML. Изображения, рисунки и мультимедиа. 25
23. HTML. Формы и поля ввода. 26
24. HTML. DOM. Дерево элементов. Основные понятия. 28
25. CSS. Понятие таблицы стилей, назначение, общая характеристика языка. 29
26. Способы подключения стилей к веб-страницы. Как выбрать правильный? 31
27. CSS. Селекторы. Виды селекторов. 32
28. CSS. Задание цвета элементов. Способы задания цветов. 34
29. CSS. Задание параметров шрифтов. 35
30. CSS. Задание параметров границ элементов. 35
31. CSS. Задание размеров блочных элементов. 36
32. CSS. Задание внутренних и внешних отступов блочных элементов. 37
33. CSS. Единицы измерения размеров. Преимущества и недостатки. 38
34. CSS. Выравнивание и позиционирование блочных элементов. 40
35. CSS. Способы позиционирования блочных элементов. 42
36. CSS. Псевдоклассы и псевдоэлементы. 43
37. CSS. Каскадность, наследование, приоритеты стилей. 44
38. CSS. Адаптивная верстка. 45
39. CSS. Flexbox. Основные понятия, структура, примеры свойств. 46
40. CSS. Grid. Основные понятия, структура, примеры свойств. 47
41. CSS. Препроцессоры: основные понятия, назначение, примеры кода на SASS или LESS. 49
42. Понятие CSS-фреймворков. Примеры, сравнение, назначение. 50
43. Bootstrap. назначение, общая характеристика, примеры работы. 51
44. Общая характеристика языка программирования JavaScript. 52
45. Клиентский JavaScript. Схема работы, назначение, примеры, способы связывания. 53
46. JavaScript. Инструкции, комментарии, объявление переменных. 54
47. JavaScript. Простые типы данных. 55
48. JavaScript. Базовые математические и логические операторы. 56
49. JavaScript. Операции со строками. 58
50. JavaScript. Массивы. Создание, использование, основные операции. 59
51. JavaScript. Условные операторы. 60
52. JavaScript. Операторы циклов. 60
53. JavaScript. Функции. 61
54. JavaScript. Обработка исключений. 62
55. JavaScript. Литерация объектов. JSON. 62
56. JavaScript. Классы в ES6. 63
57. JavaScript. Функции высших порядков. 64
58. JavaScript. Наследование. 64
59. JavaScript. Деструктуризация массивов и объектов. 65
60. JavaScript. Стрелочные функции. 65
61. JavaScript. Промисы. 66
62. DOM. Браузерное окружение в JavaScript. 67
63. DOM. Навигация. Способы нахождения элементов. Поиск по дереву. 67
64. DOM. Свойства узлов. Изменение свойств элементов. 68
65. DOM. Браузерные события. Обработчики событий. 69
66. DOM. Методы обхода дерева элементов. 70
67. DOM. Программное создание нового элемента и добавление его в дерево. 71

Третий вопрос - практическое задание

Создайте веб-страницу, на которой ваше имя будет выводиться на экран.

Создайте веб-страницу, которая выводит на экран числа от 1 до 10.

Создайте веб-страницу и установите для нее заголовок «Это веб-страница».

Создайте веб-страницу, на которой будет отображаться сообщение «Когда была создана эта веб-страница? Проверьте заголовок страницы для ответа». на экране и установите заголовок страницы на текущую дату.

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

Повторите упражнение № 5, но на этот раз включите в код заголовок.

Напечатайте свое имя зеленым цветом.

Выведите числа от 1 до 10, каждое число разного цвета.

Печатает ваше имя шрифтом Tahoma.

Напечатайте абзац из 4–5 предложений. Каждое предложение должно быть отдельным шрифтом.

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

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

Выведите квадраты чисел от 1 до 20. Каждое число должно быть на отдельной строке, рядом с ним цифра 2 в верхнем индексе, знак равенства и результат. (Пример: 10 2 = 100)

Печатает 10 имен с разрывом строки между каждым именем. Список должен быть упорядочен по алфавиту, и для этого поместите номер с индексом рядом с каждым именем в зависимости от того, где оно будет располагаться в алфавитном списке. (Пример: Алан 1 ). Сначала напечатайте неалфавитный список с индексом рядом с каждым именем, а затем алфавитный список. Оба списка должны иметь заголовок уровня

. Напечатайте два абзаца с отступом с использованием & nbsp; команду.

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

Печатает заголовок уровня h1, за которым следует горизонтальная линия шириной 100%. Под горизонтальной линией выведите абзац, относящийся к тексту заголовка.

Напечатайте предварительно отформатированный текст по вашему выбору. (подсказка: используйте тег

)

Распечатайте длинную цитату и короткую цитату. Укажите автора каждой цитаты.

Распечатайте удаленный и вставленный текст по вашему выбору.

Распечатайте список определений из 5 пунктов.

Выведите два адреса в том же формате, что и на лицевой стороне конвертов (адрес отправителя в верхнем левом углу, адрес получателя в центре).

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

Создайте несколько ссылок на различные поисковые системы (google, yahoo, altavista, lycos и т. Д.).

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

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

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

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

Отобразите пять разных изображений. Пропускайте две строки между изображениями. У каждого изображения должно быть название.

Отобразите изображение с рамкой размером 2, шириной 200 и высотой 200.

Отобразите изображение, которое при нажатии будет ссылаться на выбранную вами поисковую систему (должно открываться в новом окне).

Отобразите изображение, которое при нажатии будет ссылаться на себя и само будет отображать изображение в браузере.