Skip to content

Latest commit

 

History

History
115 lines (80 loc) · 7.69 KB

html-css-popup.md

File metadata and controls

115 lines (80 loc) · 7.69 KB

MIT Licensed Awesome        Telegram

HTML і CSS практика: Hooli-style Popup

Hooli є фіктивною корпорацією від Silicon Valley TV series. Багато хто вважає, що він імітує Google або Apple. Hooli на Silicon Valley fandom wiki. Це також представлено on the web.

Мета цього завдання — потренуватися в кодуванні HTML і CSS з макета. Очікується, що ви поглибите свої знання HTML і CSS і відкриєте нові невідомі раніше функції.

Вимоги

  • ніякого JavaScript, лише HTML/CSS, дозволено використання препроцесорів
  • ніяких зовнішніх бібліотек чи фреймворків
  • підтримка веббраузера: лише Chrome (використовуйте найновіші фічі)
  • очікується, що попап матиме три стани залежно від дій користувача:
    • початковий стан: попап не видно
    • після натискання на кнопку popup-button попап стає видимим або прихованим, якщо воно вже відкрите
    • натисніть кнопку "More", щоб додати ще від 3 до 10 іконок і робить вміст попапу доступним для скролу

Рекомендації

  • Переконайтеся, що ваша навігація побудована з усіма семантичними характеристиками rules.
  • Рекомендуємо переглянути відео про приховування чекбоксу.
  • Спробуйте стилізувати свої елементи за класами (а не за тегами HTML та ID).
  • Не забудьте встановити атрибут alt для тегів img (якщо ви їх використовували).
  • Немає потреби додавати багато файлів (включно з icons, gitignore, configs тощо) до вашого PR. Файлів HTML і CSS буде достатньо для перевірки вашої роботи.
  • Уникайте зовнішніх скриптів для значків шрифтів.
  • Перевірте свій попередній перегляд у validator.
  • Переконайтеся, що ви додали порожні рядки в кожен файл зі свого PR - reason. Якщо ви забудете додати порожній рядок у кінець файлу, GitHub покаже його:

Missed line

  • Перевірте свою роботу ще раз і видаліть усі зайві коментарі зі свого коду.

Увага

⚠️ Google-Warning

Вищезазначене може статися, якщо ваш дизайн імітує компоненти чи послуги Google оскільки вони можуть вирішити, що ви створили фішинговий сайт для крадіжки облікові дані Google ваших відвідувачів.

Щоб уникнути цього

  • НЕ використовуйте слова «google», «apple», «amazon» чи будь-якого іншого бренду в
    • назві вашого проєкту/репо
    • будь-яких url
    • будь-яких селекторах css
    • будь-яких ідентифікаторах елементів HTML (включаючи створені за допомогою JS) або в іншому місці HTML
  • НЕ повторюйте дизайн Google (структуру макета, стилі тощо)
  • НЕ використовуйте іконки Google

Приклади

Вам не потрібно робити свій дизайн на 100% ідентичним прикладам нижче. Реалізація механіки важливіша. Використовуйте приклади для довідки.

Початковий стан: попап не видимий:

popup-hidden

Активний стан:

popup-visible

Розширений набір іконок, scrollable стан:

popup-scrollable

Усі інтерактивні елементи мають бути позначені як такі при наведенні (hover) миші

popup-hover-state

Усі інтерактивні елементи повинні мати стан :focus.

popup-hover-state

Ви повинні мати можливість перемикатися між усіма інтерактивними елементами, використовуючи лише клавіатуру (без миші, не забувайте про стилі для стану :focus)

Можете спокійно використовувати наші іконки.

Ви можете опублікувати свої результати на GitHub Pages

Після завершення виконайте наступне:

  1. Для цього завдання вам знадобиться review коду:
  2. Чудова робота! Діліться своїми досягненнями з іншими – опублікувати повідомлення в course channel: HTML-CSS-Popup — #done (або HTML-CSS-Popup — #p2p_done якщо ви студент курсу p2p) і додайте посилання до свого репо. Цей крок важливий, оскільки він допомагає наставникам відстежувати ваш прогрес!

Готово?

➡️ Ідіть далі JavaScript Basics

⤴️ Повернутися до Contents