HTML and CSS – Test 1

Test level: Beginner – Mid-Intermediate

Test time: (max) 30 minute

Questions:

1. If someone asked you to characterize the Web in 3 words, how would you respond?

2. How many tags/elements are required to build a web page?
(Hint: web page vs web Document; HTML tags vs HTML elements)

3. What is your favourite DOCTYPE and why?

4. True or false:

  • header is similar with the head element.
  • nav and header are sectioning elements.
  • hgroup is used to group h1-h6 elements.
  • nav and menu elements have the same functionality.

(Hint: http://www.w3.org/html/wg/drafts/html/master/dom.html )

5. What is the difference between: display:none; visibility:hidden; and hidden HTML attribute?

6. List some useful HTML(5) attributes (explain why they are useful, max. 5 attributes).

7. List some of the CSS position values, and explain their functionality.

8. What is the difference between CSS transitions and CSS animations?

9. consider the following HTML excerpt:

1  <ul>
2   <li> First element </li>
3   <li> Second element <li> <!-- We want to color this li here red -->
4   <li> Third element <li>
5  </ul>

Which one of the following CSS rules are correct:

1    ul :first-child + li {color: red;}
2    li:first-of-type + li {color: red;}
3    li:first-child ~ li {color:red;}
4    li:nth-child(2) {color:red}
5    ul > :first-of-type + li {color:red;}

6    ul :nth-child(even) {color:red;}
7    ul > li:not(:nth-child(odd)) {color:red;}

10.  We want to achieve this formatting inside a Web page:

Which of the following CSS rules are correct:

1    blockquote::before {content: ' ” '; font-size: 4em; position:absolute; left:2px; top:5px;} 
2    blockquote:before {content: ' ” '; font-size: 4em; position:absolute; left:2px; top:5px;}
3    blockquote::before {content: ' &rdquo; '; font-size: 4em; position:absolute; left:2px; top:5px;}
4    blockquote ~ :before {content: ' &rdquo; '; font-size: 4em; position:absolute; left:2px; top:5px;}
5    blockquote:before {content: ' \201D '; font-size: 4em; position:absolute; left:2px; top:5px;}