On the Subject of Web Design

Welcome to web design class. The first rule of web design is: You do not talk about Comic Sans MS. The second rule is: You DO NOT talk about Comic Sans MS. The third rule is: The word “color” is NEVER spelled with a U.

• The module displays a snippet of a CSS file on a screen.
• Based on the information given, you have to Accept (✓), Consider (Δ), or Reject (✗) the code.

Step 1: Select the website

Find the website this code was quoted from. Use the Selector part of the code (the part before {) to narrow it down to one site, then note down its Threshold value.

Edison Daily (news site) Elements: body, a, h3, blockquote IDs: #header, #comments Classes: .post, .title, .author Threshold: #00FF00	Buddymaker (social media) Elements: div, span, img, a IDs: #msg, #cover, #content, #sidebar Classes: .post, .title, .share Threshold: #8040C0
PNGdrop (image hosting) Elements: div, img IDs: #main, #comments, #fullview Classes: .username, .share, .large Threshold: #BADA55	BobIRS (chatroom) Elements: ul, ol, img, b, i IDs: #sidebar Classes: .avatar, .username Threshold: #03E61E
Vidhost (video hosting) Elements: div, iframe, b, i IDs: #main, #rating, #comments Classes: .username, .share, .channel Threshold: #60061E	Go Team Falcon online (online game) Elements: body, iframe IDs: #rating, #comments Classes: .rating, .fullscreen Threshold: #501337
Stufflocker (cloud storage) Elements: div, h3, img, iframe IDs: #sidebar, #download Classes: .menu, .author Threshold: #B020E5	Steel Nexus (forum) Elements: body, div, img, blockquote IDs: #header, #content, #sidebar Classes: .avatar, .reply Threshold: #BEA61E

Step 2: Find the color target

Find the first color name in the CSS file, then use the following table to determine a hexadecimal value of that color. This value is the Color Target that you will need later. If no color name is displayed, use #7F7F7F.

Color	Hex value	Color	Hex value	Color	Hex value
Blue	#0000FF	Yellow	#FFFF00	Red	#FF0000
Green	#00FF00	White	#FFFFFF	Orange	#FFA500
Purple	#800080	Magenta	#FF00FF	Gray	#808080

Note: The hexadecimal value of a color is denoted in #RRGGBB format.

Step 3: Calculate site score

Calculate the site score as follows:

• Start with the number of lines of code inside the {curly braces}. Counting semi-colons is a good idea because it is a line terminator.
• +3 score each for:
  • R value of the Color Target is less than R value of the threshold.
  • G value of the Color Target is greater than or equal to G value of the threshold.
  • B value of the Color Target is greater than B value of the threshold.
• +2 score for each margin/padding.
• +1 score for each border/border-radius unless it’s 0px or 50%.
• -1 score for each z-index if there is no position anywhere on the module.
• +1 score for each font-family unless it’s "Comic Sans MS", which gives a -5 score.
• +2 score for each box-shadow/text-shadow unless it’s none.
• ×2 score if the buttons on the module are colored, or -3 score if they are gray.
  • If Colorblind Mode is enabled, instead score ×2 for white buttons, and -3 for black buttons.
• If your score is now negative or 0, keep adding 16 until it’s positive.
• Keep adding up the digits of the number until you are left with a single digit. Then use the following table to determine which button to push.

Accept (✓)	Consider (Δ)	Reject (✗)
2, 3, 5, 7	6, 8	1, 4, 9