Завдання – Блок 1 (всі)
1.
+ Розробити web-сайт із трьома взаємопов'язаними сторінками, використовуючи елементи розмітки <header>, <main>, <footer>, <aside>, <article>, <section>
2.
+ Використати основні теги, кольори (колір тексту, фону тексту), абзаци, заголовки, шрифт (H1..H6), картинки, посилання(гіперпосилання на інший web-документ; гіперпосилання на інше місце в поточному доркументі), списки (нумерований, маркований, маркований список який вкладений в нумерований), мітки, засоби форматування тексту, таблиці, фон сторінки(колір, картинка). Розроботи «подвал»
3.
+ Включити в сайт всі відомі Вам мета-теги.
4.
+ Доповнити сайт єдиним стилем для всіх сторінок засобами CSS.
5.
+ Розглянути поняття: способи впровадження СSS в сторінку (Глобальні та Пов'язані стилі, задання CSS на льоту), селектор, клас, ID-селектори, шрифти, кольори, фон, вирівнювання, списки, кордони і рамки, курсори)
6.
+ Нарисувати структуру web-сайту, що вийшов.
Завдання – Блок 2 (3 з 4)
1.
- Доповнити свої web-сторінки елементом розмітки <nav> з горизонтальним випадаючим меню.
2.
+ Реалізувати на своїй сторінці фрейм.
3.
+ Відобразити аудіо і відео на сторінці з одними елементами управління.
4.
+ Створити форму з використанням елементів datetime, email, tel, url, та використати атрибути перевірки введення даних у форму.
Завдання – Блок 3 (1 з 2)
1.
+ Ознайомитись із CSS властивостями для роботи з градієнтом, тінню, прозорістю та застосувати їх до зображення чи тексту (область застосування кожен студент обирає самостійно).
2.
+ Ознайомитись та застосувати універсальний селектор *, дочірній селектор та селектори псевдокласів (не менше, ніж для 3-х різних елементів). Завдання – Блок 1 (всі)
1.
+ Розташуйте ваш контент на сторінках з лабораторної роботи №1 згідно концепції CSS Grid Layout (повинна бути виконана без зміни структури HTML-документа)
2.
+ Модифікувати CSS-файл згідно з БЕМ-методологією
Завдання – Блок 2 (всі)
1.
- Реалізувати додаткову сторінку зі структурою, що надасть викладач, використовуючи CSS Grid Layout.
2.
+ Виконати умови щодо відображення сторінки із попереднього завдання на мобільних пристроях з різною орієнтацією екрана.
3.
+ У будь-якому з куточків сторінки розмістити fixed елемент, який деформується при наведенні на нього мишкою.
Завдання – Блок 3 (2)
1.
. За допомогою медіа-запитів та СSS організуйте відображення навігаційного меню, як “sandwich” для девайсів з шириною екрана 320px.
2.
. За допомогою CSS створіть галерею з анімацією зображень (наприклад, при наведенні мишею на зображення — воно збільшується та стає насиченішим) та встановіть для зображень додаткові стильові рішення для забезпечення їх адаптивності.
3.
. Хлібні крихти - додати сторінку як показано на рисунку нижче. Документ повинен коректно відображатися у всіх сучасних браузерах, в IE8 і нижче.
4.
+ За допомогою CSS створити індикатор прогресу.
5.
. Створити стилізовані чек-бокси, використовуючи HTML і CSS.
6.
. Створити блок з тінню фіксованого розміру, в якому відображається картинка з тінню. Код повинен коректно працювати у всіх сучасних браузерах.
7.
+ Створити простий годинник з рухомими стрілками, використовуючи HTML і CSS-анімацію. Для наочності можна збільшити швидкість руху стрілки.
8.
. Зобразити спіраль, використовуючи HTML і CSS.
9.
. Створити акордеон з перемикаючими вкладками без використання JavaScript. Завдання – Блок 1 (всі)
1.
+ Створити функцію, яка виводить текст з різним розміром шрифту. Функція має два аргументи: текстовий рядок і розмір шрифту. Використовуйте style-властивість fontSize
2.
+ Використовуючи властивості елемента IMG style.top і style.left, зробіть сторінку, на якій невелика картинка кожну секунду виникає в новому місці екрану. Використовуйте setInterval.
3.
+ Знайти на сторінці всі <p> і змінити їх розмір на 15px. Використовувати getElementsByTagName, setAttribute
4.
+ Текстовий годинник – використовувати функції setInterval або setTimeout об'єкта window.
5.
+ Створити ефект поступового витирання (аналог фільтра) частини документа, використовуючи таймер.
Завдання – Блок 2 (4)
1.
. Реалізуйте спливаючу при натисканні підказку. Підказка сама повинна визначати напрями спливання, щоб не піти за межі екрану. При натисканні на будь-яке місце екрану (крім підказки) вона повинна сховатися.
2.
. Дана таблиця. Зробіть так, щоб можна було міняти колонки таблиці місцями.
3.
+ У лівому верхньому кутку екрану - список з п'яти кольорів. У правому верхньому куті - чорний квадрат. Колір квадрата можна поміняти, використовуючи список.
4.
+ Створіть сторінку, на якій в DIV-блок будуть виводиться поточні координати курсору мишки і код натиснутоюклавіші на клавіатурі.
5.
+ Создать сторінку, розмір тексту на якій можна змінювати за допомогою кнопок A + / A-. Вибір користувача запомнінать в cookie і при наступному вході на сторінку відразу відображати її запомненним розміром шрифту.
6.
+ Вивести на екран фразу, розфарбувавши її букви в заданий діапазон кольорів (якщо букв більше, ніж кольорів, то застосовувати кольори по колу).
7.
. Дано розмір іпотечного кредиту (S - 1 млн. грн.), процентна ставка (p - 10%), к-ть років (years - 5). Знайти переплату по кредиту, значення переплати повинно міститися у змінній perepl.
8.
. Побудуйте за допомогою циклів JavaScript скрипт для календаря на HTML. Примітка: виконати завдання для одного місяця, використовуючи HTML-елемент table.
9.
. Напишіть функції сортування sortByName і sortByHeight, які зможуть впорядкувати масив по іменах (в алфавітному порядку) або зростання (по спадаючій зростання). Викличте тільки функцію сортування по зростанню.
10.
. Реалізувати заборону перегляду HTML коду сторінки. Написати, як це можна обійти.
Завдання – Блок 3 (2)
1.
+ Нехай із заходу на сторінку показується певний рекламний текст. Поруч з ним зробіть кнопку 'прибрати', після натискання на яку цей рекламний текст не показується цьому користувачеві рівно один день.
2.
. Реалізуйте блокнотик, в який можна додавати нові записи. Записи з'являються зліва від блокнотик у вигляді посилань з текстом у вигляді датичасу створення цього запису. Можна натиснути на посилання і в блокноті з'явиться текст за цю дату. Записи зберігайте в локальному сховищі.
3.
. Зробити пред-перегляд web-сторінки HTML з різними темами. Тему сторінки вибирати через селектор на javascript, а показувати в фреймі.
4.
. Потрібно написати регулярний вираз для пошуку в тексті номера кредитної картки. Текст: "Іван вчора втратив свою кредитку, її номер 1178- 9087-2384-8787. Тому він пішов в банк і описав ситуацію. Там пішли йому назустріч і видали нову кредитку під номером: 1103-8899-0811-1722". При цьому номер кредитки потрібно не просто знайти, а витягнути в змінну result і вивести на екран.
5.
+ Звідки ви прийшли. Версія вашого браузера.
6.
. Розробити скрипт, щоб заборонити браузеру виділяти та копіювати текст.
7.
. Реалізувати завантаження вихідного коду web-сторінки.
8.
. Реалізувати скрипт знаходження інформації про фото: дата створення/зміни, розмір, власник.
9.
. Реалізувати скрипт для зворотного відліку часу (наприклад: через 1 хвилину вікно закриється).Створити декілька блоків на сайті.
Зробіть 3 ряди: в першому повинно знаходитися 2 блоки, у другому - 6, а в третьому - два блоки займають половину екрану і ще 3 блоки на половину, що залишилася.
Всі блоки повинні трансформуватися в залежності від розміру екрана.
При зменшенні до:
+ -md- в першому ряду - 2 блоки по 4 колонки,
+ -sm- в другому ряду - зникають непарні блоки,
+ -xs- в третьому ряду - замість 2-го блоку з'являється порожній простір.