HTML/JS
CSS
Explain the Code
Find the Error!
100

2 examples of things HTML can display. 

- Text, Images, Videos, Links, Etc 

100

What does CSS control? 

A. Headings

B. Actions

C. Style

D. Organization 

C. Style

100

Explain what this HTML will display 

<h1>Welcome!</h1>

Displays "Welcome!" as a large heading.

100

let score = 10;
alert(scor);


The variable is named score, but the code uses scor.

200

What does this display? <h1>Hello!</h1>

(you may type the code into OneCompiler to see) 


A large heading saying Hello!

200

What does font-size: 30px; change?

The size of the text 

200

What color is the background of the webpage?

body {
  background-color: lightblue;
}

h1 {

  font-family : Arial;

  color : purple;

button {

 background-color: orange;

}



The background is light blue.

200

let x = 5;
alert(y);

What will display?

Nothing!

300

A button is clicked, and a message suddenly appears on the screen. Which language could make that happen?

Javascript

300

3 examples of what CSS changes/controls

Background and Button Colors, Font Size, Font type, Font Color, Shadows, etc

300

button {
  box-shadow: 5px 5px 5px gray;
}

 What visual effect and color does this code add to the button?


 A gray shadow behind the button.

300

h1 {
  color: blue
  font-size: 30px;
} 

Whats missing? 

a semicolon after color : blue


400

let score = 10;
score = score + 5;
alert(score);

(alert will display text)

What displays on the screen?

15 

400

button {
  background-color: pink;
  ________: 20px;
}

 What CSS  would you write in to make the button's text larger?


font-size

400

button {
  border-radius: 15px;
}

What will this do? 

Make the button more rounded

400

button {
  background-color: pink;
  font-size: 20;
}

what is missing? 

Should be 20px 

500

What happens when I click the button? 

(you may put the code into OneCompilerHtml, but you have to explain how it works)

<button onclick="addNumbers()">Click Me!</button>

<script>
function addNumbers() {
  let x = 5;
  let y = 3;
  alert(x + y);
}
</script>

The display is 8. 

500

What color will the heading be, and what color will the paragraph's background be? 

<h1>Welcome!</h1>
<p>My Website</p>

.title {
  color: red;
}

h1 {
  color: blue;
}
p {
  background-color: yellow;
}

Header will be blue and background would be yellow

500

let name = "Alex";

let firstName = "Lucy"; 


alert("Hello " + name);

What is displayed?

Hello Alex

500

The programmer wants the button to turn blue when hovered over, but it never does. What could be wrong?

button {
  background-color: pink;
  color: white;
  border-radius: 15px;
}

button:hover {
  background-color blue;
} 


a : is missing after background-color

should be 

 background-color : blue;