2 examples of things HTML can display.
- Text, Images, Videos, Links, Etc
What does CSS control?
A. Headings
B. Actions
C. Style
D. Organization
C. Style
Explain what this HTML will display
<h1>Welcome!</h1>
Displays "Welcome!" as a large heading.
let score = 10;
alert(scor);
The variable is named score, but the code uses scor.
What does this display? <h1>Hello!</h1>
(you may type the code into OneCompiler to see)
A large heading saying Hello!
What does font-size: 30px; change?
The size of the text
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.
let x = 5;
alert(y);
What will display?
Nothing!
A button is clicked, and a message suddenly appears on the screen. Which language could make that happen?
Javascript
3 examples of what CSS changes/controls
Background and Button Colors, Font Size, Font type, Font Color, Shadows, etc
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.
h1 {
color: blue
font-size: 30px;
}
Whats missing?
a semicolon after color : blue
let score = 10;
score = score + 5;
alert(score);
(alert will display text)
What displays on the screen?
15
button {
background-color: pink;
________: 20px;
}
What CSS would you write in to make the button's text larger?
font-size
button {
border-radius: 15px;
}
What will this do?
Make the button more rounded
button {
background-color: pink;
font-size: 20;
}
what is missing?
Should be 20px
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.
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
let name = "Alex";
let firstName = "Lucy";
alert("Hello " + name);
What is displayed?
Hello Alex
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;