Free Printable SQWS

Worksheets

SQWS

Total questions: 84

Worksheet time: 44mins

Name

Class

Date

The core purpose of HTML is to

(hint: something a pure text file with content won't be able to accomplish)

Display web page content to the user

Communicate the structure of the content

Tell the browser how to position and align content in the browser window

Tell the browser what should happen once the page is loaded

W3C (World Wide Web Consortium) is the only organization that dictates what and how browsers should implement HTML5

True

False

Question 2

WHATWG does NOT version HTML. For them, it's NOT HTML5. It's just HTML.

True

False

ALL HTML5 tags must

Have an opening tag

Have a closing tag

Have at least 1 attribute

Be lower case, i.e.,

Have an 'id' attribute

Identify correct HTML5 page declaration(s)

<html-document>

<!DOCTYPE html>

<! doctype html>

<!doctype html>

<!DocTyPe htML >

Question 2

What would happen if you didn't specify the HTML5 declaration?

The browser will revert to the previous version of HTML automatically

The page will be interpreted in quirks mode

The page will not display at all

Question 3

Browsers ALWAYS interpret HTML sequentially, top to bottom

True

False

Question 4

Identify invalid HTML code snippet below (assume code around it, i.e., declaration, etc. is valid)

<div>Hey there!

I am just a lonely quiz answer. Will you click me? I am bored!

</div>

<p>The sale numbers are in...

</section> You ARE a closer, Johnson!

</p>

<h2>Wow!

</h2>

<p>You're ignoring all the other answers just to

look at me?! I AM special!

...

Wait! Where are you going?

What if I AM the answer you've been searching for???!

</p>

</article>

<div><span>Will you just tag along with me?</span></div>

Meta tags communicate information about the browser to the server

TRUE

FALSE

10.

Question 6

Quirks Mode is when the browser

Can become unstable and crash in the middle of rendering a web page

Assumes that the HTML in the web page is NOT following the HTML standard, i.e., not in standards mode. Styles won't work correctly, etc.

This is a made up term. No such thing

11.

Without applying any additional styles, the following code snippet will show up in the browser as how many lines of text? (Assume the browser is stretched wide enough not to cause any single line to wrap)
<div>Dear all,

<span>I took this really cool course

</span></div>

<span>on Coursera.org. I think it's

my favorite course I've EVER taken!

Here is the URL for it:

</span>

<a href="...">HTML, CSS and JS for Web Developers</a>

<div>

Does anyone know how I can give this course 6

out of 5 stars?

</div>

<div>

Thank you,

-Yaakov.... I mean a random student! Definitely not Yaakov.

</div>

12.

Identify invalid HTML code snippet (assume code above and below this code is valid)

<div>I love <span>gardening!</span></div>

<span>I love <div>gardening</div></span>

<a>I love <div>gardening<span>!</span></div></a>

All are valid!

13.

Question 1

Semantic HTML tags

May help the SEO ranking of the page

Help computers better understand the structure of the page

Help humans better understand the structure of the page

Are required to be used in HTML5

14.

Question 1

One purpose of HTML Character Entity References is

To allow the browser to display certain characters it would otherwise interpret as part of HTML code and not something to display to the user

HTML Character Entity References were useful before HTML5 was introduced. After HTML5, they are no longer needed

Identify character sets that the browser can support

15.

Question 2

Using only HTML, how would you make sure that 3 words in an HTML document ALWAYS appear together on 1 line, even if the text word-wraps because the browser window is too narrow for that text line?

Impossible to accomplish with HTML alone!

Place &nowrap; entity reference before the 1st word and after the 3rd word

Place   entity reference after the 1st word and after the 2nd word (with no spaces in between words and entity references)

Place   entity reference before the 1st word and after the 3rd word

16.

How can you force the browser to open a link in a new window or tab?

Send some special meta tags as part of the page

Instruct the user to right-click on the link and choose "Open in a New Tab"

Include target='_blank' attribute as part of the <a> tag

Include target="new" attribute as part of the <a> tag

17.

The following code rendering in the middle section of the page allows someone to directly link to that middle section of the page, not just the beginning of the page:
<div id="superInterestingContentHere">Bla Bla</div>

True

False

18.

Even though the width and height attributes of the 'img' tag are not required, it's always a good idea to use them

True

False

19.

Question 1

In order to install Browser Sync, what must be installed first?

Google Chrome Developer Tools

Ruby

NodeJs

Java

20.

Question 1

If I miss an assignment deadline or fail an assignment, I fail the course.
(ДУМАЮ НЕ ПРИДЕТ,но похуй ^_^)

TRUE

FALSE

21.

Question 2

This is a completely self-paced course. The deadlines don't matter at all!
ДУМАЮ НЕ ПРИДЕТ,но похуй ^_^

TRUE

FALSE

22.

I can go through the course faster and complete it faster!
ДУМАЮ НЕ ПРИДЕТ,но похуй ^_^

TRUE

FALSE

23.

Question 4

Where can you get access to the example source code used in the course and the Lecture Slide PDFs?
ДУМАЮ НЕ ПРИДЕТ,но похуй ^_^

You CAN NOT have it! It's reserved only for special people. VERY special people! You can ask and beg on the discussion forums, but we still won't give it to you.

The link to the GitHub.com repository, which contains the example code used in this course, Lecture Slide PDFs, as well as assignment starter code is given to you in the first module under the title "ALL of the EXAMPLE SOURCE CODE for this Course".

24.

A stylesheet is a collection of CSS rules

True

False

25.

Question 2

Identify valid CSS rules (can be one or more)

p {

height: 23px;

font-size: 12px;

}

p { height: 23px; font-size: 12px; }

p = "height: 23px", "font-size: 12px";

p {

height = 23px,

font-size = 12px,

}

26.

Question 3

CSS is only allowed to have 1 property/value pair per each CSS rule

True

False

27.

A CSS rule can be applied to only one selector at a time.

True

False

28.

Question 2

A CSS rule has to be defined separately for each selector

True

False

29.

Given the following HTML code:

<div>

<p>I am feeling blue</p>

</div>

<p>I just want to be left alone!</p>

</section>

Which of the following CSS rules turns the text of the first <p> tag blue, but NOT the second <p> tag? (after all, the second one wants to be left alone.)

div > p {

color: blue;

}

div.p {

color: blue;

}

div p {

color: blue;

}

p {

color: blue;

}

30.

Given the following HTML code:
<div>

<div>

<p>I am feeling blue</p>

</div>

<p>I just want to be left alone!</p>

</section>

</div>
Which of the following CSS rules turns the text of the first <p> tag blue, but NOT the second <p> tag? (It still wants to be left alone.)

.makeMeBlue > p {

color: blue;

}

div.makeMeBlue p {

color: blue;

}

div > div > p {

color: blue;

}

div p {

color: blue;

}

31.

By default, a block-level element tries to take up as much horizontal space as its containing element will allow

True

False

32.

Given the following HTML code:

...

<body>

<div>Hello</div>

<span>World!</span>

</body>

...
and the following CSS code:

div, span {

background-color: blue;

}

The background color behind the words 'Hello' and 'World' is blue.

Both backgrounds will span the entire width of the browser window.

The div element's background will span the entire width of the browser.

The span element's background will span the entire width of the browser.

The text "World!" will appear on a separate line, below the text "Hello".

33.

Question 3

Given the following HTML code:

<a>

</a>

Which CSS rule below will set the font size of 'Div 5' text to 24px when the user hovers the mouse over ANY area inside the 'a' element?

(Not a very simple question, but good practice!)

a:hover:nth-child(5) {

font-size: 24px;

}

a:hover div:nth-child(5) {

font-size: 24px;

}

a:hover > div > div > div > div > div {

font-size: 24px;

}

div:hover {

font-size: 24px;

}

34.

It's a good idea to place all of your CSS styles into a separate file, external to the HTML page, because you can share the same styles across multiple HTML pages that way.

True

False

35.

Question 1

Given the following HTML code:
...

<body>

<div>

I am having a color identity crisis!

</section>

</div>

</body>

...

and the following CSS:
body {

color: blue;

}
What color will the words "I am having a color identity crisis!" be?

Blue

Whatever the default color the browser assigns to it since we didn't specify the color of the <section> tag

36.

Given the following HTML code:
...

<body>

<div>

I am having a color identity crisis again! Help!

</section>

</div>

</body>

...
and the following CSS:

#mySection {

color: green;

}

.myColor {

color: blue;

}

What color will the words "I am having a color identity crisis again! Help!" be?

Blue

Green

37.

Pixels are absolute units of measurements (as opposed to relative).

True

False

38.

Given the following HTML code:

...

<head>

<style>

body {

font-size: 30px;

}

</style>

</head>

<body>

</body>

...
What is the pixel size of the text "How big am I?", assuming the user did NOT increase zoom in the browser window?

90px

10px

1/3 of a pixel

39.

Assuming no other styles exist, how many pixels wide will the 'div' tag be with the following styles:

div {

padding: 10px 10px 10px 10px;

margin: 10px 10px 10px 10px;

width: 100px;

border: 10px solid black;

}

140px

160px

200px

100px

40.

Assuming no other styles exist, how many pixels wide will the 'div' tag be with with following styles:

div {

padding: 10px 10px 10px 10px;

margin: 10px 10px 10px 10px;

width: 100px;

border: 10px solid black;

box-sizing: border-box;

}

140px

160px

200px

100px

41.

Right margin of one element that touches the left margin of another element creates a combined margin that is equal to the sum of both margins.

True

False

42.

Question 4

Given the following HTML code:
...

<div style="margin-top: 20px;">...</div>
What will be the margin between the 2 'div' elements?

10px

20px

30px

43.

Given the following HTML code:
...

What will you see inside the div element?

Some image on top of a blue background

Blue background, but no image

Blue background will be covering the image

Just the image

44.

Floating elements takes them out of the regular document flow

True

False

45.

The following code:

section {

clear: right;

}

says that none of the section elements should allow anything to float to the right of them.

True

False

46.

Settings position: relative; on an element takes it out of regular document flow.

True

False

47.

By default, ALL HTML elements have their position property set to static.

True

False

48.

Given the following media query:
@media (min-width: 768px) and (max-width: 991px) {

...

}
The styles within this media query will apply if the browser window is 991px wide.

True

False

49.

Question 2

The usual approach to using media queries is to provide some base styling and then change and/or add to them within each media query.

True

False

50.

Question 1

Most responsive frameworks use a 12-grid layout

True

False

51.

To have a 12-grid layout means that 1 cell in that grid has width: 8.33% (100 / 12)

True

False

52.

Question 3

The following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Tells the browser to consider the width of the device as the real width of the screen and set its zoom level to 1, i.e., 100%, so it's not zoomed in or zoomed out.

True

False

53.

Twitter Bootstrap is one of the most popular CSS frameworks today

True

False

54.

This Bootstrap Grid class: col-md-6 means that the element to which it is applied should stretch to be 50% of the browser screen and collapse/stack below a certain browser screen width (hinted to by the 'md' qualifier).

True

False

55.

The Bootstrap Grid requires us to only use 'div' elements for each grid cell.

True

False

56.

Bootstrap Grid has to be defined inside of some parent element which has its class set to either 'container' or 'container-fluid'.

True

False

57.

When first starting a website project, it's best to jump to coding the website as soon as possible. Once you generate the views in HTML, show them to the client to see if they would approve.

True

False

58.

Mockup illustration of the website must be an exact replica of what you are going to build in HTML/CSS.

True

False

59.

The class 'container-fluid' stretches to the full width of the browser window (minus some margins) and automatically adjusts its width as you change the width of the browser.

True

False

60.

Question 1

Given the following HTML code snippet:

<button

type="button"

data-toggle="collapse"

data-target="#collapsable-nav"

...

</button>

What should go into the 'id' field of the collapsable menu in order to cause the 'button' click to show the menu?

collapsable-nav

#collapsable-nav

collapse

button

61.

One way to load a different size image depending on the browser width is to use 'background-image' CSS property and load a different 'url' in different media queries.

True

False

62.

Given the following HTML code snippet:

...

</div>

How many columns will it produce when the browser screen is 1,000px wide (i.e., 'md')

63.

Question 2

What Bootstrap class would you use in order to show an element on the page ONLY if the width of the browser window was below 768px (extra small or xs)?

visible-xs

show-xs

xs-show-true

display

64.

Question 1

Javascript is always executed sequentially

True

False

65.

Given the following HTML code snippet:

Is this HTML valid?

No, it's missing a closing 'script' tag. It must always be there.

Yes, the closing 'script' tag only needs to be there if javascript code is written in between the opening and closing 'script' tags.

66.

Identify valid Javascript code snippet(s)

var x = "Hello world!";

var x = function () {

console.log("Hello World");

return;

};

var x = function () {

console.log("Hello World");

return;

};

x();

var x = function () {

console.log("Hello World");

return;

};

x = "hello, I am a new value!";

var x = function ()

[

console.log("Hello World");

return;

];

67.

Question 1

An object in Javascript is simply a collection of name/value pairs.

True

False

68.

In Javascript, a primitive type can store only 1 name/value pair at a time.

True

False

69.

Strict equality operator (===) differs from regular equality operator (==) in that it checks if both values on its right and left are of the same type first. If they are not, it doesn't try to coerce them to be the same value and just returns false.

True

False

70.

Given the following Javascript code:

var x = 10;

if ( (null) || (console.log("Hello")) || x > 5 ) {

console.log("Hello");

}

How many times will the word 'Hello' be printed to the console?

71.

Defining a variable as an Object Literal accomplishes pretty much the same thing as defining a variable equal to 'new Object()'. However, it's faster and easier to type up an object literal.

True

False

72.

What is the output for the following Javascript code:

function makeMultiplier(multiplier) {

var myFunFunc = function (x) {

return multiplier * x;

};

return myFunFunc;

}

var operation = makeMultiplier(10);

console.log(operation(10));

100

73.

Javascript doesn't allow anything to be passed by reference

False

True

74.

What is the output of the following Javascript code:

var x = 5;

var y = x;

x = 10;

console.log(y);

undefined

null

75.

What is the output of the following Javascript code?

function Dog(name) {

this.name = name;

}

Dog.prototype.bark = function () {

console.log(this.name + " likes barking! Bark!");

}

var max = new Dog("Max", "Buddy");

max.bark();

Max likes barking! Bark!

Buddy likes barking! Bark!

It will produce an error

likes barking! Bark!

76.

What is the output of the following Javascript code:

var counter = 0;

var myArray = ["Yaakov", 2, {handle: "yaakovchaikin"}];

for (var i = 0; i < myArray.length; i++) {

counter++;

}

console.log(counter);

Nothing, there will be an error.

77.

Question 1

Immediately Invoked Function Expressions are usually used to place code into its own execution context not to conflict with the global scope.

True

False

78.

Given the following code:

(function(window) { var obj = {}; obj.dreamOn = function() { console.log("I want to see the global scope! Let me out!"); }; window.doer = obj; })(); doer.dreamOn();

What (if anything) is missing from this code in order to get it to output the message of the "dreamOn" method?

Nothing is missing. It will output "I want to see the global scope! Let me out!"

Line 1 and Line 9 should use 'global' instead of 'window'.

The function definition in Line 5 is missing an argument. It should accept an argument by the name of 'window

The attempted IIFE is not being invoked and passed in the window object. It's missing '(window)' Line 11 right before the semicolon

79.

One of the differences between a GET request and POST is that a GET request passes query parameters as part of the URL whereas POST request passes them as part of the body of the request.

True

False

80.

Given the following Javascript code snippet:

var name = "";

// Making an Ajax call here, i.e., sendGetRequest

$ajaxUtils.sendGetRequest("someURL", function (request) {

name = "Coursera";

});

document.querySelector("#content").innerHTML = name;

What will be the contents of the element with the 'id' value of 'content' after the execution of this Javascript code?

It will be empty

Coursera

Whatever the server returns plus the word Coursera

81.

Question 1

Another name for Object Literal is JSON.

True

False

82.

Question 2

Identify invalid JSON string below:

"courseName": "Coursera",

"startingNumberOfStudents": 12500

"courseName": "Coursera",

"studentsLoveCourse": true

'courseName': "Coursera",

'startingNumberOfStudents': 12500

"courseName": {"name": "Coursera"},

"startingNumberOfStudents": 12500

83.

Question 1

Given the following HTML code snippet:

and the following Javascript snippets:

Snippet 1:

console.log(document.getElementById("name").value

+ " Coursera!");

Snippet 2:

console.log(document.querySelector("#name").value

+ " Coursera!");

What will be the difference in the output between the 2 Javascript code snippets?

No difference

First one will not display the word 'Hi'

Second one will throw a Javascript error.

First one will throw a Javascript error.

84.

Question 2

What will the following code snippet accomplish?

...

<head>

document.addEventListener("DOMContentLoaded", function(event) {

console.log("Yey!");

});

</script>

</head>

<body>

...

<h1>Hello!</h1>

</body>

</html>

It will output Yey! when the web page is loaded, but before external resources like images are downloaded to the user's machine

It will output Yey! when the user hits the Reload browser button.

It will never output Yey!

It will output Yey! concurrently as the browser displays the 'h1' tag.

Reset

SQWS

Total questions: 84

Worksheet time: 44mins

Similar Resources on Wayground