Backend and Frontend Dev Test

Below is our test for prospective developers.

If youre applying for a Frontend development position, we consider the CSS, HTML and Javascript
sections to be particularly important. If youre applying for a Backend development position, we consider
the Algorithms, Development and MySQL sections to be particularly important. We use PHP and Python for
server-side code, but you can answer these questions in the language of your choice if you do not know
these languages well.
We favor accuracy highly, and wed rather you answer fewer questions with greater accuracy than
more questions with less accuracy. The questions become progressively harder through each section. If
youre applying for a Full Time position, we expect you to be able to answer the last questions in most
sections relevant for the position youre applying (Frontend or Backend). If youre applying for an
Internship, doing the same would be great but not required.
Make sure the code you send is functional, and does not have syntax errors. Using search engines
and online documentation is strongly encouraged.
Please fill the answers in this document.
Good luck!

[All] 0. Candidate details

Please fill in the following information - when applies - so we know you better.

[Backend] 1. Object-oriented programming, algorithms

1. What is your favorite programming language and why?
Javascript is my favorite programming language due to the expressiveness
accorded by the language owing to its functional nature.
2. What difference is there between class and instance variables?
Class variables are shared across all instances of a class while an
instance variable is applicable for a particular instance only.
3. Detail the steps of the Bubble sort algorithm applied to the following vector:
[celery, carrot, cabbage, tomato]
Bubble sort is done by repeatedly iterating through the vector, comparing
each pair of adjacent elements and swapping them if they are in the wrong
order. The list is repeated iterated till no more swaps are needed which
indicates that the list is sorted.
The vector will be sorted in alphabetic order. The elements being
compared will be highlighted in bold and underlined.
First Pass

---------["celery", carrot, cabbage, tomato] -> [carrot, "celery", cabbage, tomato]

[carrot, "celery", cabbage, tomato] -> [carrot, "cabbage", celery, tomato]
[carrot, "cabbage", celery, tomato] -> [carrot, "cabbage", celery, tomato]
Second Pass
----------[carrot, "cabbage", celery, tomato] -> ["cabbage", "carrot", celery, tomato]
["cabbage", "carrot", celery, tomato] -> ["cabbage", "carrot", celery, tomato]
["cabbage", "carrot", celery, tomato] -> ["cabbage", "carrot", celery, tomato]
Third Pass
---------["cabbage", "carrot", celery, tomato] -> ["cabbage", "carrot", celery, tomato]
["cabbage", "carrot", celery, tomato] -> ["cabbage", "carrot", celery, tomato]
["cabbage", "carrot", celery, tomato] -> ["cabbage", "carrot", celery, tomato]

4. We consider an array A[1...n]. Write a function that returns

(the largest difference in the array between a value and another value with a smaller index)
int maxDifference(int[] arr) {
int maxDiff = arr[1] arr[0] ;
int minNumber = arr[0] ;
for(int i = 1 ; i < arr.length ; i++) {
int diff = a[i] minNumber ;
if(diff > maxDiff) {
maxDiff = diff ;
}
if(a[i] < minNumber) {
minNumber = a[i] ;
}
}
return maxDiff ;
}

Time complexity = O(n)

5. An array A[1....n] is said to have a majority element if more than half of its entries are the same.
Given an array, design an efficient algorithm to tell whether the array has a majority element, and, if
so, to find that element. The elements of the array are not necessarily from some ordered domain
like the integers, and so there can be no comparisons of the form "is A[i] > A[j]?". However you can
answer questions of the form: "is A[i] = A[j]?" in constant time.
We can achieve this in two steps each with O(n) complexity.
In the first step we iterate through the array, cancelling out each
occurance of an element e with all the other elements that are different
from e then e will exist till the end if it is a majority element.
In the second step we just iterate through the array, counting each
occurance of the majority element found in step 1. If the count is more
than n/2, where n is the size of the array, then we have a majority
element.

Step 1 Find a probable majority candidate in an array a

-----1. Initialise majority element index and count.
majElemIndex = 0 and count = 1
2. Loop for i = 1 to length of array 1
(a) if(a[majElemIndex] == a[i])
count++
(b) Else
count-(c) if(count == 0)
majElemIndex = i
count = 1
3. Return a[majElemIndex]
Step 2 Verify if majority element obtained in step 1 is indeed majority
------1. Initialise count = 0 and majorityElement = value from Step 1
2. Loop for i = 1 to length of array 1
(a) if(majorityElement == a[i])
count++
3. If count > (length of array / 2)
print majority element
else
print none.

[Backend] 2. Programming
1. Give a regular expression that detects hexadecimal numbers in a text, for example 0x0f4,
0acdadecf822eeff32aca5830e438cb54aa722e3, 8BADF00D should be detected. Bonus points for
writing a test case.
Regular Expression in java

^(0x)?(?i)[\\dA-F]+$

import junit.framework.TestCase;
import java.util.regex.Pattern;
import java.util.regex.Matcher;
public class HexadecimalTest extends TestCase {
public HexadecimalTest(String testName) {
super(testName);
}
String[] testHexaData = {"0x0f4",
"0acdadecf822eeff32aca5830e438cb54aa722e3", "8BADF00D"};
String[] testNotHexaData = {"0x0f4m", "0a77v9ca5830e438cb5",
"8BADFOOD"};
Pattern pattern;
public void setUP() {
pattern = Pattern.compile("^(0x)?(?i)[\\dA-F]+$");
}
public void testHexa() {
for(int i = 0; i < testHexaData.length; i++) {
String message = testHexaData[i] + "is Hexadecimal";
assertEquals(message, true, isHexa(testHexaData[i]));
}
}
public void testNotHexa() {
for(int i = 0; i < testNotHexaData.length; i++) {
String message = testNotHexaData[i] + "is not Hexadecimal";
assertEquals(message, false, isHexa(testNotHexaData[i]));
}
}

private boolean isHexa(String text) {

Matcher match = pattern.matcher(text);
boolean isHexa = match.matches();
return isHexa;
}
}

2. Write two classes, one to represent a rectangle, the second a square. They must have an
appropriate constructor (width, height for the rectangle, width for the square) and area and
perimeter calculation methods. Code duplication must be avoided as much as possible. Please
explain your implementation choices.
public class Rectangle {
private float width;
private float height;
public Rectangle(float width, float height) {
this.width = width;
this.height = height;
}
public float area() {
float area = width * height;
return area;
}
public float perimeter() {
float perimeter = 2*(width+height);
return perimeter;
}
}
public class Square extends Rectangle {
private float width;
public Square(float width) {
super(width, width);
}
public float area() {
return super.area();
}
public float perimeter() {
return super.perimeter();
}
}

3. Write two functions, raiseException() and catchException(). raiseException() is a function that raises
an exception. catchException() calls raiseException() and handles the exception by displaying an
informative message.
public void raiseException() throws Exception {
throw new Exception("Exception Raised");
}
public void catchException() {
try{
raiseException();
}catch (Exception ex) {
System.out.println("Error : " + ex.getMessage());
}
}
4. Write a text sanitization function that cleans up a string for output. It should take a context_type
parameter in addition to the text to sanitize. context_type indicates the context in which its output
will be used (HTML text, HTML attribute or javascript string).
Can use encodeForHTML,encodeForHTMLAttribute and encodeForJavaScript
methods of class org.owasp.esapi.reference.DefaultEncoder
5. Write a function that given an XML document (as a string) returns the number of attributes for each
occurrence of the most common tag type. For instance, if the a tag is the most common in the
provided document, it should count the total number of attributes of all a tags in the document.
public static Map<String,Integer> getMaxOccurrenceTagsAndAttrCount(String
xml) throws ParserConfigurationException, SAXException, IOException {
/* Parse the input string into xml document */
DocumentBuilderFactory docFactory =
DocumentBuilderFactory.newInstance();
DocumentBuilder docBuilder = docFactory.newDocumentBuilder();
Document doc = docBuilder.parse(new InputSource(new
StringReader(xml)));
/* Create a map of all tags in the doc together with their frequency
of occurrence */
NodeList elementsInDoc = doc.getElementsByTagName("*");
Map<String,Integer> tags = new HashMap<String,Integer>();
for (int i=0; i<elementsInDoc.getLength(); i++) {
Element element = (Element)elementsInDoc.item(i);

if (!tags.containsKey(element.getNodeName())){
tags.put(element.getNodeName(),1);
} else {
Integer occurance = tags.get(element.getNodeName());
tags.put(element.getNodeName(), ++occurance);
}

/* Find the value of the highest occurrence in the map */

Integer maxOccurrence = (Integer) Collections.max(tags.values());
/* Get all the tags corresponding to the max occurance */
List<Object> tagsWithMaxOccurrence = getKeysFromValue(tags,
maxOccurrence);
/* Get the count of all the attributes for each tag with max

occurrence */
Map<String,Integer> tagsWithAttrCount = new HashMap<String,
Integer>();
for(Object tag : tagsWithMaxOccurrence) {
String tagName = tag.toString();
NodeList maxOccurrenceTag = doc.getElementsByTagName(tagName);
int attrCount = 0;
for(int i = 0; i < maxOccurrenceTag.getLength(); i++) {
Element elem = (Element)maxOccurrenceTag.item(i);
attrCount += elem.getAttributes().getLength();
}
tagsWithAttrCount.put(tagName, attrCount);
}
}

return tagsWithAttrCount;

private static List<Object> getKeysFromValue(Map<?, ?> map, Object value)

{
List <Object> list = new ArrayList<Object>();
for(Object o:map.keySet()){
if(map.get(o).equals(value)) {
list.add(o);
}
}
return list;
}
6. Here is the pseudo code of a function that is defined recursively:
f(0) = 1;
f(1) = 3;
f(n) = 3 * f(n - 1) - f(n - 2);
Provide an implementation for f. Bonus points for a non recursive implementation.
public int[] generateSeries(int n) {
int[] fibSeries = new int[n*2-1];
int[] series = new int[n];
int count = 0;
fibSeries[0] = series[0] = 1;
fibSeries[1] = 2;
for(int i = 2; i < fibSeries.length; i++) {
fibSeries[i] = fibSeries[i-1] + fibSeries[i-2];
if(i%2 == 0) {
series[++count] = fibSeries[i];
}
}
return series;
}

[Backend] 3. MySQL
1. Write a CREATE TABLE query for a table storing information on users. It will store id, firstname,
lastname, gender, email, created_at.
CREATE TABLE work4labs_users(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`first_name` VARCHAR(150) NOT NULL ,
`last_name` VARCHAR(150) NOT NULL ,
`gender` CHAR(1) NOT NULL ,
`email` VARCHAR(250) NOT NULL ,
`created_at` TIMESTAMP DEFAULT NOW()
);
2. Write a query on the previous table that lists the 10 most recently added users.
SELECT first_name, last_name FROM work4labs_users ORDER BY created_at
DESC LIMIT 10;
3. Write a query listing emails used by more than one user.
SELECT email FROM work4labs_users GROUP BY email HAVING COUNT(email) > 1;
4. Same question as (3), but using a LEFT JOIN instead of a GROUP BY operation.
SELECT DISTINCT user1.email FROM work4labs_users AS user1 LEFT JOIN
work4labs_users AS user2 ON user1.email = user2.email WHERE user1.id !=
user2.id;

[R&D] 4. Statistics
1. We study the impact of the wording of a button on a website to maximize the number of clicks from
users. A test phase on 2 buttons gives the following results: Button A => 201 users, 35 clicks, Button
B => 179 users, 23 clicks. What is the probability estimator of a click on button A? on button B?
Which button has the highest probability?
Probability estimator of a click on button A = (35/201) * 100 = 17.41%
Probability estimator of a click on button B = (23/179) * 100 = 12.85%
Button A has highest probability.
2. We study the efficiency of an ad placement on the web during a fixed timeframe T. Lets assume
that visitors are split into n groups. There are n products to advertise and n associated ads. We call
pi,j the probability of a click by a visitor from group i on the ad j.
a. Which variables would you use to describe the click probability? Which type of model would
you use? Why?
b. If N is the total number of times the ads were displayed, and xi,j is the number of times the ad
i was displayed on a visitor from group j, what is the likelihood of the global click probability?

[Both] 5. Javascript

1. Fill in the body of the sortByFoo function below. Executing the code should display true three times in
your browser.
function sortByFoo(tab)
{
// TODO: Fill in the code here, using Array.sort.
}

return tab;

// Sort by .foo attribute

console.log(sortByFoo(
[{foo: 5}, {foo: 7}, {foo: 4}, {foo: 3}, {foo: 2}, {foo: 1}, {foo: 6}]
)[5].foo === 6);
// Does not crash on an empty array
console.log(sortByFoo([]).length === 0);
// For objects without a `foo` attribute, its value should be considered equal
to '0'
console.log(sortByFoo([{foo: 42}, {bar: 7}, {foo: -5}])[1].bar === 7);
function sortByFoo(tab) {
Array.prototype.sort.apply(tab,[function compareFoo(first, second) {
var foo1 = typeof first.foo == 'undefined' ? 0 : first.foo;
var foo2 = typeof second.foo == 'undefined' ? 0 : second.foo;
return foo1 - foo2; }]);
return tab;
}
2. Finish the code below:
<html><head>
<script>
document.body.innerHTML = '
<div id="42" onclick="clicked(event)">1</div>
<div id="43" onclick="clicked(event)">2</div>
<div id="44" onclick="clicked(event)">3</div>';
function clicked(event)
{
// TODO: Fill in here. Use event.target.
// TODO: Display an alert containing the id of the clicked div
}
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html><head>
<script>
function init() {
document.body.innerHTML = '<div id="42" onclick="clicked(event)">1</div><div id="43"
onclick="clicked(event)">2</div><div id="44" onclick="clicked(event)">3</div>';
}
function clicked(event) {
// TODO: Fill in here. Use event.target.
// TODO: Display an alert containing the id of the clicked div
alert("Clicked div = " + event.target.id);
}

window.onload = init;
</script>
</head>
<body></body>
</html>
3. Rewrite the code above using DOM or jQuery calls instead of using innerHTML. If using jQuery, it will be
considered accessible in the $ variable.
<!DOCTYPE html>
<html><head>
<script>
function init() {
for(var id = 42; id < 45; id++) {
var div = document.createElement("div");
div.id = id + "";
var text = document.createTextNode(id-41);
div.appendChild(text);
document.body.appendChild(div);
}
var divTags = document.getElementsByTagName('div');
for(var i = 0; i < divTags.length; i++) {
divTags[i].addEventListener("click", clicked, false);
}
}
function clicked(event) {
alert("Clicked div = " + event.target.id);
}
window.onload = init;
</script>
</head>
<body></body>
</html>

4. Write a jQuery module that provides the following methods for setting CSS border properties:
$('#foo').border('1px solid blue');
$('#foo').border({width: '2px', color: 'red', radius: '1px'});
$('#foo').border(null);
$('#foo').border(); // Returns the value of the border property
(function ($) {
$.fn.border = function (param) {
if (typeof param == 'undefined') {
return $(this).css('border');
} else if (typeof param == 'string') {
return $(this).css('border',param);
} else if ($.isPlainObject(param)) {
var cssObject = {};
for (var property in param) {
if (param.hasOwnProperty(property)) {
cssObject['border-'+property] = param[property];
}
}
return $(this).css(cssObject);
} else if (param == null) {
return $(this).css('border','');
}
}
})(jQuery);
Note: $('#foo').border({width: '2px', color: 'red', radius: '1px'}); should have
style property also set like {style: 'solid'}, otherwise doesnt work when
tested in Chrome.

5. Code a slideUpAndOut(elem) javascript function that makes an element disappear by sliding

upwards and out of the page, without altering the layout and positioning of other elements in the page.
function getElementTop(element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;

while (current !== null) {

actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;

function
var
var
var

slideUpAndOut (elem) {
offsetPage = getElementTop(elem) + elem.offsetHeight;
top = parseInt(elem.style.top);
level = top - offsetPage;

var step = function () {

top += - 10;
elem.style.top = top + "px";
if (top > level) {
setTimeout(step, 20);
}

};
setTimeout(step, 20);
}
Note : It is assumed that the elements position it set to relative.

[Frontend] 6. XHTML / CSS

1..Write the HTML and CSS code necessary to render the document fragment below. It should fit in a
525px wide iframe. Rem: This question is the most important for this section

<!DOCTYPE html>
<html>
<head>
<title>Recommend Jobs</title>
<style type="text/css">
body {
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
vertical-align: baseline;
}
#page {
width: 500px;
border-bottom: 1px solid #6d84b4;
border-left: 1px solid #dbe0ec;
border-right: 1px solid #dbe0ec;}
h4 {
background-color: #eceef5;
border-top: 1px solid #6d84b4;
padding: 5px;
letter-spacing: 0.05em;
margin: 0px;}
.friend {
width: 145px;
float: left;
margin: 5px;
padding: 5px;}
.side {
position: relative;

top: -30px;
left: 60px;}
.shareButton {
position: relative;
top: -20px;
width: 45px;
font-size: 10px;
font-weight: bold;
font-family: inherit;
letter-spacing: 0.05em;
line-height: 13px;
background-color: #eee;
border: 1px solid #999;
border-bottom-color: #888;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
cursor: pointer;
padding: 2px 6px;
text-align: center;}
.seeContactsButton {
background-repeat: no-repeat;
background-color: #69A74E;
border-color: #3b6e22;
boder-bottom-color: #2c5115;
border: 2px outset buttonface;
-webkit-appearance: push-button;
color: #FFF;
width: auto;
padding: 4px 8px;
font-size: 11px;
font-weight: bold;
font-family: inherit;
letter-spacing: 0.05em;
line-height: 13px;
cursor: pointer;}
#contactsButton {
position: relative;
top: -20px;
width: 165px;
margin: 10px auto 0px auto;}
ul {
list-style-type: square;
width: 100%;
overflow: auto;
padding:25px;
padding-top:0px;
padding-bottom:0px;
margin-bottom: 0px;
}
li p, .lighten {
color: gray;}
.darken {
font-weight: bold;}
li p, .size {
font-size: 10px;
letter-spacing: 0.05em;}
li p {
margin-top: 0px;}
li {
width: 145px;
float: left;
margin: 5px;
margin-top: 2px;
margin-bottom: 0px;}
div[class="friend"] a {
font-weight:bold;

text-decoration:none;
letter-spacing: 0.05em;
padding-bottom: 5px;
display: block;}
li a {
text-decoration: none;
letter-spacing: 0.05em;}
</style>
</head>
<body>
<div id=page>
<h4>Your Friends Would be Perfect for this Job!</h4>
<div class="friend">
<a href="#">Guiohm Dev</a>
<div>
<img src="../images/Guiohm Dev.jpg" alt="Guiohm Dev" />
</div>
<div class="side"><span class="lighten size">Web Developer</span><br /> <span
class="darken size">Dev W4U</span></div>
<input class="shareButton"type="submit" value="Share" />
</div>
<div class="friend">
<a href="#">Guiohm Devv</a>
<div class="friendPhoto">
<img src="../images/Guiohm Devv.jpg" alt="Guiohm Devv" />
</div>
<div class="side"><span class="lighten size">Design</span> <br /> <span class="darken
size">Dev W4U</span></div>
<input class="shareButton"type="submit" value="Share" />
</div>
<div class="friend">
<a href="#">Simon Bouchez</a>
<div class="friendPhoto">
<img src="../images/Simon Bouchez.jpg" alt="Simon Bouchez" />
</div>
<div class="side"> <br /> <span class="darken size">Jobs for me</span></div>
<input class="shareButton"type="submit" value="Share" />
</div>
<div id="contactsButton">
<input class="seeContactsButton" type="submit" value="See my LinkedIn contacts" />
</div>
<h4>Other Jobs</h4>
<ul>
<li class="flow">
<a href="#">D&eacute;veloppeur <br /> PHP/MySQL </a>
<p>Paris</p>
</li>
<li class="flow">
<a href="#">Administrateur de <br /> serveur Linux (fr) </a>
<p>Paris</p>
</li>
<li class="flow">
<a href="#">Web Designer (fr) <div><br /></div></a>
<p>Paris</p>
</li>
<li class="flow">
<a href="#">Web Developer (Full <br /> time) </a>
<p>Paris</p>
</li>
<li class="flow">
<a href="#">Web Developer <br /> (Internship) </a>
<p>San Francisco</p>
</li>
<li class="flow">

<a href="#">Server Administrator<br /> (Linux) </a>

<p>Paris</p>
</li>
</ul>
</div>
</body>
</html>

2. In an XHTML document, when should you use class vs id attributes?

While an id attribute uniquely identifies an element in a page from other
elements in the same page, a class attribute identifies several elements as
being different to other elements on the page.
While using CSS, an id attibute facilitates styling an element differently from
other instances of the same element occuring on the same page.
For eg, an id attribute is ideal if on a page a paragraph say containing a pull
quote needs to be styled differently from all other paragraphs on the same page
while a class attribute is ideal in a scenario where we need to differentiate
between links that point to different pages on our own site and links that
point to external sites.
3. Explain what the following code means:
a:hover { font-weight: bold; }
When the user hovers over a link with a pointing device such as a mouse, it
causes the text in the link to appear in bold.
4. How would you apply a red color to the text of hyperlinks included in a bullet-point list which would itself
be contained in a table header cell.
th ul li a:link {color: red;}
5. In CSS2, how would you select all of the text fields of a form? What do you need to do for it to work in
IE6?
input[type="text"]
Since IE6 does not support attribute selectors, we can include a class
attribute for all the text fields say styleText and select it as follows,
.styleText
6. What differences are there between absolute and relative positionings?
Relative postioning moves an element in relation to where it woul have been in
the normal flow whereas absolute positioning removes an element from its normal
flow and moves an element in relation to its containing element.
7. Write the code for a javascript-less CSS menu interface. The interface (a menubar of sorts) will have
two menus, the first with 3 elements, the second with 10 elements. It must work in Google Chrome or any
webkit based browser. The choice of presentation is open, but must be well argued.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Menu</title>
<style type="text/css">
/** {

border: 1px solid black;}*/

body {
font-size: 13px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
letter-spacing: .05em;
direction: ltr;}
#page {
width: 940px;
height: 500px;
margin: 10px auto 10px auto;
padding: 0px;
border: 4px double #000;
background-color: #ffffff;}
ul {
list-style-type: none;}
li a {
text-decoration: none;
text-align: left;
outline: none;}
.navigation {
background: white;
border: 1px solid #333;
border-bottom: 2px solid #2D4486;
margin-right: -1px;
margin-top: -1px;
width: 100px;
position: absolute;
z-index: 1;}
ul[class="menu"] {
background-color: #3B5998;
margin: 0px;
height: 32px;}
ul[class="menu"] li {
display: inline-block;
padding-top: 15px;}
ul[class="menu"] li a {
color: white;
margin-right: 7px;}
ul[class="navigation"] {
display: none;}
ul[class="menu"] li:hover ul {
display: block;}
ul[class="navigation"] li {
width: 140%;
margin-left: 0px;
padding-bottom: 5px;
position: relative;
border-bottom: solid 1px #3B5998;
border-top: solid 1px #3B5998;
left: -40px;}
ul[class="navigation"] li a {
color: black;
padding-left: 8px;
width: 100%;}
ul[class="navigation"] li:hover, ul[class="navigation"] li:focus {
background: #6D84B4;
border-bottom: solid 1px #3B5998;
border-top: solid 1px #3B5998;
color: white;}
ul[class="navigation"] li:hover a {
color: white;}
</style>
</head>

<body>
<div id="page">
<div class="blueBar"></div>
<ul class="menu">
<li>
<a href="#">Menu1</a>
<ul class="navigation">
<li><a href="#">Menu1
<li><a href="#">Menu1
<li><a href="#">Menu1
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul class="navigation">
<li><a href="#">Menu2
<li><a href="#">Menu2
<li><a href="#">Menu2
<li><a href="#">Menu2
<li><a href="#">Menu2
<li><a href="#">Menu2
<li><a href="#">Menu2
<li><a href="#">Menu2
<li><a href="#">Menu2
<li><a href="#">Menu2
</ul>
</li>
</ul>
</div>
</body>
</html>

Item 1</a></li>
Item 2</a></li>
Item 3</a></li>

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

1</a></li>
2</a></li>
3</a></li>
4</a></li>
5</a></li>
6</a></li>
7</a></li>
8</a></li>
9</a></li>
10</a></li>

8. What does the following code mean? What does it display, and why?
<html><head><style>
#foo {
position: relative; overflow: hidden; background-color: red;
top: 10px; left: -50px; width: 100px; height: 100px;
}
div.bar {
position: absolute; background-color: blue;
height: 50px; width: 75px; bottom: 0px; right: -30px;
}
.foo {
float: right; background-color: green;
width: 30px; height: 30px; margin: 10px 0 30px;
}
span {
background-color: black; width: 50px; height: 400px;
}
</style></head>
<body>
<div id=foo>
<div class=bar></div><div class=foo></div><span></span>
</div>
</body></html>
There is a parent div of id foo which contains a div of class bar, another div
of class foo below it and a span element next to it. This is the normal flow
before any css styling is applied.
Let us see how div with id foo containing all other elements is styled. Its
position is declared relative. This means its position is in relation to where
it would have been in the normal flow. top, left offset the div by 10 px from
the top and -50 px to the left(it is off screen by 50 px). Its width and height
are set to 100 px. Since it has been offset by 50px to the left, it appears on
the screen as a rectangle with width 50px and height 100 px. Also appears as a
red rectangle since its background color is set to red. Its overflow is set to
hidden, meaning if any of its contained elements dimension exceeds this div,
then that content would be hidden.
Next let us see how the first child div with class bar is styled. Its postion
is absolute meaning it is positioned in relation to its containing element in
this case the div with id foo. It is a blue color rectangle of width 75 px and
height 50px. Since its bottom is 0px it touches the bottom of the #foo div and
also its right edge is shifted off the right edge of the #foo div by 30px.
Since its parent has overflow set to hidden the portion of rectangle outside
the #foo div will be hidden. So it will appear as a blue rectangle of width 45
px and height 50px at the right side bottom inside the red rectangle.
Next the div with class foo is floated to the right. So it appears as a green
square with length 30 px on the right side top of the #foo div. Also it appears
10 px below the top edge of #foo div as its margin top is set as 10 px, its
right edge touches #foo divs right edge as its right margin is set to 0px.
The next element span is not styled by chrome.

So finally, on a red rectangle, there appears a small green square on its right
most top and a blue rectangle on the bottom right edge.