Responsive Website Basics: Code with HTML, CSS, and JavaScript Quiz Answers

Get All Weeks Responsive Website Basics: Code with HTML, CSS, and JavaScript Quiz Answers

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity.

At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript.

In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

Enroll now on Coursera

Week 1: Responsive Website Basics: Code with HTML, CSS, and JavaScript Quiz Answers

Quiz 1: Web basics

Q1. A web browser is:

  • A server
  • A client

Q2. The world wide web is the same as the internet

  • TRUE
  • FALSE

Q3. HTML is used to define:

  • The structure of the page
  • The appearance of the page

Quiz 2: Set up the dev environment

Q1. HTML files end with: (choose ALL that are correct)

  • .html
  • .htm
  • .www

Q2. The first web page went live in:

  • 1980
  • 1990
  • 2000

Q3. Word processors are ideal for editing HTML

  • TRUE
  • FALSE

Quiz 3: HTML

Q1. In HTML, HT stands for:

  • Hypertext
  • High throughput

Q2. In HTML, ML stands for:

  • Markup language
  • Media language

Q3. True or False: The browser parses the HTML and decides how to display the page?

  • True
  • False

Quiz 4: Navigation bar

Q1. What is the purpose of a navigation bar?

  • It allows users to move around your website
  • It allows you to draw a line across the page

Q2. Why is whitespace important?

  • Since the browser ignores whitespace in an HTML document, you can clearly lay out the code without affecting how the web page will look.
  • It allows you to easily create spaces between the various parts of a web page.

Q3. What is the most important difference between HTML and most other document formats?

  • HTML allows you to make links from one document to another.
  • HTML allows you to separate navigation from content.

Quiz 5: Images and lists

Q1. Images are typically stored as separate files, not embedded in the HTML document.

  • True
  • False

Q2. What are HTML attributes for?

  • They let you create spaces between words
  • They let you provide extra information to the browser about a tag

Q3. True or False: HTML elements are hierarchical?

  • True
  • False

Quiz 6: Properly structured documents

Q1. True or False: h1 tags contain meta data?

  • True
  • False

Q2. In good practice, which tags should all HTML documents have? Please select all that apply.

  • html
  • body
  • head
  • a

Q3. What happens to a web browser if the HTML is not correctly structured?

  • It will definitely crash
  • It probably won’t crash

Quiz 7: The world’s first web page

Q1. True or False: The HTML language changes over time?

  • True
  • False

Q2. True or False: It is best to use capital letters for tags

  • True
  • False

Q3. 20 year old HTML documents can be read by modern web browsers

  • True
  • False

Quiz 8: HTML summary quiz

Q1. What is the head section of an HTML document used for? Select all that apply

  • Meta data that describes the content of the site.
  • The top part of the content that users will see when they visit the site.
  • The title of the document.
  • The brain of the web page.

Q2. Which are examples of badly formed HTML?

  • 1


  • 1
    1.  


  • 1

    Link


  • 1


Q3. Inspect the code of a website you use regularly. Which tags can you find?

  • 1
  • 1

     

  • 1
  • 1

Q4. Which tag should you use for a numbered list?

  • 1

     

    1. 1

       

      • 1

         

      • 1

      Q5. Which is the correct attribute to use to tell the browser where to find an image?

      • 1 href
      • 1 src
      • 1 &src;
      • 1

      Q6. Which are true about HTML documents?

    2. We use 1 tags to link from one document to another
    3. Web browsers use whitespace to layout the 00rendered page
    4. Q7. Concerning hyperlinks, which are true?
      • The browser underlines the text in an a tag
      • The browser makes the text in an a tag blue
      • Links only go one way
      • The browser guesses which page to go to if we put in a broken link address

      Q8. Select the code which creates a list of links:

    5. 1
      1.  home

         about

         contact



    6. 1
      1.  home
      2.  about
      3.  contact


    7. 1
    8.  home
    9.  about
    10.  contact

    11.  

      • 1
          
      • home </li href=”index.html”>
        1.  
        2. about</li href=”about.html”>

         

      • contact </li href=”contact.html”>

      Q9. Select the most correct structure for an HTML document:

      • 1      
      • 1     
      • 1      
      • 1

         

        title


           

      Q10. Which of the following tags are only associated with meta data? Select all that apply.

      • html
      • head
      • title
      • h1

      Week 2: Responsive Website Basics: Code with HTML, CSS, and JavaScript Quiz Answers

      Quiz 1: External CSS file

      Q1. What does CSS stand for?

      • Cascading style sheets
      • Custom style sheet

      Q2. What is the tag we use to add an external CSS file?

      • style
      • link

      Q3. What CSS property do I set to change the background colour of the page?

      • body
      • background

      Quiz 2: Fonts

      Q1. Which is not a font family?

      • Times New Roman Bold
      • Serif

      Q2. Which font is normally used to display code?

      • a monospaced font
      • A sans-serif font

      Quiz 3: Customising links

      Q1. Why should we customise links?

      • To get rid of the weird hand cursor
      • To emphasise to the user where the links are

      Q2. What is the purpose of a CSS selector?

      • It connects a set of CSS properties to things in the HTML document
      • It tells the browser which CSS file to load

      Q3. a:hover is a CSS selector to select links that the user is hovering over

      • TRUE
      • FALSE

      Quiz 4: Layout control

      Q1. CSS classes only apply to one type of tag

      • TRUE
      • FALSE

      Q2. HTML tags can have multiple classes

      • TRUE
      • FALSE

      Q3. Which of the following is a definition of a new CSS class?

      • .bold { font-weight:bold;}
      • bold { font-weight:bold;}
      • #bold { font-weight:bold;}

      Quiz 5: Install Bootstrap

      Q1. Why do we use bootstrap?

      • All websites should look the same for accessibility
      • To reset the browser’s default styles to a clean, modern state

      Q2. Bootstrap can be used along with my own CSS stylesheets

      • TRUE
      • FALSE

      Quiz 6: Responsive Grid

      Q1. How many columns are in a standard boostrap grid?

      • 10
      • 12

      Q2. How many col-md-3 columns fit in a standard boostrap grid?

      • 4
      • 3

      Q3. How many parameters does the border property shorthand normally have?

      • 3
      • 1

      Q4. Responsive web pages respond to user input

      • TRUE
      • FALSE

      Quiz 7: CSS summary quiz

      Q1. Select the correct way to link to an external CSS file

      Q2. Which of the following puts blue text on a red background? (select all that apply)

      • 1 color: #blue;

      2 background: #red;

      • 1 color: blue;

      2 background: red;

      • 1 color: #0000FF;

      2 background: #FF0000;

      • 1 font-color: blue;

      2 background-color: red;

      Q3. Which of the following is a serif font?

      • Times New Roman
      • Arial
      • Helvetica
      • Bold

      Q4. Which font would be used in the body region with the following CSS code?

      1

      2

      3

      4

      5

      6

      7

      .body { font-family: serif, sans-serif; }

      body {  font-family: sans-serif, serif; }

      • A sans-serif font
      • Times New Roman
      • Arial
      • A serif font

      Q5. What colour would the link text be with the following code:

      In your HTML:

      1 what colour am I?</a class="changeme">

      In your CSS:

      1

      2

      3

      4

      5

      6

      7

      a { color: blue; }

      .changeme {  color: red; }

      • red
      • green
      • blue
      • red with a green background

      Q6. What colour would the text ‘what colour am I’ be with the following code fragment in the CSS file:

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      a {  color: green; }

      .changemeagain {  color: yellow; }

      .changeme {  color: red; }

      and the following code fragment in the HTML file:

      1 what colour am I?</a class="changemeagain changeme">

      • red
      • green
      • blue
      • yellow

      Q7. How many columns are being used from the bootstrap grid here?

      1

      2

      3

      4

       </div class=”row”>

        

       </div class=”col-md-3″>

        

  • 1
  • 12
  • 4
  • 3

Q8. How many rows will you see on a very narrow screen such as a phone?

one
two
three
  • 1
  • 12
  • 3
  • 5

Q9. In this extract of a CSS file, what are the selectors? (select all that apply)

1

2

3

4

5

6

7

8

9

10

11

.test {  color:red; }

.body {  color:#ff00ff;

#curveball {  color:green; }

  • .test
  • .body
  • #curveball
  • color

Q10. What are advantages of using bootstrap? (select all that apply)

  • It is free
  • It sets up default styles that look more modern than the browser’s default styles
  • It provides ready made design elements such as navbars
  • It provides a responsive grid system

Week 3: Responsive Website Basics: Code with HTML, CSS, and JavaScript Quiz Answers

Quiz 1: Introduction to JavaScript

Q1. When you interact with a web page it has to reload from the server every time you make a small change

  • TRUE
  • FALSE

Q2. What is the relationship between Java and JavaScript

  • They are versions of the same language
  • They are completely different languages

Q3. JavaScript is a language only used for handling mouse events.

  • TRUE
  • FALSE

Quiz 2: Responding to mouse clicks

Q1. What does the onclick attribute do?

  • Says how the elements style should change when it is clicked
  • Says what script should be called when an element is clicked

Q2. What is wrong with this call to alert? alert(Hello World);

  • Hello World should be in quotes.
  • There cannot be a space in the arguments to a function

Q3. What is the purpose of semi-colons (;) in JavaScript

  • starting a comment
  • ending a line of code

Quiz 3: The Console

Q1. What is the console used for?

  • print out debugging information
  • playing web based games

Q2. What does this code do?

1 a.b();

  • calls a function called a with an argument called b
  • calls a function called b on an object called a

Q3. What are objects?

  • data that is passed in to functions
  • they represent things in the program, like documents or HTML elements

Quiz 4: Manipulating HTML elements

Q1. What is jQuery useful for?

  • manipulating the HTML elements of a web page
  • querying information from a database

Q2. What is $?

  • an object that represents the whole web page
  • A shorthand for the function JQuery

Q3. What does this code do?

1 $(“.button”).html(“hello”);

  • sets the the html content of all objects with class “button” to “hello”
  • displays “hello” when you click on a button

Quiz 5: Script tag

Q1. Why would you create your own function?

  • to bring together a lot of lines of JavaScript so you can easily call them together
  • add a new type of custom HTML tag

Q2. What is a script tag used for?

  • including JavaScript in an html page
  • correctly formatting screenplays

Q3. What is wrong with the following code:

123 function setHTML(text){ $(“#myelement”).html(mytext); }

  • you cannot have capital letters in a function name
  • mytext does not match the argument name, which is “text”

Quiz 6: Anonymous functions

Q1. With JavaScript you can change the behaviour of an element when it is clicked on at any time as the web page is running

  • TRUE
  • FALSE

Q2. What do you call a function that you pass directly into another function without giving it a name?

  • An anonymous function
  • A direct function

Q3. What does this code do? a(function (){console.log(“c”)});

  • passes an anonymous function to a
  • calls a function called a which prints “b” to the console

Quiz 7: Beginning JavaScript summary quiz

Q1. Which language is used to add real time interaction to web pages?

  • CSS
  • Java
  • HTML
  • JavaScript

Q2. Which of these aspects of a web page would use JavaScript functions?

  • The authors contact details
  • What happens when you click on a button.
  • The colour of the navigation bar
  • WebGL games

Q3. How would you write a function that takes an argument, and you can call like this: “say(‘hello’);”?

  • 1

2

3

function say(word){  alert(word);  }

  • 1

2

3

function say{hello}( alert(hello); ) say hello(){ alert(hello); }

  • 1

2

3

say hello(){  alert(hello);  }

Q4. To implement a hover event you need to do something when the mouse enters and then change it back when it exits. The jQuery hover function takes 2 functions as arguments, how would you change the color as you hover over it?

  • 1

2

3

4

5

$("#title").hover(enter(){ $("#title").css("color", "red");},  exit(){$("#title").css("color", "black"); })

  • 1

2

3

4

5

$("#title").hover(function(){$("#enter").css("color", "red"); }, function(){$("#exit").css("color", "black"); })

  • 1

2

3

4

$("#title").hover(function(){ $("#title").css("color", "red");  $("#title").css("color", "black"); })

  • 1

2

3

4

5

6

$("#title").hover(function(){ $("#title").css("color", "red"); }, 

function(){ $("#title").css("color", "black"); })

Q5. The HTML document object has a function “getElementById”. How would you get the element with id “title”?

  • 1 getElementById(document, "title");
  • 1 title.getElementById("document");
  • 1 document.getElementById("title");
  • 1 document(“getElementById”, "title");

Q6. What is wrong with this jquery code?

1 $("h1.title").html($("#chapterTitle"+3));

  • It passes in $(“#chapterTitle”+3) but that isn’t a piece of text
  • It is trying to call $ which is not a valid function name
  • It uses two selectors: h1 and .title, when it should have one.
  • It is trying to add a string (text) to a number

Q7. How would you make the element react when the mouse moves into it?

  • 1

     

    Hello </h1 id=”title” onmouseenter=”alert(‘hello’);” >

  • 1

     

    Hello </h1 id=”mouseenter” onclick=”alert(‘hello’);” >

  • 1 Hello</mouseenter id="title" onclick="alert('hello');" >
  • 1

     

    Hello </h1 id=”title” onclick=”mouseenter(‘hello’);” >

Q8. What does this code do?

1

2

3

4

5

function no(){  $(this).html("I'm offended"); }

$("#myfavouritebit").mouseleave(no());

  • doesn’t work: “this” is not a valid css selector
  • doesn’t work: you can only use anonymous functions to respond to events
  • changes the content of the element with id “myfavouritebit” when the mouse moves out of it
  • changes the content of the element with id “this” when the mouse moves out of the element with id “myfavouritebit”

Q9. How do you show the content of an html element in popup dialog?

  • 1 $("#title").alert(html());
  • 1 $("#title").alert();
  • 1 $("#title").html(alert());
  • 1 alert($("#title").html());

Q10. The jQuery function “css” sets css parameters of an element. How would you change the background color of all list items with class “emphasised”?

  • 1 $(“css”).li.emphasised("color", "red");
  • 1 li.emphasised.css("color", "red");
  • 1 $('li, .emphasised').css('background', 'red')
  • 1 $('li.emphasised').css('background', 'red')

Week 4: Responsive Website Basics: Code with HTML, CSS, and JavaScript Quiz Answers

Quiz 1: Variables

Q1. What is a variable?

  • A named piece of code that can be used to change values
  • A named location in memory that you can use to store values

Q2. What is the correct way to create a new variable called “a”?

  • variable a : 3;
  • var a = 3;

Q3. Once you set the value of a variable you cannot change it.

  • TRUE
  • FALSE

Quiz 2: Using variables

Q1. What does this code do?

1 counter = counter + 1;

  • Sets the variable counter to 1
  • Adds one to the variable counter.

Q2. What does this code print out?

1 var myVar = 1;console.log(myVar + 1);

  • 2
  • 1

Q3. What does this code print out?

1

2

3

var myVar = 1;

myVar + 1;

console.log(myVar);

  • 1
  • 2

Quiz 3: Variables in practice

Q1. What does this code produce? “one” + 2

  • “one2”
  • 3

Q2. How would you implement a backwards button?

  • 34 $(“#backward”).click(function (){ counter = counter + 1; $(“#image”+counter-1).click(); });
  • 1234

Quiz 4: If statements

Q1. What does an if statement let you do?

  • make a choice of whether to run some code or not
  • repeat code many times

Q2. What does this code mean? (myVariable < 3)

  • myVariable is less than 3
  • myVariable becomes equal to 3

Q3. What does this code do? var myVar = 4;if (myVar > 4){ console.log(“yes”);}

  • prints yes
  • does nothing

Quiz 5: Boolean variables

Q1. What does setInterval do?

  • Call a function at regular intervals
  • Controls the page load time

Q2. What values can a boolean variable have?

  • yes, no
  • true, false
  • Any number

Q3. What does this code do?

1 excited = !excited;

  • increases the variable excited
  • makes the variable excited equal to not its old value

Quiz 6: eReader example

Q1. What does this code do? $(this).width()*0.3

  • sets the width of this element to 0.3
  • calculates 30% of the width of this element

Q2. What is “this” in JavaScript

  • It can mean different things in different situations
  • It represents the element that an event has happened to

Q3. What does this code do? $(“.scene”).

  • Get all elements with class “scene”
  • Gets the element with id “scene”

Quiz 7: Going deeper into JavaScript summary quiz

Q1. What does this code do?

1 var a = 3;

  • creates a new function with an argument 3
  • adds 3 to the variable 3
  • calls a function called “a” with an argument 3
  • creates a new variable with value 3

Q2. If you had a variable called “a” How would you set a new variable “b” to one more than a?

  • var b = a + 1;
  • var a + 1 = b;
  • var b = 1;
  • var a = b + 1

Q3. Which of these is a correct if statement?

  • 123 if {a > 3}( console.log(“hello”); )
  • 123 if myif(a > 3){ console.log(“hello”); }
  • 123 if (a > 3){ console.log(“hello”);}
  • 123 if a > 3 {}[ console.log(“hello”); ]

Q4. To create a condition where two things are equal we use two equals signs == (to distinguish it from one = which sets the value of a variable). How would you write a condition to check if variable a is one less than variable b?

  • a == b – 1
  • a == {b – 1}
  • a == {b == -1}
  • a == b

Q5. If you are going backwards through 4 images with a counter, how do you loop back to the end when the counter goes below 1?

  • 123 if(counter < 1){ counter = 4; }
  • 123 if(counter < 1){ counter = 1; }
  • 123 if(counter > 4){ counter = 4;}
  • 123 if(counter > 1){ counter = 1; }

Q6. How would you set an interval so function “f” gets called every half second?

  • 1 setInterval(f, 1/2);
  • 1 setInterval(f, 0.5);
  • 1 setInterval(f, 1/120);
  • 1 setInterval(f, 500);

Q7. What is content of the element with id “number” at the end of this code?

123 var myVar = 1;

$(“#number”).html(myVar+1);

myVar = myVar + 1;

  • 1
  • 2
  • 4
  • 3

Q8. How do you save the content of an html element to a variable?

  • 1 string content = $(“#title”).html();
  • 1 var content = $(“#title”).html();
  • 1 $(“#title”).html(var content);
  • 1 var content = $(“#title”);

Q9. After this code, what is the content of element “title”?

12345678

var number = 1;

if(number == 1){

$(“#title”).html(“chapter” + number + 1);

}

if(number == 2){

number = number + 2;

}

$(“#title”).html(“chapter” + number);

  • chapter4
  • chapter3
  • chapter1
  • chapter2

Q10. What gets printed out by this code? (select all that are printed)

12345678910111213141516

var a = 1;

if (a == 1){

console.log(“one”);

a = a + 1;

}

if (a == 1){

console.log(“two”);

}

a = a + 1;

if (a == 2){

  • one
  • four
  • two
  • three
Conclusion:

I hope this Responsive Website Basics: Code with HTML, CSS, and JavaScript Coursera Quiz Answers would be useful for you to learn something new from the Course. If it helped you, don’t forget to bookmark our site for more Quiz Answers.

This course is intended for audiences of all experiences who are interested in learning about new skills in a business context; there are no prerequisite courses.

Keep Learning!

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!