Front End Web Development Quiz

2 people completed this quiz and the average score was: 50%

Start »

By David Shariff

Blog @davidshariff

CSS:

ul {
    MaRGin: 10px;
}

Are CSS property names case-sensitive?

  • Yes
  • No

Does setting margin-top and margin-bottom have an affect on an inline element?

  • Yes
  • No

Does setting padding-top and padding-bottom on an inline element add to its dimensions?

  • Yes
  • No

If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?

  • Yes
  • No

The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.

  • True
  • False

In a HTML document, the pseudo class :root always refers to the <html> element.

  • True
  • False

The translate() function can move the position of an element on the z-axis.

  • True
  • False

HTML:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS:

ul {
    color: red;
}
li {
    color: blue;
}

What is the color of the text Sausage ?

  • Red
  • Blue
  • Neither

HTML:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS:

ul li {
    color: red;
}
#must-buy {
    color: blue;
}

What is the color of the text Sausage ?

  • Red
  • Blue
  • Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}
  • Red
  • Blue
  • Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}
  • Red
  • Blue
  • Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}
  • Red
  • Blue
  • Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}
  • Red
  • Blue
  • Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}
  • Red
  • Blue
  • Neither

HTML:

<p id="example">Hello</p>

CSS:

#example {
    margin-bottom: -5px;
}

What will happen to the position of #example?

  • It will move 5px downwards
  • All elements succeeding #example with move 5px upwards
  • Neither

HTML:

<p id="example">Hello</p>

CSS:

#example {
    margin-left: -5px;
}

What will happen to the position of #example?

  • It will move 5px left
  • All elements preceding #example with move 5px to the right
  • Neither

HTML:

<div id="test1">
    <span id="test2"></span>
</div>

CSS:

#i-am-useless {
    background-image: url('mypic.jpg');
}

Are unused style resources still downloaded by the browser?

  • Yes
  • No
  • Sometimes

HTML:

<div id="test1">
    <span id="test2"></span>
</div>

CSS:

#test2 {
    background-image: url('mypic.jpg');
    display: none;
}

On page load, will mypic.jpg get downloaded by the browser?

  • Yes
  • No

HTML:

<div id="test1">
    <span id="test2"></span>
</div>

CSS:

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

On page load, will mypic.jpg get downloaded by the browser?

  • Yes
  • No

CSS:

@media only screen and (max-width: 1024px) {
    margin: 0;
}

What is the use of the only selector?

  • Stops older browsers from parsing the remainder of the selector
  • Apply the style for screen only and ignore the device max-width
  • It does nothing

HTML:

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

CSS:

div {
    overflow: hidden;
}
p {
    float: left;
}

Does overflow: hidden create a new block formatting context?

  • Yes
  • No

CSS:

@media only screen and (max-width: 1024px) {
    margin: 0;
}

Does the screen keyword apply to the device's physical screen or the browser's viewport?

  • Device's physical screen
  • Browser's viewport

Is <keygen> a valid HTML5 tag?

  • Yes
  • No

Does the <bdo> tag change the direction of text?

  • Yes
  • No

HTML:

<figure>
	<img src="myimage.jpg" alt="My image">
	<figcaption>
		<p>This is my self portrait.</p>
	</figcaption>
</figure>

Is the above HTML valid?

  • Yes
  • No

In what situation should you use the <small> tag?

  • When you want to create subheading after a <h1> element
  • When you want to add copyright information inside a <footer>
  • Both situations

If a web page contains organic, multiple <h1> tags, will it affect the SEO negativley?

  • Yes
  • No

If you have a page of search results and want to highlight the search term, what HTML tag would you use?

  • <strong>
  • <mark>
  • <em>
  • <highlight>

HTML:

<article>
    <h1>Hello World</h1>
    <style scoped>
        p {
            color: #FF0;
        }
    </style>
    <p>This is my text</p>
</article>

<article>
    <h1>This is awesome</h1>
    <p>I am some other text</p>
</article>

What does the scoped attribute do?

  • Applies style rules to elements succeeding it, but with the same parent element
  • Applies style rules to all children of the scoped parent element
  • Applies style rules to IE browsers only
  • None of the above

HTML:

<article>
    <a href="#">
        <h1>Hello</h1>
        <p>I am some text</p>
    </a>
</article>

Does HTML5 support block-level links?

  • Yes
  • No

HTML:

<img src="mypic.jpg" style="visibility: hidden" alt="My picture">

Does the HTML above trigger a http request when the page first loads ?

  • Yes
  • No

HTML:

<div style="display: none;">
    <img src="mypic.jpg" alt="My photo">
</div>

Does the HTML above trigger a http request when the page first loads?

  • Yes
  • No

HTML:

<head>
    <link href="main1.css" rel="stylesheet">
    <script>
        alert('Hello World');
    </script>
</head>

Does main1.css have to be downloaded and parsed before Hello World is alerted?

  • Yes
  • No

HTML:

<head>
    <link href="main1.css" rel="stylesheet">
    <link href="main2.css" rel="stylesheet">
</head>

Does main1.css have to be downloaded and parsed before main2.css can be fetched?

  • Yes
  • No

HTML:

<head>
    <link href="main1.css" rel="stylesheet">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <link href="main2.css" rel="stylesheet">
</body>

Does main2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page?

  • Yes
  • No
"1" + 2 + "3" + 4;

What does the above statement evaluate to?

  • 10
  • 1234
  • 37
4 + 3 + 2 + "1"

What does the above statement evaluate to?

  • 10
  • 4321
  • 91
var foo = 1;
function bar() {
	foo = 10;
	return;
	function foo() {}
}
bar();
alert(foo);

What is alerted?

  • 1
  • 10
  • Function
  • undefined
  • Error
function bar() {
    return foo;
    foo = 10;
    function foo() {}
    var foo = 11;
}
alert(typeof bar());

What is alerted?

  • number
  • function
  • undefined
  • Error
var x = 3;

var foo = {
    x: 2,
    baz: {
        x: 1,
        bar: function() {
            return this.x;
        }
    }
}

var go = foo.baz.bar;

alert(go());
alert(foo.baz.bar());

What is the order of values alerted?

  • 1, 2
  • 1, 3
  • 2, 1
  • 2, 3
  • 3, 1
  • 3, 2
var x   = 4,
    obj = {
        x: 3,
        bar: function() {
            var x = 2;
            setTimeout(function() {
                var x = 1;
                alert(this.x);
            }, 1000);
        }
    };
obj.bar();

What value is alerted?

  • 1
  • 2
  • 3
  • 4
  • undefined
x = 1;
function bar() {
    this.x = 2;
    return x;
}
var foo = new bar();
alert(foo.x);

What value is alerted?

  • 1
  • 2
  • undefined
function foo(a) {
    alert(arguments.length);
}
foo(1, 2, 3);

What value is alerted?

  • 1
  • 2
  • 3
  • undefined
var foo = function bar() {}; 
alert(typeof bar);

What value is alerted?

  • function
  • object
  • undefined
var arr = [];
arr[0]  = 'a';
arr[1]  = 'b';
arr.foo = 'c';
alert(arr.length);

What value is alerted?

  • 1
  • 2
  • 3
  • undefined
function foo(a) {
    arguments[0] = 2;
    alert(a);
}
foo(1);

What value is alerted?

  • 1
  • 2
  • undefined
function foo(){}
delete foo.length;
alert(typeof foo.length);

What value is alerted?

  • number
  • undefined
  • object
  • Error

You Scored: x%

The average score for this quiz was: 50%

Share Your Score:

Want to learn more? Check out my new eBook:

How to Become an Advanced Front End Developer

Blog @davidshariff

Continue »