Hooli є фіктивною корпорацією від Silicon Valley TV series. Багато хто вважає, що він імітує Google або Apple. Hooli на Silicon Valley fandom wiki. Це також представлено on the web.
Мета цього завдання — потренуватися в кодуванні HTML і CSS з макета. Очікується, що ви поглибите свої знання HTML і CSS і відкриєте нові невідомі раніше функції.
- ніякого JavaScript, лише HTML/CSS, дозволено використання препроцесорів
- ніяких зовнішніх бібліотек чи фреймворків
- підтримка веббраузера: лише Chrome (використовуйте найновіші фічі)
- очікується, що попап матиме три стани залежно від дій користувача:
- Переконайтеся, що ваша навігація побудована з усіма семантичними характеристиками rules.
- Рекомендуємо переглянути відео про приховування чекбоксу.
- Спробуйте стилізувати свої елементи за класами (а не за тегами HTML та ID).
- Не забудьте встановити атрибут
alt
для тегівimg
(якщо ви їх використовували). - Немає потреби додавати багато файлів (включно з icons, gitignore, configs тощо) до вашого PR. Файлів HTML і CSS буде достатньо для перевірки вашої роботи.
- Уникайте зовнішніх скриптів для значків шрифтів.
- Перевірте свій попередній перегляд у validator.
- Переконайтеся, що ви додали порожні рядки в кожен файл зі свого PR - reason. Якщо ви забудете додати порожній рядок у кінець файлу, GitHub покаже його:
- Перевірте свою роботу ще раз і видаліть усі зайві коментарі зі свого коду.
Вищезазначене може статися, якщо ваш дизайн імітує компоненти чи послуги Google оскільки вони можуть вирішити, що ви створили фішинговий сайт для крадіжки облікові дані Google ваших відвідувачів.
Щоб уникнути цього
- НЕ використовуйте слова «google», «apple», «amazon» чи будь-якого іншого бренду в
- назві вашого проєкту/репо
- будь-яких url
- будь-яких селекторах css
- будь-яких ідентифікаторах елементів HTML (включаючи створені за допомогою JS) або в іншому місці HTML
- НЕ повторюйте дизайн Google (структуру макета, стилі тощо)
- НЕ використовуйте іконки Google
Вам не потрібно робити свій дизайн на 100% ідентичним прикладам нижче. Реалізація механіки важливіша. Використовуйте приклади для довідки.
Початковий стан: попап не видимий:
Активний стан:
Розширений набір іконок, scrollable стан:
Усі інтерактивні елементи мають бути позначені як такі при наведенні (hover) миші
Усі інтерактивні елементи повинні мати стан :focus
.
Ви повинні мати можливість перемикатися між усіма інтерактивними елементами, використовуючи лише клавіатуру (без миші, не забувайте про стилі для стану :focus
)
Можете спокійно використовувати наші іконки.
Ви можете опублікувати свої результати на GitHub Pages
Після завершення виконайте наступне:
- Для цього завдання вам знадобиться review коду:
- Для студентів курсу Frontend 2022: будь ласка, дотримуйтесь цих інструкцій
- Для студентів p2p course: будь ласка, дотримуйтесь цих інструкцій
- Чудова робота! Діліться своїми досягненнями з іншими –
опублікувати повідомлення в course channel:
HTML-CSS-Popup — #done
(абоHTML-CSS-Popup — #p2p_done
якщо ви студент курсу p2p) і додайте посилання до свого репо. Цей крок важливий, оскільки він допомагає наставникам відстежувати ваш прогрес!
➡️ Ідіть далі JavaScript Basics