Skip to content

Latest commit

 

History

History
115 lines (80 loc) · 5.05 KB

html-css-popup.md

File metadata and controls

115 lines (80 loc) · 5.05 KB
Raw

MIT Licensed Awesome        Telegram

HTML & CSS practice: Hooli-style Popup

Hooli is a fictitious corporation from Silicon Valley TV series. Many believe it impersonates Google or Apple. Hooli on Silicon Valley famdom wiki.

The goal of this task is to practice coding HTML & CSS from mockup. You are expected to deepen your knowledge of HTML & CSS and discover new previously unknown features.

Requirements

  • no JavaScript, only HTML/CSS, use of preprocessors is allowed
  • no external libraries or frameworks
  • browser support: Chrome only (feel free to use latest features)
  • the popup is expected to have three states depending on user actions:
    • initial state: popup menu is not visible
    • upon click on popup-button button the popup menu gets visible or gets hidden if already open
    • click on "More" button adds 3 to 10 more icons and makes the content of the popup scrollable
  • mobile view is irrelevant for this task

Recommendations

  • Make sure that your navigation is built with all semantic rules.
  • We recommend watching a video about hiding checkbox good parts.
  • Try to style your elements by classes (not by ID and HTML tags).
  • Don't forget to set the alt attribute for the img tags (if you used them).
  • No need to add a lot of files (inc. icons, gitignore, configs, etc) to your PR. HTML and CSS files would be enough for checking your work.
  • Avoid external scripts for the font icons.
  • Check your preview in the validator.
  • Make sure you've added empty lines in each file from your PR - reason. If you forget to add an empty line at the end of the file GitHub will show it:

Missed line

  • Check your work again and remove all redundant comments from your code.

Warning

⚠️ Google-Warning

The above may happen if your design mimics Google components or services as they may decide that you've created a phishing site to steal your visitors' Google credentials.

To avoid this

  • DO NOT use word "google", "apple", "amazon" or any other brand in
    • your project/repo name
    • any urls
    • any css selectors
    • any HTML elements ids (including created with JS) or elsewhere across HTML
  • DO NOT replicate Google design (layout structure, styles etc)
  • DO NOT use Google icons

Examples

You do not need to make your design 100% identical to the examples below. Implementation of the mechanics is more important. Use examples for your reference.

Initial state: no pop-up visible:

popup-hidden

Active state:

popup-visible

Expanded set of icons, scrollable state:

popup-scrollable

All interactive elements should be marked as such on mouse hover.

popup-hover-state

All interactive elements should have :focus state.

popup-hover-state

You'll must able to switch across all interactive elements using only keyboard(without a mouse, don't forget about styles for :focus state)

Feel free using our icons.

You may want to publish your results on GitHub Pages

When complete do the following:

  1. You will require code review for this task:
  2. Great job! Go ahead and share your progress with others – post a message in course channel: HTML-CSS-Popup — #done (or HTML-CSS-Popup — #p2p_done if you are p2p course student) and add the link to your repo. This step is important, as it helps mentors to track your progress!

Done?

➡️ Go forward to JavaScript Basics

⤴️ Back to Contents